From ebe29c6b802a65fd6a568d511e067ec4a272f817 Mon Sep 17 00:00:00 2001 From: Jeff Smith <37851214+eljefe223@users.noreply.github.com> Date: Thu, 6 Jan 2022 12:52:06 -0800 Subject: [PATCH] feat: add `search` web component (#21177) * feat: add search web component --- ...-30667c77-9cd4-4069-bc05-51c126377d24.json | 7 + packages/web-components/docs/api-report.md | 43 +++-- packages/web-components/package.json | 2 +- .../src/component-definitions.js | 2 + .../web-components/src/custom-elements.ts | 3 + packages/web-components/src/index.ts | 1 + packages/web-components/src/listbox/index.ts | 10 +- .../src/search/fixtures/search.html | 109 +++++++++++++ packages/web-components/src/search/index.ts | 56 +++++++ .../src/search/search.stories.ts | 104 +++++++++++++ .../src/search/search.styles.ts | 147 ++++++++++++++++++ .../src/search/search.template.ts | 94 +++++++++++ .../src/search/search.vscode.definition.json | 145 +++++++++++++++++ yarn.lock | 33 +--- 14 files changed, 711 insertions(+), 45 deletions(-) create mode 100644 change/@fluentui-web-components-30667c77-9cd4-4069-bc05-51c126377d24.json create mode 100644 packages/web-components/src/search/fixtures/search.html create mode 100644 packages/web-components/src/search/index.ts create mode 100644 packages/web-components/src/search/search.stories.ts create mode 100644 packages/web-components/src/search/search.styles.ts create mode 100644 packages/web-components/src/search/search.template.ts create mode 100644 packages/web-components/src/search/search.vscode.definition.json diff --git a/change/@fluentui-web-components-30667c77-9cd4-4069-bc05-51c126377d24.json b/change/@fluentui-web-components-30667c77-9cd4-4069-bc05-51c126377d24.json new file mode 100644 index 0000000000000..584c8c8e6dac8 --- /dev/null +++ b/change/@fluentui-web-components-30667c77-9cd4-4069-bc05-51c126377d24.json @@ -0,0 +1,7 @@ +{ + "type": "minor", + "comment": "feat: add search web component", + "packageName": "@fluentui/web-components", + "email": "jes@microsoft.com", + "dependentChangeType": "patch" +} diff --git a/packages/web-components/docs/api-report.md b/packages/web-components/docs/api-report.md index 0f72ce23ac05d..9d22e64e51369 100644 --- a/packages/web-components/docs/api-report.md +++ b/packages/web-components/docs/api-report.md @@ -43,7 +43,7 @@ import { FoundationElementDefinition } from '@microsoft/fast-foundation'; import { FoundationElementRegistry } from '@microsoft/fast-foundation'; import { HorizontalScroll as HorizontalScroll_2 } from '@microsoft/fast-foundation'; import { HorizontalScrollOptions } from '@microsoft/fast-foundation'; -import { Listbox } from '@microsoft/fast-foundation'; +import { Listbox as Listbox_2 } from '@microsoft/fast-foundation'; import { ListboxOption } from '@microsoft/fast-foundation'; import { Menu as Menu_2 } from '@microsoft/fast-foundation'; import { MenuItem } from '@microsoft/fast-foundation'; @@ -56,6 +56,8 @@ import { ProgressRingOptions } from '@microsoft/fast-foundation'; import { Radio } from '@microsoft/fast-foundation'; import { RadioGroup } from '@microsoft/fast-foundation'; import { RadioOptions } from '@microsoft/fast-foundation'; +import { Search as Search_2 } from '@microsoft/fast-foundation'; +import { SearchOptions } from '@microsoft/fast-foundation'; import { Select as Select_2 } from '@microsoft/fast-foundation'; import { SelectOptions } from '@microsoft/fast-foundation'; import { Skeleton } from '@microsoft/fast-foundation'; @@ -211,6 +213,7 @@ export const allComponents: { fluentProgressRing: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; + fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; fluentSkeleton: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; fluentSlider: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; @@ -649,6 +652,9 @@ export const fluentRadio: (overrideDefinition?: OverrideFoundationElementDefinit // @public export const fluentRadioGroup: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry; +// @public +export const fluentSearch: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; + // @public export const fluentSelect: (overrideDefinition?: OverrideFoundationElementDefinition | undefined) => FoundationElementRegistry>; @@ -818,7 +824,9 @@ export const layerCornerRadius: CSSDesignToken; // @internal (undocumented) export const LightweightButtonStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition, interactivitySelector?: string, nonInteractivitySelector?: string) => ElementStyles; -export { Listbox } +// @public (undocumented) +export class Listbox extends Listbox_2 { +} // @public export const listboxStyles: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementStyles; @@ -1413,6 +1421,23 @@ export interface Recipe { evaluate(element: HTMLElement, reference?: Swatch): T; } +// Warning: (ae-internal-missing-underscore) The name "Search" should be prefixed with an underscore because the declaration is marked as @internal +// +// @internal +export class Search extends Search_2 { + // @public + appearance: SearchAppearance; +} + +// @public +export type SearchAppearance = 'filled' | 'outline'; + +// @public +export const searchStyles: (context: any, definition: any) => ElementStyles; + +// @public (undocumented) +export const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate; + // Warning: (ae-internal-missing-underscore) The name "Select" should be prefixed with an underscore because the declaration is marked as @internal // // @internal @@ -1628,13 +1653,13 @@ export const typeRampPlus6LineHeight: CSSDesignToken; // // dist/dts/color/palette.d.ts:70:5 - (ae-forgotten-export) The symbol "create" needs to be exported by the entry point index.d.ts // dist/dts/color/palette.d.ts:71:5 - (ae-forgotten-export) The symbol "from" needs to be exported by the entry point index.d.ts -// dist/dts/custom-elements.d.ts:50:5 - (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal -// dist/dts/custom-elements.d.ts:52:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal -// dist/dts/custom-elements.d.ts:55:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal -// dist/dts/custom-elements.d.ts:93:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal -// dist/dts/custom-elements.d.ts:94:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal -// dist/dts/custom-elements.d.ts:95:5 - (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal -// dist/dts/custom-elements.d.ts:96:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal +// dist/dts/custom-elements.d.ts:51:5 - (ae-incompatible-release-tags) The symbol "fluentAnchor" is marked as @public, but its signature references "Anchor" which is marked as @internal +// dist/dts/custom-elements.d.ts:53:5 - (ae-incompatible-release-tags) The symbol "fluentBadge" is marked as @public, but its signature references "Badge" which is marked as @internal +// dist/dts/custom-elements.d.ts:56:5 - (ae-incompatible-release-tags) The symbol "fluentButton" is marked as @public, but its signature references "Button" which is marked as @internal +// dist/dts/custom-elements.d.ts:95:5 - (ae-incompatible-release-tags) The symbol "fluentTextArea" is marked as @public, but its signature references "TextArea" which is marked as @internal +// dist/dts/custom-elements.d.ts:96:5 - (ae-incompatible-release-tags) The symbol "fluentTextField" is marked as @public, but its signature references "TextField" which is marked as @internal +// dist/dts/custom-elements.d.ts:97:5 - (ae-incompatible-release-tags) The symbol "fluentToolbar" is marked as @public, but its signature references "Toolbar" which is marked as @internal +// dist/dts/custom-elements.d.ts:98:5 - (ae-incompatible-release-tags) The symbol "fluentTooltip" is marked as @public, but its signature references "Tooltip" which is marked as @internal // (No @packageDocumentation comment for this package) diff --git a/packages/web-components/package.json b/packages/web-components/package.json index d3017f0c50b89..eb29963da657d 100644 --- a/packages/web-components/package.json +++ b/packages/web-components/package.json @@ -88,7 +88,7 @@ "dependencies": { "@microsoft/fast-colors": "^5.1.0", "@microsoft/fast-element": "^1.6.0", - "@microsoft/fast-foundation": "^2.24.0", + "@microsoft/fast-foundation": "^2.27.1", "@microsoft/fast-web-utilities": "^5.0.0", "tslib": "^1.13.0" } diff --git a/packages/web-components/src/component-definitions.js b/packages/web-components/src/component-definitions.js index 5c14e997e7ea7..45c2de5d92a49 100644 --- a/packages/web-components/src/component-definitions.js +++ b/packages/web-components/src/component-definitions.js @@ -54,6 +54,8 @@ import fluentRadioDefinition from './radio/radio.vscode.definition.json'; export { fluentRadioDefinition }; import fluentRadioGroupDefinition from './radio-group/radio-group.vscode.definition.json'; export { fluentRadioGroupDefinition }; +import fluentSearchDefinition from './search/search.vscode.definition.json'; +export { fluentSearchDefinition }; import fluentSelectDefinition from './select/select.vscode.definition.json'; export { fluentSelectDefinition }; import fluentSkeletonDefinition from './skeleton/skeleton.vscode.definition.json'; diff --git a/packages/web-components/src/custom-elements.ts b/packages/web-components/src/custom-elements.ts index 655a6489ccb08..669d5808d2a06 100644 --- a/packages/web-components/src/custom-elements.ts +++ b/packages/web-components/src/custom-elements.ts @@ -27,6 +27,7 @@ import { fluentNumberField } from './number-field/index'; import { fluentProgress, fluentProgressRing } from './progress/index'; import { fluentRadio } from './radio/index'; import { fluentRadioGroup } from './radio-group/index'; +import { fluentSearch } from './search/index'; import { fluentSelect } from './select/index'; import { fluentSkeleton } from './skeleton/index'; import { fluentSlider } from './slider/index'; @@ -70,6 +71,7 @@ export { fluentProgressRing, fluentRadio, fluentRadioGroup, + fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, @@ -120,6 +122,7 @@ export const allComponents = { fluentProgressRing, fluentRadio, fluentRadioGroup, + fluentSearch, fluentSelect, fluentSkeleton, fluentSlider, diff --git a/packages/web-components/src/index.ts b/packages/web-components/src/index.ts index 2364944e7fa92..5a21173b106e1 100644 --- a/packages/web-components/src/index.ts +++ b/packages/web-components/src/index.ts @@ -27,6 +27,7 @@ export * from './number-field/'; export * from './progress/'; export * from './radio/'; export * from './radio-group/'; +export * from './search/'; export * from './select'; export * from './skeleton/'; export * from './slider/'; diff --git a/packages/web-components/src/listbox/index.ts b/packages/web-components/src/listbox/index.ts index f3496a62a5f3e..b6fc34c0a2f1a 100644 --- a/packages/web-components/src/listbox/index.ts +++ b/packages/web-components/src/listbox/index.ts @@ -1,6 +1,8 @@ -import { Listbox, listboxTemplate as template } from '@microsoft/fast-foundation'; +import { Listbox as FoundationListboxElement, listboxTemplate as template } from '@microsoft/fast-foundation'; import { listboxStyles as styles } from './listbox.styles'; +export class Listbox extends FoundationListboxElement {} + /** * The Fluent listbox Custom Element. Implements, {@link @microsoft/fast-foundation#Listbox} * {@link @microsoft/fast-foundation#listboxTemplate} @@ -22,9 +24,3 @@ export const fluentListbox = Listbox.compose({ * @public */ export const listboxStyles = styles; - -/** - * Listbox base class - * @public - */ -export { Listbox }; diff --git a/packages/web-components/src/search/fixtures/search.html b/packages/web-components/src/search/fixtures/search.html new file mode 100644 index 0000000000000..943d34f3f2560 --- /dev/null +++ b/packages/web-components/src/search/fixtures/search.html @@ -0,0 +1,109 @@ +

Search

+

Default

+ +Label + +

Full Width

+ + +

Placeholder

+ + + +

Required

+ + + +

Disabled

+ +label + + + + + + + + +

Read only

+ +label + + +

Autofocus

+autofocus + + +

With start

+ + + + + + + +

With end

+ + + + + + +

Filled

+
Default
+ +label + +
Placeholder
+ + + +
Required
+ + + +
Disabled
+ +label + + + + + + + + +
Read only
+ +label + + +

Visual vs audio label

+ + Visible label + + + +

Audio label only

+ + + + + +

With aria-label

+ + +
+ +

In a form

+ + +
diff --git a/packages/web-components/src/search/index.ts b/packages/web-components/src/search/index.ts new file mode 100644 index 0000000000000..8eff8a70f889a --- /dev/null +++ b/packages/web-components/src/search/index.ts @@ -0,0 +1,56 @@ +import { attr } from '@microsoft/fast-element'; +import { Search as FoundationSearch, SearchOptions } from '@microsoft/fast-foundation'; +import { searchTemplate as template } from './search.template'; +import { searchStyles as styles } from './search.styles'; + +/** + * Search appearances + * @public + */ +export type SearchAppearance = 'filled' | 'outline'; + +/** + * The Fluent search class + * @internal + */ +export class Search extends FoundationSearch { + /** + * The appearance of the element. + * + * @public + * @remarks + * HTML Attribute: appearance + */ + @attr + public appearance: SearchAppearance = 'outline'; +} + +/** + * The Fluent Search Custom Element. Implements {@link @microsoft/fast-foundation#Search}, + * {@link @microsoft/fast-foundation#searchTemplate} + * + * + * @public + * @remarks + * HTML Element: \ + * + * {@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: ``, + shadowOptions: { + delegatesFocus: true, + }, +}); + +export * from './search.template'; + +/** + * Styles for Search + * @public + */ +export const searchStyles = styles; diff --git a/packages/web-components/src/search/search.stories.ts b/packages/web-components/src/search/search.stories.ts new file mode 100644 index 0000000000000..a00d6a7b577bb --- /dev/null +++ b/packages/web-components/src/search/search.stories.ts @@ -0,0 +1,104 @@ +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, +}) => + ``; + +export const Search = SearchTemplate.bind({}); + +Search.args = { + placeholder: 'placeholder', + autoFocus: false, + disabled: false, + readonly: false, + required: false, +}; + +const example = ` + +`; + +Search.parameters = { + docs: { + source: { + code: example, + }, + }, +}; diff --git a/packages/web-components/src/search/search.styles.ts b/packages/web-components/src/search/search.styles.ts new file mode 100644 index 0000000000000..5ada1aa038903 --- /dev/null +++ b/packages/web-components/src/search/search.styles.ts @@ -0,0 +1,147 @@ +import { css, ElementStyles } from '@microsoft/fast-element'; +import { + Button, + DesignToken, + display, + ElementDefinitionContext, + forcedColorsStylesheetBehavior, + FoundationElementDefinition, +} 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'; +import { Swatch } from '../color/swatch'; + + +const clearButtonHover = DesignToken.create("clear-button-hover").withDefault( + (target: HTMLElement) => { + 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: HTMLElement) => { + const buttonRecipe = neutralFillStealthRecipe.getValueFor(target); + const inputRecipe = neutralFillInputRecipe.getValueFor(target); + return buttonRecipe.evaluate(target, inputRecipe.evaluate(target).focus).active; + } +); + + +export const searchFilledStyles: ( + context: ElementDefinitionContext, + definition: FoundationElementDefinition, +) => ElementStyles = (context: ElementDefinitionContext, definition: FoundationElementDefinition) => + 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')} + `, + ) + ); diff --git a/packages/web-components/src/search/search.template.ts b/packages/web-components/src/search/search.template.ts new file mode 100644 index 0000000000000..8d220d35fc51d --- /dev/null +++ b/packages/web-components/src/search/search.template.ts @@ -0,0 +1,94 @@ +import { html, ref, slotted } from '@microsoft/fast-element'; +import type { ViewTemplate } from '@microsoft/fast-element'; +import { + ElementDefinitionContext, + endSlotTemplate, + Search, + SearchOptions, + startSlotTemplate, + whitespaceFilter, +} from '@microsoft/fast-foundation'; + +/** + * @public + */ +export const searchTemplate: (context: ElementDefinitionContext, definition: SearchOptions) => ViewTemplate = ( + context: ElementDefinitionContext, + definition: SearchOptions, +) => html` + +`; diff --git a/packages/web-components/src/search/search.vscode.definition.json b/packages/web-components/src/search/search.vscode.definition.json new file mode 100644 index 0000000000000..19c2ab1908ea8 --- /dev/null +++ b/packages/web-components/src/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" + } + ] + } + ] +} diff --git a/yarn.lock b/yarn.lock index 7ad96aeedf246..93cdf236a0f63 100644 --- a/yarn.lock +++ b/yarn.lock @@ -2702,14 +2702,13 @@ resolved "https://registry.yarnpkg.com/@microsoft/fast-element/-/fast-element-1.6.2.tgz#414abc9f49fde85e12002e01025c5cc3dddc16ac" integrity sha512-TrFOpe9k9xIK2iLfIG5T2+bavUAWBvAC/KQ/3ecFsK65l9PAZ/j3zlkyLxNrpIksFtUBkfVdV03kwFurZjqzKQ== -"@microsoft/fast-foundation@^2.24.0": - version "2.24.0" - resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.24.0.tgz#ab78f99e91cf96d5d440172eaa9b5eff25e15d51" - integrity sha512-rwUS/QAIaOJ5Uceo42JrgzIUhIAh305g0UZgCc633g4/OOVYa/zjRAG5QBxdrrjYN+U3mJyOWrsY/FJkJpEcQg== +"@microsoft/fast-foundation@^2.27.1": + version "2.27.3" + resolved "https://registry.yarnpkg.com/@microsoft/fast-foundation/-/fast-foundation-2.27.3.tgz#90d6d593f8bfea0ad8e7b36c1cc8d42d4dcee84c" + integrity sha512-Z/x//NaliuQLg3VEErdydMxvRY9YjkC+ZJorYcIANrUKPRUwROwn1yPGr/tr1dYWD2L35Rmv9TYhhd2dYB7shg== dependencies: "@microsoft/fast-element" "^1.6.2" "@microsoft/fast-web-utilities" "^5.0.2" - "@microsoft/tsdoc-config" "^0.13.4" tabbable "^5.2.0" tslib "^1.13.0" @@ -2740,16 +2739,6 @@ "@microsoft/load-themed-styles" "1.10.26" loader-utils "~1.1.0" -"@microsoft/tsdoc-config@^0.13.4": - version "0.13.5" - resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.13.5.tgz#2efeb27f5e4d191b8356aa4eb09e146c0813070c" - integrity sha512-KlnIdTRnPSsU9Coz9wzDAkT8JCLopP3ec1sgsgo7trwE6QLMKRpM4hZi2uzVX897SW49Q4f439auGBcQLnZQfA== - dependencies: - "@microsoft/tsdoc" "0.12.20" - ajv "~6.12.3" - jju "~1.4.0" - resolve "~1.12.0" - "@microsoft/tsdoc-config@~0.15.2": version "0.15.2" resolved "https://registry.yarnpkg.com/@microsoft/tsdoc-config/-/tsdoc-config-0.15.2.tgz#eb353c93f3b62ab74bdc9ab6f4a82bcf80140f14" @@ -2760,11 +2749,6 @@ jju "~1.4.0" resolve "~1.19.0" -"@microsoft/tsdoc@0.12.20": - version "0.12.20" - resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.12.20.tgz#4261285f666ee0c0378f810585dd4ec5bbfa8852" - integrity sha512-/b13m37QZYPV6nCOiqkFyvlQjlTNvAcQpgFZ6ZKIqtStJxNdqVo/frULubxMUMWi6p9Uo5f4BRlguv5ViFcL0A== - "@microsoft/tsdoc@0.13.2": version "0.13.2" resolved "https://registry.yarnpkg.com/@microsoft/tsdoc/-/tsdoc-0.13.2.tgz#3b0efb6d3903bd49edb073696f60e90df08efb26" @@ -6102,7 +6086,7 @@ ajv@^5.0.0, ajv@^5.1.0: fast-json-stable-stringify "^2.0.0" json-schema-traverse "^0.3.0" -ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.5.5, ajv@~6.12.3, ajv@~6.12.6: +ajv@^6.1.0, ajv@^6.10.0, ajv@^6.10.2, ajv@^6.12.2, ajv@^6.12.4, ajv@^6.12.5, ajv@^6.5.5, ajv@~6.12.6: version "6.12.6" resolved "https://registry.yarnpkg.com/ajv/-/ajv-6.12.6.tgz#baf5a62e802b07d977034586f8c3baf5adf26df4" integrity sha512-j3fVLgvTo527anyYyJOGTYJbG+vnnQYvE0m5mmkc1TK+nxAppkCLMIL0aZ4dblVCNoGShhm+kzE4ZUykBoMg4g== @@ -22004,13 +21988,6 @@ resolve@^2.0.0-next.3: is-core-module "^2.2.0" path-parse "^1.0.6" -resolve@~1.12.0: - version "1.12.3" - resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.12.3.tgz#96d5253df8005ce19795c14338f2a013c38a8c15" - integrity sha512-hF6+hAPlxjqHWrw4p1rF3Wztbgxd4AjA5VlUzY5zcTb4J8D3JK4/1RjU48pHz2PJWzGVsLB1VWZkvJzhK2CCOA== - dependencies: - path-parse "^1.0.6" - resolve@~1.17.0: version "1.17.0" resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.17.0.tgz#b25941b54968231cc2d1bb76a79cb7f2c0bf8444"