This repository has been archived by the owner on Feb 22, 2023. It is now read-only.
Add language direction picker to Storybook #346
Merged
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.
Fixes
Fixes #332 by @sarayourfriend
Description
Adds a language direction picker in Storybook to make it easier to test RTL styles.
Note: TailwindCSS RTL still isn't installed in this branch but this PR will introduce it. This PR does not introduce any RTL styles, just the ability to easily change thedir
attribute on the storybook iframe and updating the locale propertiesdir
attribute that would be used to programatically detect language direction in the app.Testing Instructions
Checkout this branch and run
npm run storybook
. Then navigate to any story (likehttp://localhost:6006/?path=/story/components-downloadbutton--default
) and click on the globe icon in the toolbar for the story. Select RTL and ensure that thedir
attribute is set on the storybook iframe and that the component is indeed rendered in reverse.Again, there are currently no RTL styles being applied so the component will be broken in RTL mode. This is expected.The
DownloadButton
has been converted to usetailwindcss-rtl
classes so you should be able to test against that.Checklist
Update index.md
).main
) or a parent feature branch.Developer Certificate of Origin
Developer Certificate of Origin