chore: Expandable component style refactor #3128
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
added 12 commits
January 22, 2025 18:25
Explicit ARIA role is unnecessary when roles are implied from Element. If Element is button, then set aria-label string to altText, else aria-label is undefined. Consumers can pass ARIA role and aria-label through props if using Avatar in an informative way.
Replaced <Box> with <Element> to remove 'as' prop and simplify code.
…4-expandable-style-refactor
…4-expandable-style-refactor
Workday/canvas-kit
|
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
william-issue-2954-expandable-style-refactor
|
| Run status |
|
| Run duration | 02m 54s |
| Commit |
|
| Committer | William Stanton |
| View all properties for this run ↗︎ | |
| Test results | |
|---|---|
Failures
|
0
|
Flaky
|
1
|
Pending
|
21
|
Skipped
|
0
|
Passing
|
936
|
| View all changes introduced in this branch ↗︎ | |
UI Coverage
21.29%
|
|
|---|---|
|
Untested elements
|
1525
|
|
Tested elements
|
410
|
Accessibility
99.28%
|
|
|---|---|
|
Failed rules
|
6 critical
5 serious
0 moderate
2 minor
|
|
Failed elements
|
98
|
|
Looks like the gap / padding seems off Your PR
Master
|
Accepting code suggestion. Co-authored-by: Josh <[email protected]>
Fixing a bug in avatarStencil where the URL image loader wasn't working.
…//github.com/williamjstanton/canvas-kit into william-issue-2954-expandable-style-refactor
| @@ -271,8 +271,7 @@ export const Avatar = createComponent('button')({ | |||
| return ( | |||
| <Element | |||
| ref={ref} | |||
| aria-label={altText} | |||
| role={Element === 'button' ? 'button' : 'img'} | |||
| aria-label={Element === 'button' ? altText : undefined} | |||
josh-bagwell
reviewed
Mar 7, 2025
Accepting suggestion from Josh. Co-authored-by: Josh <[email protected]>
| @@ -191,6 +191,7 @@ export const systemIconStencil = createStencil({ | |||
| ), | |||
| }, | |||
| }), | |||
| modifiers: {}, | |||
There was a problem hiding this comment.
defaulting this to an empty object. If you extend a stencil and it's missing a property, typescript doesn't know to default to an empty object and crashes.
mannycarrera4
approved these changes
Mar 10, 2025
mannycarrera4
added
automerge
and removed
ready for review
williamjstanton
deleted the
william-issue-2954-expandable-style-refactor
branch
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.
Summary
Fixes: #2954
Expandable style re-factor is needed with the new cs prop. We will need to update this component to use the new system level tokens via CSS variables.
Release Category
Tokens
Release Note
ExpandableTargetcomponent is now rendering theBaseButtoncomponent, and may have some small impact on the visual styling of the keyboard focus ring.ExpandableIconstencil is extending theSystemIconstencil, and may have had an impact on the chevron icon color.Avatarcomponent where anaria-labelstring was rendered on a generic HTML element that did not have an explicit or implicitroleChecklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
modules/labs-react/expandable/lib/Expandable.tsx
(all subcomponents)
Line 274: modules/react/avatar/lib/Avatar.tsx
Areas for Feedback? (optional)
Testing Manually
Screenshots or GIFs (if applicable)
Thank You Gif (optional)