From 980974cde13c3979c7f0ebfdc51ca48f6241491e Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Fri, 19 Oct 2018 17:51:52 +0200 Subject: [PATCH 1/2] feat(segment): add inverted prop and improved styles --- CHANGELOG.md | 3 +- .../SegmentExampleInverted.shorthand.tsx | 16 +++++++++++ .../Variations/SegmentExampleInverted.tsx | 14 ++++++++++ .../components/Segment/Variations/index.tsx | 15 ++++++++++ .../src/examples/components/Segment/index.tsx | 2 ++ src/components/Segment/Segment.tsx | 28 +++++++++++++++---- .../teams/components/Segment/segmentStyles.ts | 27 ++++++++++++------ .../components/Segment/segmentVariables.ts | 5 ++-- 8 files changed, 94 insertions(+), 16 deletions(-) create mode 100644 docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx create mode 100644 docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx create mode 100644 docs/src/examples/components/Segment/Variations/index.tsx diff --git a/CHANGELOG.md b/CHANGELOG.md index 2f4525d439..f58c5f0b93 100644 --- a/CHANGELOG.md +++ b/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)) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx new file mode 100644 index 0000000000..c8b00cb89a --- /dev/null +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx @@ -0,0 +1,16 @@ +import * as React from 'react' +import { Segment, Text } from '@stardust-ui/react' + +const SegmentExampleInvertedShorthand = () => ( +
+ +
+ } + color="purple" + /> +
+) + +export default SegmentExampleInvertedShorthand diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx new file mode 100644 index 0000000000..937a26f3f3 --- /dev/null +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx @@ -0,0 +1,14 @@ +import * as React from 'react' +import { Segment, Text } from '@stardust-ui/react' + +const SegmentExampleInvertedShorthand = () => ( +
+ Colored segment. +
+ + Colored inverted segment. + +
+) + +export default SegmentExampleInvertedShorthand diff --git a/docs/src/examples/components/Segment/Variations/index.tsx b/docs/src/examples/components/Segment/Variations/index.tsx new file mode 100644 index 0000000000..a3c71784fc --- /dev/null +++ b/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 = () => ( + + + +) + +export default Variations diff --git a/docs/src/examples/components/Segment/index.tsx b/docs/src/examples/components/Segment/index.tsx index 23b14fb409..accbb8cc18 100644 --- a/docs/src/examples/components/Segment/index.tsx +++ b/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 = () => (
+
) diff --git a/src/components/Segment/Segment.tsx b/src/components/Segment/Segment.tsx index bb6d4309b4..cd868c8b43 100644 --- a/src/components/Segment/Segment.tsx +++ b/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 variables?: ComponentVariablesInput } @@ -27,8 +31,22 @@ class Segment extends UIComponent, 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, any> { } renderComponent({ ElementType, classes, rest }) { - const { children, content } = this.props + const { children, content, renderContent } = this.props return ( - {childrenExist(children) ? children : content} + {childrenExist(children) ? children : Slot.create(content, { render: renderContent })} ) } diff --git a/src/themes/teams/components/Segment/segmentStyles.ts b/src/themes/teams/components/Segment/segmentStyles.ts index a4bf647649..5d265108d5 100644 --- a/src/themes/teams/components/Segment/segmentStyles.ts +++ b/src/themes/teams/components/Segment/segmentStyles.ts @@ -1,14 +1,25 @@ -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 = { + 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, + } + : { + borderTop: `2px solid ${color}`, + })), } }, } + +export default segmentStyles diff --git a/src/themes/teams/components/Segment/segmentVariables.ts b/src/themes/teams/components/Segment/segmentVariables.ts index 7a69049de9..d49881e3f6 100644 --- a/src/themes/teams/components/Segment/segmentVariables.ts +++ b/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 From 12eb4ac690729025174233ba80b8b0a746758417 Mon Sep 17 00:00:00 2001 From: Alexandru Buliga Date: Mon, 12 Nov 2018 10:27:23 +0100 Subject: [PATCH 2/2] addressed comments --- .../Variations/SegmentExampleInverted.shorthand.tsx | 8 ++------ .../Segment/Variations/SegmentExampleInverted.tsx | 4 ++-- src/themes/teams/components/Segment/segmentStyles.ts | 1 + 3 files changed, 5 insertions(+), 8 deletions(-) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx index c8b00cb89a..8127ca0feb 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.shorthand.tsx @@ -1,15 +1,11 @@ import * as React from 'react' -import { Segment, Text } from '@stardust-ui/react' +import { Segment } from '@stardust-ui/react' const SegmentExampleInvertedShorthand = () => (

- } - color="purple" - /> +
) diff --git a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx index 937a26f3f3..60267632ad 100644 --- a/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx +++ b/docs/src/examples/components/Segment/Variations/SegmentExampleInverted.tsx @@ -1,12 +1,12 @@ import * as React from 'react' -import { Segment, Text } from '@stardust-ui/react' +import { Segment } from '@stardust-ui/react' 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 5d265108d5..314f677aa0 100644 --- a/src/themes/teams/components/Segment/segmentStyles.ts +++ b/src/themes/teams/components/Segment/segmentStyles.ts @@ -14,6 +14,7 @@ const segmentStyles: ComponentSlotStylesInput = (p.inverted ? { background: color, + color: '#eee', } : { borderTop: `2px solid ${color}`,