fix(chip group): add prop to allow chip group to be initially expanded

packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.tsx

@@ -11,6 +11,8 @@ export interface ChipGroupProps extends React.HTMLProps<HTMLDivElement> {
   children?: React.ReactNode;
   /** Additional classes added to the chip item */
   className?: string; 
+  /** Flag for having the chip group default to expanded */
+  defaultIsOpen?: boolean;
   /** Customizable "Show Less" text string */
   expandedText?: string;
   /** Customizeable template string. Use variable "${remaining}" for the overflow chip count. */
@@ -29,15 +31,16 @@ export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState>{
   constructor(props: ChipGroupProps) {
     super(props); 
     this.state = {
-      isOpen: false
+      isOpen: this.props.defaultIsOpen
     }
   }
 
   static defaultProps = {
     className: '',
     expandedText: 'Show Less',
     collapsedText: '${remaining} more',
-    withToolbar: false
+    withToolbar: false,
+    defaultIsOpen: false
   }
 
   toggleCollapse = () => {

packages/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.tsx.snap

@@ -7,6 +7,7 @@ exports[`ChipGroup chip group default 1`] = `
   <InnerChipGroup
     className=""
     collapsedText="\${remaining} more"
+    defaultIsOpen={false}
     expandedText="Show Less"
     isOpen={false}
     onToggleCollapse={[Function]}
@@ -34,6 +35,7 @@ exports[`ChipGroup chip group with toolbar 1`] = `
   <InnerChipGroup
     className=""
     collapsedText="\${remaining} more"
+    defaultIsOpen={false}
     expandedText="Show Less"
     isOpen={false}
     onToggleCollapse={[Function]}

packages/patternfly-4/react-core/src/components/Select/__snapshots__/Select.test.tsx.snap

@@ -4448,6 +4448,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
           <ChipGroup
             className=""
             collapsedText="\${remaining} more"
+            defaultIsOpen={false}
             expandedText="Show Less"
             withToolbar={false}
           >
@@ -4457,6 +4458,7 @@ exports[`typeahead multi select renders selected successfully 1`] = `
               <InnerChipGroup
                 className=""
                 collapsedText="\${remaining} more"
+                defaultIsOpen={false}
                 expandedText="Show Less"
                 isOpen={false}
                 onToggleCollapse={[Function]}

packages/patternfly-4/react-integration/cypress/integration/chipgroup.spec.ts

@@ -9,10 +9,14 @@ describe('Chip Group Demo Test', () => {
     cy.get('.pf-c-chip__text').first().contains('Lemons'); 
   });
 
+  it('Verify chip is closed on default', () => {
+    cy.get('.pf-c-chip__text').eq(1).should('not.contain', 'Limes');
+  });
+
   it('Verify chip has badge', () => {
     cy.get('span').children('.pf-c-badge').should('not.be.undefined');
     cy.get('span').children('.pf-c-badge').should('not.equal', null);
-  })
+  });
 
   it('Verify more button works', () => {
     cy.get('.pf-m-overflow').children('button').click();

packages/patternfly-4/react-integration/cypress/integration/chipgroupdefaultisopen.spec.ts

@@ -0,0 +1,36 @@
+describe('Chip Group Demo Test', () => {
+    it('Navigate to demo section', () => {
+      cy.visit('http://localhost:3000/');
+      cy.get('#chipgroup-default-is-open-demo-nav-item-link').click(); 
+      cy.url().should('eq', 'http://localhost:3000/chipgroup-default-is-open-demo-nav-link');
+    });
+
+    it('Verify chip default text', () => {
+      cy.get('.pf-c-chip__text').first().contains('Lemons'); 
+    });
+
+    it('Verify chip is open on default', () => {
+      cy.get('.pf-c-chip__text').eq(1).contains('Limes');
+    });
+
+    it('Verify chip has badge', () => {
+      cy.get('span').children('.pf-c-badge').should('not.be.undefined');
+      cy.get('span').children('.pf-c-badge').should('not.equal', null);
+    });
+
+    it('Verify show less button works', () => {
+      cy.get('.pf-m-overflow').children('button').click();
+      cy.get('.pf-c-chip__text').contains('more')
+    });
+
+    it('Verify more button works', () => {
+        cy.get('.pf-m-overflow').children('button').click();
+        cy.get('.pf-c-chip__text').contains('Show Less')
+      });
+
+    it('Verify delete button on first chip', () => {
+      const chip = cy.get('.pf-c-chip').children('#pf-random-id-0')
+      cy.get('#remove_pf-random-id-0').click();
+      chip.should('not.exist')
+    });
+  });

packages/patternfly-4/react-integration/demo-app-ts/src/Demos.ts

@@ -113,7 +113,12 @@ export const Demos: DemoInterface[] = [
   {
     id: 'chipgroup-demo',
     name: 'ChipGroup Demo',
-    componentType: Examples.BadgeChip
+    componentType: Examples.ChipGroupDemo
+  },
+  {
+    id: 'chipgroup-default-is-open-demo',
+    name: 'ChipGroup Default is Open Demo',
+    componentType: Examples.ChipGroupDefaultIsOpenDemo
   },
   {
     id: 'clipboard-copy-demo',

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDefaultIsOpenDemo.tsx

@@ -0,0 +1,59 @@
+import { Badge, Chip, ChipGroup } from '@patternfly/react-core';
+import React, { Component } from 'react';
+
+interface BadgeChipState {
+  badgeChipArray: Array<
+    {
+      name: string,
+      isRead: boolean,
+      count: number
+    }>
+}
+
+export class ChipGroupDefaultIsOpenDemo extends Component<{}, BadgeChipState> {
+  deleteItem: (id: any) => void;
+  constructor(props) {
+    super(props);
+    this.state = {
+      badgeChipArray: [
+        {
+          name: 'Lemons',
+          isRead: true,
+          count: 10
+        },
+        {
+          name: 'Limes',
+          isRead: true,
+          count: 8
+        }
+      ]
+    };
+    this.deleteItem = (id: any) => {
+      const copyOfbadgeChipArray = this.state.badgeChipArray;
+      const index = copyOfbadgeChipArray.findIndex(chipObj => chipObj.name === id);
+
+      if (index !== -1) {
+        copyOfbadgeChipArray.splice(index, 1);
+        this.setState({ badgeChipArray: copyOfbadgeChipArray });
+      }
+    };
+  }
+
+  componentDidMount() {
+    window.scrollTo(0, 0)
+  }
+
+  render() {
+    const { badgeChipArray } = this.state;
+    return (
+      <ChipGroup defaultIsOpen>
+        {badgeChipArray.map(chip => (
+          <Chip key={chip.name} onClick={() => this.deleteItem(chip.name)}>
+            {chip.name}
+            <Badge isRead={chip.isRead}>{chip.count}</Badge>
+          </Chip>
+        ))}
+      </ChipGroup>
+    );
+  }
+}

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/ChipGroupDemo/ChipGroupDemo.tsx

@@ -10,7 +10,7 @@ interface BadgeChipState {
     }>
 }
 
-export class BadgeChip extends Component<{}, BadgeChipState> {
+export class ChipGroupDemo extends Component<{}, BadgeChipState> {
   deleteItem: (id: any) => void;
   constructor(props) {
     super(props);

packages/patternfly-4/react-integration/demo-app-ts/src/components/demos/index.ts

@@ -18,6 +18,7 @@ export * from './BullseyeDemo/BullseyeDemo';
 export * from './ButtonDemo/ButtonDemo';
 export * from './CardDemo/CardDemo';
 export * from './CheckboxDemo/CheckboxDemo';
+export * from './ChipGroupDemo/ChipGroupDefaultIsOpenDemo';
 export * from './ChipGroupDemo/ChipGroupDemo';
 export * from './ContextSelectorDemo/ContextSelectorDemo';
 export * from './ClipboardCopyDemo/ClipboardCopyDemo';