feat(Label): refactor for updated design and features

packages/react-core/src/components/Label/Label.tsx

@@ -1,16 +1,76 @@
 import * as React from 'react';
 import styles from '@patternfly/react-styles/css/components/Label/label';
+import { Button } from '../Button';
 import { css } from '@patternfly/react-styles';
+import TimesIcon from '@patternfly/react-icons/dist/js/icons/times-icon';
 
 export interface LabelProps extends React.HTMLProps<HTMLSpanElement> {
   /** Content rendered inside the label. */
   children: React.ReactNode;
   /** Additional classes added to the label. */
   className?: string;
+  /** Color of the label. */
+  color?: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey';
+  /** Variant of the label. */
+  variant?: 'outline' | 'filled';
+  /** Icon added to the left of the label text. */
+  icon?: React.ReactNode;
+  /** Close click callback for removable labels. If present, label will have a close button. */
+  onClose?: (event: React.MouseEvent) => void;
+  /** Node for custom close button. */
+  closeBtn?: React.ReactNode;
+  /** Additional properties for the default close button. */
+  closeBtnProps?: any;
+  /** Href for a label that is a link. If present, the label will change to an anchor element. */
+  href?: string;
 }
 
-export const Label: React.FunctionComponent<LabelProps> = ({ children, className = '', ...props }: LabelProps) => (
-  <span {...props} className={css(styles.label, className)}>
-    {children}
-  </span>
-);
+const colorStyles = {
+  blue: styles.modifiers.blue,
+  cyan: styles.modifiers.cyan,
+  green: styles.modifiers.green,
+  orange: styles.modifiers.orange,
+  purple: styles.modifiers.purple,
+  red: styles.modifiers.red,
+  grey: ''
+};
+
+export const Label: React.FunctionComponent<LabelProps> = ({
+  children,
+  className = '',
+  color = 'grey',
+  variant = 'filled',
+  icon,
+  onClose,
+  closeBtn,
+  closeBtnProps,
+  href,
+  ...props
+}: LabelProps) => {
+  const Component = href ? 'a' : 'span';
+  const button = closeBtn ? (
+    closeBtn
+  ) : (
+    <Button
+      type="button"
+      variant="plain"
+      onClick={onClose}
+      {...{ 'aria-label': 'label-close-button', ...closeBtnProps }}
+    >
+      <TimesIcon />
+    </Button>
+  );
+
+  return (
+    <span
+      {...props}
+      className={css(styles.label, colorStyles[color], variant === 'outline' && styles.modifiers.outline, className)}
+    >
+      <Component className={css(styles.labelContent)} {...(href && { href })}>
+        {icon && <span className={css(styles.labelIcon)}>{icon}</span>}
+        {children}
+      </Component>
+      {onClose && button}
+    </span>
+  );
+};

packages/react-core/src/components/Label/__tests__/Generated/__snapshots__/Label.test.tsx.snap

@@ -5,8 +5,12 @@ exports[`Label should match snapshot (auto-generated) 1`] = `
   className="pf-c-label ''"
   isCompact={false}
 >
-  <div>
-    ReactNode
-  </div>
+  <span
+    className="pf-c-label__content"
+  >
+    <div>
+      ReactNode
+    </div>
+  </span>
 </span>
 `;

packages/react-core/src/components/Label/__tests__/Label.test.tsx

@@ -5,13 +5,46 @@ import { Label } from '../Label';
 test('label', () => {
   const view = shallow(<Label>Something</Label>);
   expect(view).toMatchSnapshot();
+  const outline = shallow(<Label variant="outline">Something</Label>);
+  expect(outline).toMatchSnapshot();
 });
 
-test('compact label', () => {
-  const view = shallow(<Label isCompact>Something</Label>);
+test('label with href', () => {
+  const view = shallow(<Label href="#">Something</Label>);
   expect(view).toMatchSnapshot();
+  const outline = shallow(
+    <Label href="#" variant="outline">
+      Something
+    </Label>
+  );
+  expect(outline).toMatchSnapshot();
+});
+
+test('label with close button', () => {
+  const view = shallow(<Label onClose={jest.fn()}>Something</Label>);
+  expect(view).toMatchSnapshot();
+  const outline = shallow(
+    <Label onClose={jest.fn()} variant="outline">
+      Something
+    </Label>
+  );
+  expect(outline).toMatchSnapshot();
 });
 
+['blue', 'cyan', 'green', 'orange', 'purple', 'red', 'grey'].forEach(
+  (color: 'blue' | 'cyan' | 'green' | 'orange' | 'purple' | 'red' | 'grey') =>
+    test(`label with ${color} color`, () => {
+      const view = shallow(<Label color={color}>Something</Label>);
+      expect(view).toMatchSnapshot();
+      const outline = shallow(
+        <Label color={color} variant="outline">
+          Something
+        </Label>
+      );
+      expect(outline).toMatchSnapshot();
+    })
+);
+
 test('label with additional class name', () => {
   const view = shallow(<Label className="klass1">Something</Label>);
   expect(view).toMatchSnapshot();