add filled apeparance

microsoft · Mar 6, 2021 · 5028146 · 5028146
1 parent 9a01fc0
commit 5028146
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 4 deletions.
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -662,6 +662,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 +1198,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/fixtures/base.html b/packages/web-components/src/combobox/fixtures/base.html
@@ -18,6 +18,23 @@ <h2>Default</h2>
     <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>

diff --git a/packages/web-components/src/combobox/index.ts b/packages/web-components/src/combobox/index.ts
@@ -1,7 +1,14 @@
-import { customElement } from '@microsoft/fast-element';
+import { attr, customElement } from '@microsoft/fast-element';
 import { Combobox, ComboboxTemplate as template } from '@microsoft/fast-foundation';
+import { SelectAppearance } from '../select';
 import { ComboboxStyles as styles } from './combobox.styles';
 
+/**
+ * Combobox appearances
+ * @public
+ */
+export type ComboboxAppearance = SelectAppearance;
+
 /**
  * The Fluent Combobox Custom Element. Implements {@link @microsoft/fast-foundation#Combobox|Combobox},
  * {@link @microsoft/fast-foundation#ComboboxTemplate|ComboboxTemplate}
@@ -19,7 +26,38 @@ import { ComboboxStyles as styles } from './combobox.styles';
     delegatesFocus: true,
   },
 })
-export class FluentCombobox extends Combobox {}
+export class FluentCombobox extends Combobox {
+  /**
+   * The appearance of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr({ mode: 'fromView' })
+  public appearance: ComboboxAppearance;
+
+  /**
+   * @internal
+   */
+  public appearanceChanged(oldValue: ComboboxAppearance, newValue: ComboboxAppearance): void {
+    if (oldValue !== newValue) {
+      this.classList.add(newValue);
+      this.classList.remove(oldValue);
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.appearance) {
+      this.appearance = 'outline';
+    }
+  }
+}
 
 /**
  * Styles for combobox

diff --git a/packages/web-components/src/select/fixtures/base.html b/packages/web-components/src/select/fixtures/base.html
@@ -9,6 +9,14 @@ <h2>Default</h2>
     <fluent-option selected>This option is selected by default</fluent-option>
   </fluent-select>
 
+  <h2>Filled</h2>
+  <fluent-select filled>
+    <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-select>
+
   <h2>With Label</h2>
   <label for="shirt-size">Choose a T-Shirt size:</label>
   <fluent-select id="shirt-size">

diff --git a/packages/web-components/src/select/index.ts b/packages/web-components/src/select/index.ts
@@ -1,7 +1,13 @@
-import { customElement } from '@microsoft/fast-element';
+import { attr, customElement } from '@microsoft/fast-element';
 import { Select, SelectTemplate as template } from '@microsoft/fast-foundation';
 import { SelectStyles as styles } from './select.styles';
 
+/**
+ * Select appearances
+ * @public
+ */
+export type SelectAppearance = 'filled' | 'outline';
+
 /**
  * The Fluent Select Element. Implements {@link @microsoft/fast-foundation#Select},
  * {@link @microsoft/fast-foundation#SelectTemplate}
@@ -16,7 +22,38 @@ import { SelectStyles as styles } from './select.styles';
   template,
   styles,
 })
-export class FluentSelect extends Select {}
+export class FluentSelect extends Select {
+  /**
+   * The appearance of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr({ mode: 'fromView' })
+  public appearance: SelectAppearance;
+
+  /**
+   * @internal
+   */
+  public appearanceChanged(oldValue: SelectAppearance, newValue: SelectAppearance): void {
+    if (oldValue !== newValue) {
+      this.classList.add(newValue);
+      this.classList.remove(oldValue);
+    }
+  }
+
+  /**
+   * @internal
+   */
+  public connectedCallback(): void {
+    super.connectedCallback();
+
+    if (!this.appearance) {
+      this.appearance = 'outline';
+    }
+  }
+}
 
 /**
  * Styles for Select

diff --git a/packages/web-components/src/select/select.styles.ts b/packages/web-components/src/select/select.styles.ts
@@ -5,9 +5,11 @@ import { elevation } from '../styles/elevation';
 import {
   accentFillHoverBehavior,
   accentForegroundCutRestBehavior,
+  neutralFillHoverBehavior,
   neutralFillInputActiveBehavior,
   neutralFillInputHoverBehavior,
   neutralFillInputRestBehavior,
+  neutralFillRestBehavior,
   neutralFillStealthRestBehavior,
   neutralFocusBehavior,
   neutralFocusInnerAccentBehavior,
@@ -182,9 +184,24 @@ export const SelectStyles = css`
         flex: 0 0 auto;
     }
 
+    :host([filled]) {
+        background: ${neutralFillRestBehavior.var};
+        border-color: transparent;
+    }
+
+    :host([filled]:hover:not([disabled])) {
+        background: ${neutralFillHoverBehavior.var};
+        border-color: transparent;
+    }
+
+    :host([filled]:${focusVisible}) {
+        border-color: ${neutralFocusBehavior.var};
+    }
 `.withBehaviors(
   accentFillHoverBehavior,
   accentForegroundCutRestBehavior,
+  neutralFillRestBehavior,
+  neutralFillHoverBehavior,
   neutralOutlineActiveBehavior,
   neutralOutlineHoverBehavior,
   neutralOutlineRestBehavior,