From dbd4ba835b38ed37d259ee993c2192d19beb0fa4 Mon Sep 17 00:00:00 2001
From: Nic Newdigate <nic.newdigate@vivantio.com>
Date: Tue, 11 Jun 2024 16:55:32 +0100
Subject: [PATCH] Select component: add a suffix to .form-control-input

---
 docs/pages/components/select.md           | 27 +++++++++++++++++++++++
 src/components/select/select.component.ts |  6 ++++-
 src/components/select/select.styles.ts    |  8 +++++++
 3 files changed, 40 insertions(+), 1 deletion(-)

diff --git a/docs/pages/components/select.md b/docs/pages/components/select.md
index 3bf4638697..fe48c83707 100644
--- a/docs/pages/components/select.md
+++ b/docs/pages/components/select.md
@@ -422,6 +422,33 @@ Use the `prefix` slot to prepend an icon to the control.
 </sl-select>
 ```
 
+### Suffix Icons
+
+Use the `suffix` slot to append an icon to the control.
+
+```html:preview
+<sl-select placeholder="Small" size="small" clearable>
+  <sl-icon name="house" slot="suffix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+<br />
+<sl-select placeholder="Medium" size="medium" clearable>
+  <sl-icon name="house" slot="suffix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+<br />
+<sl-select placeholder="Large" size="large" clearable>
+  <sl-icon name="house" slot="suffix"></sl-icon>
+  <sl-option value="option-1">Option 1</sl-option>
+  <sl-option value="option-2">Option 2</sl-option>
+  <sl-option value="option-3">Option 3</sl-option>
+</sl-select>
+```
+
 ```jsx:react
 import SlIcon from '@shoelace-style/shoelace/dist/react/icon';
 import SlOption from '@shoelace-style/shoelace/dist/react/option';
diff --git a/src/components/select/select.component.ts b/src/components/select/select.component.ts
index d33460d378..b5d464a23f 100644
--- a/src/components/select/select.component.ts
+++ b/src/components/select/select.component.ts
@@ -36,6 +36,7 @@ import type SlOption from '../option/option.component.js';
  * @slot - The listbox options. Must be `<sl-option>` elements. You can use `<sl-divider>` to group items visually.
  * @slot label - The input's label. Alternatively, you can use the `label` attribute.
  * @slot prefix - Used to prepend a presentational icon or similar element to the combobox.
+ * @slot suffix - Used to append a presentational icon or similar element to the combobox.
  * @slot clear-icon - An icon to use in lieu of the default clear icon.
  * @slot expand-icon - The icon to show when the control is expanded and collapsed. Rotates on open and close.
  * @slot help-text - Text that describes how to use the input. Alternatively, you can use the `help-text` attribute.
@@ -55,8 +56,9 @@ import type SlOption from '../option/option.component.js';
  * @csspart form-control-label - The label's wrapper.
  * @csspart form-control-input - The select's wrapper.
  * @csspart form-control-help-text - The help text's wrapper.
- * @csspart combobox - The container the wraps the prefix, combobox, clear icon, and expand button.
+ * @csspart combobox - The container the wraps the prefix, suffix, combobox, clear icon, and expand button.
  * @csspart prefix - The container that wraps the prefix slot.
+ * @csspart suffix - The container that wraps the suffix slot.
  * @csspart display-input - The element that displays the selected option's label, an `<input>` element.
  * @csspart listbox - The listbox container where options are slotted.
  * @csspart tags - The container that houses option tags when `multiselect` is used.
@@ -862,6 +864,8 @@ export default class SlSelect extends ShoelaceElement implements ShoelaceFormCon
                   `
                 : ''}
 
+              <slot name="suffix" part="suffix" class="select__suffix"></slot>
+
               <slot name="expand-icon" part="expand-icon" class="select__expand-icon">
                 <sl-icon library="system" name="chevron-down"></sl-icon>
               </slot>
diff --git a/src/components/select/select.styles.ts b/src/components/select/select.styles.ts
index 247ecf5ec3..7b5f4e449a 100644
--- a/src/components/select/select.styles.ts
+++ b/src/components/select/select.styles.ts
@@ -256,6 +256,14 @@ export default css`
     color: var(--sl-input-placeholder-color);
   }
 
+  /* Suffix */
+  .select__suffix {
+    flex: 0;
+    display: inline-flex;
+    align-items: center;
+    color: var(--sl-input-placeholder-color);
+  }
+
   /* Clear button */
   .select__clear {
     display: inline-flex;