Fix for #2145 (#2146)

* Fix for #2145 * Fixed misleading comment after css adjustments * Use same spacing for all sizes --------- Co-authored-by: Cory LaViska <[email protected]>
shoelace-style · Sep 23, 2024 · a6d4cea · a6d4cea
1 parent 6864148
commit a6d4cea
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 8 deletions.
diff --git a/docs/pages/resources/changelog.md b/docs/pages/resources/changelog.md
@@ -12,6 +12,11 @@ Components with the <sl-badge variant="warning" pill>Experimental</sl-badge> bad
 
 New versions of Shoelace are released as-needed and generally occur when a critical mass of changes have accumulated. At any time, you can see what's coming in the next release by visiting [next.shoelace.style](https://next.shoelace.style).
 
+## Next
+
+- Fixed a bug in `<sl-select>` that made the suffix slot collide with the clear button [#2145]
+
+
 ## 2.17.0
 
 - Added the `fixed-scroll-controls` attribute to `<sl-tab-group>` [#2128]

diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
@@ -260,20 +260,17 @@ export default css`
     border-radius: var(--sl-input-height-large);
   }
 
-  /* Prefix */
-  .select__prefix {
+  /* Prefix and Suffix */
+  .select__prefix,
+  .select__suffix {
     flex: 0;
     display: inline-flex;
     align-items: center;
     color: var(--sl-input-placeholder-color);
   }
 
-  /* Suffix */
-  .select__suffix {
-    flex: 0;
-    display: inline-flex;
-    align-items: center;
-    color: var(--sl-input-placeholder-color);
+  .select__suffix::slotted(*) {
+    margin-inline-start: var(--sl-spacing-small);
   }
 
   /* Clear button */