fix: Add RTL icon support to ExternalHyperlink component in v13 #3694
+18
−0
Conversation
This file contains hidden or 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
ahayes91
changed the title
Workday/canvas-kit
|
||||||||||||||||||||||||||||||||||||||||
| Project |
Workday/canvas-kit
|
| Branch Review |
aislinn/external-hyperlink-icons
|
| Run status |
|
| Run duration | 09m 13s |
| Commit |
|
| Committer | Aislinn Hayes |
| 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
20.54%
|
|
|---|---|
|
Untested elements
|
1441
|
|
Tested elements
|
370
|
Accessibility
99.28%
|
|
|---|---|
|
Failed rules
|
6 critical
5 serious
0 moderate
2 minor
|
|
Failed elements
|
98
|
ahayes91
commented
Jan 20, 2026
| export const ExternalLinkRTL = () => ( | ||
| <CanvasProvider theme={{canvas: {direction: ContentDirection.RTL}}}> | ||
| <ExternalHyperlink href="https://workday.com" iconLabel="Opens link in new window" shouldMirror> | ||
| השועל החום המהיר קופץ מעל הכלב העצל |
Contributor
Author
There was a problem hiding this comment.
Might be worth getting a Hebrew expert to validate this one but according to google it's an almost direct translation of "The quick brown fox jumps over the lazy dog" 😂
ahayes91
changed the title
Contributor
|
Ah i think the nvmrc is lying to you, we recently updated things to 22.x apologies |
| * If set to `true`, transform the SVG's x-axis to mirror the graphic. | ||
| * @default false | ||
| */ | ||
| shouldMirror?: boolean; |
Contributor
There was a problem hiding this comment.
instead of adding a new prop, I think we can just update the style object below to add:
':dir(rtl)': {
transform: 'rotate(270deg)',
},
Contributor
Author
There was a problem hiding this comment.
d'oh - i swear i did try this originally but turns out I just put it in the wrong place! 😂 thank you, much better!
ahayes91
changed the title
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
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: #3693
While this issue is fixed in v14, ideally we would have a fix for it in v13 too for teams that are still transitioning!
Release Category
Components
Checklist
ready for reviewhas been added to PRFor the Reviewer
Where Should the Reviewer Start?
modules/react/button/lib/ExternalHyperlink.tsxis the entry point!Areas for Feedback? (optional)
Testing Manually
I'm having trouble even getting the
supportbranch working locally - when I'm definitely on the node version in the nvmrc and runyarn, I see this error (usednpm install -g yarn):Do other folks see that?
In any case, I got around it and got storybook running (had to do
yarn cleanto shake off a few cobwebs) and the icon is flipped now.Screenshots or GIFs (if applicable)
Thank You Gif (optional)