test(checkbox): add more coverage for checkbox #3625

marissahuysentruyt · 2025-03-14T18:54:27Z

Description

This PR adds several tests and more Storybook support for hovers through the shared type control. Additionally, this PR should address the regressions found on the form docs page, where some inputs (based on work from #3227 and #3165) no longer had labels.

Jira/Specs

Related: CSS-1139

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.
Visit the checkbox testing page.
Verify in each context that the new test cases appear & render as expected. Nothing should look broken. 🤞
- checked+hovered
- invalid+checked+hovered
- disabled+checked+hovered
- readonly+checked+hovered
Visit the form docs page.
Ensure that the checkbox inputs now have labels for 🐱 and 🐶 ("kittens" and "puppies").

Regression testing

Validate:

The documentation pages for at least two other components are still loading, including:

The pages render correctly, are accessible, and are responsive.

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 🚫

After ✅

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
✨ This pull request is ready to merge. ✨

changeset-bot · 2025-03-14T18:54:31Z

⚠️ No Changeset found

Latest commit: 8010591

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 · 2025-03-14T18:59:10Z

File metrics

Summary

Total size: 2.25 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.

github-actions · 2025-03-14T19:00:08Z

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

marissahuysentruyt · 2025-03-17T19:37:17Z

components/form/stories/form.stories.js

 				content: [
 					(passthroughs, context) => Fieldgroup({
 						layout: "horizontal",
+						inputType: "checkbox",


The changes in form were inspired by a few PRs:

fieldlabel & form docs migration defined these inputs as checkboxes

[field group regressions] added the inputType argument and changed the format of the items array a bit.

Combined, we can address the regressions seen in form (where the the "Interest" inputs have no labels)

Beautiful, love these updates!

marissahuysentruyt · 2025-03-17T19:38:37Z

TODO: run VRTs

jawinn

Nice VRT addition and fix. 👍

castastrophe

This is such a great expansion of our coverage for this component. Thank you!

castastrophe · 2025-03-19T16:22:56Z

components/form/stories/form.stories.js

 				content: [
 					(passthroughs, context) => Fieldgroup({
 						layout: "horizontal",
+						inputType: "checkbox",


Beautiful, love these updates!

- adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg

* feat(actionbutton): use s2 colors in spectrum-two theme (#3606) * feat(actionbutton): use closer to s2 colors in spectrum-two theme Requested colors update for action button, aligning the colors closer to the S2 design, post-foundations. In the foundations spectrum-two theme: - Removes the border - Changes the default background colors to match s2 specs - Updates the background colors used for static black and static white SWC-497 * fix(actionbutton): fix high contrast styles for selected disabled The selected + disabled button was not showing up as the disabled colors in high contrast mode. Fixed by adjusting the source order slightly in the high contrast media query so disabled is after selected and takes precedence. * fix(search): update disabled state in spectrum two (#3593) Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> * chore(deps): bump the npm_and_yarn group with 2 updates (#3618) Bumps the npm_and_yarn group with 2 updates: [@babel/helpers](https://github.com/babel/babel/tree/HEAD/packages/babel-helpers) and [@babel/runtime](https://github.com/babel/babel/tree/HEAD/packages/babel-runtime). Updates `@babel/helpers` from 7.26.0 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-helpers) Updates `@babel/runtime` from 7.24.4 to 7.26.10 - [Release notes](https://github.com/babel/babel/releases) - [Changelog](https://github.com/babel/babel/blob/main/CHANGELOG.md) - [Commits](https://github.com/babel/babel/commits/v7.26.10/packages/babel-runtime) --- updated-dependencies: - dependency-name: "@babel/helpers" dependency-type: indirect dependency-group: npm_and_yarn - dependency-name: "@babel/runtime" dependency-type: indirect dependency-group: npm_and_yarn ... Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> * chore: update release script install settings * fix(button): adjust s2 static colors [SWC-496] (#3613) * chore: release (#3619) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(slider): corrects contrast bug caused by template default arg (#3614) * fix(stepper): fast follows for focus/focus+hover/keyboardFocus borders (#3621) * fix(stepper): focus/focus+hover/keyboardFocus border colors * chore(stepper): add changeset * fix(slider): offset variant border radius bug fix (#3611) * feat(slider): offset variant border radius bug fix * feat(slider): fix range slider * fix(combobox): border color fast follows swc-582 (#3609) * fix(combobox): correct s1/legacy container variable * fix(combobox): fast follow border color remapping - add mods for s2 foundations disabled picker button BG/border colors - correct disabled+read-only border color - add read-only border custom property - fixes express read-only border from gray-500 to gray-400 - update metadata.json * chore(combobox): create changeset * chore: release (#3623) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * chore: patch tj-actions vulnerability (#3626) * fix(alertbanner): change system variable from spectrum to legacy (#3624) * fix(alertbanner): change system: spectrum to legacy * chore(alertbanner): create changeset * test(checkbox): add more coverage for checkbox (#3625) * chore(checkbox): add isHovered state to checkbox - adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg * chore(form): fix the fieldgroup component input and labels * chore: release (#3631) Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix(checkbox): add invalid+checked+hover checkbox styles (#3617) - add missing ::before pseudo to target the before element in the invalid/checked/hover state - update metadata.json - create changeset * chore: release (#3632) * chore: release --------- Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> * fix: undefined and duplicated variable after merging main fix(slider): remove duplicated values Remove a large number of duplicate values causing stylelint "Unexpected duplicate" warnings. It looks like things got doubled up somehow in a previous rebase or merge. This included duplicate t-shirt size classes. Also moves root styles block under the custom property definitions to be consistent with other components. fix(combobox): fixes undefined and duplicated values --------- Signed-off-by: dependabot[bot] <[email protected]> Co-authored-by: TaraT <[email protected]> Co-authored-by: rise-erpelding <[email protected]> Co-authored-by: [ Cassondra ] <[email protected]> Co-authored-by: dependabot[bot] <49699333+dependabot[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com> Co-authored-by: Cory Dransfeldt <[email protected]> Co-authored-by: Marissa Huysentruyt <[email protected]> Co-authored-by: aramos-adobe <[email protected]>

marissahuysentruyt force-pushed the marissahuysentruyt/add-more-test-coverage-checkbox branch from 1c3c083 to 6c6b830 Compare March 17, 2025 19:17

marissahuysentruyt mentioned this pull request Mar 17, 2025

fix(checkbox): corrects invalid+checked+hover background color #3617

Merged

14 tasks

marissahuysentruyt self-assigned this Mar 17, 2025

marissahuysentruyt added the testing Visual regression testing label Mar 17, 2025

marissahuysentruyt commented Mar 17, 2025

View reviewed changes

marissahuysentruyt added the ready-for-review label Mar 17, 2025

marissahuysentruyt marked this pull request as ready for review March 17, 2025 19:38

marissahuysentruyt requested review from castastrophe, jawinn, cdransf, 5t3ph, aramos-adobe and rise-erpelding March 17, 2025 19:43

jawinn approved these changes Mar 18, 2025

View reviewed changes

marissahuysentruyt added the run_vrt For use on PRs looking to kick off VRT label Mar 18, 2025

castastrophe approved these changes Mar 19, 2025

View reviewed changes

marissahuysentruyt added 2 commits March 19, 2025 12:23

chore(checkbox): add isHovered state to checkbox

18c5af5

- adds isHovered shared type and control to checkbox stories - adds several isHovered test cases - updates checkbox template to include isHovered arg

chore(form): fix the fieldgroup component input and labels

8010591

castastrophe force-pushed the marissahuysentruyt/add-more-test-coverage-checkbox branch from 6c6b830 to 8010591 Compare March 19, 2025 16:23

castastrophe enabled auto-merge (squash) March 19, 2025 16:27

castastrophe merged commit 183450f into main Mar 19, 2025
17 of 24 checks passed

castastrophe deleted the marissahuysentruyt/add-more-test-coverage-checkbox branch March 19, 2025 16:33

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

test(checkbox): add more coverage for checkbox #3625

test(checkbox): add more coverage for checkbox #3625

Uh oh!

marissahuysentruyt commented Mar 14, 2025 •

edited by jawinn

Loading

Uh oh!

changeset-bot bot commented Mar 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 14, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Mar 14, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt Mar 17, 2025

Uh oh!

castastrophe Mar 19, 2025

Uh oh!

marissahuysentruyt commented Mar 17, 2025

Uh oh!

jawinn left a comment

Uh oh!

castastrophe left a comment

Uh oh!

castastrophe Mar 19, 2025

Uh oh!

Uh oh!

Uh oh!

test(checkbox): add more coverage for checkbox #3625

test(checkbox): add more coverage for checkbox #3625

Uh oh!

Conversation

marissahuysentruyt commented Mar 14, 2025 • edited by jawinn Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Jira/Specs

How and where has this been tested?

Validation steps

Regression testing

Screenshots

To-do list

Uh oh!

changeset-bot bot commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

github-actions bot commented Mar 14, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

marissahuysentruyt Mar 17, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt commented Mar 17, 2025

Uh oh!

jawinn left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

castastrophe Mar 19, 2025

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

marissahuysentruyt commented Mar 14, 2025 •

edited by jawinn

Loading

changeset-bot bot commented Mar 14, 2025 •

edited

Loading

github-actions bot commented Mar 14, 2025 •

edited

Loading

github-actions bot commented Mar 14, 2025 •

edited

Loading