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

[Zyclotrop-j]

Pull request checklist

Please check if your PR fulfills the following requirements:

• Tests for the changes have been added (for bug fixes / features)
• Docs have been reviewed and added / updated if needed (for bug fixes
  /start features)

Pull request type

Please check the type of change your PR introduces:

• Bugfix
• Feature
• Code style update (formatting, renaming)
• Refactoring (no functional changes, no api changes)
• Build related changes
• Documentation content changes
• Other (please describe):

What is the current behavior?

Fixes: 2405

Divider component cannot be styled using the theme API.

What is the new behavior?

• The divider component can be styled by the theme API
• There are two divider variants, "solid" (default) and "dashed" (new) [Question: Keep dashed variant or delete together with stoy and test for variants?]
• Move hardcoded opacity and borderColor to theme
• Add tests for Divider (incl. this fix)
• Add story to demo this bug-fix and its functionality

Example:

The following is now possible (compare with comment on issue 2405 ;) ):

const myCustomVarient = {
  borderColor: 'blue.500',
  opacity: 1,
}
.... add "myCustomVarient" to theme overwrites using the key "Divider".....
<Divider orientation="horizontal" varient="myCustomVarient " />

Does this introduce a breaking change?

• Yes
• No

Other information

This PR fixes only the Divider-theme-API styling bug, not the container-theme-API styling bug (both are grouped in 2405)!

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployment, click below or on the icon next to each commit.

🔍 Inspect: https://vercel.com/chakra-ui/chakra-ui/5c2gkoc7y
✅ Preview: https://chakra-ui-git-fix-divider-theming.chakra-ui.now.sh

[Zyclotrop-j]

@with-heart , @ryanerras this addresses #2405

Someone familiar with the build might need to have a look at the build thought as yarn docs deploy exits with ERR! lerna Unknown argument: @chakra-ui/babel-plugin. (This PR doesn't touch the docs and - more generally - doesn't touch the build either, so I'm not sure what's going on there.)

[changeset-bot]

🦋 Changeset detected

Latest commit: 55524df

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 11 packages

Name	Type
@chakra-ui/layout	Minor
@chakra-ui/theme	Minor
@chakra-ui/react	Patch
@chakra-ui/toast	Patch
@chakra-ui/test-utils	Patch
chakra-cra	Patch
chakra-nextjs	Patch
chakra-nextjs-ts	Patch
@chakra-ui/props-docs	Patch
@chakra-ui/docs	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[TimKolberger]

Thank you @Zyclotrop-j for this PR 💖
I added a comment regarding the versioning. The code looks good to me!

[TimKolberger]

Please use a minor bump for both packages, because this PR adds a feature. Adding something increments in semver terms the minor version.

"@chakra-ui/layout": minor
"@chakra-ui/theme": minor

[Zyclotrop-j]

Changed to "minor"

[TimKolberger]

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

[Zyclotrop-j]

Changed to "feat"

[Zyclotrop-j]

@TimKolberger , I added/cahnged the requested changes - please -re-review and let me know if there's anything else you'd like/prefer to be changed. And thanks for reviewing!

[TimKolberger]

@allcontributors please add @Zyclotrop-j for code

[allcontributors]

@TimKolberger

I've put up a pull request to add @Zyclotrop-j! 🎉