[Progress][RadioGroup][Tabs] Unify text direction (LTR/RTL) handling (#…

…885)
mui · Nov 30, 2024 · 8a0c9a5 · 8a0c9a5
1 parent a2421c1
commit 8a0c9a5
Show file tree

Hide file tree

Showing 44 changed files with 427 additions and 1,013 deletions.
diff --git a/docs/data/api/progress-root.json b/docs/data/api/progress-root.json
@@ -4,10 +4,6 @@
     "aria-labelledby": { "type": { "name": "string" } },
     "aria-valuetext": { "type": { "name": "string" } },
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
-    "direction": {
-      "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
-      "default": "'ltr'"
-    },
     "getAriaLabel": {
       "type": { "name": "func" },
       "signature": {

diff --git a/docs/data/api/tabs-root.json b/docs/data/api/tabs-root.json
@@ -2,10 +2,6 @@
   "props": {
     "className": { "type": { "name": "union", "description": "func<br>&#124;&nbsp;string" } },
     "defaultValue": { "type": { "name": "any" }, "default": "0" },
-    "direction": {
-      "type": { "name": "enum", "description": "'ltr'<br>&#124;&nbsp;'rtl'" },
-      "default": "'ltr'"
-    },
     "onValueChange": { "type": { "name": "func" } },
     "orientation": {
       "type": { "name": "enum", "description": "'horizontal'<br>&#124;&nbsp;'vertical'" },

diff --git a/docs/data/components/progress/IndeterminateProgress.js b/docs/data/components/progress/IndeterminateProgress.js
@@ -1,76 +1,21 @@
 'use client';
 import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui-components/react/progress';
-import { Box, styled, keyframes, css } from '@mui/system';
+import { Progress } from '@base-ui-components/react/progress';
+import classes from './styles.module.css';
 
 export default function IndeterminateProgress() {
   return (
-    <Box sx={{ width: 320, p: 2 }}>
-      <Progress value={null} aria-labelledby="ProgressLabel">
-        <span className="Progress-label" id="ProgressLabel">
-          Uploading files
-        </span>
-        <ProgressTrack>
-          <ProgressIndicator />
-        </ProgressTrack>
-      </Progress>
-    </Box>
+    <Progress.Root
+      value={null}
+      aria-labelledby="ProgressLabel"
+      className={classes.progress}
+    >
+      <span className={classes.label} id="ProgressLabel">
+        Uploading files
+      </span>
+      <Progress.Track className={classes.track}>
+        <Progress.Indicator className={classes.indicator} />
+      </Progress.Track>
+    </Progress.Root>
   );
 }
-
-const Progress = styled(BaseProgress.Root)`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-`;
-
-const ProgressTrack = styled(BaseProgress.Track)(
-  ({ theme }) => `
-    position: relative;
-    width: 100%;
-    height: 4px;
-    border-radius: 9999px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
-    display: flex;
-    overflow: hidden;
-  `,
-);
-
-const indeterminateProgress = keyframes`
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(20rem);
-  }
-`;
-
-const ProgressIndicator = styled(BaseProgress.Indicator)(
-  ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
-    border-radius: inherit;
-
-    &[data-indeterminate] {
-      width: 25%;
-      animation: ${indeterminateProgress} 1.5s infinite ease-in-out;
-      will-change: transform;
-    }
-  `,
-);
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BLUE400 = '#3399FF';
-const BLUE500 = '#007FFF';
diff --git a/docs/data/components/progress/IndeterminateProgress.tsx b/docs/data/components/progress/IndeterminateProgress.tsx
@@ -1,76 +1,21 @@
 'use client';
 import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui-components/react/progress';
-import { Box, styled, keyframes, css } from '@mui/system';
+import { Progress } from '@base-ui-components/react/progress';
+import classes from './styles.module.css';
 
 export default function IndeterminateProgress() {
   return (
-    <Box sx={{ width: 320, p: 2 }}>
-      <Progress value={null} aria-labelledby="ProgressLabel">
-        <span className="Progress-label" id="ProgressLabel">
-          Uploading files
-        </span>
-        <ProgressTrack>
-          <ProgressIndicator />
-        </ProgressTrack>
-      </Progress>
-    </Box>
+    <Progress.Root
+      value={null}
+      aria-labelledby="ProgressLabel"
+      className={classes.progress}
+    >
+      <span className={classes.label} id="ProgressLabel">
+        Uploading files
+      </span>
+      <Progress.Track className={classes.track}>
+        <Progress.Indicator className={classes.indicator} />
+      </Progress.Track>
+    </Progress.Root>
   );
 }
-
-const Progress = styled(BaseProgress.Root)`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-`;
-
-const ProgressTrack = styled(BaseProgress.Track)(
-  ({ theme }) => `
-    position: relative;
-    width: 100%;
-    height: 4px;
-    border-radius: 9999px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
-    display: flex;
-    overflow: hidden;
-  `,
-);
-
-const indeterminateProgress = keyframes`
-  from {
-    transform: translateX(-100%);
-  }
-
-  to {
-    transform: translateX(20rem);
-  }
-`;
-
-const ProgressIndicator = styled(BaseProgress.Indicator)(
-  ({ theme }) => css`
-    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
-    border-radius: inherit;
-
-    &[data-indeterminate] {
-      width: 25%;
-      animation: ${indeterminateProgress} 1.5s infinite ease-in-out;
-      will-change: transform;
-    }
-  `,
-);
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BLUE400 = '#3399FF';
-const BLUE500 = '#007FFF';
diff --git a/docs/data/components/progress/IndeterminateProgress.tsx.preview b/docs/data/components/progress/IndeterminateProgress.tsx.preview
@@ -1,8 +1,12 @@
-<Progress value={null} aria-labelledby="ProgressLabel">
-  <span className="Progress-label" id="ProgressLabel">
+<Progress.Root
+  value={null}
+  aria-labelledby="ProgressLabel"
+  className={classes.progress}
+>
+  <span className={classes.label} id="ProgressLabel">
     Uploading files
   </span>
-  <ProgressTrack>
-    <ProgressIndicator />
-  </ProgressTrack>
-</Progress>
+  <Progress.Track className={classes.track}>
+    <Progress.Indicator className={classes.indicator} />
+  </Progress.Track>
+</Progress.Root>
diff --git a/docs/data/components/progress/RtlProgress.js b/docs/data/components/progress/RtlProgress.js
@@ -1,60 +1,23 @@
 'use client';
 import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui-components/react/progress';
-import { Box, styled } from '@mui/system';
+import { Progress } from '@base-ui-components/react/progress';
+import classes from './styles.module.css';
 
 export default function RtlProgress() {
   return (
-    <Box sx={{ width: 320, p: 2 }}>
-      <Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
-        <span className="Progress-label" id="RtlProgressLabel">
-          Uploading files (RTL)
+    <div dir="rtl">
+      <Progress.Root
+        value={65}
+        aria-labelledby="RtlProgressLabel"
+        className={classes.progress}
+      >
+        <span className={classes.label} id="RtlProgressLabel">
+          تحميل الملفات (RTL)
         </span>
-        <ProgressTrack>
-          <ProgressIndicator />
-        </ProgressTrack>
-      </Progress>
-    </Box>
+        <Progress.Track className={classes.track}>
+          <Progress.Indicator className={classes.indicator} />
+        </Progress.Track>
+      </Progress.Root>
+    </div>
   );
 }
-
-const Progress = styled(BaseProgress.Root)`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-`;
-
-const ProgressTrack = styled(BaseProgress.Track)(
-  ({ theme }) => `
-    position: relative;
-    width: 100%;
-    height: 4px;
-    border-radius: 9999px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
-    display: flex;
-    overflow: hidden;
-  `,
-);
-
-const ProgressIndicator = styled(BaseProgress.Indicator)(
-  ({ theme }) => `
-    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
-    border-radius: inherit;
-  `,
-);
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BLUE400 = '#3399FF';
-const BLUE500 = '#007FFF';
diff --git a/docs/data/components/progress/RtlProgress.tsx b/docs/data/components/progress/RtlProgress.tsx
@@ -1,60 +1,23 @@
 'use client';
 import * as React from 'react';
-import { Progress as BaseProgress } from '@base-ui-components/react/progress';
-import { Box, styled } from '@mui/system';
+import { Progress } from '@base-ui-components/react/progress';
+import classes from './styles.module.css';
 
 export default function RtlProgress() {
   return (
-    <Box sx={{ width: 320, p: 2 }}>
-      <Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
-        <span className="Progress-label" id="RtlProgressLabel">
-          Uploading files (RTL)
+    <div dir="rtl">
+      <Progress.Root
+        value={65}
+        aria-labelledby="RtlProgressLabel"
+        className={classes.progress}
+      >
+        <span className={classes.label} id="RtlProgressLabel">
+          تحميل الملفات (RTL)
         </span>
-        <ProgressTrack>
-          <ProgressIndicator />
-        </ProgressTrack>
-      </Progress>
-    </Box>
+        <Progress.Track className={classes.track}>
+          <Progress.Indicator className={classes.indicator} />
+        </Progress.Track>
+      </Progress.Root>
+    </div>
   );
 }
-
-const Progress = styled(BaseProgress.Root)`
-  display: flex;
-  flex-flow: column nowrap;
-  gap: 1rem;
-`;
-
-const ProgressTrack = styled(BaseProgress.Track)(
-  ({ theme }) => `
-    position: relative;
-    width: 100%;
-    height: 4px;
-    border-radius: 9999px;
-    background-color: ${theme.palette.mode === 'dark' ? grey[400] : grey[400]};
-    display: flex;
-    overflow: hidden;
-  `,
-);
-
-const ProgressIndicator = styled(BaseProgress.Indicator)(
-  ({ theme }) => `
-    background-color: ${theme.palette.mode === 'dark' ? BLUE400 : BLUE500};
-    border-radius: inherit;
-  `,
-);
-
-const grey = {
-  50: '#F3F6F9',
-  100: '#E5EAF2',
-  200: '#DAE2ED',
-  300: '#C7D0DD',
-  400: '#B0B8C4',
-  500: '#9DA8B7',
-  600: '#6B7A90',
-  700: '#434D5B',
-  800: '#303740',
-  900: '#1C2025',
-};
-
-const BLUE400 = '#3399FF';
-const BLUE500 = '#007FFF';
diff --git a/docs/data/components/progress/RtlProgress.tsx.preview b/docs/data/components/progress/RtlProgress.tsx.preview
@@ -1,8 +1,12 @@
-<Progress value={65} aria-labelledby="RtlProgressLabel" dir="rtl">
-  <span className="Progress-label" id="RtlProgressLabel">
-    Uploading files (RTL)
+<Progress.Root
+  value={65}
+  aria-labelledby="RtlProgressLabel"
+  className={classes.progress}
+>
+  <span className={classes.label} id="RtlProgressLabel">
+    تحميل الملفات (RTL)
   </span>
-  <ProgressTrack>
-    <ProgressIndicator />
-  </ProgressTrack>
-</Progress>
+  <Progress.Track className={classes.track}>
+    <Progress.Indicator className={classes.indicator} />
+  </Progress.Track>
+</Progress.Root>