feat: controlSectionsに.headingを追加して、Control.headerを置き換える

y047aka · Feb 11, 2024 · ee7395e · ee7395e
1 parent bf5271e
commit ee7395e
Show file tree

Hide file tree

Showing 2 changed files with 33 additions and 36 deletions.
diff --git a/example/src/Main.elm b/example/src/Main.elm
@@ -162,7 +162,8 @@ progressPlayground isDarkMode pm =
         { isDarkMode = isDarkMode
         , preview = Progress.progressWithProps pm
         , controlSections =
-            [ { controls =
+            [ { heading = ""
+              , controls =
                     [ Control.field "Bar"
                         (Control.counter
                             { value = pm.value
@@ -174,9 +175,9 @@ progressPlayground isDarkMode pm =
                     , Control.comment "A progress element can contain a bar visually indicating progress"
                     ]
               }
-            , { controls =
-                    [ Control.header "Config"
-                    , Control.field "Indicating"
+            , { heading = "Config"
+              , controls =
+                    [ Control.field "Indicating"
                         (Control.bool
                             { id = "indicating"
                             , value = pm.indicating
@@ -254,9 +255,9 @@ progressPlayground isDarkMode pm =
                         )
                     ]
               }
-            , { controls =
-                    [ Control.header "Content"
-                    , Control.field "Unit"
+            , { heading = "Content"
+              , controls =
+                    [ Control.field "Unit"
                         (Control.string
                             { value = pm.unit
                             , onInput = (\string ps -> { ps | unit = string }) >> UpdateProgress
@@ -307,7 +308,8 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ]
                 , p [] [ text "よって、われらの各自の政府は、サンフランシスコ市に会合し、全権委任状を示してそれが良好妥当であると認められた代表者を通じて、この国際連合憲章に同意したので、ここに国際連合という国際機構を設ける。" ]
                 ]
         , controlSections =
-            [ { controls =
+            [ { heading = ""
+              , controls =
                     [ Control.field "-webkit-font-smoothing"
                         (Control.select
                             { value = tm.webkitFontSmoothing |> Typography.webkitFontSmoothingToString
@@ -338,9 +340,9 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ]
                         )
                     ]
               }
-            , { controls =
-                    [ Control.header "Typography"
-                    , Control.field "font-family"
+            , { heading = "Typography"
+              , controls =
+                    [ Control.field "font-family"
                         (Control.select
                             { value = tm.typography.font.families |> String.concat
                             , options = [ Css.sansSerif.value, Css.serif.value ]
@@ -574,9 +576,9 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ]
                         )
                     ]
               }
-            , { controls =
-                    [ Control.header "TextBlock"
-                    , Control.field "word-break"
+            , { heading = "TextBlock"
+              , controls =
+                    [ Control.field "word-break"
                         (Control.select
                             { value = tm.typography.textBlock.wordBreak |> Maybe.map Typography.wordBreakToString |> Maybe.withDefault "-"
                             , options = [ "normal", "break-all", "keep-all", "auto-phrase" ]
@@ -638,7 +640,7 @@ Have Resolved to Combine our Efforts to Accomplish these Aims""" ]
 playground :
     { isDarkMode : Bool
     , preview : Html msg
-    , controlSections : List { controls : List (Control msg) }
+    , controlSections : List { heading : String, controls : List (Control msg) }
     }
     -> Html msg
 playground { isDarkMode, preview, controlSections } =
@@ -670,9 +672,8 @@ playground { isDarkMode, preview, controlSections } =
                 ]
             ]
             (List.map
-                (.controls
-                    >> List.map Control.render
-                    >> div
+                (\{ heading, controls } ->
+                    div
                         [ css
                             [ padding (Css.em 0.75)
                             , displayFlex
@@ -682,6 +683,18 @@ playground { isDarkMode, preview, controlSections } =
                             , palette (Palette.controlSection isDarkMode)
                             ]
                         ]
+                        (header
+                            [ css
+                                [ displayFlex
+                                , justifyContent spaceBetween
+                                , alignItems center
+                                , fontWeight bold
+                                , empty [ display none ]
+                                ]
+                            ]
+                            [ text heading ]
+                            :: List.map Control.render controls
+                        )
                 )
                 controlSections
             )

diff --git a/package/src/Emaki/Control.elm b/package/src/Emaki/Control.elm
@@ -2,8 +2,7 @@ module Emaki.Control exposing
     ( Control
     , StringControl, BoolControl, SelectControl, RadioControl, CounterControl, BoolAndStringControl
     , render
-    , comment, header, string, bool, select, radio, counter, boolAndString
-
+    , comment, string, bool, select, radio, counter, boolAndString
     , field
     , customize
     )
@@ -13,7 +12,7 @@ module Emaki.Control exposing
 @docs Control
 @docs StringControl, BoolControl, SelectControl, RadioControl, CounterControl, BoolAndStringControl
 @docs render
-@docs comment, header, string, bool, select, radio, counter, boolAndString
+@docs comment, string, bool, select, radio, counter, boolAndString
 @docs field
 @docs customize
 
@@ -32,7 +31,6 @@ import Html.Styled.Events exposing (onClick, onInput)
 
 type Control msg
     = Comment String
-    | Header String
     | String (StringControl msg)
     | Bool (BoolControl msg)
     | Select (SelectControl msg)
@@ -93,11 +91,6 @@ comment =
     Comment
 
 
-header : String -> Control msg
-header =
-    Header
-
-
 string : StringControl msg -> Control msg
 string =
     String
@@ -128,8 +121,6 @@ boolAndString =
     BoolAndString
 
 
-
-
 field : String -> Control msg -> Control msg
 field label props =
     Field label props
@@ -156,12 +147,6 @@ render props =
                 ]
                 [ text str ]
 
-        -- TODO: 消す
-        -- https://github.com/y047aka/elm-emaki/pull/29#issue-2128470533
-        Header str ->
-            Html.header [ css [ displayFlex, justifyContent spaceBetween, alignItems center, fontWeight bold ] ]
-                [ text str ]
-
         String ps ->
             input
                 [ type_ "text"
@@ -285,7 +270,6 @@ render props =
                     []
                 ]
 
-
         Field label ps ->
             div
                 [ css