Merge branch 'master' into modal-react-17

cultureamp · Apr 7, 2021 · 52d432d · 52d432d
2 parents 8b5d059 + bf49035
commit 52d432d
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 4 deletions.
diff --git a/draft-packages/select/CHANGELOG.md b/draft-packages/select/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [1.14.0](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-select@1.13.9...@kaizen/draft-select@1.14.0) (2021-04-07)
+
+
+### Features
+
+* add clearable option for Elm Select ([#1351](https://github.com/cultureamp/kaizen-design-system/issues/1351)) ([af6b387](https://github.com/cultureamp/kaizen-design-system/commit/af6b3874bf0bd36582f2d7ed49fd7caee5c44165))
+
+
+
+
+
 ## [1.13.9](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-select@1.13.8...@kaizen/draft-select@1.13.9) (2021-04-07)
 
 **Note:** Version bump only for package @kaizen/draft-select

diff --git a/draft-packages/select/ElmStories/SelectStories.elm b/draft-packages/select/ElmStories/SelectStories.elm
@@ -47,6 +47,9 @@ update msg selectModel =
                         Select.Deselect i ->
                             { selectModel | selectedMembers = List.filter (\item -> item /= i) selectModel.selectedMembers }
 
+                        Select.DeselectSingleSelectItem ->
+                            { selectModel | selectedMember = Nothing }
+
                         _ ->
                             selectModel
             in
@@ -112,4 +115,18 @@ main =
                             )
                             (Select.selectIdentifier "Multi Select")
                         ]
+        , storyOf "Single Clearable" config <|
+            \m ->
+                Html.map SelectMsg <|
+                    div [ style "width" "300px", style "margin-top" "12px" ]
+                        [ Select.view
+                            (Select.single (buildSelected m)
+                                |> Select.state m.selectState
+                                |> Select.menuItems (List.map buildMenuItems m.members)
+                                |> Select.searchable True
+                                |> Select.clearable True
+                                |> Select.placeholder ( "Placeholder", Select.Bold )
+                            )
+                            (Select.selectIdentifier "Single Clearable Select")
+                        ]
         ]
diff --git a/draft-packages/select/KaizenDraft/Select/Select.elm b/draft-packages/select/KaizenDraft/Select/Select.elm
@@ -7,6 +7,7 @@ module KaizenDraft.Select.Select exposing
     , State
     , Style(..)
     , Variant(..)
+    , clearable
     , defaults
     , dummyInputIdPrefix
     , initState
@@ -37,6 +38,7 @@ import Icon.Icon as Icon
 import Icon.SvgAsset exposing (svgAsset)
 import Json.Decode as Decode
 import Json.Encode as Encode
+import KaizenDraft.Button.Button as Button
 import KaizenDraft.Events.Events as Events
 import KaizenDraft.Select.Ports as Ports
 import KaizenDraft.Select.SelectInput as SelectInput
@@ -77,13 +79,15 @@ type Msg item
     | MenuListScrollTop Float
     | SetMouseMenuNavigation
     | DoNothing
+    | SingleSelectClearButtonPressed
 
 
 type Action item
     = InputChange String
     | Select item
     | Deselect item
     | Internal
+    | DeselectSingleSelectItem
 
 
 type Style
@@ -181,6 +185,7 @@ type alias Configuration item =
     , placeholder : ( String, Style )
     , menuItems : List (MenuItem item)
     , searchable : Bool
+    , clearable : Bool
     }
 
 
@@ -264,6 +269,7 @@ defaults =
     , placeholder = ( "Select...", Faded )
     , menuItems = []
     , searchable = True
+    , clearable = False
     }
 
 
@@ -310,6 +316,11 @@ searchable predicate (Config config) =
     Config { config | searchable = predicate }
 
 
+clearable : Bool -> Config item -> Config item
+clearable predicate (Config config) =
+    Config { config | clearable = predicate }
+
+
 
 -- This will show when there is no defaultValue or clearable == True
 -- and the default value is cleared
@@ -634,6 +645,9 @@ update msg (State state_) =
         SetMouseMenuNavigation ->
             ( Internal, State { state_ | menuNavigation = Mouse }, Cmd.none )
 
+        SingleSelectClearButtonPressed ->
+            ( DeselectSingleSelectItem, State state_, Cmd.none )
+
 
 
 -- The id value needs to be a unique id
@@ -729,6 +743,24 @@ view (Config config) selectId =
 
             else
                 True
+
+        clearButtonVisible =
+            if config.clearable then
+                case config.variant of
+                    Multi _ _ ->
+                        -- clearable is only applicable to Single Select
+                        False
+
+                    Single maybeSelectedItem ->
+                        case maybeSelectedItem of
+                            Just _ ->
+                                True
+
+                            Nothing ->
+                                False
+
+            else
+                False
     in
     div [ styles.class .container ]
         [ div
@@ -757,6 +789,11 @@ view (Config config) selectId =
             , div [ styles.class .indicators ]
                 [ div [ styles.class .indicatorContainer ]
                     [ resolveLoadingSpinner
+                    , if clearButtonVisible then
+                        viewClearButton
+
+                      else
+                        text ""
                     , span [ styles.class .iconButton ]
                         [ Icon.view Icon.presentation
                             (svgAsset "@kaizen/component-library/icons/chevron-down.icon.svg")
@@ -1070,6 +1107,18 @@ viewMultiValue { truncationWidth } mousedownedItem index menuItem =
         ]
 
 
+viewClearButton : Html (Msg item)
+viewClearButton =
+    span [ styles.class .clearButtonWrapper ]
+        [ Button.view
+            (Button.iconButton
+                (svgAsset "@kaizen/component-library/icons/clear.icon.svg")
+                |> Button.onClick SingleSelectClearButtonPressed
+            )
+            "clear"
+        ]
+
+
 menuListId : SelectId -> String
 menuListId selectId =
     "select-menu-list-" ++ getSelectId selectId
@@ -1373,4 +1422,5 @@ styles =
         , cautionary = "cautionary"
         , error = "error"
         , preventPointer = "preventPointer"
+        , clearButtonWrapper = "clearButtonWrapper"
         }
diff --git a/draft-packages/select/KaizenDraft/Select/styles.elm.scss b/draft-packages/select/KaizenDraft/Select/styles.elm.scss
@@ -195,3 +195,14 @@
 .preventPointer {
   pointer-events: none;
 }
+
+.clearButtonWrapper {
+  color: $kz-var-color-wisteria-700;
+  height: 20px;
+  position: relative;
+  top: -14px;
+
+  button:not(:disabled):hover {
+    background-color: transparent;
+  }
+}
diff --git a/draft-packages/select/docs/ElmSelect.stories.tsx b/draft-packages/select/docs/ElmSelect.stories.tsx
@@ -8,6 +8,11 @@ loadElmStories(
   "Select (Elm)",
   module,
   compiledElm,
-  ["Single (Kaizen Site Demo)", "Single Searchable", "Multi-Select Searchable"],
+  [
+    "Single (Kaizen Site Demo)",
+    "Single Searchable",
+    "Multi-Select Searchable",
+    "Single Clearable",
+  ],
   Ports
 )
diff --git a/draft-packages/select/package.json b/draft-packages/select/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/draft-select",
-  "version": "1.13.9",
+  "version": "1.14.0",
   "description": "The draft Select component",
   "scripts": {
     "prepublish": "tsc --project tsconfig.dist.json",

diff --git a/draft-packages/title-block-zen/CHANGELOG.md b/draft-packages/title-block-zen/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.2.20](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-title-block-zen@3.2.19...@kaizen/draft-title-block-zen@3.2.20) (2021-04-07)
+
+**Note:** Version bump only for package @kaizen/draft-title-block-zen
+
+
+
+
+
 ## [3.2.19](https://github.com/cultureamp/kaizen-design-system/compare/@kaizen/draft-title-block-zen@3.2.18...@kaizen/draft-title-block-zen@3.2.19) (2021-04-07)
 
 **Note:** Version bump only for package @kaizen/draft-title-block-zen

diff --git a/draft-packages/title-block-zen/package.json b/draft-packages/title-block-zen/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@kaizen/draft-title-block-zen",
-  "version": "3.2.19",
+  "version": "3.2.20",
   "description": "The draft Title Block (Zen) component",
   "scripts": {
     "prepublish": "tsc --project tsconfig.dist.json",
@@ -36,7 +36,7 @@
     "@kaizen/draft-badge": "^1.3.1",
     "@kaizen/draft-button": "^3.2.15",
     "@kaizen/draft-menu": "^3.2.8",
-    "@kaizen/draft-select": "^1.13.9",
+    "@kaizen/draft-select": "^1.14.0",
     "@kaizen/draft-tag": "^1.8.9",
     "@types/classnames": "^2.2.10",
     "classnames": "^2.2.6"