Documenting and fixing things up

explorer/src/Page.elm

@@ -1,10 +1,10 @@
-module Page exposing (..)
+module Page exposing (create, viewTile)
 
-import Element
+import Element exposing (Element)
 import UIExplorer exposing (Page)
-import UIExplorer.Story exposing (StorySelectorModel, StorySelectorMsg)
+import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
 import UIExplorer.Tile as Tile exposing (Group, Tile, TileMsg)
-import Widget.Material as Material
+import Widget.Material as Material exposing (Palette)
 import Widget.Material.Typography as Typography
 
 
@@ -33,3 +33,29 @@ create { title, description, book, demo } =
         |> Tile.nextGroup book
         |> Tile.next demo
         |> Tile.page
+
+
+viewTile :
+    String
+    -> Element msg
+    ->
+        { attributes : List (Element.Attribute msg)
+        , body : Element msg
+        , position : Tile.Position
+        , title : Maybe String
+        }
+viewTile title content =
+    { title = Nothing
+    , position = Tile.LeftColumnTile
+    , attributes = []
+    , body =
+        Element.column
+            [ Element.width Element.fill
+            , Element.spacing 8
+            ]
+            [ title
+                |> Element.text
+                |> Element.el Typography.caption
+            , content
+            ]
+    }

explorer/src/Page/Button.elm

@@ -1,5 +1,8 @@
 module Page.Button 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
@@ -8,8 +11,8 @@ import Material.Icons.Types exposing (Coloring(..))
 import Page
 import UIExplorer
 import UIExplorer.Story as Story exposing (StorySelectorModel, StorySelectorMsg)
-import UIExplorer.Tile as Tile exposing (Tile, TileMsg)
-import Widget
+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
@@ -25,43 +28,88 @@ import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
 
 
-page =
-    Page.create
-        { title = "Button"
-        , description = "A simple button"
-        , book = book
-        , demo = demo
-        }
+{-| The title of this page
+-}
+title : String
+title =
+    "Button"
 
 
+{-| The description. I've taken this description directly from the [Material-UI-Specification](https://material.io/components/buttons)
+-}
+description : String
+description =
+    "Buttons allow users to take actions, and make choices, with a single tap."
+
+
+{-| List of view functions. Essentially, anything that takes a Button as input.
+-}
+viewFunctions =
+    let
+        viewButton button text icon onPress { palette } () =
+            Widget.button (button palette)
+                { text = text
+                , icon = icon
+                , onPress = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.button"
+
+        viewTextButton button text icon onPress { palette } () =
+            Widget.textButton
+                (button palette
+                    |> Customize.elementButton
+                        [ Element.alignLeft
+                        , Element.centerY
+                        ]
+                )
+                { text = text
+                , onPress = onPress
+                }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.textButton"
+
+        viewIconButton button text icon onPress { palette } () =
+            Widget.iconButton
+                (button palette
+                    |> Customize.elementButton
+                        [ Element.alignLeft
+                        , Element.centerY
+                        ]
+                )
+                { text = text
+                , icon = icon
+                , onPress = onPress
+                }
+                |> Page.viewTile "Widget.itemButton"
+    in
+    [ viewButton, viewTextButton, viewIconButton ]
+        |> 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")
-        (Story.initStaticTiles
-            |> Story.addTile viewButton
-            |> Story.addTile viewTextButton
-            |> Story.addTile viewIconButton
-         --|> Story.addTile viewButtonSource
-        )
+        viewFunctions
+        --Adding a option for different styles.
         |> Story.addStory
-            (Story.optionListStory "Palette"
-                darkPalette
-                [ ( "dark", darkPalette )
-                , ( "default", defaultPalette )
-                ]
-            )
-        |> Story.addStory
-            (Story.optionListStory "Material button"
+            (Story.optionListStory "Style"
                 containedButton
                 [ ( "contained", containedButton )
                 , ( "outlined", outlinedButton )
                 , ( "text", textButton )
                 ]
             )
+        --Changing the text of the label
         |> Story.addStory
             (Story.textStory "Label"
                 "OK"
             )
+        --Change the Icon
         |> Story.addStory
             (Story.optionListStory "Icon"
                 (MaterialIcons.done
@@ -73,6 +121,7 @@ book =
                   )
                 ]
             )
+        --Should an event be triggered when pressing the button?
         |> Story.addStory
             (Story.boolStory "with event handler"
                 ( Just (), Nothing )
@@ -81,113 +130,11 @@ book =
         |> Story.build
 
 
-viewLabel : String -> Element msg
-viewLabel =
-    Element.el [ Element.width <| Element.px 250 ] << Element.text
 
-
-viewButton palette button text icon onPress _ _ =
-    { title = Just "Button"
-    , position = Tile.LeftColumnTile
-    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
-    , body =
-        Element.row
-            [ Element.width Element.fill
-            , Element.centerY
-            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
-            ]
-            [ Widget.button
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , icon = icon
-                , onPress = onPress
-                }
-            ]
-    }
-
-
-viewTextButton palette button text icon onPress _ _ =
-    { title = Just "Text Button"
-    , position = Tile.LeftColumnTile
-    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
-    , body =
-        Element.row
-            [ Element.width Element.fill
-            , Element.centerY
-            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
-            ]
-            [ Widget.textButton
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , onPress = onPress
-                }
-            ]
-    }
-
-
-viewIconButton palette button text icon onPress _ _ =
-    { title = Just "Icon Button"
-    , position = Tile.LeftColumnTile
-    , attributes = [ Background.color <| MaterialColor.fromColor palette.surface ]
-    , body =
-        Element.row
-            [ Element.width Element.fill
-            , Element.centerY
-            , Element.Font.color <| MaterialColor.fromColor palette.on.surface
-            ]
-            [ Widget.iconButton
-                (button palette
-                    |> Customize.elementButton
-                        [ Element.alignLeft
-                        , Element.centerY
-                        ]
-                )
-                { text = text
-                , icon = icon
-                , onPress = onPress
-                }
-            ]
-    }
-
-
-viewButtonSource palette text icon onPress size _ _ =
-    { title = Just "source code"
-    , position = Tile.FullWidthTile
-    , attributes = []
-    , body =
-        Tile.sourceCode <|
-            """Widget.button
-    (Material.containedButton palette
-          |> Customize.elementButton [ Element.height <| Element.px """
-                ++ String.fromInt size
-                ++ """ ]
-    )
-    { text =\""""
-                ++ text
-                ++ """" 
-    , icon = MaterialIcons.done |> Icon.elmMaterialIcons Widget.Material.Types.Color
-    , onPress = """
-                ++ (case onPress of
-                        Nothing ->
-                            "Nothing"
-
-                        Just () ->
-                            "Just ()"
-                   )
-                ++ """
-    }
-    """
-    }
+--------------------------------------------------------------------------------
+-- Interactive Demonstration
+--------------------------------------------------------------------------------
+{- This section here is essentially just a normal Elm program. -}
 
 
 type alias Model =
@@ -205,15 +152,6 @@ type Msg
 --|> Story.addTile (Just "Interactive example") view
 
 
-demo : Tile Model Msg ()
-demo =
-    { init = always init
-    , update = update
-    , view = view
-    , subscriptions = subscriptions
-    }
-
-
 init : ( Model, Cmd Msg )
 init =
     ( 0, Cmd.none )
@@ -250,11 +188,9 @@ subscriptions _ =
     Sub.none
 
 
-view _ model =
+view : Context -> Int -> { title : Maybe String, position : Position, attributes : List b, body : Element Msg }
+view { palette } model =
     let
-        palette =
-            Material.defaultPalette
-
         style =
             { containedButton = Material.containedButton palette
             , outlinedButton = Material.outlinedButton palette
@@ -350,3 +286,27 @@ view _ model =
                     |> Customize.mapContent (Customize.element [ Element.width <| Element.fill ])
                 )
     }
+
+
+demo : Tile Model Msg ()
+demo =
+    { init = always init
+    , update = update
+    , view = view
+    , subscriptions = subscriptions
+    }
+
+
+
+--------------------------------------------------------------------------------
+-- DO NOT MODIFY ANTHING AFTER THIS LINE
+--------------------------------------------------------------------------------
+
+
+page =
+    Page.create
+        { title = title
+        , description = description
+        , book = book
+        , demo = demo
+        }

explorer/src/UIExplorer.elm

@@ -57,6 +57,7 @@ import Url.Builder
 import Url.Parser exposing ((</>))
 import Widget exposing (Item)
 import Widget.Material as Material
+import Widget.Material.Typography as Typography
 
 
 {-| The first page in your UI explorer. This is the default page if the user doesn't specify a url path.
@@ -587,21 +588,36 @@ updateSuccess (PageBuilder pages) config msg model =
             )
 
         PressedPageSizeOption pageSizeOption ->
-            ( { model | pageSizeOption = pageSizeOption
-            , expandPageSizeOptions = False }, Cmd.none )
+            ( { model
+                | pageSizeOption = pageSizeOption
+                , expandPageSizeOptions = False
+              }
+            , Cmd.none
+            )
 
         ToggledPageSizeGroup ->
-            ( { model | expandPageSizeOptions = not model.expandPageSizeOptions
-            , expandColorBlindOptions = False
-             }, Cmd.none )
+            ( { model
+                | expandPageSizeOptions = not model.expandPageSizeOptions
+                , expandColorBlindOptions = False
+              }
+            , Cmd.none
+            )
 
         PressedColorBlindOption colorBlindOption ->
-            ( { model | colorBlindOption = colorBlindOption 
-            , expandColorBlindOptions = False}, Cmd.none )
+            ( { model
+                | colorBlindOption = colorBlindOption
+                , expandColorBlindOptions = False
+              }
+            , Cmd.none
+            )
 
         ToggledColorBlindGroup ->
-            ( { model | expandColorBlindOptions = not model.expandColorBlindOptions
-            , expandPageSizeOptions = False }, Cmd.none )
+            ( { model
+                | expandColorBlindOptions = not model.expandColorBlindOptions
+                , expandPageSizeOptions = False
+              }
+            , Cmd.none
+            )
 
         ChangeDarkTheme enabled ->
             ( { model | darkThemeEnabled = enabled }, Cmd.none )
@@ -796,10 +812,19 @@ viewSidebar pages config model =
             )
 
     else
-        [ [ Element.row
-                [ Element.width Element.fill ]
-                [ config.sidebarTitle, minimizeSidebarButton ]
-                |> Widget.asItem
+        [ [ Widget.insetItem (Material.insetItem palette)
+                { text = ""
+                , onPress = Just PressedToggleSidebar
+                , icon =
+                    \_ ->
+                        config.sidebarTitle
+                            |> Element.el Typography.h6
+                , content =
+                    \{ size } ->
+                        Element.text "❮"
+                            |> Element.el [ Element.Font.size size ]
+                }
+          , Widget.divider (Material.fullBleedDivider palette)
           , Widget.fullBleedItem (Material.fullBleedItem palette)
                 { text = "Dark Theme"
                 , onPress = Just <| ChangeDarkTheme <| not <| model.darkThemeEnabled

explorer/src/UIExplorer/Tile.elm

@@ -302,12 +302,12 @@ layoutRowView palette row =
         TwoColumn left right ->
             Element.row
                 [ Element.width Element.fill
-                , Element.spacing 10
+                , Element.spacing 8
                 ]
                 [ Element.column
                     [ Element.width <| Element.fillPortion 2
                     , Element.height Element.fill
-                    , Element.spacing 10
+                    , Element.spacing 32
                     ]
                   <|
                     List.map
@@ -319,7 +319,7 @@ layoutRowView palette row =
                 , Element.column
                     [ Element.width <| Element.fillPortion 1
                     , Element.height Element.fill
-                    , Element.spacing 10
+                    , Element.spacing 8
                     ]
                   <|
                     List.map
@@ -355,8 +355,8 @@ page (Builder config) =
                 |> List.reverse
                 |> List.concatMap (layoutRowView palette)
                 |> Element.column
-                    ([ Element.padding 10
-                     , Element.spacing 10
+                    ([ Element.padding 16
+                     , Element.spacing 32
                      , Element.px 800 |> Element.width
                      , Element.centerX
                      , Font.family

src/Internal/Material/Item.elm

@@ -142,6 +142,9 @@ fullBleedHeader palette =
             , right = 0
             , top = 1
             }
+        , Palette.lightGray palette
+            |> MaterialColor.fromColor
+            |> Border.color
         ]
     , content =
         { elementColumn =