@fluentui/web-components 2.1.0 → 2.2.0

package/dist/esm/search/index.js

@@ -0,0 +1,52 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { Search as FoundationSearch } from '@microsoft/fast-foundation';
+import { searchTemplate as template } from './search.template';
+import { searchStyles as styles } from './search.styles';
+/**
+ * The Fluent search class
+ * @internal
+ */
+export class Search extends FoundationSearch {
+    constructor() {
+        super(...arguments);
+        /**
+         * The appearance of the element.
+         *
+         * @public
+         * @remarks
+         * HTML Attribute: appearance
+         */
+        this.appearance = 'outline';
+    }
+}
+__decorate([
+    attr
+], Search.prototype, "appearance", void 0);
+/**
+ * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search},
+ * {@link @microsoft/fast-foundation#searchTemplate}
+ *
+ *
+ * @public
+ * @remarks
+ * HTML Element: \<fluent-search\>
+ *
+ * {@link https://developer.mozilla.org/en-US/docs/Web/API/ShadowRoot/delegatesFocus | delegatesFocus}
+ */
+export const fluentSearch = Search.compose({
+    baseName: 'search',
+    baseClass: FoundationSearch,
+    template,
+    styles,
+    start: `<svg width="20" height="20" xmlns="http://www.w3.org/2000/svg%22%3E"><path d="M8.5 3a5.5 5.5 0 0 1 4.23 9.02l4.12 4.13a.5.5 0 0 1-.63.76l-.07-.06-4.13-4.12A5.5 5.5 0 1 1 8.5 3Zm0 1a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9Z"/></svg>`,
+    shadowOptions: {
+        delegatesFocus: true,
+    },
+});
+export * from './search.template';
+/**
+ * Styles for Search
+ * @public
+ */
+export const searchStyles = styles;

package/dist/esm/search/search.stories.js

@@ -0,0 +1,83 @@
+import { fluentSearch } from './index';
+export default {
+    title: 'Components/Search',
+    component: fluentSearch,
+    argTypes: {
+        appearance: {
+            options: ['filled', 'outline'],
+            defaultValue: 'outline',
+            control: { type: 'radio' },
+        },
+        autoFocus: {
+            description: 'Automatically focuses the control',
+            control: { type: 'boolean' },
+        },
+        disabled: {
+            description: 'The search box should be submitted with the form but should not be editable',
+            control: { type: 'boolean' },
+        },
+        list: {
+            control: { type: 'text' },
+        },
+        maxlength: {
+            control: { type: 'number' },
+        },
+        name: {
+            control: { type: 'text' },
+        },
+        minlength: {
+            control: { type: 'number' },
+        },
+        pattern: {
+            description: `A regular expression the input's contents must match in order to be valid`,
+            control: { type: 'text' },
+        },
+        placeholder: {
+            description: 'An exemplar value to display in the input field whenever it is empty',
+            defaultValue: 'Placeholder',
+            control: { type: 'text' },
+        },
+        readonly: {
+            control: { type: 'boolean' },
+        },
+        required: {
+            control: { type: 'boolean' },
+        },
+        spellcheck: {
+            control: { type: 'boolean' },
+        },
+    },
+};
+const SearchTemplate = ({ appearance, autoFocus, disabled, list, maxlength, name, minlength, pattern, placeholder, readonly, required, size, spellcheck, }) => `<fluent-search
+    ${appearance ? `appearance="${appearance}"` : ''}
+    ${autoFocus ? 'autofocus' : ''}
+    ${disabled ? 'disabled' : ''}
+    ${list ? `list="${list}"` : ''}
+    ${maxlength ? `maxlength="${maxlength}"` : ''}
+    ${name ? `name="${name}"` : ''}
+    ${minlength ? `minlength="${minlength}"` : ''}
+    ${pattern ? `pattern="${pattern}"` : ''}
+    ${placeholder ? `placeholder="${placeholder}"` : ''}
+    ${readonly ? 'readonly' : ''}
+    ${required ? 'required' : ''}
+    ${spellcheck ? `spellcheck="${spellcheck}"` : ''}
+    ${size ? `size="${size}"` : ''}
+  ></fluent-search>`;
+export const Search = SearchTemplate.bind({});
+Search.args = {
+    placeholder: 'placeholder',
+    autoFocus: false,
+    disabled: false,
+    readonly: false,
+    required: false,
+};
+const example = `
+<fluent-search appearance="outline"></fluent-search>
+`;
+Search.parameters = {
+    docs: {
+        source: {
+            code: example,
+        },
+    },
+};

package/dist/esm/search/search.styles.js

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { Button, DesignToken, display, forcedColorsStylesheetBehavior, } from '@microsoft/fast-foundation';
+import { heightNumber, inputFilledForcedColorStyles, inputFilledStyles, inputForcedColorStyles, inputStateStyles, inputStyles, } from '../styles';
+import { appearanceBehavior } from '../utilities/behaviors';
+import { bodyFont, controlCornerRadius, density, designUnit, neutralFillInputRecipe, neutralFillStealthRecipe, neutralForegroundRest, typeRampBaseFontSize, typeRampBaseLineHeight } from '../design-tokens';
+const clearButtonHover = DesignToken.create("clear-button-hover").withDefault((target) => {
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).hover;
+});
+const clearButtonActive = DesignToken.create("clear-button-active").withDefault((target) => {
+    const buttonRecipe = neutralFillStealthRecipe.getValueFor(target);
+    const inputRecipe = neutralFillInputRecipe.getValueFor(target);
+    return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active;
+});
+export const searchFilledStyles = (context, definition) => css `
+    ${inputFilledStyles(context, definition, '.root')}
+  `.withBehaviors(forcedColorsStylesheetBehavior(css `
+        ${inputFilledForcedColorStyles(context, definition, '.root')}
+      `));
+export const searchStyles = (context, definition) => css `
+    ${display('inline-block')}
+    ${inputStyles(context, definition, '.root')}
+    ${inputStateStyles(context, definition, '.root')}
+    .root {
+      display: flex;
+      flex-direction: row;
+    }
+    .control {
+      -webkit-appearance: none;
+      color: inherit;
+      background: transparent;
+      border: 0;
+      height: calc(100% - 4px);
+      margin-top: auto;
+      margin-bottom: auto;
+      padding: 0 calc(${designUnit} * 2px + 1px);
+      font-family: inherit;
+      font-size: inherit;
+      line-height: inherit;
+    }
+    .clear-button {
+      display: inline-flex;
+      align-items: center;
+      margin: 1px;
+      height: calc(100% - 2px);
+      opacity: 0;
+      background: transparent;
+      color: ${neutralForegroundRest};
+      fill: currentcolor;
+      border: none;
+      border-radius: calc(${controlCornerRadius} * 1px);
+      min-width: calc(${heightNumber} * 1px);
+      font-size: ${typeRampBaseFontSize};
+      line-height: ${typeRampBaseLineHeight};
+      outline: none;
+      font-family: ${bodyFont};
+      padding: 0 calc((10 + (${designUnit} * 2 * ${density})) * 1px);
+    }
+    .clear-button:hover {
+      background: ${clearButtonHover};
+    }
+    .clear-button:active {
+      background: ${clearButtonActive};
+    }
+    :host(:hover:not([disabled], [readOnly])) .clear-button,
+    :host(:active:not([disabled], [readOnly])) .clear-button,
+    :host(:focus-within:not([disabled], [readOnly])) .clear-button {
+        opacity: 1;
+    }
+    :host(:hover:not([disabled], [readOnly])) .clear-button__hidden,
+    :host(:active:not([disabled], [readOnly])) .clear-button__hidden,
+    :host(:focus-within:not([disabled], [readOnly])) .clear-button__hidden {
+        opacity: 0;
+    }
+    .control::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+    }
+    .input-wrapper {
+      display: flex;
+      position: relative;
+      width: 100%;
+    }
+    .start,
+    .end {
+      display: flex;
+      margin: 1px;
+      align-items: center;
+    }
+    .start {
+      display: flex;
+      margin-inline-start: 11px;
+    }
+    ::slotted([slot="end"]) {
+      height: 100%
+    }
+    .clear-button__hidden {
+      opacity: 0;
+    }
+    .end {
+        margin-inline-end: 11px;
+    }
+    ::slotted(${context.tagFor(Button)}) {
+      margin-inline-end: 1px;
+    }
+  `.withBehaviors(appearanceBehavior('filled', searchFilledStyles(context, definition)), forcedColorsStylesheetBehavior(css `
+        ${inputForcedColorStyles(context, definition, '.root')}
+      `));

package/dist/esm/search/search.template.js

@@ -0,0 +1,82 @@
+import { html, ref, slotted } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate, whitespaceFilter, } from '@microsoft/fast-foundation';
+/**
+ * @public
+ */
+export const searchTemplate = (context, definition) => html `
+  <template
+    class="
+            ${x => (x.readOnly ? 'readonly' : '')}
+        "
+  >
+    <label
+      part="label"
+      for="control"
+      class="${x => (x.defaultSlottedNodes && x.defaultSlottedNodes.length ? 'label' : 'label label__hidden')}"
+    >
+      <slot ${slotted({ property: 'defaultSlottedNodes', filter: whitespaceFilter })}></slot>
+    </label>
+    <div class="root" part="root" ${ref('root')}>
+      ${startSlotTemplate(context, definition)}
+      <div class="input-wrapper" part="input-wrapper">
+        <input
+          class="control"
+          part="control"
+          id="control"
+          @input="${x => x.handleTextInput()}"
+          @change="${x => x.handleChange()}"
+          ?autofocus="${x => x.autofocus}"
+          ?disabled="${x => x.disabled}"
+          list="${x => x.list}"
+          maxlength="${x => x.maxlength}"
+          minlength="${x => x.minlength}"
+          pattern="${x => x.pattern}"
+          placeholder="${x => x.placeholder}"
+          ?readonly="${x => x.readOnly}"
+          ?required="${x => x.required}"
+          size="${x => x.size}"
+          ?spellcheck="${x => x.spellcheck}"
+          :value="${x => x.value}"
+          type="search"
+          aria-atomic="${x => x.ariaAtomic}"
+          aria-busy="${x => x.ariaBusy}"
+          aria-controls="${x => x.ariaControls}"
+          aria-current="${x => x.ariaCurrent}"
+          aria-describedby="${x => x.ariaDescribedby}"
+          aria-details="${x => x.ariaDetails}"
+          aria-disabled="${x => x.ariaDisabled}"
+          aria-errormessage="${x => x.ariaErrormessage}"
+          aria-flowto="${x => x.ariaFlowto}"
+          aria-haspopup="${x => x.ariaHaspopup}"
+          aria-hidden="${x => x.ariaHidden}"
+          aria-invalid="${x => x.ariaInvalid}"
+          aria-keyshortcuts="${x => x.ariaKeyshortcuts}"
+          aria-label="${x => x.ariaLabel}"
+          aria-labelledby="${x => x.ariaLabelledby}"
+          aria-live="${x => x.ariaLive}"
+          aria-owns="${x => x.ariaOwns}"
+          aria-relevant="${x => x.ariaRelevant}"
+          aria-roledescription="${x => x.ariaRoledescription}"
+          ${ref('control')}
+        />
+        <slot name="clear-button">
+          <button
+            class="clear-button ${x => (x.value ? '' : 'clear-button__hidden')}"
+            part="clear-button"
+            tabindex="-1"
+            @click=${x => x.handleClearInput()}
+          >
+            <slot name="clear-glyph">
+              <svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg">
+                <path
+                  d="m2.09 2.22.06-.07a.5.5 0 0 1 .63-.06l.07.06L6 5.29l3.15-3.14a.5.5 0 1 1 .7.7L6.71 6l3.14 3.15c.18.17.2.44.06.63l-.06.07a.5.5 0 0 1-.63.06l-.07-.06L6 6.71 2.85 9.85a.5.5 0 0 1-.7-.7L5.29 6 2.15 2.85a.5.5 0 0 1-.06-.63l.06-.07-.06.07Z"
+                />
+              </svg>
+            </slot>
+          </button>
+        </slot>
+      </div>
+      ${endSlotTemplate(context, definition)}
+    </div>
+  </template>
+`;

package/dist/esm/search/search.vscode.definition.json

@@ -0,0 +1,145 @@
+{
+    "version": 1.1,
+    "tags": [
+        {
+            "name": "fluent-search",
+            "title": "Search",
+            "description": "The Fluent UI search element",
+            "attributes": [
+                {
+                    "name": "value",
+                    "title": "Value",
+                    "description": "The HTML value attribute of the search",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "appearance",
+                    "title": "Appearance",
+                    "description": "The field's visual treatment",
+                    "default": "outline",
+                    "values": [{ "name": "outline" }, { "name": "filled" }],
+                    "type": "string",
+                    "required": false
+                },
+                {
+                    "name": "autofocus",
+                    "title": "Autofocus",
+                    "description": "Determines if the element should receive document focus on page load",
+                    "required": false,
+                    "type": "boolean",
+                    "default": false
+                },
+                {
+                    "name": "placeholder",
+                    "title": "Placeholder",
+                    "description": "Sets the placeholder value of the element, generally used to provide a hint to the user",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "list",
+                    "title": "List ID",
+                    "description": "Allows associating a datalist to the component",
+                    "required": false,
+                    "type": "string",
+                    "default": ""
+                },
+                {
+                    "name": "maxlength",
+                    "title": "Maximum length",
+                    "description": "The maximum number of characters a user can enter",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "minlength",
+                    "title": "Minimum length",
+                    "description": "The minimum number of characters a user can enter",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "pattern",
+                    "title": "Validation pattern",
+                    "description": "A regular expression that the value must match to pass validation",
+                    "required": false,
+                    "type": "string"
+                },
+                {
+                    "name": "size",
+                    "title": "Size",
+                    "description": "Sets the width of the element to a specified number of characters",
+                    "required": false,
+                    "type": "number"
+                },
+                {
+                    "name": "spellcheck",
+                    "title": "Spellcheck",
+                    "description": "Controls whether or not to enable spell checking for the input field, or if the default spell checking configuration should be used",
+                    "required": false,
+                    "type": "boolean"
+                },
+                {
+                    "name": "name",
+                    "title": "Name",
+                    "description": "This element's value will be surfaced during form submission under the provided name",
+                    "type": "string",
+                    "default": "",
+                    "required": false
+                },
+                {
+                    "name": "required",
+                    "title": "Required",
+                    "description": "Require the field to be completed prior to form submission",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                },
+                {
+                    "name": "disabled",
+                    "title": "Disabled",
+                    "description": "Sets the disabled state of the field",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                },
+                {
+                    "name": "readonly",
+                    "title": "Readonly",
+                    "description": "When true, the control will be immutable by user interaction",
+                    "type": "boolean",
+                    "default": false,
+                    "required": false
+                }
+            ],
+            "slots": [
+                {
+                    "name": "",
+                    "title": "Default slot",
+                    "description": "The content of the field represents its visual label"
+                },
+                {
+                    "name": "start",
+                    "title": "Start slot",
+                    "description": "Contents of the start slot are positioned before the input area"
+                },
+                {
+                    "name": "end",
+                    "title": "End slot",
+                    "description": "Contents of the end slot are positioned after the input area"
+                },
+                {
+                    "name": "clear-button",
+                    "title": "Clear button slot",
+                    "description": "Contents of the clear button slot are positioned after the content and is what clears the value when a value is set"
+                },
+                {
+                    "name": "clear-glyph",
+                    "title": "Clear glyph slot",
+                    "description": "Contents of the clear button"
+                }
+            ]
+        }
+    ]
+}

package/dist/esm/tabs/tabs.stories.js

@@ -21,9 +21,63 @@ const TabsTemplate = ({ activeId, activeIndicator, orientation }) => `
   <fluent-tab id="TabOne">Tab one</fluent-tab>
   <fluent-tab id="TabTwo">Tab two</fluent-tab>
   <fluent-tab id="TabThree">Tab three</fluent-tab>
-  <fluent-tab-panel> Tab one content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab one content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+    Tab one content. This is for testing.
+    <br />
+  </fluent-tab-panel>
   <fluent-tab-panel> Tab two content. This is for testing. </fluent-tab-panel>
-  <fluent-tab-panel> Tab three content. This is for testing. </fluent-tab-panel>
+  <fluent-tab-panel>
+    Tab three content. This is for testing. Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+    Tab three content. This is for testing.
+    <br />
+  </fluent-tab-panel>
 </fluent-tabs>`;
 export const Tabs = TabsTemplate.bind({});
 Tabs.args = {

package/dist/esm/tabs/tabs.styles.js

@@ -63,6 +63,7 @@ export const tabsStyles = (context, definition) => css `
         position: relative;
         width: max-content;
         justify-self: end;
+        align-self: flex-start;
         width: 100%;
       }