From d0ddf3a31d4709c7e7fc3d21facc2dc12cbb70cb Mon Sep 17 00:00:00 2001 From: Albert Yu Date: Thu, 28 Nov 2024 16:01:23 +0800 Subject: [PATCH] Update progress --- docs/data/api/progress-root.json | 4 - .../progress/IndeterminateProgress.js | 83 +----- .../progress/IndeterminateProgress.tsx | 83 +----- .../IndeterminateProgress.tsx.preview | 16 +- docs/data/components/progress/RtlProgress.js | 67 +---- docs/data/components/progress/RtlProgress.tsx | 67 +---- .../progress/RtlProgress.tsx.preview | 18 +- .../css-modules/index.js | 85 +----- .../css-modules/index.tsx | 85 +----- .../css-modules/index.tsx.preview | 15 +- .../system/index.js | 1 + .../system/index.tsx | 1 + .../tailwind/index.js | 9 +- .../tailwind/index.tsx | 9 +- docs/data/components/progress/progress.mdx | 12 +- .../components/progress/styles.module.css | 45 +++ .../api-docs/progress-root/progress-root.json | 1 - docs/reference/generated/progress-root.json | 5 - docs/src/app/experiments/progress.tsx | 256 ------------------ packages/react/src/progress/index.parts.ts | 5 +- .../indicator/ProgressIndicator.test.tsx | 23 +- .../progress/indicator/ProgressIndicator.tsx | 3 +- .../indicator/useProgressIndicator.ts | 14 +- .../react/src/progress/root/ProgressRoot.tsx | 13 +- .../react/src/progress/root/styleHooks.ts | 1 - .../src/progress/root/useProgressRoot.ts | 27 +- .../src/progress/track/ProgressTrack.test.tsx | 2 - 27 files changed, 200 insertions(+), 750 deletions(-) create mode 100644 docs/data/components/progress/styles.module.css delete mode 100644 docs/src/app/experiments/progress.tsx diff --git a/docs/data/api/progress-root.json b/docs/data/api/progress-root.json index 49b89e1fff..3cc51d0c56 100644 --- 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
| string" } }, - "direction": { - "type": { "name": "enum", "description": "'ltr'
| 'rtl'" }, - "default": "'ltr'" - }, "getAriaLabel": { "type": { "name": "func" }, "signature": { diff --git a/docs/data/components/progress/IndeterminateProgress.js b/docs/data/components/progress/IndeterminateProgress.js index bf80c97f2c..0573d7e4d8 100644 --- 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 ( - - - - Uploading files - - - - - - + + + Uploading files + + + + + ); } - -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 index bf80c97f2c..0573d7e4d8 100644 --- 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 ( - - - - Uploading files - - - - - - + + + Uploading files + + + + + ); } - -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 index e45ea5cb8b..c1fbaf3882 100644 --- a/docs/data/components/progress/IndeterminateProgress.tsx.preview +++ b/docs/data/components/progress/IndeterminateProgress.tsx.preview @@ -1,8 +1,12 @@ - - + + Uploading files - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/docs/data/components/progress/RtlProgress.js b/docs/data/components/progress/RtlProgress.js index 5419bd2d25..6b87eb1320 100644 --- 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 ( - - - - Uploading files (RTL) +
+ + + تحميل الملفات (RTL) - - - - - + + + + +
); } - -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 index 5419bd2d25..6b87eb1320 100644 --- 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 ( - - - - Uploading files (RTL) +
+ + + تحميل الملفات (RTL) - - - - - + + + + +
); } - -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 index daa832be54..73c648ad8b 100644 --- a/docs/data/components/progress/RtlProgress.tsx.preview +++ b/docs/data/components/progress/RtlProgress.tsx.preview @@ -1,8 +1,12 @@ - - - Uploading files (RTL) + + + تحميل الملفات (RTL) - - - - \ No newline at end of file + + + + \ No newline at end of file diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js index ef47b513e9..636787c6d6 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js +++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.js @@ -1,80 +1,21 @@ 'use client'; import * as React from 'react'; -import { useTheme } from '@mui/system'; import { Progress } from '@base-ui-components/react/progress'; +import classes from '../../styles.module.css'; export default function UnstyledProgressIntroduction() { return ( -
- - - Uploading files - - - - - - -
+ + + Uploading files + + + + + ); } - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export function Styles() { - const isDarkMode = useIsDarkMode(); - return ( - - ); -} - -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/UnstyledProgressIntroduction/css-modules/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx index ef47b513e9..636787c6d6 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx +++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx @@ -1,80 +1,21 @@ 'use client'; import * as React from 'react'; -import { useTheme } from '@mui/system'; import { Progress } from '@base-ui-components/react/progress'; +import classes from '../../styles.module.css'; export default function UnstyledProgressIntroduction() { return ( -
- - - Uploading files - - - - - - -
+ + + Uploading files + + + + + ); } - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export function Styles() { - const isDarkMode = useIsDarkMode(); - return ( - - ); -} - -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/UnstyledProgressIntroduction/css-modules/index.tsx.preview b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx.preview index 28317020bb..ac12393167 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx.preview +++ b/docs/data/components/progress/UnstyledProgressIntroduction/css-modules/index.tsx.preview @@ -1,9 +1,12 @@ - - + + Uploading files - - + + - - \ No newline at end of file + \ No newline at end of file diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js index 4268250b97..ab6b900fa9 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js +++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.js @@ -62,6 +62,7 @@ const ProgressIndicator = styled(BaseProgress.Indicator)` const Label = styled('span')` cursor: unset; font-weight: bold; + color: var(--color-gray-700); `; function useIsDarkMode() { diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx index 4268250b97..ab6b900fa9 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx +++ b/docs/data/components/progress/UnstyledProgressIntroduction/system/index.tsx @@ -62,6 +62,7 @@ const ProgressIndicator = styled(BaseProgress.Indicator)` const Label = styled('span')` cursor: unset; font-weight: bold; + color: var(--color-gray-700); `; function useIsDarkMode() { diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js index 523131f9e3..6a3411f163 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js +++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.js @@ -74,7 +74,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator(props, ref ref={ref} className={(state) => classNames( - 'rounded-[inherit] bg-gray-500 dark:bg-gray-400', + 'rounded-[inherit] bg-[background-color:var(--code-6)]', typeof props.className === 'function' ? props.className(state) : props.className, @@ -92,7 +92,12 @@ ProgressIndicator.propTypes = { }; function Label(props) { - return ; + return ( + + ); } function classNames(...classes) { diff --git a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx index 8ac23cc6fc..dd7ef543e0 100644 --- a/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx +++ b/docs/data/components/progress/UnstyledProgressIntroduction/tailwind/index.tsx @@ -68,7 +68,7 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator( ref={ref} className={(state) => classNames( - 'rounded-[inherit] bg-gray-500 dark:bg-gray-400', + 'rounded-[inherit] bg-[background-color:var(--code-6)]', typeof props.className === 'function' ? props.className(state) : props.className, @@ -79,7 +79,12 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator( }); function Label(props: React.HTMLAttributes) { - return ; + return ( + + ); } function classNames(...classes: Array) { diff --git a/docs/data/components/progress/progress.mdx b/docs/data/components/progress/progress.mdx index c3d5e8ea65..4086f79d09 100644 --- a/docs/data/components/progress/progress.mdx +++ b/docs/data/components/progress/progress.mdx @@ -72,10 +72,18 @@ Set `value` to `null` to configure an indeterminate progress bar. The `data-inde ## RTL -Set the `direction` prop to `'rtl'` to change the direction that the `Indicator` fills towards for right-to-left languages: +Place the component inside an HTML element or component with the HTML `dir="rtl"` attribute to change the direction that the `Indicator` fills towards for right-to-left languages: ```jsx -{/* Subcomponents */} + + + + + {/* fills from right to left */} + + + + ``` diff --git a/docs/data/components/progress/styles.module.css b/docs/data/components/progress/styles.module.css new file mode 100644 index 0000000000..b32f75c08f --- /dev/null +++ b/docs/data/components/progress/styles.module.css @@ -0,0 +1,45 @@ +.progress { + display: flex; + flex-flow: column nowrap; + gap: 1rem; + width: 20rem; + margin-top: 2rem; + margin-bottom: 2rem; +} + +.track { + position: relative; + width: 100%; + height: 4px; + border-radius: 9999px; + background-color: var(--color-gray-400); + display: flex; + overflow: hidden; +} + +.indicator { + background-color: var(--code-6); + border-radius: inherit; +} + +.indicator[data-indeterminate] { + width: 25%; + animation: indeterminateProgress 1.5s infinite ease-in-out; + will-change: transform; +} + +.label { + cursor: unset; + font-weight: bold; + color: var(--color-gray-700); +} + +@keyframes indeterminateProgress { + from { + transform: translateX(-100%); + } + + to { + transform: translateX(20rem); + } +} diff --git a/docs/data/translations/api-docs/progress-root/progress-root.json b/docs/data/translations/api-docs/progress-root/progress-root.json index cdac80157b..a6c23105e8 100644 --- a/docs/data/translations/api-docs/progress-root/progress-root.json +++ b/docs/data/translations/api-docs/progress-root/progress-root.json @@ -11,7 +11,6 @@ "className": { "description": "Class names applied to the element or a function that returns them based on the component's state." }, - "direction": { "description": "The direction that progress bars fill in" }, "getAriaLabel": { "description": "Accepts a function which returns a string value that provides an accessible name for the Indicator component", "typeDescriptions": { "value": "The component's value" } diff --git a/docs/reference/generated/progress-root.json b/docs/reference/generated/progress-root.json index 7f3684add5..e955a196da 100644 --- a/docs/reference/generated/progress-root.json +++ b/docs/reference/generated/progress-root.json @@ -18,11 +18,6 @@ "type": "string | (state) => string", "description": "Class names applied to the element or a function that returns them based on the component's state." }, - "direction": { - "type": "'ltr' | 'rtl'", - "default": "'ltr'", - "description": "The direction that progress bars fill in" - }, "getAriaLabel": { "type": "(value) => string", "description": "Accepts a function which returns a string value that provides an accessible name for the Indicator component" diff --git a/docs/src/app/experiments/progress.tsx b/docs/src/app/experiments/progress.tsx deleted file mode 100644 index e7d183a2eb..0000000000 --- a/docs/src/app/experiments/progress.tsx +++ /dev/null @@ -1,256 +0,0 @@ -'use client'; -import * as React from 'react'; -import { useTheme } from '@mui/system'; -import { Progress } from '@base-ui-components/react/progress'; - -const VAL1 = 33; - -const CUSTOM_BUFFER_VAL = 77; - -export default function ProgressDemos() { - return ( -
- - - - - - - - - Indeterminate Progress - - - - - - - - - Progress (RTL) - - - - - - - - - Indeterminate (RTL) - - - - - - -

Customizations

- - - `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered` - } - max={Math.min(100, CUSTOM_BUFFER_VAL)} - > - - Custom Buffer Component - - - - - - - - - `${value}% complete, ${CUSTOM_BUFFER_VAL}% buffered` - } - max={Math.min(100, CUSTOM_BUFFER_VAL)} - direction="rtl" - > - - Custom Buffer Component (RTL) - - - - - - - -
- ); -} - -function MyBuffer(props: any) { - const { value, style, ...rest } = props; - const percentageValue = valueToPercent(value, 0, 100); - return ( - - ); -} - -function valueToPercent(value: number | undefined, min: number, max: number) { - if (value === undefined) { - return value; - } - - return ((value - min) * 100) / (max - min); -} - -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'; - -function useIsDarkMode() { - const theme = useTheme(); - return theme.palette.mode === 'dark'; -} - -export function Styles() { - const isDarkMode = useIsDarkMode(); - return ( - - ); -} diff --git a/packages/react/src/progress/index.parts.ts b/packages/react/src/progress/index.parts.ts index f481f8116b..de92865297 100644 --- a/packages/react/src/progress/index.parts.ts +++ b/packages/react/src/progress/index.parts.ts @@ -2,7 +2,4 @@ export { ProgressRoot as Root } from './root/ProgressRoot'; export { ProgressTrack as Track } from './track/ProgressTrack'; export { ProgressIndicator as Indicator } from './indicator/ProgressIndicator'; -export type { - ProgressStatus as Status, - ProgressDirection as Direction, -} from './root/useProgressRoot'; +export type { ProgressStatus as Status } from './root/useProgressRoot'; diff --git a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx index 10e713810e..3c3b4bb9f8 100644 --- a/packages/react/src/progress/indicator/ProgressIndicator.test.tsx +++ b/packages/react/src/progress/indicator/ProgressIndicator.test.tsx @@ -1,17 +1,18 @@ import * as React from 'react'; import { expect } from 'chai'; import { Progress } from '@base-ui-components/react/progress'; +import { describeSkipIf } from '@mui/internal-test-utils'; import { createRenderer, describeConformance } from '#test-utils'; import { ProgressRootContext } from '../root/ProgressRootContext'; +const isJSDOM = /jsdom/.test(window.navigator.userAgent); + const contextValue: ProgressRootContext = { - direction: 'ltr', max: 100, min: 0, value: 30, status: 'progressing', state: { - direction: 'ltr', max: 100, min: 0, status: 'progressing', @@ -30,14 +31,8 @@ describe('', () => { refInstanceof: window.HTMLSpanElement, })); - describe('internal styles', () => { - it('determinate', async function test(t = {}) { - if (/jsdom/.test(window.navigator.userAgent)) { - // @ts-expect-error to support mocha and vitest - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - this?.skip?.() || t?.skip(); - } - + describeSkipIf(isJSDOM)('internal styles', () => { + it('determinate', async () => { const { getByTestId } = await render( @@ -54,13 +49,7 @@ describe('', () => { }); }); - it('indeterminate', async function test(t = {}) { - if (/jsdom/.test(window.navigator.userAgent)) { - // @ts-expect-error to support mocha and vitest - // eslint-disable-next-line @typescript-eslint/no-unused-expressions - this?.skip?.() || t?.skip(); - } - + it('indeterminate', async () => { const { getByTestId } = await render( diff --git a/packages/react/src/progress/indicator/ProgressIndicator.tsx b/packages/react/src/progress/indicator/ProgressIndicator.tsx index 2100238f5c..0558291f35 100644 --- a/packages/react/src/progress/indicator/ProgressIndicator.tsx +++ b/packages/react/src/progress/indicator/ProgressIndicator.tsx @@ -24,10 +24,9 @@ const ProgressIndicator = React.forwardRef(function ProgressIndicator( ) { const { render, className, ...otherProps } = props; - const { direction, max, min, value, state } = useProgressRootContext(); + const { max, min, value, state } = useProgressRootContext(); const { getRootProps } = useProgressIndicator({ - direction, max, min, value, diff --git a/packages/react/src/progress/indicator/useProgressIndicator.ts b/packages/react/src/progress/indicator/useProgressIndicator.ts index 73a4e0ecc1..130af5aecc 100644 --- a/packages/react/src/progress/indicator/useProgressIndicator.ts +++ b/packages/react/src/progress/indicator/useProgressIndicator.ts @@ -1,7 +1,6 @@ 'use client'; import * as React from 'react'; import { mergeReactProps } from '../../utils/mergeReactProps'; -import { ProgressDirection } from '../root/useProgressRoot'; function valueToPercent(value: number, min: number, max: number) { return ((value - min) * 100) / (max - min); @@ -10,9 +9,7 @@ function valueToPercent(value: number, min: number, max: number) { function useProgressIndicator( parameters: useProgressIndicator.Parameters, ): useProgressIndicator.ReturnValue { - const { direction, max = 100, min = 0, value } = parameters; - - const isRtl = direction === 'rtl'; + const { max = 100, min = 0, value } = parameters; const percentageValue = Number.isFinite(value) && value !== null ? valueToPercent(value, min, max) : null; @@ -23,11 +20,11 @@ function useProgressIndicator( } return { - [isRtl ? 'right' : 'left']: 0, + insetInlineStart: 0, height: 'inherit', width: `${percentageValue}%`, }; - }, [isRtl, percentageValue]); + }, [percentageValue]); const getRootProps: useProgressIndicator.ReturnValue['getRootProps'] = React.useCallback( (externalProps = {}) => @@ -44,11 +41,6 @@ function useProgressIndicator( namespace useProgressIndicator { export interface Parameters { - /** - * The direction that progress bars fill in - * @default 'ltr' - */ - direction?: ProgressDirection; /** * The maximum value * @default 100 diff --git a/packages/react/src/progress/root/ProgressRoot.tsx b/packages/react/src/progress/root/ProgressRoot.tsx index 6e3ce6b26d..1031bf4c3a 100644 --- a/packages/react/src/progress/root/ProgressRoot.tsx +++ b/packages/react/src/progress/root/ProgressRoot.tsx @@ -2,7 +2,7 @@ import * as React from 'react'; import PropTypes from 'prop-types'; import { useComponentRenderer } from '../../utils/useComponentRenderer'; -import { type ProgressDirection, ProgressStatus, useProgressRoot } from './useProgressRoot'; +import { ProgressStatus, useProgressRoot } from './useProgressRoot'; import { ProgressRootContext } from './ProgressRootContext'; import { progressStyleHookMapping } from './styleHooks'; import { BaseUIComponentProps } from '../../utils/types'; @@ -25,7 +25,6 @@ const ProgressRoot = React.forwardRef(function ProgressRoot( 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValuetext, - direction = 'ltr', getAriaLabel, getAriaValueText, max = 100, @@ -40,7 +39,6 @@ const ProgressRoot = React.forwardRef(function ProgressRoot( 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValuetext, - direction, getAriaLabel, getAriaValueText, max, @@ -50,12 +48,11 @@ const ProgressRoot = React.forwardRef(function ProgressRoot( const state: ProgressRoot.State = React.useMemo( () => ({ - direction, max, min, status: progress.status, }), - [direction, max, min, progress.status], + [max, min, progress.status], ); const contextValue: ProgressRootContext = React.useMemo( @@ -85,7 +82,6 @@ const ProgressRoot = React.forwardRef(function ProgressRoot( namespace ProgressRoot { export type State = { - direction: ProgressDirection; max: number; min: number; status: ProgressStatus; @@ -119,11 +115,6 @@ ProgressRoot.propTypes /* remove-proptypes */ = { * Class names applied to the element or a function that returns them based on the component's state. */ className: PropTypes.oneOfType([PropTypes.func, PropTypes.string]), - /** - * The direction that progress bars fill in - * @default 'ltr' - */ - direction: PropTypes.oneOf(['ltr', 'rtl']), /** * Accepts a function which returns a string value that provides an accessible name for the Indicator component * @param {number | null} value The component's value diff --git a/packages/react/src/progress/root/styleHooks.ts b/packages/react/src/progress/root/styleHooks.ts index 0d7b31fa3d..cc92f49def 100644 --- a/packages/react/src/progress/root/styleHooks.ts +++ b/packages/react/src/progress/root/styleHooks.ts @@ -2,7 +2,6 @@ import type { CustomStyleHookMapping } from '../../utils/getStyleHookProps'; import type { ProgressRoot } from './ProgressRoot'; export const progressStyleHookMapping: CustomStyleHookMapping = { - direction: () => null, max: () => null, min: () => null, status(value): Record | null { diff --git a/packages/react/src/progress/root/useProgressRoot.ts b/packages/react/src/progress/root/useProgressRoot.ts index 69af98024b..5412d84f1b 100644 --- a/packages/react/src/progress/root/useProgressRoot.ts +++ b/packages/react/src/progress/root/useProgressRoot.ts @@ -4,8 +4,6 @@ import { mergeReactProps } from '../../utils/mergeReactProps'; export type ProgressStatus = 'indeterminate' | 'progressing' | 'complete'; -export type ProgressDirection = 'ltr' | 'rtl'; - function getDefaultAriaValueText(value: number | null) { if (value === null) { return 'indeterminate progress'; @@ -19,7 +17,6 @@ function useProgressRoot(parameters: useProgressRoot.Parameters): useProgressRoo 'aria-label': ariaLabel, 'aria-labelledby': ariaLabelledby, 'aria-valuetext': ariaValuetext, - direction = 'ltr', getAriaLabel, getAriaValueText, max = 100, @@ -43,25 +40,14 @@ function useProgressRoot(parameters: useProgressRoot.Parameters): useProgressRoo 'aria-valuetext': getAriaValueText ? getAriaValueText(value) : (ariaValuetext ?? getDefaultAriaValueText(value)), - dir: direction, role: 'progressbar', }), - [ - ariaLabel, - ariaLabelledby, - ariaValuetext, - direction, - getAriaLabel, - getAriaValueText, - max, - min, - value, - ], + [ariaLabel, ariaLabelledby, ariaValuetext, getAriaLabel, getAriaValueText, max, min, value], ); return { getRootProps, - direction, + max, min, value, @@ -83,11 +69,6 @@ namespace useProgressRoot { * A string value that provides a human-readable text alternative for the current value of the progress indicator. */ 'aria-valuetext'?: string; - /** - * The direction that progress bars fill in - * @default 'ltr' - */ - direction?: ProgressDirection; /** * Accepts a function which returns a string value that provides an accessible name for the Indicator component * @param {number | null} value The component's value @@ -121,10 +102,6 @@ namespace useProgressRoot { getRootProps: ( externalProps?: React.ComponentPropsWithRef<'div'>, ) => React.ComponentPropsWithRef<'div'>; - /** - * The direction that progress bars fill in - */ - direction: ProgressDirection; /** * The maximum value */ diff --git a/packages/react/src/progress/track/ProgressTrack.test.tsx b/packages/react/src/progress/track/ProgressTrack.test.tsx index bd4d3e7617..faa41433cd 100644 --- a/packages/react/src/progress/track/ProgressTrack.test.tsx +++ b/packages/react/src/progress/track/ProgressTrack.test.tsx @@ -4,13 +4,11 @@ import { createRenderer, describeConformance } from '#test-utils'; import { ProgressRootContext } from '../root/ProgressRootContext'; const contextValue: ProgressRootContext = { - direction: 'ltr', max: 100, min: 0, value: 30, status: 'progressing', state: { - direction: 'ltr', max: 100, min: 0, status: 'progressing',