[mantine.dev] Add SemiCircleProgress demos

packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.emptySegmentColor.tsx

@@ -0,0 +1,21 @@
+import { SemiCircleProgress } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { SemiCircleProgress } from '@mantine/core';
+
+function Demo() {
+  return <SemiCircleProgress value={30} emptySegmentColor="var(--mantine-color-dimmed)" />;
+}
+`;
+
+function Demo() {
+  return <SemiCircleProgress value={30} emptySegmentColor="var(--mantine-color-dimmed)" />;
+}
+
+export const emptySegmentColor: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+};

packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.labelPosition.tsx

@@ -0,0 +1,31 @@
+import { SemiCircleProgress } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { SemiCircleProgress } from '@mantine/core';
+
+function Demo() {
+  return (
+    <>
+      <SemiCircleProgress value={30} label="Bottom" mb="xl" />
+      <SemiCircleProgress value={30} label="Center" labelPosition="center" />
+    </>
+  );
+}
+`;
+
+function Demo() {
+  return (
+    <>
+      <SemiCircleProgress value={30} label="Bottom" mb="xl" />
+      <SemiCircleProgress value={30} label="Center" labelPosition="center" />
+    </>
+  );
+}
+
+export const labelPosition: MantineDemo = {
+  type: 'code',
+  component: Demo,
+  code,
+  centered: true,
+};

packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.transitions.tsx

@@ -0,0 +1,43 @@
+import { useState } from 'react';
+import { Button, SemiCircleProgress } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { useState } from 'react';
+import { Button, SemiCircleProgress } from '@mantine/core';
+
+function Demo() {
+  const [value, setValue] = useState(30);
+
+  return (
+    <>
+      <SemiCircleProgress value={value} transitionDuration={250} label={\`\${value}%\`} />
+
+      <Button onClick={() => setValue(Math.floor(Math.random() * 100))} mt="xl" fullWidth>
+        Set random value
+      </Button>
+    </>
+  );
+}
+`;
+
+function Demo() {
+  const [value, setValue] = useState(30);
+
+  return (
+    <>
+      <SemiCircleProgress value={value} transitionDuration={250} label={`${value}%`} />
+
+      <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,
+};

packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demo.usage.tsx

@@ -0,0 +1,27 @@
+import { SemiCircleProgress } from '@mantine/core';
+import { MantineDemo } from '@mantinex/demo';
+
+const code = `
+import { SemiCircleProgress } from '@mantine/core';
+
+function Demo() {
+  return <SemiCircleProgress{{props}} />;
+}
+`;
+
+function Wrapper(props: any) {
+  return <SemiCircleProgress {...props} />;
+}
+
+export const usage: MantineDemo = {
+  type: 'configurator',
+  component: Wrapper,
+  code,
+  centered: true,
+  controls: [
+    { type: 'color', prop: 'filledSegmentColor', initialValue: 'blue', libraryValue: null },
+    { type: 'number', prop: 'size', min: 70, max: 270, initialValue: 200, libraryValue: null },
+    { type: 'number', prop: 'thickness', min: 1, max: 20, initialValue: 12, libraryValue: null },
+    { type: 'number', prop: 'value', min: 0, max: 100, initialValue: 40, libraryValue: null },
+  ],
+};

packages/@docs/demos/src/demos/core/SemiCircleProgress/SemiCircleProgress.demos.story.tsx

@@ -0,0 +1,24 @@
+import { renderDemo } from '../../../render-demo';
+import * as demos from './index';
+
+export default { title: 'SemiCircleProgress' };
+
+export const Demo_usage = {
+  name: '⭐ Demo: usage',
+  render: renderDemo(demos.usage),
+};
+
+export const Demo_emptySegmentColor = {
+  name: '⭐ Demo: emptySegmentColor',
+  render: renderDemo(demos.emptySegmentColor),
+};
+
+export const Demo_labelPosition = {
+  name: '⭐ Demo: labelPosition',
+  render: renderDemo(demos.labelPosition),
+};
+
+export const Demo_transitions = {
+  name: '⭐ Demo: transitions',
+  render: renderDemo(demos.transitions),
+};

packages/@docs/demos/src/demos/core/SemiCircleProgress/index.ts

@@ -0,0 +1,4 @@
+export { usage } from './SemiCircleProgress.demo.usage';
+export { emptySegmentColor } from './SemiCircleProgress.demo.emptySegmentColor';
+export { labelPosition } from './SemiCircleProgress.demo.labelPosition';
+export { transitions } from './SemiCircleProgress.demo.transitions';

packages/@docs/demos/src/index.ts

@@ -80,6 +80,7 @@ export * as RingProgressDemos from './demos/core/RingProgress';
 export * as ScrollAreaDemos from './demos/core/ScrollArea';
 export * as SegmentedControlDemos from './demos/core/SegmentedControl';
 export * as SelectDemos from './demos/core/Select';
+export * as SemiCircleProgressDemos from './demos/core/SemiCircleProgress';
 export * as SimpleGridDemos from './demos/core/SimpleGrid';
 export * as SkeletonDemos from './demos/core/Skeleton';
 export * as SliderDemos from './demos/core/Slider';

packages/@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.module.css

@@ -22,12 +22,10 @@
 }
 
 .filledSegment {
-  &:where([data-animate]) {
-    transition:
-      stroke-dashoffset var(--scp-transition-duration) ease,
-      stroke-dasharray var(--scp-transition-duration) ease,
-      stroke var(--scp-transition-duration);
-  }
+  transition:
+    stroke-dashoffset var(--scp-transition-duration) ease,
+    stroke-dasharray var(--scp-transition-duration) ease,
+    stroke var(--scp-transition-duration);
 }
 
 .label {