Add prefix and suffix slot to sl-select component (#501)

* Add prefix and suffix slot to sl-select component

* Adding align-items: center in prefix/suffix and changing documentation to showcase using as visual aids

docs/components/select.md

@@ -188,4 +188,46 @@ Add descriptive help text to a select with the `help-text` attribute. For help t
 </sl-select>
 ```
 
+### Prefix and Suffix
+
+Use the `prefix` or `suffix` slot to add a prefix or suffix to the selected value
+
+```html preview
+<sl-select label="Sort by" class="sort">
+  <sl-menu-item value="name.asc">Name (Asc)</sl-menu-item>
+  <sl-menu-item value="name.desc">Name (Desc)</sl-menu-item>
+  <sl-menu-item value="value.asc">Value (Asc)</sl-menu-item>
+  <sl-menu-item value="value.desc">Value (Desc)</sl-menu-item>
+  <sl-icon name="sort-down" slot="suffix"></sl-icon>
+</sl-select>
+
+<br>
+
+<sl-select label="Transaction Price" class="price">
+  <sl-icon name="currency-bitcoin" slot="prefix"></sl-icon>
+  <sl-menu-item value="option-1">0.02</sl-menu-item>
+  <sl-menu-item value="option-2">0.04</sl-menu-item>
+  <sl-menu-item value="option-3">0.06</sl-menu-item>
+</sl-select>
+
+<style>
+  sl-select.sort sl-icon {
+    font-size: 24px;
+  } 
+
+  sl-select.price sl-icon {
+    font-size: 24px;
+  }   
+</style>
+
+<script>
+  const select = document.querySelector('sl-select.sort');
+  select.addEventListener('sl-change', event => {
+    const icon = select.value.startsWith('name') ? 'sort-alpha-down' : 'sort-numeric-down';
+    const variation = select.value.endsWith('asc') ? '' : '-alt';
+    select.querySelector('sl-icon').name = `${icon}${variation}`;
+  })
+</script>
+```
+
 [component-metadata:sl-select]

src/components/select/select.styles.ts

@@ -61,6 +61,12 @@ export default css`
     pointer-events: none;
   }
 
+  .select__prefix {
+    display: inline-flex;
+    align-items: center;
+    color: rgb(var(--sl-input-placeholder-color));
+  }
+
   .select__label {
     flex: 1 1 auto;
     display: flex;
@@ -84,6 +90,12 @@ export default css`
     flex: 0 0 auto;
   }
 
+  .select__suffix {
+    display: inline-flex;
+    align-items: center;
+    color: rgb(var(--sl-input-placeholder-color));
+  }
+
   .select__icon {
     flex: 0 0 auto;
     display: inline-flex;
@@ -136,6 +148,10 @@ export default css`
     min-height: var(--sl-input-height-small);
   }
 
+  .select--small .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-small);
+  }
+
   .select--small .select__label {
     margin: 0 var(--sl-input-spacing-small);
   }
@@ -144,6 +160,10 @@ export default css`
     margin-right: var(--sl-input-spacing-small);
   }
 
+  .select--small .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-small);
+  }
+
   .select--small .select__icon {
     margin-right: var(--sl-input-spacing-small);
   }
@@ -171,6 +191,10 @@ export default css`
     min-height: var(--sl-input-height-medium);
   }
 
+  .select--medium .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-medium);
+  }
+
   .select--medium .select__label {
     margin: 0 var(--sl-input-spacing-medium);
   }
@@ -179,6 +203,10 @@ export default css`
     margin-right: var(--sl-input-spacing-medium);
   }
 
+  .select--medium .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-medium);
+  }
+
   .select--medium .select__icon {
     margin-right: var(--sl-input-spacing-medium);
   }
@@ -206,6 +234,10 @@ export default css`
     min-height: var(--sl-input-height-large);
   }
 
+  .select--large .select__prefix ::slotted(*) {
+    margin-left: var(--sl-input-spacing-large);
+  }
+
   .select--large .select__label {
     margin: 0 var(--sl-input-spacing-large);
   }
@@ -214,6 +246,10 @@ export default css`
     margin-right: var(--sl-input-spacing-large);
   }
 
+  .select--large .select__suffix ::slotted(*) {
+    margin-right: var(--sl-input-spacing-large);
+  }
+
   .select--large .select__icon {
     margin-right: var(--sl-input-spacing-large);
   }

src/components/select/select.ts

@@ -32,7 +32,9 @@ let id = 0;
  * @dependency sl-tag
  *
  * @slot - The select's options in the form of menu items.
+ * @slot prefix -  The select's prefix.
  * @slot label - The select's label. Alternatively, you can use the label prop.
+ * @slot suffix - The select's suffix.
  * @slot help-text - Help text that describes how to use the select.
  *
  * @event sl-clear - Emitted when the clear button is activated.
@@ -45,7 +47,9 @@ let id = 0;
  * @csspart form-control - The form control that wraps the label, input, and help text.
  * @csspart help-text - The select's help text.
  * @csspart icon - The select's icon.
+ * @csspart prefix - The select's prefix.
  * @csspart label - The select's label.
+ * @csspart suffix - The select's suffix.
  * @csspart menu - The select menu, a <sl-menu> element.
  * @csspart tag - The multiselect option, a <sl-tag> element.
  * @csspart tags - The container in which multiselect options are rendered.
@@ -478,6 +482,10 @@ export default class SlSelect extends LitElement {
             @focus=${this.handleFocus}
             @keydown=${this.handleKeyDown}
           >
+            <span part="prefix" class="select__prefix">
+              <slot name="prefix"></slot>
+            </span>
+
             <div class="select__label">
               ${this.displayTags.length
                 ? html` <span part="tags" class="select__tags"> ${this.displayTags} </span> `
@@ -497,6 +505,10 @@ export default class SlSelect extends LitElement {
                 `
               : ''}
 
+            <span part="suffix" class="select__suffix">
+              <slot name="suffix"></slot>
+            </span>
+
             <span part="icon" class="select__icon" aria-hidden="true">
               <sl-icon name="chevron-down" library="system"></sl-icon>
             </span>