Skip to content

chore(combobox, datepicker,et all): add displayLabel arg #3660

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.

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

Open
wants to merge 2 commits into
base: spectrum-two
Choose a base branch
from

Conversation

marissahuysentruyt
Copy link
Collaborator

@marissahuysentruyt marissahuysentruyt commented Apr 8, 2025

Description

After rebasing the search field migration branch, I noticed that the icons were placed awkwardly. I realized that the nested textfield in my search component was just missing a displayLabel: false argument. That arg was updated in the textfield S2 migration, to be set to true on default (based on guidance that "a textfield should always have a label"), but because search isn't utilizing the field label that ships with textfield, that arg should be set to false. Without the displayLabel arg set to false, the textfield was still rendering an additional, empty field label component, and offsetting the icon & button within search.

After scanning the repo, the following components needed similar displayValue: false args:
combobox, datepicker, form, pagination, stepper

Jira/Specs

CSS-1174

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

  • Pull down the branch to run locally or visit the deploy preview.
  • Navigate to each component's docs page. Ensure that nothing looks "broken" and most of the styles are acceptable.
    • combobox (the picker button and validation icons)
    • date picker (the picker button and validation icons)
    • form (the stepper should be fixed, as well as the alignment of the form labels to their textfields)
    • pagination (specifically the explicit variant)
    • search (the search icon and close button)
    • stepper/number field (the infield buttons)
  • By comparison, compare the fixed components to a recent deploy preview for spectrum-two (these components do look broken):

Regression testing

Validate:

  1. The documentation pages for at least two other components are still loading, including:
  • The pages render correctly, are accessible, and are responsive.
  1. If components have been modified, VRTs have been run on this branch:
  • VRTs have been run and looked at.
  • Any VRT changes have been accepted (by reviewer and/or PR author), or there are no changes.

Screenshots

Before 🚫
combobox
Screenshot 2025-04-08 at 3 57 55 PM

datepicker
Screenshot 2025-04-07 at 4 51 52 PM

search
Screenshot 2025-04-07 at 3 28 29 PM

pagination
Screenshot 2025-04-08 at 3 58 35 PM

form
Screenshot 2025-04-08 at 3 58 20 PM

stepper
Screenshot 2025-04-08 at 4 08 59 PM

After ✅
combobox
Screenshot 2025-04-08 at 4 09 45 PM

datepicker
Screenshot 2025-04-08 at 4 10 02 PM

search
Screenshot 2025-04-08 at 4 11 08 PM

pagination
Screenshot 2025-04-08 at 4 10 47 PM

form
Screenshot 2025-04-08 at 4 10 26 PM

stepper
Screenshot 2025-04-08 at 4 11 23 PM

To-do list

  • I have read the contribution guidelines.
  • I have updated relevant storybook stories and templates.
  • If my change impacts other components, I have tested to make sure they don't break.
  • ✨ This pull request is ready to merge. ✨

@marissahuysentruyt marissahuysentruyt added size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. skip_vrt Add to a PR to skip running VRT (but still pass the action) S2 Spectrum 2 labels Apr 8, 2025
@marissahuysentruyt marissahuysentruyt self-assigned this Apr 8, 2025
Copy link

changeset-bot bot commented Apr 8, 2025

⚠️ No Changeset found

Latest commit: 9709150

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

Copy link
Contributor

github-actions bot commented Apr 8, 2025

🚀 Deployed on https://pr-3660--spectrum-css.netlify.app

Copy link
Contributor

github-actions bot commented Apr 8, 2025

File metrics

Summary

Total size: 1.38 MB*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/textfield-icon-placement branch from ca1fb6f to 2659e83 Compare April 9, 2025 13:48
Copy link
Collaborator

@rise-erpelding rise-erpelding left a comment

Choose a reason for hiding this comment

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

This definitely feels like the simpler solution and works nicely.

It is interesting to note though, looking through the guidelines they say "text fields should always have a label" and then in something like combobox, the field label can exist but the markup is outside .spectrum-Textfield (and .spectrum-Combobox for that matter).

- without the displayLabel arg set to false in the following components,
the textfield was still rendering a label, and offsetting a bunch of the
icons & buttons within these components

combobox, datepicker, form, pagination, search, stepper
@marissahuysentruyt marissahuysentruyt force-pushed the marissahuysentruyt/textfield-icon-placement branch from 2659e83 to 9709150 Compare April 23, 2025 18:43
@marissahuysentruyt marissahuysentruyt marked this pull request as ready for review April 23, 2025 19:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
ready-for-review S2 Spectrum 2 size-1 XS ~1-6hrs; nearly trivial, a few hours, could do more than one in a single day. skip_vrt Add to a PR to skip running VRT (but still pass the action)
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants