fix(BulkSelect): more compact layout to match design

Author: nicolethoen

package.json

@@ -86,5 +86,6 @@
     "@patternfly/react-drag-drop": "^6.0.0",
     "@patternfly/react-tokens": "^6.0.0",
     "sharp": "^0.34.0"
-  }
+  },
+  "packageManager": "[email protected]+sha512.c38cafb5c7bb273f3926d04e55e1d8c9dfa7d9c3ea1f36a4868fa028b9e5f72298f0b7f401ad5eb921749eb012eb1c3bb74bf7503df3ee43fd600d14a018266f"
 }

packages/module/src/BulkSelect/BulkSelect.tsx

@@ -122,12 +122,13 @@ export const BulkSelect: FC<BulkSelectProps> = ({
               }
               onChange={(checked) => onSelect?.(!checked || checked === null ? noneOption : allOption)}
               {...menuToggleCheckboxProps}
-            />,
-            selectedCount > 0 ? (
-              <span onClick={onToggleClick} data-ouia-component-id={`${ouiaId}-text`} key="bulk-select-text">
-                {`${selectedCount} selected`}
-              </span>
-            ) : null
+            >
+              {selectedCount > 0 ? (
+                <span data-ouia-component-id={`${ouiaId}-text`}>
+                 {`${selectedCount} selected`}
+                </span>
+              ) : null}
+            </MenuToggleCheckbox>
           ]}
         />
       )}

packages/module/src/BulkSelect/__snapshots__/BulkSelect.test.tsx.snap

@@ -9,7 +9,7 @@ exports[`BulkSelect component should render 1`] = `
         class="pf-v6-c-menu-toggle pf-m-split-button"
       >
         <label
-          class="pf-v6-c-check pf-m-standalone"
+          class="pf-v6-c-check"
         >
           <input
             aria-invalid="false"
@@ -21,12 +21,18 @@ exports[`BulkSelect component should render 1`] = `
             name="BulkSelect-checkbox"
             type="checkbox"
           />
+          <span
+            aria-hidden="true"
+            class="pf-v6-c-check__label"
+            id="BulkSelect-checkbox"
+          >
+            <span
+              data-ouia-component-id="BulkSelect-text"
+            >
+              2 selected
+            </span>
+          </span>
         </label>
-        <span
-          data-ouia-component-id="BulkSelect-text"
-        >
-          2 selected
-        </span>
         <button
           aria-expanded="false"
           aria-label="Bulk select toggle"
@@ -66,7 +72,7 @@ exports[`BulkSelect component should render 1`] = `
       class="pf-v6-c-menu-toggle pf-m-split-button"
     >
       <label
-        class="pf-v6-c-check pf-m-standalone"
+        class="pf-v6-c-check"
       >
         <input
           aria-invalid="false"
@@ -78,12 +84,18 @@ exports[`BulkSelect component should render 1`] = `
           name="BulkSelect-checkbox"
           type="checkbox"
         />
+        <span
+          aria-hidden="true"
+          class="pf-v6-c-check__label"
+          id="BulkSelect-checkbox"
+        >
+          <span
+            data-ouia-component-id="BulkSelect-text"
+          >
+            2 selected
+          </span>
+        </span>
       </label>
-      <span
-        data-ouia-component-id="BulkSelect-text"
-      >
-        2 selected
-      </span>
       <button
         aria-expanded="false"
         aria-label="Bulk select toggle"