wip

Author: ibolton336

packages/patternfly-4/react-core/src/components/Chip/Chip.d.ts

@@ -2,15 +2,9 @@ import { SFC, HTMLProps } from 'react';
 import { Omit, OneOf } from '../../typeUtils';
 import { TooltipPosition } from '../Tooltip';
 
-export const ChipVariant = {
-  overflow: 'overflow',
-  closable: 'closable'
-};
-
-export interface ChipProps extends Omit<HTMLProps<HTMLDivElement>, 'children' > {
+export interface ChipProps extends Omit<HTMLProps<HTMLDivElement> {
   children: string;
-  isOverflowed?: boolean;
-  variant: OneOf<typeof ChipVariant, keyof typeof ChipVariant>;
+  isOverflow: boolean;
   position: OneOf<typeof TooltipPosition, keyof typeof TooltipPosition>;
 }
 

packages/patternfly-4/react-core/src/components/Chip/Chip.js

@@ -5,65 +5,81 @@ import ChipButton from './ChipButton';
 import { Tooltip, TooltipPosition } from '../Tooltip';
 import { TimesCircleIcon } from '@patternfly/react-icons';
 import styles from '@patternfly/patternfly-next/components/Chip/chip.css';
-import { getUniqueId } from '../../internal/util';
+import GenerateId from '../../internal/GenerateId/GenerateId';
 
-export const ChipVariant = {
-  overflow: 'overflow',
-  closable: 'closable'
-};
-
-const Chip = ({ variant, onClick, children, id, position, className, ...props }) => {
-  const idChip = id || getUniqueId()
-  switch (variant) {
-    case ChipVariant.overflow:
-      return (
-        <div className={css(styles.chip, styles.modifiers.overflow, className)} {...props}>
-          <ChipButton onClick={onClick} aria-label="Expand chip">
-            <span className={css(styles.chipText)}>{children}</span>
-          </ChipButton>
-        </div>
-      );
-    default:
-      const ChipComponent = (
-        <div className={css(styles.chip, className)} {...props}>
-          <span className={css(styles.chipText)} id={idChip}>
-            {children}
-          </span>
-          <ChipButton onClick={onClick} aria-label="Remove" id={`remove_${idChip}`} aria-labelledby={`remove_${idChip} ${idChip}`}>
-            <TimesCircleIcon aria-hidden="true" />
-          </ChipButton>
-        </div>
-      );
-      return children.length < 16 ? (
-        ChipComponent
-      ) : (
+class Chip extends React.Component {
+  renderOverflowChip = () => {
+    const { children, className, onClick } = this.props;
+    return (
+      <div className={css(styles.chip, styles.modifiers.overflow, className)}>
+        <ChipButton onClick={onClick} aria-label="Expand Chip">
+          <span className={css(styles.chipText)}>{children}</span>
+        </ChipButton>
+      </div>
+    );
+  }
+  renderChip = (randomId) => {
+    const { children, position, className, onClick, minTooltipChars } = this.props;
+    const ChipComponent = (
+      <div className={css(styles.chip, className)}>
+        <span className={css(styles.chipText)} id={randomId}>
+          {children}
+        </span>
+        <ChipButton onClick={onClick} aria-label="Remove" id={`remove_${randomId}`} aria-labelledby={`remove_${randomId} ${randomId}`}>
+          <TimesCircleIcon aria-hidden="true" />
+        </ChipButton>
+      </div>
+    );
+    return children.length < minTooltipChars ? (
+      ChipComponent
+    ) : (
         <Tooltip position={position} content={children}>
           {ChipComponent}
         </Tooltip>
       );
+
   }
-};
 
+  render() {
+    const {
+      isOverflow,
+    } = this.props;
+    return (
+      <GenerateId>
+        {(randomId) =>
+          (
+            <React.Fragment>
+              {isOverflow ? this.renderOverflowChip() : this.renderChip(randomId)}
+            </React.Fragment>
+          )
+        }
+      </GenerateId>
+    )
+  }
+}
 Chip.propTypes = {
   /** Content rendered inside the chip text */
   children: PropTypes.string.isRequired,
   /** ID of the chip */
   id: PropTypes.string,
   /** Additional classes added to the chip item */
   className: PropTypes.string,
-  /** Builds the chip structure according to variant */
-  variant: PropTypes.oneOf(Object.values(ChipVariant)),
+  /** Flag indicating if the chip has overflow*/
+  isOverflow: PropTypes.bool,
   /** Position of the tooltip which is displayed if text is longer */
   position: PropTypes.oneOf(Object.values(TooltipPosition)),
   /** Function that is called when clicking on the chip button */
-  onClick: PropTypes.func
+  onClick: PropTypes.func,
+  /** Min character limit before showing tooltip. */
+  minTooltipChars: PropTypes.number
 };
 
 Chip.defaultProps = {
   id: undefined,
   className: '',
   position: 'top',
-  variant: ChipVariant.closable
+  isOverflow: false,
+  minTooltipChars: 16
 };
 
 export default Chip;

packages/patternfly-4/react-core/src/components/Chip/Chip.test.js

@@ -15,7 +15,7 @@ test('ChipButton', () => {
 describe('Chip', () => {
   test('overflow', () => {
     const view = shallow(
-      <Chip className="my-chp-cls" variant="overflow">
+      <Chip className="my-chp-cls" isOverflow={true}>
         4 more
       </Chip>
     );
@@ -24,7 +24,7 @@ describe('Chip', () => {
 
   test('closable', () => {
     const view = shallow(
-      <Chip className="my-chp-cls" variant="closable" id="chip_one">
+      <Chip className="my-chp-cls" id="chip_one">
         Chip
       </Chip>
     );
@@ -34,7 +34,7 @@ describe('Chip', () => {
 
   test('closable with tooltip', () => {
     const view = shallow(
-      <Chip className="my-chp-cls" variant="closable" id="chip_one">
+      <Chip className="my-chp-cls" id="chip_one">
         12345678901234567891
       </Chip>
     );

packages/patternfly-4/react-core/src/components/Chip/examples/SimpleChip.js

@@ -33,7 +33,7 @@ class SimpleChip extends React.Component {
         )}
         <br />
         <br />
-        <Chip variant="overflow">4 more</Chip>
+        <Chip isOverflow={true}>4 more</Chip>
       </React.Fragment>
     );
   }