Added ExpansionItem. Removed ExpansionPanel.

example/src/Data/Example.elm

@@ -24,7 +24,6 @@ type Example
     | SwitchExample
     | SelectExample
     | MultiSelectExample
-    | ExpansionPanelExample
     | TabExample
     | SortTableExample
     | ModalExample
@@ -41,7 +40,6 @@ asList =
     , SwitchExample
     , SelectExample
     , MultiSelectExample
-    , ExpansionPanelExample
     , TabExample
     , SortTableExample
     , ModalExample
@@ -69,9 +67,6 @@ toString example =
         MultiSelectExample ->
             "Multi Select"
 
-        ExpansionPanelExample ->
-            "ExpansionPanel"
-
         TabExample ->
             "Tab"
 
@@ -112,9 +107,6 @@ fromString string =
         "Multi Select" ->
             Just MultiSelectExample
 
-        "ExpansionPanel" ->
-            Just ExpansionPanelExample
-
         "Tab" ->
             Just TabExample
 
@@ -158,9 +150,6 @@ get example =
         MultiSelectExample ->
             .multiSelect
 
-        ExpansionPanelExample ->
-            .expansionPanel
-
         TabExample ->
             .tab
 
@@ -201,9 +190,6 @@ toTests example =
         MultiSelectExample ->
             Test.multiSelect
 
-        ExpansionPanelExample ->
-            Test.expansionPanel
-
         TabExample ->
             Test.tab
 
@@ -234,7 +220,6 @@ type Msg
     | Switch Switch.Msg
     | Select Select.Msg
     | MultiSelect MultiSelect.Msg
-    | ExpansionPanel ExpansionPanel.Msg
     | Tab Tab.Msg
     | SortTable SortTable.Msg
     | Modal Modal.Msg
@@ -250,7 +235,6 @@ type alias Model =
     , switch : Switch.Model
     , select : Select.Model
     , multiSelect : MultiSelect.Model
-    , expansionPanel : ExpansionPanel.Model
     , tab : Tab.Model
     , sortTable : SortTable.Model
     , modal : Modal.Model
@@ -276,7 +260,6 @@ type alias UpgradeCollection =
     , switch : UpgradeRecord Switch.Model Switch.Msg
     , select : UpgradeRecord Select.Model Select.Msg
     , multiSelect : UpgradeRecord MultiSelect.Model MultiSelect.Msg
-    , expansionPanel : UpgradeRecord ExpansionPanel.Model ExpansionPanel.Msg
     , tab : UpgradeRecord Tab.Model Tab.Msg
     , sortTable : UpgradeRecord SortTable.Model SortTable.Msg
     , modal : UpgradeRecord Modal.Model Modal.Msg
@@ -293,7 +276,6 @@ type alias ExampleView msg =
     , switch : Element msg
     , select : Element msg
     , multiSelect : Element msg
-    , expansionPanel : Element msg
     , tab : Element msg
     , sortTable : Element msg
     , modal : Element msg
@@ -320,9 +302,6 @@ init =
         ( multiSelectModel, multiSelectMsg ) =
             MultiSelect.init
 
-        ( expansionPanelModel, expansionPanelMsg ) =
-            ExpansionPanel.init
-
         ( tabModel, tabMsg ) =
             Tab.init
 
@@ -351,7 +330,6 @@ init =
       , switch = switchModel
       , select = selectModel
       , multiSelect = multiSelectModel
-      , expansionPanel = expansionPanelModel
       , tab = tabModel
       , sortTable = sortTableModel
       , modal = modalModel
@@ -409,13 +387,6 @@ upgradeRecord =
         , updateFun = MultiSelect.update
         , subscriptionsFun = MultiSelect.subscriptions
         }
-    , expansionPanel =
-        { from = .expansionPanel
-        , to = \model a -> { model | expansionPanel = a }
-        , msgMapper = ExpansionPanel
-        , updateFun = ExpansionPanel.update
-        , subscriptionsFun = ExpansionPanel.subscriptions
-        }
     , tab =
         { from = .tab
         , to = \model a -> { model | tab = a }
@@ -490,9 +461,6 @@ update msg model =
         MultiSelect m ->
             updateField .multiSelect m
 
-        ExpansionPanel m ->
-            updateField .expansionPanel m
-
         Tab m ->
             updateField .tab m
 
@@ -530,7 +498,6 @@ subscriptions model =
     , upgradeRecord.switch |> subFun
     , upgradeRecord.select |> subFun
     , upgradeRecord.multiSelect |> subFun
-    , upgradeRecord.expansionPanel |> subFun
     , upgradeRecord.tab |> subFun
     , upgradeRecord.sortTable |> subFun
     , upgradeRecord.modal |> subFun
@@ -557,8 +524,6 @@ view msgMapper style model =
         Select.view (Select >> msgMapper) style (.select model)
     , multiSelect =
         MultiSelect.view (MultiSelect >> msgMapper) style (.multiSelect model)
-    , expansionPanel =
-        ExpansionPanel.view (ExpansionPanel >> msgMapper) style (.expansionPanel model)
     , tab =
         Tab.view (Tab >> msgMapper) style (.tab model)
     , sortTable =
@@ -577,6 +542,9 @@ view msgMapper style model =
         Icon.view (Icon >> msgMapper) style (.icon model)
     }
 
+--------------------------------------------------------------------------------
+-- DO NOT CHANGE ANYTHING AFTER THIS
+--------------------------------------------------------------------------------
 
 toCardList :
     { idle : msg
@@ -625,8 +593,6 @@ toCardList { idle, msgMapper, style, model } =
 
 
 
-{-------------------------------------------------------------------------------
--------------------------------------------------------------------------------}
 
 
 updateField :

example/src/Data/Style.elm

@@ -16,7 +16,6 @@ import Widget
         ( ButtonStyle
         , ColumnStyle
         , DialogStyle
-        , ExpansionPanelStyle
         , RowStyle
         , SortTableStyle
         , TabStyle
@@ -34,6 +33,8 @@ import Widget
         , TabStyle
         , TextInputStyle
         , HeaderStyle
+        , TextItemStyle
+        , ExpansionItemStyle
         )
 import Widget.Snackbar exposing (SnackbarStyle)
 import Widget.Layout exposing (LayoutStyle)
@@ -53,17 +54,17 @@ style palette =
     , tab = Material.tab palette
     , textInput = Material.textInput palette
     , chipButton = Material.chip palette
-    , expansionPanel = Material.expansionPanel palette
-    , expansionPanelItem = Material.expansionPanelItem palette
     , dialog = Material.alertDialog palette
     , progressIndicator = Material.progressIndicator palette
     , layout = Material.layout palette
     , switch = Material.switch palette
-    , fullBleedDivider = Material.fullBleedDivider
+    , fullBleedDivider = Material.fullBleedDivider palette
     , insetDivider = Material.insetDivider palette
-    , middleDividers = Material.middleDividers palette
+    , middleDivider = Material.middleDivider palette
     , insetHeader = Material.insetHeader palette
     , fullBleedHeader = Material.fullBleedHeader palette
+    , textItem = Material.textItem palette
+    , expansionItem = Material.expansionItem Material.defaultPalette
     }
 
 
@@ -72,8 +73,6 @@ style palette =
 
 type alias Style msg =
     { dialog : DialogStyle msg
-    , expansionPanel : ExpansionPanelStyle msg
-    , expansionPanelItem : ItemStyle (ExpansionPanelStyle msg)
     , button : ButtonStyle msg
     , switch : SwitchStyle msg
     , primaryButton : ButtonStyle msg
@@ -88,9 +87,11 @@ type alias Style msg =
     , selectButton : ButtonStyle msg
     , progressIndicator : ProgressIndicatorStyle msg
     , layout : LayoutStyle msg
-    , fullBleedDivider : ItemStyle (DividerStyle msg)
     , insetDivider : ItemStyle (DividerStyle msg)
-    , middleDividers : ItemStyle (DividerStyle msg)
+    , middleDivider : ItemStyle (DividerStyle msg)
+    , fullBleedDivider : ItemStyle (DividerStyle msg)
     , insetHeader : ItemStyle (HeaderStyle msg)
     , fullBleedHeader : ItemStyle (HeaderStyle msg)
+    , textItem : ItemStyle (TextItemStyle msg)
+    , expansionItem : ExpansionItemStyle msg
     }

example/src/Example/ExpansionPanel.elm

@@ -1,71 +0,0 @@
-module Example.ExpansionPanel exposing (Model, Msg, init, subscriptions, update, view)
-
-import Browser
-import Element exposing (Element)
-import Widget
-import Widget exposing (ExpansionPanelStyle)
-import Widget.Style.Material as Material
-
-
-type alias Style style msg =
-    { style
-        | expansionPanel : ExpansionPanelStyle msg
-    }
-
-
-materialStyle : Style {} msg
-materialStyle =
-    { expansionPanel = Material.expansionPanel Material.defaultPalette
-    }
-
-
-type Model
-    = IsExpanded Bool
-
-
-type Msg
-    = ToggleCollapsable Bool
-
-
-init : ( Model, Cmd Msg )
-init =
-    ( IsExpanded False
-    , Cmd.none
-    )
-
-
-update : Msg -> Model -> ( Model, Cmd Msg )
-update msg _ =
-    case msg of
-        ToggleCollapsable bool ->
-            ( IsExpanded bool
-            , 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 : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view msgMapper style (IsExpanded isExpanded) =
-    { onToggle = ToggleCollapsable >> msgMapper
-    , isExpanded = isExpanded
-    , icon = always Element.none
-    , text = "Title"
-    , content = Element.text <| "Hello World"
-    }
-        |> Widget.expansionPanel style.expansionPanel
-
-
-main : Program () Model Msg
-main =
-    Browser.element
-        { init = always init
-        , view = \model -> model |> view identity materialStyle |> Element.layout []
-        , update = update
-        , subscriptions = subscriptions
-        }

example/src/Example/Icon.elm

@@ -73,33 +73,33 @@ view msgMapper style () =
         |> 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
+    , [ (Material.Icons.done
+            |> Widget.Icon.elmMaterialIcons Color,"elm-material-icons")
+      , (Material.Icons.Action.done
+            |> Widget.Icon.materialIcons, "material-icons")
+      , (FeatherIcons.check
+            |> Widget.Icon.elmFeather FeatherIcons.toHtml,"elm-feather")
+      , (FontAwesome.Solid.check
+            |> Widget.Icon.elmFontawesome FontAwesome.Svg.viewIcon,"elm-fontawesome")
+      , (Ionicon.checkmark
+            |> Widget.Icon.elmIonicons,"elm-ionicons")
+      , (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
+                },"elm-octicons")
+      , (Heroicons.Solid.check
+            |> Widget.Icon.elmHeroicons,"elm-heroicons")
+      , (Ant.Icons.Svg.checkOutlined
+            |> Widget.Icon.antDesignIconsElm,"ant-design-icons-elm")
+      ,( Zondicons.checkmark
+            |> Widget.Icon.elmZondicons,"elm-zondicons")
       ]
         |> List.map
-            (\icon ->
+            (\(icon,text) ->
                 Widget.button style.primaryButton
-                    { text = "Done"
+                    { text = text
                     , icon = icon
                     , onPress = Just <| msgMapper <| ()
                     }

example/src/Example/List.elm

@@ -3,17 +3,24 @@ module Example.List exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import Widget
-import Widget exposing (ColumnStyle, DividerStyle, ItemStyle, HeaderStyle)
+import Widget exposing (ColumnStyle, DividerStyle,ExpansionItemStyle, ItemStyle, HeaderStyle,TextItemStyle,ExpansionPanelStyle)
 import Widget.Style.Material as Material
-
+import FeatherIcons
+import Widget.Icon as Icon
+import Element.Font as Font
+import Widget.Style.Material.Color as MaterialColor
 
 type alias Style style msg =
     { style
         | cardColumn : ColumnStyle msg
         , insetDivider : ItemStyle (DividerStyle msg)
-        , middleDividers : ItemStyle (DividerStyle msg)
+        , middleDivider : ItemStyle (DividerStyle msg)
+        , fullBleedDivider : ItemStyle (DividerStyle msg)
         , insetHeader : ItemStyle (HeaderStyle msg)
         , fullBleedHeader : ItemStyle (HeaderStyle msg)
+        , textItem : ItemStyle (TextItemStyle msg)
+        , expansionPanelItem : ItemStyle (ExpansionPanelStyle msg)
+        , expansionItem : ExpansionItemStyle msg
     }
 
 
@@ -21,52 +28,106 @@ materialStyle : Style {} msg
 materialStyle =
     { cardColumn = Material.cardColumn Material.defaultPalette
     , insetDivider = Material.insetDivider Material.defaultPalette
-    , middleDividers = Material.middleDividers Material.defaultPalette
+    , middleDivider = Material.middleDivider Material.defaultPalette
+    , fullBleedDivider = Material.fullBleedDivider Material.defaultPalette
     , insetHeader = Material.insetHeader Material.defaultPalette
     , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette
+    , textItem = Material.textItem Material.defaultPalette
+    , expansionPanelItem = Material.expansionPanelItem Material.defaultPalette
+    , expansionItem = Material.expansionItem Material.defaultPalette
     }
 
 
-type alias Model =
-    ()
+type Model
+    = IsExpanded Bool
 
 
-type alias Msg =
-    Never
+type Msg
+    = ToggleCollapsable Bool
 
 
 init : ( Model, Cmd Msg )
 init =
-    ( ()
+    ( IsExpanded False
     , Cmd.none
     )
 
 
 update : Msg -> Model -> ( Model, Cmd Msg )
-update _ () =
-    ( ()
-    , Cmd.none
-    )
-
+update msg _ =
+    case msg of
+        ToggleCollapsable bool ->
+            ( IsExpanded bool
+            , Cmd.none
+            )
 
 subscriptions : Model -> Sub Msg
-subscriptions () =
+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 : (Msg -> msg) -> Style style msg -> Model -> Element msg
-view _ style () =
+view msgMapper style (IsExpanded isExpanded) =
     [ "Section 1"
         |> Widget.headerItem style.fullBleedHeader
-    , Widget.item <| Element.text <| "A"
+    , Widget.item <| Element.text <| "Custom Item"
+    , Widget.divider style.middleDivider
+    , Widget.item <| Element.el [Element.centerY ] <|  Element.text <| "Custom Item (centered)"
     , "Section 2"
         |> Widget.headerItem style.fullBleedHeader
-    , Widget.item <| Element.text <| "B"
-    , Widget.divider style.middleDividers
-    , Widget.item <| Element.text <| "C"
-    ]
+    , Widget.textItem style.textItem
+        { onPress = Nothing
+        , icon = 
+            FeatherIcons.triangle
+            |> Icon.elmFeather FeatherIcons.toHtml
+        , text = "Item with Icon"
+        , content = \{size,color} ->
+            "1."
+            |> Element.text
+            |> Element.el
+                [Font.color <| MaterialColor.fromColor color
+                ,Font.size size
+                ]
+        }
+    , Widget.divider style.insetDivider
+    , Widget.textItem style.textItem
+        { onPress = not isExpanded |>ToggleCollapsable |> msgMapper |> Just
+        , icon = always Element.none
+        , text = "Click Me"
+        , content =
+            \{size,color} ->
+            "2."
+            |> Element.text
+            |> Element.el
+                [Font.color <| MaterialColor.fromColor color
+                ,Font.size size
+                ]
+        }
+    , Widget.divider style.fullBleedDivider
+    ]++ (Widget.expansionItem style.expansionItem
+        { onToggle = ToggleCollapsable >> msgMapper
+        , isExpanded = isExpanded
+        , icon = always Element.none
+        , text = "Expandable Item"
+        , content = 
+            [  "Section 3"
+            |> Widget.headerItem style.insetHeader
+        , Widget.textItem style.textItem
+        { onPress = Nothing
+        , icon =  always Element.none
+        , text = "Item"
+        , content =
+            \{size,color} ->
+            "3."
+            |> Element.text
+            |> Element.el
+                [Font.color <| MaterialColor.fromColor color
+                ,Font.size size
+                ]
+        }
+        ]
+        })
         |> Widget.itemList style.cardColumn
 
 

example/src/Main.elm

@@ -439,7 +439,7 @@ viewLoaded m =
 
                                                 else
                                                     [ Widget.divider style.fullBleedDivider
-                                                    , Widget.expansionPanelItem style.expansionPanelItem
+                                                    ] ++ Widget.expansionItem style.expansionItem
                                                         { onToggle =
                                                             always
                                                                 (name
@@ -456,6 +456,8 @@ viewLoaded m =
                                                                     ++ [ Element.width <| Element.fill ]
                                                                 )
                                                                 more
+                                                                |> Widget.item
+                                                                |> List.singleton
                                                         , isExpanded =
                                                             name
                                                                 |> Example.fromString
@@ -466,7 +468,7 @@ viewLoaded m =
                                                                     )
                                                                 |> Maybe.withDefault False
                                                         }
-                                                    ]
+                                                    
                                                )
                                         )
                                             |> Widget.itemList style.cardColumn

src/Internal/Button.elm

@@ -1,10 +1,8 @@
 module Internal.Button exposing (Button, ButtonStyle, TextButton, button, iconButton, textButton)
 
-import Color exposing (Color)
 import Element exposing (Attribute, Element)
 import Element.Input as Input
 import Element.Region as Region
-import Html exposing (Html)
 import Widget.Icon exposing (Icon, IconStyle)
 
 

src/Internal/Dialog.elm

@@ -1,12 +1,9 @@
 module Internal.Dialog exposing (Dialog, DialogStyle, dialog, modal)
 
-import Color exposing (Color)
 import Element exposing (Attribute, Element)
 import Element.Background as Background
 import Element.Events as Events
-import Html exposing (Html)
 import Internal.Button as Button exposing (ButtonStyle, TextButton)
-import Widget.Icon exposing (Icon)
 
 
 {-| -}

src/Internal/ExpansionPanel.elm

@@ -2,7 +2,7 @@ module Internal.ExpansionPanel exposing (ExpansionPanel, ExpansionPanelStyle, ex
 
 import Element exposing (Attribute, Element)
 import Element.Events as Events
-import Internal.List as List exposing (Item, ItemStyle)
+import Internal.Item as Item exposing (Item, ItemStyle)
 import Widget.Icon exposing (Icon, IconStyle)
 
 
@@ -30,11 +30,9 @@ type alias ExpansionPanelStyle msg =
                 , icon : IconStyle
                 }
             }
-        , content :
-            { element : List (Attribute msg)
+        , content : {element : List (Attribute msg)}
             }
         }
-    }
 
 
 type alias ExpansionPanel msg =
@@ -67,11 +65,11 @@ expansionPanel style model =
             , Element.map never <|
                 if model.isExpanded then
                     style.content.panel.content.collapseIcon
-                        style.content.panel.content.label.content.icon
+                        style.content.panel.content.icon
 
                 else
                     style.content.panel.content.expandIcon
-                        style.content.panel.content.label.content.icon
+                        style.content.panel.content.icon
             ]
         , if model.isExpanded then
             Element.el style.content.content.element <| model.content
@@ -92,4 +90,4 @@ expansionPanelItem :
         }
     -> Item msg
 expansionPanelItem style model =
-    List.toItem style (\s -> expansionPanel s model)
+    Item.toItem style (\s -> expansionPanel s model)

src/Internal/Item.elm

@@ -0,0 +1,154 @@
+module Internal.Item exposing (DividerStyle, HeaderStyle, ExpansionItemStyle,ExpansionItem, Item, ItemStyle, TextItem, TextItemStyle,expansionItem, divider, headerItem, item, textItem, toItem)
+
+import Element exposing (Attribute, Element)
+import Element.Input as Input
+import Widget.Icon as Icon exposing (Icon, IconStyle)
+import Widget.Style.Customize exposing (content)
+
+
+{-| -}
+type alias ItemStyle content =
+    { element : List (Attribute Never)
+    , content : content
+    }
+
+
+{-| -}
+type alias DividerStyle msg =
+    { element : List (Attribute msg)
+    }
+
+
+{-| -}
+type alias HeaderStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { divider : DividerStyle msg
+        , title : List (Attribute msg)
+        }
+    }
+
+
+{-| -}
+type alias TextItemStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    , content :
+        { elementRow : List (Attribute msg)
+        , content :
+            { text : { elementText : List (Attribute msg) }
+            , icon : 
+                { element : List (Attribute msg)
+                , content : IconStyle
+                }
+            , content : IconStyle
+            }
+        }
+    }
+
+
+type alias Item msg =
+    List (Attribute msg) -> Element msg
+
+
+type alias TextItem msg =
+    { text : String
+    , onPress : Maybe msg
+    , icon : Icon
+    , content : Icon
+    }
+
+
+item : Element msg -> Item msg
+item element =
+    toItem
+        { element = []
+        , content = ()
+        }
+        (always element)
+
+
+divider : ItemStyle (DividerStyle msg) -> Item msg
+divider style =
+    toItem style (\{ element } -> Element.none |> Element.el element)
+
+
+headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
+headerItem style title =
+    toItem style
+        (\{ elementColumn, content } ->
+            [ Element.none
+                |> Element.el content.divider.element
+            , title
+                |> Element.text
+                |> Element.el content.title
+            ]
+                |> Element.column elementColumn
+        )
+
+
+textItem : ItemStyle (TextItemStyle msg) -> TextItem msg -> Item msg
+textItem s { onPress, text, icon, content } =
+    toItem s
+        (\style ->
+            Input.button (style.elementButton ++ (if onPress == Nothing then
+                    style.ifDisabled
+
+                else
+                    style.otherwise
+               ))
+                { onPress = onPress
+                , label =
+                    [ icon style.content.content.icon.content
+                        |> Element.map never
+                        |> Element.el style.content.content.icon.element
+                    , text
+                        |> Element.text
+                        |> List.singleton
+                        |> Element.paragraph []
+                        |> Element.el style.content.content.text.elementText
+                    , content style.content.content.content
+                        |> Element.map never
+                    ]
+                        |> Element.row style.content.elementRow
+                }
+        )
+
+type alias ExpansionItemStyle msg =
+    { item : ItemStyle (TextItemStyle msg)
+    , expandIcon : Icon
+    , collapseIcon : Icon
+    }
+
+type alias ExpansionItem msg =
+    { icon : Icon
+    , text : String
+    , onToggle : Bool -> msg
+    , content : List (Item msg)
+    , isExpanded : Bool
+    }
+
+
+expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
+expansionItem s { icon, text,onToggle,content,isExpanded} =
+    (textItem s.item
+         { text = text
+        , onPress = Just <| onToggle <| not isExpanded
+        , icon = icon
+        , content =
+            (if isExpanded then 
+                s.collapseIcon 
+            else 
+                s.expandIcon )
+        
+        }
+    )
+        :: (if isExpanded then content else [])
+
+toItem : ItemStyle style -> (style -> Element msg) -> Item msg
+toItem style element =
+    \attr ->
+        element style.content
+            |> Element.el
+                (attr ++ (style.element |> List.map (Element.mapAttribute never)))

src/Internal/ItemButton.elm

@@ -1,18 +0,0 @@
-module Internal.ItemButton exposing (ItemButton, iconButton)
-
-import Element exposing (Element)
-import Element.Input as Input
-import Element.Region as Region
-import Widget.Icon exposing (Icon)
-
-
-type alias ItemButton msg =
-    { text : String
-    , onPress : Maybe msg
-    , icon : Icon
-    , content : Element msg
-    }
-
-
-iconButton style { onPress, text, icon } =
-    Debug.todo "implement iconButton"

src/Internal/List.elm

@@ -1,32 +1,10 @@
-module Internal.List exposing (ColumnStyle, DividerStyle, Item, ItemStyle, RowStyle, HeaderStyle, buttonColumn, buttonRow, column, divider, headerItem, item, itemList, row, toItem)
+module Internal.List exposing (ColumnStyle, RowStyle, buttonColumn, buttonRow, column, itemList, row)
 
 import Element exposing (Attribute, Element)
 import Internal.Button exposing (Button, ButtonStyle)
+import Internal.Item as Item exposing (Item)
 import Internal.Select as Select
-import Widget.Style.Customize as Customize exposing (content)
-
-
-{-| -}
-type alias ItemStyle content =
-    { element : List (Attribute Never)
-    , content : content
-    }
-
-
-{-| -}
-type alias DividerStyle msg =
-    { element : List (Attribute msg)
-    }
-
-
-{-| -}
-type alias HeaderStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { divider : DividerStyle msg
-        , title : List (Attribute msg)
-        }
-    }
+import Widget.Style.Customize as Customize
 
 
 {-| -}
@@ -55,46 +33,6 @@ type alias ColumnStyle msg =
     }
 
 
-type alias Item msg =
-    List (Attribute msg) -> Element msg
-
-
-item : Element msg -> Item msg
-item element =
-    toItem
-        { element = []
-        , content = ()
-        }
-        (always element)
-
-
-divider : ItemStyle (DividerStyle msg) -> Item msg
-divider style =
-    toItem style (\{ element } -> Element.none |> Element.el element)
-
-
-headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
-headerItem style title =
-    toItem style
-        (\{ elementColumn, content } ->
-            [ Element.none
-                |> Element.el content.divider.element
-            , title
-                |> Element.text
-                |> Element.el content.title
-            ]
-                |> Element.column elementColumn
-        )
-
-
-toItem : ItemStyle style -> (style -> Element msg) -> Item msg
-toItem style element =
-    \attr ->
-        element style.content
-            |> Element.el
-                (attr ++ (style.element |> List.map (Element.mapAttribute never)))
-
-
 internal :
     { element : List (Attribute Never)
     , ifFirst : List (Attribute Never)
@@ -131,7 +69,7 @@ row : RowStyle msg -> List (Element msg) -> Element msg
 row style =
     List.map
         (\a ->
-            toItem
+            Item.toItem
                 { element = style.content.element
                 , content = ()
                 }
@@ -145,7 +83,7 @@ column : ColumnStyle msg -> List (Element msg) -> Element msg
 column style =
     List.map
         (\a ->
-            toItem
+            Item.toItem
                 { element = style.content.element
                 , content = ()
                 }

src/Internal/Material/ExpansionPanel.elm

@@ -1,112 +0,0 @@
-module Internal.Material.ExpansionPanel exposing
-    ( expand_less
-    , expand_more
-    , expansionPanel
-    , expansionPanelItem
-    )
-
-import Color
-import Element
-import Element.Background as Background
-import Internal.ExpansionPanel exposing (ExpansionPanelStyle)
-import Internal.List exposing (ItemStyle)
-import Internal.Material.Icon as Icon
-import Internal.Material.Palette exposing (Palette)
-import Svg
-import Svg.Attributes
-import Widget.Icon as Icon exposing (Icon)
-import Widget.Style.Customize as Customize
-import Widget.Style.Material.Color as MaterialColor
-
-
-expand_less : Icon
-expand_less { size, color } =
-    Icon.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.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)
-            ]
-            []
-        ]
-
-
-expansionPanel : Palette -> ExpansionPanelStyle msg
-expansionPanel palette =
-    expansionPanelItem palette
-        |> .content
-        |> Customize.mapContent
-            (\record ->
-                { record
-                    | panel =
-                        record.panel
-                            |> Customize.elementRow
-                                [ Element.height <| Element.px 48
-                                , Element.padding 14
-                                ]
-                    , content =
-                        record.content
-                            |> Customize.element
-                                [ Element.paddingEach
-                                    { top = 0
-                                    , right = 14
-                                    , bottom = 14
-                                    , left = 14
-                                    }
-                                ]
-                }
-            )
-
-
-expansionPanelItem : Palette -> ItemStyle (ExpansionPanelStyle msg)
-expansionPanelItem palette =
-    { element = []
-    , content =
-        { elementColumn =
-            [ Background.color <| MaterialColor.fromColor <| palette.surface
-            , Element.spacing 14
-            , Element.width <| Element.fill
-            ]
-        , content =
-            { panel =
-                { elementRow =
-                    [ Element.spaceEvenly
-                    , Element.width <| Element.fill
-                    ]
-                , content =
-                    { label =
-                        { elementRow = [ Element.spacing 32 ]
-                        , content =
-                            { icon =
-                                { size = 16
-                                , color = MaterialColor.gray
-                                }
-                            , text = { elementText = [] }
-                            }
-                        }
-                    , expandIcon = expand_more
-                    , collapseIcon = expand_less
-                    , icon =
-                        { size = 24
-                        , color = MaterialColor.gray
-                        }
-                    }
-                }
-            , content =
-                { element = [ Element.width <| Element.fill ]
-                }
-            }
-        }
-    }

src/Internal/Material/Icon.elm

@@ -3,19 +3,19 @@ module Internal.Material.Icon exposing (icon)
 import Element exposing (Element)
 import Svg exposing (Svg)
 import Svg.Attributes
+import Color exposing (Color)
 
-
-icon : String -> Int -> List (Svg Never) -> Element Never
-icon string size =
+icon : {viewBox:String,size:Int,color:Color} -> List (Svg Never) -> Element Never
+icon {viewBox,size,color} =
     Svg.svg
         [ Svg.Attributes.height <| String.fromInt size
-        , Svg.Attributes.stroke "currentColor"
-        , Svg.Attributes.fill "currentColor"
+        , Svg.Attributes.stroke <| Color.toCssString <| color
+        , Svg.Attributes.fill <| Color.toCssString <| color
 
         --, Svg.Attributes.strokeLinecap "round"
         --, Svg.Attributes.strokeLinejoin "round"
         --, Svg.Attributes.strokeWidth "2"
-        , Svg.Attributes.viewBox string
+        , Svg.Attributes.viewBox viewBox
         , Svg.Attributes.width <| String.fromInt size
         ]
         >> Element.html

src/Internal/Material/Item.elm

@@ -0,0 +1,275 @@
+module Internal.Material.Item exposing
+    ( expansionItem
+    , fullBleedDivider
+    , fullBleedHeader
+    , insetDivider
+    , insetHeader
+    , middleDivider
+    , textItem
+    )
+
+import Color
+import Element
+import Element.Background as Background
+import Element.Border as Border
+import Element.Font as Font
+import Html.Attributes as Attributes
+import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
+import Internal.Material.Icon as Icon
+import Internal.Material.Palette exposing (Palette)
+import Svg
+import Svg.Attributes
+import Widget.Icon exposing (Icon)
+import Widget.Style.Material.Color as MaterialColor
+import Widget.Style.Material.Typography as Typography
+
+
+fullBleedDivider : Palette -> ItemStyle (DividerStyle msg)
+fullBleedDivider _ =
+    { element =
+        [ Element.width <| Element.fill
+        , Element.height <| Element.px 1
+        , Element.padding 0
+        , Border.widthEach
+            { bottom = 0
+            , left = 1
+            , right = 1
+            , top = 0
+            }
+        ]
+    , content =
+        { element =
+            [ Element.width <| Element.fill
+            , Element.height <| Element.px 1
+            , Color.gray
+                |> MaterialColor.fromColor
+                |> Background.color
+            ]
+        }
+    }
+
+
+insetDivider : Palette -> ItemStyle (DividerStyle msg)
+insetDivider _ =
+    { element =
+        [ Element.width <| Element.fill
+        , Element.height <| Element.px 1
+        , Border.widthEach
+            { bottom = 0
+            , left = 1
+            , right = 1
+            , top = 0
+            }
+        , Element.paddingEach
+            { bottom = 0
+            , left = 72
+            , right = 0
+            , top = 0
+            }
+        ]
+    , content =
+        { element =
+            [ Element.width <| Element.fill
+            , Element.height <| Element.px 1
+            , Color.gray
+                |> MaterialColor.fromColor
+                |> Background.color
+            ]
+        }
+    }
+
+
+middleDivider : Palette -> ItemStyle (DividerStyle msg)
+middleDivider _ =
+    { element =
+        [ Element.width <| Element.fill
+        , Element.height <| Element.px 1
+        , Border.widthEach
+            { bottom = 0
+            , left = 1
+            , right = 1
+            , top = 0
+            }
+        , Element.paddingEach
+            { bottom = 0
+            , left = 16
+            , right = 16
+            , top = 0
+            }
+        ]
+    , content =
+        { element =
+            [ Element.width <| Element.fill
+            , Element.height <| Element.px 1
+            , Color.gray
+                |> MaterialColor.fromColor
+                |> Background.color
+            ]
+        }
+    }
+
+
+insetHeader : Palette -> ItemStyle (HeaderStyle msg)
+insetHeader palette =
+    { element =
+        [ Element.width <| Element.fill
+        , Element.height <| Element.shrink
+        , Border.widthEach
+            { bottom = 0
+            , left = 1
+            , right = 1
+            , top = 0
+            }
+        , Element.paddingEach
+            { bottom = 0
+            , left = 72
+            , right = 0
+            , top = 0
+            }
+        ]
+    , content =
+        { elementColumn =
+            [ Element.width <| Element.fill
+            , Element.spacing <| 12
+            ]
+        , content =
+            { divider =
+                insetDivider palette
+                    |> .content
+            , title =
+                Typography.body2
+                    ++ [ MaterialColor.gray
+                            |> MaterialColor.fromColor
+                            |> Font.color
+                       ]
+            }
+        }
+    }
+
+
+fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
+fullBleedHeader palette =
+    { element =
+        [ Element.width <| Element.fill
+        , Element.height <| Element.shrink
+        , Element.padding 0
+        , Border.widthEach
+            { bottom = 0
+            , left = 1
+            , right = 1
+            , top = 0
+            }
+        ]
+    , content =
+        { elementColumn =
+            [ Element.width <| Element.fill
+            , Element.spacing <| 8
+            ]
+        , content =
+            { divider =
+                insetDivider palette
+                    |> .content
+            , title =
+                Typography.caption
+                    ++ [ MaterialColor.gray
+                            |> MaterialColor.fromColor
+                            |> Font.color
+                       , Element.paddingXY 16 0
+                       ]
+            }
+        }
+    }
+
+
+textItem : Palette -> ItemStyle (TextItemStyle msg)
+textItem _ =
+    { element = [ Element.padding 0 ]
+    , content =
+        { elementButton =
+            [ Element.width Element.fill
+            , Element.padding 16
+            ]
+        , ifDisabled =
+            [ Element.mouseDown []
+            , Element.mouseOver []
+            , Element.focused []
+            , Element.htmlAttribute <| Attributes.style "cursor" "default"
+            ]
+        , otherwise =
+            [ Element.mouseDown <|
+                [ MaterialColor.gray
+                    |> MaterialColor.scaleOpacity MaterialColor.buttonPressedOpacity
+                    |> MaterialColor.fromColor
+                    |> Background.color
+                ]
+            , Element.focused <|
+                [ MaterialColor.gray
+                    |> MaterialColor.scaleOpacity MaterialColor.buttonFocusOpacity
+                    |> MaterialColor.fromColor
+                    |> Background.color
+                ]
+            , Element.mouseOver <|
+                [ MaterialColor.gray
+                    |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
+                    |> MaterialColor.fromColor
+                    |> Background.color
+                ]
+            ]
+        , content =
+            { elementRow = [ Element.spacing 16, Element.width Element.fill ]
+            , content =
+                { text = { elementText = [ Element.width Element.fill ] }
+                , icon =
+                    { element =
+                        [ Element.width <| Element.px 40
+                        , Element.height <| Element.px 24
+                        ]
+                    , content =
+                        { size = 24
+                        , color = MaterialColor.gray
+                        }
+                    }
+                , content =
+                    { size = 24
+                    , color = MaterialColor.gray
+                    }
+                }
+            }
+        }
+    }
+
+
+expand_less : Icon
+expand_less { size, color } =
+    Icon.icon {viewBox = "0 0 48 48"
+        , size = size
+        , color = color
+    }
+        [ Svg.path
+            [ Svg.Attributes.d "M24 16L12 28l2.83 2.83L24 21.66l9.17 9.17L36 28z"
+
+            ]
+            []
+        ]
+
+
+expand_more : Icon
+expand_more { size, color } =
+    Icon.icon {viewBox = "0 0 48 48"
+        , size = size
+        , color = color
+    }
+        [ Svg.path
+            [ Svg.Attributes.d "M33.17 17.17L24 26.34l-9.17-9.17L12 20l12 12 12-12z"
+
+            ]
+            []
+        ]
+
+
+expansionItem : Palette -> ExpansionItemStyle msg
+expansionItem palette =
+    { item = textItem palette
+    , expandIcon = expand_more
+    , collapseIcon = expand_less
+    }

src/Internal/Material/Layout.elm

@@ -22,11 +22,12 @@ import Widget.Style.Material.Typography as Typography
 
 more_vert : Icon
 more_vert { size, color } =
-    Icon.icon "0 0 48 48"
-        size
+    Icon.icon {viewBox = "0 0 48 48"
+        , size = size
+        , color = color
+    }
         [ 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
             ]
             []
         ]
@@ -34,11 +35,12 @@ more_vert { size, color } =
 
 search : Icon
 search { size, color } =
-    Icon.icon "0 0 48 48"
-        size
+    Icon.icon {viewBox = "0 0 48 48"
+        , size = size
+        , color = color
+    }
         [ 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
             ]
             []
         ]
@@ -46,11 +48,12 @@ search { size, color } =
 
 menu : Icon
 menu { size, color } =
-    Icon.icon "0 0 48 48"
-        size
+    Icon.icon {viewBox = "0 0 48 48"
+        , size = size
+        , color = color
+    }
         [ Svg.path
             [ Svg.Attributes.d "M6 36h36v-4H6v4zm0-10h36v-4H6v4zm0-14v4h36v-4H6z"
-            , Svg.Attributes.stroke <| Color.toCssString color
             ]
             []
         ]

src/Internal/Material/List.elm

@@ -2,30 +2,16 @@ module Internal.Material.List exposing
     ( buttonRow
     , cardColumn
     , column
-    , fullBleedDivider
-    , fullBleedHeader
-    , insetDivider
-    , insetHeader
-    , middleDividers
     , row
     )
 
-import Color
 import Element
 import Element.Background as Background
 import Element.Border as Border
 import Element.Font as Font
-import Internal.List
-    exposing
-        ( ColumnStyle
-        , DividerStyle
-        , ItemStyle
-        , RowStyle
-        , HeaderStyle
-        )
+import Internal.List exposing (ColumnStyle, RowStyle)
 import Internal.Material.Palette exposing (Palette)
 import Widget.Style.Material.Color as MaterialColor
-import Widget.Style.Material.Typography as Typography
 
 
 row : RowStyle msg
@@ -60,161 +46,6 @@ column =
     }
 
 
-fullBleedDivider : ItemStyle (DividerStyle msg)
-fullBleedDivider =
-    { element =
-        [ Element.width <| Element.fill
-        , Element.height <| Element.px 1
-        , Element.padding 0
-        , Border.widthEach
-            { bottom = 0
-            , left = 1
-            , right = 1
-            , top = 0
-            }
-        ]
-    , content =
-        { element =
-            [ Element.width <| Element.fill
-            , Element.height <| Element.px 1
-            , Color.gray
-                |> MaterialColor.fromColor
-                |> Background.color
-            ]
-        }
-    }
-
-
-insetDivider : Palette -> ItemStyle (DividerStyle msg)
-insetDivider _ =
-    { element =
-        [ Element.width <| Element.fill
-        , Element.height <| Element.px 1
-        , Border.widthEach
-            { bottom = 0
-            , left = 1
-            , right = 1
-            , top = 0
-            }
-        , Element.paddingEach
-            { bottom = 0
-            , left = 72
-            , right = 0
-            , top = 0
-            }
-        ]
-    , content =
-        { element =
-            [ Element.width <| Element.fill
-            , Element.height <| Element.px 1
-            , Color.gray
-                |> MaterialColor.fromColor
-                |> Background.color
-            ]
-        }
-    }
-
-
-middleDividers : Palette -> ItemStyle (DividerStyle msg)
-middleDividers _ =
-    { element =
-        [ Element.width <| Element.fill
-        , Element.height <| Element.px 1
-        , Border.widthEach
-            { bottom = 0
-            , left = 1
-            , right = 1
-            , top = 0
-            }
-        , Element.paddingEach
-            { bottom = 0
-            , left = 16
-            , right = 16
-            , top = 0
-            }
-        ]
-    , content =
-        { element =
-            [ Element.width <| Element.fill
-            , Element.height <| Element.px 1
-            , Color.gray
-                |> MaterialColor.fromColor
-                |> Background.color
-            ]
-        }
-    }
-
-
-insetHeader : Palette -> ItemStyle (HeaderStyle msg)
-insetHeader palette =
-    { element =
-        [ Element.width <| Element.fill
-        , Border.widthEach
-            { bottom = 0
-            , left = 1
-            , right = 1
-            , top = 0
-            }
-        , Element.paddingEach
-            { bottom = 0
-            , left = 72
-            , right = 0
-            , top = 0
-            }
-        ]
-    , content =
-        { elementColumn =
-            [ Element.width <| Element.fill
-            , Element.spacing <| 12
-            ]
-        , content =
-            { divider =
-                insetDivider palette
-                    |> .content
-            , title =
-                Typography.body2
-                    ++ [ MaterialColor.gray
-                            |> MaterialColor.fromColor
-                            |> Font.color
-                       ]
-            }
-        }
-    }
-
-
-fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
-fullBleedHeader palette =
-    { element =
-        [ Element.width <| Element.fill
-        , Element.padding 0
-        , Border.widthEach
-            { bottom = 0
-            , left = 1
-            , right = 1
-            , top = 0
-            }
-        ]
-    , content =
-        { elementColumn =
-            [ Element.width <| Element.fill
-            , Element.spacing <| 8
-            ]
-        , content =
-            { divider =
-                insetDivider palette
-                    |> .content
-            , title =
-                Typography.caption
-                    ++ [ MaterialColor.gray
-                            |> MaterialColor.fromColor
-                            |> Font.color
-                       , Element.paddingXY 16 0
-                       ]
-            }
-        }
-    }
-
-
 buttonRow : RowStyle msg
 buttonRow =
     { elementRow = []
@@ -257,7 +88,8 @@ cardColumn palette =
         ]
     , content =
         { element =
-            [ Element.padding 16
+            [ Element.paddingXY 16 12
+            , Element.height <| Element.minimum 48 <| Element.shrink
             , palette.surface
                 |> MaterialColor.fromColor
                 |> Background.color
@@ -273,6 +105,7 @@ cardColumn palette =
             ]
         , ifSingleton =
             [ Border.rounded 4
+            , Border.width 1
             ]
         , ifFirst =
             [ Border.roundEach

src/Internal/Material/SortTable.elm

@@ -1,19 +1,11 @@
-module Internal.Material.SortTable exposing ( sortTable)
+module Internal.Material.SortTable exposing (sortTable)
 
-import Color
 import Element
-import Element.Background as Background
-import Internal.Material.ExpansionPanel as ExpansionPanel
-import Internal.SortTable exposing (SortTableStyle )
-import Internal.List exposing (ItemStyle)
-import Internal.Material.Icon as Icon
-import Internal.Material.Palette exposing (Palette)
 import Internal.Material.Button as Button
-import Svg
-import Svg.Attributes
-import Widget.Icon as Icon exposing (Icon)
-import Widget.Style.Customize as Customize
-import Widget.Style.Material.Color as MaterialColor
+import Internal.Material.ExpansionPanel as ExpansionPanel
+import Internal.Material.Palette exposing (Palette)
+import Internal.SortTable exposing (SortTableStyle)
+
 
 sortTable : Palette -> SortTableStyle msg
 sortTable palette =
@@ -24,4 +16,4 @@ sortTable palette =
         , descIcon = ExpansionPanel.expand_more
         , defaultIcon = always Element.none
         }
-    }
+    }

src/Widget.elm

@@ -1,16 +1,16 @@
 module Widget exposing
     ( ButtonStyle, Button, TextButton, iconButton, textButton, button
-    , SwitchStyle,Switch, switch
+    , SwitchStyle, Switch, switch
     , Select, selectButton, select
     , MultiSelect, multiSelect
     , DialogStyle, Dialog, modal, dialog
-    , ExpansionPanelStyle, ExpansionPanel, expansionPanel, expansionPanelItem
-    , ItemStyle, DividerStyle, HeaderStyle, RowStyle, ColumnStyle, row, column, Item, itemList, item, divider, buttonRow, buttonColumn
+    , RowStyle, row, buttonRow
+    , ColumnStyle, column, buttonColumn
+    , ItemStyle, DividerStyle, HeaderStyle, TextItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, textItem, expansionItem
     , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
-    , TextInputStyle,TextInput, textInput
-    , TabStyle,Tab, tab
-    , ProgressIndicatorStyle,ProgressIndicator, circularProgressIndicator
-    , headerItem
+    , TextInputStyle, TextInput, textInput
+    , TabStyle, Tab, tab
+    , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
     )
 
 {-| This module contains different stateless view functions. No wiring required.
@@ -76,14 +76,6 @@ You can create you own widgets by sticking widgets types together.
 @docs DialogStyle, Dialog, modal, dialog
 
 
-# Expansion Panel
-
-![ExpansionPanel](https://orasund.github.io/elm-ui-widgets/assets/expansionPanel.png)
-
-[Open in Ellie](https://ellie-app.com/9p5Rv5jfVdFa1)
-
-@docs ExpansionPanelStyle, ExpansionPanel, expansionPanel, expansionPanelItem
-
 
 # List
 
@@ -91,16 +83,20 @@ You can create you own widgets by sticking widgets types together.
 
 [Open in Ellie](https://ellie-app.com/9p5RJnDVVCKa1)
 
+
 ## Row
 
 @docs RowStyle, row, buttonRow
 
+
 ## Column
+
 @docs ColumnStyle, column, buttonColumn
 
+
 ## Item
 
-@docs ItemStyle, DividerStyle, HeaderStyle, Item,itemList, item, divider, headerItem, buttonDrawer
+@docs ItemStyle, DividerStyle, HeaderStyle, TextItemStyle, ExpansionItemStyle, Item, ExpansionItem, itemList, item, divider, headerItem, buttonDrawer, textItem, expansionItem
 
 
 # Sort Table
@@ -136,7 +132,7 @@ You can create you own widgets by sticking widgets types together.
 
 [Open in Ellie](https://ellie-app.com/c47GJktH2bqa1)
 
-@docs ProgressIndicatorStyle,ProgressIndicator, circularProgressIndicator
+@docs ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
 
 -}
 
@@ -147,6 +143,7 @@ import Html exposing (Html)
 import Internal.Button as Button
 import Internal.Dialog as Dialog
 import Internal.ExpansionPanel as ExpansionPanel
+import Internal.Item as Item exposing (TextItem, TextItemStyle)
 import Internal.List as List
 import Internal.ProgressIndicator as ProgressIndicator
 import Internal.Select as Select
@@ -479,95 +476,6 @@ dialog =
 
 
 
-{----------------------------------------------------------
-- EXPANSION PANEL
-----------------------------------------------------------}
-
-
-{-| Technical Remark:
-
-  - If icons are defined in Svg, they might not display correctly.
-    To avoid that, make sure to wrap them in `Element.html >> Element.el []`
-
--}
-type alias ExpansionPanelStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { panel :
-            { elementRow : List (Attribute msg)
-            , content :
-                { label :
-                    { elementRow : List (Attribute msg)
-                    , content :
-                        { icon : IconStyle
-                        , text : { elementText : List (Attribute msg) }
-                        }
-                    }
-                , expandIcon : Icon
-                , collapseIcon : Icon
-                , icon : IconStyle
-                }
-            }
-        , content :
-            { element : List (Attribute msg)
-            }
-        }
-    }
-
-
-{-| Expansion Panel widget type
--}
-type alias ExpansionPanel msg =
-    { onToggle : Bool -> msg
-    , icon : Icon
-    , text : String
-    , content : Element msg
-    , isExpanded : Bool
-    }
-
-
-{-| An expansion Panel
--}
-expansionPanel :
-    ExpansionPanelStyle msg
-    ->
-        { onToggle : Bool -> msg
-        , icon : Icon
-        , text : String
-        , content : Element msg
-        , isExpanded : Bool
-        }
-    -> Element msg
-expansionPanel =
-    let
-        fun : ExpansionPanelStyle msg -> ExpansionPanel msg -> Element msg
-        fun =
-            ExpansionPanel.expansionPanel
-    in
-    fun
-
-
-{-| An expansion Panel
--}
-expansionPanelItem :
-    ItemStyle (ExpansionPanelStyle msg)
-    ->
-        { onToggle : Bool -> msg
-        , icon : Icon
-        , text : String
-        , content : Element msg
-        , isExpanded : Bool
-        }
-    -> Item msg
-expansionPanelItem =
-    let
-        fun : ItemStyle (ExpansionPanelStyle msg) -> ExpansionPanel msg -> Item msg
-        fun =
-            ExpansionPanel.expansionPanelItem
-    in
-    fun
-
-
 
 {----------------------------------------------------------
 - TEXT INPUT
@@ -676,6 +584,41 @@ type alias ColumnStyle msg =
     }
 
 
+{-| -}
+type alias TextItemStyle msg =
+    { elementButton : List (Attribute msg)
+    , ifDisabled : List (Attribute msg)
+    , otherwise : List (Attribute msg)
+    , content :
+        { elementRow : List (Attribute msg)
+        , content :
+            { text : { elementText : List (Attribute msg) }
+            , icon :
+                { element : List (Attribute msg)
+                , content : IconStyle
+                }
+            , content : IconStyle
+            }
+        }
+    }
+
+
+type alias ExpansionItemStyle msg =
+    { item : ItemStyle (TextItemStyle msg)
+    , expandIcon : Icon
+    , collapseIcon : Icon
+    }
+
+
+type alias ExpansionItem msg =
+    { icon : Icon
+    , text : String
+    , onToggle : Bool -> msg
+    , content : List (Item msg)
+    , isExpanded : Bool
+    }
+
+
 {-| Item widget type.
 
 Use `Widget.item` if you want to turn a simple element into an item.
@@ -689,21 +632,35 @@ type alias Item msg =
 -}
 item : Element msg -> Item msg
 item =
-    List.item
+    Item.item
 
 
 {-| A divider.
 -}
 divider : ItemStyle (DividerStyle msg) -> Item msg
 divider =
-    List.divider
+    Item.divider
 
 
 {-| A header for a part of a list.
 -}
 headerItem : ItemStyle (HeaderStyle msg) -> String -> Item msg
 headerItem =
-    List.headerItem
+    Item.headerItem
+
+
+{-| A clickable item that contains two spots for icons or additional information and a single line of text.
+-}
+textItem : ItemStyle (TextItemStyle msg) -> TextItem msg -> Item msg
+textItem =
+    Item.textItem
+
+
+{-| An expandable Item
+-}
+expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
+expansionItem =
+    Item.expansionItem
 
 
 {-| Replacement of `Element.row`

src/Widget/Style/Material.elm

@@ -6,13 +6,13 @@ module Widget.Style.Material exposing
     , cardColumn
     , chip, textInput
     , alertDialog
-    , expansionPanel, expansionPanelItem
     , row, column
-    , fullBleedDivider, insetDivider, middleDividers, insetHeader, fullBleedHeader
+    , fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
     , progressIndicator
+    , sortTable
     , snackbar
     , tab, tabButton
-    , layout,sortTable
+    , layout
     )
 
 {-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@@ -73,11 +73,6 @@ Thus for now we only provide a card containing a list.
 @docs alertDialog
 
 
-# Expansion Panel
-
-@docs expansionPanel, expansionPanelItem
-
-
 # List
 
 The [List widget](https://material.io/components/lists) is a very complex widget that sadly only particially made it into this package.
@@ -90,17 +85,19 @@ The [List widget](https://material.io/components/lists) is a very complex widget
 A List is build from items.
 You way want to use special items to visually organize the content of your list.
 
-@docs fullBleedDivider, insetDivider, middleDividers, insetHeader, fullBleedHeader
+@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, expansionItem
 
 
 # Progress Indicator
 
 @docs progressIndicator
 
+
 # Sort Table
 
 @docs sortTable
 
+
 # Snackbar
 
 @docs snackbar
@@ -127,27 +124,29 @@ import Color exposing (Color)
 import Internal.Button exposing (ButtonStyle)
 import Internal.Dialog exposing (DialogStyle)
 import Internal.ExpansionPanel exposing (ExpansionPanelStyle)
-import Internal.List exposing (ColumnStyle, DividerStyle, ItemStyle, RowStyle, HeaderStyle)
+import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ItemStyle, TextItemStyle)
+import Internal.List exposing (ColumnStyle, RowStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Chip as Chip
 import Internal.Material.Dialog as Dialog
 import Internal.Material.ExpansionPanel as ExpansionPanel
+import Internal.Material.Item as Item
 import Internal.Material.Layout as Layout
 import Internal.Material.List as List
 import Internal.Material.Palette as Palette
 import Internal.Material.ProgressIndicator as ProgressIndicator
 import Internal.Material.Snackbar as Snackbar
+import Internal.Material.SortTable as SortTable
 import Internal.Material.Switch as Switch
 import Internal.Material.Tab as Tab
 import Internal.Material.TextInput as TextInput
-import Internal.Material.SortTable as SortTable
 import Internal.ProgressIndicator exposing (ProgressIndicatorStyle)
+import Internal.SortTable exposing (SortTableStyle)
 import Internal.Switch exposing (SwitchStyle)
 import Internal.Tab exposing (TabStyle)
 import Internal.TextInput exposing (TextInputStyle)
 import Widget.Layout exposing (LayoutStyle)
 import Widget.Snackbar exposing (SnackbarStyle)
-import Internal.SortTable exposing (SortTableStyle)
 
 
 
@@ -325,37 +324,49 @@ column =
 
 {-| A divider covering the full length
 -}
-fullBleedDivider : ItemStyle (DividerStyle msg)
+fullBleedDivider : Palette -> ItemStyle (DividerStyle msg)
 fullBleedDivider =
-    List.fullBleedDivider
+    Item.fullBleedDivider
 
 
 {-| A divider covering only parts of the width
 -}
 insetDivider : Palette -> ItemStyle (DividerStyle msg)
 insetDivider =
-    List.insetDivider
+    Item.insetDivider
 
 
 {-| A divider in the center
 -}
-middleDividers : Palette -> ItemStyle (DividerStyle msg)
-middleDividers =
-    List.middleDividers
+middleDivider : Palette -> ItemStyle (DividerStyle msg)
+middleDivider =
+    Item.middleDivider
 
 
 {-| A header of a section of a list. Comes with a inset divider.
 -}
 insetHeader : Palette -> ItemStyle (HeaderStyle msg)
 insetHeader =
-    List.insetHeader
+    Item.insetHeader
 
 
 {-| A header of a section of a list. Comes with a full bleed divider.
 -}
 fullBleedHeader : Palette -> ItemStyle (HeaderStyle msg)
 fullBleedHeader =
-    List.fullBleedHeader
+    Item.fullBleedHeader
+
+
+{-| An expandable item.
+
+Technical Remarks:
+
+  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
+
+-}
+expansionItem : Palette -> ExpansionItemStyle msg
+expansionItem =
+    Item.expansionItem
 
 
 {-| a Row of buttons.
@@ -381,6 +392,19 @@ cardColumn =
     List.cardColumn
 
 
+{-| A basic item containg some text, a button and some additional information.
+
+Technical Remark:
+
+There are some conflicting informations about the height of an element in the [Specification](https://material.io/components/lists#specs).
+A normal item should be 48 height, but a item with an icon should be 56. This is confusing, because a normal item can also have an additional icon that is the same size.
+
+-}
+textItem : Palette -> ItemStyle (TextItemStyle msg)
+textItem =
+    Item.textItem
+
+
 
 {-------------------------------------------------------------------------------
 -- D I A L O G
@@ -394,39 +418,6 @@ alertDialog =
     Dialog.alertDialog
 
 
-
-{-------------------------------------------------------------------------------
--- E X P A N S I O N   P A N E L
--------------------------------------------------------------------------------}
-
-
-{-| The expansion Panel is an outdated part of the material design specification.
-In modern implementation it gets replaced with a very sophisticated list widget.
-
-Technical Remarks:
-
-  - The expansion panel is part of an [older version](https://material.io/archive/guidelines/components/expansion-panels.html) of the Material Design.
-    The newer version is part of the List component.
-    The styling is taken from the [new specification](https://material.io/components/lists#specs).
-  - The Icons are taken from [danmarcab/material-icons](https://dark.elm.dmy.fr/packages/danmarcab/material-icons/latest/).
-
--}
-expansionPanel : Palette -> ExpansionPanelStyle msg
-expansionPanel =
-    ExpansionPanel.expansionPanel
-
-
-{-| A variant on the expansion Panel optimized to be used inside a card.
-
-This is a small workaround to allow expansion panels within cards.
-
--}
-expansionPanelItem : Palette -> ItemStyle (ExpansionPanelStyle msg)
-expansionPanelItem =
-    ExpansionPanel.expansionPanelItem
-
-
-
 {-------------------------------------------------------------------------------
 -- P R O G R E S S   I N D I C A T O R
 -------------------------------------------------------------------------------}
@@ -438,15 +429,19 @@ progressIndicator : Palette -> ProgressIndicatorStyle msg
 progressIndicator =
     ProgressIndicator.progressIndicator
 
+
+
 --------------------------------------------------------------------------------
 --  SORT TABLE
 --------------------------------------------------------------------------------
 
+
 sortTable : Palette -> SortTableStyle msg
 sortTable =
     SortTable.sortTable
 
 
+
 {-------------------------------------------------------------------------------
 -- S N A C K B A R
 -------------------------------------------------------------------------------}