Use list for Tooltip example

styleguide-app/Examples/Tooltip.elm

@@ -10,6 +10,7 @@ import Accessibility.Styled as Html exposing (Html)
 import Category exposing (Category(..))
 import Css
 import Debug.Control as Control exposing (Control)
+import Debug.Control.Extra as ControlExtra
 import Example exposing (Example)
 import Html.Styled.Attributes as Attributes exposing (css, href)
 import KeyboardSupport exposing (Direction(..), Key(..))
@@ -38,7 +39,7 @@ example =
 
 type alias State =
     { openTooltip : Maybe TooltipType
-    , staticExampleSettings : Control ExampleSettings
+    , staticExampleSettings : Control (List (Tooltip.Attribute Never))
     }
 
 
@@ -57,7 +58,7 @@ type TooltipType
 
 type Msg
     = ToggleTooltip TooltipType Bool
-    | SetStaticExampleSettings (Control ExampleSettings)
+    | SetStaticExampleSettings (Control (List (Tooltip.Attribute Never)))
 
 
 update : Msg -> State -> ( State, Cmd Msg )
@@ -149,25 +150,15 @@ viewToggleTip openTooltip =
         ]
 
 
-type alias ExampleSettings =
-    { content : Tooltip.Attribute Never
-    , withoutTail : Bool
-    , direction : Tooltip.Attribute Never
-    , alignment : Tooltip.Attribute Never
-    , width : Tooltip.Attribute Never
-    , padding : Tooltip.Attribute Never
-    }
-
-
-initStaticExampleSettings : Control ExampleSettings
+initStaticExampleSettings : Control (List (Tooltip.Attribute Never))
 initStaticExampleSettings =
-    Control.record ExampleSettings
-        |> Control.field "content" controlContent
-        |> Control.field "withoutTail" controlTail
-        |> Control.field "direction" controlDirection
-        |> Control.field "alignment" controlAlignment
-        |> Control.field "width" controlWidth
-        |> Control.field "padding" controlPadding
+    ControlExtra.list
+        |> ControlExtra.listItem "content" controlContent
+        |> ControlExtra.listItem "withoutTail" controlTail
+        |> ControlExtra.listItem "direction" controlDirection
+        |> ControlExtra.listItem "alignment" controlAlignment
+        |> ControlExtra.listItem "width" controlWidth
+        |> ControlExtra.listItem "padding" controlPadding
 
 
 controlContent : Control (Tooltip.Attribute Never)
@@ -206,9 +197,19 @@ controlContent =
         ]
 
 
-controlTail : Control Bool
+controlTail : Control (Tooltip.Attribute Never)
 controlTail =
-    Control.bool False
+    Control.map
+        (\bool ->
+            if True then
+                Tooltip.withoutTail
+
+            else
+                -- TODO: change `withoutTail` to take
+                -- a bool or expose a `withTail` from Tooltip.
+                Tooltip.css []
+        )
+        (Control.bool False)
 
 
 controlDirection : Control (Tooltip.Attribute Never)
@@ -253,26 +254,14 @@ controlPadding =
         ]
 
 
-viewCustomizableExample : Control ExampleSettings -> Html Msg
+viewCustomizableExample : Control (List (Tooltip.Attribute Never)) -> Html Msg
 viewCustomizableExample controlSettings =
     let
         settings =
             Control.currentValue controlSettings
 
         attributes =
-            [ Tooltip.open True
-            , settings.content
-            , settings.direction
-            , settings.alignment
-            , settings.width
-            , settings.padding
-            ]
-                ++ (if settings.withoutTail then
-                        [ Tooltip.withoutTail ]
-
-                    else
-                        []
-                   )
+            Tooltip.open True :: settings
     in
     Html.div []
         [ Control.view SetStaticExampleSettings controlSettings