Tailwind & UI library: Improve RTL support #21909

igorschoester · 2024-12-10T12:21:12Z

Warning

Please don't merge yet. We need a matching Premium PR to prevent some clashing directions.

Context

RTL support is something we relied on the Grunt process for. A plugin built process. However, within separate package we already want to support RTL "out of the box". But the grunt task is too greedy in its reversal, resulting in reversed RTL, e.g. back to LTR again.
This PR aims to make the UI library support RTL out of the box. Stopping the interference from the plugin. And where needed (most likely lots of places) fix the places where the grunt RTL did the work for us in the plugin.

Some sources:

https://tailwindcss.com/docs/hover-focus-and-other-states#rtl-support
Nice list of logical properties support in TailwindCSS: Add logical properties support for inline direction tailwindlabs/tailwindcss#10166 landing in https://github.com/tailwindlabs/tailwindcss/releases/tag/v3.3.0
MDN on logical properties: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values
Our "default" Grunt RTL CSS config: https://github.com/Yoast/plugin-grunt-tasks/blob/develop/config/rtlcss.js#L47
Our assets trying to load in -rtl stylesheet: https://github.com/Yoast/wordpress-seo/blob/trunk/admin/class-admin-asset-seo-location.php#L77

Note

Disclaimer: I'm not that familiar with RTL, trying to just fix the obvious.
There are nuances like a HTML code block that might need direction: ltr enforcing. However, due to me not knowing if that is always the case I left things like that out. Maybe @vraja-pro has a better view on those for a follow-up 😉

Summary

This PR can be summarized in the following changelog entry:

Improves RTL support in certain areas like the mobile menu in dashboard and settings.
[@yoast/ui-library 0.1.0 enhancement] Improves the RTL support.
[@yoast/ui-library 0.1.0 enhancement] Upgrades the Root reset styling.
[@yoast/ui-library 0.1.0 enhancement] Adds optional onClear to the Autocomplete. If needing to know the difference between null value and the user clearing the value.
[@yoast/ui-library 0.1.0 bugfix] Removes the empty space after the input inside the Autocomplete. Especially visible when using nullable.
[@yoast/ui-library 0.1.0 bugfix] Fixes a bug in the storybook where the RTL styling would not affect the dialogs.
[@yoast/postcss-preset 0.1.0 other] Upgrades TailwindCSS to v3.4.16.
[@yoast/related-keyphrase-suggestions 0.1.0 other] Upgrades TailwindCSS to v3.4.16.
[@yoast/tailwindcss-preset 1.0.0 enhancement] Upgrades peer dependency tailwindcss from ^3.2.4 to ^3.3.7. 3.3.0 is the version that is improving the RTL support through logical properties (start/end).

Relevant technical choices:

Excluding Tailwind stylesheet from being processed by Grunt RTL, preventing "double" RTL == LTR again. The UI library should be self reliant for RTL already. This has consequences for devs though. We can no longer rely on the auto direction changes of the Grunt RTL CSS plugin and need to ensure ourselves. If we adapt to logical properties this should be straight forward though.
Not sure about the breaking change in the TailwindCSS preset package. Nothing is preventing us from upgrading to the wanted version. Just that the UI library RTL CSS would not work if actually that version. So seems safer to just require it to the minimum version we need for logical properties.
Used the same latest version for TailwindCSS and forms in each package in this monorepo. In order to not have to test all the PostCSS version control things? Not sure how even.

Test instructions

Test instructions for the acceptance test before the PR gets merged

This PR can be acceptance tested by following these steps:

The headings below are structured per commit, which is alphabetical per elements and then components.
This was just the easiest for me to go about the code changes. However, in the plugin, there is more to it than the code changes. Therefor, the latter ones are more per plugin page/section.

Important

It makes sense to activate our other add-ons too.
The instructions are mostly from what is changes.
However, please check for things that I might've missed too!!

Note

Please ignore LTR on code HTML
They are added through WP style. I'm told this makes sense for code blocks.

Tip

Switching between RTL

the fake method by using the RTL tester plugin to get a button in the admin bar
the real method by opening /wp-admin/options-general.php in a new tab. Besides manually changing the language, you can also do the same by running some JS in the console (in case you can't read the language 😁 ):
- Hebrew: document.getElementById("WPLANG").value = "he_IL"; document.getElementById("submit").click()
- Default: document.getElementById("WPLANG").value = ""; document.getElementById("submit").click()

Tip

For devs:

For premium: you can symlink this PR free inside the vendor/yoast folder and build (after building Free first).
UI library: in free run the UI library storybook: yarn workspace @yoast/ui-library storybook

Update tailwindcss and @tailwindcss/forms

Upgrading the packages in the plugin and all the tooling. And updating the style reset in the Root of the UI library. In theory this can impact everything inside the yst-root.

Technically anything can happen here. But in reality I would not spend too much time here. Some quick regression tests should suffice.

Where is the Root from the UI library used?

Yoast admin (all our JS/React pages)

General page
Settings page
Integrations page
Academy page
Support page

Editors

Errors: maybe skip these if the rest works? 😇
- Metabox error fallback
- Sidebar error fallback
- Elementor error fallback
Semrush related keyphrases modal content
WooCommerce upsell
Social upsell

Other

Any page with introductions

Refactor Autocomplete element

Specifically the icon at the "end" and when it can be cleared (nullable).

Go to the dashboard: /wp-admin/admin.php?page=wpseo_dashboard
Filtering on a term should show the clear button
Verify the space between the input text and the button is not needlessly big like before
Verify the clear button focus is mostly the icon and all the height (a bit stranger than normal icon buttons)
Repeat for RTL or LTR
Devs: verify in the Autocomplete element and Autocomplete field components stories in the storybook for both RTL and LTR

Fix loading button RTL

Specifically the distance from the spinner to the text of the button.

Go to settings /wp-admin/admin.php?page=wpseo_page_settings
Change a setting
Save and look at the loading/spinner inside the button
Repeat for RTL or LTR
Devs: verify the button element' isLoading variant story in the storybook for both RTL and LTR

Fix checkbox RTL

Not actually used in the plugin. But specifically the distance between the label and the checkbox.

Devs: verify the checkbox element story in the storybook for both RTL and LTR

Fix validation input icon placement

Fix validation RTL

Good to test these together probably.
For the icon placement look out for the distance from the top of the validation icon to the top of the input.
For the other it is the distance that is created for the icon at the end of the input and the position of the icon itself.

Go to site representation settings: /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
Change the X or Twitter URL to include unsupported characters like $#%$#%
Save and you will get the error validation variant

* Repeat for RTL or LTR * Devs: verify the text field component's validation story in the storybook for both RTL and LTR

Fix file input RTL

Fix file import RTL

Combining these here. Only in Shopify and UI library storybook.
Look out for the labels text being in the expected direction.
Look out for the feedback header spacing (distance between the icons and progressbar):

Devs: verify the file input element story in the storybook for both RTL and LTR
Devs: verify the file import component story in the storybook for both RTL and LTR

Fix radio RTL

Specifically the distances between the radios and the labels. And the check in the inline block variant.

Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
The site represented is a normal radio site/user
Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-basics
The separator is the inline block variant
Repeat for RTL or LTR
Devs: verify the radio element and radio group component stories in the storybook for both RTL and LTR

Fix select RTL

Fix select field story RTL

Combined checks. Not actually be used in the plugin yet.
The text is start aligned and the icon is end aligned.
For the story: the badge should be spaced away from the label

Devs: verify the select element and select field component stories in the storybook for both RTL and LTR
- Specifically also check the with label suffix story for the badge spacing

Fix skeleton loader story RTL

Only touched the UI library storybook part. No need to check the plugin.
Specifically, the spacing between the round profile and the rest.

Devs: verify the skeleton loader element' Profile story in the storybook for both RTL and LTR

Fix table RTL

The rounding of the header/row corners and the alignment of the header text.

Go to /wp-admin/admin.php?page=wpseo_page_settings#/rss
Verify it looks as it should
Repeat for RTL or LTR
Devs: verify the table element story in the storybook for both RTL and LTR

Refactor tag input style

The height of the tags themselves and the padding at the end / "after" the remove (x) button.

Go to /wp-admin/admin.php?page=wpseo_page_settings#/post-type/posts#input-wpseo_titles-page-analyse-extra-post
Play around with some tags
Verify it looks as it should
Repeat for RTL or LTR
Devs: verify the tag input element and tag field component stories in the storybook for both RTL and LTR

Fix toast description RTL

A toast description (list) should now have the distance between the discs and the edge correct in RTL.
Used in the Notification of the UI library, when passing a description. Which I don't think we use in a plugin.

Devs: verify the toast element' with description and notifications component' description list stories in the storybook for both RTL and LTR

Refactor toggle RTL

The handle when checked should move the correct way.

Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-features (also found on the integrations page)
Toggle a toggle 😄
Repeat for RTL or LTR
Devs: verify the toggle element and toggle field component stories in the storybook for both RTL and LTR

Fix tooltip RTL

Fix toggle field description RTL

Combining these two changes.
The position of the tooltip compared to the parent, the arrow of the tooltip. Basically all the positioning.
For the toggle field: the distance from the description and the toggle itself should be correct.

Go to the dashboard: /wp-admin/admin.php?page=wpseo_dashboard
Click before not analyzed and tab (easier to see with the focus visible outline)
Verify the tooltip is in the middle and looks as expected

* You could check the editor `Get related keyphrase` semrush integration table for a to the middle positioning

* Repeat for RTL or LTR * Devs: verify the tooltip element story in the storybook for both RTL and LTR * Verify all the positions * Devs: verify the toggle field component story in the storybook for both RTL and LTR

Fix storybook preview HTML dir

Devs: for example in the modal story you would now get the modal itself in RTL too. You can check that the html in the iframe receives the dir attribute as per the direction toggle.

Fix feature upsell RTL

The lock icon moving slightly more to the border of the button (away from the text). And only for the storybook, without any text it does not move away anymore, so centered now.

Deactivate Premium
There are multiple instances, but lets go to /wp-admin/admin.php?page=wpseo_page_settings#/crawl-optimization#input-wpseo-deny_google_extended_crawling
Repeat for RTL or LTR
Activate Premium again
Devs: verify the feature upsell component story in the storybook for both RTL and LTR

Fix modal close RTL

The close button alignment should be towards the end.

Go to settings: /wp-admin/admin.php?page=wpseo_page_settings#/site-features
Change a settings
Click discard changes at the bottom
Verify the close button in this confirmation dialog
Also used in the editors for the AI fix assessments and AI generator modals. But they all work the same?
Repeat for RTL or LTR
Devs: verify the modal component story in the storybook for both RTL and LTR

Fix notifications bottom-left in RTL

Should be already checked due to the previous steps. But you can repeat the X/Twitter field error to get a notification pop up again.

Devs: verify the notifications component story in the storybook for both RTL and LTR

Fix pagination RTL

Not used in the plugin.
Look for the border radius/rounding and there should be no "double" borders.

Devs: verify the pagination component story in the storybook for both RTL and LTR
- Flip through the pages a bit to verify no double borders

Fix sidebar navigation RTL

Collapsible chevron icon spacing should be to the end.
The mobile menu close should be next to the menu (not under it?).
The indentation of the menu items should be correct.

Used in both Dashboard and settings. But settings has submenu items, so go to: /wp-admin/admin.php?page=wpseo_page_settings#/site-features
Verify the 3 things above
Repeat for RTL or LTR
Devs: verify the sidebar navigation component story in the storybook for both RTL and LTR

Exclude Tailwind from Grunt RTL build

This is potentially more invasive. As it affect ALL the previously thought fixed RTL things.
Some context. The Grunt RTL task basically reversed all the known LTR styles. This interferes with the standalone RTL of the UI library (as a package). So the goal is that this PR makes that RTL pass irrelevant. So please verify if that is true.

We need to go over basically everywhere we use the UI library/Tailwind style. I tried to do this and fix all the things I ran into, related to this change or not 😅
So please pay some extra attention to spacing, icons appearing in expected order, borders.

Verify the css/dist folder does not include a tailwind-xxx-RCx-rtl.css file (note the -rtl at the end).

General page

Go to /wp-admin/admin.php?page=wpseo_dashboard
Best to reset some notifications and ensure you have some, using the Test helper.
Deactivate Premium
Verify the webinar header should is not centered anymore in RTL
Verify the upsell sidebar location and contents
Activate Premium
Go to the Alert center
Hide a notification or problem
Verify the collapsible icon is at the end
Verify a single notification or problem' contents is spaced as expected, hidden within the collapsible and outside
Go to the FTC
There are lots of little tweaks here for RTL
Please walk through the whole flow, mostly looking at the spacing between icons and the positioning of text

Settings page

Deactivate Premium
Go to /wp-admin/admin.php?page=wpseo_page_settings
Verify the location of the upsell sidebar
Verify the upsell footer' indenting of the list discs (inline with title, same distance from edge)
Go to /wp-admin/admin.php?page=wpseo_page_settings#/site-features
Verify the lock in the locked buttons are slightly towards the "start"
Verify the learn more arrows are pointing towards the "end", away from the copy
Verify the XML sitemaps' icon is pointing towards the "end"
Activate Premium
Deactivate Local
Verify any badges are at the "end" of the cards
Go to the site representation: /wp-admin/admin.php?page=wpseo_page_settings#/site-representation
Verify the position of the link to add a new user
Verify the space between the premium badge and text (Mastadon label + two organization section headers)
Verify the plus icon for the Add another profile is slightly towards the "start" of the button
With a change:
- Verify the spacing between the save and discard buttons
- Click the discard changes button
- Verify the distance between the alert icon and the title + description is there
- Verify the title + description is aligned to the start -- (no need to test, but centered on mobile/small screen)
- Also already tested above: the close button
Activate Local
Fill in some non-urls and/or unsupported characters in the a couple social profiles
Try to save
Verify the list discs are aligned properly
Look at the search in the menu
Verify the icon spacing and the shortcut is at the end
Open the search dialog
Verify the icon and button spacing again, including closing at the end
Search for breadcrumbs in the language you are testing with as the search is translated (פירורי לחם in Hebrew )
Verify the space between the post type code and text (Note: I didn't use ms class here as that failed 🤯 )
Go to the breadcrumbs page (click on the search?)
Verify the labels also have the correct space between the text and post type code for both post types and taxonomies
Go to /wp-admin/admin.php?page=wpseo_page_settings#/crawl-optimization#input-wpseo-deny_google_extended_crawling
Verify the space between the label' text and premium badge
Verify the same for the label of /wp-admin/admin.php?page=wpseo_page_settings#/site-basics#input-wpseo_titles-publishing_principles_id
Verify the same for the label of /wp-admin/admin.php?page=wpseo_page_settings&d=rtl#/post-type/posts#input-wpseo_titles-page-analyse-extra-post

Installation page

Go to /wp-admin/admin.php?page=wpseo_installation_successful_free
Verify the arrows are pointing away from the text / to the purple card
Verify the start FTC button has the correct spacing between the text and the arrow

Academy page

Go to /wp-admin/admin.php?page=wpseo_page_academy
Verify the external link icon is pointing up and away from the text
Verify the external link icon has slightly more distance from the text and less from the edge/end (weird to spot with centering)
Verify the premium badge is at the top and end of the cards
Disable Premium and refresh the academy page
Verify the lock icon is slighly more to the start of the button

Editor

Edit a post in the block or classic editor
Deactivate Premium
Verify the metabox buttons' icon spacing and text alignment
For the metabox: verify the space between the lock icon and the text within the Premium badge too
Ensure you have an introduction text that does not have the focus keyphrase in it (change focus keyphrase?)
Go to the SEO analysis
Click an fix assessments upsell button (magic wand with tiny lock icon)
In that upsell modal:
- Verify the beta badge' position (at the "end")
- Verify the lock icon is spaced correctly and a tiny bit towards the edge
- Click to see the video
- Verify the beta badge again
Click on the SEO title or descriptions' Use AI button
In that upsell modal, verify the same as above for the fix assessments modal; Just the position of the beta itself is within the image now
Activate Premium
Check again for the Premium ones
Unresolved: Primary taxonomy picker's external link icon (due to WP component + styling)
Deactivate Premium
Deactivate Yoast WooCommerce SEO
Edit a product
Verify the lock icon tiny bit to the "start" for the upsell in
Activate Yoast WooCommerce SEO
Edit a post in Elementor
Make sure you get a highlighting suggestion (long sentences?)
Verify the lock icon on the eye/highlight button is at the "end", towards the page content
Activate Premium again
Note: please ignore the text-right on the semrush table tooltip. Will be fixed later by removing fixed widths so it relies on the justify-end.

Integration page

Go to /wp-admin/admin.php?page=wpseo_integrations
Non devs might need a multisite and some playing around with the network activated to really test all the badges, but I reckon this is overkill 😅
Badges to verify are located at the "end": Network disabled, New
For a Algolia, WooCommerce, any togglable and any non-toggleable integration
Disable Premium
Verify the lock icon spacing and should be tiny bit towards the "start" of the button

Support page

Deactivate Premium
Go to /wp-admin/admin.php?page=wpseo_page_support
Verify the sidebar placement
Verify the arrows and spacing between them and the text in the list, in the cards and in the support button at the bottom
Verify the lock on the bottom support upsell spacing and slighty towards the start (away from the text)

Relevant test scenarios

Changes should be tested with the browser console open
Changes should be tested on different posts/pages/taxonomies/custom post types/custom taxonomies
Changes should be tested on different editors (Default Block/Gutenberg/Classic/Elementor/other)
Changes should be tested on different browsers
Changes should be tested on multisite

Test instructions for QA when the code is in the RC

QA should use the same steps as above.

QA can test this PR by following these steps:

Impact check

This PR affects the following parts of the plugin, which may require extra testing:

All the Tailwind, UI library and related keyphrases (Semrush) styling. And in particular when using a RTL locale.

UI changes

This PR changes the UI in the plugin. I have added the 'UI change' label to this PR.

Other environments

This PR also affects Shopify. I have added a changelog entry starting with [shopify-seo], added test instructions for Shopify and attached the Shopify label to this PR.

Documentation

I have written documentation for this change. For example, comments in the Relevant technical choices, comments in the code, documentation on Confluence / shared Google Drive / Yoast developer portal, or other.

Quality assurance

I have tested this code to the best of my abilities.
During testing, I had activated all plugins that Yoast SEO provides integrations for.
I have added unit tests to verify the code works as intended.
If any part of the code is behind a feature flag, my test instructions also cover cases where the feature flag is switched off.
I have written this PR in accordance with my team's definition of done.
I have checked that the base branch is correctly set.

Innovation

No innovation project is applicable for this PR.
This PR falls under an innovation project. I have attached the innovation label.
I have added my hours to the WBSO document.

Fixes #21887

coveralls · 2024-12-10T12:36:32Z

Pull Request Test Coverage Report for Build 5752a29193345ecc8601ed81bb6c582a081ace8c

Details

0 of 2 (0.0%) changed or added relevant lines in 1 file are covered.
No unchanged relevant lines lost coverage.
Overall first build on 21887-rtl-support-for-ui-library at 42.275%

Changes Missing Coverage	Covered Lines	Changed/Added Lines	%
packages/js/src/first-time-configuration/tailwind-components/base/text-input.js	0	2	0.0%

Totals
Change from base Build 1ab634fceb64caabaf4b78799fbfe37a15c5973b:	42.3%
Covered Lines:	20632
Relevant Lines:	45551

💛 - Coveralls

We need tailwindcss >= 3.3.0 for the RTL support through logical properties (start/end)

* introduce `onClear` function to have a distinction between `null` value or clear intent from the user * move to classes for easier overrides * fix the big empty space after the input * using start/end for better RTL support * add some boolean variables to try and make it a bit clearer to what is going on

* top-2.5 is 0.625rem, meaning it is positioned slightly more to the top now * this makes it centered with the default input height

* use rem instead of px * use Tailwind instead of CSS

* fix stylesheet whitespace

* using modifier so it works too if the RTL is put ON the yst-root class

The portals rely on the HTML dir being accurate. This useEffect updates it. Removing the need for the dir on the Root

* plus no more negative margin without card text

E.g. more like bottom-start in the newer language

* border radius * spacing (border overlap)

* collapsible chevron * mobile menu close * list indentation

Overriding the `src` from the grunt-plugin-tasks config

* collapsible (alerts) * notices close * notices content padding/indent

Not picked up by the Grunt RTL task Already an existing problem outside of this PR

igorschoester added the changelog: non-user-facing Needs to be included in the 'Non-userfacing' category in the changelog label Dec 10, 2024

igorschoester force-pushed the 21887-rtl-support-for-ui-library branch from 40de914 to ec130f6 Compare December 10, 2024 12:24

igorschoester force-pushed the 21887-rtl-support-for-ui-library branch 6 times, most recently from 35b98d4 to 8eae9d9 Compare December 17, 2024 11:04

igorschoester force-pushed the 21887-rtl-support-for-ui-library branch 2 times, most recently from 2386521 to 7027483 Compare December 18, 2024 10:03

igorschoester marked this pull request as ready for review December 18, 2024 13:54

igorschoester requested a review from a team as a code owner December 18, 2024 13:54

igorschoester requested a review from vraja-pro December 18, 2024 13:54

igorschoester assigned vraja-pro Dec 18, 2024

igorschoester added 15 commits December 19, 2024 11:19

Update tailwindcss and @tailwindcss/forms

d572bbf

We need tailwindcss >= 3.3.0 for the RTL support through logical properties (start/end)

Fix loading button RTL

39dc7b1

Fix checkbox RTL

a1fca15

Fix validation input icon placement

89015c1

* top-2.5 is 0.625rem, meaning it is positioned slightly more to the top now * this makes it centered with the default input height

Fix file input RTL

d29ed2f

Fix radio RTL

e1357bc

Fix select RTL

bc4983c

Fix skeleton loader story RTL

92e1a97

Fix table RTL

63de28e

Refactor tag input style

06f9b2c

* use rem instead of px * use Tailwind instead of CSS

Fix toast description RTL

6fc6c0e

* fix stylesheet whitespace

Refactor toggle RTL

9f31266

* using modifier so it works too if the RTL is put ON the yst-root class

Fix tooltip RTL

248fa08

Fix validation RTL

f6b6cac

igorschoester added 20 commits December 19, 2024 11:19

Fix storybook preview HTML dir

a58d9e3

The portals rely on the HTML dir being accurate. This useEffect updates it. Removing the need for the dir on the Root

Fix feature upsell RTL

52362a2

* plus no more negative margin without card text

Fix file import RTL

90ae565

Fix modal close RTL

198f11e

Fix notifications bottom-left in RTL

5ed775d

E.g. more like bottom-start in the newer language

Fix pagination RTL

5272e2e

* border radius * spacing (border overlap)

Fix select field story RTL

cffb6b4

Fix sidebar navigation RTL

8a554f5

* collapsible chevron * mobile menu close * list indentation

Fix toggle field description RTL

5c753c2

Exclude Tailwind from Grunt RTL build

b46c84d

Overriding the `src` from the grunt-plugin-tasks config

Fix installation page RTL

7d1373c

Fix academy page RTL

316c654

Fix dashboard scores RTL

65b07db

Fix FTC RTL

9568738

Fix general page RTL

e8c3243

* collapsible (alerts) * notices close * notices content padding/indent

Fix notice header RTL

c4dc66a

Not picked up by the Grunt RTL task Already an existing problem outside of this PR

Fix settings page RTL

dbc9711

Fix editor

c85d568

Fix integration page RTL

7c195d7

Fix support page RTL

c8d2630

igorschoester force-pushed the 21887-rtl-support-for-ui-library branch from 7027483 to c8d2630 Compare December 19, 2024 10:20

igorschoester changed the title ~~UI library: Improve RTL support~~ Tailwind & UI library: Improve RTL support Dec 19, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Tailwind & UI library: Improve RTL support #21909

Tailwind & UI library: Improve RTL support #21909

igorschoester commented Dec 10, 2024 •

edited

Loading

coveralls commented Dec 10, 2024 •

edited

Loading

Tailwind & UI library: Improve RTL support #21909

Are you sure you want to change the base?

Tailwind & UI library: Improve RTL support #21909

Conversation

igorschoester commented Dec 10, 2024 • edited Loading

Context

Summary

Relevant technical choices:

Test instructions

Test instructions for the acceptance test before the PR gets merged

Update tailwindcss and @tailwindcss/forms

Yoast admin (all our JS/React pages)

Editors

Other

Refactor Autocomplete element

Fix loading button RTL

Fix checkbox RTL

Fix validation input icon placement

Fix validation RTL

Fix file input RTL

Fix file import RTL

Fix radio RTL

Fix select RTL

Fix select field story RTL

Fix skeleton loader story RTL

Fix table RTL

Refactor tag input style

Fix toast description RTL

Refactor toggle RTL

Fix tooltip RTL

Fix toggle field description RTL

Fix storybook preview HTML dir

Fix feature upsell RTL

Fix modal close RTL

Fix notifications bottom-left in RTL

Fix pagination RTL

Fix sidebar navigation RTL

Exclude Tailwind from Grunt RTL build

General page

Settings page

Installation page

Academy page

Editor

Integration page

Support page

Relevant test scenarios

Test instructions for QA when the code is in the RC

Impact check

UI changes

Other environments

Documentation

Quality assurance

Innovation

coveralls commented Dec 10, 2024 • edited Loading

Pull Request Test Coverage Report for Build 5752a29193345ecc8601ed81bb6c582a081ace8c

Details

💛 - Coveralls

igorschoester commented Dec 10, 2024 •

edited

Loading

coveralls commented Dec 10, 2024 •

edited

Loading