[Core, Docs] add additional props to Hr component

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 = {

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,
+  HrSubHeaderDemo,
+  HrOrientationDemo,
+} from '../demos/core/Hr/hr.demos';
 
 # Hr
 
@@ -31,6 +37,12 @@ You can choose any color defined in <GatsbyLink to="/pages/theming/#colors">them
 
 <HrColorDemo />
 
+## Orientation
+
+You can set the Orientation of the Hr to vertical or horizontal
+
+<HrOrientationDemo />
+
 ## 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.
+
+<HrSubHeaderDemo />
+
 ## Component props
 
 <PropsTable component="Hr" />

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';
@@ -19,7 +19,7 @@ export function HrBaseDemo() {
   return (
     <CodeDemo code={code} language="tsx">
       <Hr />
-      <Hr variant="solid" style={{ marginTop: 10 }} />
+      <Hr variant="dashed" style={{ marginTop: 10 }} />
       <Hr variant="dotted" style={{ marginTop: 10 }} />
     </CodeDemo>
   );
@@ -76,3 +76,85 @@ export function HrSizesDemo() {
     </CodeDemo>
   );
 }
+
+const subHeaderCode = `import React from 'react';
+import { Hr } from '@mantine/core';
+function Demo() {
+  return (
+    <>
+      <Hr subHeader="Subheader" />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'center' }, color: 'red' }}
+      />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'right' } }}
+      />
+    </>
+  );
+}`;
+
+export function HrSubHeaderDemo() {
+  return (
+    <CodeDemo code={subHeaderCode} language="tsx">
+      <Hr subHeader="Subheader" />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'center' }, color: 'red' }}
+        style={{ marginTop: 10 }}
+      />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'right' } }}
+        style={{ marginTop: 10 }}
+      />
+    </CodeDemo>
+  );
+}
+
+const orientationCode = `import React from 'react';
+import { Hr, Badge } from '@mantine/core';
+
+function Demo() {
+  return (
+    <>
+      <Hr orientation="horizontal" />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+        }}
+      >
+        <Badge>Light</Badge>
+        <Hr orientation="vertical" />
+        <Badge>Outline</Badge>
+        <Hr orientation="vertical" />
+        <Badge>Filled</Badge>
+      </div>
+    </>
+  );
+}`;
+
+export function HrOrientationDemo() {
+  return (
+    <CodeDemo code={orientationCode} language="tsx">
+      <Hr orientation="horizontal" />
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+          marginTop: 15,
+        }}
+      >
+        <Badge>Light</Badge>
+        <Hr orientation="vertical" />
+        <Badge>Outline</Badge>
+        <Hr orientation="vertical" />
+        <Badge>Filled</Badge>
+      </div>
+    </CodeDemo>
+  );
+}

src/mantine-core/src/Hr/Hr.story.tsx

@@ -2,6 +2,8 @@ import React from 'react';
 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) => (
   <Hr style={{ marginTop: 15 }} size={size} key={size} />
@@ -17,7 +19,7 @@ storiesOf('@mantine/core/Hr', module)
     <div style={{ padding: 20 }}>
       <Hr />
       <Hr variant="dotted" style={{ marginTop: 15 }} />
-      <Hr variant="solid" style={{ marginTop: 15 }} />
+      <Hr variant="dashed" style={{ marginTop: 15 }} />
     </div>
   ))
   .add('Sizes', () => <div style={{ padding: 20 }}>{sizes}</div>)
@@ -29,4 +31,58 @@ storiesOf('@mantine/core/Hr', module)
       <Hr themeOverride={{ colorScheme: 'dark' }} variant="solid" style={{ marginTop: 15 }} />
       {getColors({ themeOverride: { colorScheme: 'dark' } })}
     </div>
+  ))
+  .add('Vertical Hr', () => (
+    <>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+          width: '20%',
+          marginTop: 15,
+        }}
+      >
+        <Badge>Light</Badge>
+        <Hr orientation="vertical" color="blue" />
+        <Badge>Outline</Badge>
+        <Hr orientation="vertical" color="blue" />
+        <Badge>Filled</Badge>
+      </div>
+      <div
+        style={{
+          display: 'flex',
+          flexDirection: 'row',
+          justifyContent: 'space-evenly',
+          width: '20%',
+          marginTop: 15,
+        }}
+      >
+        <Text>Light</Text>
+        <Hr orientation="vertical" color="blue" />
+        <Text>Outline</Text>
+        <Hr orientation="vertical" color="blue" />
+        <Text>Filled</Text>
+      </div>
+    </>
+  ))
+  .add('Sub header', () => (
+    <div style={{ padding: 20 }}>
+      <Hr subHeader="Subheader" />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'center' } }}
+        style={{ marginTop: 15 }}
+      />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { textAlign: 'right' } }}
+        style={{ marginTop: 15 }}
+      />
+      <Hr
+        subHeader="Subheader"
+        subHeaderProps={{ style: { fontSize: 20 }, color: 'blue' }}
+        style={{ marginTop: 15 }}
+      />
+    </div>
   ));

src/mantine-core/src/Hr/Hr.styles.ts

@@ -7,6 +7,7 @@ interface HrStylesProps {
   size: MantineNumberSize;
   variant: React.CSSProperties['borderTopStyle'];
   color: string;
+  orientation: string;
 }
 
 export const sizes = {
@@ -19,13 +20,23 @@ 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,
     }),
+    vertical: ({ theme, size, variant, color }: HrStylesProps) => ({
+      border: 0,
+      borderLeftWidth: getSizeValue({ size, sizes }),
+      borderLeftColor: getThemeColor({
+        theme,
+        color,
+        shade: theme.colorScheme === 'dark' ? 4 : 6,
+      }),
+      borderLeftStyle: variant,
+    }),
   },
   { link: true }
 );

src/mantine-core/src/Hr/Hr.tsx

@@ -2,30 +2,62 @@ import React from 'react';
 import cx from 'clsx';
 import { useMantineTheme, DefaultProps, MantineNumberSize } from '@mantine/theme';
 import useStyles, { sizes } from './Hr.styles';
+import { Text, TextProps } 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 height */
+  /** Set line orientation */
+  orientation?: 'horizontal' | 'vertical';
+
+  /** Sets height in horizontal orientation and with in vertical */
   size?: MantineNumberSize;
 
-  /** Hr color */
-  color?: string;
+  /** Adds text after line in horizontal orientation */
+  subHeader?: string;
+
+  /** SubHeader component Props */
+  subHeaderProps?: TextProps;
+
+  /** Hr borderStyle */
+  variant?: 'solid' | 'dashed' | 'dotted';
 }
 
 export function Hr({
-  size = 'xs',
+  color = 'gray',
   className,
-  variant = 'dashed',
+  orientation = 'horizontal',
+  size = 'xs',
+  subHeader,
+  subHeaderProps,
   themeOverride,
-  color = 'gray',
+  variant = 'solid',
   ...others
 }: HrProps) {
-  const classes = useStyles({ color, variant, size, theme: useMantineTheme(themeOverride) });
-  return <hr data-mantine-hr className={cx(classes.hr, className)} {...others} />;
+  const classes = useStyles({
+    theme: useMantineTheme(themeOverride),
+    color,
+    size,
+    variant,
+    orientation,
+  });
+
+  return (
+    <div
+      data-mantine-hr
+      className={cx(orientation === 'vertical' ? classes.vertical : classes.horizontal, className)}
+      {...others}
+    >
+      {subHeader && orientation === 'horizontal' && (
+        <Text color={color} {...subHeaderProps} className={cx(subHeaderProps?.className)}>
+          {subHeader}
+        </Text>
+      )}
+    </div>
+  );
 }
 
 Hr.displayName = '@mantine/core/Hr';