[@mantine/core] RingProgress: Add transitionDuration prop support (#…

…7103) * Add transitionDuration prop to RingProgress * Revert additional changes
mantinedev · Nov 16, 2024 · e55fbe6 · e55fbe6
1 parent 3145f41
commit e55fbe6
Show file tree

Hide file tree

Showing 7 changed files with 84 additions and 7 deletions.
diff --git a/apps/mantine.dev/src/pages/core/ring-progress.mdx b/apps/mantine.dev/src/pages/core/ring-progress.mdx
@@ -43,3 +43,10 @@ You can add any React node as label, e.g. [Text](/core/text/) component with som
 or [ThemeIcon](/core/theme-icon/):
 
 <Demo data={RingProgressDemos.label} />
+
+## Filled segment transition
+
+By default, transitions are disabled, to enable them, set `transitionDuration` prop
+to a number of milliseconds:
+
+<Demo data={RingProgressDemos.transitions} />
diff --git a/packages/@docs/demos/src/demos/core/RingProgress/RingProgress.demo.transitions.tsx b/packages/@docs/demos/src/demos/core/RingProgress/RingProgress.demo.transitions.tsx
@@ -0,0 +1,51 @@
+import { useState } from 'react';
+import { Button, RingProgress, Text } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { useState } from 'react';
+import { Button, RingProgress, Text } from '@mantine/core';
+
+function Demo() {
+  const [value, setValue] = useState(30);
+
+  return (
+    <>
+      <RingProgress
+        sections={[{ value, color: 'blue' }]}
+        transitionDuration={250}
+        label={<Text ta="center">{value}%</Text>}
+      />
+
+      <Button onClick={() => setValue(Math.floor(Math.random() * 100))} mt="xl" fullWidth>
+        Set random value
+      </Button>
+    </>
+  );
+}
+`;
+
+function Demo() {
+  const [value, setValue] = useState(30);
+
+  return (
+    <>
+      <RingProgress
+        sections={[{ value, color: 'blue' }]}
+        transitionDuration={250}
+        label={<Text ta="center">{value}%</Text>}
+      />
+
+      <Button onClick={() => setValue(Math.floor(Math.random() * 100))} mt="xl" fullWidth>
+        Set random value
+      </Button>
+    </>
+  );
+}
+
+export const transitions: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+};
diff --git a/packages/@docs/demos/src/demos/core/RingProgress/RingProgress.demos.story.tsx b/packages/@docs/demos/src/demos/core/RingProgress/RingProgress.demos.story.tsx
@@ -32,3 +32,8 @@ export const Demo_rootColor = {
   name: '⭐ Demo: rootColor',
   render: renderDemo(demos.rootColor),
 };
+
+export const Demo_transitions = {
+  name: '⭐ Demo: transitions',
+  render: renderDemo(demos.transitions),
+};
diff --git a/packages/@docs/demos/src/demos/core/RingProgress/index.ts b/packages/@docs/demos/src/demos/core/RingProgress/index.ts
@@ -4,3 +4,4 @@ export { label } from './RingProgress.demo.label';
 export { tooltip } from './RingProgress.demo.tooltip';
 export { sectionsProps } from './RingProgress.demo.sectionsProps';
 export { rootColor } from './RingProgress.demo.rootColor';
+export { transitions } from './RingProgress.demo.transitions';
diff --git a/packages/@docs/styles-api/src/data/RingProgress.styles-api.ts b/packages/@docs/styles-api/src/data/RingProgress.styles-api.ts
@@ -13,6 +13,7 @@ export const RingProgressStylesApi: StylesApiData<RingProgressFactory> = {
     root: {
       '--rp-label-offset': 'Label offset on the left and right sides of the ring',
       '--rp-size': 'Controls `height` and `width` of svg and root elements',
+      '--rp-transition-duration': 'Controls transition duration of filled segments',
     },
   },
 };
diff --git a/packages/@mantine/core/src/components/RingProgress/RingProgress.module.css b/packages/@mantine/core/src/components/RingProgress/RingProgress.module.css
@@ -4,6 +4,7 @@
   height: var(--rp-size);
   min-width: var(--rp-size);
   min-height: var(--rp-size);
+  --rp-transition-duration: 0ms;
 }
 
 .svg {
@@ -16,6 +17,10 @@
 
 .curve {
   stroke: var(--curve-color, var(--rp-curve-root-color));
+  transition:
+    stroke-dashoffset var(--rp-transition-duration) ease,
+    stroke-dasharray var(--rp-transition-duration) ease,
+    stroke var(--rp-transition-duration);
 
   @mixin light {
     --rp-curve-root-color: var(--mantine-color-gray-2);

diff --git a/packages/@mantine/core/src/components/RingProgress/RingProgress.tsx b/packages/@mantine/core/src/components/RingProgress/RingProgress.tsx
@@ -27,7 +27,7 @@ interface RingProgressSection extends React.ComponentPropsWithRef<'circle'> {
 
 export type RingProgressStylesNames = 'root' | 'svg' | 'label' | 'curve';
 export type RingProgressCssVariables = {
-  root: '--rp-size' | '--rp-label-offset';
+  root: '--rp-size' | '--rp-label-offset' | '--rp-transition-duration';
 };
 
 export interface RingProgressProps
@@ -51,6 +51,9 @@ export interface RingProgressProps
 
   /** Color of the root section, key of theme.colors or CSS color value */
   rootColor?: MantineColor;
+
+  /** Transition duration of filled section styles changes in ms, `0` by default */
+  transitionDuration?: number;
 }
 
 export type RingProgressFactory = Factory<{
@@ -65,12 +68,15 @@ const defaultProps: Partial<RingProgressProps> = {
   thickness: 12,
 };
 
-const varsResolver = createVarsResolver<RingProgressFactory>((_, { size, thickness }) => ({
-  root: {
-    '--rp-size': rem(size),
-    '--rp-label-offset': rem(thickness! * 2),
-  },
-}));
+const varsResolver = createVarsResolver<RingProgressFactory>(
+  (_, { size, thickness, transitionDuration }) => ({
+    root: {
+      '--rp-size': rem(size),
+      '--rp-label-offset': rem(thickness! * 2),
+      '--rp-transition-duration': transitionDuration ? `${transitionDuration}ms` : undefined,
+    },
+  })
+);
 
 export const RingProgress = factory<RingProgressFactory>((_props, ref) => {
   const props = useProps('RingProgress', defaultProps, _props);
@@ -87,6 +93,7 @@ export const RingProgress = factory<RingProgressFactory>((_props, ref) => {
     thickness,
     roundCaps,
     rootColor,
+    transitionDuration,
     ...others
   } = props;