feat: update linear and circular progress components in progress

packages/react-docs/pages/components/progress/circular.js

@@ -4,6 +4,8 @@ import React, { useCallback, useEffect, useState } from 'react';
 
 const sizeOptions = [16, 32, 48, 64, 80];
 const thicknessOptions = [1.2, 2.4, 3.6];
+const defaultSize = 48;
+const defaultThickness = 3.6;
 
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />
@@ -17,8 +19,8 @@ const useSelection = (defaultValue) => {
 
 const App = () => {
   const [variant, changeVariantBy] = useSelection('indeterminate');
-  const [size, changeSizeBy] = useSelection(48);
-  const [thickness, changeThicknessBy] = useSelection(3.6);
+  const [size, changeSizeBy] = useSelection(defaultSize);
+  const [thickness, changeThicknessBy] = useSelection(defaultThickness);
   const [progress, setProgress] = useState(0);
   const resetProgress = useCallback(() => setProgress(0), []);
 
@@ -100,7 +102,6 @@ const App = () => {
           ))}
         </ButtonGroup>
       </FormGroup>
-      <Divider mb="4x" />
       <FormGroup>
         <Box mb="2x">
           <TextLabel>

packages/react-docs/pages/components/progress/customization.js

@@ -4,16 +4,16 @@ import React from 'react';
 const App = () => (
   <Stack spacing="4x">
     <TextLabel>Indeterminate</TextLabel>
-    <LinearProgress size="md" variant="indeterminate" color="blue:60" width={320} />
-    <LinearProgress size="md" variant="indeterminate" color="teal:40" width={320} />
+    <LinearProgress variant="indeterminate" color="blue:60" width={320} />
+    <LinearProgress variant="indeterminate" color="teal:40" width={320} />
     <Divider />
     <TextLabel>Determinate</TextLabel>
     <Flex alignItems="center" columnGap="3x">
-      <LinearProgress size="md" variant="determinate" value={40} color="blue:60" width={320}/>
+      <LinearProgress variant="determinate" value={40} color="blue:60" width={320}/>
       <TextLabel>40%</TextLabel>
     </Flex>
     <Flex alignItems="center" columnGap="3x">
-      <LinearProgress size="md" variant="determinate" value={60} color="teal:40" width={320} />
+      <LinearProgress variant="determinate" value={60} color="teal:40" width={320} />
       <TextLabel>60%</TextLabel>
     </Flex>
     <Divider />
@@ -33,7 +33,6 @@ const App = () => (
     </Flex>
     <Flex alignItems="center" columnGap="3x">
       <LinearProgress
-        size="md"
         variant="determinate"
         value={100}
         color={['blue:60', 'teal:40']}
@@ -45,7 +44,6 @@ const App = () => (
     <TextLabel>Linear gradient with wave light</TextLabel>
     <Flex alignItems="center" columnGap="3x">
       <LinearProgress
-        size="md"
         variant="determinate"
         value={100}
         color="linear-gradient(90deg, rgba(255, 255, 255, 0) 6.03%, rgba(255, 255, 255, 0.12) 16.32%, rgba(255, 255, 255, 0.12) 42.22%, rgba(255, 255, 255, 0) 60.67%), linear-gradient(90deg, #1E5EDE, #04CAA1)"

packages/react-docs/pages/components/progress/index.page.mdx

@@ -26,17 +26,25 @@ import {
 
 ### Customization
 
-You can use the `color` prop to change the color of the progress bar. The default color is `blue:60`.
+The `color` prop allows you to customize the progress bar's color. You can choose from default or custom theme colors.  
 
-It accepts a valid CSS background color/image, a color token from the theme, or an array of colors to create a linear gradient.
+It accepts any valid CSS background color or image, a color token from the theme, or an array of colors to create a linear gradient.
 
 {render('./customization')}
 
 ## Props
 
 ### CircularProgress
 
-TBD
+| Name | Type | Default | Description |
+| :--- | :--- | :------ | :---------- |
+| color | string \| string[] | 'blue:60' | The color of the progress bar. It supports both default and custom theme colors. |
+| min | numbner | 0 | The minimum value of the progress. |
+| max | number | 100 | The maximum value of the progress. |
+| size | number \| string | 40 | The size of the progress bar. If using a number, the pixel unit is assumed. If using a string, you need to provide the CSS unit, for example '2rem'. |
+| thickness | number | 3.6 | The thickness of the circle. |
+| value | number |  | The value of the progress indicator for the determinate variant. Value between `min` and `max`. |
+| variant | string | 'indeterminate' | The variant to use. One of: 'indeterminate', 'determinate'<br />• Use indeterminate when there is no progress value.<br />• Use determinate when a progress value is defined. |
 
 ### LinearProgress
 
@@ -45,6 +53,5 @@ TBD
 | color | string \| string[] | 'blue:60' | The color of the progress bar. It accepts a valid CSS background color/image, a color token from the theme, or an array of colors to create a linear gradient. |
 | min | numbner | 0 | The minimum value of the progress. |
 | max | number | 100 | The maximum value of the progress. |
-| size | string | 'sm' | The size of the progress bar. One of: 'xs', 'sm', 'md', 'lg' |
+| value | number |  | The value of the progress indicator for the determinate variant. Value between `min` and `max`. |
 | variant | string | 'indeterminate' | The variant to use. One of: 'indeterminate', 'determinate'<br />• Use indeterminate when there is no progress value.<br />• Use determinate when a progress value is defined. |
-| value | number |  | The value of the progress indicator for the determinate variant. |

packages/react-docs/pages/components/progress/linear.js

@@ -2,7 +2,8 @@ import { Box, Button, ButtonGroup, Divider, Flex, LinearProgress, Text, TextLabe
 import { callAll } from '@tonic-ui/utils';
 import React, { useCallback, useEffect, useState } from 'react';
 
-const sizeOptions = ['xs', 'sm', 'md', 'lg', 16];
+const heightOptions = [2, 4, 8, 12];
+const defaultHeight = 4; 
 
 const FormGroup = (props) => (
   <Box mb="4x" {...props} />
@@ -16,7 +17,7 @@ const useSelection = (defaultValue) => {
 
 const App = () => {
   const [variant, changeVariantBy] = useSelection('indeterminate');
-  const [size, changeSizeBy] = useSelection('sm');
+  const [height, changeHeightBy] = useSelection(defaultHeight);
   const [progress, setProgress] = useState(0);
   const resetProgress = useCallback(() => setProgress(0), []);
 
@@ -75,7 +76,7 @@ const App = () => {
       <FormGroup>
         <Box mb="2x">
           <TextLabel>
-            size
+            height
           </TextLabel>
         </Box>
         <ButtonGroup
@@ -86,11 +87,11 @@ const App = () => {
             }
           }}
         >
-          {sizeOptions.map(value => (
+          {heightOptions.map(value => (
             <Button
               key={value}
-              selected={value === size}
-              onClick={changeSizeBy(value)}
+              selected={value === height}
+              onClick={changeHeightBy(value)}
               minWidth="15x"
             >
               {value}
@@ -103,7 +104,7 @@ const App = () => {
         <Box width={320}>
           <LinearProgress
             variant={variant}
-            size={size}
+            height={height}
             value={variant === 'determinate' ? progress : undefined}
           />
         </Box>

packages/react/src/progress/CircularProgress.js

@@ -32,7 +32,7 @@ const CircularProgress = forwardRef((inProps, ref) => {
 
   const circularProgressRootStyleProps = useCircularProgressRootStyle({ color, size, variant });
   const circularProgressSVGStyleProps = useCircularProgressSVGStyle();
-  const circularProgressCircleStyleProps = useCircularProgressCircleStyle({ thickness, value, variant });
+  const circularProgressCircleStyleProps = useCircularProgressCircleStyle({ max, min, thickness, value, variant });
 
   const circularProgressRootProps = {
     'aria-label': ariaLabel,

packages/react/src/progress/LinearProgress.js

@@ -1,3 +1,5 @@
+import { useOnceWhen } from '@tonic-ui/react-hooks';
+import { warnDeprecatedProps } from '@tonic-ui/utils';
 import { ensureFiniteNumber } from 'ensure-type';
 import React, { forwardRef } from 'react';
 import { Box } from '../box';
@@ -7,22 +9,22 @@ import {
   useLinearProgressBarStyle,
 } from './styles';
 
-const defaultSize = 'sm';
 const defaultVariant = 'indeterminate';
 
 const LinearProgress = forwardRef((inProps, ref) => {
   const {
+    size: sizeProp, // deprecated
+
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
     color = 'blue:60',
     min = 0,
     max = 100,
-    size = defaultSize,
     value,
     variant = defaultVariant,
     ...rest
   } = useDefaultProps({ props: inProps, name: 'LinearProgress' });
-  const linearProgressRootStyleProps = useLinearProgressRootStyle({ size });
+  const linearProgressRootStyleProps = useLinearProgressRootStyle();
   const linearProgressBarStyleProps = useLinearProgressBarStyle({ color, variant });
   const linearProgressRootProps = {
     'aria-label': ariaLabel,
@@ -31,6 +33,28 @@ const LinearProgress = forwardRef((inProps, ref) => {
   };
   const linearProgressBarProps = {};
 
+  { // deprecation warning
+    const prefix = `${LinearProgress.displayName}:`;
+
+    useOnceWhen(() => {
+      warnDeprecatedProps('size', {
+        prefix,
+        alternative: 'height',
+        willRemove: true,
+      });
+    }, (sizeProp !== undefined));
+
+    if (sizeProp) {
+      const height = {
+        'xs': '1h',
+        'sm': '1x', // default
+        'md': '2x',
+        'lg': '3x',
+      }[sizeProp] ?? sizeProp;
+      linearProgressRootStyleProps.height = height;
+    }
+  }
+
   if (variant === 'determinate') {
     if ((process.env.NODE_ENV !== 'production') && (value === undefined)) {
       console.error('You need to provide a value prop when using the determinate variant of LinearProgress.');

packages/react/src/progress/styles.js

@@ -47,24 +47,18 @@ const circularProgressCircleKeyframe = keyframes`
   }
 `;
 
-const useLinearProgressRootStyle = ({ size: sizeProp }) => {
+const useLinearProgressRootStyle = () => {
   const [colorMode] = useColorMode();
   const backgroundColor = {
     dark: 'rgba(255, 255, 255, 0.12)',
     light: 'rgba(0, 0, 0, 0.12)',
   }[colorMode];
-  const size = {
-    'xs': '1h',
-    'sm': '1x',
-    'md': '2x',
-    'lg': '3x',
-  }[sizeProp] ?? sizeProp;
 
   return {
     position: 'relative',
     overflow: 'hidden',
     backgroundColor,
-    height: size,
+    height: '1x',
   };
 };
 
@@ -137,18 +131,29 @@ const useCircularProgressSVGStyle = () => {
   };
 };
 
-const useCircularProgressCircleStyle = ({ thickness, value, variant }) => {
+const useCircularProgressCircleStyle = ({
+  max,
+  min,
+  thickness,
+  value,
+  variant,
+}) => {
   const baseStyle = {
     stroke: 'currentColor',
   };
 
   if (variant === 'determinate') {
-    const circumference = 2 * Math.PI * ((CIRCULAR_PROGRESS_SIZE - thickness) / 2);
+    const radius = ((CIRCULAR_PROGRESS_SIZE - thickness) / 2);
+    const circumference = 2 * Math.PI * radius;
+    const clampedValue = Math.max(min, Math.min(value, max));
+    const percentage = 100 - ((clampedValue - min) / (max - min)) * 100;
+    const strokeDasharray = circumference.toFixed(3);
+    const strokeDashoffset = ((percentage / 100) * circumference).toFixed(3) + 'px';
 
     return {
       ...baseStyle,
-      strokeDasharray: circumference.toFixed(3),
-      strokeDashoffset: `${(((100 - value) / 100) * circumference).toFixed(3)}px`,
+      strokeDasharray,
+      strokeDashoffset,
       transition: createTransitionStyle('stroke-dashoffset'),
     };
   }