add error property to select + stories for disabled and error

Author: madsrasmussen

packages/uui-select/lib/uui-select.element.ts

@@ -88,6 +88,14 @@ export class UUISelectElement extends LabelMixin('label', LitElement) {
       span.label {
         display: inline-block;
       }
+
+      :host([error]) #native {
+        border: 1px solid var(--uui-look-danger-border);
+      }
+
+      :host([error]) #native[disabled] {
+        border: 1px solid var(--uui-look-danger-border);
+      }
     `,
   ];
 
@@ -120,6 +128,15 @@ export class UUISelectElement extends LabelMixin('label', LitElement) {
   @property({ type: Boolean, reflect: true })
   disabled = false;
 
+  /**
+   * Set to true if the component should have an error state.Property is reflected to the corresponding attribute.
+   * @type {boolean}
+   * @attr
+   * @default false
+   */
+  @property({ type: Boolean, reflect: true })
+  error = false;
+
   /**
    * This is the name property of the uui-checkbox or the uui-toggle component. It reflects the behaviour of the native input type="checkbox" element and its name attribute.
    * @type {string}

packages/uui-select/lib/uui-select.story.ts

@@ -29,6 +29,7 @@ export default {
     label: 'Favorite green',
     placeholder: 'Select an option',
     disabled: false,
+    error: false,
     name: 'Favorite Green',
     value: '',
   },
@@ -59,7 +60,8 @@ export const AAAOverview: Story = props =>
     .options=${options}
     .placeholder=${props.placeholder}
     .disabled=${props.disabled}
-    .label=${props.label}></uui-select>`;
+    .label=${props.label}
+    ?error=${props.error}></uui-select>`;
 AAAOverview.storyName = 'Overview';
 
 export const Preselected: Story = () =>
@@ -133,7 +135,7 @@ DisabledGroups.parameters = {
 
 export const Disabled: Story = props =>
   html`<uui-select
-    .options=${groupedOptions}
+    .options=${options}
     label="Label"
     .placeholder=${props.placeholder}
     .disabled=${props.disabled}></uui-select> `;
@@ -151,3 +153,24 @@ Disabled.parameters = {
     },
   },
 };
+
+export const Error: Story = props =>
+  html`<uui-select
+    .options=${options}
+    label="Label"
+    .placeholder=${props.placeholder}
+    ?error=${props.error}></uui-select>`;
+
+Error.args = {
+  error: true,
+};
+
+Error.parameters = {
+  controls: { include: ['error'] },
+  docs: {
+    source: {
+      code: `      
+<uui-select error></uui-select>`,
+    },
+  },
+};