Skip to content

Commit 01c6afd

Browse files
vraja-provraja-pro
authored
Merge pull request #21909 from Yoast/21887-rtl-support-for-ui-library
Tailwind & UI library: Improve RTL support
2 parents 25587e2 + 9a5f5e6 commit 01c6afd

File tree

94 files changed

+427
-393
lines changed

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

94 files changed

+427
-393
lines changed

‎admin/class-admin-asset-manager.php

+5
Original file line numberDiff line numberDiff line change
@@ -658,6 +658,11 @@ protected function styles_to_be_registered() {
658658
[
659659
'name' => 'tailwind',
660660
'src' => 'tailwind-' . $flat_version,
661+
// Note: The RTL suffix is not added here.
662+
// Tailwind and our UI library provide styling that should be standalone compatible with RTL.
663+
// To make it easier we should use the logical properties and values when possible.
664+
// If there are exceptions, we can use the Tailwind modifier, e.g. `rtl:yst-space-x-reverse`.
665+
'rtl' => false,
661666
],
662667
[
663668
'name' => 'new-settings',

‎config/grunt/task-config/rtlcss.js

+11
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
// https://github.com/MohammadYounes/grunt-rtlcss
2+
module.exports = {
3+
build: {
4+
src: [
5+
"**/*.css",
6+
"!**/*-rtl.css",
7+
// Exclude UI library CSS files, as they are already RTL compatible.
8+
"!tailwind-*.css",
9+
],
10+
},
11+
};

‎css/src/admin-global.css

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json

+1-1
Original file line numberDiff line numberDiff line change
@@ -40,7 +40,7 @@
4040
"@babel/core": "^7.18.5",
4141
"@slack/webhook": "^5.0.2",
4242
"@tailwindcss/container-queries": "^0.1.1",
43-
"@tailwindcss/forms": "^0.5.2",
43+
"@tailwindcss/forms": "^0.5.9",
4444
"@wordpress/dependency-extraction-webpack-plugin": "^4.28.0",
4545
"@wordpress/scripts": "^26.16.0",
4646
"@yoast/babel-preset": "^1.1.1",

‎packages/js/src/academy/app.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -267,7 +267,7 @@ const App = () => {
267267
/>
268268

269269
{ shouldShowPremiumBadge( course.dependencies, isPremium ) && (
270-
<div className="yst-absolute yst-top-2 yst-right-2 yst-flex yst-gap-1.5">
270+
<div className="yst-absolute yst-top-2 yst-end-2 yst-flex yst-gap-1.5">
271271
<Badge size="small" variant="upsell">{ __( "Premium", "wordpress-seo" ) }</Badge>
272272
</div>
273273
) }
@@ -291,7 +291,7 @@ const App = () => {
291291
__( "(Opens in a new browser tab)", "wordpress-seo" )
292292
}
293293
</span>
294-
<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ml-1 yst-icon-rtl" />
294+
<ArrowSmRightIcon className="yst-h-4 yst-w-4 yst-ms-1 yst-icon-rtl" />
295295
</Link> }
296296
</Card.Content>
297297
<Card.Footer>
@@ -309,7 +309,7 @@ const App = () => {
309309
rel="noopener"
310310
{ ...premiumUpsellConfig }
311311
>
312-
<LockOpenIcon className="yst-w-5 yst-h-5 yst--ml-1 yst-shrink-0" { ...svgAriaProps } />
312+
<LockOpenIcon className="yst-w-5 yst-h-5 yst--ms-1 yst-shrink-0" { ...svgAriaProps } />
313313
{ sprintf(
314314
/* translators: %1$s expands to Premium. */
315315
__( "Unlock with %1$s", "wordpress-seo" ),
@@ -331,7 +331,7 @@ const App = () => {
331331
rel="noopener"
332332
>
333333
{ __( "Start the course", "wordpress-seo" ) }
334-
<ExternalLinkIcon className="yst--mr-1 yst-ml-1 yst-h-5 yst-w-5 yst-text-white" />
334+
<ExternalLinkIcon className="yst--me-1 yst-ms-1 yst-h-5 yst-w-5 yst-text-white rtl:yst-rotate-[270deg]" />
335335
</Button>
336336
)
337337
}

‎packages/js/src/components/MetaboxButton.js

+5-2
Original file line numberDiff line numberDiff line change
@@ -12,7 +12,8 @@ import PropTypes from "prop-types";
1212
const MetaboxButtonText = ( { className, ...props } ) => (
1313
<span
1414
className={ classNames(
15-
"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-left",
15+
"yst-grow yst-overflow-hidden yst-overflow-ellipsis yst-whitespace-nowrap yst-font-wp",
16+
"yst-text-[#555] yst-text-base yst-leading-[normal] yst-subpixel-antialiased yst-text-start",
1617
className
1718
) }
1819
{ ...props }
@@ -40,7 +41,9 @@ export const MetaboxButton = ( { className, ...props } ) => (
4041
<button
4142
type="button"
4243
className={ classNames(
43-
"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pr-4 yst-pl-6 yst-space-x-2 yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0] focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
44+
"yst-flex yst-items-center yst-w-full yst-pt-4 yst-pb-4 yst-pe-4 yst-ps-6 yst-space-x-2 rtl:yst-space-x-reverse",
45+
"yst-border-t yst-border-t-[rgb(0,0,0,0.2)] yst-rounded-none yst-transition-all hover:yst-bg-[#f0f0f0]",
46+
"focus:yst-outline focus:yst-outline-[1px] focus:yst-outline-[color:#0066cd] focus:-yst-outline-offset-1 focus:yst-shadow-[0_0_3px_rgba(8,74,103,0.8)]",
4447
className
4548
) }
4649
{ ...props }

‎packages/js/src/components/WooCommerceUpsell.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -19,7 +19,7 @@ const WooCommerceUpsell = ( { link, text } ) => {
1919
target="_blank"
2020
rel="noopener"
2121
>
22-
<LockOpenIcon className="yst-w-4 yst-h-4 yst--ml-1 yst-shrink-0" />
22+
<LockOpenIcon className="yst-w-4 yst-h-4 yst--ms-1 yst-shrink-0" />
2323
{ sprintf(
2424
/* translators: %1$s expands to Yoast WooCommerce SEO. */
2525
__( "Unlock with %1$s", "wordpress-seo" ),

‎packages/js/src/components/contentAnalysis/Results.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -98,7 +98,7 @@ class Results extends Component {
9898
/>
9999
{ this.props.shouldUpsellHighlighting &&
100100
<div className="yst-root">
101-
<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--right-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
101+
<Badge className="yst-absolute yst-px-[3px] yst-py-[3px] yst--end-[6.5px] yst--top-[6.5px]" size="small" variant="upsell">
102102
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-shrink-0" role="img" aria-hidden={ true } focusable={ false } />
103103
</Badge>
104104
</div>

‎packages/js/src/components/modals/InternalLinkingSuggestionsUpsell.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -95,7 +95,7 @@ export const InternalLinkingSuggestionsUpsell = () => {
9595
{ __( "Internal linking suggestions", "wordpress-seo" ) }
9696
</MetaboxButton.Text>
9797
<Badge size="small" variant="upsell">
98-
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
98+
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
9999
<span>Premium</span>
100100
</Badge>
101101
</MetaboxButton>

‎packages/js/src/components/modals/KeywordUpsell.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,7 @@ const KeywordUpsell = () => {
7676
{ __( "Add related keyphrase", "wordpress-seo" ) }
7777
</MetaboxButton.Text>
7878
<Badge size="small" variant="upsell">
79-
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
79+
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
8080
<span>Premium</span>
8181
</Badge>
8282
</MetaboxButton>

‎packages/js/src/components/modals/PremiumSEOAnalysisModal.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -61,7 +61,7 @@ const PremiumSEOAnalysisModal = ( { location } ) => {
6161
{ __( "Premium SEO analysis", "wordpress-seo" ) }
6262
</MetaboxButton.Text>
6363
<Badge size="small" variant="upsell">
64-
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-mr-1 yst-shrink-0" { ...svgAriaProps } />
64+
<LockClosedIcon className="yst-w-2.5 yst-h-2.5 yst-me-1 yst-shrink-0" { ...svgAriaProps } />
6565
<span>Premium</span>
6666
</Badge>
6767
</MetaboxButton>

‎packages/js/src/dashboard/scores/components/score-list.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ import { __ } from "@wordpress/i18n";
1313
const CLASSNAMES = {
1414
listItem: "yst-flex yst-items-center yst-py-3 first:yst-pt-0 last:yst-pb-0 yst-border-b last:yst-border-b-0",
1515
score: "yst-shrink-0 yst-w-3 yst-aspect-square yst-rounded-full",
16-
label: "yst-ml-3 yst-mr-2",
16+
label: "yst-ms-3 yst-me-2",
1717
};
1818

1919
/**
@@ -29,8 +29,8 @@ export const ScoreListSkeletonLoader = ( { className } ) => (
2929
>
3030
<SkeletonLoader className={ CLASSNAMES.score } />
3131
<SkeletonLoader className={ CLASSNAMES.label }>{ label }</SkeletonLoader>
32-
<SkeletonLoader className="yst-w-7 yst-mr-3">1</SkeletonLoader>
33-
<SkeletonLoader className="yst-ml-auto yst-button yst-button--small">{ __( "View", "wordpress-seo" ) }</SkeletonLoader>
32+
<SkeletonLoader className="yst-w-7 yst-me-3">1</SkeletonLoader>
33+
<SkeletonLoader className="yst-ms-auto yst-button yst-button--small">{ __( "View", "wordpress-seo" ) }</SkeletonLoader>
3434
</li>
3535
) ) }
3636
</ul>
@@ -46,7 +46,7 @@ const ScoreListItemContent = ( { score } ) => (
4646
<Label as="span" className={ classNames( CLASSNAMES.label, "yst-leading-4 yst-py-1.5" ) }>
4747
{ SCORE_META[ score.name ].label }
4848
</Label>
49-
<Badge variant="plain" className={ classNames( score.links.view && "yst-mr-3" ) }>{ score.amount }</Badge>
49+
<Badge variant="plain" className={ classNames( score.links.view && "yst-me-3" ) }>{ score.amount }</Badge>
5050
</>
5151
);
5252

@@ -82,7 +82,7 @@ const ScoreListItem = ( { score, idSuffix } ) => {
8282
<li className={ CLASSNAMES.listItem }>
8383
<Content score={ score } idSuffix={ idSuffix } />
8484
{ score.links.view && (
85-
<Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ml-auto">{ __( "View", "wordpress-seo" ) }</Button>
85+
<Button as="a" variant="secondary" size="small" href={ score.links.view } className="yst-ms-auto">{ __( "View", "wordpress-seo" ) }</Button>
8686
) }
8787
</li>
8888
);

‎packages/js/src/first-time-configuration/first-time-configuration-steps.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -473,7 +473,7 @@ export default function FirstTimeConfigurationSteps() {
473473
stepId={ STEPS.optimizeSeoData }
474474
beforeGo={ beforeEditing }
475475
isVisible={ showEditButton }
476-
additionalClasses={ "yst-ml-auto" }
476+
additionalClasses="yst-ms-auto"
477477
>
478478
{ __( "Edit", "wordpress-seo" ) }
479479
</EditButton>
@@ -502,7 +502,7 @@ export default function FirstTimeConfigurationSteps() {
502502
stepId={ STEPS.siteRepresentation }
503503
beforeGo={ beforeEditing }
504504
isVisible={ showEditButton }
505-
additionalClasses={ "yst-ml-auto" }
505+
additionalClasses="yst-ms-auto"
506506
>
507507
{ __( "Edit", "wordpress-seo" ) }
508508
</EditButton>
@@ -532,7 +532,7 @@ export default function FirstTimeConfigurationSteps() {
532532
stepId={ STEPS.socialProfiles }
533533
beforeGo={ beforeEditing }
534534
isVisible={ showEditButton }
535-
additionalClasses={ "yst-ml-auto" }
535+
additionalClasses="yst-ms-auto"
536536
>
537537
{ __( "Edit", "wordpress-seo" ) }
538538
</EditButton>
@@ -557,7 +557,7 @@ export default function FirstTimeConfigurationSteps() {
557557
stepId={ STEPS.personalPreferences }
558558
beforeGo={ beforeEditing }
559559
isVisible={ showEditButton }
560-
additionalClasses={ "yst-ml-auto" }
560+
additionalClasses="yst-ms-auto"
561561
>
562562
{ __( "Edit", "wordpress-seo" ) }
563563
</EditButton>

‎packages/js/src/first-time-configuration/tailwind-components/base/alert.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ export default function Alert( { type, children, className } ) {
4242
return (
4343
<div className={ classNames( "yst-flex yst-p-4 yst-rounded-md", color, className ) }>
4444
{ icon }
45-
<div className="yst-flex-1 yst-ml-3 yst-text-sm">
45+
<div className="yst-flex-1 yst-ms-3 yst-text-sm">
4646
{ children }
4747
</div>
4848
</div>

‎packages/js/src/first-time-configuration/tailwind-components/base/combo-box.js

+5-5
Original file line numberDiff line numberDiff line change
@@ -90,22 +90,22 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan
9090
<Combobox.Button
9191
data-id={ `button-${ id }` }
9292
role="button"
93-
className="yst-w-full yst-h-full yst-rounded-md yst-border yst-border-slate-300 yst-flex yst-items-center yst-rounded-r-md yst-pl-3 yst-pr-2 focus-within:yst-border-primary-500 focus-within:yst-outline-none focus-within:yst-ring-1 focus-within:yst-ring-primary-500"
93+
className="yst-w-full yst-h-full yst-rounded-md yst-border yst-border-slate-300 yst-flex yst-items-center yst-rounded-r-md yst-ps-3 yst-pe-2 focus-within:yst-border-primary-500 focus-within:yst-outline-none focus-within:yst-ring-1 focus-within:yst-ring-primary-500"
9494
as="div"
9595
>
9696
<Combobox.Input
9797
data-id={ `input-${ id }` }
98-
className="yst-w-full yst-text-slate-700 yst-rounded-md yst-border-0 yst-outline-none yst-bg-white yst-py-2 yst-pl-0 yst-pr-10 yst-shadow-none sm:yst-text-sm"
98+
className="yst-w-full yst-text-slate-700 yst-rounded-md yst-border-0 yst-outline-none yst-bg-white yst-py-2 yst-ps-0 yst-pe-10 yst-shadow-none sm:yst-text-sm"
9999
onChange={ handleInputChange }
100100
displayValue={ getDisplayValue }
101101
placeholder={ placeholder }
102102
onClick={ stopEventPropagation( open ) }
103103
/>
104-
<SelectorIcon className="yst-h-5 yst-w-5 yst-text-slate-400 yst-inset-y-0 yst-right-0" aria-hidden="true" />
104+
<SelectorIcon className="yst-h-5 yst-w-5 yst-text-slate-400 yst-inset-y-0 yst-end-0" aria-hidden="true" />
105105
</Combobox.Button>
106106
{ ( filteredOptions.length > 0 ) && (
107107
<Combobox.Options className="yst-absolute yst-z-10 yst-mt-1 yst-max-h-60 yst-w-full yst-overflow-auto yst-rounded-md yst-bg-white yst-text-base yst-shadow-lg yst-ring-1 yst-ring-black yst-ring-opacity-5 focus:yst-outline-none sm:yst-text-sm">
108-
{ isLoading && <div className="yst-flex yst-bg-white yst-sticky yst-z-20 yst-text-sm yst-italic yst-top-0 yst-py-2 yst-pl-3 yst-pr-9 yst-my-0"><Spinner className="yst-text-primary-500 yst-h-4 yst-w-4 yst-mr-2 yst-self-center" />{ __( "Loading...", "wordpress-seo" ) }</div> }
108+
{ isLoading && <div className="yst-flex yst-bg-white yst-sticky yst-z-20 yst-text-sm yst-italic yst-top-0 yst-py-2 yst-ps-3 yst-pe-9 yst-my-0"><Spinner className="yst-text-primary-500 yst-h-4 yst-w-4 yst-me-2 yst-self-center" />{ __( "Loading...", "wordpress-seo" ) }</div> }
109109
{ filteredOptions.map( ( option ) => (
110110
<Combobox.Option
111111
key={ `yst-option-${ option.value }` }
@@ -117,7 +117,7 @@ export default function YoastComboBox( { id, value, label, onChange, onQueryChan
117117
<span className={ classNames( "yst-block yst-truncate", ( selected || value.value === option.value ) && "yst-font-semibold" ) }>{ option.label }</span>
118118
{ ( selected || value.value === option.value ) && (
119119
<span
120-
className={ "yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-4 yst-text-white" }
120+
className={ "yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-4 yst-text-white" }
121121
>
122122
<CheckIcon className="yst-h-5 yst-w-5" aria-hidden="true" />
123123
</span>

‎packages/js/src/first-time-configuration/tailwind-components/base/image-select.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -79,7 +79,7 @@ export default function ImageSelect( {
7979
<Button
8080
id={ url ? id + "__replace-image" : id + "__select-image" }
8181
variant="secondary"
82-
className="yst-mr-2"
82+
className="yst-me-2"
8383
onClick={ onSelectImageClick }
8484
data-hiive-event-name={ url ? "clicked_replace_image" : "clicked_select_image" }
8585
>

‎packages/js/src/first-time-configuration/tailwind-components/base/single-select.js

+4-4
Original file line numberDiff line numberDiff line change
@@ -36,7 +36,7 @@ export default function Select( { id, value, choices, label, onChange, error, di
3636
<Listbox.Button
3737
data-id={ `button-${ id } ` }
3838
className={ classNames(
39-
"yst-relative yst-h-[45px] yst-w-full yst-leading-6 yst-py-2 yst-pl-3 yst-pr-10 yst-text-left yst-bg-white yst-border yst-border-slate-300 yst-rounded-md yst-shadow-sm yst-cursor-default focus:yst-outline-none focus:yst-ring-1 focus:yst-ring-primary-500 focus:yst-border-primary-500 sm:yst-text-sm",
39+
"yst-relative yst-h-[45px] yst-w-full yst-leading-6 yst-py-2 yst-ps-3 yst-pe-10 yst-text-start yst-bg-white yst-border yst-border-slate-300 yst-rounded-md yst-shadow-sm yst-cursor-default focus:yst-outline-none focus:yst-ring-1 focus:yst-ring-primary-500 focus:yst-border-primary-500 sm:yst-text-sm",
4040
{
4141
"yst-border-red-300": error.isVisible,
4242
"yst-opacity-50": disabled,
@@ -46,11 +46,11 @@ export default function Select( { id, value, choices, label, onChange, error, di
4646
{ ...getErrorAriaProps( id, error ) }
4747
>
4848
<span className="yst-block yst-truncate">{ valueLabel }</span>
49-
<span className="yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-2 yst-pointer-events-none">
49+
<span className="yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-2 yst-pointer-events-none">
5050
<SelectorIcon className="yst-w-5 yst-h-5 yst-text-slate-400" aria-hidden="true" />
5151
</span>
5252
{ error.isVisible &&
53-
<div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-8">
53+
<div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-8">
5454
<ExclamationCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-red-500" />
5555
</div> }
5656
</Listbox.Button>
@@ -88,7 +88,7 @@ export default function Select( { id, value, choices, label, onChange, error, di
8888
{ selected ? (
8989
<span
9090
className={ classNames(
91-
"yst-text-white yst-absolute yst-inset-y-0 yst-right-0 yst-flex yst-items-center yst-pr-4"
91+
"yst-text-white yst-absolute yst-inset-y-0 yst-end-0 yst-flex yst-items-center yst-pe-4"
9292
) }
9393
>
9494
<CheckIcon className="yst-w-5 yst-h-5" aria-hidden="true" />

‎packages/js/src/first-time-configuration/tailwind-components/base/text-input.js

+2-2
Original file line numberDiff line numberDiff line change
@@ -17,11 +17,11 @@ import MultiLineText from "./multi-line-text";
1717
*/
1818
function FeedbackIcon( { hasError, hasSuccess } ) {
1919
if ( hasError ) {
20-
return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-3">
20+
return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-3">
2121
<ExclamationCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-red-500" />
2222
</div>;
2323
} else if ( hasSuccess ) {
24-
return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-right-0 yst-mr-3">
24+
return <div className="yst-flex yst-items-center yst-absolute yst-inset-y-0 yst-end-0 yst-me-3">
2525
<CheckCircleIcon className="yst-pointer-events-none yst-h-5 yst-w-5 yst-text-emerald-600" />
2626
</div>;
2727
}

‎packages/js/src/first-time-configuration/tailwind-components/configuration-stepper-buttons.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -141,7 +141,7 @@ export function StepButtons( { stepId, beforeContinue, continueLabel, beforeBack
141141
</ContinueButton>
142142
<BackButton
143143
stepId={ stepId }
144-
additionalClasses="yst-ml-3"
144+
additionalClasses="yst-ms-3"
145145
beforeGo={ beforeBack }
146146
>
147147
{ backLabel }

‎packages/js/src/first-time-configuration/tailwind-components/helpers/index.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -48,7 +48,7 @@ export const getErrorAriaProps = ( inputId, { isVisible } ) => isVisible ? {
4848
*/
4949
export function getOptionActiveStyles( { active, selected } ) {
5050
return classNames(
51-
"yst-relative yst-cursor-default yst-select-none yst-py-2 yst-pl-3 yst-pr-9 yst-my-0",
51+
"yst-relative yst-cursor-default yst-select-none yst-py-2 yst-ps-3 yst-pe-9 yst-my-0",
5252
selected && "yst-bg-primary-500 yst-text-white",
5353
( active && ! selected ) && "yst-bg-primary-200 yst-text-slate-700",
5454
( ! active && ! selected ) && "yst-text-slate-700"

‎packages/js/src/first-time-configuration/tailwind-components/step-header.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -65,7 +65,7 @@ export default function StepHeader( { name, description, isFinished, children }
6565
/>
6666
</span>
6767
{ /* Name and description. */ }
68-
<span className="yst-ml-4 yst-min-w-0 yst-flex yst-flex-col">
68+
<span className="yst-ms-4 yst-min-w-0 yst-flex yst-flex-col">
6969
<span className={ `yst-transition-colors yst-duration-500 yst-text-xs yst-font-[650] yst-tracking-wide yst-uppercase ${ nameClassNames }` }>
7070
{ name }
7171
</span>

‎packages/js/src/first-time-configuration/tailwind-components/stepper.js

+3-3
Original file line numberDiff line numberDiff line change
@@ -135,11 +135,11 @@ export function Step( { children } ) {
135135
{ stepIndex !== lastStepIndex &&
136136
<Fragment>
137137
<div
138-
className={ "yst--ml-px yst-absolute yst-left-4 yst-w-0.5 yst-h-full yst-bg-slate-300 yst--bottom-6" }
138+
className={ "yst--ms-px yst-absolute yst-start-4 yst-w-0.5 yst-h-full yst-bg-slate-300 yst--bottom-6" }
139139
aria-hidden="true"
140140
/>
141141
<div
142-
className={ `yst-h-12 yst-transition-transform ${ delayUntilStepFaded } yst-ease-linear ${ slideDurationClass } ${ stepIndex < activeStepIndex ? "yst-scale-y-1" : "yst-scale-y-0" } yst-origin-top yst--ml-px yst-absolute yst-left-4 yst-w-0.5 yst-bg-primary-500 yst-top-8` }
142+
className={ `yst-h-12 yst-transition-transform ${ delayUntilStepFaded } yst-ease-linear ${ slideDurationClass } ${ stepIndex < activeStepIndex ? "yst-scale-y-1" : "yst-scale-y-0" } yst-origin-top yst--ms-px yst-absolute yst-start-4 yst-w-0.5 yst-bg-primary-500 yst-top-8` }
143143
aria-hidden="true"
144144
/>
145145
</Fragment>
@@ -223,7 +223,7 @@ function Content( { children } ) {
223223
easing="ease-in-out"
224224
duration={ slideDuration }
225225
>
226-
<div className={ `yst-transition-opacity ${ fadeDuration } yst-relative yst-ml-12 yst-mt-4 yst-pb-1 ${ isFaded ? "yst-opacity-0 yst-pointer-events-none" : "yst-opacity-100" }` }>
226+
<div className={ `yst-transition-opacity ${ fadeDuration } yst-relative yst-ms-12 yst-mt-4 yst-pb-1 ${ isFaded ? "yst-opacity-0 yst-pointer-events-none" : "yst-opacity-100" }` }>
227227
{ children }
228228
</div>
229229
</AnimateHeight>

0 commit comments

Comments
 (0)