feat(segment): add inverted prop and improved styles

CHANGELOG.md

@@ -32,7 +32,8 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Set the ref of the `FocusZone` in `Embed` mode @sophieH29 ([#435](https://github.com/stardust-ui/react/pull/435))
 - Close `Popup` on outside click @kuzhelov ([#410](https://github.com/stardust-ui/react/pull/410))
 - Set default `chatBehavior` which uses Enter/Esc keys @sophieH29 ([#443](https://github.com/stardust-ui/react/pull/443))
-- Add `iconPosition` property to `Input` component @mnajdova ([#442](https://github.com/stardust-ui/react/pull/442)) 
+- Add `iconPosition` property to `Input` component @mnajdova ([#442](https://github.com/stardust-ui/react/pull/442))
+- Add `color`, `inverted` and `renderContent` props and `content` slot to `Segment` component @Bugaa92 ([#389](https://github.com/stardust-ui/react/pull/389))
 
 ### Documentation
 - Add all missing component descriptions and improve those existing @levithomason ([#400](https://github.com/stardust-ui/react/pull/400))

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+import { Segment } from '@stardust-ui/react'
+
+const SegmentExampleInvertedShorthand = () => (
+  <div>
+    <Segment content="Colored segment." color="purple" />
+    <br />
+    <Segment inverted content="Colored inverted segment" color="purple" />
+  </div>
+)
+
+export default SegmentExampleInvertedShorthand

docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx

@@ -0,0 +1,14 @@
+import * as React from 'react'
+import { Segment } from '@stardust-ui/react'
+
+const SegmentExampleInvertedShorthand = () => (
+  <div>
+    <Segment color="purple">Colored segment.</Segment>
+    <br />
+    <Segment inverted color="purple">
+      Colored inverted segment
+    </Segment>
+  </div>
+)
+
+export default SegmentExampleInvertedShorthand

docs/src/examples/components/Segment/Variations/index.tsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Variations = () => (
+  <ExampleSection title="Variations">
+    <ComponentExample
+      title="Inverted"
+      description="A segment can have its colors inverted for contrast."
+      examplePath="components/Segment/Variations/SegmentExampleInverted"
+    />
+  </ExampleSection>
+)
+
+export default Variations

docs/src/examples/components/Segment/index.tsx

@@ -1,9 +1,11 @@
 import * as React from 'react'
 import Types from './Types'
+import Variations from './Variations'
 
 const SegmentExamples = () => (
   <div>
     <Types />
+    <Variations />
   </div>
 )
 

src/components/Segment/Segment.tsx

@@ -1,13 +1,17 @@
 import * as React from 'react'
 import * as PropTypes from 'prop-types'
 import { customPropTypes, UIComponent, childrenExist } from '../../lib'
-import { Extendable } from '../../../types/utils'
+import { Extendable, ShorthandValue, ShorthandRenderFunction } from '../../../types/utils'
 import { ComponentVariablesInput, ComponentSlotStyle } from '../../themes/types'
+import Slot from '../Slot/Slot'
 
 export interface SegmentProps {
   as?: any
   className?: string
-  content?: any
+  color?: string
+  content?: ShorthandValue
+  inverted?: boolean
+  renderContent?: ShorthandRenderFunction
   styles?: ComponentSlotStyle<SegmentProps, any>
   variables?: ComponentVariablesInput
 }
@@ -27,8 +31,22 @@ class Segment extends UIComponent<Extendable<SegmentProps>, any> {
     /** Additional CSS class name(s) to apply.  */
     className: PropTypes.string,
 
+    /** A segment can have different colors */
+    color: PropTypes.string,
+
     /** Shorthand for primary content. */
-    content: PropTypes.any,
+    content: PropTypes.contentShorthand,
+
+    /** A segment can have its colors inverted for contrast. */
+    inverted: PropTypes.bool,
+
+    /**
+     * A custom render function the content slot.
+     * @param {React.ReactType} Component - The computed component for this slot.
+     * @param {object} props - The computed props for this slot.
+     * @param {ReactNode|ReactNodeArray} children - The computed children for this slot.
+     */
+    renderContent: PropTypes.func,
 
     /** Additional CSS styles to apply to the component instance.  */
     styles: PropTypes.oneOfType([PropTypes.object, PropTypes.func]),
@@ -42,11 +60,11 @@ class Segment extends UIComponent<Extendable<SegmentProps>, any> {
   }
 
   renderComponent({ ElementType, classes, rest }) {
-    const { children, content } = this.props
+    const { children, content, renderContent } = this.props
 
     return (
       <ElementType {...rest} className={classes.root}>
-        {childrenExist(children) ? children : content}
+        {childrenExist(children) ? children : Slot.create(content, { render: renderContent })}
       </ElementType>
     )
   }

src/themes/teams/components/Segment/segmentStyles.ts

@@ -1,14 +1,26 @@
-import { ICSSInJSStyle } from '../../../types'
+import { SegmentProps } from 'semantic-ui-react'
+import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types'
 import { SegmentVariables } from './segmentVariables'
 
-export default {
-  root: ({ variables }: { variables: SegmentVariables }): ICSSInJSStyle => {
+const segmentStyles: ComponentSlotStylesInput<SegmentProps, SegmentVariables> = {
+  root: ({ props: p, variables: v }): ICSSInJSStyle => {
+    const color = p.color || v.color
     return {
-      padding: variables.padding,
-      background: variables.background,
-      border: '1px solid rgba(34,36,38,.15)',
-      borderRadius: variables.borderRadius,
-      boxShadow: '0 1px 2px 0 rgba(34,36,38,.15)',
+      padding: v.padding,
+      background: v.background,
+      borderRadius: v.borderRadius,
+      boxShadow: '0 1px 1px 1px rgba(34,36,38,.15)',
+      ...(color &&
+        (p.inverted
+          ? {
+              background: color,
+              color: '#eee',
+            }
+          : {
+              borderTop: `2px solid ${color}`,
+            })),
     }
   },
 }
+
+export default segmentStyles

src/themes/teams/components/Segment/segmentVariables.ts

@@ -1,16 +1,17 @@
-import { pxToRem } from '../../../../lib'
 import { ComponentVariablesPrepared } from '@stardust-ui/react'
 
 export interface SegmentVariables {
   padding: string
   background: string
   borderRadius: string
+  color: string
 }
 
 const segmentVariables: ComponentVariablesPrepared = siteVariables => ({
   padding: '1em',
   background: siteVariables.bodyBackground,
-  borderRadius: pxToRem(5),
+  borderRadius: 0,
+  color: undefined,
 })
 
 export default segmentVariables