Added Icon Widget

2024-11-22 04:58:49 +03:00 · 2021-01-21 16:59:22 +01:00 · 2021-01-21 16:59:22 +01:00 · 4ef62708a6
commit 4ef62708a6
parent 15872d5093
17 changed files with 305 additions and 196 deletions
--- a/example/elm.json
+++ b/example/elm.json
@ -9,6 +9,8 @@
        "direct": {
            "Orasund/elm-ui-framework": "1.6.1",
            "avh4/elm-color": "1.0.0",
+            "capitalist/elm-octicons": "2.3.0",
+            "danmarcab/material-icons": "1.0.0",
            "elm/browser": "1.0.2",
            "elm/core": "1.0.5",
            "elm/html": "1.0.0",
@ -16,8 +18,14 @@
            "elm/time": "1.0.0",
            "elm-community/intdict": "3.0.0",
            "feathericons/elm-feather": "1.4.0",
+            "icidasset/elm-material-icons": "5.0.0",
+            "j-panasiuk/elm-ionicons": "2.0.0",
+            "jasonliang-dev/elm-heroicons": "1.0.1",
+            "lattyware/elm-fontawesome": "5.0.0",
+            "lemol/ant-design-icons-elm": "2.0.0",
            "mdgriffith/elm-ui": "1.1.6",
            "noahzgordon/elm-color-extra": "1.0.2",
+            "pehota/elm-zondicons": "1.0.1",
            "ryannhg/elm-spa": "4.1.0",
            "turboMaCk/any-set": "1.4.0",
            "turboMaCk/queue": "1.0.2",
@ -36,4 +44,4 @@
        "direct": {},
        "indirect": {}
    }
-}
+}
--- a/example/src/Data/Example.elm
+++ b/example/src/Data/Example.elm
@ -5,6 +5,7 @@ import Element exposing (Element)
 import Example.Button as Button
 import Example.Dialog as Dialog
 import Example.ExpansionPanel as ExpansionPanel
+import Example.Icon as Icon
 import Example.List as List
 import Example.Modal as Modal
 import Example.MultiSelect as MultiSelect
@ -31,6 +32,7 @@ type Example
    | TextInputExample
    | ListExample
    | ProgressIndicatorExample
+    | IconExample


 asList : List Example
@ -47,6 +49,7 @@ asList =
    , TextInputExample
    , ListExample
    , ProgressIndicatorExample
+    , IconExample
    ]
        |> List.sortBy toString

@ -90,6 +93,9 @@ toString example =
        ProgressIndicatorExample ->
            "Progress Indicator"

+        IconExample ->
+            "Icon"
+

 fromString : String -> Maybe Example
 fromString string =
@ -130,6 +136,9 @@ fromString string =
        "Progress Indicator" ->
            Just ProgressIndicatorExample

+        "Icon" ->
+            Just IconExample
+
        _ ->
            Nothing

@ -173,6 +182,9 @@ get example =
        ProgressIndicatorExample ->
            .progressIndicator

+        IconExample ->
+            .icon
+

 toTests : Example -> msg -> Style msg -> List ( String, Element msg )
 toTests example =
@ -213,6 +225,9 @@ toTests example =
        ProgressIndicatorExample ->
            Test.progressIndicator

+        IconExample ->
+            Test.icon
+

 type Msg
    = Button Button.Msg
@ -227,6 +242,7 @@ type Msg
    | TextInput TextInput.Msg
    | List List.Msg
    | ProgressIndicator ProgressIndicator.Msg
+    | Icon Icon.Msg


 type alias Model =
@ -242,6 +258,7 @@ type alias Model =
    , textInput : TextInput.Model
    , list : List.Model
    , progressIndicator : ProgressIndicator.Model
+    , icon : Icon.Model
    }


@ -267,6 +284,7 @@ type alias UpgradeCollection =
    , textInput : UpgradeRecord TextInput.Model TextInput.Msg
    , list : UpgradeRecord List.Model List.Msg
    , progressIndicator : UpgradeRecord ProgressIndicator.Model ProgressIndicator.Msg
+    , icon : UpgradeRecord Icon.Model Icon.Msg
    }


@ -283,6 +301,7 @@ type alias ExampleView msg =
    , textInput : Element msg
    , list : Element msg
    , progressIndicator : Element msg
+    , icon : Element msg
    }


@ -324,6 +343,9 @@ init =

        ( progressIndicatorModel, progressIndicatorMsg ) =
            ProgressIndicator.init
+
+        ( iconModel, iconMsg ) =
+            Icon.init
    in
    ( { button = buttonModel
      , switch = switchModel
@ -337,6 +359,7 @@ init =
      , textInput = textInputModel
      , list = listModel
      , progressIndicator = progressIndicatorModel
+      , icon = iconModel
      }
    , [ Cmd.map Button buttonMsg
      , Cmd.map Switch switchMsg
@ -350,6 +373,7 @@ init =
      , Cmd.map TextInput textInputMsg
      , Cmd.map List listMsg
      , Cmd.map ProgressIndicator progressIndicatorMsg
+      , Cmd.map Icon iconMsg
      ]
        |> Cmd.batch
    )
@ -441,6 +465,13 @@ upgradeRecord =
        , updateFun = ProgressIndicator.update
        , subscriptionsFun = ProgressIndicator.subscriptions
        }
+    , icon =
+        { from = .icon
+        , to = \model a -> { model | icon = a }
+        , msgMapper = Icon
+        , updateFun = Icon.update
+        , subscriptionsFun = Icon.subscriptions
+        }
    }


@ -482,6 +513,9 @@ update msg model =

        ProgressIndicator m ->
            updateField .progressIndicator m
+
+        Icon m ->
+            updateField .icon m
    )
        model

@ -504,6 +538,7 @@ subscriptions model =
    , upgradeRecord.textInput |> subFun
    , upgradeRecord.list |> subFun
    , upgradeRecord.progressIndicator |> subFun
+    , upgradeRecord.icon |> subFun
    ]
        |> Sub.batch

@ -538,6 +573,8 @@ view msgMapper style model =
        List.view (List >> msgMapper) style (.list model)
    , progressIndicator =
        ProgressIndicator.view (ProgressIndicator >> msgMapper) style (.progressIndicator model)
+    , icon =
+        Icon.view (Icon >> msgMapper) style (.icon model)
    }


--- a/example/src/Data/Style/Material.elm
+++ b/example/src/Data/Style/Material.elm
@ -8,8 +8,10 @@ import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
+import FeatherIcons
 import Html.Attributes as Attributes
 import Icons
+import Widget.Icon as Icon
 import Widget.Style
    exposing
        ( ButtonStyle
@ -24,8 +26,7 @@ import Widget.Style
        , TextInputStyle
        )
 import Widget.Style.Material as Material exposing (Palette)
-import FeatherIcons
-import Widget.Icon as Icon
+

 sortTable : Palette -> SortTableStyle msg
 sortTable palette =
--- a/example/src/Example/Button.elm
+++ b/example/src/Example/Button.elm
@ -4,9 +4,10 @@ import Browser
 import Element exposing (Element)
 import FeatherIcons
 import Widget
+import Widget.Icon as Icon
 import Widget.Style exposing (ButtonStyle, RowStyle)
 import Widget.Style.Material as Material
-import Widget.Icon as Icon
+

 type alias Style style msg =
    { style
--- a/example/src/Example/Dialog.elm
+++ b/example/src/Example/Dialog.elm
@ -4,9 +4,10 @@ import Browser
 import Element exposing (Element)
 import FeatherIcons
 import Widget
+import Widget.Icon as Icon
 import Widget.Style exposing (ButtonStyle, DialogStyle)
 import Widget.Style.Material as Material
-import Widget.Icon as Icon
+

 type alias Style style msg =
    { style
--- a/example/src/Example/Icon.elm
+++ b/example/src/Example/Icon.elm
@ -1,32 +1,24 @@
 module Example.Icon exposing (Model, Msg, init, subscriptions, update, view)

+import Ant.Icons.Svg
 import Browser
 import Element exposing (Element)
 import FeatherIcons
-import Widget
-import Widget.Style exposing (ButtonStyle, RowStyle)
-import Widget.Style.Material as Material
-import Material.Icons exposing (offline_bolt)
-import Material.Icons.Types exposing (Coloring(..))
-import Widget.Icon exposing (Icon)
-import Material.Icons.Action
-import Widget.Icon exposing (Icon)
-import FeatherIcons
-import Widget.Icon exposing (Icon)
 import FontAwesome.Icon
 import FontAwesome.Solid
 import FontAwesome.Svg
-import Widget.Icon exposing (Icon)
-import Ionicon
-import Widget.Icon exposing (Icon)
-import Octicons
-import Widget.Icon exposing (Icon)
 import Heroicons.Solid
+import Ionicon
+import Material.Icons exposing (offline_bolt)
+import Material.Icons.Action
+import Material.Icons.Types exposing (Coloring(..))
+import Octicons
+import Widget
 import Widget.Icon exposing (Icon)
-import Ant.Icons.Svg
-import Widget.Icon exposing (Icon)
+import Widget.Style exposing (ButtonStyle, RowStyle)
+import Widget.Style.Material as Material
 import Zondicons
-import Widget.Icon exposing (Icon)
+

 type alias Style style msg =
    { style
@ -44,17 +36,17 @@ materialStyle =
    }


-type Model
-    = ()
+type alias Model =
+    ()


-type Msg
-    = ()
+type alias Msg =
+    ()


 init : ( Model, Cmd Msg )
 init =
-    ( IsButtonEnabled True
+    ( ()
    , Cmd.none
    )

@ -76,45 +68,45 @@ subscriptions _ =
 {-| You can remove the msgMapper. But by doing so, make sure to also change `msg` to `Msg` in the line below.
 -}
 view : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style (IsButtonEnabled isButtonEnabled) =
-    [ Material.Icons.done
-      |> Widget.Icon.elmMaterialIcons Color
-    , Material.Icons.Action.done
-  |> Widget.Icon.materialIcons
-  , FeatherIcons.check
-  |> Widget.Icon.elmFeather FeatherIcons.toHtml
-  , FontAwesome.Solid.check
-  |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
-  , Ionicon.done
-  |> Widget.Icon.elmIonicons
-  , Octicons.check
-    |> Widget.Icon.elmOcticons
-      { withSize = Octicons.size
-      , withColor = Octicons.color
-      , defaultOptions = Octicons.defaultOptions
-      }
-      ,Heroicons.Solid.check
-    |> Widget.Icon.elmHeroicons
-    , Ant.Icons.Svg.checkOutlined
-    |> Widget.Icon.antDesignIconsElm
-    , Zondicons.checkmark
-    |> Widget.Icon.elmZondicons
+view msgMapper style () =
+    [ "Every icon package on elm-packages is supported."
+        |> Element.text
+        |> List.singleton
+        |> Element.paragraph []
+    , [ Material.Icons.done
+            |> Widget.Icon.elmMaterialIcons Color
+      , Material.Icons.Action.done
+            |> Widget.Icon.materialIcons
+      , FeatherIcons.check
+            |> Widget.Icon.elmFeather FeatherIcons.toHtml
+      , FontAwesome.Solid.check
+            |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon
+      , Ionicon.checkmark
+            |> Widget.Icon.elmIonicons
+      , Octicons.check
+            |> Widget.Icon.elmOcticons
+                { withSize = Octicons.size
+                , withColor = Octicons.color
+                , defaultOptions = Octicons.defaultOptions
+                }
+      , Heroicons.Solid.check
+            |> Widget.Icon.elmHeroicons
+      , Ant.Icons.Svg.checkOutlined
+            |> Widget.Icon.antDesignIconsElm
+      , Zondicons.checkmark
+            |> Widget.Icon.elmZondicons
+      ]
+        |> List.map
+            (\icon ->
+                Widget.button style.primaryButton
+                    { text = "Done"
+                    , icon = icon
+                    , onPress = Just <| msgMapper <| ()
+                    }
+            )
+        |> Element.wrappedRow [ Element.spacing 10 ]
    ]
-        |> List.map (\icon ->
-            Widget.button style.primaryButton
-              { text = "Done"
-              , icon = icon
-              , onPress =
-                  if isButtonEnabled then
-                      ChangedButtonStatus False
-                          |> msgMapper
-                          |> Just
-
-                  else
-                      Nothing
-              }
-          )
-        |> Element.wrappedRow []
+        |> Element.column [ Element.spacing 10 ]


 main : Program () Model Msg
--- a/example/src/Example/Modal.elm
+++ b/example/src/Example/Modal.elm
@ -4,9 +4,10 @@ import Browser
 import Element exposing (Element)
 import FeatherIcons
 import Widget
+import Widget.Icon as Icon
 import Widget.Style exposing (ButtonStyle, ColumnStyle)
 import Widget.Style.Material as Material
-import Widget.Icon as Icon
+

 type alias Style style msg =
    { style
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@ -23,10 +23,10 @@ import Stateless
 import Task
 import Time
 import Widget
+import Widget.Icon as Icon
 import Widget.Layout as Layout exposing (Layout, Part)
 import Widget.ScrollingNav as ScrollingNav
-import FeatherIcons
-import Widget.Icon as Icon
+

 type alias LoadedModel =
    { stateless : Stateless.Model
--- a/example/src/View/Test.elm
+++ b/example/src/View/Test.elm
@ -1,13 +1,13 @@
-module View.Test exposing (button, dialog, expansionPanel, list, modal, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)
+module View.Test exposing (button, dialog, expansionPanel, icon, list, modal, multiSelect, progressIndicator, select, sortTable, switch, tab, textInput)

 import Data.Style exposing (Style)
 import Element exposing (Element)
+import FeatherIcons
 import Icons
 import Set
 import Widget
-import Widget.Layout exposing (Part(..))
-import FeatherIcons
 import Widget.Icon as Icon
+import Widget.Layout exposing (Part(..))


 button : msg -> Style msg -> List ( String, Element msg )
@ -131,7 +131,7 @@ select idle style =
                |> List.map
                    (\int ->
                        { text = String.fromInt int
-                        , icon = always  Element.none
+                        , icon = always Element.none
                        }
                    )
        , onSelect = always idle >> Just
@ -244,7 +244,7 @@ multiSelect idle style =
                |> List.map
                    (\int ->
                        { text = String.fromInt int
-                        , icon =always Element.none
+                        , icon = always Element.none
                        }
                    )
        , onSelect = always Nothing
@ -558,3 +558,8 @@ progressIndicator _ style =
      )
    ]
        ++ determinateIndicators
+
+
+icon : msg -> Style msg -> List ( String, Element msg )
+icon _ style =
+    []
--- a/src/Internal/Button.elm
+++ b/src/Internal/Button.elm
@ -9,8 +9,9 @@ module Internal.Button exposing
 import Element exposing (Element)
 import Element.Input as Input
 import Element.Region as Region
-import Widget.Style exposing (ButtonStyle)
 import Widget.Icon exposing (Icon)
+import Widget.Style exposing (ButtonStyle)
+

 type alias Button msg =
    { text : String
@ -38,13 +39,16 @@ iconButton style { onPress, text, icon } =
            ++ [ Region.description text ]
        )
        { onPress = onPress
-        , label = icon 
-            (if onPress == Nothing then
-                            style.content.content.icon.ifDisabled
+        , label =
+            icon
+                (if onPress == Nothing then
+                    style.content.content.icon.ifDisabled

-                        else
-                            style.content.content.icon.otherwise
-                    ) |> Element.map never |> Element.el style.content.elementRow
+                 else
+                    style.content.content.icon.otherwise
+                )
+                |> Element.map never
+                |> Element.el style.content.elementRow
        }


@ -74,13 +78,14 @@ button style { onPress, text, icon } =
        { onPress = onPress
        , label =
            Element.row style.content.elementRow
-                [ icon 
+                [ icon
                    (if onPress == Nothing then
-                            style.content.content.icon.ifDisabled
+                        style.content.content.icon.ifDisabled

-                        else
-                            style.content.content.icon.otherwise
-                    ) |> Element.map never
+                     else
+                        style.content.content.icon.otherwise
+                    )
+                    |> Element.map never
                , Element.text text |> Element.el style.content.content.text.contentText
                ]
        }
--- a/src/Internal/ExpansionPanel.elm
+++ b/src/Internal/ExpansionPanel.elm
@ -5,8 +5,9 @@ module Internal.ExpansionPanel exposing (ExpansionPanel, expansionPanel)

 import Element exposing (Element)
 import Element.Events as Events
-import Widget.Style exposing (ExpansionPanelStyle)
 import Widget.Icon exposing (Icon)
+import Widget.Style exposing (ExpansionPanelStyle)
+

 type alias ExpansionPanel msg =
    { onToggle : Bool -> msg
@ -28,10 +29,10 @@ expansionPanel style model =
                :: style.content.panel.elementRow
            )
            [ Element.row style.content.panel.content.label.elementRow
-                [ model.icon 
-                        style.content.panel.content.label.content.icon
+                [ model.icon
+                    style.content.panel.content.label.content.icon
                    |> Element.map never
-                , model.text 
+                , model.text
                    |> Element.text
                    |> Element.el style.content.panel.content.label.content.text.elementText
                ]
@ -40,7 +41,6 @@ expansionPanel style model =
                    style.content.panel.content.collapseIcon
                        style.content.panel.content.label.content.icon

-
                else
                    style.content.panel.content.expandIcon
                        style.content.panel.content.label.content.icon
--- a/src/Internal/Select.elm
+++ b/src/Internal/Select.elm
@ -4,8 +4,9 @@ import Element exposing (Element)
 import Element.Input as Input
 import Internal.Button exposing (Button)
 import Set exposing (Set)
-import Widget.Style exposing (ButtonStyle)
 import Widget.Icon exposing (Icon)
+import Widget.Style exposing (ButtonStyle)
+

 type alias Select msg =
    { selected : Maybe Int
@ -51,16 +52,15 @@ selectButton style ( selected, b ) =
            Element.row style.content.elementRow
                [ b.icon
                    (if b.onPress == Nothing then
-                    style.content.content.icon.ifDisabled
+                        style.content.content.icon.ifDisabled

-                else if selected then
-                    style.content.content.icon.ifActive
+                     else if selected then
+                        style.content.content.icon.ifActive

-                else
-                    style.content.content.icon.otherwise
-               )
-                
-                |> Element.map never
+                     else
+                        style.content.content.icon.otherwise
+                    )
+                    |> Element.map never
                , Element.text b.text |> Element.el style.content.content.text.contentText
                ]
        }
--- a/src/Widget.elm
+++ b/src/Widget.elm
@ -130,6 +130,7 @@ You can create you own widgets by sticking widgets types together.

 -}

+import Color exposing (Color)
 import Element exposing (Attribute, Element, Length)
 import Element.Input exposing (Placeholder)
 import Internal.Button as Button
@ -144,18 +145,22 @@ import Internal.Tab as Tab
 import Internal.TextInput as TextInput
 import Set exposing (Set)
 import Widget.Style exposing (ButtonStyle, ColumnStyle, DialogStyle, ExpansionPanelStyle, ProgressIndicatorStyle, RowStyle, SortTableStyle, SwitchStyle, TabStyle, TextInputStyle)
-import Color exposing (Color)
+
+

 {----------------------------------------------------------
 - ICON
 ----------------------------------------------------------}

+
 type alias Icon =
    { size : Int
    , color : Color
    }
    -> Element Never

+
+
 {----------------------------------------------------------
 - BUTTON
 ----------------------------------------------------------}
--- a/src/Widget/Icon.elm
+++ b/src/Widget/Icon.elm
@ -34,6 +34,7 @@ elmMaterialIcons wrapper fun =
    \{ size, color } ->
        fun size (wrapper color)
            |> Element.html
+            |> Element.el []


 {-| For using [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/)
@ -49,13 +50,17 @@ check =
 ```

 -}
-materialIcons : (Int -> Color -> Svg Never) -> Icon
+materialIcons : (Color -> Int -> Svg Never) -> Icon
 materialIcons fun =
    \{ size, color } ->
-        fun size color
+        fun color size
            |> List.singleton
-            |> Svg.svg []
+            |> Svg.svg
+                [ Svg.Attributes.width <| String.fromInt size
+                , Svg.Attributes.height <| String.fromInt size
+                ]
            |> Element.html
+            |> Element.el []


 {-| For using [feathericons/elm-feather](https://dark.elm.dmy.fr/packages/feathericons/elm-feather/latest/)
@ -109,8 +114,10 @@ elmFontawesome fun icon =
                [ Svg.Attributes.width <| String.fromInt size
                , Svg.Attributes.height <| String.fromInt size
                , Svg.Attributes.stroke <| Color.toCssString color
+                , Svg.Attributes.viewBox ("0 0 " ++ String.fromInt 512 ++ " " ++ String.fromInt 512)
                ]
            |> Element.html
+            |> Element.el []


 {-| For using [j-panasiuk/elm-ionicons](https://dark.elm.dmy.fr/packages/j-panasiuk/elm-ionicons/latest/)
@ -121,7 +128,7 @@ import Widget.Icon exposing (Icon)

 check : Widget.Icon
 check =
-  Ionicon.done
+  Ionicon.checkmark
  |> Widget.Icon.elmIonicons
 ```

@ -141,6 +148,7 @@ elmIonicons fun =
    \{ size, color } ->
        fun size (Color.toRgba color)
            |> Element.html
+            |> Element.el []


 {-| For using [capitalist/elm-octicons](https://dark.elm.dmy.fr/packages/capitalist/elm-octicons/latest)
@ -175,6 +183,7 @@ elmOcticons { withSize, withColor, defaultOptions } fun =
        )
            |> fun
            |> Element.html
+            |> Element.el []


 {-| For using [jasonliang-dev/elm-heroicons](https://dark.elm.dmy.fr/packages/jasonliang-dev/elm-heroicons/latest)
@ -199,6 +208,7 @@ elmHeroicons fun =
            , Svg.Attributes.stroke <| Color.toCssString color
            ]
            |> Element.html
+            |> Element.el []


 {-| For using [lemol/ant-design-icons-elm](https://dark.elm.dmy.fr/packages/lemol/ant-design-icons-elm/latest)
@ -220,9 +230,10 @@ antDesignIconsElm fun =
        fun
            [ Svg.Attributes.width <| String.fromInt size
            , Svg.Attributes.height <| String.fromInt size
-            , Svg.Attributes.stroke <| Color.toCssString color
+            , Svg.Attributes.fill <| Color.toCssString color
            ]
            |> Element.html
+            |> Element.el []


 {-| For using [pehota/elm-zondicons](https://dark.elm.dmy.fr/packages/pehota/elm-zondicons/latest)
@ -247,3 +258,4 @@ elmZondicons fun =
            , Svg.Attributes.stroke <| Color.toCssString color
            ]
            |> Element.html
+            |> Element.el []
--- a/src/Widget/Style.elm
+++ b/src/Widget/Style.elm
@ -6,16 +6,18 @@ module Widget.Style exposing (ButtonStyle, SwitchStyle, ColumnStyle, DialogStyle

 -}

+import Color exposing (Color)
 import Element exposing (Attribute, Element)
 import Html exposing (Html)
 import Widget.Icon as Icon exposing (Icon)
-import Color exposing (Color)
+

 type alias IconStyle =
    { size : Int
    , color : Color
    }

+
 {-| -}
 type alias SwitchStyle msg =
    { elementButton : List (Attribute msg)
@ -49,7 +51,7 @@ type alias ButtonStyle msg =
    , content :
        { elementRow : List (Attribute msg)
        , content :
-            { text : {contentText : List (Attribute msg)}
+            { text : { contentText : List (Attribute msg) }
            , icon :
                { ifDisabled : IconStyle
                , ifActive : IconStyle
@ -95,9 +97,9 @@ type alias ExpansionPanelStyle msg =
            , content :
                { label :
                    { elementRow : List (Attribute msg)
-                    , content : 
+                    , content :
                        { icon : IconStyle
-                        , text : { elementText :  List (Attribute msg)}
+                        , text : { elementText : List (Attribute msg) }
                        }
                    }
                , expandIcon : Icon
--- a/src/Widget/Style/Material.elm
+++ b/src/Widget/Style/Material.elm
@ -170,6 +170,7 @@ import Element.Font as Font
 import Html.Attributes as Attributes
 import Svg exposing (Svg)
 import Svg.Attributes
+import Widget.Icon as Icon exposing (Icon)
 import Widget.Style
    exposing
        ( ButtonStyle
@ -187,7 +188,7 @@ import Widget.Style
 import Widget.Style.Customize as Customize
 import Widget.Style.Material.Color as MaterialColor
 import Widget.Style.Material.Typography as Typography
-import Widget.Icon as Icon exposing (Icon)
+

 fromColor : Color -> Element.Color
 fromColor =
@ -308,19 +309,24 @@ baseButton _ =
            , Element.width <| Element.minimum 32 <| Element.shrink
            , Element.centerY
            ]
-        , content = { text = {contentText = [ Element.centerX ]}
-            , icon = {ifDisabled = { size = 18
+        , content =
+            { text = { contentText = [ Element.centerX ] }
+            , icon =
+                { ifDisabled =
+                    { size = 18
                    , color = MaterialColor.gray
                    }
-            , ifActive = { size = 18
+                , ifActive =
+                    { size = 18
                    , color = MaterialColor.gray
                    }
-    , otherwise = { size = 18
+                , otherwise =
+                    { size = 18
                    , color = MaterialColor.gray
                    }
+                }
            }
        }
-        }
    }


@ -388,12 +394,14 @@ containedButton palette =
        { elementRow =
            (baseButton palette |> .content |> .elementRow)
                ++ [ Element.paddingXY 8 0 ]
-        , content = {text = {contentText = baseButton palette |> (\b -> b.content.content.text.contentText) }
-            , icon = 
+        , content =
+            { text = { contentText = baseButton palette |> (\b -> b.content.content.text.contentText) }
+            , icon =
                { ifActive =
                    { size = 18
-                    , color = palette.primary
-            |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.primary
+                            |> MaterialColor.accessibleTextColor
                    }
                , ifDisabled =
                    { size = 18
@ -401,11 +409,12 @@ containedButton palette =
                    }
                , otherwise =
                    { size = 18
-                    , color = palette.primary
-            |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.primary
+                            |> MaterialColor.accessibleTextColor
                    }
                }
-        }
+            }
        }
    }

@ -466,14 +475,14 @@ outlinedButton palette =
                |> .elementRow
            )
                ++ [ Element.paddingXY 8 0 ]
-        , content = 
-            { text = 
-                {contentText =
+        , content =
+            { text =
+                { contentText =
                    baseButton palette
-                    |> .content
-                    |> .content
-                    |> .text
-                    |> .contentText
+                        |> .content
+                        |> .content
+                        |> .text
+                        |> .contentText
                }
            , icon =
                { ifActive =
@ -540,7 +549,7 @@ textButton palette =
    , content =
        { elementRow = baseButton palette |> (\b -> b.content.elementRow)
        , content =
-            { text = {contentText = baseButton palette |> (\b -> b.content.content.text.contentText )  }
+            { text = { contentText = baseButton palette |> (\b -> b.content.content.text.contentText) }
            , icon =
                { ifActive =
                    { size = 18
@ -661,12 +670,13 @@ toggleButton palette =
                )
            ]
        , content =
-            { text =  {contentText = [ Element.centerX ]}
+            { text = { contentText = [ Element.centerX ] }
            , icon =
                { ifActive =
                    { size = 24
-                    , color = palette.surface
-                        |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.surface
+                            |> MaterialColor.accessibleTextColor
                    }
                , ifDisabled =
                    { size = 24
@ -674,11 +684,11 @@ toggleButton palette =
                    }
                , otherwise =
                    { size = 24
-                    , color = palette.surface
-                        |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.surface
+                            |> MaterialColor.accessibleTextColor
                    }
                }
-
            }
        }
    }
@ -740,8 +750,10 @@ iconButton palette =
            , Element.centerY
            , Element.centerX
            ]
-        , content = { text = {contentText = baseButton palette |> (\b -> b.content.content.text.contentText)}
-            , icon = { ifActive =
+        , content =
+            { text = { contentText = baseButton palette |> (\b -> b.content.content.text.contentText) }
+            , icon =
+                { ifActive =
                    { size = 18
                    , color = palette.primary
                    }
@ -754,7 +766,7 @@ iconButton palette =
                    , color = palette.primary
                    }
                }
-        }
+            }
        }
    }

@ -982,7 +994,8 @@ chip palette =
    , content =
        { elementRow = [ Element.spacing 0, Element.centerY ]
        , content =
-            { text = { contentText =
+            { text =
+                { contentText =
                    [ Element.paddingEach
                        { top = 0
                        , right = 0
@ -994,21 +1007,24 @@ chip palette =
            , icon =
                { ifActive =
                    { size = 18
-                    , color =  palette.on.surface
-            |> MaterialColor.scaleOpacity 0.12
-            |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.on.surface
+                            |> MaterialColor.scaleOpacity 0.12
+                            |> MaterialColor.accessibleTextColor
                    }
                , ifDisabled =
                    { size = 18
-                    , color =  palette.on.surface
-            |> MaterialColor.scaleOpacity 0.12
-            |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.on.surface
+                            |> MaterialColor.scaleOpacity 0.12
+                            |> MaterialColor.accessibleTextColor
                    }
                , otherwise =
                    { size = 18
-                    , color = palette.on.surface
-            |> MaterialColor.scaleOpacity 0.12
-            |> MaterialColor.accessibleTextColor
+                    , color =
+                        palette.on.surface
+                            |> MaterialColor.scaleOpacity 0.12
+                            |> MaterialColor.accessibleTextColor
                    }
                }
            }
@ -1219,17 +1235,27 @@ icon string size =


 expand_less : Icon
-expand_less  {size,color}=
-    icon "0 0 48 48" size [ Svg.path [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z"
-    , Svg.Attributes.stroke (Color.toCssString color)
-     ] [] ]
+expand_less { size, color } =
+    icon "0 0 48 48"
+        size
+        [ Svg.path
+            [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z"
+            , Svg.Attributes.stroke (Color.toCssString color)
+            ]
+            []
+        ]


 expand_more : Icon
-expand_more {size,color} =
-    icon "0 0 48 48" size [ Svg.path [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z"
-    , Svg.Attributes.stroke (Color.toCssString color)
-     ] [] ]
+expand_more { size, color } =
+    icon "0 0 48 48"
+        size
+        [ Svg.path
+            [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z"
+            , Svg.Attributes.stroke (Color.toCssString color)
+            ]
+            []
+        ]


 {-| The expansion Panel is an outdated part of the material design specification.
@ -1265,7 +1291,7 @@ expansionPanel palette =
                            { size = 16
                            , color = MaterialColor.gray
                            }
-                        , text = { elementText = []}
+                        , text = { elementText = [] }
                        }
                    }
                , expandIcon = expand_more
@ -1575,14 +1601,14 @@ tabButton palette =
            , Element.centerY
            , Element.centerX
            ]
-        , content = 
-            { text = {contentText = []}
+        , content =
+            { text = { contentText = [] }
            , icon =
-                { ifActive = 
+                { ifActive =
                    { size = 18
                    , color = palette.primary
                    }
-                , ifDisabled = 
+                , ifDisabled =
                    { size = 18
                    , color = MaterialColor.gray
                    }
@ -1623,23 +1649,39 @@ tab palette =


 more_vert : Icon
-more_vert {size,color}=
-    icon "0 0 48 48" size [ Svg.path [ 
-            Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z" 
-           ,Svg.Attributes.stroke <| Color.toCssString color
-            ] [] ]
+more_vert { size, color } =
+    icon "0 0 48 48"
+        size
+        [ Svg.path
+            [ Svg.Attributes.d "M24 16c2.21 0 4-1.79 4-4s-1.79-4-4-4-4 1.79-4 4 1.79 4 4 4zm0 4c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4zm0 12c-2.21 0-4 1.79-4 4s1.79 4 4 4 4-1.79 4-4-1.79-4-4-4z"
+            , Svg.Attributes.stroke <| Color.toCssString color
+            ]
+            []
+        ]


 search : Icon
-search  {size,color}=
-    icon "0 0 48 48" size [ Svg.path [ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"
-    ,Svg.Attributes.stroke <| Color.toCssString color ] [] ]
+search { size, color } =
+    icon "0 0 48 48"
+        size
+        [ Svg.path
+            [ Svg.Attributes.d "M31 28h-1.59l-.55-.55C30.82 25.18 32 22.23 32 19c0-7.18-5.82-13-13-13S6 11.82 6 19s5.82 13 13 13c3.23 0 6.18-1.18 8.45-3.13l.55.55V31l10 9.98L40.98 38 31 28zm-12 0c-4.97 0-9-4.03-9-9s4.03-9 9-9 9 4.03 9 9-4.03 9-9 9z"
+            , Svg.Attributes.stroke <| Color.toCssString color
+            ]
+            []
+        ]


 menu : Icon
-menu  {size,color}=
-    icon "0 0 48 48" size [ Svg.path [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"
-    ,Svg.Attributes.stroke <| Color.toCssString color ] [] ]
+menu { size, color } =
+    icon "0 0 48 48"
+        size
+        [ Svg.path
+            [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"
+            , Svg.Attributes.stroke <| Color.toCssString color
+            ]
+            []
+        ]


 menuTabButton : Palette -> ButtonStyle msg
@ -1701,8 +1743,10 @@ menuTabButton palette =
            , Element.centerY
            , Element.centerX
            ]
-        , content = {text =  {contentText = []}
-        , icon = { ifActive =
+        , content =
+            { text = { contentText = [] }
+            , icon =
+                { ifActive =
                    { size = 18
                    , color = palette.primary |> MaterialColor.accessibleTextColor
                    }
@ -1715,7 +1759,7 @@ menuTabButton palette =
                    , color = palette.primary |> MaterialColor.accessibleTextColor
                    }
                }
-        }
+            }
        }
    }

@ -1775,11 +1819,12 @@ drawerButton palette =
        []
    , content =
        { elementRow = baseButton palette |> .content |> .elementRow
-        , content = 
-            { text = {contentText = baseButton palette |> (\b -> b.content.content.text.contentText)}
-            , icon = { ifActive =
+        , content =
+            { text = { contentText = baseButton palette |> (\b -> b.content.content.text.contentText) }
+            , icon =
+                { ifActive =
                    { size = 18
-                    , color = palette.primary 
+                    , color = palette.primary
                    }
                , ifDisabled =
                    { size = 18
@ -1790,7 +1835,7 @@ drawerButton palette =
                    , color = palette.primary |> MaterialColor.accessibleTextColor
                    }
                }
-        }
+            }
        }
    }

--- a/src/Widget/Style/Material/Color.elm
+++ b/src/Widget/Style/Material/Color.elm
@ -111,10 +111,8 @@ accessibleTextColor color =

 {-| Returns the first color, adapted to ensure accessibility rules.

-```
-accessibleTextColor bgColor
-    = accessibleWithTextColor (Color.rgb255 255 255 255) bgColor
-```
+    accessibleTextColor bgColor =
+        accessibleWithTextColor (Color.rgb255 255 255 255) bgColor

 -}
 accessibleWithTextColor : Color -> Color -> Color
@ -196,13 +194,11 @@ fromCIELCH =

 {-| Simulates adding a color in front (subtractive color mixing).

-```
--Darkens the color by 50%
-withShade (Color.rgb255 255 255 255) 0.5
+    --Darkens the color by 50%
+    withShade (Color.rgb255 255 255 255) 0.5

--Makes the color 50% more red
-withShade (Color.rgb255 255 0 0) 0.5
-```
+    --Makes the color 50% more red
+    withShade (Color.rgb255 255 0 0) 0.5

 -}
 withShade : Color -> Float -> Color -> Color
@ -228,10 +224,8 @@ withShade c2 amount c1 =

 {-| Multiply the opacity value by a given value

-```
-scaleOpacity (0.25 \* 2) ==
-  scaleOpacity 0.25 >> scaleOpacity 2
-```
+    scaleOpacity (0.25 \* 2) ==
+      scaleOpacity 0.25 >> scaleOpacity 2

 -}
 scaleOpacity : Float -> Color -> Color