feat(splitview)!: migrate tokens #2103
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
c541353 to
e7aecba
Compare
|
🚀 Deployed on https://pr-2103--spectrum-css.netlify.app |
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
30d130f to
ee4a2c4
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
2 times, most recently
from
041ce74 to
6acd76c
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
6acd76c to
3d7a8bc
Compare
jenndiaz
approved these changes
Aug 24, 2023
components/splitview/index.css
Outdated
|
|
||
| &:focus-visible { | ||
| outline: none; | ||
| background-color: var(--highcontrast-splitview-handle-background-color-focus, var(--mod-splitview-handle-background-color-focus, var(--spectrum-splitview-handle-background-color-focus))); |
There was a problem hiding this comment.
do we want to display the focus either in the docs site or in storybook?
There was a problem hiding this comment.
A separate story in Storybook could be nice if that's possible.
There was a problem hiding this comment.
I thought about that. The issue is that it's all divs so I can't trigger focus-visible without adding a class. I'm assuming that this focus is used in SWC? The CSS was set up like this but not sure how it works with no focusable elements
There was a problem hiding this comment.
Oh interesting ok the splitter in SWC has a tabindex of 0 so that's why this works there
There was a problem hiding this comment.
I'm going to have to do an interaction here to get the focus to show up without a class so this will have to wait until the Popover PR goes in... if it ever does
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
3 times, most recently
from
ae07ee9 to
11272ee
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
3 times, most recently
from
6030db6 to
c2efa6b
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
ba3dc22 to
1ef04a7
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
5191573 to
144144f
Compare
mlogsdon18
force-pushed
the
css-502-splitview-tokens
branch
from
144144f to
46ca320
Compare
use two colon pseudo elements fix max nesting depth
pfulton
added
run_vrt
pfulton
force-pushed
the
css-502-splitview-tokens
branch
from
46ca320 to
e28a626
Compare
Rajdeepc
pushed a commit
that referenced
this pull request
Sep 11, 2023
BREAKING CHANGE: migrates SplitView to use `@adobe/spectrum-tokens` Additionally: * fix(splitview): remove touch-action from gripper * refactor(splitview): combine skin.css with index.css and delete skin.css * feat(splitview)!: updating to use core tokens * chore(splitview): update mods * style(splitview): add whcm styling * chore(splitview): fix linter errors use two colon pseudo elements fix max nesting depth * chore(splitview): working on adding focus story * chore(splitview): add storybook interaction add-on * chore(splitview): use latest version of tokens * fix(splitview): use vertical gripper width for vertical gripper --------- Co-authored-by: Patrick Fulton <[email protected]>
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Description
This PR is a DIY Migration for the Split view component. This also adds CSS to prevent touch-action on the gripper on mobile.
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.
Regression testing
Validate:
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 other components, I have tested to make sure they don't break.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨