diff --git a/apps/website/src/content/docs/divider.mdx b/apps/website/src/content/docs/divider.mdx new file mode 100644 index 00000000000..df990f6a481 --- /dev/null +++ b/apps/website/src/content/docs/divider.mdx @@ -0,0 +1,24 @@ +--- +title: Divider +description: A divider can be used to separate a layout into different sections of content or element. +group: utilities +thumbnail: #TODO +--- + +

{frontmatter.description}

+ + + + + +## Vertical + +The `Divider` component is displayed horizontally by default. To display it vertically, use the `orientation` prop. + + + + + +## Props + + diff --git a/examples/Divider.main.css b/examples/Divider.main.css new file mode 100644 index 00000000000..4faf687581d --- /dev/null +++ b/examples/Divider.main.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: column; + align-items: center; + gap: 0.5rem; +} diff --git a/examples/Divider.main.jsx b/examples/Divider.main.jsx new file mode 100644 index 00000000000..40a5cb94142 --- /dev/null +++ b/examples/Divider.main.jsx @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Divider, Text } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ Section 1 + + Section 2 +
+ ); +}; diff --git a/examples/Divider.vertical.css b/examples/Divider.vertical.css new file mode 100644 index 00000000000..8b978551f7d --- /dev/null +++ b/examples/Divider.vertical.css @@ -0,0 +1,6 @@ +.demo-container { + display: flex; + flex-direction: row; + gap: 1rem; + align-items: center; +} diff --git a/examples/Divider.vertical.jsx b/examples/Divider.vertical.jsx new file mode 100644 index 00000000000..84eff3afc22 --- /dev/null +++ b/examples/Divider.vertical.jsx @@ -0,0 +1,16 @@ +/*--------------------------------------------------------------------------------------------- + * Copyright (c) Bentley Systems, Incorporated. All rights reserved. + * See LICENSE.md in the project root for license terms and full copyright notice. + *--------------------------------------------------------------------------------------------*/ +import * as React from 'react'; +import { Divider, Text } from '@itwin/itwinui-react'; + +export default () => { + return ( +
+ Section 1 + + Section 2 +
+ ); +}; diff --git a/examples/index.tsx b/examples/index.tsx index 43269b0bf5d..53c4f28ead1 100644 --- a/examples/index.tsx +++ b/examples/index.tsx @@ -441,6 +441,16 @@ export { DialogPlacementExample }; // ---------------------------------------------------------------------------- +import { default as DividerMainExampleRaw } from './Divider.main'; +const DividerMainExample = withThemeProvider(DividerMainExampleRaw); +export { DividerMainExample }; + +import { default as DividerVerticalExampleRaw } from './Divider.vertical'; +const DividerVerticalExample = withThemeProvider(DividerVerticalExampleRaw); +export { DividerVerticalExample }; + +// ---------------------------------------------------------------------------- + import { default as DropdownButtonMainExampleRaw } from './DropdownButton.main'; const DropdownButtonMainExample = withThemeProvider( DropdownButtonMainExampleRaw,