From d3eed465f31acd999e91cb74ce0f25e0663a44b5 Mon Sep 17 00:00:00 2001 From: PanSpagetka Date: Mon, 9 Jul 2018 13:01:05 +0200 Subject: [PATCH 01/10] feat(CompoundLabel) Add CompoundLabel component --- .../patternfly-react/less/compound-label.less | 42 ++++++++++ .../sass/patternfly-react.scss | 1 + .../patternfly-react/_compound-label.scss | 43 ++++++++++ .../src/components/Label/CompoundLabel.js | 61 ++++++++++++++ .../components/Label/CompoundLabel.test.js | 26 ++++++ .../src/components/Label/Label.stories.js | 34 +++++++- .../src/components/Label/LabelWithTooltip.js | 37 ++++++++ .../components/Label/LabelWithTooltip.test.js | 17 ++++ .../Label/__mocks__/mockCompoundLabel.js | 75 +++++++++++++++++ .../Label/__mocks__/mockLabelExamples.js | 4 +- .../__snapshots__/CompoundLabel.test.js.snap | 84 +++++++++++++++++++ .../LabelWithTooltip.test.js.snap | 36 ++++++++ .../src/components/Label/index.js | 3 +- 13 files changed, 456 insertions(+), 7 deletions(-) create mode 100644 packages/patternfly-react/less/compound-label.less create mode 100644 packages/patternfly-react/sass/patternfly-react/_compound-label.scss create mode 100644 packages/patternfly-react/src/components/Label/CompoundLabel.js create mode 100644 packages/patternfly-react/src/components/Label/CompoundLabel.test.js create mode 100644 packages/patternfly-react/src/components/Label/LabelWithTooltip.js create mode 100644 packages/patternfly-react/src/components/Label/LabelWithTooltip.test.js create mode 100644 packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js create mode 100644 packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap create mode 100644 packages/patternfly-react/src/components/Label/__snapshots__/LabelWithTooltip.test.js.snap diff --git a/packages/patternfly-react/less/compound-label.less b/packages/patternfly-react/less/compound-label.less new file mode 100644 index 00000000000..cfa210b8e5b --- /dev/null +++ b/packages/patternfly-react/less/compound-label.less @@ -0,0 +1,42 @@ +@import 'patternfly/variables'; + +.pf-remove-button { + color: $color-pf-white; + vertical-align: middle; +} + +.tag { + font-size: 0.8em; + display: table-cell !important; + vertical-align: middle; + + span { + background-color: $color-pf-blue-400; + } +} + +.tagColor { + color: $color-pf-white; +} + +.category.list-inline { + background-color: $color-pf-blue-500; + padding: 3px 10px 3px 15px !important; + color: $color-pf-white; + margin-left: 5px; + margin-right: 10px; + margin-bottom: 5px; + font-size: 14px; + line-height: 24px; + display: table; + float: left; + + li a span { + color: $color-pf-white; + } +} + +.category-label { + padding-right: 15px; + max-width: 50px; +} diff --git a/packages/patternfly-react/sass/patternfly-react.scss b/packages/patternfly-react/sass/patternfly-react.scss index 43c99bcef1f..bb7690fec9e 100644 --- a/packages/patternfly-react/sass/patternfly-react.scss +++ b/packages/patternfly-react/sass/patternfly-react.scss @@ -20,3 +20,4 @@ $icon-font-path: '~patternfly/dist/fonts/'; */ @import 'patternfly-react/patternfly-react'; +@import 'patternfly-react/compound-label'; diff --git a/packages/patternfly-react/sass/patternfly-react/_compound-label.scss b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss new file mode 100644 index 00000000000..cc8a165481c --- /dev/null +++ b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss @@ -0,0 +1,43 @@ +@import 'patternfly/variables'; + +.pf-remove-button { + color: $color-pf-white; + vertical-align: middle; +} + +.tag { + font-size: 0.8em; + display: table-cell !important; + vertical-align: middle; + + span { + background-color: $color-pf-blue-400; + } +} + +.tagColor { + color: $color-pf-white; + max-width: 150px; +} + +.category.list-inline { + background-color: $color-pf-blue-500; + padding: 3px 10px 3px 15px !important; + color: $color-pf-white; + margin-left: 5px; + margin-right: 10px; + margin-bottom: 5px; + font-size: 14px; + line-height: 24px; + display: table; + float: left; + + li a span { + color: $color-pf-white; + } +} + +.category-label { + padding-right: 15px; + max-width: 200px; +} diff --git a/packages/patternfly-react/src/components/Label/CompoundLabel.js b/packages/patternfly-react/src/components/Label/CompoundLabel.js new file mode 100644 index 00000000000..2a6ec76fc8b --- /dev/null +++ b/packages/patternfly-react/src/components/Label/CompoundLabel.js @@ -0,0 +1,61 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import { Tooltip } from '../Tooltip'; +import { OverlayTrigger } from '../OverlayTrigger'; +import LabelWithTooltip from './LabelWithTooltip'; + +class CompoundLabel extends React.Component { + generateTag = value => ( + + ); + + render() { + const values = [...this.props.values]; + if (values.length === 0) return
; + const categoryTooltip = ( + {this.props.category.label} + ); + return ( +
    + +
    + {this.props.categoryTruncate(this.props.category.label)} +
    +     + {values + .sort((a, b) => (a.label < b.label ? -1 : 1)) + .map(tagValue => this.generateTag(tagValue))} +
+ ); + } +} + +CompoundLabel.propTypes = { + category: PropTypes.shape({ + id: PropTypes.any.isRequired, + label: PropTypes.string.isRequired + }).isRequired, + values: PropTypes.arrayOf( + PropTypes.shape({ + id: PropTypes.any.isRequired, + label: PropTypes.string.isRequired + }).isRequired + ).isRequired, + onDeleteClick: PropTypes.func.isRequired, + categoryTruncate: PropTypes.func, + valueTruncate: PropTypes.func +}; + +CompoundLabel.defaultProps = { + categoryTruncate: str => + str.length > 18 ? `${str.substring(0, 18)}...` : str, + valueTruncate: str => (str.length > 18 ? `${str.substring(0, 18)}...` : str) +}; + +export default CompoundLabel; diff --git a/packages/patternfly-react/src/components/Label/CompoundLabel.test.js b/packages/patternfly-react/src/components/Label/CompoundLabel.test.js new file mode 100644 index 00000000000..9cd4c3e1bcd --- /dev/null +++ b/packages/patternfly-react/src/components/Label/CompoundLabel.test.js @@ -0,0 +1,26 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import CompoundLabel from './CompoundLabel'; +import { noop } from '../../common/helpers'; + +const tag = { + id: 1, + label: 'Food - category with very long description', + values: [ + { id: 11, label: 'Cake' }, + { id: 12, label: 'Bloody Steak from the famous Purple Cow' }, + { id: 13, label: 'Pineapple Pizza' } + ] +}; + +test('snapshot test', () => { + const view = shallow( + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/patternfly-react/src/components/Label/Label.stories.js b/packages/patternfly-react/src/components/Label/Label.stories.js index 5ebf5ff78cd..2c93aabf5e6 100644 --- a/packages/patternfly-react/src/components/Label/Label.stories.js +++ b/packages/patternfly-react/src/components/Label/Label.stories.js @@ -2,9 +2,20 @@ import React from 'react'; import { storiesOf } from '@storybook/react'; import { withInfo } from '@storybook/addon-info'; import { defaultTemplate } from 'storybook/decorators/storyTemplates'; -import { storybookPackageName, DOCUMENTATION_URL, STORYBOOK_CATEGORY } from 'storybook/constants/siteConstants'; -import { Label, DisposableLabel, RemoveButton } from './index'; -import { MockLabelRemove, mockLabelRemoveSource } from './__mocks__/mockLabelExamples'; +import { + storybookPackageName, + DOCUMENTATION_URL, + STORYBOOK_CATEGORY +} from 'storybook/constants/siteConstants'; +import { Label, DisposableLabel, RemoveButton, CompoundLabel } from './index'; +import { + MockCompoundLabel, + mockCompoundLabelSource +} from './__mocks__/mockCompoundLabel'; +import { + MockLabelRemove, + mockLabelRemoveSource +} from './__mocks__/mockLabelExamples'; import { name } from '../../../package.json'; const stories = storiesOf(`${storybookPackageName(name)}/${STORYBOOK_CATEGORY.WIDGETS}/Label`, module); @@ -29,7 +40,7 @@ stories.add( ); stories.add( - 'Label with remove', + 'Label with Remove', withInfo()(() => , { source: false, propTables: [DisposableLabel, RemoveButton], @@ -42,3 +53,18 @@ stories.add( ) }) ); + +stories.add( + 'Compound Label', + withInfo()(() => , { + source: false, + propTables: [CompoundLabel], + propTablesExclude: [MockCompoundLabel], + text: ( +
+

Story Source

+ 
{mockCompoundLabelSource}
+
+ ) + }) +); diff --git a/packages/patternfly-react/src/components/Label/LabelWithTooltip.js b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js new file mode 100644 index 00000000000..520328a6e7f --- /dev/null +++ b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js @@ -0,0 +1,37 @@ +import * as React from 'react'; +import PropTypes from 'prop-types'; +import { Label } from '../Label'; +import { OverlayTrigger } from '../OverlayTrigger'; +import { Tooltip } from '../Tooltip'; + +const tooltip = text => {text}; + +const LabelWithTooltip = ({ onDeleteClick, category, value, truncate }) => ( +
  • + + + +
    • +); + +LabelWithTooltip.propTypes = { + onDeleteClick: PropTypes.func.isRequired, + category: PropTypes.shape({ + id: PropTypes.any.isRequired, + label: PropTypes.string.isRequired + }).isRequired, + value: PropTypes.PropTypes.shape({ + id: PropTypes.any.isRequired, + label: PropTypes.string.isRequired + }).isRequired, + truncate: PropTypes.func.isRequired +}; + +export default LabelWithTooltip; diff --git a/packages/patternfly-react/src/components/Label/LabelWithTooltip.test.js b/packages/patternfly-react/src/components/Label/LabelWithTooltip.test.js new file mode 100644 index 00000000000..d1bdf9bc6bf --- /dev/null +++ b/packages/patternfly-react/src/components/Label/LabelWithTooltip.test.js @@ -0,0 +1,17 @@ +import React from 'react'; +import { shallow } from 'enzyme'; +import LabelWithTooltip from './LabelWithTooltip'; +import { noop } from '../../common/helpers'; + +test('snapshot test', () => { + const view = shallow( + + ); + expect(view).toMatchSnapshot(); +}); diff --git a/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js b/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js new file mode 100644 index 00000000000..79a3b34e0ad --- /dev/null +++ b/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js @@ -0,0 +1,75 @@ +import React from 'react'; +import { CompoundLabel } from '../index'; + +export class MockCompoundLabel extends React.Component { + constructor(props) { + super(props); + this.state = { + tag: { + id: 1, + label: 'Food - category with very long description', + values: [ + { id: 11, label: 'Cake' }, + { id: 12, label: 'Bloody Steak from the famous Purple Cow' }, + { id: 13, label: 'Pineapple Pizza' } + ] + } + }; + } + + removeMe = (category, value) => { + const values = this.state.tag.values.filter(val => val.id !== value.id); + const state = { tag: { ...this.state.tag, values } }; + this.setState(state); + }; + + render() { + return ( + + ); + } +} + +export const mockCompoundLabelSource = ` +import React from 'react'; +import { CompoundLabel } from '../index'; + +export class MockCompoundLabel extends React.Component { + constructor(props) { + super(props); + this.state = { + tag: { + id: 1, + label: 'Food - category with very long description', + values: [ + { id: 11, label: 'Cake' }, + { id: 12, label: 'Bloody Steak from the famous Purple Cow' }, + { id: 13, label: 'Pineapple Pizza' } + ] + } + }; + } + + removeMe = (category, value) => { + const values = this.state.tag.values.filter(val => val.id !== value.id); + const state = { tag: { ...this.state.tag, values } }; + this.setState(state); + }; + + render() { + return ( + + ); + } +} +`; diff --git a/packages/patternfly-react/src/components/Label/__mocks__/mockLabelExamples.js b/packages/patternfly-react/src/components/Label/__mocks__/mockLabelExamples.js index b1fd2fdd226..6252deb9397 100644 --- a/packages/patternfly-react/src/components/Label/__mocks__/mockLabelExamples.js +++ b/packages/patternfly-react/src/components/Label/__mocks__/mockLabelExamples.js @@ -39,7 +39,7 @@ export class MockLabelRemove extends React.Component { export const mockLabelRemoveSource = ` import React from 'react'; import { Label } from '../index'; - + export class MockLabelRemove extends React.Component { constructor(props) { super(props); @@ -56,7 +56,7 @@ export const mockLabelRemoveSource = ` removeMe = index => { this.setState(this.state.types.splice(index, 1)); }; - + render() { return (
    diff --git a/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap new file mode 100644 index 00000000000..7fd84a9eee2 --- /dev/null +++ b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap @@ -0,0 +1,84 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`snapshot test 1`] = ` +
      + + Food - category with very long description + + } + placement="bottom" + trigger={ + Array [ + "hover", + "focus", + ] + } + > +
      + Food - category wi... +
      +       + + + +
    +`; diff --git a/packages/patternfly-react/src/components/Label/__snapshots__/LabelWithTooltip.test.js.snap b/packages/patternfly-react/src/components/Label/__snapshots__/LabelWithTooltip.test.js.snap new file mode 100644 index 00000000000..35bf7a8138a --- /dev/null +++ b/packages/patternfly-react/src/components/Label/__snapshots__/LabelWithTooltip.test.js.snap @@ -0,0 +1,36 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`snapshot test 1`] = ` +
  • + + Salad + + } + placement="bottom" + trigger={ + Array [ + "hover", + "focus", + ] + } + > + +
    • +`; diff --git a/packages/patternfly-react/src/components/Label/index.js b/packages/patternfly-react/src/components/Label/index.js index 56b20353647..17f0461218f 100644 --- a/packages/patternfly-react/src/components/Label/index.js +++ b/packages/patternfly-react/src/components/Label/index.js @@ -1,5 +1,6 @@ import DisposableLabel from './DisposableLabel'; import RemoveButton from './RemoveButton'; +import CompoundLabel from './CompoundLabel'; export { default as Label } from './Label'; -export { DisposableLabel, RemoveButton }; +export { DisposableLabel, RemoveButton, CompoundLabel }; From 2a42bc1936ff359534aa32101027c828e733bbc9 Mon Sep 17 00:00:00 2001 From: PanSpagetka Date: Tue, 10 Jul 2018 12:47:22 +0200 Subject: [PATCH 02/10] Address code review issues --- .../patternfly-react/less/compound-label.less | 14 +++++++------- .../patternfly-react/_compound-label.scss | 19 +++++++------------ .../src/components/Label/CompoundLabel.js | 16 ++++++++++++---- .../src/components/Label/Label.stories.js | 8 ++++---- .../src/components/Label/LabelWithTooltip.js | 4 ++-- 5 files changed, 32 insertions(+), 29 deletions(-) diff --git a/packages/patternfly-react/less/compound-label.less b/packages/patternfly-react/less/compound-label.less index cfa210b8e5b..388aa117662 100644 --- a/packages/patternfly-react/less/compound-label.less +++ b/packages/patternfly-react/less/compound-label.less @@ -1,11 +1,9 @@ -@import 'patternfly/variables'; - -.pf-remove-button { +.compound-label-pf.compound-label-pf-text-color.pf-remove-button { color: $color-pf-white; vertical-align: middle; } -.tag { +.compound-label-pf { font-size: 0.8em; display: table-cell !important; vertical-align: middle; @@ -15,13 +13,16 @@ } } -.tagColor { +.compound-label-pf-text-color { color: $color-pf-white; + .pf-remove-button { + vertical-align: middle; + } } .category.list-inline { background-color: $color-pf-blue-500; - padding: 3px 10px 3px 15px !important; + padding: 3px 10px 3px 15px; color: $color-pf-white; margin-left: 5px; margin-right: 10px; @@ -38,5 +39,4 @@ .category-label { padding-right: 15px; - max-width: 50px; } diff --git a/packages/patternfly-react/sass/patternfly-react/_compound-label.scss b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss index cc8a165481c..53df289c13a 100644 --- a/packages/patternfly-react/sass/patternfly-react/_compound-label.scss +++ b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss @@ -1,11 +1,4 @@ -@import 'patternfly/variables'; - -.pf-remove-button { - color: $color-pf-white; - vertical-align: middle; -} - -.tag { +.compound-label-pf { font-size: 0.8em; display: table-cell !important; vertical-align: middle; @@ -15,14 +8,17 @@ } } -.tagColor { +.compound-label-pf-text-color { color: $color-pf-white; - max-width: 150px; + + .pf-remove-button { + vertical-align: middle; + } } .category.list-inline { background-color: $color-pf-blue-500; - padding: 3px 10px 3px 15px !important; + padding: 3px 10px 3px 15px; color: $color-pf-white; margin-left: 5px; margin-right: 10px; @@ -39,5 +35,4 @@ .category-label { padding-right: 15px; - max-width: 200px; } diff --git a/packages/patternfly-react/src/components/Label/CompoundLabel.js b/packages/patternfly-react/src/components/Label/CompoundLabel.js index 2a6ec76fc8b..b3f677f9cd7 100644 --- a/packages/patternfly-react/src/components/Label/CompoundLabel.js +++ b/packages/patternfly-react/src/components/Label/CompoundLabel.js @@ -17,12 +17,12 @@ class CompoundLabel extends React.Component { render() { const values = [...this.props.values]; - if (values.length === 0) return
    ; + if (values.length === 0) return null; const categoryTooltip = ( {this.props.category.label} ); return ( -
      +
        {this.props.categoryTruncate(this.props.category.label)} @@ -37,25 +37,33 @@ class CompoundLabel extends React.Component { } CompoundLabel.propTypes = { + /** Category, the key part in key:values pair */ category: PropTypes.shape({ id: PropTypes.any.isRequired, label: PropTypes.string.isRequired }).isRequired, + /** Values, the values part in key:values pair */ values: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.any.isRequired, label: PropTypes.string.isRequired }).isRequired ).isRequired, + /** Callback when remove button is clicked */ onDeleteClick: PropTypes.func.isRequired, + /** Truncate function used for category label */ categoryTruncate: PropTypes.func, - valueTruncate: PropTypes.func + /** Truncate function used for value label */ + valueTruncate: PropTypes.func, + /** Used for asign additional css classes */ + className: PropTypes.string }; CompoundLabel.defaultProps = { categoryTruncate: str => str.length > 18 ? `${str.substring(0, 18)}...` : str, - valueTruncate: str => (str.length > 18 ? `${str.substring(0, 18)}...` : str) + valueTruncate: str => (str.length > 18 ? `${str.substring(0, 18)}...` : str), + className: '' }; export default CompoundLabel; diff --git a/packages/patternfly-react/src/components/Label/Label.stories.js b/packages/patternfly-react/src/components/Label/Label.stories.js index 2c93aabf5e6..ef7857238ce 100644 --- a/packages/patternfly-react/src/components/Label/Label.stories.js +++ b/packages/patternfly-react/src/components/Label/Label.stories.js @@ -41,7 +41,7 @@ stories.add( stories.add( 'Label with Remove', - withInfo()(() => , { + withInfo({ source: false, propTables: [DisposableLabel, RemoveButton], propTablesExclude: [MockLabelRemove], @@ -51,12 +51,12 @@ stories.add( 
        {mockLabelRemoveSource}
        ) - }) + })(() => ) ); stories.add( 'Compound Label', - withInfo()(() => , { + withInfo({ source: false, propTables: [CompoundLabel], propTablesExclude: [MockCompoundLabel], @@ -66,5 +66,5 @@ stories.add( 
        {mockCompoundLabelSource}
    ) - }) + })(() => ) ); diff --git a/packages/patternfly-react/src/components/Label/LabelWithTooltip.js b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js index 520328a6e7f..73abed3cdfc 100644 --- a/packages/patternfly-react/src/components/Label/LabelWithTooltip.js +++ b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js @@ -7,13 +7,13 @@ import { Tooltip } from '../Tooltip'; const tooltip = text => {text}; const LabelWithTooltip = ({ onDeleteClick, category, value, truncate }) => ( -
  • +
  • From f1f830c34e200a9f8e7cafcc17d236e0cd60f316 Mon Sep 17 00:00:00 2001 From: PanSpagetka Date: Tue, 10 Jul 2018 13:07:28 +0200 Subject: [PATCH 03/10] Update snapshots --- .../components/Label/__snapshots__/CompoundLabel.test.js.snap | 2 +- .../Label/__snapshots__/LabelWithTooltip.test.js.snap | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap index 7fd84a9eee2..0aba724125a 100644 --- a/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap +++ b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap @@ -2,7 +2,7 @@ exports[`snapshot test 1`] = `
    • ) - })(() => ) + })(() => { + const story = ; + return inlineTemplate({ + title: 'Label with Remove', + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#labels`, + story, + reactBootstrapDocumentationLink: `${ + DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + }label/` + }); + }) ); stories.add( @@ -66,5 +81,22 @@ stories.add( 
    {mockCompoundLabelSource}
    ) - })(() => ) + })(() => { + const story = ; + return inlineTemplate({ + title: 'Compound Label', + documentationLink: `${DOCUMENTATION_URL.PATTERNFLY_ORG_WIDGETS}#labels`, + story, + reactBootstrapDocumentationLink: `${ + DOCUMENTATION_URL.REACT_BOOTSTRAP_COMPONENT + }label/`, + description: ( +
    + Compound label helps to visualize key/value or key/n:value component. + Delete - Clicking on “X” deletes the compound label. Tooltip - When a + compound label is truncated, we use labels to show the text. +
    + ) + }); + }) ); From 63835264b01b7fd0f40d3bbc2c69fdfc6d3ec913 Mon Sep 17 00:00:00 2001 From: PanSpagetka Date: Thu, 2 Aug 2018 11:55:56 +0200 Subject: [PATCH 05/10] Fix markup, line wrapping, allow className to be passed --- .../patternfly-react/less/compound-label.less | 39 ++++++------- .../patternfly-react/_compound-label.scss | 38 ++++++------- .../src/components/Label/CompoundLabel.js | 30 +++++----- .../src/components/Label/LabelWithTooltip.js | 23 ++++++-- .../Label/__mocks__/mockCompoundLabel.js | 18 +++--- .../__snapshots__/CompoundLabel.test.js.snap | 56 +++++++++++-------- .../LabelWithTooltip.test.js.snap | 6 +- 7 files changed, 115 insertions(+), 95 deletions(-) diff --git a/packages/patternfly-react/less/compound-label.less b/packages/patternfly-react/less/compound-label.less index 388aa117662..1c6061a47f9 100644 --- a/packages/patternfly-react/less/compound-label.less +++ b/packages/patternfly-react/less/compound-label.less @@ -1,25 +1,3 @@ -.compound-label-pf.compound-label-pf-text-color.pf-remove-button { - color: $color-pf-white; - vertical-align: middle; -} - -.compound-label-pf { - font-size: 0.8em; - display: table-cell !important; - vertical-align: middle; - - span { - background-color: $color-pf-blue-400; - } -} - -.compound-label-pf-text-color { - color: $color-pf-white; - .pf-remove-button { - vertical-align: middle; - } -} - .category.list-inline { background-color: $color-pf-blue-500; padding: 3px 10px 3px 15px; @@ -29,11 +7,26 @@ margin-bottom: 5px; font-size: 14px; line-height: 24px; - display: table; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; float: left; + li.value { + font-size: 0.8em; + display: table-cell; + vertical-align: middle; + span { + background-color: $color-pf-blue-400; + } + } li a span { color: $color-pf-white; + .pf-remove-button { + color: $color-pf-white; + vertical-align: middle; + } } } diff --git a/packages/patternfly-react/sass/patternfly-react/_compound-label.scss b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss index 53df289c13a..5df4a83ae7c 100644 --- a/packages/patternfly-react/sass/patternfly-react/_compound-label.scss +++ b/packages/patternfly-react/sass/patternfly-react/_compound-label.scss @@ -1,21 +1,3 @@ -.compound-label-pf { - font-size: 0.8em; - display: table-cell !important; - vertical-align: middle; - - span { - background-color: $color-pf-blue-400; - } -} - -.compound-label-pf-text-color { - color: $color-pf-white; - - .pf-remove-button { - vertical-align: middle; - } -} - .category.list-inline { background-color: $color-pf-blue-500; padding: 3px 10px 3px 15px; @@ -25,11 +7,29 @@ margin-bottom: 5px; font-size: 14px; line-height: 24px; - display: table; + display: -ms-flexbox; + display: flex; + -ms-flex-wrap: wrap; + flex-wrap: wrap; float: left; + li.value { + font-size: 0.8em; + display: table-cell; + vertical-align: middle; + + span { + background-color: $color-pf-blue-400; + } + } + li a span { color: $color-pf-white; + + .pf-remove-button { + color: $color-pf-white; + vertical-align: middle; + } } } diff --git a/packages/patternfly-react/src/components/Label/CompoundLabel.js b/packages/patternfly-react/src/components/Label/CompoundLabel.js index b3f677f9cd7..af730e8cb76 100644 --- a/packages/patternfly-react/src/components/Label/CompoundLabel.js +++ b/packages/patternfly-react/src/components/Label/CompoundLabel.js @@ -12,22 +12,26 @@ class CompoundLabel extends React.Component { value={value} onDeleteClick={this.props.onDeleteClick} truncate={this.props.valueTruncate} + bsStyle={this.props.bsStyle} + className={this.props.valueClassName} /> ); render() { const values = [...this.props.values]; - if (values.length === 0) return null; + if (values.length === 0) return
    ; const categoryTooltip = ( {this.props.category.label} ); return (
      - -
      - {this.props.categoryTruncate(this.props.category.label)} -
      -       +
    • + +
      + {this.props.categoryTruncate(this.props.category.label)} +
      +       +
      • {values .sort((a, b) => (a.label < b.label ? -1 : 1)) .map(tagValue => this.generateTag(tagValue))} @@ -37,33 +41,31 @@ class CompoundLabel extends React.Component { } CompoundLabel.propTypes = { - /** Category, the key part in key:values pair */ category: PropTypes.shape({ id: PropTypes.any.isRequired, label: PropTypes.string.isRequired }).isRequired, - /** Values, the values part in key:values pair */ values: PropTypes.arrayOf( PropTypes.shape({ id: PropTypes.any.isRequired, label: PropTypes.string.isRequired }).isRequired ).isRequired, - /** Callback when remove button is clicked */ onDeleteClick: PropTypes.func.isRequired, - /** Truncate function used for category label */ categoryTruncate: PropTypes.func, - /** Truncate function used for value label */ valueTruncate: PropTypes.func, - /** Used for asign additional css classes */ - className: PropTypes.string + className: PropTypes.string, + bsStyle: PropTypes.string, + valueClassName: PropTypes.string }; CompoundLabel.defaultProps = { categoryTruncate: str => str.length > 18 ? `${str.substring(0, 18)}...` : str, valueTruncate: str => (str.length > 18 ? `${str.substring(0, 18)}...` : str), - className: '' + className: '', + bsStyle: 'primary', + valueClassName: '' }; export default CompoundLabel; diff --git a/packages/patternfly-react/src/components/Label/LabelWithTooltip.js b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js index 73abed3cdfc..29537f4d78a 100644 --- a/packages/patternfly-react/src/components/Label/LabelWithTooltip.js +++ b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js @@ -6,14 +6,21 @@ import { Tooltip } from '../Tooltip'; const tooltip = text => {text}; -const LabelWithTooltip = ({ onDeleteClick, category, value, truncate }) => ( -
    • +const LabelWithTooltip = ({ + onDeleteClick, + category, + value, + truncate, + bsStyle, + className +}) => ( +
    • @@ -31,7 +38,13 @@ LabelWithTooltip.propTypes = { id: PropTypes.any.isRequired, label: PropTypes.string.isRequired }).isRequired, - truncate: PropTypes.func.isRequired + truncate: PropTypes.func.isRequired, + className: PropTypes.string, + bsStyle: PropTypes.string }; +LabelWithTooltip.defaultProps = { + className: '', + bsStyle: 'primary' +}; export default LabelWithTooltip; diff --git a/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js b/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js index 79a3b34e0ad..bff957cb70c 100644 --- a/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js +++ b/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js @@ -7,11 +7,12 @@ export class MockCompoundLabel extends React.Component { this.state = { tag: { id: 1, - label: 'Food - category with very long description', + label: 'Most delicious food you will ever eat', values: [ - { id: 11, label: 'Cake' }, - { id: 12, label: 'Bloody Steak from the famous Purple Cow' }, - { id: 13, label: 'Pineapple Pizza' } + { id: 11, label: 'Strawberries harvested under full moon light' }, + { id: 12, label: 'Argentinian beef steak from hand massaged cow' }, + { id: 13, label: 'Enchanted cookies baked by insane chef' }, + { id: 14, label: 'Dumplings' } ] } }; @@ -45,11 +46,12 @@ export class MockCompoundLabel extends React.Component { this.state = { tag: { id: 1, - label: 'Food - category with very long description', + label: 'Most delicious food you will ever eat', values: [ - { id: 11, label: 'Cake' }, - { id: 12, label: 'Bloody Steak from the famous Purple Cow' }, - { id: 13, label: 'Pineapple Pizza' } + { id: 11, label: 'Strawberries harvested under full moon light' }, + { id: 12, label: 'Argentinian beef steak from hand massaged cow' }, + { id: 13, label: 'Enchanted cookies baked by insane chef' }, + { id: 14, label: 'Dumplings' } ] } }; diff --git a/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap index 0aba724125a..002ccffc51c 100644 --- a/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap +++ b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap @@ -4,38 +4,44 @@ exports[`snapshot test 1`] = `
        - - Food - category with very long description - - } - placement="bottom" - trigger={ - Array [ - "hover", - "focus", - ] - } +
      • -
        + Food - category with very long description + + } + placement="bottom" + trigger={ + Array [ + "hover", + "focus", + ] + } > - Food - category wi... -
        - +
        + Food - category wi... +
        + +