chore: add RTL examples for visual testing#792
Conversation
mnajdova
requested review from
dvdzkwsk,
kuzhelov,
layershifter,
levithomason and
miroslavstastny
as code owners
| </SourceRender.Consumer> | ||
| </SourceRender> | ||
| <Provider theme={{ rtl: isRtlEnabled }}> | ||
| {/*<div dir={isRtlEnabled ? 'rtl' : undefined}>*/} |
There was a problem hiding this comment.
Not sure whether we should add this wrapper div that will have dir='rtl' if rtl is enabled. We have that logic in the ComponentExample component.
There was a problem hiding this comment.
We definitely need it.
Without
With
|
|
||
| const DividerExampleShorthand = () => <Divider content="مثال النص" /> | ||
|
|
||
| export default DividerExampleShorthand |
There was a problem hiding this comment.
| export default DividerExampleShorthand | |
| export default DividerExampleRtl |
May be name should be changed?
CHANGELOG.md
Outdated
| - Fix layout of `Accordion` panel's title @kuzhelov ([#780](https://github.com/stardust-ui/react/pull/780)) | ||
|
|
||
| ### Features | ||
| - Add mechanism for adding rtl visual tests @mnajdova ([#792](https://github.com/stardust-ui/react/pull/792)) |
There was a problem hiding this comment.
I'm not sure that we should have an entry in CHANGELOG about it, there are no any benefits for user from this change
miroslavstastny
left a comment
miroslavstastny
left a comment
There was a problem hiding this comment.
I vote for adding RTL examples to docsite as well (and switch them to RTL by default)
-added rtl ecamples for the Button and Divider components -rtl examples are in rtl mode by default
|
@miroslavstastny thanks for the suggestion, I've added RTL examples (switch to RTL by default), and now when you maximize an example, if you were seeing the example in RTL the maximize example will also show it in rtl... Please take a look. |
miroslavstastny
left a comment
miroslavstastny
left a comment
There was a problem hiding this comment.
Please also edit SECTION_ORDER in gulp-example-menu.ts to show RTL below Usage section just above Performance
-changed order in gulp-example-menu
5 participants
This PR adds mechanism for adding rtl examples for visual test. The added test/examples should end with the extension
.rtl.tsx, and this is all that is necessary from developer's side (See the example for theDividerExample.rtl.tsx). Screener then will maximize this example with rtl enabled and will take screenshot of that.