Better styling of the selected value pills in multi select mode.

jachin · Mar 26, 2024 · 3ff8e98 · 3ff8e98
1 parent 0769682
commit 3ff8e98
Show file tree

Hide file tree

Showing 4 changed files with 18 additions and 11 deletions.
diff --git a/dist/much-select-elm-debug.js b/dist/much-select-elm-debug.js
@@ -21176,7 +21176,8 @@ var $author$project$FancyOption$valueLabelHtml = F3(
 			$elm$html$Html$span,
 			_List_fromArray(
 				[
-					$elm$html$Html$Attributes$class('value-label'),
+					$elm$html$Html$Attributes$class('selected-value-label'),
+					A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value-label'),
 					$author$project$Events$mouseUpPreventDefault(
 					toggleSelectedMsg(optionValue))
 				]),

diff --git a/dist/much-select-elm.js b/dist/much-select-elm.js
@@ -15954,7 +15954,8 @@ var $author$project$FancyOption$valueLabelHtml = F3(
 			$elm$html$Html$span,
 			_List_fromArray(
 				[
-					$elm$html$Html$Attributes$class('value-label'),
+					$elm$html$Html$Attributes$class('selected-value-label'),
+					A2($elm$html$Html$Attributes$attribute, 'part', 'selected-value-label'),
 					$author$project$Events$mouseUpPreventDefault(
 					toggleSelectedMsg(optionValue))
 				]),

diff --git a/site/demo-styles.css b/site/demo-styles.css
@@ -570,14 +570,13 @@ much-select::part(input-filter):hover, much-select::part(input-filter):focus {
 }
 
 much-select[multi-select]::part(selected-value) {
-    padding: 3px;
-    font-size: 20px;
-    color: white;
-    background-image: linear-gradient(to bottom, #4f6a8f, #88a2bc);
+    padding: 0.25rem;
+    color: var(--pico-void);
+    background-image: linear-gradient(to bottom, var(--lynx-white), var(--hint-of-pensive));
     background-repeat: repeat-x;
-    margin: 0.25rem 0.25rem;
-    border-radius: 0.2rem;
-    border: 3px solid #d99477;
+    margin: 0.1rem 0.25rem 0.1rem 0;
+    border-radius: 0.3rem;
+    border: 0.1rem solid var(--periwinkle);
     min-width: 0.5rem;
     flex-grow: 0;
     flex-shrink: 1;
@@ -596,10 +595,15 @@ much-select::part(selected-value) {
 }
 
 much-select[multi-select]::part(selected-value highlighted-value) {
-    background-image: linear-gradient(to bottom, #d99477, #efb680);
+    background-image: linear-gradient(to bottom, var(--nanohanacha-gold), var(--rise-n-shine));
     background-repeat: repeat-x;
 }
 
+much-select[multi-select]::part(selected-value-label) {
+    /** Vertically center the text in the middle of the selected value "pill". **/
+    padding-top: 0.09rem;
+}
+
 much-select::part(dropdown-indicator) {
     position: absolute;
     right: 12px;

diff --git a/src/FancyOption.elm b/src/FancyOption.elm
@@ -742,7 +742,8 @@ toMultiSelectValueHtml toggleSelectedMsg deselectOptionInternal enableSingleItem
 valueLabelHtml : (OptionValue -> msg) -> String -> OptionValue -> Html msg
 valueLabelHtml toggleSelectedMsg labelText optionValue =
     span
-        [ class "value-label"
+        [ class "selected-value-label"
+        , Html.Attributes.attribute "part" "selected-value-label"
         , mouseUpPreventDefault
             (toggleSelectedMsg optionValue)
         ]