feat(field-label): added and implemented field-label mixin #5799
Conversation
feat(label): init field label mixin
🦋 Changeset detectedLatest commit: f24e789 The changes in this PR will be included in the next version bump. This PR includes changesets to release 84 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 |
📚 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 |
Tachometer resultsChromemenu permalinktest-basic
Firefoxmenu permalinktest-basic
|
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
Co-authored-by: Marissa Huysentruyt <[email protected]>
| * @slot tooltip - Tooltip to to be applied to the the Picker Button | ||
| */ | ||
| export class Combobox extends Textfield { | ||
| export class Combobox extends FieldLabelMixin(Textfield, 'field-label') { |
There was a problem hiding this comment.
Hmmmm.... this is interesting... Textfield already has FieldLabelMixin applied in its inheritance chain....
Textfield → TextfieldBase → FieldLabelMixin(ManageHelpText(...))
I'm not sure, but this sounds like this it could create problems? Can't say for sure what, but could this lead to duplicate field-label styles?, two separate renderFieldLabel() implementations where one shadows the other?, potentially conflicting slot observation? 🤷
Maybe the solution is just
| export class Combobox extends FieldLabelMixin(Textfield, 'field-label') { | |
| export class Combobox extends Textfield { |
and keep the renderFieldLabel('input') that we have below. Let me know what you think!
There was a problem hiding this comment.
TL;DR, we need this for now but it will be gone before the merge to main
field-label is the slotName not the fieldId. In text field it makes sense just to make the slotName a default slot, but in combobox, the menuitems are in the default slot.
Also, TBH, the minute I touch SWC-710, which is also part of this branch, combobox will not extend textfield, so this is only temporary, and will be changed before the parent branch gets merged to main.
By the time this merges to main, it will be export class Combobox extends FieldLabelMixin(Menu, 'field-label') { because we need to move the menu to the same DOM as everything else and there is more I need to inherit from Menu than I do from a Textfield.
There was a problem hiding this comment.
I'm happy with that! Thanks for the context!
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
Co-authored-by: Rúben Carvalho <[email protected]>
packages/textfield/src/Textfield.ts
Outdated
| ) { | ||
| public static override get styles(): CSSResultArray { | ||
| return [textfieldStyles, checkmarkStyles]; | ||
| return [super.styles || [], textfieldStyles, checkmarkStyles]; |
There was a problem hiding this comment.
I think if we don'tt spread super.styles, it can be problematic? We can end up with a nested array?
There was a problem hiding this comment.
Fun fact:
In our other components, super.styles has a CSSResultArray type. In Textfield, it is CSSResultGroup | undefined.
According to Lit docs:
CSSResultGroupisCSSResultOrNative | CSSResultArray.CSSResultArrayisArray<CSSResultOrNative | CSSResultArray>
In order to get around this, I had to do the following:
const styles = (super.styles || []) as CSSResultArray;
return [...styles, textfieldStyles, checkmarkStyles];
Description
Motivation and context
Related issue(s)
Screenshots (if appropriate)
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesAll VRTs are approved before the author can update Golden HashNote: Ignore any visual regressions issues at this time as they will be addressed in SWC-1316 before this branch is merged into mainManual review test cases
Note: Ignore any CSS issues at this time as they will be addressed in SWC-1316 before this branch is merged into main
Text Field
Color Field
Number Field
Combobox
Device review