feat: add number-field web component (microsoft#17494)

* created and add number-field files * Change files * ran yarn build
miroslavstastny · May 5, 2021 · 69d8cb9 · 69d8cb9
1 parent 170a74a
commit 69d8cb9
Show file tree

Hide file tree

Showing 7 changed files with 440 additions and 0 deletions.
diff --git a/change/@fluentui-web-components-6b5e7aec-7c00-49cf-8a0d-66fc803d4b59.json b/change/@fluentui-web-components-6b5e7aec-7c00-49cf-8a0d-66fc803d4b59.json
@@ -0,0 +1,7 @@
+{
+  "type": "minor",
+  "comment": "created and add number-field files",
+  "packageName": "@fluentui/web-components",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}
diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md
@@ -31,6 +31,7 @@ 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 { NumberField } from '@microsoft/fast-foundation';
 import { Radio } from '@microsoft/fast-foundation';
 import { RadioGroup } from '@microsoft/fast-foundation';
 import { Select } from '@microsoft/fast-foundation';
@@ -696,6 +697,13 @@ export class FluentMenu extends Menu {
 export class FluentMenuItem extends MenuItem {
 }
 
+// @public
+export class FluentNumberField extends NumberField {
+    appearance: NumberFieldAppearance;
+    // @internal (undocumented)
+    connectedCallback(): void;
+}
+
 // @public
 export class FluentOption extends ListboxOption {
 }
@@ -1222,6 +1230,12 @@ export const neutralOutlineRest: SwatchRecipe;
 // @public
 export const neutralOutlineRestBehavior: CSSCustomPropertyBehavior;
 
+// @public
+export type NumberFieldAppearance = 'filled' | 'outline';
+
+// @public
+export const NumberFieldStyles: import("@microsoft/fast-element").ElementStyles;
+
 // @public
 export const OptionStyles: import("@microsoft/fast-element").ElementStyles;
 

diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts
@@ -18,6 +18,7 @@ export * from './listbox';
 export * from './listbox-option';
 export * from './menu/';
 export * from './menu-item/';
+export * from './number-field/';
 export * from './progress/';
 export * from './radio/';
 export * from './radio-group/';

diff --git a/packages/web-components/src/number-field/fixtures/number-field.html b/packages/web-components/src/number-field/fixtures/number-field.html
@@ -0,0 +1,113 @@
+<fluent-design-system-provider use-defaults>
+  <h1>Number field</h1>
+  <h2>Default</h2>
+  <fluent-number-field></fluent-number-field>
+  <fluent-number-field>Label</fluent-number-field>
+
+  <h2>Hide step</h2>
+  <fluent-number-field hide-step>Label</fluent-number-field>
+
+  <h2>With value</h2>
+  <fluent-number-field value="10"></fluent-number-field>
+
+  <h2>With min 1 and max 10</h2>
+  <fluent-number-field value="5" min="1" max="10"></fluent-number-field>
+
+  <h2>0.1 stepping</h2>
+  <fluent-number-field value="0.2" min="0" max="1" step=".1"></fluent-number-field>
+
+  <h2>Full Width</h2>
+  <fluent-number-field style="width: 100%;"></fluent-number-field>
+
+  <h2>Placeholder</h2>
+  <fluent-number-field placeholder="Placeholder"></fluent-number-field>
+
+  <!-- Required -->
+  <h2>Required</h2>
+  <fluent-number-field required></fluent-number-field>
+
+  <!-- Disabled -->
+  <h2>Disabled</h2>
+  <fluent-number-field disabled></fluent-number-field>
+  <fluent-number-field disabled>label</fluent-number-field>
+  <fluent-number-field disabled placeholder="placeholder"></fluent-number-field>
+
+  <!-- Read only -->
+  <h2>Read only</h2>
+  <fluent-number-field readonly value="Readonly"></fluent-number-field>
+  <fluent-number-field readonly value="Readonly">label</fluent-number-field>
+
+  <!-- Autofocus -->
+  <h2>Autofocus</h2>
+  <fluent-number-field autofocus>autofocus</fluent-number-field>
+
+  <!-- Maxlength -->
+  <h2>Maxlength</h2>
+  <fluent-number-field maxlength="8">maxlength</fluent-number-field>
+
+  <!-- Minlength -->
+  <h2>Minlength</h2>
+  <fluent-number-field minlength="8">minlength</fluent-number-field>
+
+  <!-- Start -->
+  <h2>With start</h2>
+  <fluent-number-field>
+    <svg slot="start" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+      />
+    </svg>
+  </fluent-number-field>
+
+  <!-- End -->
+  <h2>With end</h2>
+  <fluent-number-field>
+    <svg slot="end" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+      <path
+        d="M6.5,7.7h-1v-1h1V7.7z M10.6,7.7h-1v-1h1V7.7z M14.7,6.7v2.1h-1v2.6c0,0.2,0,0.4-0.1,0.6c-0.1,0.2-0.2,0.4-0.3,0.5c-0.1,0.1-0.3,0.3-0.5,0.3c-0.2,0.1-0.4,0.1-0.6,0.1H10l-3.5,3v-3H3.9c-0.2,0-0.4,0-0.6-0.1c-0.2-0.1-0.4-0.2-0.5-0.3c-0.1-0.1-0.3-0.3-0.3-0.5c-0.1-0.2-0.1-0.4-0.1-0.6V8.8h-1V6.7h1V5.2c0-0.2,0-0.4,0.1-0.6c0.1-0.2,0.2-0.4,0.3-0.5c0.1-0.1,0.3-0.3,0.5-0.3c0.2-0.1,0.4-0.1,0.6-0.1h3.6V1.9C7.3,1.8,7.2,1.7,7.1,1.5C7,1.4,7,1.2,7,1C7,0.9,7,0.8,7,0.6c0.1-0.1,0.1-0.2,0.2-0.3c0.1-0.1,0.2-0.2,0.3-0.2C7.7,0,7.9,0,8,0c0.1,0,0.3,0,0.4,0.1c0.1,0.1,0.2,0.1,0.3,0.2C8.8,0.4,8.9,0.5,9,0.6C9,0.8,9,0.9,9,1c0,0.2,0,0.4-0.1,0.5C8.8,1.7,8.7,1.8,8.5,1.9v1.7h3.6c0.2,0,0.4,0,0.6,0.1c0.2,0.1,0.4,0.2,0.5,0.3c0.1,0.1,0.3,0.3,0.3,0.5c0.1,0.2,0.1,0.4,0.1,0.6v1.5H14.7z M12.6,5.2c0-0.1-0.1-0.3-0.2-0.4c-0.1-0.1-0.2-0.2-0.4-0.2H3.9c-0.1,0-0.3,0.1-0.4,0.2C3.4,4.9,3.4,5,3.4,5.2v6.2c0,0.1,0.1,0.3,0.2,0.4c0.1,0.1,0.2,0.2,0.4,0.2h3.6v1.8l2.1-1.8h2.5c0.1,0,0.3-0.1,0.4-0.2c0.1-0.1,0.2-0.2,0.2-0.4V5.2z M5.8,8.9c0.3,0.3,0.6,0.5,1,0.7C7.2,9.7,7.6,9.8,8,9.8s0.8-0.1,1.2-0.2c0.4-0.2,0.7-0.4,1-0.7l0.7,0.7c-0.4,0.4-0.8,0.7-1.4,0.9c-0.5,0.2-1,0.3-1.6,0.3s-1.1-0.1-1.6-0.3c-0.5-0.2-1-0.5-1.3-0.9L5.8,8.9z"
+      />
+    </svg>
+  </fluent-number-field>
+
+  <h2>Filled</h2>
+  <h5>Default</h5>
+  <fluent-number-field appearance="filled"></fluent-number-field>
+  <fluent-number-field appearance="filled">label</fluent-number-field>
+
+  <h5>Placeholder</h5>
+  <fluent-number-field appearance="filled" placeholder="Placeholder"></fluent-number-field>
+
+  <!-- Required -->
+  <h5>Required</h5>
+  <fluent-number-field appearance="filled" required></fluent-number-field>
+
+  <!-- Disabled -->
+  <h5>Disabled</h5>
+  <fluent-number-field appearance="filled" disabled></fluent-number-field>
+  <fluent-number-field appearance="filled" disabled>label</fluent-number-field>
+  <fluent-number-field appearance="filled" disabled placeholder="placeholder"></fluent-number-field>
+
+  <!-- Read only -->
+  <h5>Read only</h5>
+  <fluent-number-field appearance="filled" readonly value="Readonly"></fluent-number-field>
+  <fluent-number-field appearance="filled" readonly value="Readonly">
+    label
+  </fluent-number-field>
+
+  <!-- With label -->
+  <h2>Visual vs audio label</h2>
+  <fluent-number-field>
+    <span aria-label="Audio label">Visible label</span>
+  </fluent-number-field>
+
+  <!-- With aria-label -->
+  <h2>With aria-label</h2>
+  <fluent-number-field aria-label="Text field with aria-label"></fluent-number-field>
+
+  <form class="form" name="myForm" action="#">
+    <!-- In a form -->
+    <h2>In a form</h2>
+    <fluent-number-field name="fname" aria-label="Text field with aria-label"></fluent-number-field>
+    <input type="submit" value="submit" />
+  </form>
+</fluent-design-system-provider>
diff --git a/packages/web-components/src/number-field/index.ts b/packages/web-components/src/number-field/index.ts
@@ -0,0 +1,58 @@
+import { attr, customElement } from '@microsoft/fast-element';
+import { NumberField, NumberFieldTemplate as template } from '@microsoft/fast-foundation';
+import { NumberFieldStyles as styles } from './number-field.styles';
+
+/**
+ * Number field appearances
+ * @public
+ */
+export type NumberFieldAppearance = 'filled' | 'outline';
+
+/**
+ * The Fluent Number Field Custom Element. Implements {@link @microsoft/fast-foundation#NumberField},
+ * {@link @microsoft/fast-foundation#NumberFieldTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-number-field\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+@customElement({
+  name: 'fluent-number-field',
+  shadowOptions: {
+    delegatesFocus: true,
+    mode: 'closed',
+  },
+  styles,
+  template,
+})
+export class FluentNumberField extends NumberField {
+  /**
+   * The appearance of the element.
+   *
+   * @public
+   * @remarks
+   * HTML Attribute: appearance
+   */
+  @attr
+  public appearance: NumberFieldAppearance;
+
+  /**
+   * @internal
+   */
+  public connectedCallback() {
+    super.connectedCallback();
+
+    if (!this.appearance) {
+      this.appearance = 'outline';
+    }
+  }
+}
+
+/**
+ * Styles for NumberField
+ * @public
+ */
+export const NumberFieldStyles = styles;
diff --git a/packages/web-components/src/number-field/number-field.stories.ts b/packages/web-components/src/number-field/number-field.stories.ts
@@ -0,0 +1,24 @@
+import addons from '@storybook/addons';
+import { STORY_RENDERED } from '@storybook/core-events';
+import NumberFieldTemplate from './fixtures/number-field.html';
+import './index';
+
+addons.getChannel().addListener(STORY_RENDERED, (name: string) => {
+  if (name.toLowerCase().startsWith('number-field')) {
+    document.querySelectorAll('.form').forEach(el => {
+      if (el instanceof HTMLFormElement) {
+        el.onsubmit = event => {
+          event.preventDefault();
+          const form: HTMLFormElement = document.forms['myForm'];
+          console.log(form.elements['fname'].value, 'value of input');
+        };
+      }
+    });
+  }
+});
+
+export default {
+  title: 'Number Field',
+};
+
+export const NumberField = () => NumberFieldTemplate;