feat(ui): RTL support (#7718)

Author: alexcarpenter

.changeset/cuddly-ends-wait.md

@@ -0,0 +1,15 @@
+---
+'@clerk/ui': minor
+---
+
+Improve RTL support by converting physical CSS properties (margins, padding, text alignment, borders) to logical equivalents and adding direction-aware arrow icons
+
+The changes included:
+
+- Positioning (left → insetInlineStart)
+- Margins (marginLeft/Right → marginInlineStart/End)
+- Padding (paddingLeft/Right → paddingInlineStart/End)
+- Text alignment (left/right → start/end)
+- Border radius (borderTopLeftRadius → borderStartStartRadius)
+- Arrow icon flipping with scaleX(-1) in RTL
+- Animation direction adjustments

eslint.config.mjs

@@ -171,6 +171,83 @@ const noUnstableMethods = {
   },
 };
 
+const noPhysicalCssProperties = {
+  meta: {
+    type: 'problem',
+    docs: {
+      description: 'Enforce use of CSS logical properties instead of physical properties for RTL support',
+      recommended: false,
+    },
+    messages: {
+      useLogicalProperty:
+        'Use logical CSS property "{{logical}}" instead of physical property "{{physical}}" for RTL support.',
+      useLogicalTextAlign:
+        'Use logical textAlign value "{{logical}}" instead of physical value "{{physical}}" for RTL support.',
+    },
+    schema: [],
+  },
+  create(context) {
+    // Mapping of physical properties to logical equivalents
+    const propertyMap = {
+      left: 'insetInlineStart',
+      right: 'insetInlineEnd',
+      marginLeft: 'marginInlineStart',
+      marginRight: 'marginInlineEnd',
+      paddingLeft: 'paddingInlineStart',
+      paddingRight: 'paddingInlineEnd',
+      borderLeft: 'borderInlineStart',
+      borderRight: 'borderInlineEnd',
+      borderLeftWidth: 'borderInlineStartWidth',
+      borderRightWidth: 'borderInlineEndWidth',
+      borderLeftStyle: 'borderInlineStartStyle',
+      borderRightStyle: 'borderInlineEndStyle',
+      borderLeftColor: 'borderInlineStartColor',
+      borderRightColor: 'borderInlineEndColor',
+      borderTopLeftRadius: 'borderStartStartRadius',
+      borderTopRightRadius: 'borderStartEndRadius',
+      borderBottomLeftRadius: 'borderEndStartRadius',
+      borderBottomRightRadius: 'borderEndEndRadius',
+    };
+
+    const checkProperty = (key, value) => {
+      const keyName = key.type === 'Identifier' ? key.name : key.value;
+
+      // Check for physical property names
+      if (propertyMap[keyName]) {
+        context.report({
+          node: key,
+          messageId: 'useLogicalProperty',
+          data: {
+            physical: keyName,
+            logical: propertyMap[keyName],
+          },
+        });
+      }
+
+      // Check for textAlign with physical values
+      if (keyName === 'textAlign' && value) {
+        if (value.type === 'Literal' && (value.value === 'left' || value.value === 'right')) {
+          const logicalValue = value.value === 'left' ? 'start' : 'end';
+          context.report({
+            node: value,
+            messageId: 'useLogicalTextAlign',
+            data: {
+              physical: value.value,
+              logical: logicalValue,
+            },
+          });
+        }
+      }
+    };
+
+    return {
+      Property(node) {
+        checkProperty(node.key, node.value);
+      },
+    };
+  },
+};
+
 export default tseslint.config([
   {
     name: 'repo/ignores',
@@ -248,6 +325,7 @@ export default tseslint.config([
         rules: {
           'no-global-object': noGlobalObject,
           'no-unstable-methods': noUnstableMethods,
+          'no-physical-css-properties': noPhysicalCssProperties,
         },
       },
       'simple-import-sort': pluginSimpleImportSort,
@@ -458,6 +536,13 @@ export default tseslint.config([
       'custom-rules/no-unstable-methods': 'error',
     },
   },
+  {
+    name: 'packages/ui',
+    files: ['packages/ui/src/**/*'],
+    rules: {
+      'custom-rules/no-physical-css-properties': 'error',
+    },
+  },
   {
     name: 'packages - vitest',
     files: ['packages/*/src/**/*.test.{ts,tsx}'],

packages/clerk-js/sandbox/template.html

@@ -1,5 +1,8 @@
 <!doctype html>
-<html class="h-full">
+<html
+  class="h-full"
+  dir="rtl"
+>
   <head>
     <title>clerk-js Sandbox</title>
     <meta charset="utf-8" />

packages/ui/src/common/InfiniteListSpinner.tsx

@@ -16,6 +16,7 @@ export const InfiniteListSpinner = forwardRef<HTMLDivElement>((_, ref) => {
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

packages/ui/src/common/NotificationCountBadge.tsx

@@ -32,7 +32,7 @@ export const NotificationCountBadge = (props: NotificationCountBadgeProps) => {
       as='span'
       sx={[
         t => ({
-          marginLeft: t.space.$1x5,
+          marginInlineStart: t.space.$1x5,
         }),
         containerSx,
       ]}

packages/ui/src/common/PrintableComponent.tsx

@@ -24,6 +24,7 @@ export const PrintableComponent = (props: UsePrintableReturn['printableProps'] &
   return (
     <div
       ref={ref}
+      // eslint-disable-next-line custom-rules/no-physical-css-properties -- Off-screen hide for print functionality
       style={{ position: 'fixed', left: '-9999px', top: 0, display: 'none' }}
     >
       {children}

packages/ui/src/common/organizations/OrganizationPreview.tsx

@@ -96,6 +96,7 @@ export const OrganizationPreviewSpinner = forwardRef<HTMLDivElement>((_, ref) =>
         sx={{
           margin: 'auto',
           position: 'absolute',
+          // eslint-disable-next-line custom-rules/no-physical-css-properties -- Centering with transform: translateX(-50%)
           left: '50%',
           top: '50%',
           transform: 'translateY(-50%) translateX(-50%)',

packages/ui/src/components/APIKeys/APIKeyModal.tsx

@@ -18,7 +18,7 @@ const getScopedPortalContainerStyles = (modalRoot?: React.MutableRefObject<HTMLE
     modalRoot
       ? t => ({
           position: 'absolute',
-          right: 0,
+          insetInlineEnd: 0,
           bottom: 0,
           backgroundColor: 'inherit',
           backdropFilter: `blur(${t.sizes.$2})`,

packages/ui/src/components/APIKeys/ApiKeysTable.tsx

@@ -42,7 +42,7 @@ export const APIKeysTable = ({
           <Tr>
             <Th>Name</Th>
             <Th>Last used</Th>
-            {canManageAPIKeys && <Th sx={{ textAlign: 'right' }}>Actions</Th>}
+            {canManageAPIKeys && <Th sx={{ textAlign: 'end' }}>Actions</Th>}
           </Tr>
         </Thead>
         <Tbody>
@@ -98,7 +98,7 @@ export const APIKeysTable = ({
                   </Box>
                 </Td>
                 {canManageAPIKeys && (
-                  <Td sx={{ textAlign: 'right' }}>
+                  <Td sx={{ textAlign: 'end' }}>
                     <ThreeDotsMenu
                       actions={[
                         {

packages/ui/src/components/APIKeys/CopyAPIKeyModal.tsx

@@ -63,7 +63,7 @@ export const CopyAPIKeyModal = ({
       >
         <Card.Content
           sx={t => ({
-            textAlign: 'left',
+            textAlign: 'start',
             padding: `${t.sizes.$4} ${t.sizes.$5} ${t.sizes.$4} ${t.sizes.$6}`,
           })}
         >