Merge pull request #304 from berenddeboer/v7-slider-fix

Slider fixes and chip enhancement.
aforemny · Jul 19, 2020 · 3129534 · 3129534
2 parents 2f6255f + 4bcd7f7
commit 3129534
Show file tree

Hide file tree

Showing 8 changed files with 285 additions and 221 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -7,6 +7,8 @@ New features:
 * See Material Components for the Web [v7.0.0](https://github.com/material-components/material-components-web/blob/master/CHANGELOG.md) release for all details.
 * Material.CircularProgress: allow setting size.
 * TextField: allow setting prefix and suffix text.
+* Chips.leadingThumbnail: allow passing random nodes, for example to
+  display a user avatar or thumbnail, instead of just an icon.
 
 Fixes:
 * Material.CircularProgress: indeterminate version now works properly.

diff --git a/README.md b/README.md
@@ -84,7 +84,7 @@ cd ..
 elm install elm/regex
 elm install elm/svg
 elm install elm/json
-elm install debois/elm-dom
+elm install K-Adam/elm-dom
 ```
 5. Change the `source-directories` property in `elm.json` to include `elm-mdc`:
 

diff --git a/demo/Demo/Chips.elm b/demo/Demo/Chips.elm
@@ -4,6 +4,7 @@ import Demo.Helper.Hero as Hero
 import Demo.Helper.ResourceLink as ResourceLink
 import Demo.Page as Page exposing (Page)
 import Html exposing (Html, text)
+import Html.Attributes as Html
 import Material
 import Material.Chip as Chip
 import Material.Options exposing (cs, styled, when)
@@ -83,6 +84,7 @@ view lift page model =
                 , filterChips lift model
                 , actionChips lift model
                 , shapedChips lift model
+                , imageChips lift model
                 ]
             )
         ]
@@ -256,3 +258,28 @@ shapedChips lift model =
         , chip "chips-shaped-chips-office-chairs" "Office chairs"
         ]
     ]
+
+
+imageChips : (Msg m -> m) -> Model m -> List (Html m)
+imageChips lift model =
+    let
+        chip index filename label =
+            Chip.view (lift << Mdc)
+                index
+                model.mdc
+                [ cs "demo-chip-image"
+                , Chip.leadingThumbnail [ Html.img [ Html.src <| "images/" ++ filename ++ ".svg" ] [] ]
+                ]
+                [ text label
+                ]
+    in
+    [ styled Html.h2
+        [ Typography.subheading1
+        ]
+        [ text "Image Chips"
+        ]
+    , Chip.chipset []
+        [ chip "chips-image-chips-animal1" "animal1" "Animal 1"
+        , chip "chips-dimage-chips-animal2" "animal2" "Animal 2"
+        ]
+    ]
diff --git a/src/Internal/Chip/Implementation.elm b/src/Internal/Chip/Implementation.elm
@@ -8,6 +8,7 @@ module Internal.Chip.Implementation exposing
     , filter
     , input
     , leadingIcon
+    , leadingThumbnail
     , onClick
     , react
     , selected
@@ -23,7 +24,7 @@ import Internal.Component as Component exposing (Index, Indexed)
 import Internal.Helpers as Helpers
 import Internal.Icon.Implementation as Icon
 import Internal.Msg
-import Internal.Options as Options exposing (cs, css, styled, when)
+import Internal.Options as Options exposing (cs, css, styled, viewJust, when)
 import Internal.Ripple.Implementation as Ripple
 import Json.Decode as Json exposing (Decoder)
 import Svg exposing (path)
@@ -47,6 +48,7 @@ update lift msg model =
 type alias Config m =
     { leadingIcon : Maybe String
     , trailingIcon : Maybe String
+    , leadingThumbnail : Maybe ( List (Html m) )
     , onClick : Maybe m
     , selected : Bool
     , checkmark : Bool
@@ -57,6 +59,7 @@ defaultConfig : Config m
 defaultConfig =
     { leadingIcon = Nothing
     , trailingIcon = Nothing
+    , leadingThumbnail = Nothing
     , onClick = Nothing
     , selected = False
     , checkmark = False
@@ -77,6 +80,11 @@ trailingIcon str =
     Options.option (\config -> { config | trailingIcon = Just str })
 
 
+leadingThumbnail : List (Html m) -> Property m
+leadingThumbnail nodes =
+    Options.option (\config -> { config | leadingThumbnail = Just nodes })
+
+
 selected : Property m
 selected =
     Options.option (\config -> { config | selected = True })
@@ -164,6 +172,34 @@ chip domId lift model options nodes =
 
         ripple =
             Ripple.view False domId (lift << RippleMsg) model.ripple []
+
+        viewLeadingIcon icon =
+            Icon.view
+                [ cs "mdc-chip__icon mdc-chip__icon--leading"
+                , when (config.selected && config.checkmark) <|
+                    cs "mdc-chip__icon--leading-hidden"
+                , -- Make icon size fixed during animation
+                    css "font-size" "20px"
+                ]
+                icon
+
+        viewTrailingIcon icon =
+            styled Html.span
+                [ Options.role "gridcell" ]
+                [ Icon.view
+                      [ cs "mdc-chip__icon mdc-chip__icon--trailing"
+                      , Options.attribute (Html.tabindex -1)
+                      , Options.role "button"
+                      ]
+                      icon
+                ]
+
+        viewThumbnail thumbnail =
+            styled Html.span
+                [ cs "mdc-chip__icon mdc-chip__icon--leading"
+                ]
+                thumbnail
+
     in
     Options.apply summary
         Html.div
@@ -184,20 +220,8 @@ chip domId lift model options nodes =
                     [ cs "mdc-chip__ripple" ]
                     []
               ]
-            , config.leadingIcon
-                |> Maybe.map
-                    (\icon ->
-                        [ Icon.view
-                            [ cs "mdc-chip__icon mdc-chip__icon--leading"
-                            , when (config.selected && config.checkmark) <|
-                                cs "mdc-chip__icon--leading-hidden"
-                            , -- Make icon size fixed during animation
-                              css "font-size" "20px"
-                            ]
-                            icon
-                        ]
-                    )
-                |> Maybe.withDefault []
+            , [ viewJust config.leadingThumbnail viewThumbnail ]
+            , [ viewJust config.leadingIcon viewLeadingIcon ]
             , if config.checkmark then
                     [ styled Html.div
                         [ cs "mdc-chip__checkmark" ]
@@ -231,21 +255,7 @@ chip domId lift model options nodes =
                           ]
                     ]
               ]
-            , config.trailingIcon
-                |> Maybe.map
-                    (\icon ->
-                        [ styled Html.span
-                              [ Options.role "gridcell" ]
-                              [ Icon.view
-                                    [ cs "mdc-chip__icon mdc-chip__icon--trailing"
-                                    , Options.attribute (Html.tabindex -1)
-                                    , Options.role "button"
-                                    ]
-                                    icon
-                              ]
-                        ]
-                    )
-                |> Maybe.withDefault []
+            , [ viewJust config.trailingIcon viewTrailingIcon ]
             ]
         )
 

diff --git a/src/Internal/Select/Implementation.elm b/src/Internal/Select/Implementation.elm
@@ -117,7 +117,7 @@ type alias Config m =
     , disabled : Bool
     , required : Bool
     , outlined : Bool
-    , id_ : String
+    , id_ : Index
     , selectedText : String
     , onSelect : Maybe (String -> m)
     }