feat: style field label mixin for textfield, textarea #5898
Conversation
|
📚 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 |
Notes: the main thing this commit does is allow the field label's inline-size to be set to auto, so that its width is independent of the input. Unfortunately this also affects help text, whose previous behavior was to align its width to the input. If the goal is to pass VRTs, we'll need to adjust the help text to align its width to the input. This behavior (label width independent of input, helptext width aligned with input) feels odd.
rise-erpelding
force-pushed
the
rise-erpelding/swc-1316-textfield-label-styling
branch
from
fe6a9d8 to
7ad1d8c
Compare
| grows | ||
| id="grows-only" | ||
| placeholder="Does not grow or display incorrectly" | ||
| style="--mod-field-label-width: 400px;" |
There was a problem hiding this comment.
Is this cheating to make the VRTs pass for this story? Yes. 😆
After poking around at CSS, React, Figma, and the design guidelines, I think the expected behavior for the field label is that its width is the same as the text input rather than being completely independent of it.
However, I realize this could potentially cause problems for consumers who expected the field label to behave the other way, so we can optionally provide a way to get around this, if we want.
Happy to have feedback on this.
Because now the field label is inside of sp-textfield, its width is dependent on the width of sp-textfield. Figma/CSS/React/Design Guidelines all indicate that this is the correct pattern. In case this has a negative effect on any consumer who relied on the textfield and label having indpendent widths, a mod custom property has been provided to override this behavior.
rise-erpelding
force-pushed
the
rise-erpelding/swc-1316-textfield-label-styling
branch
from
972660a to
dfa846e
Compare
rise-erpelding
changed the title
Description
This PR updates the new
FieldLabelMixinto use new styles.The CSS styling for the slotted label in the shadow DOM now matches the appearance of the standalone
<sp-field-label>component for textfield and textarea components.All textfield and textarea VRTs are now passing, confirming visual parity between slotted labels and standalone field label components.
Motivation and context
Styles the form field mixin to look like
sp-field-label. Previously, the FormFieldMixin component was created to standardize form field behavior across Spectrum Web Components.Issue 1: Field label wrapping
This does change the behavior of the field label. Before,
sp-field-labelwas independent and its width was bound to the width of its container, so it could extend beyond the width of the textfield input. You can see this behavior in the Textfield Grows Only story:Now, the label's container is
sp-textfieldand therefore its width is restricted to the width of the textfield by default, forcing a longer label to wrap:This is probably the ideal behavior because it's seen in CSS, React, Figma, and the design guidelines.
It might also be worth noting that help text also behaves this way, where its width is restricted to the width of the input.
If we're worried about how restricting field label's width affects consumers, there are a few possible options that I see to get around this behavior:
--mod-field-label-widthto allow a way to modify the default width. (Is this a great time to introduce another mod though?) This is what the Textfield Grows Only story is doing by setting the field label width to 400px so it won't wrap in VRTs, but I'm not sure there's a way to scope the width to be 100% of textfield's container. Also worth noting that some of the large VRTs aren't passing because of the same wrapping issue.--modto adjust the textfield input instead. A user could adjust the width ofsp-textfieldwith the existing--mod-textfield-width. As an example, let's say they want it to be 400px. This expands the width of the field label, input, and help text to 400px. If a user wanted the input to be smaller, we could add a mod that only affects the input, like--mod-textfield-input-width, but the help text would be longer than the input, so we'd want a mod for the help text width as well. This feels a bit messy.Issue 2: Side label styling
We're not currently using the mixin with any textfield variants that use the side label, but these would break. The spectrum-css styles for textfield are designed to work with a textfield that includes field label and help text, so bringing some of those in seems like the best approach. No blockers here currently, but noting that this variant won't work in this branch as it is right now.
Changes
Architectural CSS changes:
field-label-mixin.cssfile that adapts field label styles for use in other components' shadow DOM:host(referencing the host component'ssize,disabled, etc. attributes)labelselector instead of:host, allowing the mixin to style<label>elements within other componentsspectrum-field-label.csswhich applies styles to:hostfor the standalone<sp-field-label>componentRelated 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