chore: add RTL support to visual testing

[miroslavstastny]

Adding ?rtl=true to the URL for maximized URL, renders the example as RTL (dir=rtl + RTL styles).

For each example, Screener renders both LTR and RTL views of the example.

[codecov]

Codecov Report

Merging #98 into master will increase coverage by 0.04%.
The diff coverage is 70%.

@@            Coverage Diff             @@
##           master      #98      +/-   ##
==========================================
+ Coverage   86.27%   86.31%   +0.04%     
==========================================
  Files          39       39              
  Lines         663      665       +2     
  Branches       99      100       +1     
==========================================
+ Hits          572      574       +2     
  Misses         88       88              
  Partials        3        3

Impacted Files	Coverage Δ
src/components/Provider/Provider.tsx	60.86% <70%> (+1.77%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d1e7d42...09e773e. Read the comment docs.

[levithomason]

Can this be moved to the ExternalExampleLayout.tsx instead? Having it here will set RTL for all providers downstream. I think we only want this in specific examples, like maximized and component example.

Also, let's use query-string for parsing the string: https://www.npmjs.com/package/query-string

[miroslavstastny]

When rendering maximized example, there is only on Provider component in the React tree and that's the one in index.tsx. I was thinking about doing it in ExternalExampleLayout but that would require adding second Provider there (+div for dir="rtl"). I didn't want to do that to keep the tree as simple as possible and follow best practices we want from our users (=do not mix rtl and ltr on a single page).
Or am I missing something?

I understand that now you can set dir=rtl for the whole docsite but I don't think it's a problem (and if it is, we can add a check to do the magic only for maximize URL)

query-string package - it's readme is not clear about IE/Edge support, I will check that and use the package if possible.

[levithomason]

Planning for more names

Let's think through the cases we'll have here for naming. I think we'll have many permutations possible. How do you think we should represent the other themes in the name? Such as:

ButtonExample, Teams light
ButtonExample, Teams dark
ButtonExample, Teams contrast

ButtonExample, RTL, Teams light
ButtonExample, RTL, Teams dark
ButtonExample, RTL, Teams contrast

Explosion of images

This also raises another point, we'll have exponential explosion of examples as we move forward. I was wondering if we should consider rendering all examples on one page? So, there would be a single Button image that rendered just the actual example files, but one after the other.

Thoughts?

[miroslavstastny]

Naming

I need to check test ID format requirements but buttomexample-rtl-teamsdark looks good to me. You rarely need the test id (only to tell what example/config produced that screenshot.

Explosion

What is a validation for screener.io? Is it a single screenshot? In that case rendering all examples together would make sense for quota reasons.
The drawback is that (1) it would be more time consuming to say which example failed and (2) whenever you add an example to a component, the whole validation for that component fails.

[kuzhelov]

totally agree - although there are few slight drawbacks related to the approach of displaying several variations on the same page, at the same time the amount of benefits clearly outweight

[levithomason]

This is great! I have been wanting to do this for the ComponentExample.tsx as well.

Currently, when you share a link the RTL setting is lost. Also, when we add theme selection, that will be lost. I have been thinking that the component example should use the query string for setting options like RTL and theme. We can add this part later. Just noting to keep us on the same page.

[miroslavstastny]

What do you mean by sharing a link?
For theme I thought we would do the same (add query param to define a theme)

[levithomason]

See #106. I think we need to do something like this for the future.

[levithomason]

What do you mean by sharing a link?

By clicking the "Permalink" button or copying the URL and sharing it.

[layershifter]

Closing for housekeeping, was done in #792 🛰