Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add visual regression testing for RTL/bidi styles #14478

Closed
Tracked by #14477
tay1orjones opened this issue Aug 21, 2023 · 2 comments
Closed
Tracked by #14477

Add visual regression testing for RTL/bidi styles #14478

tay1orjones opened this issue Aug 21, 2023 · 2 comments

Comments

@tay1orjones
Copy link
Member

tay1orjones commented Aug 21, 2023

Once #13619 is finished, the out of the box right-to-left (RTL) styling should be significantly improved.

From there, it would be beneficial if we visually snapshotted the default stories in RTL mode. With the RTL switcher now in the storybook (#13620), this setting is parameterized into the url as &globals=dir:rtl

e.g.

https://deploy-preview-14464--carbon-components-react.netlify.app/?path=/story/components-button--default&globals=dir:rtl

This means we can easily add a VRT test covering every "default" story we have in RTL mode to ensure a baseline of stability visually when it comes to right-to-left styles.

@github-project-automation github-project-automation bot moved this to Triage in Roadmap Aug 21, 2023
@tay1orjones tay1orjones moved this from Triage to Later in Roadmap Aug 21, 2023
@tay1orjones tay1orjones moved this to ⏱ Backlog in Design System Aug 21, 2023
@tay1orjones tay1orjones changed the title Add visual regression testing for rtl/bidi styles Add visual regression testing for RTL/bidi styles Aug 21, 2023
@sstrubberg sstrubberg moved this from Later to Next in Roadmap Aug 22, 2023
@tay1orjones tay1orjones moved this from ⏱ Backlog to 🪆 Needs Refined in Design System Sep 6, 2023
@tay1orjones
Copy link
Member Author

This needs to be refined out and determine if we can/want to contain the additional snapshot load of putting vrt on RTL for every default story.

  • Is there a priority of some components or states we'd like to vrt more than others?
  • Will every component actually need this? Which components are most important?
  • Any component with specific RTL overrides should be snapshotted
  • Could we do a mega-snapshot with many components all on one page?

@tay1orjones
Copy link
Member Author

After discussing again with the team:

  • The linter we have will now fail PRs if they don't use logical properties
  • The bulk of issues we found with regards to right-to-left mode were solved by simply updating to use logical properties
  • There isn't a high likelihood of defects resulting from logical properties, and if so, they'll be simple to fix via styling or tweaks to the logical property declarations and values

For all these reasons we feel VRT snapshotting components in right-to-left mode isn't necessary at this time. Additionally, we'd like to get folks using the latest version of our styles that use logical properties to get feedback. We can always revisit this at a later time.

@tay1orjones tay1orjones closed this as not planned Won't fix, can't repro, duplicate, stale Sep 19, 2023
@github-project-automation github-project-automation bot moved this from Next to Completed in Roadmap Sep 19, 2023
@github-project-automation github-project-automation bot moved this from 🪆 Needs Refined to ✅ Done in Design System Sep 19, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Archived in project
Archived in project
Development

No branches or pull requests

1 participant