DO NOT MERGE: FormFieldMixin #5864
Draft
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
* feat(label): init field label mixin feat(label): init field label mixin * feat(textfield): updated textfiled docs to use label mixin * feat(field-label): added mixin to package exports * feat(field-label): added optional slot name for rendering label slot * docs(textfield): implemented label mixin in stories * test(textfield): added test for slotted label * feat(textfield): added default slot observer for label changes * test(textfield): added tests for slotted label * docs(number-field): updated number field docs based on text field label changes * docs(number-field): updated stories with slotted label * docs(color-field): updated docs with slotted label * feat(field-label): updated interface to include optional slot name for label * feat(combobox): added label slot to combobox * docs(combobox): added slotted label to docs * test(combobox): updates tests with slotted label * fix(combobox): fixed combobox field id for label * feat(field-label): added label slot change handler to mixin * feat(combobox): added slot change handlers * feat(field-label): hide field label if not used * feat(textfield): use field label mixin to observe slot * feat(combobox): use field label mixin to observe slot * feat(combobox): added placeholder * fix(textfield): fixed issue with detecting slot content * fix(field-label): fixed issue with slot content detection in text field * test(textfield): removed unneccessary id attribute * fix(fieldl-label): fixed mixin to allow slot naming * feat(combobox): updated combobox, stories and tests for field label mixin * fix(field-label): corrected linting issues * fix(menu): MenuItem focus stealing from input elements on mouseover (#5732) * fix(menu): added check to find focused element within root context * fix(menu): added story * fix(menu): added test * chore(menu): added changeset * fix(menu): added global const for component input pattern * fix(menu): remove delimiter from the regexp constructor * chore: skipped prod and vrt tests on the new story * chore: fix tests helpers * fix: check for cross root boundary * fix: code comments --------- Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-6.local> Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-7.macromedia.com> Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-7.local> * fix(field-label): made field id optional for picker * fix(field-label): made field id optional for picker * feat(picker): added field label mixin to pciker and picker stories * fix(textfiled): fixed element name in warning * fix(combobox): fixed element name in warning * docs(picker): updated stories * feat(picker): added field label mizin to picker without affecting pickerBase * docs(textfield): documented default label slot * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * feat(picker): reverting changes until picker is refactored * docs(textfield): updated docs with label examples * docs(textfield): fixed issue with tabs * test(textfield): updated test warning text to match revised warning text * docs(combobox): added label and placeholder sections to docs * docs(textfield): changed tabs label * docs(number-field): updated docs with a label section * chore(changeset): added changsets * docs(field-label): added field-label-mixin docs * Apply suggestion from @nikkimk * feat(picker): revert changes * feat(picker): revert changes * chore: updated changesets * docs(color-field): added label docs * chore: updated changesets * docs(combobox): fixed typo Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * docs(field-label): added JS Docs to mixin * chore: linting fixes * docs(combobox): fixed typo Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> * chore: dropped changeset * docs(color-field): fixed typo Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> * chore(combobox): fixed typo * docs(combobox): added side-aligned to story * docs(combobox): fixed typo Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> * docs(combobox): fixed typo Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> * docs(field-label): added links to mixin docs * docs(field-label): added code type in mixin docs Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> * docs(field-label): added code type in mixin docs Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> * fix(textfield): simiplified styles getter * fix(textfield): simplified attribute Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * fix(textfield): simplified attribute * docs(field-label): added more detail to mixin docs Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * docs(field-label): added more detail to field label mixin docs Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * fix(field-label): fixed inherited styles in mixin Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * fix(field-label): set side-aligned property to optional Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * fix(field-label): added override to styles getter Co-authored-by: Rúben Carvalho <rubcar@sapo.pt> * fix(field-label): field id should be required * fix(field-label): reverted styles changes to mixin * fix(textfield): fixed styles array * fix(textfield): ensure super styles are CSSResultArray --------- Co-authored-by: Rajdeep Chandra <rajrock38@gmail.com> Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-6.local> Co-authored-by: Rajdeep Chandra <rajdeepchandra@rajdeeps-mbp-7.macromedia.com> Co-authored-by: Rajdeep Chandra <rajdeepchandra@Rajdeeps-MacBook-Pro-7.local> Co-authored-by: Casey Eickhoff <48574582+caseyisonit@users.noreply.github.com> Co-authored-by: Marissa Huysentruyt <69602589+marissahuysentruyt@users.noreply.github.com> Co-authored-by: Rúben Carvalho <rubcar@sapo.pt>
🦋 Changeset detectedLatest commit: a61ad48 The changes in this PR will be included in the next version bump. This PR includes changesets to release 78 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
nikkimk
added
Status: WIP
Contributor
📚 Branch Preview🔍 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
![github-actions[bot]](https://avatars.githubusercontent.com/in/15368?s=60&v=4){kind=small}
| "component", | ||
| "css" | ||
| ], | ||
| "dependencies": { |
Contributor
There was a problem hiding this comment.
Expected object keys to be in specified order. 'dependencies' should be before 'keywords'.
reviewdog suggestion error
GitHub comment range and suggestion line range must be same. L66-L66 v.s. L53-L80| "@spectrum-web-components/shared": "1.10.0", | ||
| "@spectrum-web-components/textfield": "1.10.0" | ||
| }, | ||
| "types": "./src/index.d.ts", |
Contributor
There was a problem hiding this comment.
Expected object keys to be in specified order. 'types' should be before 'dependencies'.
reviewdog suggestion error
GitHub comment range and suggestion line range must be same. L81-L81 v.s. L53-L81| import { Combobox, ComboboxOption } from '@spectrum-web-components/combobox'; | ||
| import '@spectrum-web-components/combobox/sp-combobox.js'; | ||
| import '@spectrum-web-components/field-label/sp-field-label.js'; | ||
| import { spreadProps } from '../../../test/lit-helpers'; |
Contributor
There was a problem hiding this comment.
🚫 [eslint] <require-extensions/require-extensions> reported by reviewdog 🐶
Relative imports and exports must end with .js
Suggested change
| import { spreadProps } from '../../../test/lit-helpers'; | |
| import { spreadProps } from '../../../test/lit-helpers.js'; |
| import { Combobox, ComboboxOption } from '@spectrum-web-components/combobox'; | ||
| import '@spectrum-web-components/combobox/sp-combobox.js'; | ||
| import '@spectrum-web-components/field-label/sp-field-label.js'; | ||
| import { spreadProps } from '../../../test/lit-helpers'; |
Contributor
There was a problem hiding this comment.
🚫 [eslint] <import/extensions> reported by reviewdog 🐶
Missing file extension for "../../../test/lit-helpers"
| "./src/index.js": { | ||
| "development": "./src/index.dev.js", | ||
| "default": "./src/index.js" | ||
| "./sp-field-label-mixin.js": { |
Contributor
There was a problem hiding this comment.
Expected object keys to be in ascending order. './sp-field-label-mixin.js' should be before './src/field-label.css.js'.
reviewdog suggestion error
GitHub comment range and suggestion line range must be same. L38-L38 v.s. L27-L41| "component", | ||
| "css" | ||
| ], | ||
| "dependencies": { |
Contributor
There was a problem hiding this comment.
Expected object keys to be in specified order. 'dependencies' should be before 'keywords'.
reviewdog suggestion error
GitHub comment range and suggestion line range must be same. L66-L66 v.s. L53-L74
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
Field label
src/FieldLabelMixin.tsto render field label within a component's shadow DOM.field-label-mixin.mdto document the mixin.package.jsonto include field mixin.Textfield
README.mddocs to include slotted label and examples.package.jsonto include field label dependency.src/Textfield.tsto use the field label mixin to render field label.stories/textarea-sizes.stories.tsto include slotted label.stories/textarea.stories.tsto include slotted label.stories/textfield-sizes.stories.tsto include slotted label.stories/textfield.stories.tsto include slotted label.test/textfield-a11y.test.tsto test for slotted label.Color Field
Color field extends textfield so its shadow DOM will also have a field label.
README.mddocs to include slotted label and examples.stories/color-field-sizes.stories.tsto include slotted label.Number field
Number field extends textfield so its shadow DOM will also have a field label.
README.mddocs to include slotted label and examples.stories/number-field-sizes.stories.tsto include slotted label.stories/number-field.stories.tsto include slotted label.Combobox
README.mddocs to include slotted label and examples.package.jsonto include field label dependency.src/Combobox.tsto use the field label mixin to render field label.stories/combobox.stories.tsto use the slotted label.stories/index.tsto use the slotted label.test/combobox-a11y.test.tsto test for slotted label.Motivation and context
Create a FormFieldMixin component to standardize form field behavior across Spectrum Web Components. This refactor will improve consistency and reduce code duplication by extracting common form field functionality into a reusable mixin. The implementation will use checkbox and textfield components as test cases to validate the mixin's functionality.
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Descriptive Test Statement
Descriptive Test Statement
Device review