Fix settings page RTL

Yoast · Dec 17, 2024 · 9f52409 · 9f52409
1 parent 2f64745
commit 9f52409
Show file tree

Hide file tree

Showing 13 changed files with 25 additions and 25 deletions.
diff --git a/packages/js/src/settings/app.js b/packages/js/src/settings/app.js
@@ -203,7 +203,7 @@ const App = () => {
 							<Menu postTypes={ postTypes } taxonomies={ taxonomies } />
 						</SidebarNavigation.Sidebar>
 					</aside>
-					<div className={ classNames( "yst-flex yst-grow yst-flex-wrap", ! isPremium && "xl:yst-pr-[17.5rem]" ) }>
+					<div className={ classNames( "yst-flex yst-grow yst-flex-wrap", ! isPremium && "xl:yst-pe-[17.5rem]" ) }>
 						<div className="yst-grow yst-space-y-6 yst-mb-8 xl:yst-mb-0">
 							<Paper as="main">
 								<ErrorBoundary FallbackComponent={ ErrorFallback }>
@@ -259,7 +259,7 @@ const App = () => {
 							/> }
 						</div>
 						{ ! isPremium &&
-							<div className="xl:yst-max-w-3xl xl:yst-fixed xl:yst-right-8 xl:yst-w-[16rem]">
+							<div className="xl:yst-max-w-3xl xl:yst-fixed xl:yst-end-8 xl:yst-w-[16rem]">
 								<SidebarRecommendations
 									premiumLink={ premiumLinkSidebar }
 									premiumUpsellConfig={ premiumUpsellConfig }

diff --git a/packages/js/src/settings/components/form-layout.js b/packages/js/src/settings/components/form-layout.js
@@ -36,7 +36,7 @@ const FormLayout = ( { children } ) => {
 					animateOpacity={ true }
 				>
 					<div className="yst-bg-slate-50 yst-border-slate-200 yst-border-t yst-rounded-b-lg">
-						<div className="yst-flex yst-align-middle yst-space-x-3 yst-p-8">
+						<div className="yst-flex yst-align-middle yst-space-x-3 rtl:yst-space-x-reverse yst-p-8">
 							<Button
 								id="button-submit-settings"
 								type="submit"

diff --git a/packages/js/src/settings/components/formik-user-select-field.js b/packages/js/src/settings/components/formik-user-select-field.js
@@ -129,7 +129,7 @@ const FormikUserSelectField = ( { name, id, className = "", ...props } ) => {
 									href={ createUserUrl }
 									target="_blank"
 									rel="noreferrer"
-									className="yst-relative yst-w-full yst-flex yst-items-center yst-py-4 yst-px-3 yst-gap-2 yst-no-underline yst-text-sm yst-text-left yst-bg-white yst-text-slate-700 group-hover:yst-text-white group-hover:yst-bg-primary-500 yst-border-t yst-border-slate-200"
+									className="yst-relative yst-w-full yst-flex yst-items-center yst-py-4 yst-px-3 yst-gap-2 yst-no-underline yst-text-sm yst-text-start yst-bg-white yst-text-slate-700 group-hover:yst-text-white group-hover:yst-bg-primary-500 yst-border-t yst-border-slate-200"
 								>
 									<UserAddIcon className="yst-w-5 yst-h-5 yst-text-slate-400 group-hover:yst-text-white" />
 									<span>{ __( "Add new user...", "wordpress-seo" ) }</span>

diff --git a/packages/js/src/settings/components/notifications.js b/packages/js/src/settings/components/notifications.js
@@ -47,7 +47,7 @@ const ValidationErrorsNotification = ( { id, onDismiss, ...props } ) => {
 
 	return (
 		<NotificationsUi.Notification key={ id } id={ id } onDismiss={ onDismiss } { ...props }>
-			<ul className="yst-list-disc yst-mt-1 yst-ml-4 yst-space-y-2">
+			<ul className="yst-list-disc yst-mt-1 yst-ms-4 yst-space-y-2">
 				{ map( flatErrors, ( error, name ) => error && (
 					<li key={ name }>
 						<Link to={ `${ get( searchIndex, `${ name }.route`, "404" ) }#${ get( searchIndex, `${ name }.fieldId`, "" ) }` }>

diff --git a/packages/js/src/settings/components/search.js b/packages/js/src/settings/components/search.js
@@ -38,7 +38,7 @@ const SearchResultLabel = ( { fieldId, fieldLabel } ) => {
 			<>
 				{ fieldLabel }
 				{ postTypeOrTaxonomyName && (
-					<Code className="yst-ml-2 group-hover:yst-bg-primary-200 group-hover:yst-text-primary-800">{ postTypeOrTaxonomyName }</Code>
+					<Code className="yst-ml-2 rtl:yst-mr-2 group-hover:yst-bg-primary-200 group-hover:yst-text-primary-800">{ postTypeOrTaxonomyName }</Code>
 				) }
 			</>
 		);
@@ -214,12 +214,12 @@ const Search = ( { buttonId = "button-search", modalId = "modal-search" } ) => {
 			onClick={ setOpen }
 		>
 			<SearchIcon
-				className="yst-flex-none yst-w-5 yst-h-5 yst-mr-3 yst-text-slate-400"
+				className="yst-flex-none yst-w-5 yst-h-5 yst-me-3 yst-text-slate-400"
 				{ ...ariaSvgProps }
 			/>
 			<span className="yst-overflow-hidden yst-whitespace-nowrap yst-text-ellipsis">{ query || __( "Quick search...", "wordpress-seo" ) }</span>
 			{ platform?.type === "desktop" && (
-				<span className="yst-ml-auto yst-flex-none yst-text-xs yst-font-semibold yst-text-slate-400">
+				<span className="yst-ms-auto yst-flex-none yst-text-xs yst-font-semibold yst-text-slate-400">
 					{ os?.name === "macOS" ? __( "⌘K", "wordpress-seo" ) : __( "CtrlK", "wordpress-seo" ) }
 				</span>
 			) }
@@ -239,7 +239,7 @@ const Search = ( { buttonId = "button-search", modalId = "modal-search" } ) => {
 				<Combobox as="div" className="yst--m-6" onChange={ handleNavigate }>
 					<div className="yst-relative">
 						<SearchIcon
-							className="yst-pointer-events-none yst-absolute yst-top-3.5 yst-left-4 yst-h-5 yst-w-5 yst-text-slate-400"
+							className="yst-pointer-events-none yst-absolute yst-top-3.5 yst-start-4 yst-h-5 yst-w-5 yst-text-slate-400"
 							{ ...ariaSvgProps }
 						/>
 						<Combobox.Input

diff --git a/packages/js/src/settings/routes/breadcrumbs.js b/packages/js/src/settings/routes/breadcrumbs.js
@@ -112,7 +112,7 @@ const Breadcrumbs = () => {
 							name={ `wpseo_titles.post_types-${ postTypeName }-maintax` }
 							id={ `input-wpseo_titles-post_types-${ postTypeName }-maintax` }
 							label={ postType.label }
-							labelSuffix={ <Code className="yst-ml-2">{ postTypeName }</Code> }
+							labelSuffix={ <Code className="yst-ml-2 rtl:yst-mr-2">{ postTypeName }</Code> }
 							options={ postType.options }
 							className="yst-max-w-sm"
 						/> ) }
@@ -132,7 +132,7 @@ const Breadcrumbs = () => {
 								label={ taxonomy.label }
 								options={ taxonomy.options }
 								className="yst-max-w-sm"
-								labelSuffix={ <Code className="yst-ml-2">{ taxonomy.name }</Code> }
+								labelSuffix={ <Code className="yst-ml-2 rtl:yst-mr-2">{ taxonomy.name }</Code> }
 							/>
 						) ) }
 					</FieldsetLayout>

diff --git a/packages/js/src/settings/routes/crawl-optimization.js b/packages/js/src/settings/routes/crawl-optimization.js
@@ -593,7 +593,7 @@ const CrawlOptimization = () => {
 								id="input-wpseo-deny_google_extended_crawling"
 								label={ __( "Prevent Google Bard and Vertex AI bots from crawling", "wordpress-seo" ) }
 								description={ __( "Add a ‘disallow’ rule to your robots.txt file to prevent crawling by the Google-Extended bot. Enabling this setting won’t prevent Google from indexing your website.", "wordpress-seo" ) }
-								labelSuffix={ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+								labelSuffix={ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								className="yst-max-w-2xl"
 								isDummy={ ! isPremium }
 							/>
@@ -604,7 +604,7 @@ const CrawlOptimization = () => {
 								id="input-wpseo-deny_gptbot_crawling"
 								label={ __( "Prevent OpenAI GPTBot from crawling", "wordpress-seo" ) }
 								description={ __( "Add a ‘disallow’ rule to your robots.txt file to prevent crawling by OpenAI GPTBot.", "wordpress-seo" ) }
-								labelSuffix={ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+								labelSuffix={ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								className="yst-max-w-2xl"
 								isDummy={ ! isPremium }
 							/>
@@ -615,7 +615,7 @@ const CrawlOptimization = () => {
 								id="input-wpseo-deny_ccbot_crawling"
 								label={ __( "Prevent Common Crawl CCBot from crawling", "wordpress-seo" ) }
 								description={ __( "Add a ‘disallow’ rule to your robots.txt file to prevent crawling by Common Crawl CCBot.", "wordpress-seo" ) }
-								labelSuffix={ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+								labelSuffix={ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								className="yst-max-w-2xl"
 								isDummy={ ! isPremium }
 							/>

diff --git a/packages/js/src/settings/routes/site-basics.js b/packages/js/src/settings/routes/site-basics.js
@@ -348,7 +348,7 @@ const SiteBasics = () => {
 					<FieldsetLayout
 						title={ <>
 							{ __( "Site policies", "wordpress-seo" ) }
-							{ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+							{ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 						</> }
 						description={ sitePoliciesDescription }
 					>

diff --git a/packages/js/src/settings/routes/site-features.js b/packages/js/src/settings/routes/site-features.js
@@ -67,7 +67,7 @@ const FeatureCard = ( {
 					decoding="async"
 				/>
 				{ shouldRenderBadgeContainer && (
-					<div className="yst-absolute yst-top-2 yst-right-2 yst-flex yst-gap-1.5">
+					<div className="yst-absolute yst-top-2 yst-end-2 yst-flex yst-gap-1.5">
 						{ isDisabled && <Badge size="small" variant="plain">{ message }</Badge> }
 						{ isPremium && isPremiumFeature && hasPremiumBadge && <Badge size="small" variant="upsell">Premium</Badge> }
 						{ isBetaFeature && <Badge size="small" variant="info">Beta</Badge> }
@@ -100,7 +100,7 @@ const FeatureCard = ( {
 						rel="noopener"
 						{ ...premiumUpsellConfig }
 					>
-						<LockOpenIcon className="yst-w-5 yst-h-5 yst--ml-1 yst-shrink-0" { ...svgAriaProps } />
+						<LockOpenIcon className="yst-w-5 yst-h-5 yst--ms-1 yst-shrink-0" { ...svgAriaProps } />
 						{ sprintf(
 							/* translators: %1$s expands to Premium. */
 							__( "Unlock with %1$s", "wordpress-seo" ),
@@ -405,7 +405,7 @@ const SiteFeatures = () => {
 									className="yst-self-start"
 								>
 									{ __( "View the XML sitemap", "wordpress-seo" ) }
-									<ExternalLinkIcon className="yst--mr-1 yst-ml-1 yst-h-5 yst-w-5 yst-text-slate-400" />
+									<ExternalLinkIcon className="yst--me-1 yst-ms-1 yst-h-5 yst-w-5 yst-text-slate-400 rtl:yst-rotate-[270deg]" />
 								</Button> }
 								<LearnMoreLink id="link-xml-sitemaps-learn-more" link="https://yoa.st/2a-" ariaLabel={ __( "XML sitemaps", "wordpress-seo" ) } />
 							</FeatureCard>

diff --git a/packages/js/src/settings/routes/site-representation.js b/packages/js/src/settings/routes/site-representation.js
@@ -262,7 +262,7 @@ const SiteRepresentation = () => {
 										id="input-wpseo_social-mastodon_url"
 										label={ __( "Mastodon", "wordpress-seo" ) }
 										placeholder={ __( "E.g. https://mastodon.social/@yoast", "wordpress-seo" ) }
-										labelSuffix={ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+										labelSuffix={ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 										isDummy={ ! isPremium }
 										description={ <>
 											{ __( "Get your site verified in your Mastodon profile.", "wordpress-seo" ) }
@@ -314,7 +314,7 @@ const SiteRepresentation = () => {
 											) ) }
 											{ /* eslint-disable-next-line react/jsx-no-bind */ }
 											<Button id="button-add-social-profile" variant="secondary" onClick={ ()=>handleAddProfile( arrayHelpers ) }>
-												<PlusIcon className="yst--ml-1 yst-mr-1 yst-h-5 yst-w-5 yst-text-slate-400" />
+												<PlusIcon className="yst--ms-1 yst-me-1 yst-h-5 yst-w-5 yst-text-slate-400" />
 												{ __( "Add another profile", "wordpress-seo" ) }
 											</Button>
 										</>
@@ -325,7 +325,7 @@ const SiteRepresentation = () => {
 							<FieldsetLayout
 								title={ <>
 									{ __( "Additional organization info", "wordpress-seo" ) }
-									{ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+									{ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								</> }
 								description={ __( "Enrich your organization's profile by providing more in-depth information. The more details you share, the better Google understands your website.", "wordpress-seo" ) }
 							>
@@ -411,7 +411,7 @@ const SiteRepresentation = () => {
 							<FieldsetLayout
 								title={ <>
 									{ __( "Organization identifiers", "wordpress-seo" ) }
-									{ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+									{ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								</> }
 								description={ __( "Please tell us more about your organization’s identifiers. This information will help Google to display accurate and helpful details about your organization.", "wordpress-seo" ) }
 							>

diff --git a/packages/js/src/settings/routes/templates/post-type.js b/packages/js/src/settings/routes/templates/post-type.js
@@ -320,7 +320,7 @@ const PostType = ( { name, label, singularLabel, hasArchive, hasSchemaArticleTyp
 								name={ `wpseo_titles.page-analyse-extra-${ name }` }
 								id={ `input-wpseo_titles-page-analyse-extra-${ name }` }
 								label={ __( "Add custom fields to page analysis", "wordpress-seo" ) }
-								labelSuffix={ isPremium && <Badge className="yst-ml-1.5" size="small" variant="upsell">Premium</Badge> }
+								labelSuffix={ isPremium && <Badge className="yst-ms-1.5" size="small" variant="upsell">Premium</Badge> }
 								description={ <>
 									{ customFieldsDescription }
 									<br />

diff --git a/packages/js/src/shared-admin/components/premium-upsell-list.js b/packages/js/src/shared-admin/components/premium-upsell-list.js
@@ -31,7 +31,7 @@ export const PremiumUpsellList = ( { premiumLink, premiumUpsellConfig, isPromoti
 						"Yoast SEO Premium"
 					) }
 				</Title>
-				<ul className="yst-grid yst-grid-cols-1 sm:yst-grid-cols-2 yst-gap-x-6 yst-list-disc yst-pl-[1em] yst-list-outside yst-text-slate-800 yst-mt-6">
+				<ul className="yst-grid yst-grid-cols-1 sm:yst-grid-cols-2 yst-gap-x-6 yst-list-disc yst-ps-[1em] yst-list-outside yst-text-slate-800 yst-mt-6">
 					{ getPremiumBenefits().map( ( benefit, index ) => (
 						<li key={ `upsell-benefit-${ index }` }>
 							{ createInterpolateElement( benefit, { strong: <span className="yst-font-semibold" /> } ) }

diff --git a/packages/js/src/shared-admin/components/unsaved-changes-modal.js b/packages/js/src/shared-admin/components/unsaved-changes-modal.js
@@ -28,7 +28,7 @@ export const UnsavedChangesModal = ( { isOpen, onClose = noop, onDiscard = noop,
 				>
 					<ExclamationIcon className="yst-h-6 yst-w-6 yst-text-red-600" { ...svgAriaProps } />
 				</div>
-				<div className="yst-mt-3 yst-text-center sm:yst-mt-0 sm:yst-ml-4 sm:yst-text-left">
+				<div className="yst-mt-3 yst-text-center sm:yst-mt-0 sm:yst-ms-4 sm:yst-text-start">
 					<Modal.Title className="yst-text-lg yst-leading-6 yst-font-medium yst-text-slate-900 yst-mb-3">
 						{ title }
 					</Modal.Title>