feat(chipGroup): add heading level prop to toolbar chip group label (#…

…2278) Signed-off-by: Boaz Shuster <[email protected]>
patternfly · Jun 27, 2019 · d87ce91 · d87ce91
1 parent fc9916c
commit d87ce91
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 32 deletions.
diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.tsx b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroup.tsx
@@ -4,6 +4,8 @@ import { css } from '@patternfly/react-styles';
 import { Chip } from './Chip';
 import { fillTemplate } from '../../helpers';
 
+export const ChipGroupContext = React.createContext('');
+
 export interface ChipGroupProps extends React.HTMLProps<HTMLDivElement> {
   /** Content rendered inside the chip text */
   children?: React.ReactNode;
@@ -15,6 +17,8 @@ export interface ChipGroupProps extends React.HTMLProps<HTMLDivElement> {
   collapsedText?: string;
   /** Flag for grouping with a toolbar & category name */
   withToolbar?: boolean;
+  /** Set heading level to the chip item label */
+  headingLevel?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 }
 
 interface ChipGroupState {
@@ -44,7 +48,12 @@ export class ChipGroup extends React.Component<ChipGroupProps, ChipGroupState>{
 
   renderToolbarGroup() {
     const { isOpen } = this.state;
-    return <InnerChipGroup {...this.props} isOpen={isOpen} onToggleCollapse={this.toggleCollapse} />;
+    const { headingLevel = 'h4' } = this.props;
+    return (
+      <ChipGroupContext.Provider value={headingLevel}>
+        <InnerChipGroup {...this.props} isOpen={isOpen} onToggleCollapse={this.toggleCollapse} />
+      </ChipGroupContext.Provider>
+    );
   }
 
   renderChipGroup() {

diff --git a/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroupToolbarItem.tsx b/packages/patternfly-4/react-core/src/components/ChipGroup/ChipGroupToolbarItem.tsx
@@ -1,14 +1,15 @@
 import * as React from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/ChipGroup/chip-group';
+import {ChipGroupContext} from './ChipGroup';
 
 export interface ChipGroupToolbarItemProps extends React.HTMLProps<HTMLUListElement> {
   /**  Category name text */  
   categoryName?: string;
   /** Content rendered inside the chip text */
-  children: React.ReactNode; 
+  children: React.ReactNode;
   /** Additional classes added to the chip item */
-  className?: string;   
+  className?: string;
 }
 
 export const ChipGroupToolbarItem: React.FunctionComponent<ChipGroupToolbarItemProps> = ({
@@ -18,14 +19,20 @@ export const ChipGroupToolbarItem: React.FunctionComponent<ChipGroupToolbarItemP
   ...props
 }: ChipGroupToolbarItemProps) => {
     if (React.Children.count(children)) {
-      return(
-        <ul className={css(styles.chipGroup, styles.modifiers.toolbar)} {...props}>
-          <li>
-            <h4 className={css(styles.chipGroupLabel)}>{categoryName}</h4>
-            <ul className={css(styles.chipGroup)}>{children}</ul>
-          </li>
-        </ul>
+      return (
+        <ChipGroupContext.Consumer>
+          {(HeadingLevel: any) => {
+            return (
+              <ul className={css(styles.chipGroup, styles.modifiers.toolbar)} {...props}>
+                <li>
+                  <HeadingLevel className={css(styles.chipGroupLabel)}>{categoryName}</HeadingLevel>
+                  <ul className={css(styles.chipGroup)}>{children}</ul>
+                </li>
+              </ul>
+            );
+          }}
+        </ChipGroupContext.Consumer>
       );
     }
     return null;
-  }; 
+  }; 
diff --git a/...es/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.tsx.snap b/...es/patternfly-4/react-core/src/components/ChipGroup/__snapshots__/ChipGroup.test.tsx.snap
@@ -28,26 +28,30 @@ exports[`ChipGroup chip group default 1`] = `
 `;
 
 exports[`ChipGroup chip group with toolbar 1`] = `
-<InnerChipGroup
-  className=""
-  collapsedText="\${remaining} more"
-  expandedText="Show Less"
-  isOpen={false}
-  onToggleCollapse={[Function]}
-  withToolbar={true}
+<ContextProvider
+  value="h4"
 >
-  <Component>
-    <Chip
-      className=""
-      closeBtnAriaLabel="close"
-      component="div"
-      isOverflowChip={false}
-      isReadOnly={false}
-      onClick={[Function]}
-      tooltipPosition="top"
-    >
-      1.1
-    </Chip>
-  </Component>
-</InnerChipGroup>
+  <InnerChipGroup
+    className=""
+    collapsedText="\${remaining} more"
+    expandedText="Show Less"
+    isOpen={false}
+    onToggleCollapse={[Function]}
+    withToolbar={true}
+  >
+    <Component>
+      <Chip
+        className=""
+        closeBtnAriaLabel="close"
+        component="div"
+        isOverflowChip={false}
+        isReadOnly={false}
+        onClick={[Function]}
+        tooltipPosition="top"
+      >
+        1.1
+      </Chip>
+    </Component>
+  </InnerChipGroup>
+</ContextProvider>
 `;