Divider fixes and docs (#727)

Co-authored-by: Chenwei Zhang <40295569+zchenwei@users.noreply.github.com>

.changeset/purple-chefs-jump.md

@@ -0,0 +1,8 @@
+---
+"@aws-amplify/ui-react": patch
+"@aws-amplify/ui": patch
+---
+
+* Divider component has more theming options for the border style, color, and width.
+* Fixing vertical divider
+* Improving Divider docs

docs/src/components/useGridContainerProps.tsx

@@ -1,6 +1,6 @@
+import * as React from 'react';
+
 import { DividerOptions, GridContainerStyleProps } from '@aws-amplify/ui-react';
-import { useState } from 'react';
-import { DividerPropControlsProps } from './DividerPropControls';
 import { GridContainerPropControlsProps } from './GridContainerPropControls';
 
 interface UseGridContainerProps {

docs/src/pages/components/divider/DividerPropControls.tsx

@@ -0,0 +1,51 @@
+import * as React from 'react';
+import { DividerOptions, Flex, SelectField } from '@aws-amplify/ui-react';
+
+export interface DividerPropControlsProps extends DividerOptions {
+  setSize: (value: React.SetStateAction<DividerOptions['size']>) => void;
+  setOrientation: (
+    value: React.SetStateAction<DividerOptions['orientation']>
+  ) => void;
+}
+
+interface DividerPropControlsInterface {
+  (props: DividerPropControlsProps): JSX.Element;
+}
+
+export const DividerPropControls: DividerPropControlsInterface = ({
+  size,
+  setSize,
+  orientation,
+  setOrientation,
+}) => {
+  return (
+    <Flex direction="column">
+      <SelectField
+        name="size"
+        id="size"
+        label="Size"
+        value={size}
+        onChange={(event) =>
+          setSize(event.target.value as DividerOptions['size'])
+        }
+      >
+        <option value="">default</option>
+        <option value="small">small</option>
+        <option value="large">large</option>
+      </SelectField>
+
+      <SelectField
+        name="orientation"
+        id="orientation"
+        label="Orientation"
+        value={orientation}
+        onChange={(event) =>
+          setOrientation(event.target.value as DividerOptions['orientation'])
+        }
+      >
+        <option value="horizontal">horizontal</option>
+        <option value="vertical">vertical</option>
+      </SelectField>
+    </Flex>
+  );
+};

docs/src/pages/components/divider/demo.tsx

@@ -1,8 +1,21 @@
-import React from 'react';
+import * as React from 'react';
 import { Divider, Flex, Text } from '@aws-amplify/ui-react';
-import { DividerPropControls } from '@/components/DividerPropControls';
-import { useDividerProps } from '@/components/useDividerProps';
-import { Example } from '@/components/Example';
+import { DividerPropControls } from './DividerPropControls';
+import { useDividerProps } from './useDividerProps';
+import { Demo } from '@/components/Demo';
+
+const propsToCode = (props) => {
+  return (
+    `<Flex direction=${JSON.stringify(props.direction)}>
+  <Text>Before</Text>
+  <Divider` +
+    (props.size ? `\n    size=${JSON.stringify(props.size)}` : '') +
+    `
+    orientation=${JSON.stringify(props.orientation)} />
+  <Text>After</Text>
+</Flex>`
+  );
+};
 
 export const DividerDemo = () => {
   const dividerProps = useDividerProps({
@@ -12,18 +25,18 @@ export const DividerDemo = () => {
     dividerProps.orientation === 'horizontal' ? 'column' : 'row';
 
   return (
-    <div>
-      <DividerPropControls {...dividerProps} />
-      <Flex direction={direction} className="pt-2">
-        <Example>
-          <Text>Before</Text>
-          <Divider
-            size={dividerProps.size}
-            orientation={dividerProps.orientation}
-          />
-          <Text>After</Text>
-        </Example>
+    <Demo
+      propControls={<DividerPropControls {...dividerProps} />}
+      code={propsToCode({ direction, ...dividerProps })}
+    >
+      <Flex direction={direction}>
+        <Text>Before</Text>
+        <Divider
+          size={dividerProps.size}
+          orientation={dividerProps.orientation}
+        />
+        <Text>After</Text>
       </Flex>
-    </div>
+    </Demo>
   );
 };

docs/src/pages/components/divider/examples/DefaultDividerExample.tsx

@@ -0,0 +1,9 @@
+import { Flex, Text, Divider } from '@aws-amplify/ui-react';
+
+export const DefaultDividerExample = () => (
+  <Flex direction="column">
+    <Text>Before</Text>
+    <Divider />
+    <Text>After</Text>
+  </Flex>
+);

docs/src/pages/components/divider/examples/DividerClassNameExample.tsx

@@ -0,0 +1,12 @@
+import { Flex, Divider } from '@aws-amplify/ui-react';
+
+const css = `.custom-divider {
+  border-style: dashed;
+}`;
+
+export const DividerClassNameExample = () => (
+  <Flex direction="column">
+    <style>{css}</style>
+    <Divider className="custom-divider" />
+  </Flex>
+);

docs/src/pages/components/divider/examples/DividerSizesExample.tsx

@@ -0,0 +1,9 @@
+import { Flex, Divider } from '@aws-amplify/ui-react';
+
+export const DividerSizesExample = () => (
+  <Flex direction="column">
+    <Divider size="small" />
+    <Divider />
+    <Divider size="large" />
+  </Flex>
+);

docs/src/pages/components/divider/examples/DividerStylePropsExample.tsx

@@ -0,0 +1,13 @@
+import { Flex, Divider, useTheme } from '@aws-amplify/ui-react';
+
+export const DividerStylePropsExample = () => {
+  const { tokens } = useTheme();
+  return (
+    <Flex direction="column">
+      <Divider
+        border={`${tokens.borderWidths.large} solid ${tokens.colors.brand.primary[80]}`}
+      />
+      <Divider border="5px solid pink" borderRadius="10px" />
+    </Flex>
+  );
+};

docs/src/pages/components/divider/examples/DividerThemeExample.tsx

@@ -0,0 +1,29 @@
+import { Flex, Text, Divider, AmplifyProvider } from '@aws-amplify/ui-react';
+
+const theme = {
+  name: 'divider-theme',
+  tokens: {
+    borderWidths: {
+      // This will affect the large divider and other components that reference this
+      large: { value: '20px' },
+    },
+    components: {
+      divider: {
+        borderStyle: { value: 'dotted' },
+        // You can reference other theme tokens:
+        borderColor: { value: '{colors.brand.secondary.80.value}' },
+      },
+    },
+  },
+};
+
+export const DividerThemeExample = () => (
+  <AmplifyProvider theme={theme}>
+    <Flex direction="column">
+      <Text>Before</Text>
+      <Divider />
+      <Text>After</Text>
+      <Divider size="large" />
+    </Flex>
+  </AmplifyProvider>
+);

docs/src/pages/components/divider/examples/HorizontalDividerExample.tsx

@@ -0,0 +1,9 @@
+import { Flex, Text, Divider } from '@aws-amplify/ui-react';
+
+export const HorizontalDividerExample = () => (
+  <Flex direction="column">
+    <Text>Before</Text>
+    <Divider orientation="horizontal" />
+    <Text>After</Text>
+  </Flex>
+);

docs/src/pages/components/divider/examples/VerticalDividerExample.tsx

@@ -0,0 +1,9 @@
+import { Flex, Text, Divider } from '@aws-amplify/ui-react';
+
+export const VerticalDividerExample = () => (
+  <Flex direction="row" justifyContent="space-around">
+    <Text>Before</Text>
+    <Divider orientation="vertical" />
+    <Text>After</Text>
+  </Flex>
+);

docs/src/pages/components/divider/examples/index.tsx

@@ -0,0 +1,7 @@
+export { HorizontalDividerExample } from './HorizontalDividerExample';
+export { VerticalDividerExample } from './VerticalDividerExample';
+export { DividerSizesExample } from './DividerSizesExample';
+export { DividerStylePropsExample } from './DividerStylePropsExample';
+export { DividerClassNameExample } from './DividerClassNameExample';
+export { DefaultDividerExample } from './DefaultDividerExample';
+export { DividerThemeExample } from './DividerThemeExample';

docs/src/pages/components/divider/index.page.mdx

@@ -1,5 +1,6 @@
 ---
 title: Divider
+description: A Divider creates separations in content. Dividers can help organize content and establish visual rhythm.
 ---
 
 import { Fragment } from '@/components/Fragment';