[web-components] add combobox as a new component, add filled style fo…

…r select (microsoft#17307) * add combobox as a new web component * Change files * add filled apeparance * update api report and export combobox from root
joshualamusga1 · Mar 25, 2021 · ac5b5fe · ac5b5fe
1 parent c6aca67
commit ac5b5fe
Show file tree

Hide file tree

Showing 10 changed files with 481 additions and 2 deletions.
diff --git a/change/@fluentui-web-components-545bf68d-0de1-4229-ae74-8ec9197f53e8.json b/change/@fluentui-web-components-545bf68d-0de1-4229-ae74-8ec9197f53e8.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "add combobox as a new web component",
+  "packageName": "@fluentui/web-components",
+  "email": "chhol@microsoft.com",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -14,6 +14,7 @@ import { BreadcrumbItem } from '@microsoft/fast-foundation';
 import { Button } from '@microsoft/fast-foundation';
 import { Checkbox } from '@microsoft/fast-foundation';
 import { ColorRGBA64 } from '@microsoft/fast-colors';
+import { Combobox } from '@microsoft/fast-foundation';
 import { CSSCustomPropertyBehavior } from '@microsoft/fast-foundation';
 import { DesignSystemProvider } from '@microsoft/fast-foundation';
 import { Dialog } from '@microsoft/fast-foundation';
@@ -251,6 +252,12 @@ export const CardStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export const CheckboxStyles: import("@microsoft/fast-element").ElementStyles;
 
+// @public
+export type ComboboxAppearance = SelectAppearance;
+
+// @public
+export const ComboboxStyles: import("@microsoft/fast-element").ElementStyles;
+
 // @public
 export function createColorPalette(baseColor: any): string[];
 
@@ -457,6 +464,15 @@ export class FluentCard extends FluentDesignSystemProvider {
 export class FluentCheckbox extends Checkbox {
 }
 
+// @public
+export class FluentCombobox extends Combobox {
+    appearance: ComboboxAppearance;
+    // @internal (undocumented)
+    appearanceChanged(oldValue: ComboboxAppearance, newValue: ComboboxAppearance): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
+}
+
 // @public
 export type FluentDesignSystem = Omit<DesignSystem, 'contrast' | 'fontWeight' | 'neutralForegroundDarkIndex' | 'neutralForegroundLightIndex'>;
 
@@ -662,6 +678,11 @@ export class FluentRadioGroup extends RadioGroup {
 
 // @public
 export class FluentSelect extends Select {
+    appearance: SelectAppearance;
+    // @internal (undocumented)
+    appearanceChanged(oldValue: SelectAppearance, newValue: SelectAppearance): void;
+    // @internal (undocumented)
+    connectedCallback(): void;
 }
 
 // @public
@@ -1193,6 +1214,9 @@ export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export const RadioStyles: import("@microsoft/fast-element").ElementStyles;
 
+// @public
+export type SelectAppearance = 'filled' | 'outline';
+
 // @public
 export const SelectStyles: import("@microsoft/fast-element").ElementStyles;
 

diff --git a/packages/web-components/src/combobox/combobox.stories.ts b/packages/web-components/src/combobox/combobox.stories.ts
@@ -0,0 +1,10 @@
+import '../design-system-provider';
+import '../listbox-option';
+import Examples from './fixtures/base.html';
+import './index';
+
+export default {
+  title: 'Combobox',
+};
+
+export const Combobox = () => Examples;
diff --git a/packages/web-components/src/combobox/combobox.styles.ts b/packages/web-components/src/combobox/combobox.styles.ts
@@ -0,0 +1,40 @@
+import { css } from '@microsoft/fast-element';
+import { disabledCursor, focusVisible } from '@microsoft/fast-foundation';
+import { SelectStyles } from '../select/select.styles';
+
+export const ComboboxStyles = css`
+    ${SelectStyles}
+
+    :host(:empty) .listbox {
+        display: none;
+    }
+
+    :host([disabled]) *,
+    :host([disabled]) {
+        cursor: ${disabledCursor};
+        user-select: none;
+    }
+
+    :host(:active) .selected-value {
+        user-select: none;
+    }
+
+    .selected-value {
+        -webkit-appearance: none;
+        background: transparent;
+        border: none;
+        color: inherit;
+        font-size: var(--type-ramp-base-font-size);
+        line-height: var(--type-ramp-base-line-height);
+        height: calc(100% - (var(--outline-width) * 1px));
+        margin: auto 0;
+        width: 100%;
+    }
+
+    .selected-value:hover,
+    .selected-value:${focusVisible},
+    .selected-value:disabled,
+    .selected-value:active {
+        outline: none;
+    }
+`;
diff --git a/packages/web-components/src/combobox/fixtures/base.html b/packages/web-components/src/combobox/fixtures/base.html
@@ -0,0 +1,269 @@
+<fluent-design-system-provider use-defaults>
+  <h1>Combobox</h1>
+
+  <h2>Default</h2>
+  <fluent-combobox id="combobox">
+    <fluent-option>Please Please Me</fluent-option>
+    <fluent-option>With The Beatles</fluent-option>
+    <fluent-option>A Hard Day's Night</fluent-option>
+    <fluent-option>Beatles for Sale</fluent-option>
+    <fluent-option>Help!</fluent-option>
+    <fluent-option>Rubber Soul</fluent-option>
+    <fluent-option>Revolver</fluent-option>
+    <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
+    <fluent-option>Magical Mystery Tour</fluent-option>
+    <fluent-option>The Beatles</fluent-option>
+    <fluent-option>Yellow Submarine</fluent-option>
+    <fluent-option>Abbey Road</fluent-option>
+    <fluent-option>Let It Be</fluent-option>
+  </fluent-combobox>
+
+  <h2>Filled</h2>
+  <fluent-combobox id="combobox" filled>
+    <fluent-option>Please Please Me</fluent-option>
+    <fluent-option>With The Beatles</fluent-option>
+    <fluent-option>A Hard Day's Night</fluent-option>
+    <fluent-option>Beatles for Sale</fluent-option>
+    <fluent-option>Help!</fluent-option>
+    <fluent-option>Rubber Soul</fluent-option>
+    <fluent-option>Revolver</fluent-option>
+    <fluent-option>Sgt. Pepper's Lonely Hearts Club Band</fluent-option>
+    <fluent-option>Magical Mystery Tour</fluent-option>
+    <fluent-option>The Beatles</fluent-option>
+    <fluent-option>Yellow Submarine</fluent-option>
+    <fluent-option>Abbey Road</fluent-option>
+    <fluent-option>Let It Be</fluent-option>
+  </fluent-combobox>
+
+  <h2>Default Selected</h2>
+  <fluent-combobox id="combobox-with-default">
+    <fluent-option>William Hartnell</fluent-option>
+    <fluent-option>Patrick Troughton</fluent-option>
+    <fluent-option>Jon Pertwee</fluent-option>
+    <fluent-option>Tom Baker</fluent-option>
+    <fluent-option>Peter Davidson</fluent-option>
+    <fluent-option>Colin Baker</fluent-option>
+    <fluent-option>Sylvester McCoy</fluent-option>
+    <fluent-option>Paul McGann</fluent-option>
+    <fluent-option>Christopher Eccleston</fluent-option>
+    <fluent-option>David Tenant</fluent-option>
+    <fluent-option>Matt Smith</fluent-option>
+    <fluent-option>Peter Capaldi</fluent-option>
+    <fluent-option selected>Jodie Whittaker</fluent-option>
+  </fluent-combobox>
+
+  <h2>Initial Value</h2>
+  <fluent-combobox id="combobox-with-initial-value" value="Christopher Eccleston">
+    <fluent-option>William Hartnell</fluent-option>
+    <fluent-option>Patrick Troughton</fluent-option>
+    <fluent-option>Jon Pertwee</fluent-option>
+    <fluent-option>Tom Baker</fluent-option>
+    <fluent-option>Peter Davidson</fluent-option>
+    <fluent-option>Colin Baker</fluent-option>
+    <fluent-option>Sylvester McCoy</fluent-option>
+    <fluent-option>Paul McGann</fluent-option>
+    <fluent-option>Christopher Eccleston</fluent-option>
+    <fluent-option>David Tenant</fluent-option>
+    <fluent-option>Matt Smith</fluent-option>
+    <fluent-option>Peter Capaldi</fluent-option>
+    <fluent-option>Jodie Whittaker</fluent-option>
+  </fluent-combobox>
+
+  <h2>Combobox with Autocomplete</h2>
+
+  <h3>Inline Autocomplete</h3>
+  <fluent-combobox id="combobox-with-inline-autocomplete" autocomplete="inline">
+    <fluent-option>William Hartnell</fluent-option>
+    <fluent-option>Patrick Troughton</fluent-option>
+    <fluent-option>Jon Pertwee</fluent-option>
+    <fluent-option>Tom Baker</fluent-option>
+    <fluent-option>Peter Davidson</fluent-option>
+    <fluent-option>Colin Baker</fluent-option>
+    <fluent-option>Sylvester McCoy</fluent-option>
+    <fluent-option>Paul McGann</fluent-option>
+    <fluent-option>Christopher Eccleston</fluent-option>
+    <fluent-option>David Tenant</fluent-option>
+    <fluent-option>Matt Smith</fluent-option>
+    <fluent-option>Peter Capaldi</fluent-option>
+    <fluent-option>Jodie Whittaker</fluent-option>
+  </fluent-combobox>
+
+  <h3>List Autocomplete</h3>
+  <fluent-combobox id="combobox-with-list-autocomplete" autocomplete="list">
+    <fluent-option>William Hartnell</fluent-option>
+    <fluent-option>Patrick Troughton</fluent-option>
+    <fluent-option>Jon Pertwee</fluent-option>
+    <fluent-option>Tom Baker</fluent-option>
+    <fluent-option>Peter Davidson</fluent-option>
+    <fluent-option>Colin Baker</fluent-option>
+    <fluent-option>Sylvester McCoy</fluent-option>
+    <fluent-option>Paul McGann</fluent-option>
+    <fluent-option>Christopher Eccleston</fluent-option>
+    <fluent-option>David Tenant</fluent-option>
+    <fluent-option>Matt Smith</fluent-option>
+    <fluent-option>Peter Capaldi</fluent-option>
+    <fluent-option>Jodie Whittaker</fluent-option>
+  </fluent-combobox>
+
+  <h3>Both Autocomplete</h3>
+  <fluent-combobox id="combobox-with-both-autocomplete" autocomplete="both">
+    <fluent-option>William Hartnell</fluent-option>
+    <fluent-option>Patrick Troughton</fluent-option>
+    <fluent-option>Jon Pertwee</fluent-option>
+    <fluent-option>Tom Baker</fluent-option>
+    <fluent-option>Peter Davidson</fluent-option>
+    <fluent-option>Colin Baker</fluent-option>
+    <fluent-option>Sylvester McCoy</fluent-option>
+    <fluent-option>Paul McGann</fluent-option>
+    <fluent-option>Christopher Eccleston</fluent-option>
+    <fluent-option>David Tenant</fluent-option>
+    <fluent-option>Matt Smith</fluent-option>
+    <fluent-option>Peter Capaldi</fluent-option>
+    <fluent-option>Jodie Whittaker</fluent-option>
+  </fluent-combobox>
+
+  <h2>Disabled Combobox</h2>
+  <fluent-combobox disabled>
+    <fluent-option>Extra Small</fluent-option>
+    <fluent-option>Small</fluent-option>
+    <fluent-option>Medium</fluent-option>
+    <fluent-option>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h2>Combobox with disabled items</h2>
+
+  <h3>Combobox with alternating disabled items</h3>
+  <fluent-combobox id="combobox-with-every-other-disabled">
+    <fluent-option>Extra Small</fluent-option>
+    <fluent-option disabled>Small</fluent-option>
+    <fluent-option>Medium</fluent-option>
+    <fluent-option disabled>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with adjacent disabled items at start of list</h3>
+  <fluent-combobox id="combobox-with-adjacent-disabled-start">
+    <fluent-option disabled>Extra Small</fluent-option>
+    <fluent-option disabled>Small</fluent-option>
+    <fluent-option>Medium</fluent-option>
+    <fluent-option>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with adjacent disabled items in middle of list</h3>
+  <fluent-combobox id="combobox-with-adjacent-disabled-middle">
+    <fluent-option>Extra Small</fluent-option>
+    <fluent-option disabled>Small</fluent-option>
+    <fluent-option disabled>Medium</fluent-option>
+    <fluent-option>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with adjacent disabled items at end of list</h3>
+  <fluent-combobox id="combobox-with-adjacent-disabled-end">
+    <fluent-option>Extra Small</fluent-option>
+    <fluent-option>Small</fluent-option>
+    <fluent-option>Medium</fluent-option>
+    <fluent-option disabled>Large</fluent-option>
+    <fluent-option disabled>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with all but one item disabled</h3>
+  <fluent-combobox id="combobox-with-all-but-one-disabled">
+    <fluent-option disabled>Extra Small</fluent-option>
+    <fluent-option disabled>Small</fluent-option>
+    <fluent-option disabled>Medium</fluent-option>
+    <fluent-option disabled>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with all items disabled</h3>
+  <fluent-combobox id="combobox-with-all-disabled">
+    <fluent-option disabled>Extra Small</fluent-option>
+    <fluent-option disabled>Small</fluent-option>
+    <fluent-option disabled>Medium</fluent-option>
+    <fluent-option disabled>Large</fluent-option>
+    <fluent-option disabled>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h2>Combobox with placeholder</h2>
+  <fluent-combobox placeholder="Please select a size" id="combobox-with-placeholder">
+    <fluent-option>Extra Small</fluent-option>
+    <fluent-option>Small</fluent-option>
+    <fluent-option>Medium</fluent-option>
+    <fluent-option>Large</fluent-option>
+    <fluent-option>Extra Large</fluent-option>
+  </fluent-combobox>
+
+  <h2>Combobox with no items</h2>
+  <fluent-combobox id="combobox-with-no-items"></fluent-combobox>
+
+  <h2>Combobox with long list</h2>
+  <fluent-combobox id="combobox-with-long-list" autocomplete="both">
+    <fluent-option>Alabama</fluent-option>
+    <fluent-option>Alaska</fluent-option>
+    <fluent-option>Arizona</fluent-option>
+    <fluent-option>Arkansas</fluent-option>
+    <fluent-option>California</fluent-option>
+    <fluent-option>Colorado</fluent-option>
+    <fluent-option>Connecticut</fluent-option>
+    <fluent-option>Delaware</fluent-option>
+    <fluent-option>Florida</fluent-option>
+    <fluent-option>Georgia</fluent-option>
+    <fluent-option>Hawaii</fluent-option>
+    <fluent-option>Idaho</fluent-option>
+    <fluent-option>Illinois</fluent-option>
+    <fluent-option>Indiana</fluent-option>
+    <fluent-option>Iowa</fluent-option>
+    <fluent-option>Kansas</fluent-option>
+    <fluent-option>Kentucky</fluent-option>
+    <fluent-option>Louisiana</fluent-option>
+    <fluent-option>Maine</fluent-option>
+    <fluent-option>Maryland</fluent-option>
+    <fluent-option>Massachussets</fluent-option>
+    <fluent-option>Michigain</fluent-option>
+    <fluent-option>Minnesota</fluent-option>
+    <fluent-option>Mississippi</fluent-option>
+    <fluent-option>Missouri</fluent-option>
+    <fluent-option>Montana</fluent-option>
+    <fluent-option>Nebraska</fluent-option>
+    <fluent-option>Nevada</fluent-option>
+    <fluent-option>New Hampshire</fluent-option>
+    <fluent-option>New Jersey</fluent-option>
+    <fluent-option>New Mexico</fluent-option>
+    <fluent-option>New York</fluent-option>
+    <fluent-option>North Carolina</fluent-option>
+    <fluent-option>North Dakota</fluent-option>
+    <fluent-option>Ohio</fluent-option>
+    <fluent-option>Oklahoma</fluent-option>
+    <fluent-option>Oregon</fluent-option>
+    <fluent-option>Pennsylvania</fluent-option>
+    <fluent-option>Rhode Island</fluent-option>
+    <fluent-option>South Carolina</fluent-option>
+    <fluent-option>South Dakota</fluent-option>
+    <fluent-option>Texas</fluent-option>
+    <fluent-option>Tennessee</fluent-option>
+    <fluent-option>Utah</fluent-option>
+    <fluent-option>Vermont</fluent-option>
+    <fluent-option>Virginia</fluent-option>
+    <fluent-option>Washington</fluent-option>
+    <fluent-option>Wisconsin</fluent-option>
+    <fluent-option>West Virginia</fluent-option>
+    <fluent-option>Wyoming</fluent-option>
+  </fluent-combobox>
+
+  <h2>Forced positions</h2>
+
+  <h3>Combobox with forced position above</h3>
+  <fluent-combobox id="combobox-with-forced-position-above" position="above">
+    <fluent-option>Position forced above</fluent-option>
+    <fluent-option>Option Two</fluent-option>
+  </fluent-combobox>
+
+  <h3>Combobox with forced position below</h3>
+  <fluent-combobox id="combobox-with-forced-position-below" position="below">
+    <fluent-option>Position forced below</fluent-option>
+    <fluent-option>Option Two</fluent-option>
+  </fluent-combobox>
+</fluent-design-system-provider>