From 8dd77dceb20244bb48218e98533ec4e3b4805afd Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Thu, 6 May 2021 21:34:28 +0530 Subject: [PATCH 1/6] [Core] fix storybook configuration --- configuration/storybook/main.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/configuration/storybook/main.js b/configuration/storybook/main.js index cff2753ef78..9f5461c0018 100644 --- a/configuration/storybook/main.js +++ b/configuration/storybook/main.js @@ -4,7 +4,7 @@ const path = require('path'); const TsconfigPathsPlugin = require('tsconfig-paths-webpack-plugin'); module.exports = { - stories: [path.join(__dirname, '../../src/**/*.story.@(ts|tsx)')], + stories: [path.resolve(__dirname, '../../src/**/*.story.@(ts|tsx)').replace(/\\/g, '/')], addons: ['@storybook/addon-essentials'], webpackFinal: async (config) => { config.resolve = { From 50da14cc9634e6dae0df5d39e167b0e5f7f2ed2c Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Fri, 7 May 2021 13:04:40 +0530 Subject: [PATCH 2/6] [core,docs] add additional props to Hr component --- docs/src/docs/core/Hr.mdx | 20 ++++++++- docs/src/docs/demos/core/Hr/hr.demos.tsx | 48 ++++++++++++++++++++ src/mantine-core/src/Hr/Hr.story.tsx | 31 ++++++++++++- src/mantine-core/src/Hr/Hr.styles.ts | 28 +++++++++++- src/mantine-core/src/Hr/Hr.tsx | 57 ++++++++++++++++++++---- 5 files changed, 172 insertions(+), 12 deletions(-) diff --git a/docs/src/docs/core/Hr.mdx b/docs/src/docs/core/Hr.mdx index f7998c4de08..459d4511f9a 100644 --- a/docs/src/docs/core/Hr.mdx +++ b/docs/src/docs/core/Hr.mdx @@ -8,7 +8,13 @@ description: 'Display horizontal line' --- import { HR_SIZES } from '@mantine/core'; -import { HrBaseDemo, HrSizesDemo, HrColorDemo } from '../demos/core/Hr/hr.demos'; +import { + HrBaseDemo, + HrSizesDemo, + HrColorDemo, + HrInsetDemo, + HrSubHeaderDemo, +} from '../demos/core/Hr/hr.demos'; # Hr @@ -31,6 +37,12 @@ You can choose any color defined in them +## Inset + +You can add inset to the Hr. Inset can further be applied to different directions including `left, right, middle`. + + + ## Sizes Hr has predefined sizes: xs, sm, md, lg, xl. @@ -49,6 +61,12 @@ import { HR_SIZES } from '@mantine/core'; data={Object.keys(HR_SIZES).map((size) => [size, `${HR_SIZES[size]}px`])} /> +## Sub-header + +You can add SubHeader to the Hr. It also allows applying custom styling to the Hr using `subHeaderStyle` prop. + + + ## Component props diff --git a/docs/src/docs/demos/core/Hr/hr.demos.tsx b/docs/src/docs/demos/core/Hr/hr.demos.tsx index 46cd5f1e032..9f7d02652a6 100644 --- a/docs/src/docs/demos/core/Hr/hr.demos.tsx +++ b/docs/src/docs/demos/core/Hr/hr.demos.tsx @@ -48,6 +48,30 @@ export function HrColorDemo() { ); } +const insetCode = `import React from 'react'; +import { Hr } from '@mantine/core'; +function Demo() { + return ( + <> +
+
+
+
+ + ); +}`; + +export function HrInsetDemo() { + return ( + +
+
+
+
+ + ); +} + const sizesCode = `import React from 'react'; import { Hr } from '@mantine/core'; @@ -76,3 +100,27 @@ export function HrSizesDemo() { ); } + +const subHeaderCode = `import React from 'react'; +import { Hr } from '@mantine/core'; +function Demo() { + return ( + <> +
+
+
+
+ + ); +}`; + +export function HrSubHeaderDemo() { + return ( + +
+
+
+
+ + ); +} diff --git a/src/mantine-core/src/Hr/Hr.story.tsx b/src/mantine-core/src/Hr/Hr.story.tsx index 267b0223077..449513695f6 100644 --- a/src/mantine-core/src/Hr/Hr.story.tsx +++ b/src/mantine-core/src/Hr/Hr.story.tsx @@ -17,7 +17,7 @@ storiesOf('@mantine/core/Hr', module)
-
+
)) .add('Sizes', () =>
{sizes}
) @@ -29,4 +29,33 @@ storiesOf('@mantine/core/Hr', module)
{getColors({ themeOverride: { colorScheme: 'dark' } })} + )) + .add('Inset', () => ( +
+
+
+
+
+
+ )) + .add('Vertical Hr', () => ( +
+
+
+
+ )) + .add('Sub header', () => ( +
+
+
+
+
+
+
)); diff --git a/src/mantine-core/src/Hr/Hr.styles.ts b/src/mantine-core/src/Hr/Hr.styles.ts index fdde8a4d5c0..8745c7a7b08 100644 --- a/src/mantine-core/src/Hr/Hr.styles.ts +++ b/src/mantine-core/src/Hr/Hr.styles.ts @@ -7,6 +7,9 @@ interface HrStylesProps { size: MantineNumberSize; variant: React.CSSProperties['borderTopStyle']; color: string; + inset: boolean; + insetType: string; + orientation: string; } export const sizes = { @@ -17,14 +20,37 @@ export const sizes = { xl: 5, }; +const getInsetStyles = (inset: boolean, insetType: string) => ({ + marginLeft: inset && (insetType === 'left' || insetType === 'middle') && 70, + marginRight: inset && (insetType === 'right' || insetType === 'middle') && 70, +}); + export default createUseStyles( { - hr: ({ theme, size, variant, color }: HrStylesProps) => ({ + hr: ({ theme, size, variant, color, inset, insetType }: HrStylesProps) => ({ border: 0, borderTopWidth: getSizeValue({ size, sizes }), borderTopColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), borderTopStyle: variant, margin: 0, + ...getInsetStyles(inset, insetType), + }), + hrVertical: ({ theme, size, variant, color }: HrStylesProps) => ({ + flexDirection: 'column', + height: '100%', + borderTop: 0, + borderLeftWidth: getSizeValue({ size, sizes }), + borderLeftColor: getThemeColor({ + theme, + color, + shade: theme.colorScheme === 'dark' ? 4 : 6, + }), + borderLeftStyle: variant, + }), + subHeader: ({ theme, color, inset, insetType }: HrStylesProps) => ({ + fontSize: '14px', + color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), + textAlign: inset && insetType === 'right' ? 'end' : 'initial', }), }, { link: true } diff --git a/src/mantine-core/src/Hr/Hr.tsx b/src/mantine-core/src/Hr/Hr.tsx index 35c78cc9623..343ec18aab5 100644 --- a/src/mantine-core/src/Hr/Hr.tsx +++ b/src/mantine-core/src/Hr/Hr.tsx @@ -2,30 +2,69 @@ import React from 'react'; import cx from 'clsx'; import { useMantineTheme, DefaultProps, MantineNumberSize } from '@mantine/theme'; import useStyles, { sizes } from './Hr.styles'; +import { Text } from '../Text/Text'; export const HR_SIZES = sizes; interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> { - /** Hr borderStyle */ - variant?: 'solid' | 'dashed' | 'dotted'; + /** Hr color */ + color?: string; + + /** Hr inset */ + inset?: boolean; + + /** Hr insetType. It applies inset to `left, right, middle`*/ + insetType?: 'left' | 'right' | 'middle'; + + /** Applies orientation to the Hr */ + orientation?: 'horizontal' | 'vertical'; /** Hr height */ size?: MantineNumberSize; - /** Hr color */ - color?: string; + /** Applies SubHeader Text to the Hr */ + subHeader?: string; + + /** Applies styles to the SubHeader Text */ + subHeaderStyle?: React.CSSProperties; + + /** Hr borderStyle */ + variant?: 'solid' | 'dashed' | 'dotted'; } export function Hr({ - size = 'xs', + color = 'gray', className, - variant = 'dashed', + inset = false, + insetType = 'left', + orientation = 'horizontal', + size = 'xs', + subHeader, + subHeaderStyle, themeOverride, - color = 'gray', + variant = 'solid', ...others }: HrProps) { - const classes = useStyles({ color, variant, size, theme: useMantineTheme(themeOverride) }); - return
; + const classes = useStyles({ + color, + inset, + insetType, + size, + theme: useMantineTheme(themeOverride), + variant, + orientation, + }); + + if (orientation === 'vertical') { + return
; + } + return ( +
+ + {subHeader} + +
+ ); } Hr.displayName = '@mantine/core/Hr'; From 9c077be74ce6384dc22ac0d46c44184f22079e12 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Fri, 7 May 2021 18:22:15 +0530 Subject: [PATCH 3/6] [core,docs] fix subHeader and remove inset --- docs/src/docs/core/Hr.mdx | 6 --- docs/src/docs/demos/core/Hr/hr.demos.tsx | 58 +++++++++++------------- src/mantine-core/src/Hr/Hr.story.tsx | 31 ++++++++----- src/mantine-core/src/Hr/Hr.styles.ts | 24 ++++------ src/mantine-core/src/Hr/Hr.tsx | 36 ++++++--------- 5 files changed, 69 insertions(+), 86 deletions(-) diff --git a/docs/src/docs/core/Hr.mdx b/docs/src/docs/core/Hr.mdx index 459d4511f9a..d28255f05bc 100644 --- a/docs/src/docs/core/Hr.mdx +++ b/docs/src/docs/core/Hr.mdx @@ -37,12 +37,6 @@ You can choose any color defined in them -## Inset - -You can add inset to the Hr. Inset can further be applied to different directions including `left, right, middle`. - - - ## Sizes Hr has predefined sizes: xs, sm, md, lg, xl. diff --git a/docs/src/docs/demos/core/Hr/hr.demos.tsx b/docs/src/docs/demos/core/Hr/hr.demos.tsx index 9f7d02652a6..10155dc7090 100644 --- a/docs/src/docs/demos/core/Hr/hr.demos.tsx +++ b/docs/src/docs/demos/core/Hr/hr.demos.tsx @@ -19,7 +19,7 @@ export function HrBaseDemo() { return (
-
+
); @@ -48,30 +48,6 @@ export function HrColorDemo() { ); } -const insetCode = `import React from 'react'; -import { Hr } from '@mantine/core'; -function Demo() { - return ( - <> -
-
-
-
- - ); -}`; - -export function HrInsetDemo() { - return ( - -
-
-
-
- - ); -} - const sizesCode = `import React from 'react'; import { Hr } from '@mantine/core'; @@ -107,9 +83,21 @@ function Demo() { return ( <>
-
-
-
+
+
+
); }`; @@ -118,9 +106,17 @@ export function HrSubHeaderDemo() { return (
-
-
-
+
+
+
); } diff --git a/src/mantine-core/src/Hr/Hr.story.tsx b/src/mantine-core/src/Hr/Hr.story.tsx index 449513695f6..de6ea8fbe6e 100644 --- a/src/mantine-core/src/Hr/Hr.story.tsx +++ b/src/mantine-core/src/Hr/Hr.story.tsx @@ -30,14 +30,6 @@ storiesOf('@mantine/core/Hr', module) {getColors({ themeOverride: { colorScheme: 'dark' } })}
)) - .add('Inset', () => ( -
-
-
-
-
-
- )) .add('Vertical Hr', () => (
+
+
+
@@ -53,9 +48,21 @@ storiesOf('@mantine/core/Hr', module) .add('Sub header', () => (
-
-
-
-
+
+
+
+
)); diff --git a/src/mantine-core/src/Hr/Hr.styles.ts b/src/mantine-core/src/Hr/Hr.styles.ts index 8745c7a7b08..89c3ec99441 100644 --- a/src/mantine-core/src/Hr/Hr.styles.ts +++ b/src/mantine-core/src/Hr/Hr.styles.ts @@ -7,9 +7,8 @@ interface HrStylesProps { size: MantineNumberSize; variant: React.CSSProperties['borderTopStyle']; color: string; - inset: boolean; - insetType: string; orientation: string; + subHeaderProps: Record; } export const sizes = { @@ -20,25 +19,16 @@ export const sizes = { xl: 5, }; -const getInsetStyles = (inset: boolean, insetType: string) => ({ - marginLeft: inset && (insetType === 'left' || insetType === 'middle') && 70, - marginRight: inset && (insetType === 'right' || insetType === 'middle') && 70, -}); - export default createUseStyles( { - hr: ({ theme, size, variant, color, inset, insetType }: HrStylesProps) => ({ + hr: ({ theme, size, variant, color }: HrStylesProps) => ({ border: 0, borderTopWidth: getSizeValue({ size, sizes }), borderTopColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), borderTopStyle: variant, margin: 0, - ...getInsetStyles(inset, insetType), }), hrVertical: ({ theme, size, variant, color }: HrStylesProps) => ({ - flexDirection: 'column', - height: '100%', - borderTop: 0, borderLeftWidth: getSizeValue({ size, sizes }), borderLeftColor: getThemeColor({ theme, @@ -47,10 +37,12 @@ export default createUseStyles( }), borderLeftStyle: variant, }), - subHeader: ({ theme, color, inset, insetType }: HrStylesProps) => ({ - fontSize: '14px', - color: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), - textAlign: inset && insetType === 'right' ? 'end' : 'initial', + subHeader: ({ theme, color, orientation, subHeaderProps }: HrStylesProps) => ({ + fontSize: theme.fontSizes.xs, + color: subHeaderProps?.color + ? subHeaderProps.color + : getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), + marginLeft: orientation === 'vertical' ? 5 : 0, }), }, { link: true } diff --git a/src/mantine-core/src/Hr/Hr.tsx b/src/mantine-core/src/Hr/Hr.tsx index 343ec18aab5..752c2915cb7 100644 --- a/src/mantine-core/src/Hr/Hr.tsx +++ b/src/mantine-core/src/Hr/Hr.tsx @@ -2,7 +2,7 @@ import React from 'react'; import cx from 'clsx'; import { useMantineTheme, DefaultProps, MantineNumberSize } from '@mantine/theme'; import useStyles, { sizes } from './Hr.styles'; -import { Text } from '../Text/Text'; +import { Text, TextProps } from '../Text/Text'; export const HR_SIZES = sizes; @@ -10,12 +10,6 @@ interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> { /** Hr color */ color?: string; - /** Hr inset */ - inset?: boolean; - - /** Hr insetType. It applies inset to `left, right, middle`*/ - insetType?: 'left' | 'right' | 'middle'; - /** Applies orientation to the Hr */ orientation?: 'horizontal' | 'vertical'; @@ -25,8 +19,8 @@ interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> { /** Applies SubHeader Text to the Hr */ subHeader?: string; - /** Applies styles to the SubHeader Text */ - subHeaderStyle?: React.CSSProperties; + /** SubHeader component Props */ + subHeaderProps?: TextProps; /** Hr borderStyle */ variant?: 'solid' | 'dashed' | 'dotted'; @@ -35,34 +29,34 @@ interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> { export function Hr({ color = 'gray', className, - inset = false, - insetType = 'left', orientation = 'horizontal', size = 'xs', subHeader, - subHeaderStyle, + subHeaderProps, themeOverride, variant = 'solid', ...others }: HrProps) { const classes = useStyles({ color, - inset, - insetType, size, theme: useMantineTheme(themeOverride), variant, orientation, + subHeaderProps, }); - if (orientation === 'vertical') { - return
; - } return ( -
- - {subHeader} - +
+ {subHeader && ( + + {subHeader} + + )}
); } From c970cb59def311f62b07255e20a5ed36922396cd Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Sat, 8 May 2021 14:06:24 +0530 Subject: [PATCH 4/6] [core,docs] add vertical orientation to Hr --- docs/src/docs/core/Hr.mdx | 7 ++++ docs/src/docs/demos/core/Hr/hr.demos.tsx | 49 +++++++++++++++++++++++- src/mantine-core/src/Hr/Hr.story.tsx | 31 ++++++++------- src/mantine-core/src/Hr/Hr.styles.ts | 1 + src/mantine-core/src/Hr/Hr.tsx | 2 +- 5 files changed, 75 insertions(+), 15 deletions(-) diff --git a/docs/src/docs/core/Hr.mdx b/docs/src/docs/core/Hr.mdx index d28255f05bc..c66d16f279f 100644 --- a/docs/src/docs/core/Hr.mdx +++ b/docs/src/docs/core/Hr.mdx @@ -14,6 +14,7 @@ import { HrColorDemo, HrInsetDemo, HrSubHeaderDemo, + HrOrientationDemo, } from '../demos/core/Hr/hr.demos'; # Hr @@ -37,6 +38,12 @@ You can choose any color defined in them +## Orientation + +You can set the Orientation of the Hr to vertical or horizontal + + + ## Sizes Hr has predefined sizes: xs, sm, md, lg, xl. diff --git a/docs/src/docs/demos/core/Hr/hr.demos.tsx b/docs/src/docs/demos/core/Hr/hr.demos.tsx index 10155dc7090..bbe8834af93 100644 --- a/docs/src/docs/demos/core/Hr/hr.demos.tsx +++ b/docs/src/docs/demos/core/Hr/hr.demos.tsx @@ -1,5 +1,5 @@ import React from 'react'; -import { Hr } from '@mantine/core'; +import { Hr, Badge } from '@mantine/core'; import CodeDemo from '../../../../components/CodeDemo/CodeDemo'; const code = `import React from 'react'; @@ -120,3 +120,50 @@ export function HrSubHeaderDemo() { ); } + +const orientationCode = `import React from 'react'; +import { Hr } from '@mantine/core'; + +function Demo() { + return ( + <> +
+
+ Light +
+ Outline +
+ Filled +
+ + ); +}`; + +export function HrOrientationDemo() { + return ( + +
+
+ Light +
+ Outline +
+ Filled +
+ + ); +} diff --git a/src/mantine-core/src/Hr/Hr.story.tsx b/src/mantine-core/src/Hr/Hr.story.tsx index de6ea8fbe6e..cdcb6cdd2a6 100644 --- a/src/mantine-core/src/Hr/Hr.story.tsx +++ b/src/mantine-core/src/Hr/Hr.story.tsx @@ -2,6 +2,7 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { DEFAULT_THEME } from '@mantine/theme'; import { Hr } from './Hr'; +import { Badge } from '../Badge/Badge'; const sizes = (['xs', 'sm', 'md', 'lg', 'xl', 10] as const).map((size) => (
@@ -31,19 +32,23 @@ storiesOf('@mantine/core/Hr', module)
)) .add('Vertical Hr', () => ( -
-
-
-
-
-
-
+ <> +
+ Light +
+ Outline +
+ Filled +
+ )) .add('Sub header', () => (
diff --git a/src/mantine-core/src/Hr/Hr.styles.ts b/src/mantine-core/src/Hr/Hr.styles.ts index 89c3ec99441..d1b8be01ee1 100644 --- a/src/mantine-core/src/Hr/Hr.styles.ts +++ b/src/mantine-core/src/Hr/Hr.styles.ts @@ -29,6 +29,7 @@ export default createUseStyles( margin: 0, }), hrVertical: ({ theme, size, variant, color }: HrStylesProps) => ({ + border: 0, borderLeftWidth: getSizeValue({ size, sizes }), borderLeftColor: getThemeColor({ theme, diff --git a/src/mantine-core/src/Hr/Hr.tsx b/src/mantine-core/src/Hr/Hr.tsx index 752c2915cb7..420c877c659 100644 --- a/src/mantine-core/src/Hr/Hr.tsx +++ b/src/mantine-core/src/Hr/Hr.tsx @@ -52,7 +52,7 @@ export function Hr({ className={cx(orientation === 'vertical' ? classes.hrVertical : classes.hr, className)} {...others} > - {subHeader && ( + {subHeader && orientation === 'horizontal' && ( {subHeader} From 0ef72073f599bf5f0678f61823580c0c2b355bb0 Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Sun, 9 May 2021 19:55:03 +0530 Subject: [PATCH 5/6] [core,docs] fix Hr props and docs --- docs/src/docs/demos/core/Hr/hr.demos.tsx | 35 +++++++++--------------- src/mantine-core/src/Hr/Hr.story.tsx | 31 +++++++++++++++------ src/mantine-core/src/Hr/Hr.styles.ts | 12 ++------ src/mantine-core/src/Hr/Hr.tsx | 13 ++++----- 4 files changed, 44 insertions(+), 47 deletions(-) diff --git a/docs/src/docs/demos/core/Hr/hr.demos.tsx b/docs/src/docs/demos/core/Hr/hr.demos.tsx index bbe8834af93..f8eaa817f17 100644 --- a/docs/src/docs/demos/core/Hr/hr.demos.tsx +++ b/docs/src/docs/demos/core/Hr/hr.demos.tsx @@ -82,21 +82,14 @@ import { Hr } from '@mantine/core'; function Demo() { return ( <> -
+
-
); @@ -105,24 +98,23 @@ function Demo() { export function HrSubHeaderDemo() { return ( -
+
-
); } const orientationCode = `import React from 'react'; -import { Hr } from '@mantine/core'; +import { Hr, Badge } from '@mantine/core'; function Demo() { return ( @@ -133,14 +125,13 @@ function Demo() { display: 'flex', flexDirection: 'row', justifyContent: 'space-evenly', - marginTop: 15, }} > Light
- Outline + Outline
- Filled + Filled
); @@ -160,9 +151,9 @@ export function HrOrientationDemo() { > Light
- Outline + Outline
- Filled + Filled
); diff --git a/src/mantine-core/src/Hr/Hr.story.tsx b/src/mantine-core/src/Hr/Hr.story.tsx index cdcb6cdd2a6..0e8500909c6 100644 --- a/src/mantine-core/src/Hr/Hr.story.tsx +++ b/src/mantine-core/src/Hr/Hr.story.tsx @@ -3,6 +3,7 @@ import { storiesOf } from '@storybook/react'; import { DEFAULT_THEME } from '@mantine/theme'; import { Hr } from './Hr'; import { Badge } from '../Badge/Badge'; +import { Text } from '../Text/Text'; const sizes = (['xs', 'sm', 'md', 'lg', 'xl', 10] as const).map((size) => (
@@ -44,28 +45,42 @@ storiesOf('@mantine/core/Hr', module) > Light
- Outline + Outline
- Filled + Filled + +
+ Light +
+ Outline +
+ Filled
)) .add('Sub header', () => (
-
+
-
diff --git a/src/mantine-core/src/Hr/Hr.styles.ts b/src/mantine-core/src/Hr/Hr.styles.ts index d1b8be01ee1..0c019cbfc69 100644 --- a/src/mantine-core/src/Hr/Hr.styles.ts +++ b/src/mantine-core/src/Hr/Hr.styles.ts @@ -8,7 +8,6 @@ interface HrStylesProps { variant: React.CSSProperties['borderTopStyle']; color: string; orientation: string; - subHeaderProps: Record; } export const sizes = { @@ -21,14 +20,14 @@ export const sizes = { export default createUseStyles( { - hr: ({ theme, size, variant, color }: HrStylesProps) => ({ + horizontal: ({ theme, size, variant, color }: HrStylesProps) => ({ border: 0, borderTopWidth: getSizeValue({ size, sizes }), borderTopColor: getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), borderTopStyle: variant, margin: 0, }), - hrVertical: ({ theme, size, variant, color }: HrStylesProps) => ({ + vertical: ({ theme, size, variant, color }: HrStylesProps) => ({ border: 0, borderLeftWidth: getSizeValue({ size, sizes }), borderLeftColor: getThemeColor({ @@ -38,13 +37,6 @@ export default createUseStyles( }), borderLeftStyle: variant, }), - subHeader: ({ theme, color, orientation, subHeaderProps }: HrStylesProps) => ({ - fontSize: theme.fontSizes.xs, - color: subHeaderProps?.color - ? subHeaderProps.color - : getThemeColor({ theme, color, shade: theme.colorScheme === 'dark' ? 4 : 6 }), - marginLeft: orientation === 'vertical' ? 5 : 0, - }), }, { link: true } ); diff --git a/src/mantine-core/src/Hr/Hr.tsx b/src/mantine-core/src/Hr/Hr.tsx index 420c877c659..1004b82c56e 100644 --- a/src/mantine-core/src/Hr/Hr.tsx +++ b/src/mantine-core/src/Hr/Hr.tsx @@ -10,13 +10,13 @@ interface HrProps extends DefaultProps, React.ComponentPropsWithoutRef<'hr'> { /** Hr color */ color?: string; - /** Applies orientation to the Hr */ + /** Set line orientation */ orientation?: 'horizontal' | 'vertical'; - /** Hr height */ + /** Sets height in horizontal orientation and with in vertical */ size?: MantineNumberSize; - /** Applies SubHeader Text to the Hr */ + /** Adds text after line in horizontal orientation */ subHeader?: string; /** SubHeader component Props */ @@ -38,22 +38,21 @@ export function Hr({ ...others }: HrProps) { const classes = useStyles({ + theme: useMantineTheme(themeOverride), color, size, - theme: useMantineTheme(themeOverride), variant, orientation, - subHeaderProps, }); return (
{subHeader && orientation === 'horizontal' && ( - + {subHeader} )} From 6645b20578102404ea9dd799a3c2b39d05b7c8fc Mon Sep 17 00:00:00 2001 From: Khushal Agarwal Date: Sun, 9 May 2021 20:02:55 +0530 Subject: [PATCH 6/6] [docs] remove redundant HrInsetDemo import --- docs/src/docs/core/Hr.mdx | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/src/docs/core/Hr.mdx b/docs/src/docs/core/Hr.mdx index c66d16f279f..649c26dc6a5 100644 --- a/docs/src/docs/core/Hr.mdx +++ b/docs/src/docs/core/Hr.mdx @@ -12,7 +12,6 @@ import { HrBaseDemo, HrSizesDemo, HrColorDemo, - HrInsetDemo, HrSubHeaderDemo, HrOrientationDemo, } from '../demos/core/Hr/hr.demos';