feat: adds select and related styles

change/@fluentui-web-components-2020-11-19-21-47-55-users-jes-select-styling.json

@@ -0,0 +1,8 @@
+{
+  "type": "patch",
+  "comment": "feat: add select and related styles",
+  "packageName": "@fluentui/web-components",
+  "email": "jes@microsoft.com",
+  "dependentChangeType": "patch",
+  "date": "2020-11-20T05:47:55.207Z"
+}

packages/web-components/docs/api-report.md

@@ -21,10 +21,13 @@ import { Direction } from '@microsoft/fast-web-utilities';
 import { Divider } from '@microsoft/fast-foundation';
 import { ElementStyles } from '@microsoft/fast-element';
 import { Flipper } from '@microsoft/fast-foundation';
+import { Listbox } from '@microsoft/fast-foundation';
+import { ListboxOption } from '@microsoft/fast-foundation';
 import { Menu } from '@microsoft/fast-foundation';
 import { MenuItem } from '@microsoft/fast-foundation';
 import { Radio } from '@microsoft/fast-foundation';
 import { RadioGroup } from '@microsoft/fast-foundation';
+import { Select } from '@microsoft/fast-foundation';
 import { Skeleton } from '@microsoft/fast-foundation';
 import { Slider } from '@microsoft/fast-foundation';
 import { SliderLabel } from '@microsoft/fast-foundation';
@@ -363,6 +366,10 @@ export class FluentDivider extends Divider {
 export class FluentFlipper extends Flipper {
 }
 
+// @public
+export class FluentListbox extends Listbox {
+}
+
 // @public
 export class FluentMenu extends Menu {
 }
@@ -371,6 +378,10 @@ export class FluentMenu extends Menu {
 export class FluentMenuItem extends MenuItem {
 }
 
+// @public
+export class FluentOption extends ListboxOption {
+}
+
 // @public
 export class FluentProgress extends BaseProgress {
 }
@@ -387,6 +398,10 @@ export class FluentRadio extends Radio {
 export class FluentRadioGroup extends RadioGroup {
 }
 
+// @public
+export class FluentSelect extends Select {
+}
+
 // @public
 export class FluentSkeleton extends Skeleton {
 }
@@ -460,6 +475,9 @@ export const inlineStartBehavior: CSSCustomPropertyBehavior;
 // @internal (undocumented)
 export const LightweightButtonStyles: ElementStyles;
 
+// @public
+export const ListboxStyles: import("@microsoft/fast-element").ElementStyles;
+
 // @public
 export const MenuItemStyles: import("@microsoft/fast-element").ElementStyles;
 
@@ -592,6 +610,9 @@ export const neutralOutlineHoverBehavior: CSSCustomPropertyBehavior;
 // @public
 export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior;
 
+// @public
+export const OptionStyles: import("@microsoft/fast-element").ElementStyles;
+
 // Warning: (ae-internal-missing-underscore) The name "OutlineButtonStyles" should be prefixed with an underscore because the declaration is marked as @internal
 //
 // @internal (undocumented)
@@ -612,6 +633,9 @@ export const RadioGroupStyles: import("@microsoft/fast-element").ElementStyles;
 // @public
 export const RadioStyles: import("@microsoft/fast-element").ElementStyles;
 
+// @public
+export const SelectStyles: import("@microsoft/fast-element").ElementStyles;
+
 // @public
 export const SkeletonStyles: import("@microsoft/fast-element").ElementStyles;
 

packages/web-components/src/index.ts

@@ -8,11 +8,14 @@ export * from './design-system-provider/';
 export * from './dialog/';
 export * from './divider/';
 export * from './flipper/';
+export * from './listbox';
+export * from './listbox-option';
 export * from './menu/';
 export * from './menu-item/';
 export * from './progress/';
 export * from './radio/';
 export * from './radio-group/';
+export * from './select';
 export * from './skeleton/';
 export * from './slider/';
 export * from './slider-label/';

packages/web-components/src/listbox-option/fixtures/base.html

@@ -0,0 +1,35 @@
+<fluent-design-system-provider use-defaults>
+  <h1>Option</h1>
+
+  <h2>Defaults</h2>
+  <fluent-option>
+    Text content is the value when the value attribute is absent.
+  </fluent-option>
+
+  <fluent-option value="Value content loses">
+    Even when the value attribute and text are both present, this text should be displayed.
+  </fluent-option>
+
+  <fluent-option value="This option has no text content."></fluent-option>
+
+  <h2>Disabled</h2>
+  <fluent-option disabled>This option is disabled.</fluent-option>
+
+  <h2>Selected</h2>
+  <fluent-option selected>This option is selected by default.</fluent-option>
+
+  <h2>Slots</h2>
+  <fluent-option value="1">
+    <svg slot="start" viewBox="0 0 16 16" 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>
+    <svg slot="end" viewBox="0 0 16 16" 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>
+    This option has an icon in its start and end slots.
+  </fluent-option>
+</fluent-design-system-provider>

packages/web-components/src/listbox-option/index.ts

@@ -0,0 +1,25 @@
+import { customElement } from '@microsoft/fast-element';
+import { ListboxOption, ListboxOptionTemplate as template } from '@microsoft/fast-foundation';
+import { OptionStyles as styles } from './listbox-option.styles';
+
+/**
+ * The Fluent ListboxOption Element. Implements {@link @microsoft/fast-foundation#ListboxOption},
+ * {@link @microsoft/fast-foundation#ListboxOptionTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-option\>
+ */
+@customElement({
+  name: 'fluent-option',
+  template,
+  styles,
+})
+export class FluentOption extends ListboxOption {}
+
+/**
+ * Styles for Option
+ * @public
+ */
+export const OptionStyles = styles;

packages/web-components/src/listbox-option/listbox-option.stories.ts

@@ -0,0 +1,12 @@
+import { FluentDesignSystemProvider } from '../design-system-provider';
+import ListboxOptionTemplate from './fixtures/base.html';
+import { FluentOption } from './';
+
+FluentOption;
+FluentDesignSystemProvider;
+
+export default {
+  title: 'ListboxOption',
+};
+
+export const ListboxOption = (): string => ListboxOptionTemplate;

packages/web-components/src/listbox-option/listbox-option.styles.ts

@@ -0,0 +1,142 @@
+import { css } from '@microsoft/fast-element';
+import { disabledCursor, display, focusVisible, forcedColorsStylesheetBehavior } from '@microsoft/fast-foundation';
+import { SystemColors } from '@microsoft/fast-web-utilities';
+import {
+  accentFillActiveBehavior,
+  accentFillHoverBehavior,
+  accentFillSelectedBehavior,
+  accentForegroundCutRestBehavior,
+  neutralFillHoverBehavior,
+  neutralFillStealthHoverBehavior,
+  neutralFillStealthRestBehavior,
+  neutralFillStealthSelectedBehavior,
+  neutralFocusBehavior,
+  neutralFocusInnerAccentBehavior,
+  neutralForegroundHoverBehavior,
+  neutralForegroundRestBehavior,
+  neutralLayerL1Behavior,
+} from '../styles';
+import { heightNumber } from '../styles/size';
+
+export const OptionStyles = css`
+    ${display('inline-flex')} :host {
+        font-family: var(--body-font);
+        border-radius: calc(var(--corner-radius) * 1px);
+        border: calc(var(--focus-outline-width) * 1px) solid transparent;
+        box-sizing: border-box;
+        color: ${neutralForegroundRestBehavior.var};
+        cursor: pointer;
+        fill: currentcolor;
+        font-size: var(--type-ramp-base-font-size);
+        height: calc(${heightNumber} * 1px);
+        line-height: var(--type-ramp-base-line-height);
+        margin: 0 calc(var(--design-unit) * 1px);
+        outline: none;
+        overflow: hidden;
+        align-items: center;
+        padding: 0 calc(var(--design-unit) * 2.25px);
+        user-select: none;
+        white-space: nowrap;
+    }
+
+    :host(:${focusVisible}) {
+        box-shadow: 0 0 0 calc(var(--focus-outline-width) * 1px) inset ${neutralFocusInnerAccentBehavior.var};
+        border-color: ${neutralFocusBehavior.var};
+        background: ${accentFillHoverBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
+    }
+
+    :host([aria-selected="true"]) {
+        background: ${accentFillHoverBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
+    }
+
+    :host(:active) {
+        background: ${accentFillActiveBehavior.var};
+        color: ${accentForegroundCutRestBehavior.var};
+    }
+
+    :host(:not([aria-selected="true"]):hover) {
+        background: ${neutralFillHoverBehavior.var};
+        color: ${neutralForegroundHoverBehavior.var};
+    }
+
+    :host(:not([aria-selected="true"]):active) {
+        background: ${neutralFillHoverBehavior.var};
+        color: ${neutralForegroundHoverBehavior.var};
+    }
+
+    :host([disabled]) {
+        cursor: ${disabledCursor};
+        opacity: var(--disabled-opacity);
+    }
+
+    :host([disabled]:hover) {
+        background-color: inherit;
+    }
+
+    .content {
+        grid-column-start: 2;
+        justify-self: start;
+        overflow: hidden;
+        text-overflow: ellipsis;
+    }
+
+    .start,
+    .end,
+    ::slotted(svg) {
+        display: flex;
+    }
+
+    ::slotted(svg) {
+        ${/* Glyph size and margin-left is temporary - replace when adaptive typography is figured out */ ''}
+        height: calc(var(--design-unit) * 4px);
+        width: calc(var(--design-unit) * 4px);
+    }
+
+    ::slotted([slot="end"]) {
+        margin-inline-start: 1ch;
+    }
+
+    ::slotted([slot="start"]) {
+        margin-inline-end: 1ch;
+    }
+
+`.withBehaviors(
+  accentFillActiveBehavior,
+  accentFillHoverBehavior,
+  accentFillSelectedBehavior,
+  accentForegroundCutRestBehavior,
+  forcedColorsStylesheetBehavior(
+    css`
+      :host {
+        border-color: transparent;
+        color: ${SystemColors.ButtonText};
+        forced-color-adjust: none;
+      }
+
+      :host(:not([aria-selected='true']):hover),
+      :host([aria-selected='true']) {
+        background: ${SystemColors.Highlight};
+        color: ${SystemColors.HighlightText};
+      }
+
+      :host([disabled]),
+      :host([disabled]:not([aria-selected='true']):hover) {
+        background: ${SystemColors.Canvas};
+        color: ${SystemColors.GrayText};
+        fill: currentcolor;
+        opacity: 1;
+      }
+    `,
+  ),
+  neutralFillHoverBehavior,
+  neutralFillStealthHoverBehavior,
+  neutralFillStealthRestBehavior,
+  neutralFillStealthSelectedBehavior,
+  neutralFocusBehavior,
+  neutralFocusInnerAccentBehavior,
+  neutralForegroundHoverBehavior,
+  neutralForegroundRestBehavior,
+  neutralLayerL1Behavior,
+);

packages/web-components/src/listbox/fixtures/base.html

@@ -0,0 +1,64 @@
+<fluent-design-system-provider use-defaults>
+  <h1>Listbox</h1>
+  <h2>Default</h2>
+  <fluent-listbox>
+    <fluent-option>This option has no value</fluent-option>
+    <fluent-option disabled>This option is disabled</fluent-option>
+    <fluent-option value="hi">This option has a value</fluent-option>
+    <fluent-option selected>This option is selected by default</fluent-option>
+  </fluent-listbox>
+
+  <h2>Long list</h2>
+  <fluent-listbox>
+    <fluent-option value="AL">Alabama</fluent-option>
+    <fluent-option value="AK">Alaska</fluent-option>
+    <fluent-option value="AZ">Arizona</fluent-option>
+    <fluent-option value="AR">Arkansas</fluent-option>
+    <fluent-option value="CA">California</fluent-option>
+    <fluent-option value="CO">Colorado</fluent-option>
+    <fluent-option value="CT">Connecticut</fluent-option>
+    <fluent-option value="DE">Delaware</fluent-option>
+    <fluent-option value="FL">Florida</fluent-option>
+    <fluent-option value="GA">Georgia</fluent-option>
+    <fluent-option value="HI">Hawaii</fluent-option>
+    <fluent-option value="ID">Idaho</fluent-option>
+    <fluent-option value="IL">Illinois</fluent-option>
+    <fluent-option value="IN">Indiana</fluent-option>
+    <fluent-option value="IA">Iowa</fluent-option>
+    <fluent-option value="KS">Kansas</fluent-option>
+    <fluent-option value="KY">Kentucky</fluent-option>
+    <fluent-option value="LA">Louisiana</fluent-option>
+    <fluent-option value="ME">Maine</fluent-option>
+    <fluent-option value="MD">Maryland</fluent-option>
+    <fluent-option value="MA">Massachussets</fluent-option>
+    <fluent-option value="MI">Michigain</fluent-option>
+    <fluent-option value="MN">Minnesota</fluent-option>
+    <fluent-option value="MS">Mississippi</fluent-option>
+    <fluent-option value="MO">Missouri</fluent-option>
+    <fluent-option value="MT">Montana</fluent-option>
+    <fluent-option value="NE">Nebraska</fluent-option>
+    <fluent-option value="NV">Nevada</fluent-option>
+    <fluent-option value="NH">New Hampshire</fluent-option>
+    <fluent-option value="NJ">New Jersey</fluent-option>
+    <fluent-option value="NM">New Mexico</fluent-option>
+    <fluent-option value="NY">New York</fluent-option>
+    <fluent-option value="NC">North Carolina</fluent-option>
+    <fluent-option value="ND">North Dakota</fluent-option>
+    <fluent-option value="OH">Ohio</fluent-option>
+    <fluent-option value="OK">Oklahoma</fluent-option>
+    <fluent-option value="OR">Oregon</fluent-option>
+    <fluent-option value="PA">Pennsylvania</fluent-option>
+    <fluent-option value="RI">Rhode Island</fluent-option>
+    <fluent-option value="SC">South Carolina</fluent-option>
+    <fluent-option value="SD">South Dakota</fluent-option>
+    <fluent-option value="TX">Texas</fluent-option>
+    <fluent-option value="TN">Tennessee</fluent-option>
+    <fluent-option value="UT">Utah</fluent-option>
+    <fluent-option value="VT">Vermont</fluent-option>
+    <fluent-option value="VA">Virginia</fluent-option>
+    <fluent-option value="WA">Washington</fluent-option>
+    <fluent-option value="WI">Wisconsin</fluent-option>
+    <fluent-option value="WV">West Virginia</fluent-option>
+    <fluent-option value="WY">Wyoming</fluent-option>
+  </fluent-listbox>
+</fluent-design-system-provider>