fix(Toolbar): applied chip container class only if it's not hidden (#…

…9398)
patternfly · Jul 24, 2023 · 87f5f24 · 87f5f24
1 parent b70bc32
commit 87f5f24
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 5 deletions.
diff --git a/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx b/packages/react-core/src/components/Toolbar/ToolbarChipGroupContent.tsx
@@ -68,12 +68,14 @@ export class ToolbarChipGroupContent extends React.Component<ToolbarChipGroupCon
         (canUseDOM ? window.innerWidth : 1200) < globalBreakpoints[collapseListedFiltersBreakpoint];
     }
 
+    const isHidden = numberOfFilters === 0 || isExpanded;
+
     return (
       <div
         className={css(
           styles.toolbarContent,
-          !collapseListedFilters && styles.modifiers.chipContainer,
-          (numberOfFilters === 0 || isExpanded) && styles.modifiers.hidden,
+          !isHidden && !collapseListedFilters && styles.modifiers.chipContainer,
+          isHidden && styles.modifiers.hidden,
           className
         )}
         {...((numberOfFilters === 0 || isExpanded) && { hidden: true })}

diff --git a/...omponents/Toolbar/__tests__/Generated/__snapshots__/ToolbarChipGroupContent.test.tsx.snap b/...omponents/Toolbar/__tests__/Generated/__snapshots__/ToolbarChipGroupContent.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`ToolbarChipGroupContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <div
-    class="pf-v5-c-toolbar__content pf-m-chip-container pf-m-hidden string"
+    class="pf-v5-c-toolbar__content pf-m-hidden string"
     hidden=""
   >
     <div

diff --git a/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap b/packages/react-core/src/components/Toolbar/__tests__/__snapshots__/Toolbar.test.tsx.snap
@@ -44,7 +44,7 @@ exports[`Toolbar should render inset 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-toolbar__content pf-m-chip-container pf-m-hidden"
+      class="pf-v5-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div
@@ -395,7 +395,7 @@ exports[`Toolbar should render with page inset flag 1`] = `
       </div>
     </div>
     <div
-      class="pf-v5-c-toolbar__content pf-m-chip-container pf-m-hidden"
+      class="pf-v5-c-toolbar__content pf-m-hidden"
       hidden=""
     >
       <div