[mantine.dev] Add SemiCircleProgress documentation

apps/mantine.dev/src/mdx/data/mdx-core-data.ts

@@ -1163,4 +1163,16 @@ export const MDX_CORE_DATA: Record<string, Frontmatter> = {
     source: '@mantine/core/src/components/Tree/Tree.tsx',
     docs: 'core/tree.mdx',
   },
+
+  SemiCircleProgress: {
+    title: 'SemiCircleProgress',
+    package: '@mantine/core',
+    slug: '/core/semi-circle-progress',
+    props: ['SemiCircleProgress'],
+    styles: ['SemiCircleProgress'],
+    description: 'Represent progress with semi circle diagram',
+    import: "import { SemiCircleProgress } from '@mantine/core';",
+    source: '@mantine/core/src/components/SemiCircleProgress/SemiCircleProgress.tsx',
+    docs: 'core/semi-circle-progress.mdx',
+  },
 };

apps/mantine.dev/src/mdx/mdx-pages-group.ts

@@ -262,6 +262,7 @@ export const MDX_PAGES_GROUPS: MdxPagesGroup[] = [
           MDX_DATA.Skeleton,
           MDX_DATA.Progress,
           MDX_DATA.RingProgress,
+          MDX_DATA.SemiCircleProgress,
         ],
       },
       {

apps/mantine.dev/src/pages/changelog/7-12-0.mdx

@@ -1,9 +1,15 @@
-import { AvatarDemos } from '@docs/demos';
+import { SemiCircleProgressDemos } from '@docs/demos';
 import { Layout } from '@/layout';
 import { MDX_DATA } from '@/mdx';
 
 export default Layout(MDX_DATA.Changelog7110);
 
+## SemiCircleProgress component
+
+New [SemiCircleProgress](/core/semi-circle-progress) component:
+
+<Demo data={SemiCircleProgressDemos.usage} />
+
 ## Help Center updates
 
 - [Server components guide](https://help.mantine.dev/q/server-components) has been updated to include `Component.extend` usage in server components.

apps/mantine.dev/src/pages/core/semi-circle-progress.mdx

@@ -0,0 +1,30 @@
+import { SemiCircleProgressDemos } from '@docs/demos';
+import { Layout } from '@/layout';
+import { MDX_DATA } from '@/mdx';
+
+export default Layout(MDX_DATA.SemiCircleProgress);
+
+## Usage
+
+<Demo data={SemiCircleProgressDemos.usage} />
+
+## Change empty segment color
+
+Use `emptySegmentColor` prop to change color of empty segment,
+it accepts key of `theme.colors` or any valid CSS color value:
+
+<Demo data={SemiCircleProgressDemos.emptySegmentColor} />
+
+## Change label position
+
+By default, the label is displayed at the bottom of the component,
+you can change its position to `center` by using `labelPosition` prop:
+
+<Demo data={SemiCircleProgressDemos.labelPosition} />
+
+## Filled segment transition
+
+By default, transitions are disabled, to enable them, set `transitionDuration` prop
+to a number of milliseconds:
+
+<Demo data={SemiCircleProgressDemos.transitions} />

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

@@ -46,7 +46,7 @@
     }
   }
 
-  &[data-position='center'] {
+  &:where([data-position='center']) {
     top: 50%;
     padding-inline: calc(var(--scp-thickness) * 3);
   }