feat(Select): Add Select.required prop

Author: hobbitronics

components/mdc/Select/Select.svelte

@@ -15,6 +15,8 @@ export let width = '280px'
 export let disabled = false
 /** @type {string} The ID of the selected option. */
 export let selectedID = ''
+/** @type {boolean} makes a selection required and adds invalid class when none selected */
+export let required = false
 
 const dispatch = createEventDispatcher()
 const labelID = generateRandomID('select-label-')
@@ -61,8 +63,18 @@ afterUpdate(() => {
 })
 </script>
 
-<div class="mdc-select mdc-select--outlined {$$props.class || ''}" bind:this={element} style="width: {width}">
-  <div class="mdc-select__anchor" role="button" aria-haspopup="listbox" aria-labelledby="{labelID} {selectedTextID}">
+<div
+  class="mdc-select mdc-select--outlined {$$props.class || ''}"
+  class:mdc-select--required={required}
+  bind:this={element}
+  style="width: {width}"
+>
+  <div
+    class="mdc-select__anchor"
+    aria-required={required}
+    aria-haspopup="listbox"
+    aria-labelledby="{labelID} {selectedTextID}"
+  >
     <span class="mdc-notched-outline">
       <span class="mdc-notched-outline__leading" />
       <span class="mdc-notched-outline__notch">

components/mdc/Select/_index.scss

@@ -4,6 +4,6 @@
 @use '@material/select/styles';
 
 /* MDC select floating label */
-.mdc-select:not(.mdc-select--disabled).mdc-select--focused .mdc-floating-label {
+.mdc-select:not(.mdc-select--disabled, .mdc-select--invalid).mdc-select--focused .mdc-floating-label {
   color: var(--mdc-theme-primary);
 }

index.d.ts

@@ -235,11 +235,12 @@ declare module '@silintl/ui-components' {
   }
 
   interface SelectProps {
+    disabled?: boolean
     label?: string
     options?: { name: string; id: string }[]
-    width?: string
-    disabled?: boolean
+    required?: boolean
     selectedID?: string
+    width?: string
     class?: string
   }
   export class Select extends SvelteComponentTyped<SelectProps> {}

stories/Select.stories.svelte

@@ -26,8 +26,12 @@ const args = {
 
 <Story name="Default" {args} />
 
+<Story name="selectedID" args={copyAndModifyArgs(args, { selectedID: '5' })} />
+
 <Story name="Label" args={copyAndModifyArgs(args, { label: 'Label' })} />
 
 <Story name="Width" args={copyAndModifyArgs(args, { width: '560px' })} />
 
 <Story name="Disabled" args={copyAndModifyArgs(args, { disabled: true })} />
+
+<Story name="required" args={copyAndModifyArgs(args, { required: true })} />