fix select prefix spacing; closes #2167 (#2174)

shoelace-style · Sep 18, 2024 · 6ce6e22 · 6ce6e22
1 parent e74b0f2
commit 6ce6e22
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 0 deletions.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
@@ -19,6 +19,7 @@ New versions of Shoelace are released as-needed and generally occur when a criti
 - Fixed a bug that caused errors to show in the console when components disconnect before before `firstUpdated()` executes [#2127]
 - Fixed a bug that made pagination work incorrectly in `<sl-carousel>` [#2155]
 - Fixed a bug in `<sl-tab-group>` that caused the active tab indicator to be the wrong size when the tab's content changes [#2164]
+- Fixed a bug in `<sl-select>` that caused the prefix icon to have incorrect spacing [#2167]
 
 ## 2.16.0
 

diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
@@ -176,6 +176,10 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-small);
   }
 
+  .select--small.select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--sl-input-spacing-small);
+  }
+
   .select--small.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-block: 2px;
     padding-inline-start: 0;
@@ -201,6 +205,10 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-medium);
   }
 
+  .select--medium.select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--sl-input-spacing-medium);
+  }
+
   .select--medium.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 3px;
@@ -226,6 +234,10 @@ export default css`
     margin-inline-end: var(--sl-input-spacing-large);
   }
 
+  .select--large.select--multiple .select__prefix::slotted(*) {
+    margin-inline-start: var(--sl-input-spacing-large);
+  }
+
   .select--large.select--multiple:not(.select--placeholder-visible) .select__combobox {
     padding-inline-start: 0;
     padding-block: 4px;