add select component

- Adds the select, listbox, and option components
microsoft · radium-v · Nov 18, 2020 · Sep 14, 2020 · Sep 15, 2020 · Sep 29, 2020
commit 34cde970b45c1b525588b5c798b9362a8388b71f
diff --git a/packages/web-components/fast-components/src/component-definitions.ts b/packages/web-components/fast-components/src/component-definitions.ts
@@ -11,12 +11,15 @@ export * from "./design-system-provider/design-system-provider.definition";
 export * from "./dialog/dialog.definition";
 export * from "./divider/divider.definition";
 export * from "./flipper/flipper.definition";
+export * from "./listbox/listbox.definition";
 export * from "./menu/menu.definition";
 export * from "./menu-item/menu-item.definition";
+export * from "./option/option.definition";
 export * from "./progress-ring/progress-ring.definition";
 export * from "./progress/progress.definition";
 export * from "./radio/radio.definition";
 export * from "./radio-group/radio-group.definition";
+export * from "./select/select.definition";
 export * from "./skeleton/skeleton.definition";
 export * from "./slider/slider.definition";
 export * from "./slider-label/slider-label.definition";

diff --git a/packages/web-components/fast-components/src/listbox/fixtures/base.html b/packages/web-components/fast-components/src/listbox/fixtures/base.html
@@ -1,35 +1,16 @@
 <fast-design-system-provider use-defaults>
+    <h1>Listbox</h1>
+    <h2>Default</h2>
     <fast-listbox>
         <fast-option>Option 1</fast-option>
         <fast-option>Option 2</fast-option>
         <fast-option>Option 3</fast-option>
     </fast-listbox>
 
+    <h2>Disabled Options</h2>
     <fast-listbox>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option disabled>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
-        <fast-option>Option</fast-option>
+        <fast-option disabled>Option 1</fast-option>
+        <fast-option>Option 2</fast-option>
+        <fast-option>Option 3</fast-option>
     </fast-listbox>
-
-    <select>
-        <option>Option 1</option>
-        <option>Option 2</option>
-        <option>Option 3</option>
-    </select>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/listbox/listbox.definition.ts b/packages/web-components/fast-components/src/listbox/listbox.definition.ts
@@ -0,0 +1,18 @@
+import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/data-utilities/web-component";
+
+export const fastListboxDefinition: WebComponentDefinition = {
+    version: 1,
+    tags: [
+        {
+            name: "fast-listbox",
+            description: "The FAST listbox element",
+            attributes: [],
+            slots: [
+                {
+                    name: "",
+                    description: "The default slot",
+                },
+            ],
+        },
+    ],
+};
diff --git a/packages/web-components/fast-components/src/listbox/listbox.open-ui.definition.json b/packages/web-components/fast-components/src/listbox/listbox.open-ui.definition.json
@@ -0,0 +1,4 @@
+{
+    "name": "Listbox",
+    "url": "https://fast.design/docs/components/listbox"
+}
diff --git a/packages/web-components/fast-components/src/option/fixtures/base.html b/packages/web-components/fast-components/src/option/fixtures/base.html
@@ -10,4 +10,11 @@ <h2>Defaults</h2>
             displayed.
         </fast-option>
     </div>
+    <h2>Disabled</h2>
+    <div role="group">
+        <fast-option disabled>
+            When the value attribute and text are both present, this text should be
+            displayed.
+        </fast-option>
+    </div>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/option/option.definition.ts b/packages/web-components/fast-components/src/option/option.definition.ts
@@ -0,0 +1,18 @@
+import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/data-utilities/web-component";
+
+export const fastOptionDefinition: WebComponentDefinition = {
+    version: 1,
+    tags: [
+        {
+            name: "fast-option",
+            description: "The FAST option element",
+            attributes: [],
+            slots: [
+                {
+                    name: "",
+                    description: "The default slot",
+                },
+            ],
+        },
+    ],
+};
diff --git a/packages/web-components/fast-components/src/option/option.open-ui.definition.json b/packages/web-components/fast-components/src/option/option.open-ui.definition.json
@@ -0,0 +1,4 @@
+{
+    "name": "Option",
+    "url": "https://fast.design/docs/components/option"
+}
diff --git a/packages/web-components/fast-components/src/option/option.styles.ts b/packages/web-components/fast-components/src/option/option.styles.ts
@@ -1,11 +1,12 @@
 import { css } from "@microsoft/fast-element";
-import { display, focusVisible } from "@microsoft/fast-foundation";
+import { disabledCursor, display, focusVisible } from "@microsoft/fast-foundation";
 import {
     accentFillActiveBehavior,
     accentFillHoverBehavior,
     accentForegroundCutRestBehavior,
     accentForegroundFocusBehavior,
     neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralFocusInnerAccentBehavior,
     neutralForegroundRestBehavior,
@@ -45,15 +46,23 @@ export const OptionStyles = css`
         color: ${accentForegroundCutRestBehavior.var};
     }
 
-    /* :host(.selected) {
-        color: ${accentForegroundFocusBehavior.var};
-    } */
+    :host(.disabled) {
+        cursor: ${disabledCursor};
+        opacity: var(--disabled-opacity);
+    }
+
+    :host(.disabled:hover) {
+        color: ${neutralForegroundRestBehavior.var};
+        fill: currentcolor;
+        background: ${neutralFillStealthRestBehavior.var}
+    }
 `.withBehaviors(
     accentFillActiveBehavior,
     accentFillHoverBehavior,
     accentForegroundCutRestBehavior,
     accentForegroundFocusBehavior,
     neutralFillStealthHoverBehavior,
+    neutralFillStealthRestBehavior,
     neutralFocusBehavior,
     neutralFocusInnerAccentBehavior,
     neutralForegroundRestBehavior,

diff --git a/packages/web-components/fast-components/src/select/fixtures/base.html b/packages/web-components/fast-components/src/select/fixtures/base.html
@@ -1,18 +1,47 @@
 <fast-design-system-provider use-defaults>
     <h1>Select</h1>
-    <h4>Defaults</h4>
+    <h2>Default</h2>
     <fast-select>
-
-      <svg width="12" height="7" viewBox="0 0 12 7" slot="end" xmlns="http://www.w3.org/2000/svg">
-        <path d="M11.8527 0.645818C12.0484 0.840732 12.0489 1.15731 11.854 1.35292L6.38902 6.83741C6.17408 7.05312 5.82477 7.05312 5.60982 6.83741L0.14484 1.35292C-0.0500734 1.15731 -0.0495088 0.840731 0.1461 0.645817C0.34171 0.450903 0.658292 0.451467 0.853206 0.647077L5.99942 5.81166L11.1456 0.647077C11.3406 0.451468 11.6571 0.450904 11.8527 0.645818Z"/>
-      </svg>
-
-      <fast-listbox slot="listbox">
-        <fast-option value="Option One">Option One</fast-option>
-        <fast-option value="Option Two">Option Two</fast-option>
-        <fast-option value="Option Three">Option Three</fast-option>
-        <div class="separator"></div>
-        <fast-option value="Option Four">Option Four</fast-option>
-      </fast-listbox>
+        <fast-option value="value of option 1">Option One</fast-option>
+        <fast-option>Option Two</fast-option>
+        <fast-option>Option Three</fast-option>
+        <fast-option>Option Four</fast-option>
+    </fast-select>
+
+    <h2>Disabled</h2>
+    <fast-select disabled>
+        <fast-option>Option One</fast-option>
+        <fast-option>Option Two</fast-option>
+        <fast-option>Option Three</fast-option>
+        <fast-option>Option Four</fast-option>
+    </fast-select>
+
+    <h2>Selected Option</h2>
+    <fast-select>
+        <fast-option>Option One</fast-option>
+        <fast-option selected>Option Two</fast-option>
+        <fast-option>Option Three</fast-option>
+        <fast-option>Option Four</fast-option>
+    </fast-select>
+
+    <h2>Custom Indicator</h2>
+    <fast-select>
+        <svg slot="indicator" xmlns="http://www.w3.org/2000/svg">
+            <path
+                d="M6.5 7.7h-1v-1h1v1zm4.1 0h-1v-1h1v1zm4.1-1v2.1h-1v2.6l-.1.6-.3.5c-.1.1-.3.3-.5.3l-.6.1H10l-3.5 3v-3H3.9l-.6-.1-.5-.3c-.1-.1-.3-.3-.3-.5l-.1-.6V8.8h-1V6.7h1V5.2l.1-.6.3-.5c.1-.1.3-.3.5-.3l.6-.1h3.6V1.9a.8.8 0 01-.4-.4L7 1V.6l.2-.3.3-.2L8 0l.4.1.3.2.3.3V1l-.1.5-.4.4v1.7h3.6l.6.1.5.3c.1.1.3.3.3.5l.1.6v1.5h1.1zm-2.1-1.5l-.2-.4-.4-.2H3.9l-.4.2-.1.4v6.2l.2.4.4.2h3.6v1.8L9.7 12h2.5l.4-.2.2-.4V5.2zM5.8 8.9l1 .7 1.2.2a5 5 0 001.2-.2l1-.7.7.7c-.4.4-.8.7-1.4.9-.5.2-1 .3-1.6.3s-1.1-.1-1.6-.3A3 3 0 015 9.6l.8-.7z"
+            />
+        </svg>
+        <fast-option>Option One</fast-option>
+        <fast-option>Option Two</fast-option>
+        <fast-option>Option Three</fast-option>
+        <fast-option>Option Four</fast-option>
+    </fast-select>
+
+    <h2>Custom Indicator</h2>
+    <fast-select>
+        <fast-option>Option One</fast-option>
+        <fast-option>Option Two</fast-option>
+        <fast-option>Option Three</fast-option>
+        <fast-option>Option Four</fast-option>
     </fast-select>
 </fast-design-system-provider>
diff --git a/packages/web-components/fast-components/src/select/select.definition.ts b/packages/web-components/fast-components/src/select/select.definition.ts
@@ -0,0 +1,18 @@
+import { WebComponentDefinition } from "@microsoft/fast-tooling/dist/data-utilities/web-component";
+
+export const fastSelectDefinition: WebComponentDefinition = {
+    version: 1,
+    tags: [
+        {
+            name: "fast-select",
+            description: "The FAST select element",
+            attributes: [],
+            slots: [
+                {
+                    name: "",
+                    description: "The default slot",
+                },
+            ],
+        },
+    ],
+};
diff --git a/packages/web-components/fast-components/src/select/select.open-ui.definition.json b/packages/web-components/fast-components/src/select/select.open-ui.definition.json
@@ -0,0 +1,4 @@
+{
+    "name": "Select",
+    "url": "https://fast.design/docs/components/select"
+}
diff --git a/packages/web-components/fast-components/src/select/select.stories.ts b/packages/web-components/fast-components/src/select/select.stories.ts
@@ -1,15 +1,11 @@
-import { FASTDesignSystemProvider } from "../design-system-provider";
+import "../design-system-provider";
+import "../listbox";
+import "../option";
 import Examples from "./fixtures/base.html";
-import { FASTSelect, FASTListbox, FASTOption } from ".";
-
-// Prevent tree-shaking
-FASTSelect;
-FASTOption;
-FASTListbox;
-FASTDesignSystemProvider;
+import "./index";
 
 export default {
     title: "Select",
 };
 
-export const Base = () => Examples;
+export const Select = () => Examples;
diff --git a/packages/web-components/fast-components/src/select/select.styles.ts b/packages/web-components/fast-components/src/select/select.styles.ts
@@ -1,10 +1,23 @@
 import { css } from "@microsoft/fast-element";
-import { display, focusVisible } from '@microsoft/fast-foundation';
-import { accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFocusBehavior, neutralForegroundRestBehavior } from '..';
-import { heightNumber, elevation } from '../styles';
+import { disabledCursor, display, focusVisible } from "@microsoft/fast-foundation";
+import {
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    neutralFillInputActiveBehavior,
+    neutralFillInputHoverBehavior,
+    neutralFillInputRestBehavior,
+    neutralFocusBehavior,
+    neutralForegroundRestBehavior,
+} from "../styles/recipes";
+import { heightNumber } from "../styles/size";
+import { elevation } from "../styles/elevation";
 
 export const SelectStyles = css`
-    ${display("inline-block")} :host {
+    ${display("inline-block")}
+
+    :host {
+        contain: contents;
         position: relative;
         width: 250px;
         color: ${neutralForegroundRestBehavior.var};
@@ -18,6 +31,22 @@ export const SelectStyles = css`
         border-color: ${neutralFocusBehavior.var};
     }
 
+    .listbox {
+        left: 0;
+        position: absolute;
+        top: 100%;
+        width: 100%;
+    }
+
+    :host([open]) .listbox {
+        z-index: 1;
+    }
+
+    :host([disabled]) {
+        opacity: var(--disabled-opacity);
+        cursor: ${disabledCursor};
+    }
+
     .button {
         background: ${neutralFillInputRestBehavior.var};
         border-radius: calc(var(--corner-radius) * 1px);
@@ -42,6 +71,15 @@ export const SelectStyles = css`
         border-color: ${accentFillActiveBehavior.var};
     }
 
+    .selected-value {
+        flex: 1 1 auto;
+        text-align: start;
+    }
+
+    .indicator {
+        flex: 0 0 auto;
+    }
+
     :host slot[name="listbox"] {
         display: none;
         width: 100%;
@@ -57,22 +95,29 @@ export const SelectStyles = css`
         margin-inline-start: auto;
     }
 
-    :host .start,
-    :host .end,
-    :host ::slotted(svg) {
-        fill: ${neutralForegroundRestBehavior.var};
+    .start,
+    .end,
+    .indicator svg,
+    ::slotted(svg) {
     }
 
     .start,
     .end,
+    .indicator,
     ::slotted(svg) {
-        ${
-            /* Glyph size and margin-left is temporary - 
-            replace when adaptive typography is figured out */ ""
-        } width: 16px;
+        ${`` /* Glyph size is temporary - replace when glyph-size var is added */}
+        fill: ${neutralForegroundRestBehavior.var};
         height: 16px;
+        width: 16px;
     }
 
 `.withBehaviors(
-    accentFillActiveBehavior, accentFillHoverBehavior, accentFillRestBehavior, neutralFillInputActiveBehavior, neutralFillInputHoverBehavior, neutralFillInputRestBehavior, neutralFocusBehavior, neutralForegroundRestBehavior
+    accentFillActiveBehavior,
+    accentFillHoverBehavior,
+    accentFillRestBehavior,
+    neutralFillInputActiveBehavior,
+    neutralFillInputHoverBehavior,
+    neutralFillInputRestBehavior,
+    neutralFocusBehavior,
+    neutralForegroundRestBehavior
 );