Merge branch 'unstable'

explorer/src/Page/Button.elm

@@ -91,6 +91,8 @@ book =
                 ( "Contained", Material.containedButton )
                 [ ( "Outlined", Material.outlinedButton )
                 , ( "Text", Material.textButton )
+                , ( "Chip", Material.chip )
+                , ( "IconButton", Material.iconButton)
                 ]
             )
         --Changing the text of the label

explorer/src/Page/Select.elm

@@ -38,19 +38,6 @@ description =
 -}
 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
@@ -62,7 +49,34 @@ viewFunctions =
                     , content = style palette
                     }
                 --Don't forget to change the title
-                |> Page.viewTile "Widget.buttonRow with Material.row"
+                |> Page.viewTile "Widget.buttonRow "
+
+        
+        viewTogggleRow style selected options onSelect { palette } () =
+            Widget.select
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+                |> Widget.toggleRow
+                    { elementRow = Material.toggleRow
+                    , content = style palette
+                    }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.toggleRow"
+        
+        viewWrappedRow style selected options onSelect { palette } () =
+            Widget.select
+                { selected = selected
+                , options = options
+                , onSelect = onSelect
+                }
+                |> Widget.wrappedButtonRow
+                    { elementRow = Material.row
+                    , content = style palette
+                    }
+                --Don't forget to change the title
+                |> Page.viewTile "Widget.wrappedButtonRow"
 
         viewSelectColumn style selected options onSelect { palette } () =
             Widget.select
@@ -77,7 +91,7 @@ viewFunctions =
                 --Don't forget to change the title
                 |> Page.viewTile "Widget.buttonColumn"
     in
-    [ viewSelectButtonRow, viewSelectRow, viewSelectColumn ]
+    [ viewTogggleRow, viewSelectRow, viewSelectColumn, viewWrappedRow ]
         |> List.foldl Story.addTile
             Story.initStaticTiles
 
@@ -95,6 +109,8 @@ book =
                 ( "Contained", Material.containedButton )
                 [ ( "Outlined", Material.outlinedButton )
                 , ( "Text", Material.textButton )
+                , ( "Chip", Material.chip )
+                , ( "IconButton", Material.iconButton)
                 , ( "Toggle", Material.toggleButton )
                 ]
             )
@@ -111,17 +127,17 @@ book =
         |> Story.addStory
             (Story.optionListStory "Options"
                 ( "3 Option"
-                , [ { icon = always Element.none, text = "42" }
+                , [ { icon = always Element.none, text = "Submit" }
                   , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
-                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "42" }
+                  , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "Submit" }
                   ]
                 )
                 [ ( "2 Option"
-                  , [ { icon = always Element.none, text = "42" }
+                  , [ { icon = always Element.none, text = "Submit" }
                     , { icon = MaterialIcons.done |> Icon.elmMaterialIcons Color, text = "" }
                     ]
                   )
-                , ( "1 Option", [ { icon = always Element.none, text = "42" } ] )
+                , ( "1 Option", [ { icon = always Element.none, text = "Submit" } ] )
                 ]
             )
         --Should an event be triggered when pressing the button?

explorer/src/UIExplorer/Story.elm

@@ -374,9 +374,9 @@ storyView context model =
                                 |> Maybe.map (Tuple.second >> StorySelect label)
                   }
                     |> Widget.select
-                    |> Widget.buttonColumn
+                    |> Widget.wrappedButtonRow
-                        { elementColumn = Material.column
+                        { elementRow = Material.row
-                        , content = Material.textButton context.palette
+                        , content = Material.chip context.palette
                         }
                 ]
 

src/Internal/Button.elm

@@ -85,6 +85,7 @@ button style { onPress, text, icon } =
                 else
                     style.otherwise
                )
+            ++ [ Region.description text ]
         )
         { onPress = onPress
         , label =

src/Internal/List.elm

@@ -1,4 +1,4 @@
-module Internal.List exposing (ColumnStyle, RowStyle, buttonColumn, buttonRow, column, itemList, row)
+module Internal.List exposing (ColumnStyle, RowStyle, buttonColumn, buttonRow, column, itemList, row, toggleRow, wrappedButtonRow)
 
 import Element exposing (Attribute, Element)
 import Internal.Button exposing (Button, ButtonStyle)
@@ -134,6 +134,39 @@ internalButton style list =
             )
 
 
+toggleRow :
+    { elementRow : RowStyle msg
+    , content : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+toggleRow style list =
+    (list
+        |> List.indexedMap
+            (\i ->
+                Select.toggleButton
+                    (style.content
+                        |> Customize.elementButton
+                            (style.elementRow.content.element
+                                ++ (if List.length list == 1 then
+                                        style.elementRow.content.ifSingleton
+
+                                    else if i == 0 then
+                                        style.elementRow.content.ifFirst
+
+                                    else if i == (List.length list - 1) then
+                                        style.elementRow.content.ifLast
+
+                                    else
+                                        style.elementRow.content.otherwise
+                                   )
+                            )
+                    )
+            )
+    )
+        |> Element.row style.elementRow.elementRow
+
+
 buttonRow :
     { elementRow : RowStyle msg
     , content : ButtonStyle msg
@@ -157,6 +190,29 @@ buttonRow style =
         >> Element.row style.elementRow.elementRow
 
 
+wrappedButtonRow :
+    { elementRow : RowStyle msg
+    , content : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+wrappedButtonRow style =
+    internalButton
+        { element =
+            style.elementRow.content.element
+        , ifSingleton =
+            style.elementRow.content.ifSingleton
+        , ifFirst =
+            style.elementRow.content.ifFirst
+        , ifLast =
+            style.elementRow.content.ifLast
+        , otherwise =
+            style.elementRow.content.otherwise
+        , content = style.content
+        }
+        >> Element.wrappedRow style.elementRow.elementRow
+
+
 buttonColumn :
     { elementColumn : ColumnStyle msg
     , content : ButtonStyle msg

src/Internal/Material/List.elm

@@ -1,10 +1,10 @@
 module Internal.Material.List exposing
     ( bottomSheet
-    , buttonRow
     , cardColumn
     , column
     , row
     , sideSheet
+    , toggleRow
     )
 
 import Color
@@ -49,8 +49,8 @@ column =
     }
 
 
-buttonRow : RowStyle msg
+toggleRow : RowStyle msg
-buttonRow =
+toggleRow =
     { elementRow = []
     , content =
         { element = []

src/Internal/Select.elm

@@ -1,7 +1,8 @@
-module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton)
+module Internal.Select exposing (MultiSelect, Select, multiSelect, select, selectButton, toggleButton)
 
 import Element exposing (Element)
 import Element.Input as Input
+import Element.Region as Region
 import Internal.Button exposing (Button, ButtonStyle)
 import Set exposing (Set)
 import Widget.Icon exposing (Icon)
@@ -45,6 +46,7 @@ selectButton style ( selected, b ) =
                 else
                     style.otherwise
                )
+            ++ [ Region.description b.text ]
         )
         { onPress = b.onPress
         , label =
@@ -64,6 +66,37 @@ selectButton style ( selected, b ) =
         }
 
 
+toggleButton :
+    ButtonStyle msg
+    -> ( Bool, Button msg )
+    -> Element msg
+toggleButton style ( selected, b ) =
+    Input.button
+        (style.elementButton
+            ++ (if b.onPress == Nothing then
+                    style.ifDisabled
+
+                else
+                    style.otherwise
+               )
+            ++ [ Region.description b.text ]
+        )
+        { onPress = b.onPress
+        , label =
+            b.icon
+                (if b.onPress == Nothing then
+                    style.content.content.icon.ifDisabled
+
+                 else if selected then
+                    style.content.content.icon.ifActive
+
+                 else
+                    style.content.content.icon.otherwise
+                )
+                |> Element.el style.content.elementRow
+        }
+
+
 select :
     Select msg
     -> List ( Bool, Button msg )

src/Widget.elm

@@ -1,11 +1,11 @@
 module Widget exposing
     ( ButtonStyle, Button, TextButton, iconButton, textButton, button
     , SwitchStyle, Switch, switch
-    , Select, selectButton, select
+    , Select, selectButton, select, toggleButton
     , MultiSelect, multiSelect
     , Modal, singleModal, multiModal
     , DialogStyle, Dialog, dialog
-    , RowStyle, row, buttonRow
+    , RowStyle, row, buttonRow, toggleRow, wrappedButtonRow
     , ColumnStyle, column, buttonColumn
     , ItemStyle, Item
     , FullBleedItemStyle, fullBleedItem
@@ -66,7 +66,7 @@ You can create you own widgets by sticking widgets types together.
 
 ![Select](https://orasund.github.io/elm-ui-widgets/assets/select.png)
 
-@docs Select, selectButton, select
+@docs Select, selectButton, select, toggleButton
 
 ![MultiSelect](https://orasund.github.io/elm-ui-widgets/assets/multiSelect.png)
 
@@ -94,7 +94,7 @@ You can create you own widgets by sticking widgets types together.
 
 ## Row
 
-@docs RowStyle, row, buttonRow
+@docs RowStyle, row, buttonRow, toggleRow, wrappedButtonRow
 
 
 ## Column
@@ -475,7 +475,7 @@ type alias MultiSelect msg =
         |> Widget.select
         |> Widget.buttonRow
             { elementRow = Material.buttonRow
-            , content = Material.toggleButton Material.defaultPalette
+            , content = Material.outlinedButton Material.defaultPalette
             }
         |> always "Ignore this line" --> "Ignore this line"
 
@@ -488,6 +488,41 @@ selectButton =
     Select.selectButton
 
 
+{-| A icon button that can be selected. Should be used together with Material.toggleButton
+
+    import Widget.Material as Material
+    import Element
+
+    type Msg
+        = ChangedSelected Int
+
+    { selected = Just 1
+    , options =
+        [ 1, 2, 42 ]
+            |> List.map
+                (\int ->
+                    { text = String.fromInt int
+                    , icon = always Element.none
+                    }
+                )
+    , onSelect = (\i -> Just <| ChangedSelected i)
+    }
+        |> Widget.select
+        |> Widget.toggleRow
+            { elementRow = Material.toggleRow
+            , content = Material.toggleButton Material.defaultPalette
+            }
+        |> always "Ignore this line" --> "Ignore this line"
+
+-}
+toggleButton :
+    ButtonStyle msg
+    -> ( Bool, Button msg )
+    -> Element msg
+toggleButton =
+    Select.toggleButton
+
+
 {-| Selects one out of multiple options. This can be used for radio buttons or Menus.
 
     import Widget.Material as Material
@@ -1434,7 +1469,7 @@ itemList =
         }
         |> Widget.buttonRow
             { elementRow = Material.row
-            , content = Material.toggleButton Material.defaultPalette
+            , content = Material.outlinedButton Material.defaultPalette
             }
         |> always "Ignore this line" --> "Ignore this line"
 
@@ -1449,6 +1484,88 @@ buttonRow =
     List.buttonRow
 
 
+{-| A row of icon buttons use this in combination with Material.toggleButton
+
+    import Element
+    import Widget.Material as Material
+
+    type Msg =
+        Select Int
+
+    selected : Maybe Int
+    selected =
+        Just 0
+
+    Widget.select
+        { selected = selected
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = always Element.none
+                        }
+                    )
+        , onSelect = (\i -> Just (Select i ))
+        }
+        |> Widget.buttonRow
+            { elementRow = Material.row
+            , content = Material.toggleButton Material.defaultPalette
+            }
+        |> always "Ignore this line" --> "Ignore this line"
+
+-}
+toggleRow :
+    { elementRow : RowStyle msg
+    , content : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+toggleRow =
+    List.toggleRow
+
+
+{-| A wrapped row of buttons
+
+    import Element
+    import Widget.Material as Material
+
+    type Msg =
+        Select Int
+
+    selected : Maybe Int
+    selected =
+        Just 0
+
+    Widget.select
+        { selected = selected
+        , options =
+            [ 1, 2, 42 ]
+                |> List.map
+                    (\int ->
+                        { text = String.fromInt int
+                        , icon = always Element.none
+                        }
+                    )
+        , onSelect = (\i -> Just (Select i ))
+        }
+        |> Widget.wrappedButtonRow
+            { elementRow = Material.row
+            , content = Material.outlinedButton Material.defaultPalette
+            }
+        |> always "Ignore this line" --> "Ignore this line"
+
+-}
+wrappedButtonRow :
+    { elementRow : RowStyle msg
+    , content : ButtonStyle msg
+    }
+    -> List ( Bool, Button msg )
+    -> Element msg
+wrappedButtonRow =
+    List.wrappedButtonRow
+
+
 {-| A column of buttons
 
     import Element

src/Widget/Material.elm

@@ -1,7 +1,7 @@
 module Widget.Material exposing
     ( Palette, defaultPalette, darkPalette, gray
     , containedButton, outlinedButton, textButton
-    , iconButton, toggleButton, buttonRow
+    , iconButton, toggleButton, toggleRow
     , switch
     , cardColumn
     , chip, textInput, passwordInput
@@ -16,6 +16,7 @@ module Widget.Material exposing
     , sortTable
     , snackbar
     , tab, tabButton
+    , buttonRow
     , textGray
     )
 
@@ -47,7 +48,7 @@ Different styles for buttons have different meanings.
     Use `containedButton` for **the most** important action of the group.
 
 @docs containedButton, outlinedButton, textButton
-@docs iconButton, toggleButton, buttonRow
+@docs iconButton, toggleButton, toggleRow
 
 
 # Switch
@@ -118,6 +119,11 @@ You way want to use special items to visually organize the content of your list.
 
 @docs tab, tabButton
 
+
+# DEPRECATED
+
+@docs buttonRow
+
 -}
 
 import Color exposing (Color)
@@ -500,6 +506,16 @@ expansionItem =
     Item.expansionItem
 
 
+{-| DEPRECATED
+
+Use Material.toggleRow instead
+
+-}
+buttonRow : RowStyle msg
+buttonRow =
+    List.toggleRow
+
+
 {-| a Row of buttons.
 
 Only use in combination with `toggleButton`
@@ -507,9 +523,9 @@ Only use in combination with `toggleButton`
 ![buttonRow](https://orasund.github.io/elm-ui-widgets/assets/material/buttonRow.png)
 
 -}
-buttonRow : RowStyle msg
+toggleRow : RowStyle msg
-buttonRow =
+toggleRow =
-    List.buttonRow
+    List.toggleRow
 
 
 {-| A List styled like a card.