+ 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.
+
+ )
+ });
})
);
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..3b7f7939238
--- /dev/null
+++ b/packages/patternfly-react/src/components/Label/LabelWithTooltip.js
@@ -0,0 +1,54 @@
+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, bsStyle, className, overlayPlacement }) => (
+
+
+
+
+
+);
+
+LabelWithTooltip.propTypes = {
+ /** Fuction callback called when X button is clicked */
+ onDeleteClick: PropTypes.func.isRequired,
+ /** Category in CATEGORY: value(s) pair */
+ /** Parent of label, it does not get displayed in this component */
+ category: PropTypes.shape({
+ id: PropTypes.any.isRequired,
+ label: PropTypes.string.isRequired
+ }).isRequired,
+ /** Individual Value in Category:VALUE(s) pair */
+ /** id uniquily identify value within its category, label is text which is displayed */
+ value: PropTypes.PropTypes.shape({
+ id: PropTypes.any.isRequired,
+ label: PropTypes.string.isRequired
+ }).isRequired,
+ /** Function used to truncate value label */
+ truncate: PropTypes.func.isRequired,
+ /** Name of CSS class(es) which are set to label */
+ className: PropTypes.string,
+ /** Bootstrap style which is set to label */
+ bsStyle: PropTypes.string,
+ /** Placement of the overlay */
+ overlayPlacement: PropTypes.oneOf(['top', 'right', 'bottom', 'left'])
+};
+
+LabelWithTooltip.defaultProps = {
+ className: '',
+ bsStyle: 'primary',
+ overlayPlacement: 'bottom'
+};
+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..bff957cb70c
--- /dev/null
+++ b/packages/patternfly-react/src/components/Label/__mocks__/mockCompoundLabel.js
@@ -0,0 +1,77 @@
+import React from 'react';
+import { CompoundLabel } from '../index';
+
+export class MockCompoundLabel extends React.Component {
+ constructor(props) {
+ super(props);
+ this.state = {
+ tag: {
+ id: 1,
+ label: 'Most delicious food you will ever eat',
+ values: [
+ { 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' }
+ ]
+ }
+ };
+ }
+
+ 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: 'Most delicious food you will ever eat',
+ values: [
+ { 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' }
+ ]
+ }
+ };
+ }
+
+ 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..7c7bf211e35
--- /dev/null
+++ b/packages/patternfly-react/src/components/Label/__snapshots__/CompoundLabel.test.js.snap
@@ -0,0 +1,97 @@
+// 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..eecfe51e553
--- /dev/null
+++ b/packages/patternfly-react/src/components/Label/__snapshots__/LabelWithTooltip.test.js.snap
@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`snapshot test 1`] = `
+