fix(BulkSelect): Don't override passed in children (#2000)

RedHatInsights · May 1, 2024 · d4da8f0 · d4da8f0
1 parent 4cd565c
commit d4da8f0
Show file tree

Hide file tree

Showing 2 changed files with 43 additions and 21 deletions.
diff --git a/packages/components/src/BulkSelect/BulkSelect.test.js b/packages/components/src/BulkSelect/BulkSelect.test.js
@@ -162,5 +162,23 @@ describe('BulkSelect', () => {
       );
       expect(screen.getByRole('button', { expanded: false })).toBeDisabled();
     });
+
+    it('should not override children passed in via toggleProps', () => {
+      render(
+        <BulkSelect
+          items={[
+            {
+              title: 'Select all',
+              onClick: jest.fn(),
+            },
+          ]}
+          toggleProps={{
+            children: ['10 selected'],
+          }}
+        />
+      );
+
+      expect(screen.getByRole('button', { name: '10 selected' })).toBeInTheDocument();
+    });
   });
 });
diff --git a/packages/components/src/BulkSelect/BulkSelect.tsx b/packages/components/src/BulkSelect/BulkSelect.tsx
@@ -79,27 +79,31 @@ const BulkSelect: React.FunctionComponent<BulkSelectProps> = ({
               onClick={() => setIsOpen((prev) => !prev)}
               data-ouia-component-id={dropdownOuiaId ?? 'BulkSelect'}
             >
-              <Fragment key="split-checkbox">
-                {hasError ? (
-                  <MenuToggleCheckbox
-                    id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
-                    aria-label="Select all"
-                    onChange={onSelect}
-                    isChecked={checked}
-                    ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
-                  />
-                ) : (
-                  <MenuToggleCheckbox
-                    id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
-                    aria-label="Select all"
-                    onChange={onSelect}
-                    isChecked={checked}
-                    ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
-                  >
-                    {count ? `${count} selected` : ''}
-                  </MenuToggleCheckbox>
-                )}
-              </Fragment>
+              {toggleProps?.children ? (
+                toggleProps?.children
+              ) : (
+                <Fragment key="split-checkbox">
+                  {hasError ? (
+                    <MenuToggleCheckbox
+                      id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
+                      aria-label="Select all"
+                      onChange={onSelect}
+                      isChecked={checked}
+                      ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
+                    />
+                  ) : (
+                    <MenuToggleCheckbox
+                      id={id ? `${id}-toggle-checkbox` : 'toggle-checkbox'}
+                      aria-label="Select all"
+                      onChange={onSelect}
+                      isChecked={checked}
+                      ouiaId={checkboxOuiaId ?? 'BulkSelectCheckbox'}
+                    >
+                      {count ? `${count} selected` : ''}
+                    </MenuToggleCheckbox>
+                  )}
+                </Fragment>
+              )}
             </MenuToggle>
           )}
           isOpen={isOpen}