feat: add base select component (#1422)

* working

* working

* working

* initial review iteration

* add styled select

* respond to feedback

* respond to feedback & tweaks

* respond to feedback

* tweak verbage, add tests

* add ltr support to select option, add outline to multiselect & tweaks

* respond to feedback

* fix some schema issues, fix autofocus behavior

* cleanup some duplicate code, tweak some code comments

* remove commented out code

* use svg glyph for down arrow, style tweaks

* respond to feedback

* fix id names

Author: scomea

packages/fast-components-class-name-contracts-base/src/index.ts

@@ -17,6 +17,7 @@ export * from "./number-field";
 export * from "./managed-classes";
 export * from "./progress";
 export * from "./radio";
+export * from "./select";
 export * from "./tabs";
 export * from "./text-area";
 export * from "./text-field";

packages/fast-components-class-name-contracts-base/src/listbox-item/index.ts

@@ -11,4 +11,9 @@ export interface ListboxItemClassNameContract {
      * The disabled modifier
      */
     listboxItem__disabled?: string;
+
+    /**
+     * The selected modifier
+     */
+    listboxItem__selected?: string;
 }

packages/fast-components-class-name-contracts-base/src/select/index.ts

@@ -0,0 +1,29 @@
+/**
+ * The class name contract for the select component
+ */
+export interface SelectClassNameContract {
+    /**
+     * The root of the select component
+     */
+    select?: string;
+
+    /**
+     * The disabled modifier
+     */
+    select__disabled?: string;
+
+    /**
+     * The menu of the select component
+     */
+    select_menu?: string;
+
+    /**
+     * The menu open modifier
+     */
+    select_menu__open?: string;
+
+    /**
+     * The multi select modifier
+     */
+    select__multiSelectable?: string;
+}

packages/fast-components-class-name-contracts-msft/src/index.ts

@@ -13,5 +13,7 @@ export * from "./metatext";
 export * from "./paragraph";
 export * from "./pivot";
 export * from "./progress";
+export * from "./select";
+export * from "./select-option";
 export * from "./subheading";
 export * from "./text-action";

packages/fast-components-class-name-contracts-msft/src/select-option/index.ts

@@ -0,0 +1,26 @@
+import { ListboxItemClassNameContract as BaseListboxItemClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
+
+/**
+ * The class name contract for the context menu item component
+ */
+export interface SelectOptionClassNameContract extends BaseListboxItemClassNameContract {
+    /**
+     * The root of the select option component
+     */
+    selectOption?: string;
+
+    /**
+     * The disabled modifier
+     */
+    selectOption__disabled?: string;
+
+    /**
+     * The selected modifier
+     */
+    selectOption__selected?: string;
+
+    /**
+     * Select option content region
+     */
+    selectOption_contentRegion?: string;
+}

packages/fast-components-class-name-contracts-msft/src/select/index.ts

@@ -0,0 +1,11 @@
+import { SelectClassNameContract as BaseSelectClassNameContract } from "@microsoft/fast-components-class-name-contracts-base";
+
+/**
+ * The class name contract for the select component
+ */
+export interface SelectClassNameContract extends BaseSelectClassNameContract {
+    /**
+     * The glyph shown in the select toggle button
+     */
+    select_toggleGlyph?: string;
+}

packages/fast-components-react-base/app/examples.ts

@@ -52,6 +52,9 @@ export { ProgressExamples };
 import RadioExamples from "../src/radio/examples.data";
 export { RadioExamples };
 
+import SelectExamples from "../src/select/examples.data";
+export { SelectExamples };
+
 import TabsExamples from "../src/tabs/examples.data";
 export { TabsExamples };
 

packages/fast-components-react-base/src/index.ts

@@ -70,6 +70,10 @@ import Radio from "./radio";
 export { Radio };
 export * from "./radio";
 
+import Select from "./select";
+export { Select };
+export * from "./select";
+
 import Tabs from "./tabs";
 export { Tabs };
 export * from "./tabs";

packages/fast-components-react-base/src/listbox-item/examples.data.tsx

@@ -9,7 +9,9 @@ import Documentation from "./.tmp/documentation";
 
 const managedClasses: ListboxItemManagedClasses = {
     managedClasses: {
-        listboxItem: "listbox-item",
+        listboxItem: "listboxItem",
+        listboxItem__disabled: "listboxItem__disabled",
+        listboxItem__selected: "listboxItem__selected",
     },
 };
 

packages/fast-components-react-base/src/listbox-item/listbox-item.schema.json

@@ -30,6 +30,10 @@
                 "text"
             ]
         }
-    }
+    },
+    "required": [
+        "id",
+        "value"
+    ]
 }