[docs] Add typescript section to all feedback components

HermanNygaard · Oct 9, 2021 · 80f4800 · 80f4800
1 parent efc3a87
commit 80f4800
Show file tree

Hide file tree

Showing 5 changed files with 126 additions and 0 deletions.
diff --git a/docs/src/docs/core/Alert.mdx b/docs/src/docs/core/Alert.mdx
@@ -37,3 +37,32 @@ By default Alert will have `theme.primaryColor` color:
 
 - Root element role set to `alert`
 - Set `closeButtonLabel` prop to make close button visible for screen readers
+
+## TypeScript
+
+### Component props type
+
+Import component props type:
+
+```tsx
+import type { AlertProps } from '@mantine/core';
+```
+
+`AlertProps` extends `React.ComponentPropsWithoutRef<'div'>`, all other props are available under _Component props_ tab.
+
+### AlertStylesNames type
+
+`AlertStylesNames` type is a union with Alert [Styles API](/theming/styles-api/) names:
+
+```tsx
+import type { AlertStylesNames } from '@mantine/core';
+
+const alertClasses: Partial<Record<AlertStylesNames, 'string'>> = {
+  title: 'alert-title',
+  body: 'alert-body',
+};
+
+<Alert classNames={alertClasses} />;
+```
+
+See full styles descriptions list under _Styles API_ tab.
diff --git a/docs/src/docs/core/Loader.mdx b/docs/src/docs/core/Loader.mdx
@@ -55,3 +55,13 @@ import { LOADER_SIZES } from '@mantine/core';
   head={['Size', 'Height or width']}
   data={Object.keys(LOADER_SIZES).map((size) => [size, `${LOADER_SIZES[size]}px`])}
 />
+
+## TypeScript
+
+Import component props type:
+
+```tsx
+import type { LoaderProps } from '@mantine/core';
+```
+
+`LoaderProps` extends `React.ComponentPropsWithoutRef<'svg'>`, all other props are available under _Component props_ tab.
diff --git a/docs/src/docs/core/Notification.mdx b/docs/src/docs/core/Notification.mdx
@@ -48,3 +48,32 @@ To support screen readers set close button aria-label or title with `closeButton
 <Notification closeButtonProps={{ 'aria-label': 'Hide notification' }} />
 <Notification closeButtonProps={{ title: 'Hide notification' }} />
 ```
+
+## TypeScript
+
+### Component props type
+
+Import component props type:
+
+```tsx
+import type { NotificationProps } from '@mantine/core';
+```
+
+`NotificationProps` extends `React.ComponentPropsWithoutRef<'div'>`, all other props are available under _Component props_ tab.
+
+### NotificationStylesNames type
+
+`NotificationStylesNames` type is a union with Notification [Styles API](/theming/styles-api/) names:
+
+```tsx
+import type { NotificationStylesNames } from '@mantine/core';
+
+const notificationClasses: Partial<Record<NotificationStylesNames, 'string'>> = {
+  title: 'notification-title',
+  description: 'notification-description',
+};
+
+<Notification classNames={notificationClasses} />;
+```
+
+See full styles descriptions list under _Styles API_ tab.
diff --git a/docs/src/docs/core/Progress.mdx b/docs/src/docs/core/Progress.mdx
@@ -81,3 +81,32 @@ Provide aria-label attribute to label progress:
 ```tsx
 <Progress aria-label="Uploading progress" value={10} />
 ```
+
+## TypeScript
+
+### Component props type
+
+Import component props type:
+
+```tsx
+import type { ProgressProps } from '@mantine/core';
+```
+
+`ProgressProps` extends `React.ComponentPropsWithoutRef<'div'>`, all other props are available under _Component props_ tab.
+
+### ProgressStylesNames type
+
+`ProgressStylesNames` type is a union with Progress [Styles API](/theming/styles-api/) names:
+
+```tsx
+import type { ProgressStylesNames } from '@mantine/core';
+
+const progressClasses: Partial<Record<ProgressStylesNames, 'string'>> = {
+  root: 'progress-root',
+  bar: 'progress-bar',
+};
+
+<Progress classNames={progressClasses} />;
+```
+
+See full styles descriptions list under _Styles API_ tab.
diff --git a/docs/src/docs/core/RingProgress.mdx b/docs/src/docs/core/RingProgress.mdx
@@ -36,3 +36,32 @@ 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} />
+
+## TypeScript
+
+### Component props type
+
+Import component props type:
+
+```tsx
+import type { RingProgressProps } from '@mantine/core';
+```
+
+`RingProgressProps` extends `React.ComponentPropsWithoutRef<'div'>`, all other props are available under _Component props_ tab.
+
+### RingProgressStylesNames type
+
+`RingProgressStylesNames` type is a union with RingProgress [Styles API](/theming/styles-api/) names:
+
+```tsx
+import type { RingProgressStylesNames } from '@mantine/core';
+
+const progressClasses: Partial<Record<RingProgressStylesNames, 'string'>> = {
+  root: 'progress-root',
+  label: 'progress-label',
+};
+
+<RingProgress classNames={progressClasses} />;
+```
+
+See full styles descriptions list under _Styles API_ tab.