refactor(Divider): remove type prop (#558)

* breaking(Divider): remove `type` prop

* add entry to changelog

* restore styling changes

* restore styling changes

* update changelog

* restore styling changes

* omit divider

* move to separate variant

Author: layershifter

CHANGELOG.md

@@ -17,6 +17,9 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 
 ## [Unreleased]
 
+### BREAKING CHANGES
+- `type` prop is replaced with `color` in `Divider` component @layershifter ([#558](https://github.com/stardust-ui/react/pull/558))
+
 ### Fixes
 - Fix `Provider` is not executing staticStyles with the merged siteVariables @mnajdova ([#559](https://github.com/stardust-ui/react/pull/559))
 

docs/src/examples/components/Chat/Types/ChatExample.shorthand.tsx

@@ -47,7 +47,7 @@ const items = [
     key: 'message-id-4',
   },
   {
-    content: <Divider content="Today" type="primary" important />,
+    content: <Divider content="Today" color="primary" important />,
     key: 'message-id-5',
   },
   {

docs/src/examples/components/Chat/Types/ChatExample.tsx

@@ -36,7 +36,7 @@ const ChatExample = () => (
       />
     </Chat.Item>
     <Chat.Item>
-      <Divider content="Today" type="primary" important />
+      <Divider content="Today" color="primary" important />
     </Chat.Item>
     <Chat.Item>
       <Chat.Message

docs/src/examples/components/Divider/Types/DividerExamplePrimary.shorthand.tsx

@@ -14,16 +14,6 @@ const Types = () => (
       description="A Divider can contain text or other content displayed alongside with the line."
       examplePath="components/Divider/Types/DividerExampleContent"
     />
-    <ComponentExample
-      title="Primary divider"
-      description="A primary Divider catches the user's attention."
-      examplePath="components/Divider/Types/DividerExamplePrimary"
-    />
-    <ComponentExample
-      title="Secondary divider"
-      description="A secondary Divider is more subtle and less noticeable."
-      examplePath="components/Divider/Types/DividerExampleSecondary"
-    />
   </ExampleSection>
 )
 

docs/src/examples/components/Divider/Types/DividerExamplePrimary.tsx

@@ -122,8 +122,8 @@ function createMessageContentWithAttachments(content: string, messageId: string)
 }
 
 function generateDividerProps(props: DividerProps): Divider {
-  const { content, important, type = 'secondary' } = props
-  const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, type }
+  const { content, important, color = 'secondary' } = props
+  const dividerProps: Divider = { itemType: ChatItemTypes.divider, content, important, color }
 
   return dividerProps
 }
@@ -158,7 +158,7 @@ export function generateChatProps(chat: ChatData): ChatItemContentProps[] {
     chatProps.splice(
       myLastMsgIndex + 1,
       0,
-      generateDividerProps({ content: 'Last read', type: 'primary', important: true }),
+      generateDividerProps({ content: 'Last read', color: 'primary', important: true }),
     )
   }
 

docs/src/examples/components/Divider/Types/DividerExampleSecondary.shorthand.tsx

@@ -39,10 +39,7 @@ export default () => (
     <ExampleSnippet
       render={() => (
         <Provider theme={{ siteVariables: { brand: 'hotpink' } }}>
-          <div>
-            <Button primary>Branding</Button>
-            <Divider type="primary">Branding</Divider>
-          </div>
+          <Button primary>Branding</Button>
         </Provider>
       )}
     />

docs/src/examples/components/Divider/Types/DividerExampleSecondary.tsx

@@ -44,7 +44,7 @@ export default () => (
     <ExampleSnippet
       value={`
         import React from 'react'
-        import { Button, Divider, Icon, Label, Provider } from '@stardust-ui/react'
+        import { Button, Icon, Label, Provider } from '@stardust-ui/react'
 
         export default () =>
          <Provider>
@@ -54,9 +54,6 @@ export default () => (
             <Button icon="at" content="Send email" secondary />
             <Icon name="chess rook" size="big" />
             <Label content="Label with icon" icon="close" />
-            <br/><br/>
-            <Divider content="Primary Divider" type="primary" />
-            <Divider content="Secondary Divider" type="secondary" />
           </>
          </Provider>
       `}
@@ -67,10 +64,6 @@ export default () => (
           <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
-          <br />
-          <br />
-          <Divider content="Primary Divider" type="primary" />
-          <Divider content="Secondary Divider" type="secondary" />
         </>
       )}
     />
@@ -90,20 +83,21 @@ export default () => (
         import { Button } from '@stardust-ui/react'
 
         const styles = {
-                color: "coral",
-                backgroundColor: "coral",
-                fontSize: "14px",
-                padding: "0 10px",
-              }
+          color: "coral",
+          backgroundColor: "coral",
+          fontSize: "14px",
+          padding: "0 10px",
+        }
         const btnExample = () =>
-            <Button
-              content="Send email"
-              icon={{
-                name: "at",
-                styles: { color: "brown" },
-              }}
-              secondary
-              styles={styles} />
+          <Button
+            content="Send email"
+            icon={{
+              name: "at",
+              styles: { color: "brown" },
+            }}
+            secondary
+            styles={styles}
+          />
 
         export default btnExample
       `}
@@ -187,7 +181,7 @@ export default () => (
     <ExampleSnippet
       value={`
         import React from 'react'
-        import { Button, Divider, Icon, Label, Provider } from '@stardust-ui/react'
+        import { Button, Icon, Label, Provider } from '@stardust-ui/react'
 
         const theme = {
           siteVariables: {
@@ -226,9 +220,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br /><br />
-              <Divider type="primary">Branding primary</Divider>
-              <Divider type="secondary">Branding secondary</Divider>
             </div>
           </Provider>
         )
@@ -273,10 +264,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br />
-              <br />
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
             </div>
           </Provider>
         </div>
@@ -294,7 +281,6 @@ export default () => (
           /* Default theming */
           <Header as="h3" content="Default" />
           <Button primary>Branding</Button>
-          <Divider type="primary">Branding</Divider>
 
           /* First nested theming */
           <Provider
@@ -310,9 +296,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br/><br/>
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
 
               /* Second nested theming */
               <Provider
@@ -332,9 +315,6 @@ export default () => (
                   <Button icon="at" content="Send email" secondary />
                   <Icon name="chess rook" size="big" />
                   <Label content="Label with icon" icon="close" />
-                  <br/><br/>
-                  <Divider content="Primary Divider" type="primary" />
-                  <Divider content="Secondary Divider" type="secondary" />
                 </div>
               </Provider>
             </div>
@@ -349,10 +329,6 @@ export default () => (
           <Button icon="at" content="Send email" secondary />
           <Icon name="chess rook" size="big" />
           <Label content="Label with icon" icon="close" />
-          <br />
-          <br />
-          <Divider content="Primary Divider" type="primary" />
-          <Divider content="Secondary Divider" type="secondary" />
 
           <Provider
             theme={{
@@ -367,10 +343,6 @@ export default () => (
               <Button icon="at" content="Send email" secondary />
               <Icon name="chess rook" size="big" />
               <Label content="Label with icon" icon="close" />
-              <br />
-              <br />
-              <Divider content="Primary Divider" type="primary" />
-              <Divider content="Secondary Divider" type="secondary" />
 
               <Provider
                 theme={{
@@ -389,10 +361,6 @@ export default () => (
                   <Button icon="at" content="Send email" secondary />
                   <Icon name="chess rook" size="big" />
                   <Label content="Label with icon" icon="close" />
-                  <br />
-                  <br />
-                  <Divider content="Primary Divider" type="primary" />
-                  <Divider content="Secondary Divider" type="secondary" />
                 </>
               </Provider>
             </>

docs/src/examples/components/Divider/Types/index.tsx

@@ -24,9 +24,6 @@ export interface DividerProps
   /** Size multiplier (default 0) * */
   size?: number
 
-  /** A Divider can be formatted to show different levels of emphasis. */
-  type?: 'primary' | 'secondary'
-
   /** A divider can appear more important and draw the user's attention. */
   important?: boolean
 }
@@ -45,7 +42,6 @@ class Divider extends UIComponent<Extendable<DividerProps>, any> {
     ...commonPropTypes.createCommon({ color: true }),
     fitted: PropTypes.bool,
     size: PropTypes.number,
-    type: PropTypes.oneOf(['primary', 'secondary']),
     important: PropTypes.bool,
   }
 

docs/src/prototypes/chatPane/services/messageFactoryMock.tsx

@@ -2,6 +2,8 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria
 import { Partial } from 'types/utils'
 
 export default (siteVars: any): Partial<DividerVariables> => ({
-  primaryColor: siteVars.brand06,
+  colors: {
+    primary: siteVars.brand06,
+  },
   textColor: siteVars.gray02,
 })

docs/src/views/Theming.tsx

@@ -2,7 +2,9 @@ import { DividerVariables } from '../../../teams/components/Divider/dividerVaria
 import { Partial } from 'types/utils'
 
 export default (siteVars: any): Partial<DividerVariables> => ({
+  colors: {
+    primary: siteVars.white,
+  },
   dividerColor: siteVars.white,
   textColor: siteVars.white,
-  primaryColor: siteVars.white,
 })

docs/src/views/ThemingExamples.tsx

@@ -14,10 +14,7 @@ const beforeAndAfter = (color, size, type, variables): ICSSPseudoElementStyle =>
   flex: 1,
   ...dividerBorderStyle(size, variables.dividerColor),
   ...(color && {
-    ...dividerBorderStyle(size, _.get(variables.colors, [color, 500])),
-  }),
-  ...(type === 'primary' && {
-    ...dividerBorderStyle(size, variables.primaryColor),
+    ...dividerBorderStyle(size, _.get(variables.colors, color)),
   }),
 })
 
@@ -33,10 +30,7 @@ const dividerStyles: ComponentSlotStylesInput<DividerPropsWithDefaults, any> = {
         paddingBottom: variables.dividerPadding,
       }),
       ...(color && {
-        color: _.get(variables.colors, [color, 500]),
-      }),
-      ...(type === 'primary' && {
-        color: variables.primaryColor,
+        color: _.get(variables.colors, color),
       }),
       ...(important && {
         fontWeight: variables.importantFontWeight,

src/components/Divider/Divider.tsx

@@ -1,25 +1,27 @@
+import * as _ from 'lodash'
+
 import { EmphasisColors, NaturalColors } from '../../../types'
 import { pxToRem } from '../../../../lib'
 
 export interface DividerVariables {
-  colors: EmphasisColors & NaturalColors
+  colors: Record<keyof (EmphasisColors & NaturalColors), string>
   dividerColor: string
   textColor: string
   textFontSize: string
   textLineHeight: string
-  primaryColor: string
   importantFontWeight: string
   dividerPadding: string
 }
 
 export default (siteVars: any): DividerVariables => {
+  const colorVariant = '500'
+
   return {
-    colors: { ...siteVars.emphasisColors, ...siteVars.naturalColors },
+    colors: _.mapValues({ ...siteVars.emphasisColors, ...siteVars.naturalColors }, colorVariant),
     dividerColor: siteVars.gray09,
     textColor: siteVars.gray03,
     textFontSize: siteVars.fontSizeSmall,
     textLineHeight: siteVars.lineHeightSmall,
-    primaryColor: siteVars.brand,
     importantFontWeight: siteVars.fontWeightBold,
     dividerPadding: pxToRem(4),
   }