feat(segment): disabled prop

CHANGELOG.md

@@ -20,6 +20,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 ### BREAKING CHANGES
 - Type `FontFaceStyle` was renamed to `FontFaceProps` @layershifter ([#1487](https://github.com/stardust-ui/react/pull/1487))
 - Type `style` was renamed to `props` on `FontFace` @layershifter ([#1487](https://github.com/stardust-ui/react/pull/1487))
+- Remove `boxShadowColor` variable for `Segment` component @Bugaa92 ([#1516](https://github.com/stardust-ui/react/pull/1516))
 
 ### Fixes
 - Fix prop types of `Tooltip` component @kuzhelov ([#1499](https://github.com/stardust-ui/react/pull/1499))
@@ -32,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add `toolbarBehavior` for `Toolbar` component and apply `buttonBehavior` for `ToolbarItem` component @sophieH29 ([#1468](https://github.com/stardust-ui/react/pull/1468))
 - Integrate ARIA HTML design pattern in the `Tree` component @silviuavram ([#1488](https://github.com/stardust-ui/react/pull/1488))
 - Add 'broadcast' icon to Teams theme @lawrencecushman ([#1509](https://github.com/stardust-ui/react/pull/1509))
+- Add `disabled` prop for `Segment` component @Bugaa92 ([#1516](https://github.com/stardust-ui/react/pull/1516))
 
 ### Performance
 - Use single Fela renderer for LTR & RTL @layershifter ([#1459](https://github.com/stardust-ui/react/pull/1459))

docs/src/examples/components/Segment/States/SegmentExampleDisabled.shorthand.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Segment } from '@stardust-ui/react'
+
+const SegmentExampleDisabledShorthand = () => <Segment disabled content="Disabled segment." />
+
+export default SegmentExampleDisabledShorthand

docs/src/examples/components/Segment/States/SegmentExampleDisabled.tsx

@@ -0,0 +1,6 @@
+import * as React from 'react'
+import { Segment } from '@stardust-ui/react'
+
+const SegmentExampleDisabled = () => <Segment disabled>Disabled segment.</Segment>
+
+export default SegmentExampleDisabled

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

@@ -0,0 +1,15 @@
+import * as React from 'react'
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const States = () => (
+  <ExampleSection title="States">
+    <ComponentExample
+      title="Disabled"
+      description="A segment can show it is currently unable to be interacted with."
+      examplePath="components/Segment/States/SegmentExampleDisabled"
+    />
+  </ExampleSection>
+)
+
+export default States

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

@@ -4,6 +4,7 @@ import { Link } from 'react-router-dom'
 
 import Rtl from './Rtl'
 import Types from './Types'
+import States from './States'
 import Variations from './Variations'
 
 const SegmentExamples = () => (
@@ -18,6 +19,7 @@ const SegmentExamples = () => (
     </Alert>
 
     <Types />
+    <States />
     <Variations />
     <Rtl />
   </>

packages/react/src/components/Segment/Segment.tsx

@@ -24,6 +24,9 @@ export interface SegmentProps
    */
   accessibility?: Accessibility
 
+  /** An segment can show it is currently unable to be interacted with. */
+  disabled?: boolean
+
   /** A segment can have its colors inverted for contrast. */
   inverted?: boolean
 }
@@ -37,6 +40,7 @@ class Segment extends UIComponent<WithAsProp<SegmentProps>, any> {
     ...commonPropTypes.createCommon({
       content: 'shorthand',
     }),
+    disabled: PropTypes.bool,
     inverted: PropTypes.bool,
     rtlAttributes: PropTypes.func,
   }

packages/react/src/themes/teams-dark/componentVariables.ts

@@ -9,6 +9,7 @@ export { default as HeaderDescription } from './components/Header/headerDescript
 export { default as Input } from './components/Input/inputVariables'
 export { default as ListItem } from './components/List/listItemVariables'
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
+export { default as Segment } from './components/Segment/segmentVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'
 export { default as Menu } from './components/Menu/menuVariables'

packages/react/src/themes/teams-dark/components/Segment/segmentVariables.ts

@@ -0,0 +1,6 @@
+import { SegmentVariables } from '../../../teams/components/Segment/segmentVariables'
+
+export default (siteVars: any): Partial<SegmentVariables> => ({
+  disabledColor: siteVars.colors.grey[450],
+  disabledBackgroundColor: siteVars.colors.grey[550],
+})

packages/react/src/themes/teams-high-contrast/componentVariables.ts

@@ -10,6 +10,7 @@ export { default as Input } from './components/Input/inputVariables'
 export { default as ListItem } from './components/List/listItemVariables'
 export { default as Menu } from './components/Menu/menuVariables'
 export { default as RadioGroupItem } from './components/RadioGroup/radioGroupItemVariables'
+export { default as Segment } from './components/Segment/segmentVariables'
 export { default as Text } from './components/Text/textVariables'
 export { default as Toolbar } from './components/Toolbar/toolbarVariables'
 export { default as TreeTitle } from './components/Tree/treeTitleVariables'

packages/react/src/themes/teams-high-contrast/components/Segment/segmentVariables.ts

@@ -0,0 +1,6 @@
+import { SegmentVariables } from '../../../teams/components/Segment/segmentVariables'
+
+export default (siteVars: any): Partial<SegmentVariables> => ({
+  disabledColor: siteVars.colors.black,
+  disabledBackgroundColor: siteVars.accessibleGreen,
+})

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

@@ -8,17 +8,29 @@ const segmentStyles: ComponentSlotStylesInput<SegmentProps, SegmentVariables> =
     const colors = getColorScheme(v.colorScheme, p.color)
 
     return {
-      padding: v.padding,
-      borderTop: `2px solid transparent`,
+      borderColor: 'transparent',
       borderRadius: v.borderRadius,
-      boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`,
+      borderStyle: v.borderStyle,
+      borderWidth: v.borderWidth,
+      boxShadow: v.boxShadow,
+      padding: v.padding,
       color: v.color,
       backgroundColor: v.backgroundColor,
       ...(p.color && { borderColor: colors.foreground }),
       ...(p.inverted && {
         color: v.backgroundColor,
         backgroundColor: p.color ? colors.foreground : v.color,
       }),
+      ...(p.disabled && {
+        boxShadow: 'none',
+        borderColor: v.disabledBorderColor,
+        color: v.disabledColor,
+        backgroundColor: v.disabledBackgroundColor,
+        ...(p.inverted && {
+          color: v.disabledBackgroundColor,
+          backgroundColor: v.disabledColor,
+        }),
+      }),
     }
   },
 }

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

@@ -11,19 +11,32 @@ export type SegmentColorSchemeMapping = TeamsSchemeMappingWithAreas<
 export interface SegmentVariables {
   colorScheme: SegmentColorSchemeMapping
   color: string
+  disabledColor: string
   backgroundColor: string
-  padding: string
+  disabledBackgroundColor: string
+  disabledBorderColor: string
   borderRadius: string | number
-  boxShadowColor: string
+  borderStyle: string
+  borderWidth: string
+  boxShadow: string
+  padding: string
 }
 
 export default (siteVariables): SegmentVariables => {
   return {
     colorScheme: pickValuesFromColorScheme(siteVariables.colorScheme, segmentColorAreas),
     color: siteVariables.bodyColor,
+    disabledColor: siteVariables.colors.grey[250],
+
     backgroundColor: siteVariables.bodyBackground,
-    padding: '1em',
+    disabledBackgroundColor: siteVariables.colors.grey[150],
+
+    disabledBorderColor: 'transparent',
     borderRadius: 0,
-    boxShadowColor: 'rgba(34,36,38,.15)',
+    borderStyle: 'solid',
+    borderWidth: '2px 0 0 0',
+
+    boxShadow: '0 1px 1px 1px rgba(34,36,38,.15)',
+    padding: '1em',
   }
 }