fixes #591

shoelace-style · Nov 19, 2021 · 54e4c57 · 54e4c57
1 parent 9432ffe
commit 54e4c57
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 4 deletions.
diff --git a/docs/resources/changelog.md b/docs/resources/changelog.md
@@ -32,6 +32,7 @@ Thank you for your help and patience with testing Shoelace. I promise, we're not
 - 🚨 BREAKING: removed `--sl-focus-ring-color`, and `--sl-focus-ring-alpha` (use `--sl-focus-ring` instead)
 - 🚨 BREAKING: removed `--sl-surface-base` and `--sl-surface-base-alt` tokens (use the neutral palette instead)
 - Added experimental `<sl-visually-hidden>` component
+- Added `clear-icon` slot to `<sl-select>` [#591](https://github.com/shoelace-style/shoelace/issues/591)
 - Fixed a bug in `<sl-progress-bar>` where the label would show in the default slot
 - Improved the dark theme palette so colors are bolder and don't appear washed out
 - Improved a11y of `<sl-avatar>` by representing it as an image with an `alt` [#579](https://github.com/shoelace-style/shoelace/issues/579)

diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
@@ -118,7 +118,20 @@ export default css`
 
   .select__clear {
     flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
     width: 1.25em;
+    font-size: inherit;
+    color: var(--sl-input-icon-color);
+    border: none;
+    background: none;
+    padding: 0;
+    transition: var(--sl-transition-fast) color;
+    cursor: pointer;
+  }
+
+  .select__clear:hover {
+    color: var(--sl-input-icon-color-hover);
   }
 
   .select__suffix {

diff --git a/src/components/select/select.ts b/src/components/select/select.ts
@@ -34,6 +34,7 @@ let id = 0;
  * @slot - The select's options in the form of menu items.
  * @slot prefix - Used to prepend an icon or similar element to the select.
  * @slot suffix - Used to append an icon or similar element to the select.
+ * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot label - The select's label. Alternatively, you can use the label prop.
  * @slot help-text - Help text that describes how to use the select.
  *
@@ -504,14 +505,17 @@ export default class SlSelect extends LitElement {
 
             ${this.clearable && hasSelection
               ? html`
-                  <sl-icon-button
-                    exportparts="base:clear-button"
+                  <button
+                    part="clear-button"
                     class="select__clear"
-                    name="x-circle-fill"
                     library="system"
                     @click=${this.handleClearClick}
                     tabindex="-1"
-                  ></sl-icon-button>
+                  >
+                    <slot name="clear-icon">
+                      <sl-icon name="x-circle-fill" library="system"></sl-icon>
+                    </slot>
+                  </button>
                 `
               : ''}