Added insetIem and fullBleedItem

2024-11-22 04:58:49 +03:00 · 2021-02-03 13:35:06 +01:00 · 2021-02-03 13:35:06 +01:00 · b970dd7768
commit b970dd7768
parent 99c5e0459f
15 changed files with 340 additions and 181 deletions
--- a/example/src/Data/Style.elm
+++ b/example/src/Data/Style.elm
@ -27,8 +27,9 @@ import Widget
        , SwitchStyle
        , TabStyle
        , TextInputStyle
-        , TextItemStyle
-        , SheetStyle
+        , InsetItemStyle
+        , SideSheetStyle
+        , FullBleedItemStyle
        )
 import Widget.Icon as Icon
 import Widget.Layout exposing (LayoutStyle)
@ -62,11 +63,13 @@ style palette =
    , middleDivider = Material.middleDivider palette
    , insetHeader = Material.insetHeader palette
    , fullBleedHeader = Material.fullBleedHeader palette
-    , textItem = Material.textItem palette
+    , insetItem = Material.insetItem palette
    , multiLineItem = Material.multiLineItem palette
    , imageItem = Material.imageItem palette
    , expansionItem = Material.expansionItem palette
-    , sheet = Material.sheet palette
+    , sideSheet = Material.sideSheet palette
+    , fullBleedItem = Material.fullBleedItem Material.defaultPalette
+    , selectItem = Material.selectItem Material.defaultPalette
    }


@ -95,9 +98,11 @@ type alias Style msg =
    , fullBleedDivider : ItemStyle (DividerStyle msg) msg
    , insetHeader : ItemStyle (HeaderStyle msg) msg
    , fullBleedHeader : ItemStyle (HeaderStyle msg) msg
-    , textItem : ItemStyle (TextItemStyle msg) msg
+    , insetItem : ItemStyle (InsetItemStyle msg) msg
    , multiLineItem : ItemStyle (MultiLineItemStyle msg) msg
    , imageItem : ItemStyle (ImageItemStyle msg) msg
    , expansionItem : ExpansionItemStyle msg
-    , sheet : SheetStyle msg
+    , sideSheet : SideSheetStyle msg
+    , fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg
+    , selectItem : ItemStyle (ButtonStyle msg) msg
    }
--- a/example/src/Example/List.elm
+++ b/example/src/Example/List.elm
@ -4,7 +4,7 @@ import Browser
 import Element exposing (Element)
 import Element.Font as Font
 import FeatherIcons
-import Widget exposing (ColumnStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, TextItemStyle)
+import Widget exposing (ButtonStyle,ColumnStyle,FullBleedItemStyle, DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, SwitchStyle, InsetItemStyle)
 import Widget.Icon as Icon
 import Widget.Material as Material
 import Widget.Material.Color as MaterialColor
@ -18,11 +18,13 @@ type alias Style style msg =
        , fullBleedDivider : ItemStyle (DividerStyle msg) msg
        , insetHeader : ItemStyle (HeaderStyle msg) msg
        , fullBleedHeader : ItemStyle (HeaderStyle msg) msg
-        , textItem : ItemStyle (TextItemStyle msg) msg
+        , insetItem : ItemStyle (InsetItemStyle msg) msg
        , imageItem : ItemStyle (ImageItemStyle msg) msg
        , expansionItem : ExpansionItemStyle msg
        , switch : SwitchStyle msg
        , multiLineItem : ItemStyle (MultiLineItemStyle msg) msg
+        , fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg
+        , selectItem : ItemStyle (ButtonStyle msg) msg
    }


@ -34,11 +36,13 @@ materialStyle =
    , fullBleedDivider = Material.fullBleedDivider Material.defaultPalette
    , insetHeader = Material.insetHeader Material.defaultPalette
    , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette
-    , textItem = Material.textItem Material.defaultPalette
+    , insetItem = Material.insetItem Material.defaultPalette
    , imageItem = Material.imageItem Material.defaultPalette
    , expansionItem = Material.expansionItem Material.defaultPalette
    , switch = Material.switch Material.defaultPalette
    , multiLineItem = Material.multiLineItem Material.defaultPalette
+    , fullBleedItem = Material.fullBleedItem Material.defaultPalette
+    , selectItem = Material.selectItem Material.defaultPalette
    }


@ -77,12 +81,18 @@ view : (Msg -> msg) -> Style style msg -> Model -> Element msg
 view msgMapper style (IsExpanded isExpanded) =
    [ "Section 1"
        |> Widget.headerItem style.fullBleedHeader
-    , Widget.item <| Element.text <| "Custom Item"
+    , Widget.asItem <| Element.text <| "Custom Item"
    , Widget.divider style.middleDivider
-    , Widget.item <| Element.el [ Element.centerY ] <| Element.text <| "Custom Item (centered)"
+    , Widget.fullBleedItem style.fullBleedItem
+        { onPress = Nothing
+        , icon =
+            \{ size, color } ->
+                Element.none
+        , text = "Full Bleed Item"
+        }
    , "Section 2"
        |> Widget.headerItem style.fullBleedHeader
-    , Widget.textItem style.textItem
+    , Widget.insetItem style.insetItem
        { onPress = Nothing
        , icon =
            FeatherIcons.triangle
@ -110,7 +120,7 @@ view msgMapper style (IsExpanded isExpanded) =
                        ]
        }
    , Widget.divider style.insetDivider
-    , Widget.textItem style.textItem
+    , Widget.insetItem style.insetItem
        { onPress = not isExpanded |> ToggleCollapsable |> msgMapper |> Just
        , icon = always Element.none
        , text = "Click Me"
@ -156,7 +166,7 @@ view msgMapper style (IsExpanded isExpanded) =
            , content =
                [ "Section 3"
                    |> Widget.headerItem style.insetHeader
-                , Widget.textItem style.textItem
+                , Widget.insetItem style.insetItem
                    { onPress = Nothing
                    , icon = always Element.none
                    , text = "Item"
@ -171,6 +181,25 @@ view msgMapper style (IsExpanded isExpanded) =
                    }
                ]
            }
+        ++ [ "Menu" |> Widget.headerItem style.fullBleedHeader]
+        ++ ({ selected = if isExpanded then Just 1 else Just 0
+    , options =
+        [ True, False ]
+            |> List.map
+                (\bool ->
+                    { text = if bool then "Expanded" else "Collapsed"
+                    , icon = always Element.none
+                    }
+                )
+    , onSelect = (\int -> 
+            (int == 1) 
+        |> ToggleCollapsable
+        |> msgMapper
+        |> Just
+        )
+    }
+        |> Widget.selectItem style.selectItem
+        )
        |> Widget.itemList style.cardColumn


--- a/example/src/Example/Sheet.elm
+++ b/example/src/Example/Sheet.elm
@ -3,26 +3,26 @@ module Example.Sheet exposing (Model, Msg, init, subscriptions, update, view)
 import Browser
 import Element exposing (Element)
 import FeatherIcons
-import Widget exposing (ButtonStyle, SheetStyle,ItemStyle,HeaderStyle,TextItemStyle)
+import Widget exposing (ButtonStyle, SideSheetStyle,ItemStyle,HeaderStyle,InsetItemStyle)
 import Widget.Icon as Icon
 import Widget.Material as Material
 import Widget.Material.Typography as Typography

 type alias Style style msg =
    { style
-        | sheet : SheetStyle msg
+        | sideSheet : SideSheetStyle msg
        , primaryButton : ButtonStyle msg
        , fullBleedHeader : ItemStyle (HeaderStyle msg) msg
-        , textItem : ItemStyle (TextItemStyle msg) msg
+        , insetItem : ItemStyle (InsetItemStyle msg) msg
    }


 materialStyle : Style {} msg
 materialStyle =
-    { sheet = Material.sheet Material.defaultPalette
+    { sideSheet = Material.sideSheet Material.defaultPalette
    , primaryButton = Material.containedButton Material.defaultPalette
    , fullBleedHeader = Material.fullBleedHeader Material.defaultPalette
-    , textItem = Material.textItem Material.defaultPalette
+    , insetItem = Material.insetItem Material.defaultPalette
    }


@ -78,8 +78,8 @@ view msgMapper style (IsEnabled isEnabled) =
                            [ "Menu"
                              |> Element.text
                              |> Element.el Typography.h6
-                              |> Widget.item
-                            , Widget.textItem style.textItem
+                              |> Widget.asItem
+                            , Widget.insetItem style.insetItem
                                { onPress = Just <| msgMapper <| ToggleModal False
                                , icon =
                                    FeatherIcons.triangle
@ -89,7 +89,7 @@ view msgMapper style (IsEnabled isEnabled) =
                                    \{ size, color } ->
                                        Element.none
                                }
-                            , Widget.textItem style.textItem
+                            , Widget.insetItem style.insetItem
                                { onPress = Just <| msgMapper <| ToggleModal False
                                , icon =
                                    FeatherIcons.triangle
@ -100,7 +100,7 @@ view msgMapper style (IsEnabled isEnabled) =
                                        Element.none
                                }
                            ] 
-                            |> Widget.sheet style.sheet
+                            |> Widget.sideSheet style.sideSheet
                        , onDismiss = Just <| msgMapper <| ToggleModal False
                        }
                        |> List.singleton
--- a/example/src/Main.elm
+++ b/example/src/Main.elm
@ -432,7 +432,7 @@ viewLoaded m =
                                          , elem
                                          ]
                                            |> Element.column Grid.simple
-                                            |> Widget.item
+                                            |> Widget.asItem
                                         )
                                            :: (if more |> List.isEmpty then
                                                    []
@ -457,7 +457,7 @@ viewLoaded m =
                                                                        ++ [ Element.width <| Element.fill ]
                                                                    )
                                                                    more
-                                                                    |> Widget.item
+                                                                    |> Widget.asItem
                                                                    |> List.singleton
                                                            , isExpanded =
                                                                name
--- a/src/Internal/Dialog.elm
+++ b/src/Internal/Dialog.elm
@ -1,10 +1,8 @@
 module Internal.Dialog exposing (Dialog, DialogStyle, dialog)

-import Element exposing (Attribute, Element)
-import Element.Background as Background
-import Element.Events as Events
+import Element exposing (Attribute)
 import Internal.Button as Button exposing (ButtonStyle, TextButton)
-import Internal.Modal as Modal exposing (Modal)
+import Internal.Modal exposing (Modal)


 {-| -}
--- a/src/Internal/Grid.elm
+++ b/src/Internal/Grid.elm
@ -1,28 +0,0 @@
-module Internal.Grid exposing (ColumnStyle, RowStyle)
-
-import Element exposing (Attribute, Element)
-
-{-| -}
-type alias RowStyle msg =
-    { elementRow : List (Attribute msg)
-    , content :
-        { element : List (Attribute msg)
-        , ifFirst : List (Attribute msg)
-        , ifLast : List (Attribute msg)
-        , ifSingleton : List (Attribute msg)
-        , otherwise : List (Attribute msg)
-        }
-    }
-
-
-{-| -}
-type alias ColumnStyle msg =
-    { elementColumn : List (Attribute msg)
-    , content :
-        { element : List (Attribute msg)
-        , ifFirst : List (Attribute msg)
-        , ifLast : List (Attribute msg)
-        , ifSingleton : List (Attribute msg)
-        , otherwise : List (Attribute msg)
-        }
-    }
--- a/src/Internal/Item.elm
+++ b/src/Internal/Item.elm
@ -1,12 +1,13 @@
-module Internal.Item exposing (DividerStyle,selectItem, ExpansionItem, ExpansionItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, TextItem, TextItemStyle, divider, expansionItem, headerItem, imageItem, item, multiLineItem, textItem, toItem)
+module Internal.Item exposing (DividerStyle
+    , ExpansionItem, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItem, ImageItemStyle, Item, ItemStyle, MultiLineItemStyle, InsetItem, InsetItemStyle, asItem, divider, expansionItem, fullBleedItem, headerItem, imageItem, multiLineItem, selectItem, insetItem, toItem)

 import Element exposing (Attribute, Element)
 import Element.Input as Input
+import Internal.Button exposing (Button, ButtonStyle)
+import Internal.Select as Select exposing (Select)
 import Widget.Customize exposing (content)
 import Widget.Icon exposing (Icon, IconStyle)
-import Internal.Button exposing (ButtonStyle)
-import Internal.Grid exposing (ColumnStyle)
-import Internal.Select as Select exposing (Select)
+

 type alias ItemStyle content msg =
    { element : List (Attribute msg)
@ -28,7 +29,21 @@ type alias HeaderStyle msg =
    }


-type alias TextItemStyle msg =
+type alias FullBleedItemStyle 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 : IconStyle
+            }
+        }
+    }
+
+
+type alias InsetItemStyle msg =
    { elementButton : List (Attribute msg)
    , ifDisabled : List (Attribute msg)
    , otherwise : List (Attribute msg)
@ -86,7 +101,7 @@ type alias ImageItemStyle msg =


 type alias ExpansionItemStyle msg =
-    { item : ItemStyle (TextItemStyle msg) msg
+    { item : ItemStyle (InsetItemStyle msg) msg
    , expandIcon : Icon msg
    , collapseIcon : Icon msg
    }
@ -96,7 +111,7 @@ type alias Item msg =
    List (Attribute msg) -> Element msg


-type alias TextItem msg =
+type alias InsetItem msg =
    { text : String
    , onPress : Maybe msg
    , icon : Icon msg
@ -130,8 +145,35 @@ type alias MultiLineItem msg =
    }


-item : Element msg -> Item msg
-item element =
+fullBleedItem : ItemStyle (FullBleedItemStyle msg) msg -> Button msg -> Item msg
+fullBleedItem s { onPress, text, icon } =
+    toItem s
+        (\style ->
+            Input.button
+                (style.elementButton
+                    ++ (if onPress == Nothing then
+                            style.ifDisabled
+
+                        else
+                            style.otherwise
+                       )
+                )
+                { onPress = onPress
+                , label =
+                    [ text
+                        |> Element.text
+                        |> List.singleton
+                        |> Element.paragraph []
+                        |> Element.el style.content.content.text.elementText
+                    , icon style.content.content.icon
+                    ]
+                        |> Element.row style.content.elementRow
+                }
+        )
+
+
+asItem : Element msg -> Item msg
+asItem element =
    toItem
        { element = []
        , content = ()
@ -158,8 +200,8 @@ headerItem style title =
        )


-textItem : ItemStyle (TextItemStyle msg) msg -> TextItem msg -> Item msg
-textItem s { onPress, text, icon, content } =
+insetItem : ItemStyle (InsetItemStyle msg) msg -> InsetItem msg -> Item msg
+insetItem s { onPress, text, icon, content } =
    toItem s
        (\style ->
            Input.button
@ -218,7 +260,7 @@ imageItem s { onPress, text, image, content } =

 expansionItem : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
 expansionItem s { icon, text, onToggle, content, isExpanded } =
-    textItem s.item
+    insetItem s.item
        { text = text
        , onPress = Just <| onToggle <| not isExpanded
        , icon = icon
@ -270,16 +312,20 @@ multiLineItem s { onPress, title, text, icon, content } =
                }
        )

+
 selectItem : ItemStyle (ButtonStyle msg) msg -> Select msg -> List (Item msg)
 selectItem s select =
    select
-    |> Select.select
-    |> List.map (\b ->  toItem s (\style -> b |> Select.selectButton style) )
+        |> Select.select
+        |> List.map (\b -> toItem s (\style -> b |> Select.selectButton style))
+
+

 --------------------------------------------------------------------------------
 -- Internal
 --------------------------------------------------------------------------------

+
 toItem : ItemStyle style msg -> (style -> Element msg) -> Item msg
 toItem style element =
    \attr ->
--- a/src/Internal/List.elm
+++ b/src/Internal/List.elm
@ -5,15 +5,33 @@ import Internal.Button exposing (Button, ButtonStyle)
 import Internal.Item as Item exposing (Item)
 import Internal.Select as Select
 import Widget.Customize as Customize
-import Internal.Grid as Grid exposing (ColumnStyle, RowStyle)

-type alias ColumnStyle msg=
-    Grid.ColumnStyle msg

+{-| -}
 type alias RowStyle msg =
-    Grid.RowStyle msg
+    { elementRow : List (Attribute msg)
+    , content :
+        { element : List (Attribute msg)
+        , ifFirst : List (Attribute msg)
+        , ifLast : List (Attribute msg)
+        , ifSingleton : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        }
+    }


+{-| -}
+type alias ColumnStyle msg =
+    { elementColumn : List (Attribute msg)
+    , content :
+        { element : List (Attribute msg)
+        , ifFirst : List (Attribute msg)
+        , ifLast : List (Attribute msg)
+        , ifSingleton : List (Attribute msg)
+        , otherwise : List (Attribute msg)
+        }
+    }
+

 internal :
    { element : List (Attribute msg)
--- a/src/Internal/Material/Item.elm
+++ b/src/Internal/Material/Item.elm
@ -2,13 +2,14 @@ module Internal.Material.Item exposing
    ( expansionItem
    , fullBleedDivider
    , fullBleedHeader
+    , fullBleedItem
    , imageItem
    , insetDivider
    , insetHeader
    , middleDivider
    , multiLineItem
    , selectItem
-    , textItem
+    , insetItem
    )

 import Color
@ -17,14 +18,14 @@ 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, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
+import Internal.Button exposing (ButtonStyle)
+import Internal.Item exposing (DividerStyle, ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, InsetItemStyle)
+import Internal.Material.Button as Button
 import Internal.Material.Icon as Icon
 import Internal.Material.Palette exposing (Palette)
-import Internal.Material.Button as Button 
-import Internal.Button exposing (ButtonStyle)
 import Widget.Material.Color as MaterialColor
 import Widget.Material.Typography as Typography
-import Internal.Material.List as List
+

 fullBleedDivider : Palette -> ItemStyle (DividerStyle msg) msg
 fullBleedDivider _ =
@ -183,8 +184,30 @@ fullBleedHeader palette =
    }


-textItem : Palette -> ItemStyle (TextItemStyle msg) msg
-textItem _ =
+fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg
+fullBleedItem palette =
+    let
+        i =
+            insetItem palette
+    in
+    { element = i.element
+    , content =
+        { elementButton = i.content.elementButton
+        , ifDisabled = i.content.ifDisabled
+        , otherwise = i.content.otherwise
+        , content =
+            { elementRow = i.content.content.elementRow
+            , content =
+                { text = i.content.content.content.text
+                , icon = i.content.content.content.content
+                }
+            }
+        }
+    }
+
+
+insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg
+insetItem _ =
    { element = [ Element.padding 0 ]
    , content =
        { elementButton =
@ -375,14 +398,15 @@ imageItem _ =

 expansionItem : Palette -> ExpansionItemStyle msg
 expansionItem palette =
-    { item = textItem palette
+    { item = insetItem palette
    , expandIcon = Icon.expand_more
    , collapseIcon = Icon.expand_less
    }

+
 selectItem : Palette -> ItemStyle (ButtonStyle msg) msg
 selectItem palette =
-    { element = []
+    { element = [ Element.paddingXY 8 4 ]
    , content =
        { elementButton =
            [ Font.size 14
@ -420,10 +444,10 @@ selectItem palette =
                ++ [ MaterialColor.gray
                        |> MaterialColor.fromColor
                        |> Font.color
-                , Element.mouseDown []
-                , Element.mouseOver []
-                , Element.focused []
-                ]
+                   , Element.mouseDown []
+                   , Element.mouseOver []
+                   , Element.focused []
+                   ]
        , ifActive =
            [ palette.primary
                |> MaterialColor.scaleOpacity MaterialColor.buttonHoverOpacity
@ -442,7 +466,7 @@ selectItem palette =
                , Element.centerY
                ]
            , content =
-                { text = 
+                { text =
                    { contentText = [ Element.centerX ]
                    }
                , icon =
@ -462,4 +486,4 @@ selectItem palette =
                }
            }
        }
-    }
+    }
--- a/src/Internal/Material/Layout.elm
+++ b/src/Internal/Material/Layout.elm
@ -1,4 +1,4 @@
-module Internal.Material.Layout exposing ( layout, menu, menuTabButton, more_vert, search)
+module Internal.Material.Layout exposing (layout, menu, menuTabButton, more_vert, search)

 import Element
 import Element.Background as Background
@ -7,12 +7,11 @@ import Element.Font as Font
 import Internal.Button exposing (ButtonStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Icon as Icon
+import Internal.Material.Item as Item
 import Internal.Material.Palette exposing (Palette)
 import Internal.Material.Sheet as Sheet
 import Internal.Material.Snackbar as Snackbar
 import Internal.Material.TextInput as TextInput
-import Internal.Material.Item as Item
-import Internal.Item exposing (ItemStyle)
 import Svg
 import Svg.Attributes
 import Widget.Customize as Customize
@ -192,14 +191,15 @@ layout palette =
                )
    , sheetButton = Item.selectItem palette
    , menuTabButton = menuTabButton palette
-    , sheet = Sheet.sheet palette
+    , sheet = Sheet.sideSheet palette
    , menuIcon = menu
    , moreVerticalIcon = more_vert
    , spacing = 8
    , title = Typography.h6 ++ [ Element.paddingXY 8 0 ]
    , searchIcon = search
    , search = TextInput.searchInput palette
-    , searchFill = TextInput.textInputBase palette
-        |> Customize.elementRow [ Element.height <| Element.px 56 ]
-    , textItem = Item.textItem palette
+    , searchFill =
+        TextInput.textInputBase palette
+            |> Customize.elementRow [ Element.height <| Element.px 56 ]
+    , insetItem = Item.insetItem palette
    }
--- a/src/Internal/Material/Sheet.elm
+++ b/src/Internal/Material/Sheet.elm
@ -1,23 +1,22 @@
-module Internal.Material.Sheet exposing (sheet)
+module Internal.Material.Sheet exposing (sideSheet)

 import Element
 import Internal.Material.Palette exposing (Palette)
-import Internal.Sheet exposing (SheetStyle)
+import Internal.Sheet exposing (SideSheetStyle)
 import Widget.Material.Color as MaterialColor


-sheet : Palette -> SheetStyle msg
-sheet palette =
-    { element = []
+sideSheet : Palette -> SideSheetStyle msg
+sideSheet palette =
+    { element = [ ]
    , content =
        { elementColumn =
            (palette.surface |> MaterialColor.textAndBackground)
                ++ [ Element.width <| Element.maximum 360 <| Element.fill
-                   , Element.padding 8
-                   , Element.spacing 8
                   ]
        , content =
-            { element = [ Element.width <| Element.fill ]
+            { element = 
+                [ Element.width <| Element.fill ]
            , ifSingleton = []
            , ifFirst = []
            , ifLast = []
--- a/src/Internal/Sheet.elm
+++ b/src/Internal/Sheet.elm
@ -1,4 +1,4 @@
-module Internal.Sheet exposing (SheetStyle, sheet)
+module Internal.Sheet exposing (SideSheetStyle, sideSheet)

 import Element exposing (Attribute, Element)
 import Internal.Item exposing (Item)
@ -6,13 +6,13 @@ import Internal.List as List exposing (ColumnStyle)
 import Widget.Customize as Customize


-type alias SheetStyle msg =
+type alias SideSheetStyle msg =
    { element : List (Attribute msg)
    , content : ColumnStyle msg
    }


-sheet : SheetStyle msg -> List (Item msg) -> Element msg
-sheet style =
+sideSheet : SideSheetStyle msg -> List (Item msg) -> Element msg
+sideSheet style =
    List.itemList (style.content |> Customize.elementColumn [ Element.height <| Element.fill ])
        >> Element.el (style.element ++ [ Element.height <| Element.fill ])
--- a/src/Widget.elm
+++ b/src/Widget.elm
@ -7,19 +7,21 @@ module Widget exposing
    , DialogStyle, Dialog, dialog
    , RowStyle, row, buttonRow
    , ColumnStyle, column, buttonColumn
-    , ItemStyle, Item, item
-    , TextItemStyle, TextItem, textItem
+    , ItemStyle, Item
+    , InsetItemStyle, InsetItem, insetItem
    , ExpansionItemStyle, ExpansionItem, expansionItem
    , ImageItemStyle, ImageItem, imageItem
    , MultiLineItemStyle, MultiLineItem, multiLineItem
    , HeaderStyle, headerItem
    , DividerStyle, divider
+    , selectItem, asItem
    , itemList
-    , SheetStyle, sheet
+    , SideSheetStyle, sideSheet
    , SortTableStyle, SortTable, Column, sortTable, floatColumn, intColumn, stringColumn, unsortableColumn
    , TextInputStyle, TextInput, textInput
    , TabStyle, Tab, tab
    , ProgressIndicatorStyle, ProgressIndicator, circularProgressIndicator
+    , FullBleedItemStyle, fullBleedItem
    )

 {-| This module contains different stateless view functions. No wiring required.
@ -109,19 +111,20 @@ You can create you own widgets by sticking widgets types together.

 ## Item

-@docs ItemStyle, Item, item
+@docs ItemStyle, FullBleedStyle, Item, item
@docs TextItemStyle, TextItem, textItem
@docs ExpansionItemStyle, ExpansionItem, expansionItem
@docs ImageItemStyle, ImageItem, imageItem
@docs MultiLineItemStyle, MultiLineItem, multiLineItem
@docs HeaderStyle, headerItem
@docs DividerStyle, divider
-@docs selectItem
+@docs selectItem, asItem
@docs itemList

+
 # Sheet

-@docs SheetStyle, sheet
+@docs SideSheetStyle, sideSheet


 # Sort Table
@ -588,7 +591,7 @@ This way you can see the list as a queue of modals.
        = Close

    Element.layout
-        (modal
+        (singleModal
            [ { onDismiss = Just Close
              , content =
                  Element.text "Click outside this window to close it."
@ -839,7 +842,22 @@ type alias ColumnStyle msg =


 {-| -}
-type alias TextItemStyle msg =
+type alias FullBleedItemStyle 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 : IconStyle
+            }
+        }
+    }
+
+
+{-| -}
+type alias InsetItemStyle msg =
    { elementButton : List (Attribute msg)
    , ifDisabled : List (Attribute msg)
    , otherwise : List (Attribute msg)
@ -900,14 +918,14 @@ type alias ImageItemStyle msg =

 {-| -}
 type alias ExpansionItemStyle msg =
-    { item : ItemStyle (TextItemStyle msg) msg
+    { item : ItemStyle (InsetItemStyle msg) msg
    , expandIcon : Icon msg
    , collapseIcon : Icon msg
    }


 {-| -}
-type alias TextItem msg =
+type alias InsetItem msg =
    { text : String
    , onPress : Maybe msg
    , icon : Icon msg
@ -946,28 +964,45 @@ type alias ExpansionItem msg =

 {-| Item widget type.

-Use `Widget.item` if you want to turn a simple element into an item.
+Use `Widget.asItem` if you want to turn a simple element into an item.

 -}
 type alias Item msg =
    List (Attribute msg) -> Element msg


-{-| Simple element for a list.
+fullBleedItem :
+    ItemStyle (FullBleedItemStyle msg) msg
+    ->
+        { text : String
+        , onPress : Maybe msg
+        , icon : Icon msg
+        }
+    -> Item msg
+fullBleedItem =
+    let
+        fun : ItemStyle (FullBleedItemStyle msg) msg -> Button msg -> Item msg
+        fun =
+            Item.fullBleedItem
+    in
+    fun
+
+
+{-| Turns a Element into an item. Only use if you want to take care of the styling yourself.

    import Element
    import Widget.Material as Material

    Element.text "Just a text"
-        |> Widget.item
+        |> Widget.asItem
        |> List.singleton
        |> Widget.itemList (Material.cardColumn Material.defaultPalette)
        |> always "Ignore this line" --> "Ignore this line"

 -}
-item : Element msg -> Item msg
-item =
-    Item.item
+asItem : Element msg -> Item msg
+asItem =
+    Item.asItem


 {-| A divider.
@ -1062,8 +1097,8 @@ headerItem =
        |> always "Ignore this line" --> "Ignore this line"

 -}
-textItem :
-    ItemStyle (TextItemStyle msg) msg
+insetItem :
+    ItemStyle (InsetItemStyle msg) msg
    ->
        { text : String
        , onPress : Maybe msg
@ -1071,8 +1106,13 @@ textItem :
        , content : Icon msg
        }
    -> Item msg
-textItem =
-    Item.textItem
+insetItem =
+    let
+        fun : ItemStyle (InsetItemStyle msg) msg -> InsetItem msg -> Item msg
+        fun =
+            Item.insetItem
+    in
+    fun


 {-| A item contining a text running over multiple lines.
@ -1105,7 +1145,12 @@ multiLineItem :
        }
    -> Item msg
 multiLineItem =
-    Item.multiLineItem
+    let
+        fun : ItemStyle (MultiLineItemStyle msg) msg -> MultiLineItem msg -> Item msg
+        fun =
+            Item.multiLineItem
+    in
+    fun


 {-| A clickable item that contains a image , a line of text and some additonal information
@ -1147,7 +1192,12 @@ imageItem :
        }
    -> Item msg
 imageItem =
-    Item.imageItem
+    let
+        fun : ItemStyle (ImageItemStyle msg) msg -> ImageItem msg -> Item msg
+        fun =
+            Item.imageItem
+    in
+    fun


 {-| An expandable Item
@ -1206,7 +1256,13 @@ expansionItem :
        }
    -> List (Item msg)
 expansionItem =
-    Item.expansionItem
+    let
+        fun : ExpansionItemStyle msg -> ExpansionItem msg -> List (Item msg)
+        fun =
+            Item.expansionItem
+    in
+    fun
+

 {-| Displays a selection of Buttons as a item list. This is intended to be used as a menu.
 -}
@ -1214,6 +1270,7 @@ selectItem : ItemStyle (ButtonStyle msg) msg -> Select msg -> List (Item msg)
 selectItem =
    Item.selectItem

+
 {-| Replacement of `Element.row`

    import Element
@ -1355,7 +1412,7 @@ buttonColumn =
 --------------------------------------------------------------------------------


-type alias SheetStyle msg =
+type alias SideSheetStyle msg =
    { element : List (Attribute msg)
    , content : ColumnStyle msg
    }
@ -1363,9 +1420,9 @@ type alias SheetStyle msg =

 {-| A sheet is similar to
 -}
-sheet : SheetStyle msg -> List (Item msg) -> Element msg
-sheet =
-    Sheet.sheet
+sideSheet : SideSheetStyle msg -> List (Item msg) -> Element msg
+sideSheet =
+    Sheet.sideSheet



--- a/src/Widget/Layout.elm
+++ b/src/Widget/Layout.elm
@ -37,28 +37,23 @@ import Element.Input as Input
 import Html exposing (Html)
 import Internal.Button as Button exposing (Button, ButtonStyle)
 import Internal.Dialog as Dialog
-import Internal.Item as Item exposing (ItemStyle,TextItemStyle)
+import Internal.Item as Item exposing (ItemStyle, InsetItemStyle)
 import Internal.Modal as Modal exposing (Modal)
 import Internal.Select as Select exposing (Select)
-import Internal.Sheet as Sheet exposing (SheetStyle)
+import Internal.Sheet as Sheet exposing (SideSheetStyle)
 import Internal.TextInput as TextInput exposing (TextInput, TextInputStyle)
 import Widget.Customize as Customize
 import Widget.Icon exposing (Icon)
 import Widget.Snackbar as Snackbar exposing (Message, SnackbarStyle)


-{-| 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 LayoutStyle msg =
    { container : List (Attribute msg)
    , snackbar : SnackbarStyle msg
    , layout : List (Attribute msg) -> Element msg -> Html msg
    , header : List (Attribute msg)
-    , sheet : SheetStyle msg
+    , sheet : SideSheetStyle msg
    , sheetButton : ItemStyle (ButtonStyle msg) msg
    , menuButton : ButtonStyle msg
    , menuTabButton : ButtonStyle msg
@ -69,7 +64,7 @@ type alias LayoutStyle msg =
    , searchIcon : Icon msg
    , search : TextInputStyle msg
    , searchFill : TextInputStyle msg
-    , textItem : ItemStyle (TextItemStyle msg) msg
+    , insetItem : ItemStyle (InsetItemStyle msg) msg
    }


@ -325,9 +320,9 @@ dialog -> top sheet -> bottom sheet -> left sheet -> right sheet
 -}
 getModals :
    { button : ItemStyle (ButtonStyle msg) msg
-    , sheet : SheetStyle msg
+    , sheet : SideSheetStyle msg
    , searchFill : TextInputStyle msg
-    , textItem : ItemStyle (TextItemStyle msg) msg
+    , insetItem : ItemStyle (InsetItemStyle msg) msg
    }
    ->
        { window : { height : Int, width : Int }
@ -356,12 +351,11 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac
            (\part ->
                case part of
                    LeftSheet ->
-                        (title |> Item.item)
+                        (title |> Item.asItem)
                            :: (menu
                                    |> Item.selectItem style.button
-                                
                               )
-                            |> Sheet.sheet
+                            |> Sheet.sideSheet
                                (style.sheet
                                    |> Customize.element [ Element.alignLeft ]
                                    |> Customize.mapContent
@ -372,16 +366,17 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac

                    RightSheet ->
                        moreActions
-                            |> List.map (\{onPress,text,icon} -> 
-                                Item.textItem 
-                                    style.textItem
-                                    { text = text
-                                    , onPress = onPress
-                                    , icon = icon
-                                    , content = always Element.none
-                                    }
-                            )
-                            |> Sheet.sheet 
+                            |> List.map
+                                (\{ onPress, text, icon } ->
+                                    Item.insetItem
+                                        style.insetItem
+                                        { text = text
+                                        , onPress = onPress
+                                        , icon = icon
+                                        , content = always Element.none
+                                        }
+                                )
+                            |> Sheet.sideSheet
                                (style.sheet
                                    |> Customize.element [ Element.alignRight ]
                                )
@ -393,18 +388,14 @@ getModals style { search, title, onChangedSidebar, menu, moreActions, dialog, ac
                            |> Maybe.map
                                (TextInput.textInput
                                    (style.searchFill
-                                        |> Customize.elementRow 
-                                                                
-                                                                
-                                                                
-                                            [ Element.width <| Element.fill 
+                                        |> Customize.elementRow
+                                            [ Element.width <| Element.fill
                                            ]
                                        |> Customize.mapContent
                                            (\record ->
                                                { record
                                                    | text =
                                                        record.text
-                                                            
                                                }
                                            )
                                    )
@ -480,7 +471,7 @@ view style { search, title, onChangedSidebar, menu, actions, window, dialog, lay
                    { button = style.sheetButton
                    , sheet = style.sheet
                    , searchFill = style.searchFill
-                    , textItem = style.textItem
+                    , insetItem = style.insetItem
                    }
                    { window = window
                    , dialog = dialog
--- a/src/Widget/Material.elm
+++ b/src/Widget/Material.elm
@ -7,13 +7,15 @@ module Widget.Material exposing
    , chip, textInput
    , alertDialog
    , row, column
-    , fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem
+    , sideSheet
+    , fullBleedItem, insetItem, multiLineItem, imageItem, expansionItem, selectItem
+    , fullBleedDivider, insetDivider, middleDivider
+    , insetHeader, fullBleedHeader
    , progressIndicator
    , sortTable
    , snackbar
    , tab, tabButton
    , layout
-    , sheet, selectItem
    )

 {-| ![Example using the Material Design style](https://orasund.github.io/elm-ui-widgets/assets/material-style.png)
@ -78,16 +80,20 @@ Thus for now we only provide a card containing a list.

@docs row, column

+
 # Sheet

-@docs sheet
+@docs sideSheet
+

 # Item

 A List is build from items.
 You way want to use special items to visually organize the content of your list.

-@docs fullBleedDivider, insetDivider, middleDivider, insetHeader, fullBleedHeader, textItem, multiLineItem, imageItem, expansionItem, selectItem
+@docs fullBleedItem, insetItem, multiLineItem, imageItem, expansionItem, selectItem
+@docs fullBleedDivider, insetDivider, middleDivider
+@docs fullBleedHeader, insetHeader


 # Progress Indicator
@ -125,7 +131,8 @@ Note that you might want to checkout the [file on GitHub](https://github.com/Ora
 import Color exposing (Color)
 import Internal.Button exposing (ButtonStyle)
 import Internal.Dialog exposing (DialogStyle)
-import Internal.Item exposing (DividerStyle, ExpansionItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, TextItemStyle)
+import Internal.Item exposing (DividerStyle
+    , ExpansionItemStyle, FullBleedItemStyle, HeaderStyle, ImageItemStyle, ItemStyle, MultiLineItemStyle, InsetItemStyle)
 import Internal.List exposing (ColumnStyle, RowStyle)
 import Internal.Material.Button as Button
 import Internal.Material.Chip as Chip
@ -135,18 +142,18 @@ 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.Sheet as Sheet
 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.Sheet as Sheet
 import Internal.ProgressIndicator exposing (ProgressIndicatorStyle)
+import Internal.Sheet exposing (SideSheetStyle)
 import Internal.SortTable exposing (SortTableStyle)
 import Internal.Switch exposing (SwitchStyle)
 import Internal.Tab exposing (TabStyle)
 import Internal.TextInput exposing (TextInputStyle)
-import Internal.Sheet exposing (SheetStyle)
 import Widget.Layout exposing (LayoutStyle)
 import Widget.Snackbar exposing (SnackbarStyle)

@ -303,13 +310,18 @@ chip : Palette -> ButtonStyle msg
 chip =
    Chip.chip

+
+
 {-------------------------------------------------------------------------------
 -- SHEET
 -------------------------------------------------------------------------------}

-sheet : Palette -> SheetStyle msg
-sheet  =
-    Sheet.sheet
+
+sideSheet : Palette -> SideSheetStyle msg
+sideSheet =
+    Sheet.sideSheet
+
+

 {-------------------------------------------------------------------------------
 -- L I S T
@ -400,6 +412,11 @@ cardColumn =
    List.cardColumn


+fullBleedItem : Palette -> ItemStyle (FullBleedItemStyle msg) msg
+fullBleedItem =
+    Item.fullBleedItem
+
+
 {-| A basic item containg some text, a button and some additional information.

 Technical Remark:
@ -408,9 +425,9 @@ There are some conflicting informations about the height of an element in the [S
 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) msg
-textItem =
-    Item.textItem
+insetItem : Palette -> ItemStyle (InsetItemStyle msg) msg
+insetItem =
+    Item.insetItem


 {-| A text item allowing for more text.
@ -429,12 +446,15 @@ imageItem : Palette -> ItemStyle (ImageItemStyle msg) msg
 imageItem =
    Item.imageItem

+
 {-| Displays a selection. This should be combined with Widget.selectItem
 -}
 selectItem : Palette -> ItemStyle (ButtonStyle msg) msg
 selectItem =
    Item.selectItem

+
+
 {-------------------------------------------------------------------------------
 -- D I A L O G
 -------------------------------------------------------------------------------}