(web-components) Use `ElementInternals` for TextInput elements

microsoft / fluentui

Fluent UI web represents a collection of utilities, React components, and web components for building web applications.

https://react.fluentui.dev

Other

17.87k stars 2.66k forks source link

(web-components) Use `ElementInternals` for TextInput elements #31201

Closed radium-v closed 1 week ago

radium-v commented 1 month ago

Previous Behavior

Currently, form-associated custom elements use the FormAssociated class mixin. This mixin is heavy and duplicative, being copied wholesale for every component which utilizes it. While FormAssociated includes minimal support for ElementInternals, the implementation isn't fully baked.

New Behavior

Improvements:

Switches the <fluent-text-input> custom element to use ElementInternals by default. An optional polyfill may be added in the near future, as more components transition to use ElementInternals.
Adds additional tests for the TextInput component.
Expands the properties and attributes for the Text Input storybook fixtures.

codesandbox-ci[bot] commented 1 month ago

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.

chrisdholt commented 1 month ago

Should we pull the label from within the control with this change?

chrisdholt commented 2 weeks ago

This will need to be pointed to master as we've merged the v3 branch :)

fabricteam commented 2 weeks ago

📊 Bundle size report

✅ No changes found

radium-v commented 1 week ago

Should we pull the label from within the control with this change?

@chrisdholt due to cross-root ARIA limitations, the label has to be part of the component.

I gave a custom contenteditable approach a shot (https://github.com/radium-v/fluentui/tree/users/radium-v/web-components-v3-text-input-contenteditable), but it would limit our ability to use different types like email and url without specific implementations. I don't trust that any custom alternative to <input type=password> would be as secure as the native control.