fix(divider): add ability to style divider component with theme api

packages/layout/src/divider.tsx

@@ -1,4 +1,11 @@
-import { chakra, forwardRef, HTMLChakraProps } from "@chakra-ui/system"
+import {
+  chakra,
+  forwardRef,
+  omitThemingProps,
+  ThemingProps,
+  useStyleConfig,
+  HTMLChakraProps,
+} from "@chakra-ui/system"
 import { cx, __DEV__ } from "@chakra-ui/utils"
 import * as React from "react"
 
@@ -12,15 +19,27 @@ export const Divider = forwardRef<DividerProps, "hr">(function Divider(
   props,
   ref,
 ) {
-  const { className, orientation = "horizontal", ...rest } = props
+  const {
+    borderLeftWidth,
+    borderBottomWidth,
+    borderTopWidth,
+    borderRightWidth,
+    borderWidth,
+    borderStyle,
+    borderColor,
+    ...styles
+  } = useStyleConfig("Divider", props)
+  const { className, orientation = "horizontal", ...rest } = omitThemingProps(props)
 
-  const styles = {
+  const dividerStyles = {
     vertical: {
-      borderLeftWidth: "1px",
+      borderLeftWidth:
+        borderLeftWidth || borderRightWidth || borderWidth || "1px",
       height: "100%",
     },
     horizontal: {
-      borderBottomWidth: "1px",
+      borderBottomWidth:
+        borderBottomWidth || borderTopWidth || borderWidth || "1px",
       width: "100%",
     },
   }
@@ -32,18 +51,18 @@ export const Divider = forwardRef<DividerProps, "hr">(function Divider(
       aria-orientation={orientation}
       {...rest}
       __css={{
+        ...styles,
         border: "0",
-        opacity: 0.6,
-        borderColor: "inherit",
-        borderStyle: "solid",
-        ...styles[orientation],
+        borderColor,
+        borderStyle,
+        ...dividerStyles[orientation],
       }}
-      className={cx("chakra-divider", props.className)}
+      className={cx("chakra-divider", className)}
     />
   )
 })
 
-export interface DividerProps extends HTMLChakraProps<"div"> {
+export interface DividerProps extends HTMLChakraProps<"div">, ThemingProps {
   orientation?: "horizontal" | "vertical"
 }
 

packages/layout/stories/divider.stories.tsx

@@ -22,3 +22,7 @@ export const Basic = () => <Divider />
 export const Vertical = () => <Divider orientation="vertical" />
 
 export const Horizontal = () => <Divider orientation="horizontal" />
+
+export const WidthTheme = () => (
+  <Divider orientation="horizontal" variant="dashed" />
+)

packages/layout/tests/__snapshots__/layout.test.tsx.snap

@@ -69,6 +69,44 @@ exports[`<Box /> renders box correctly 1`] = `
 </DocumentFragment>
 `;
 
+exports[`<Divider /> overrides the theming props 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  opacity: 0.6;
+  border: 0;
+  border-color: inherit;
+  border-style: dashed;
+  border-bottom-width: 1px;
+  width: 100%;
+}
+
+<hr
+    aria-orientation="horizontal"
+    class="chakra-divider emotion-0"
+    role="separator"
+  />
+</DocumentFragment>
+`;
+
+exports[`<Divider /> renders with default theming 1`] = `
+<DocumentFragment>
+  .emotion-0 {
+  opacity: 0.6;
+  border: 0;
+  border-color: inherit;
+  border-style: solid;
+  border-bottom-width: 1px;
+  width: 100%;
+}
+
+<hr
+    aria-orientation="horizontal"
+    class="chakra-divider emotion-0"
+    role="separator"
+  />
+</DocumentFragment>
+`;
+
 exports[`<Flex /> renders all the allowed shorthand style props 1`] = `
 <DocumentFragment>
   .emotion-0 {

packages/layout/tests/layout.test.tsx

@@ -1,6 +1,6 @@
 import { render, testA11y } from "@chakra-ui/test-utils"
 import * as React from "react"
-import { Box, Badge, Flex } from "../src"
+import { Box, Badge, Divider, Flex } from "../src"
 
 describe("<Box />", () => {
   test("renders box correctly", () => {
@@ -59,3 +59,15 @@ describe("<Flex />", () => {
     expect(asFragment()).toMatchSnapshot()
   })
 })
+
+describe("<Divider />", () => {
+  test("renders with default theming", () => {
+    const { asFragment } = render(<Divider />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+
+  test("overrides the theming props", () => {
+    const { asFragment } = render(<Divider variant="dashed" />)
+    expect(asFragment()).toMatchSnapshot()
+  })
+})

packages/theme/src/components/divider.ts

@@ -0,0 +1,27 @@
+const baseStyle = {
+  opacity: 0.6,
+  borderColor: "inherit",
+}
+
+const variantSolid = {
+  borderStyle: "solid",
+}
+
+const variantDashed = {
+  borderStyle: "dashed",
+}
+
+const variants = {
+  solid: variantSolid,
+  dashed: variantDashed,
+}
+
+const defaultProps = {
+  variant: "solid",
+}
+
+export default {
+  baseStyle,
+  variants,
+  defaultProps,
+}

packages/theme/src/components/index.ts

@@ -7,6 +7,7 @@ import Button from "./button"
 import Checkbox from "./checkbox"
 import CloseButton from "./close-button"
 import Code from "./code"
+import Divider from "./divider"
 import Drawer from "./drawer"
 import Editable from "./editable"
 import Form from "./form"
@@ -45,6 +46,7 @@ export default {
   Checkbox,
   CloseButton,
   Code,
+  Divider,
   Drawer,
   Editable,
   Form,