From 5390e4f3125029d800e4c75b2d8ce6666a9c37b7 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 16:00:08 +0200 Subject: [PATCH 1/5] feat(segment): color prop --- .../SegmentExampleColor.shorthand.tsx | 18 +++++++++++++ .../Variations/SegmentExampleColor.tsx | 20 ++++++++++++++ .../SegmentExampleInverted.shorthand.tsx | 4 +-- .../components/Segment/Variations/index.tsx | 5 ++++ .../teams/components/Segment/segmentStyles.ts | 7 +++-- .../components/Segment/segmentVariables.ts | 27 +++++++++++-------- 6 files changed, 66 insertions(+), 15 deletions(-) create mode 100644 docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx create mode 100644 docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx new file mode 100644 index 0000000000..8e7d9337b8 --- /dev/null +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx @@ -0,0 +1,18 @@ +import React from 'react' +import _ from 'lodash' +import { Segment, ProviderConsumer } from '@stardust-ui/react' + +const SegmentExampleColor = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + +
+ + )) + } + /> +) + +export default SegmentExampleColor diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx new file mode 100644 index 0000000000..47b9a1103c --- /dev/null +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx @@ -0,0 +1,20 @@ +import React from 'react' +import _ from 'lodash' +import { Segment, ProviderConsumer } from '@stardust-ui/react' + +const SegmentExampleColor = () => ( + + _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( + <> + + {_.startCase(color)} + +
+ + )) + } + /> +) + +export default SegmentExampleColor diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx index 8127ca0feb..e462ed859f 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx @@ -3,9 +3,9 @@ import { Segment } from '@stardust-ui/react' const SegmentExampleInvertedShorthand = () => (
- +
- +
) diff --git a/docs/src/examples/components/Segment/Variations/index.tsx b/docs/src/examples/components/Segment/Variations/index.tsx index e1c24e5602..3aae84cc3b 100644 --- a/docs/src/examples/components/Segment/Variations/index.tsx +++ b/docs/src/examples/components/Segment/Variations/index.tsx @@ -9,6 +9,11 @@ const Variations = () => ( description="A segment can have its colors inverted for contrast." examplePath="components/Segment/Variations/SegmentExampleInverted" /> + ) diff --git a/src/themes/teams/components/Segment/segmentStyles.ts b/src/themes/teams/components/Segment/segmentStyles.ts index bd814100a9..3d0effcd30 100644 --- a/src/themes/teams/components/Segment/segmentStyles.ts +++ b/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,10 +1,13 @@ +import * as _ from 'lodash' + import { SegmentProps } from '../../../../components/Segment/Segment' import { ICSSInJSStyle, ComponentSlotStylesInput } from '../../../types' import { SegmentVariables } from './segmentVariables' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const color = p.color || v.color + const color = _.get(v.colors, p.color, v.color) + return { padding: v.padding, background: v.background, @@ -14,7 +17,7 @@ const segmentStyles: ComponentSlotStylesInput = (p.inverted ? { background: color, - color: '#eee', + color: '#eee', // TODO: fix this color once we fix #629 } : { borderTop: `2px solid ${color}`, diff --git a/src/themes/teams/components/Segment/segmentVariables.ts b/src/themes/teams/components/Segment/segmentVariables.ts index d49881e3f6..7e261c568f 100644 --- a/src/themes/teams/components/Segment/segmentVariables.ts +++ b/src/themes/teams/components/Segment/segmentVariables.ts @@ -1,17 +1,22 @@ -import { ComponentVariablesPrepared } from '@stardust-ui/react' +import { ColorValues } from '../../../types' +import { mapColorsToScheme } from '../../../../lib' export interface SegmentVariables { - padding: string - background: string - borderRadius: string + colors: ColorValues color: string + background: string + padding: string + borderRadius: string | number } -const segmentVariables: ComponentVariablesPrepared = siteVariables => ({ - padding: '1em', - background: siteVariables.bodyBackground, - borderRadius: 0, - color: undefined, -}) +export default (siteVariables): SegmentVariables => { + const colorVariant = 500 -export default segmentVariables + return { + colors: mapColorsToScheme(siteVariables, colorVariant), + color: undefined, + background: siteVariables.bodyBackground, + padding: '1em', + borderRadius: 0, + } +} From f392e9c2d1211798646c94810ce1bb7cd5c1750e Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 17:21:16 +0200 Subject: [PATCH 2/5] changelog --- CHANGELOG.md | 1 + .../Segment/Variations/SegmentExampleColor.shorthand.tsx | 4 ++-- .../components/Segment/Variations/SegmentExampleColor.tsx | 4 ++-- 3 files changed, 5 insertions(+), 4 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 84684eb453..2a58b930da 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -33,6 +33,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm - Add and export compose icons in Teams theme @joheredi ([#639](https://github.com/stardust-ui/react/pull/639)) - Add `menu` prop to `MenuItem` @mnajdova ([#539](https://github.com/stardust-ui/react/pull/539)) - Enable RTL for `FocusZone` @sophieH29 ([#646](https://github.com/stardust-ui/react/pull/646)) +- Add `color` prop to `Segment` component @Bugaa92 ([#632](https://github.com/stardust-ui/react/pull/632)) ### Documentation - Add more accessibility descriptions to components and behaviors @jurokapsiar ([#648](https://github.com/stardust-ui/react/pull/648)) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx index 8e7d9337b8..b10183d996 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx @@ -1,5 +1,5 @@ -import React from 'react' -import _ from 'lodash' +import * as React from 'react' +import * as _ from 'lodash' import { Segment, ProviderConsumer } from '@stardust-ui/react' const SegmentExampleColor = () => ( diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx index 47b9a1103c..5d99ec2964 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx @@ -1,5 +1,5 @@ -import React from 'react' -import _ from 'lodash' +import * as React from 'react' +import * as _ from 'lodash' import { Segment, ProviderConsumer } from '@stardust-ui/react' const SegmentExampleColor = () => ( From 50b263439333a57b2c643bcffc4c45c5b9c37cc9 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Tue, 18 Dec 2018 17:38:28 +0200 Subject: [PATCH 3/5] fixed color again --- .../components/Segment/Variations/SegmentExampleInverted.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx index 60267632ad..309dcd8863 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx @@ -3,9 +3,9 @@ import { Segment } from '@stardust-ui/react' const SegmentExampleInvertedShorthand = () => (
- Colored segment. + Colored segment.
- + Colored inverted segment
From 08a2698755b23742112b73c07167dd60156be763 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Wed, 19 Dec 2018 15:30:58 +0200 Subject: [PATCH 4/5] simplified example --- .../Segment/Variations/SegmentExampleColor.shorthand.tsx | 5 +---- .../Segment/Variations/SegmentExampleColor.tsx | 9 +++------ 2 files changed, 4 insertions(+), 10 deletions(-) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx index b10183d996..5609b9f606 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.shorthand.tsx @@ -6,10 +6,7 @@ const SegmentExampleColor = () => ( _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( - <> - -
- + )) } /> diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx index 5d99ec2964..e6ec7bfff9 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleColor.tsx @@ -6,12 +6,9 @@ const SegmentExampleColor = () => ( _.keys({ ...emphasisColors, ...naturalColors }).map(color => ( - <> - - {_.startCase(color)} - -
- + + {_.startCase(color)} + )) } /> From b56521311f4a0efabba5c7733daf693ee7dccc80 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Thu, 20 Dec 2018 16:33:10 +0200 Subject: [PATCH 5/5] introduced fix to make segment inverted work without specifying color --- .../SegmentExampleInverted.shorthand.tsx | 2 +- .../Variations/SegmentExampleInverted.tsx | 2 +- .../teams/components/Segment/segmentStyles.ts | 22 +++++++++---------- .../components/Segment/segmentVariables.ts | 8 ++++--- 4 files changed, 17 insertions(+), 17 deletions(-) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx index e462ed859f..0dc2e78f56 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx @@ -5,7 +5,7 @@ const SegmentExampleInvertedShorthand = () => (

- +
) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx index 309dcd8863..733ead610f 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx @@ -6,7 +6,7 @@ const SegmentExampleInvertedShorthand = () => ( Colored segment.
- Colored inverted segment + Colored inverted segment. ) diff --git a/src/themes/teams/components/Segment/segmentStyles.ts b/src/themes/teams/components/Segment/segmentStyles.ts index 3d0effcd30..a15b1a2498 100644 --- a/src/themes/teams/components/Segment/segmentStyles.ts +++ b/src/themes/teams/components/Segment/segmentStyles.ts @@ -6,22 +6,20 @@ import { SegmentVariables } from './segmentVariables' const segmentStyles: ComponentSlotStylesInput = { root: ({ props: p, variables: v }): ICSSInJSStyle => { - const color = _.get(v.colors, p.color, v.color) + const segmentColor = _.get(v.colors, p.color) return { padding: v.padding, - background: v.background, + borderTop: `2px solid transparent`, borderRadius: v.borderRadius, - boxShadow: '0 1px 1px 1px rgba(34,36,38,.15)', - ...(color && - (p.inverted - ? { - background: color, - color: '#eee', // TODO: fix this color once we fix #629 - } - : { - borderTop: `2px solid ${color}`, - })), + boxShadow: `0 1px 1px 1px ${v.boxShadowColor}`, + color: v.color, + backgroundColor: v.backgroundColor, + borderColor: segmentColor, + ...(p.inverted && { + color: v.backgroundColor, + backgroundColor: segmentColor || v.color, + }), } }, } diff --git a/src/themes/teams/components/Segment/segmentVariables.ts b/src/themes/teams/components/Segment/segmentVariables.ts index 7e261c568f..ebb3fb80bf 100644 --- a/src/themes/teams/components/Segment/segmentVariables.ts +++ b/src/themes/teams/components/Segment/segmentVariables.ts @@ -4,9 +4,10 @@ import { mapColorsToScheme } from '../../../../lib' export interface SegmentVariables { colors: ColorValues color: string - background: string + backgroundColor: string padding: string borderRadius: string | number + boxShadowColor: string } export default (siteVariables): SegmentVariables => { @@ -14,9 +15,10 @@ export default (siteVariables): SegmentVariables => { return { colors: mapColorsToScheme(siteVariables, colorVariant), - color: undefined, - background: siteVariables.bodyBackground, + color: siteVariables.black, + backgroundColor: siteVariables.bodyBackground, padding: '1em', borderRadius: 0, + boxShadowColor: 'rgba(34,36,38,.15)', } }