Adds TextInput as a new web component #27348

brianchristopherbrady · 2023-03-27T21:03:06Z

TextInput

An implementation of a text input as a form-connected web-component.

Design Spec

Engineering Spec

Fluent WC3 Text Input extends from the FAST Text Field and is intended to be as close to the Fluent UI React 9 Input implementation as possible. However, due to the nature of web components there will not be 100% parity between the two.

Class: `TextInput`

Component Name

<fluent-text-input>

Variables

Name	Description	Type
`TextInputSize`	Size variations for text input	`{ small: "small", medium: "medium", large: "large" }`
`TextInputAppearance`	Appearance variations for text input	`{ outline: "outline", underline: "underline", filledLighter: "filled-lighter", filledDarker: "filled-darker" }`
`TextInputType`	Text input types	`{ email: "email", password: "password", tel: "tel", text: "text", url: "url" }`

Fields

Name	Type	Default	Description
`appearance`	`TextInputAppearance`	`outline`	Sets appearance of text input.
`autofocus`	`boolean`	`false`	Indicates element should get focus after the page finishes loading..
`disabled`	`boolean`	`false`	Disables text input
`list`	`string`		Allows associating a `datalist` to an element by `id`
`maxlength`	`number`		The maximum number of characters a user can enter
`minlength`	`number`		The minimum number of characters a user can enter
`name`	`string`		The name of the control
`pattern`	`string`		A regular expression the text input's contents must match in order to be valid
`placeholder`	`string`		An exemplar value to display in the text input field whenever it is empty
`readonly`	`boolean`	`false`	The text input should be submitted with the form but should not be editable
`required`	`boolean`	`false`	Sets the text input as required
`size`	`InputSize`	`medium`	Sets the size of the text input
`spellcheck`	`boolean`	`false`	Controls whether or not to enable spell checking for the text input, or if the default spell checking configuration should be used
`type`	`TextInputType`	`TextInputType.text`	Sets the size of the text input
`current-value`			Stores the current value of an input element. link: `current-value` RFC

Methods

Name	Privacy	Description
`select`	public	Selects all the text in the text field
`validate`	public	{@inheritdoc (FormAssociated:interface).validate}

Events

Name	Type	Description	Inherited From
`change`		Fires a custom change event

Attributes

Name	Field
`appearance`	appearance
`autofocus`	autofocus
`list`	list
`maxlength`	maxlength
`minlength`	minlength
`pattern`	pattern
`placeholder`	placeholder
`readonly`	readonly
`size`	size
`spellcheck`	spellcheck
`type`	type

Slots

Name	Description
`start`	used to place content at the start of the text input within the input border
`end`	used to place content at the end of the text input within the input border
	The default slot for text input content

Additional Styling Variations

For performance considerations, we have avoided the addition of explicit attributes for appearance variations that modify only one CSS property. Instead, opting to provide guidance for users to apply their own CSS to achieve these appearance variations.

Block v.s Inline

The Fluent UI TextInput component offers two appearance variations for the display property - block (default) and inline. To achieve the inline variation, users should apply their own custom CSS.

/* all instances */

fluent-text-input {
  display: inline-flex;
  align-items: center;
}

/* class instances */

fluent-text-input.inline {
  display: inline-flex;
  align-items: center;
}

Accessibility

W3C Text Input Spec

WAI-ARIA Roles, States, and Properties

This component supports ARIA attributes that inherit from the ARIA Global States and Properties.

Preparation

Fluent Web Component v3 v.s Fluent React 9

Component and Slot Mapping

Fluent UI React 9	Fluent Web Components 3
`<Input>`	`<fluent-text-input>`
`contentBefore`	`start`
`contentAfter`	`end`

…erbrady/fluentui-fork into web-components-v3

fabricteam · 2023-03-27T21:10:54Z

📊 Bundle size report

_{🤖 This report was generated against 94f4ec8598a9e34e3ab799f4f5899d5b8dddb645}

size-auditor · 2023-03-27T21:16:25Z

Asset size changes

Size Auditor did not detect a change in bundle size for any component!

Baseline commit: 94f4ec8598a9e34e3ab799f4f5899d5b8dddb645 (build)

codesandbox-ci · 2023-03-27T21:19:55Z

This pull request is automatically built and testable in CodeSandbox.

To see build info of the built libraries, click here or the icon next to each commit SHA.

Latest deployment of this branch, based on commit e01a615:

Sandbox	Source
@fluentui/react 8 starter	Configuration
@fluentui/react-components 9 starter	Configuration

…christopherbrady/fluentui-fork into user/brianbrady/text-input

miroslavstastny · 2023-05-22T16:44:26Z

packages/web-components/src/text-input/text-input.stories.ts

+
+export const Required = renderComponent(html<TextInputStoryArgs>`
+  <fluent-text-input required>
+    <span slot="end">${Person20Regular}${Person20Regular}</span>


Any reason for having two icons here?

miroslavstastny · 2023-05-22T16:45:16Z

packages/web-components/src/text-input/text-input.stories.ts

+  </div>
+`);
+
+export const Inline = renderComponent(html<TextInputStoryArgs>`


Storybook refuses to show the source code for this story :/

Looks like it just needed to be wrapped in a element. Working now :)

miroslavstastny · 2023-05-22T16:46:39Z

packages/web-components/src/text-input/text-input.options.ts

+  outline: 'outline',
+  underline: 'underline',
+  filledLighter: 'filled-lighter',
+  filledLighterShadow: 'filled-lighter--shadow',


filled-darker-shadow and filled-lighter-shadow are deprecated in FUIR9 and not mentioned in the FUIWC3 component spec. I think we should remove them.

miroslavstastny · 2023-05-22T16:47:50Z

packages/web-components/src/text-input/text-input.stories.ts

+    <span slot="end">${Person20Regular}</span>
+    <fluent-label>Inline Input</fluent-label>
+  </fluent-text-input>
+  <p


Have you considered using <fluent-text> in the example?

miroslavstastny · 2023-05-22T17:01:15Z

packages/web-components/package.json

@@ -116,6 +116,10 @@
      "types": "./dist/esm/tab-panel/define.d.ts",
      "default": "./dist/esm/tab-panel/define.js"
    },
+    "./text-input": {


nit: This should alphabetically go after text

change/@fluentui-web-components-ec003fd2-a453-4e83-b620-9ec9f3ddffa0.json

miroslavstastny · 2023-05-22T17:01:52Z

packages/web-components/src/index.ts

@@ -21,6 +21,7 @@ export * from './switch/index.js';
 export * from './tabs/index.js';
 export * from './tab/index.js';
 export * from './tab-panel/index.js';
+export * from './text-input/index.js';


bellow text

miroslavstastny · 2023-05-22T17:06:58Z

packages/web-components/src/text-input/text-input.ts

+   * HTML Attribute: control-size
+   */
+  @attr({ attribute: 'control-size' })
+  public controlSize: TextInputControlSize = TextInputControlSize.medium;


I think the agreement is not to assign default value to the attributes unless completely necessary to reduce DOM size. Styles should be authored to honor the default values without explicitly setting them in javascript.

…ddffa0.json Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

miroslavstastny

lgtm

* radio init * styles radio * reverts branch * input spec init * cleans up spec * formatting * updates component name to text input * updates component name in spec * text input init * adds text input options * styles text input * updates text input styles * adds input size attribute and styles * updates text input storybook * text input: adds properties to class * text-input: re-exports TextFieldType as TextInputType * text input: fixes export names * text input: updates underline styles * text-input: exports text-input from package.json * removes dead code * text-input: removes default attr values * text-input: updates icon sizes * text-input: updates block vs inline implimentation * text-input: updates docs * text-input: adds styling support for icons and text passed through start/end slots * text-input: updates border styles * input: updates storybook content * updates README * text-input: adds filled non shadow variants * text-input: modifies storybook examples * text-input: removes dead import * addresses PR feedback * text input: updates styles * text input: yarn change * text input: updates README and styles * text input: shorthands css property * textinput: fixes ts errors * textinput: updates attribute name * textinput: uses fluent-label in stories * textinput: updates control size type name * textinput: updates storybook * textinput: updates type * textinput: updates story styles * Update change/@fluentui-web-components-ec003fd2-a453-4e83-b620-9ec9f3ddffa0.json Co-authored-by: Miroslav Stastny <mistastn@microsoft.com> * text-input: addresses feedback * text-input: alphabetize exports, removes setting default attr value --------- Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

brianchristopherbrady and others added 19 commits March 3, 2023 10:45

radio init

7f9af9e

styles radio

70c55e0

Merge branch 'microsoft:web-components-v3' into web-components-v3

f3cb7f4

reverts branch

a72d10f

Merge branch 'web-components-v3' of https://github.com/brianchristoph…

2941fa7

…erbrady/fluentui-fork into web-components-v3

Merge branch 'microsoft:web-components-v3' into web-components-v3

9b350fc

input spec init

2cf59ce

cleans up spec

79b6bff

formatting

5558b93

updates component name to text input

3c045c3

updates component name in spec

2370967

text input init

0040fbd

adds text input options

f36d8c6

styles text input

9be3a2e

updates text input styles

630632f

adds input size attribute and styles

5786394

updates text input storybook

0d9fa2e

text input: adds properties to class

c04acf4

text-input: re-exports TextFieldType as TextInputType

8afab54

brianchristopherbrady requested review from procload, miroslavstastny, chrisdholt and eljefe223 March 27, 2023 21:03

brianchristopherbrady requested a review from a team as a code owner March 27, 2023 21:03

brianchristopherbrady self-assigned this Mar 27, 2023

msft-fluent-ui-bot added the web-components label Mar 27, 2023

text input: fixes export names

7a001f5

brianchristopherbrady and others added 7 commits May 5, 2023 14:28

Merge branch 'web-components-v3' into user/brianbrady/text-input

6b8eb42

textinput: updates control size type name

2154362

Merge branch 'user/brianbrady/text-input' of https://github.com/brian…

026e324

…christopherbrady/fluentui-fork into user/brianbrady/text-input

textinput: updates storybook

c3c2313

textinput: updates type

5f8be41

textinput: updates story styles

1f87e19

Merge branch 'web-components-v3' into user/brianbrady/text-input

f65335f

miroslavstastny reviewed May 22, 2023

View reviewed changes

brianchristopherbrady and others added 3 commits May 22, 2023 12:01

Update change/@fluentui-web-components-ec003fd2-a453-4e83-b620-9ec9f3…

6f9584f

…ddffa0.json Co-authored-by: Miroslav Stastny <mistastn@microsoft.com>

text-input: addresses feedback

cb1a2d2

text-input: alphabetize exports, removes setting default attr value

bf6d213

brianchristopherbrady requested a review from miroslavstastny May 22, 2023 21:45

halerankin approved these changes May 31, 2023

View reviewed changes

Merge branch 'web-components-v3' into user/brianbrady/text-input

e01a615

miroslavstastny approved these changes Jun 5, 2023

View reviewed changes

chrisdholt approved these changes Jun 6, 2023

View reviewed changes

brianchristopherbrady merged commit ac7f17e into microsoft:web-components-v3 Jun 6, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Adds TextInput as a new web component #27348

Adds TextInput as a new web component #27348

brianchristopherbrady commented Mar 27, 2023 •

edited

Loading

fabricteam commented Mar 27, 2023 •

edited

Loading

size-auditor bot commented Mar 27, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 27, 2023 •

edited

Loading

miroslavstastny May 22, 2023

miroslavstastny May 22, 2023

brianchristopherbrady May 22, 2023

miroslavstastny May 22, 2023

miroslavstastny May 22, 2023

miroslavstastny May 22, 2023

miroslavstastny May 22, 2023

miroslavstastny May 22, 2023

miroslavstastny left a comment

Adds TextInput as a new web component #27348

Adds TextInput as a new web component #27348

Conversation

brianchristopherbrady commented Mar 27, 2023 • edited Loading

TextInput

Design Spec

Engineering Spec

Class: TextInput

Component Name

Variables

Fields

Methods

Events

Attributes

Slots

Additional Styling Variations

Accessibility

WAI-ARIA Roles, States, and Properties

Preparation

Fluent Web Component v3 v.s Fluent React 9

fabricteam commented Mar 27, 2023 • edited Loading

📊 Bundle size report

size-auditor bot commented Mar 27, 2023 • edited Loading

Asset size changes

codesandbox-ci bot commented Mar 27, 2023 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

miroslavstastny left a comment

Choose a reason for hiding this comment

brianchristopherbrady commented Mar 27, 2023 •

edited

Loading

Class: `TextInput`

fabricteam commented Mar 27, 2023 •

edited

Loading

size-auditor bot commented Mar 27, 2023 •

edited

Loading

codesandbox-ci bot commented Mar 27, 2023 •

edited

Loading