feat(divider): add fitted prop

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 ]------------------------------- -->
 ## [v0.9.0](https://github.com/stardust-ui/react/tree/v0.9.0) (2018-10-07)

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.
+    <Divider fitted />
+    There is no space between this text and the divider.
+  </>
+)
+
+export default DividerExampleFittedShorthand

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"
     />
+    <ComponentExample
+      title="Fitted"
+      description="A divider can be fitted, without any space above or below it."
+      examplePath="components/Divider/Variations/DividerExampleFitted"
+    />
   </ExampleSection>
 )
 

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<Extendable<IDividerProps>, 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,
 

src/themes/teams/components/Divider/dividerStyles.ts

@@ -22,13 +22,15 @@ const beforeAndAfter = (size, type, variables): ICSSPseudoElementStyle => ({
 
 const dividerStyles: IComponentPartStylesInput<IDividerPropsWithDefaults, any> = {
   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,
       }),