diff --git a/CHANGELOG.md b/CHANGELOG.md
index 4c010f2f0b..a2b969dba6 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
### Features
- Make `content` to be a shorthand prop for `Popup` @kuzhelov ([#322](https://github.com/stardust-ui/react/pull/322))
- Add generic `Slot` component (used internally) and use it as shorthand for `Button` `content` prop @Bugaa92 ([#335](https://github.com/stardust-ui/react/pull/335))
+- Add `fitted` prop to `Divider` @gopalgoel19 ([#333](https://github.com/stardust-ui/react/pull/333))
## [v0.9.0](https://github.com/stardust-ui/react/tree/v0.9.0) (2018-10-07)
diff --git a/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx b/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx
new file mode 100644
index 0000000000..da6001b9c0
--- /dev/null
+++ b/docs/src/examples/components/Divider/Variations/DividerExampleFitted.shorthand.tsx
@@ -0,0 +1,12 @@
+import React from 'react'
+import { Divider } from '@stardust-ui/react'
+
+const DividerExampleFittedShorthand = () => (
+ <>
+ There is no space between this text and the divider.
+
+ There is no space between this text and the divider.
+ >
+)
+
+export default DividerExampleFittedShorthand
diff --git a/docs/src/examples/components/Divider/Variations/index.tsx b/docs/src/examples/components/Divider/Variations/index.tsx
index c3c318c217..b5eb43aba6 100644
--- a/docs/src/examples/components/Divider/Variations/index.tsx
+++ b/docs/src/examples/components/Divider/Variations/index.tsx
@@ -14,6 +14,11 @@ const Variations = () => (
description="A divider can appear more important and draw the user's attention."
examplePath="components/Divider/Variations/DividerExampleImportant"
/>
+
)
diff --git a/src/components/Divider/Divider.tsx b/src/components/Divider/Divider.tsx
index 6a7604a2d3..b90eb57d4f 100644
--- a/src/components/Divider/Divider.tsx
+++ b/src/components/Divider/Divider.tsx
@@ -10,6 +10,7 @@ export interface IDividerProps {
children?: ReactChildren
className?: string
content?: React.ReactNode
+ fitted?: boolean
size?: number
type?: 'primary' | 'secondary'
important?: boolean
@@ -43,6 +44,9 @@ class Divider extends UIComponent, any> {
/** Shorthand for primary content. */
content: customPropTypes.contentShorthand,
+ /** A divider can be fitted, without any space above or below it. */
+ fitted: PropTypes.bool,
+
/** Size multiplier (default 0) * */
size: PropTypes.number,
diff --git a/src/themes/teams/components/Divider/dividerStyles.ts b/src/themes/teams/components/Divider/dividerStyles.ts
index bafee87219..f6b8d29b31 100644
--- a/src/themes/teams/components/Divider/dividerStyles.ts
+++ b/src/themes/teams/components/Divider/dividerStyles.ts
@@ -22,13 +22,15 @@ const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({
const dividerStyles: IComponentPartStylesInput = {
root: ({ props, variables }): ICSSInJSStyle => {
- const { children, size, type, important, content } = props
+ const { children, fitted, size, type, important, content } = props
return {
color: variables.textColor,
display: 'flex',
alignItems: 'center',
- paddingTop: variables.dividerPadding,
- paddingBottom: variables.dividerPadding,
+ ...(!fitted && {
+ paddingTop: variables.dividerPadding,
+ paddingBottom: variables.dividerPadding,
+ }),
...(type === 'primary' && {
color: variables.primaryColor,
}),