Added Select Page

explorer/index.html

@@ -15794,6 +15794,8 @@ var $author$project$Internal$Material$TextInput$textInput = function (palette) {
 							$mdgriffith$elm_ui$Element$Border$color(
 							$author$project$Widget$Material$Color$fromColor(palette.primary))
 						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280)),
 					$mdgriffith$elm_ui$Element$mouseOver(
 					_List_fromArray(
 						[
@@ -19675,7 +19677,9 @@ var $author$project$Internal$Material$PasswordInput$passwordInput = function (pa
 						[
 							$mdgriffith$elm_ui$Element$Border$shadow(
 							$author$project$Widget$Material$Color$shadow(2))
-						]))
+						])),
+					$mdgriffith$elm_ui$Element$width(
+					$mdgriffith$elm_ui$Element$px(280))
 				]))
 	};
 };
@@ -19791,17 +19795,19 @@ var $author$project$Page$PasswordInput$SetPasswordInput = function (a) {
 };
 var $author$project$Page$PasswordInput$view = F2(
 	function (_v0, model) {
+		var palette = _v0.palette;
 		return {
 			attributes: _List_Nil,
 			body: A2(
 				$mdgriffith$elm_ui$Element$column,
 				_List_fromArray(
 					[
-						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
+						$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill),
+						$mdgriffith$elm_ui$Element$spacing(8)
 					]),
 				_List_fromArray(
 					[
-						$mdgriffith$elm_ui$Element$text('Try autofill to fill out this field'),
+						$mdgriffith$elm_ui$Element$text('Try  fill out these fields using autofill'),
 						A2(
 						$mdgriffith$elm_ui$Element$row,
 						_List_fromArray(
@@ -19819,21 +19825,9 @@ var $author$project$Page$PasswordInput$view = F2(
 									]),
 								$mdgriffith$elm_ui$Element$text('Current Password')),
 								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-									]),
-								A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-										]),
-									A2(
-										$author$project$Widget$currentPasswordInput,
-										$author$project$Widget$Material$passwordInput($author$project$Widget$Material$defaultPalette),
-										{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})))
+								$author$project$Widget$currentPasswordInput,
+								$author$project$Widget$Material$passwordInput(palette),
+								{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.passwordInput})
 							])),
 						A2(
 						$mdgriffith$elm_ui$Element$row,
@@ -19852,21 +19846,9 @@ var $author$project$Page$PasswordInput$view = F2(
 									]),
 								$mdgriffith$elm_ui$Element$text('New Password')),
 								A2(
-								$mdgriffith$elm_ui$Element$el,
-								_List_fromArray(
-									[
-										$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$shrink)
-									]),
-								A2(
-									$mdgriffith$elm_ui$Element$el,
-									_List_fromArray(
-										[
-											$mdgriffith$elm_ui$Element$width($mdgriffith$elm_ui$Element$fill)
-										]),
-									A2(
-										$author$project$Widget$newPasswordInput,
-										$author$project$Widget$Material$passwordInput($author$project$Widget$Material$defaultPalette),
-										{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})))
+								$author$project$Widget$newPasswordInput,
+								$author$project$Widget$Material$passwordInput(palette),
+								{label: 'Chips', onChange: $author$project$Page$PasswordInput$SetNewPasswordInput, placeholder: $elm$core$Maybe$Nothing, show: false, text: model.newInput})
 							])),
 						$mdgriffith$elm_ui$Element$text(
 						((model.newInput !== '') && _Utils_eq(model.newInput, model.passwordInput)) ? 'Yeay, the two passwords match!' : '')

explorer/src/Main.elm

@@ -3,11 +3,13 @@ module Main exposing (main)
 import Element
 import Page.Button
 import Page.PasswordInput
+import Page.Select
 import UIExplorer
 
 
 pages =
     UIExplorer.firstPage "Button" Page.Button.page
+        |> UIExplorer.nextPage "Select" Page.Select.page
         |> UIExplorer.nextPage "Password Input" Page.PasswordInput.page
 
 

explorer/src/Page.elm

@@ -1,9 +1,9 @@
-module Page exposing (create, viewTile)
+module Page exposing (create, demo, viewTile)
 
 import Element exposing (Element)
 import UIExplorer exposing (Page)
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Group, Tile, TileMsg)
+import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg)
 import Widget.Material as Material exposing (Palette)
 import Widget.Material.Typography as Typography
 
@@ -21,17 +21,17 @@ create :
     , demo : Tile model msg ()
     }
     -> Page ( ( ( (), () ), ( StorySelectorModel, () ) ), model ) (TileMsg (TileMsg (TileMsg () msg1) (TileMsg StorySelectorMsg ())) msg) ()
-create { title, description, book, demo } =
+create config =
     Tile.static []
         (\_ _ ->
-            [ title |> Element.text |> Element.el Typography.h3
-            , description |> Element.text |> List.singleton |> Element.paragraph []
+            [ config.title |> Element.text |> Element.el Typography.h3
+            , config.description |> Element.text |> List.singleton |> Element.paragraph []
             ]
                 |> Element.column [ Element.spacing 32 ]
         )
         |> Tile.first
-        |> Tile.nextGroup book
-        |> Tile.next demo
+        |> Tile.nextGroup config.book
+        |> Tile.next config.demo
         |> Tile.page
 
 
@@ -59,3 +59,21 @@ viewTile title content =
             , content
             ]
     }
+
+
+demo :
+    (Context -> model -> Element msg)
+    ->
+        (Context
+         -> model
+         -> { title : Maybe String, position : Position, attributes : List b, body : Element msg }
+        )
+demo fun context model =
+    fun context model
+        |> (\body ->
+                { title = Just "Interactive Demo"
+                , position = Tile.FullWidthTile
+                , attributes = []
+                , body = body
+                }
+           )

explorer/src/Page/Button.elm

@@ -5,22 +5,17 @@ module Page.Button exposing (page)
 
 import Element exposing (Element)
 import Element.Background as Background
-import Element.Font
-import Material.Icons as MaterialIcons exposing (offline_bolt)
+import Material.Icons as MaterialIcons
 import Material.Icons.Types exposing (Coloring(..))
 import Page
-import UIExplorer
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg)
-import Widget exposing (ButtonStyle)
+import UIExplorer.Tile as Tile exposing (Context, Tile, TileMsg)
+import Widget
 import Widget.Customize as Customize
-import Widget.Icon as Icon exposing (Icon)
+import Widget.Icon as Icon
 import Widget.Material as Material
     exposing
-        ( Palette
-        , containedButton
-        , darkPalette
-        , defaultPalette
+        ( containedButton
         , outlinedButton
         , textButton
         )
@@ -55,7 +50,7 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.button"
 
-        viewTextButton button text icon onPress { palette } () =
+        viewTextButton button text _ onPress { palette } () =
             Widget.textButton
                 (button palette
                     |> Customize.elementButton
@@ -98,10 +93,9 @@ book =
         --Adding a option for different styles.
         |> Story.addStory
             (Story.optionListStory "Style"
-                containedButton
-                [ ( "contained", containedButton )
-                , ( "outlined", outlinedButton )
-                , ( "text", textButton )
+                ( "Contained", containedButton )
+                [ ( "Outlined", outlinedButton )
+                , ( "Text", textButton )
                 ]
             )
         --Changing the text of the label
@@ -111,15 +105,12 @@ book =
             )
         --Change the Icon
         |> Story.addStory
-            (Story.optionListStory "Icon"
-                (MaterialIcons.done
+            (Story.boolStory "With Icon"
+                ( MaterialIcons.done
                     |> Icon.elmMaterialIcons Color
+                , always Element.none
                 )
-                [ ( "done"
-                  , MaterialIcons.done
-                        |> Icon.elmMaterialIcons Color
-                  )
-                ]
+                True
             )
         --Should an event be triggered when pressing the button?
         |> Story.addStory
@@ -188,7 +179,7 @@ subscriptions _ =
     Sub.none
 
 
-view : Context -> Int -> { title : Maybe String, position : Position, attributes : List b, body : Element Msg }
+view : Context -> Model -> Element Msg
 view { palette } model =
     let
         style =
@@ -201,98 +192,93 @@ view { palette } model =
             , cardColumn = Material.cardColumn palette
             }
     in
-    { title = Just "Interactive Demo"
-    , position = Tile.FullWidthTile
-    , attributes = []
-    , body =
-        [ model
-            |> String.fromInt
-            |> Element.text
-            |> Element.el
-                (Typography.h4
-                    ++ [ Element.centerX, Element.centerY ]
-                )
-            |> List.singleton
-            |> Widget.column
-                (style.cardColumn
-                    |> Customize.elementColumn
-                        [ Element.centerX
-                        , Element.width <| Element.px 128
+    [ model
+        |> String.fromInt
+        |> Element.text
+        |> Element.el
+            (Typography.h4
+                ++ [ Element.centerX, Element.centerY ]
+            )
+        |> List.singleton
+        |> Widget.column
+            (style.cardColumn
+                |> Customize.elementColumn
+                    [ Element.centerX
+                    , Element.width <| Element.px 128
+                    , Element.height <| Element.px 128
+                    , Widget.iconButton style.iconButton
+                        { text = "+2"
+                        , icon =
+                            MaterialIcons.exposure_plus_2
+                                |> Icon.elmMaterialIcons Color
+                        , onPress =
+                            Increase 2
+                                |> Just
+                        }
+                        |> Element.el [ Element.alignRight ]
+                        |> Element.inFront
+                    ]
+                |> Customize.mapContent
+                    (Customize.element
+                        [ Element.width <| Element.px 128
                         , Element.height <| Element.px 128
-                        , Widget.iconButton style.iconButton
-                            { text = "+2"
-                            , icon =
-                                MaterialIcons.exposure_plus_2
-                                    |> Icon.elmMaterialIcons Color
-                            , onPress =
-                                Increase 2
-                                    |> Just
-                            }
-                            |> Element.el [ Element.alignRight ]
-                            |> Element.inFront
+                        , Material.defaultPalette.secondary
+                            |> MaterialColor.fromColor
+                            |> Background.color
                         ]
-                    |> Customize.mapContent
-                        (Customize.element
-                            [ Element.width <| Element.px 128
-                            , Element.height <| Element.px 128
-                            , Material.defaultPalette.secondary
-                                |> MaterialColor.fromColor
-                                |> Background.color
-                            ]
-                        )
-                )
-        , [ [ Widget.textButton style.textButton
-                { text = "Reset"
-                , onPress =
-                    Reset
+                    )
+            )
+    , [ [ Widget.textButton style.textButton
+            { text = "Reset"
+            , onPress =
+                Reset
+                    |> Just
+            }
+        , Widget.button style.outlinedButton
+            { text = "Decrease"
+            , icon =
+                MaterialIcons.remove
+                    |> Icon.elmMaterialIcons Color
+            , onPress =
+                if model > 0 then
+                    Decrease 1
                         |> Just
-                }
-            , Widget.button style.outlinedButton
-                { text = "Decrease"
-                , icon =
-                    MaterialIcons.remove
-                        |> Icon.elmMaterialIcons Color
-                , onPress =
-                    if model > 0 then
-                        Decrease 1
-                            |> Just
 
-                    else
-                        Nothing
-                }
-            ]
-                |> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ])
-          , [ Widget.button style.containedButton
-                { text = "Increase"
-                , icon =
-                    MaterialIcons.add
-                        |> Icon.elmMaterialIcons Color
-                , onPress =
-                    Increase 1
-                        |> Just
-                }
-            ]
-                |> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ])
-          ]
-            |> Widget.row
-                (style.row
-                    |> Customize.elementRow [ Element.width <| Element.fill ]
-                    |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
-                )
+                else
+                    Nothing
+            }
         ]
-            |> Widget.column
-                (style.column
-                    |> Customize.elementColumn [ Element.width <| Element.fill ]
-                    |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
-                )
-    }
+            |> Widget.row (style.row |> Customize.elementRow [ Element.alignRight ])
+      , [ Widget.button style.containedButton
+            { text = "Increase"
+            , icon =
+                MaterialIcons.add
+                    |> Icon.elmMaterialIcons Color
+            , onPress =
+                Increase 1
+                    |> Just
+            }
+        ]
+            |> Widget.row (style.row |> Customize.elementRow [ Element.alignLeft ])
+      ]
+        |> Widget.row
+            (style.row
+                |> Customize.elementRow [ Element.width <| Element.fill ]
+                |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
+            )
+    ]
+        |> Widget.column
+            (style.column
+                |> Customize.elementColumn [ Element.width <| Element.fill ]
+                |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
+            )
 
 
 demo : Tile Model Msg ()
 demo =
     { init = always init
     , update = update
-    , view = view
+    , view = Page.demo view
     , subscriptions = subscriptions
     }
 

explorer/src/Page/PasswordInput.elm

@@ -1,31 +1,17 @@
 module Page.PasswordInput exposing (Model, Msg, init, page, subscriptions, update, view)
 
-import Browser
 import Element exposing (Element)
-import Element.Background as Background
-import Element.Font
 import Element.Input as Input
-import Material.Icons as MaterialIcons exposing (offline_bolt)
 import Material.Icons.Types exposing (Coloring(..))
 import Page
-import Set exposing (Set)
-import UIExplorer exposing (Page)
-import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Context, Group, Position, Tile, TileMsg)
-import Widget exposing (ButtonStyle, ColumnStyle, PasswordInputStyle)
-import Widget.Customize as Customize
-import Widget.Icon as Icon exposing (Icon)
+import UIExplorer.Story as Story
+import UIExplorer.Tile exposing (Context, Tile)
+import Widget
 import Widget.Material as Material
     exposing
-        ( Palette
-        , containedButton
-        , darkPalette
+        ( darkPalette
         , defaultPalette
-        , outlinedButton
-        , textButton
         )
-import Widget.Material.Color as MaterialColor
-import Widget.Material.Typography as Typography
 
 
 {-| The title of this page
@@ -46,7 +32,7 @@ description =
 -}
 viewFunctions =
     let
-        viewCurrentPassword palette text placeholder label _ _ =
+        viewCurrentPassword text placeholder label { palette } () =
             Widget.currentPasswordInput (Material.passwordInput palette)
                 { text = text
                 , placeholder = placeholder
@@ -57,7 +43,7 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.currentPasswordInput"
 
-        viewNewPassword palette text placeholder label _ _ =
+        viewNewPassword text placeholder label { palette } () =
             Widget.newPasswordInput (Material.passwordInput palette)
                 { text = text
                 , placeholder = placeholder
@@ -76,28 +62,19 @@ viewFunctions =
 book =
     Story.book (Just "Options")
         viewFunctions
-        |> Story.addStory
-            (Story.optionListStory "Palette"
-                darkPalette
-                [ ( "dark", darkPalette )
-                , ( "default", defaultPalette )
-                ]
-            )
         |> Story.addStory
             (Story.textStory "Text"
                 "123456789"
             )
         |> Story.addStory
-            (Story.optionListStory "Placeholder"
-                Nothing
-                [ ( "Yes"
-                  , "password"
-                        |> Element.text
-                        |> Input.placeholder []
-                        |> Just
-                  )
-                , ( "No", Nothing )
-                ]
+            (Story.boolStory "Placeholder"
+                ( "password"
+                    |> Element.text
+                    |> Input.placeholder []
+                    |> Just
+                , Nothing
+                )
+                True
             )
         |> Story.addStory
             (Story.textStory "Label"
@@ -148,52 +125,48 @@ subscriptions _ =
     Sub.none
 
 
+view : Context -> Model -> Element Msg
 view { palette } model =
-    { title = Just "Interactive Demo"
-    , position = Tile.FullWidthTile
-    , attributes = []
-    , body =
-        [ "Try  fill out these fields using autofill" |> Element.text
-        , [ "Current Password"
-                |> Element.text
-                |> Element.el [ Element.width <| Element.fill ]
-          , Widget.currentPasswordInput (Material.passwordInput palette)
-                { text = model.passwordInput
-                , placeholder = Nothing
-                , label = "Chips"
-                , onChange = SetPasswordInput
-                , show = False
-                }
-          ]
-            |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
-        , [ "New Password"
-                |> Element.text
-                |> Element.el [ Element.width <| Element.fill ]
-          , Widget.newPasswordInput (Material.passwordInput palette)
-                { text = model.newInput
-                , placeholder = Nothing
-                , label = "Chips"
-                , onChange = SetNewPasswordInput
-                , show = False
-                }
-          ]
-            |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
-        , Element.text <|
-            if (model.newInput /= "") && (model.newInput == model.passwordInput) then
-                "Yeay, the two passwords match!"
+    [ "Try  fill out these fields using autofill" |> Element.text
+    , [ "Current Password"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+      , Widget.currentPasswordInput (Material.passwordInput palette)
+            { text = model.passwordInput
+            , placeholder = Nothing
+            , label = "Chips"
+            , onChange = SetPasswordInput
+            , show = False
+            }
+      ]
+        |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
+    , [ "New Password"
+            |> Element.text
+            |> Element.el [ Element.width <| Element.fill ]
+      , Widget.newPasswordInput (Material.passwordInput palette)
+            { text = model.newInput
+            , placeholder = Nothing
+            , label = "Chips"
+            , onChange = SetNewPasswordInput
+            , show = False
+            }
+      ]
+        |> Element.row [ Element.width <| Element.fill, Element.spaceEvenly ]
+    , Element.text <|
+        if (model.newInput /= "") && (model.newInput == model.passwordInput) then
+            "Yeay, the two passwords match!"
 
-            else
-                ""
-        ]
-            |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
-    }
+        else
+            ""
+    ]
+        |> Element.column [ Element.width <| Element.fill, Element.spacing 8 ]
 
 
 demo : Tile Model Msg ()
 demo =
     { init = always init
     , update = update
-    , view = view
+    , view = Page.demo view
     , subscriptions = subscriptions
     }
 

explorer/src/Page/Select.elm

@@ -0,0 +1,220 @@
+module Page.Select exposing (page)
+
+{-| This is an example Page. If you want to add your own pages, simple copy and modify this one.
+-}
+
+import Element exposing (Element)
+import Element.Background as Background
+import Element.Font
+import Material.Icons as MaterialIcons exposing (offline_bolt)
+import Material.Icons.Types exposing (Coloring(..))
+import Page
+import UIExplorer
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Tile as Tile exposing (Context, Position, Tile, TileMsg)
+import Widget exposing (ButtonStyle)
+import Widget.Customize as Customize
+import Widget.Icon as Icon exposing (Icon)
+import Widget.Material as Material exposing (Palette)
+import Widget.Material.Color as MaterialColor
+import Widget.Material.Typography as Typography
+
+
+{-| The title of this page
+-}
+title : String
+title =
+    "Select"
+
+
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Select buttons group a set of actions using layout and spacing."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewSelectButtonRow style selected options onSelect { palette } () =
+            Widget.select
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+                |> Widget.buttonRow
+                    { elementRow = Material.buttonRow
+                    , content = style palette
+                    }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.buttonRow with Material.buttonRow"
+
+        viewSelectRow style selected options onSelect { palette } () =
+            Widget.select
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+                |> Widget.buttonRow
+                    { elementRow = Material.row
+                    , content = style palette
+                    }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.buttonRow with Material.row"
+
+        viewSelectColumn style selected options onSelect { palette } () =
+            Widget.select
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+                |> Widget.buttonColumn
+                    { elementColumn = Material.column
+                    , content = style palette
+                    }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.buttonColumn"
+    in
+    [ viewSelectButtonRow, viewSelectRow, viewSelectColumn ]
+        |> List.foldl Story.addTile
+            Story.initStaticTiles
+
+
+{-| Let's you play around with the options.
+Note that the order of these stories must follow the order of the arguments from the view functions.
+-}
+book : Tile.Group ( StorySelectorModel, () ) (TileMsg StorySelectorMsg ()) ()
+book =
+    Story.book (Just "Options")
+        viewFunctions
+        --Adding a option for different styles.
+        |> Story.addStory
+            (Story.optionListStory "Style"
+                ( "Contained", Material.containedButton )
+                [ ( "Outlined", Material.outlinedButton )
+                , ( "Text", Material.textButton )
+                , ( "Toggle", Material.toggleButton )
+                ]
+            )
+        --Changing the text of the label
+        |> Story.addStory
+            (Story.optionListStory "Selected"
+                ( "Third", Just 2 )
+                [ ( "Second", Just 1 )
+                , ( "First", Just 0 )
+                , ( "Nothing or Invalid", Nothing )
+                ]
+            )
+        --Change the Icon
+        |> Story.addStory
+            (let
+                default =
+                    [ { icon = always Element.none, text = "42" }
+                    , { icon =
+                            MaterialIcons.done
+                                |> Icon.elmMaterialIcons Color
+                      , text = ""
+                      }
+                    ]
+             in
+             Story.optionListStory "Options"
+                ( "3 Option"
+                , [ { icon = always Element.none, text = "42" }
+                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
+                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "42" }
+                  ]
+                )
+                [ ( "2 Option", default )
+                , ( "1 Option", [ { icon = always Element.none, text = "Apples" } ] )
+                ]
+            )
+        --Should an event be triggered when pressing the button?
+        |> Story.addStory
+            (Story.boolStory "with event handler"
+                ( always <| Just (), always Nothing )
+                True
+            )
+        |> Story.build
+
+
+
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+{- This section here is essentially just a normal Elm program. -}
+
+
+type Model
+    = Selected (Maybe Int)
+
+
+type Msg
+    = ChangedSelected Int
+
+
+init : ( Model, Cmd Msg )
+init =
+    ( Selected Nothing
+    , Cmd.none
+    )
+
+
+update : Msg -> Model -> ( Model, Cmd Msg )
+update msg _ =
+    case msg of
+        ChangedSelected int ->
+            ( Selected <| Just int
+            , Cmd.none
+            )
+
+
+subscriptions : Model -> Sub Msg
+subscriptions _ =
+    Sub.none
+
+
+{-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
+-}
+view : Context -> Model -> Element Msg
+view { palette } (Selected selected) =
+    { selected = selected
+    , options =
+        [ 1, 2, 42 ]
+            |> List.map
+                (\int ->
+                    { text = String.fromInt int
+                    , icon = always Element.none
+                    }
+                )
+    , onSelect = ChangedSelected >> Just
+    }
+        |> Widget.select
+        |> Widget.buttonRow
+            { elementRow = Material.buttonRow
+            , content = Material.toggleButton palette
+            }
+
+
+demo =
+    { init = always init
+    , view = Page.demo view
+    , update = update
+    , subscriptions = subscriptions
+    }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }

explorer/src/UIExplorer/Story.elm

@@ -23,12 +23,12 @@ type alias Story a =
     }
 
 
-optionListStory : String -> a -> List ( String, a ) -> Story a
-optionListStory label default options =
-    { info = OptionListStory label <| List.map Tuple.first options
+optionListStory : String -> ( String, a ) -> List ( String, a ) -> Story a
+optionListStory label first options =
+    { info = OptionListStory label <| List.map Tuple.first (first :: options)
     , toValue =
         \optLabel ->
-            options
+            (first :: options)
                 |> List.foldl
                     (\( key, optvalue ) res ->
                         case ( res, optLabel == key ) of
@@ -42,7 +42,7 @@ optionListStory label default options =
                                 Nothing
                     )
                     Nothing
-                |> Maybe.withDefault default
+                |> Maybe.withDefault (first |> Tuple.second)
     }
 
 
@@ -319,7 +319,7 @@ storyView : Context -> StoryModel -> Element StorySelectorMsg
 storyView context model =
     case model of
         RangeStoryModel label { unit, min, max, value } ->
-            Element.column [ Element.spacing 8 ]
+            Element.column [ Element.spacing 8, Element.width Element.fill ]
                 [ label
                     ++ " ("
                     ++ String.fromInt value
@@ -339,7 +339,7 @@ storyView context model =
                 ]
 
         TextStoryModel label value ->
-            Element.column [ Element.spacing 8 ]
+            Element.column [ Element.spacing 8, Element.width Element.fill ]
                 [ Element.text label |> Element.el Typography.caption
                 , Widget.textInput (Material.textInput context.palette)
                     { chips = []
@@ -351,7 +351,7 @@ storyView context model =
                 ]
 
         OptionListStoryModel label options ->
-            Element.column [ Element.spacing 8 ]
+            Element.column [ Element.spacing 8, Element.width Element.fill ]
                 [ Element.text label |> Element.el Typography.caption
                 , { selected =
                         Just <| SelectList.index options
@@ -421,7 +421,7 @@ storyTile title stories storiesToValue =
               , body =
                     model
                         |> List.map (storyView context)
-                        |> Element.column [ Element.spacing 8 ]
+                        |> Element.column [ Element.spacing 8, Element.width Element.fill ]
               }
             ]
     }

explorer/src/UIExplorer/Tile.elm

@@ -283,7 +283,7 @@ layoutView palette _ view =
         Just string ->
             [ string
                 |> Widget.headerItem (Material.fullBleedHeader palette)
-            , view.body |> Widget.asItem
+            , view.body |> Element.el [ Element.width Element.fill ] |> Widget.asItem
             ]
                 |> Widget.itemList (Material.cardColumn palette)
 
@@ -323,9 +323,7 @@ layoutRowView palette row =
                     ]
                   <|
                     List.map
-                        (layoutView palette
-                            [ Element.height Element.fill ]
-                        )
+                        (layoutView palette [ Element.height Element.fill ])
                     <|
                         List.reverse right
                 ]