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, }),