Skip to content

feat: style field label mixin for textfield, textarea #5898

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom
Draft
wants to merge 10 commits into
base: nikkimk/form-field-mixin
Choose a base branch
from
Draft

feat: style field label mixin for textfield, textarea #5898

wants to merge 10 commits into from

Conversation

@rise-erpelding
Copy link
Collaborator

@rise-erpelding rise-erpelding commented Nov 18, 2025 •
edited
Loading

Description

This PR updates the new FieldLabelMixin to 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.

Note: this does change the behavior of the field label. Before, sp-field-label was independent and therefore its width was bound to the width of its container. Now, its container is sp-textfield and therefore its width is restricted to the width of the textfield by default.

The width of the field label can be made larger

Motivation and context

All textfield and textarea VRTs are now passing, confirming visual parity between slotted labels and standalone field label components.

Breaking changes

None. This is an internal implementation change that maintains the same external API and visual appearance.

Changes

Architectural CSS changes:

  • Created new field-label-mixin.css file that adapts field label styles for use in other components' shadow DOM
  • Custom property definitions remain on :host (referencing the host component's size, disabled, etc. attributes)
  • Style applications target the label selector instead of :host, allowing the mixin to style <label> elements within other components
  • This contrasts with spectrum-field-label.css which applies styles to :host for the standalone <sp-field-label> component
  • Both files share the same custom property tokens, ensuring visual parity

Related issue(s)

  • fixes SWC-1316

Screenshots (if appropriate)

Author's checklist

  • I have read the CONTRIBUTING and PULL_REQUESTS documents.
  • I have reviewed at the Accessibility Practices for this feature, see: Aria Practices
  • I have added automated tests to cover my changes.
  • I have included a well-written changeset if my change needs to be published.
  • I have included updated documentation if my change required it.

Reviewer's checklist

  • Includes a Github Issue with appropriate flag or Jira ticket number without a link
  • Includes thoughtfully written changeset if changes suggested include patch, minor, or major features
  • Automated tests cover all use cases and follow best practices for writing
  • Validated on all supported browsers
  • All VRTs are approved before the author can update Golden Hash

Manual review test cases

  • Descriptive Test Statement

    1. Go here
    2. Do this action
    3. Expect this result

  • Descriptive Test Statement

    1. Go here
    2. Do this action
    3. Expect this result

Device review

  • Did it pass in Desktop?
  • Did it pass in (emulated) Mobile?
  • Did it pass in (emulated) iPad?

@rise-erpelding rise-erpelding self-assigned this Nov 18, 2025
@rise-erpelding rise-erpelding added the Status: WIP PR is a work in progress or draft label Nov 18, 2025
@changeset-bot
Copy link

changeset-bot bot commented Nov 18, 2025 •
edited
Loading

⚠️ No Changeset found

Latest commit: dfa846e

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions
Copy link
Contributor

github-actions bot commented Nov 18, 2025 •
edited
Loading

📚 Branch Preview

🔍 Visual Regression Test Results

When 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: pr-5898

If the changes are expected, update the current_golden_images_cache hash in the circleci config to accept the new images. Instructions are included in that file.
If the changes are unexpected, you can investigate the cause of the differences and update the code accordingly.

@rise-erpelding
fix(textfield,numberfield): inline sizing
7ad1d8c 
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 rise-erpelding force-pushed the rise-erpelding/swc-1316-textfield-label-styling branch from fe6a9d8 to 7ad1d8c Compare November 24, 2025 15:24
rise-erpelding
rise-erpelding commented Nov 24, 2025
View reviewed changes
1st-gen/packages/textfield/stories/textfield.stories.ts
grows
id="grows-only"
placeholder="Does not grow or display incorrectly"
style="--mod-field-label-width: 400px;"
Copy link
Collaborator Author

@rise-erpelding rise-erpelding Nov 24, 2025 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

@rise-erpelding
fix: provide field label modifier
d4e1c36 
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
docs: adjust field label width to pass vrts
dfa846e
@rise-erpelding rise-erpelding force-pushed the rise-erpelding/swc-1316-textfield-label-styling branch from 972660a to dfa846e Compare November 24, 2025 21:53
@rise-erpelding rise-erpelding changed the title feat: style field label mixin feat: style field label mixin for textfield, textarea Nov 25, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

No reviews

Assignees

@rise-erpelding rise-erpelding

Labels

Status: WIP PR is a work in progress or draft

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

2 participants

@rise-erpelding