fix(splitview): add missing is-focused class by marissahuysentruyt · Pull Request #2932 · adobe/spectrum-css

marissahuysentruyt · 2024-07-25T13:24:46Z

Description

Several eons ago, we noticed that the argTypes for the Split view template needed to be adjusted to showcase the Horizontally Focused story appropriately. In a similar vein, I noticed that our active styles for the collapsible and resizable variants weren't captured in the testing grid. This PR updates all of that.

Jira/Specs

CSS-856

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. (@cdransf)
Visit the split view page. (@cdransf)
On the docs page, the "horizontally focused" story is blue, indicating the is-focus-visible class/state on the .spectrum-SplitView-splitter .is-draggable element. (@cdransf)
Visit the testing grid. (@cdransf)
Verify that each test case includes the gripper, except for the default split view. All resizable and collapsible split views should have a gripper. (@cdransf)
Verify that the resizable+active test cases render gray-800 for the splitter and the gripper elements. (@cdransf)
Verify that the resizable+focused test cases render focus-indicator-color for the splitter and the gripper elements. (@cdransf)

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

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
I have tested these changes in Windows High Contrast mode.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-07-25T13:24:49Z

⚠️ No Changeset found

Latest commit: 9410aa0

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 · 2024-07-25T13:27:53Z

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

github-actions · 2024-07-25T13:27:54Z

File metrics

Summary

Total size: 1.43 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 · 2025-07-21T16:33:21Z

 		{
-			testHeading: "Focused",
-			isFocused: true,
+			testHeading: "Resizable/collapsible",


Resizable and collapsible are technically two different things in SWC, where collapsible can in fact collapse all of one of the panes and resizable maintains to min-width for the panes. However, the collapsible variant will also need the gripper (which is only added in isResizable splitviews right now.)

We could definitely come back to make sure the active WHCM color is what we want, and clean up the args for this component (i.e. isCollapsible should also add the gripper, not just isResizable). I didn't want to get into too much of that with this PR quite yet, but I can make a ticket sort of like an "S2 migration."

marissahuysentruyt · 2025-07-21T16:34:07Z

 					[`${rootClass}-splitter`]: true,
 					["is-draggable"]: isResizable,
-					"is-focused": isFocused,
+					["is-active"]: isActive,


We have styles for the active gripper, so adding the isActive arg here to capture in the tests.

castastrophe

This is a great update that improves test coverage. I'm cool if you want to move this forward.

github-actions · 2025-07-22T20:02:36Z

📚 Branch preview

PR #2932 has been deployed to Azure Blob Storage: https://spectrumcss.z13.web.core.windows.net/pr-2932/index.html.

- fixes orientation of top & bottom test cases to be vertical - adds isActive to template for testing and adds isActive to test cases to accurately update baselines for VRTs

marissahuysentruyt force-pushed the marissahuysentruyt/css-856-splitview-focus-class branch from 4cb17f5 to b2c42c4 Compare July 29, 2024 18:52

marissahuysentruyt added wip This is a work in progress, don't judge. do not merge A flag for a branch indicating it should not be merged. labels Jul 30, 2024

marissahuysentruyt self-assigned this Feb 17, 2025

castastrophe force-pushed the main branch 11 times, most recently from c68f4e3 to d2272ea Compare March 12, 2025 21:56

marissahuysentruyt force-pushed the marissahuysentruyt/css-856-splitview-focus-class branch from b2c42c4 to dbecd0b Compare July 21, 2025 16:27

marissahuysentruyt changed the base branch from main to spectrum-two July 21, 2025 16:28

marissahuysentruyt commented Jul 21, 2025

View reviewed changes

castastrophe approved these changes Jul 21, 2025

View reviewed changes

marissahuysentruyt force-pushed the marissahuysentruyt/css-856-splitview-focus-class branch from dbecd0b to 0b8e719 Compare July 22, 2025 19:57

marissahuysentruyt marked this pull request as ready for review July 22, 2025 21:03

marissahuysentruyt added the ready-for-review label Jul 22, 2025

cdransf approved these changes Jul 22, 2025

View reviewed changes

docs(splitview): update args for horizontally-focused variant

9410aa0

- fixes orientation of top & bottom test cases to be vertical - adds isActive to template for testing and adds isActive to test cases to accurately update baselines for VRTs

marissahuysentruyt force-pushed the marissahuysentruyt/css-856-splitview-focus-class branch from 0b8e719 to 9410aa0 Compare July 24, 2025 12:23

marissahuysentruyt merged commit 9410aa0 into spectrum-two Jul 24, 2025
13 checks passed

marissahuysentruyt deleted the marissahuysentruyt/css-856-splitview-focus-class branch July 24, 2025 12:32

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix(splitview): add missing is-focused class#2932

fix(splitview): add missing is-focused class#2932
marissahuysentruyt merged 1 commit intospectrum-twofrom
marissahuysentruyt/css-856-splitview-focus-class

marissahuysentruyt commented Jul 25, 2024 •

edited by cdransf

Loading

Uh oh!

changeset-bot Bot commented Jul 25, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 25, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 25, 2024 •

edited

Loading

Uh oh!

marissahuysentruyt Jul 21, 2025

Uh oh!

marissahuysentruyt Jul 22, 2025 •

edited

Loading

Uh oh!

marissahuysentruyt Jul 21, 2025

Uh oh!

castastrophe left a comment

Uh oh!

github-actions Bot commented Jul 22, 2025 •

edited

Loading

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Conversation

marissahuysentruyt commented Jul 25, 2024 • edited by cdransf 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 Jul 25, 2024 • 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 Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Jul 25, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

marissahuysentruyt Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

marissahuysentruyt Jul 21, 2025

Choose a reason for hiding this comment

Uh oh!

castastrophe left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions Bot commented Jul 22, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📚 Branch preview

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

marissahuysentruyt commented Jul 25, 2024 •

edited by cdransf

Loading

changeset-bot Bot commented Jul 25, 2024 •

edited

Loading

github-actions Bot commented Jul 25, 2024 •

edited

Loading

github-actions Bot commented Jul 25, 2024 •

edited

Loading

marissahuysentruyt Jul 22, 2025 •

edited

Loading

github-actions Bot commented Jul 22, 2025 •

edited

Loading