fix(css): return undefined if there is no className (#11602)

Author: logonoff

packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap

@@ -23,9 +23,7 @@ exports[`Matches snapshot with icon 1`] = `
 
 exports[`Matches snapshot without icon 1`] = `
 <DocumentFragment>
-  <li
-    class=""
-  >
+  <li>
     <span>
       List item content
     </span>

packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap

@@ -1017,7 +1017,6 @@ exports[`Nav Nav List with flyout 1`] = `
       </li>
     </ul>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="right-start"
       data-popper-reference-hidden="true"

packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`SearchInput advanced search 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >
@@ -145,7 +143,6 @@ exports[`SearchInput advanced search 1`] = `
 exports[`SearchInput advanced search with custom attributes 1`] = `
 <DocumentFragment>
   <div
-    class=""
     data-testid="test-id"
   >
     <div
@@ -282,7 +279,6 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
       </div>
     </div>
     <div
-      class=""
       data-popper-escaped="true"
       data-popper-placement="bottom-start"
       data-popper-reference-hidden="true"
@@ -490,9 +486,7 @@ exports[`SearchInput advanced search with custom attributes 1`] = `
 
 exports[`SearchInput renders search input in strict mode 1`] = `
 <DocumentFragment>
-  <div
-    class=""
-  >
+  <div>
     <div
       class="pf-v6-c-input-group"
     >

packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroupItemElement.test.tsx.snap

@@ -2,9 +2,7 @@
 
 exports[`empty 1`] = `
 <DocumentFragment>
-  <span
-    class=""
-  />
+  <span />
 </DocumentFragment>
 `;
 

packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap

@@ -8,9 +8,7 @@ exports[`Flex Nested flex 1`] = `
     <div
       class="pf-v6-l-flex"
     >
-      <div
-        class=""
-      >
+      <div>
         Test
       </div>
     </div>
@@ -23,9 +21,7 @@ exports[`Flex Simple flex with single item 1`] = `
   <div
     class="pf-v6-l-flex"
   >
-    <div
-      class=""
-    >
+    <div>
       Test
     </div>
   </div>
@@ -37,9 +33,7 @@ exports[`Flex alternative component 1`] = `
   <ul
     class="pf-v6-l-flex"
   >
-    <li
-      class=""
-    >
+    <li>
       Test
     </li>
   </ul>

packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap

@@ -6,9 +6,7 @@ exports[`renders some divs 1`] = `
     class="pf-c-droppable pf-m-dragging"
   >
     <div>
-      <div
-        class=""
-      >
+      <div>
         <button
           aria-describedby="DndDescribedBy-0"
           aria-disabled="false"
@@ -46,9 +44,7 @@ exports[`renders some divs 1`] = `
         </button>
         one
       </div>
-      <div
-        class=""
-      >
+      <div>
         <button
           aria-describedby="DndDescribedBy-0"
           aria-disabled="false"
@@ -86,9 +82,7 @@ exports[`renders some divs 1`] = `
         </button>
         two
       </div>
-      <div
-        class=""
-      >
+      <div>
         <button
           aria-describedby="DndDescribedBy-0"
           aria-disabled="false"

packages/react-styles/src/index.ts

@@ -2,8 +2,8 @@
  *
  * @param {any} args list of objects, string, or arrays to reduce
  */
-export function css(...args: any): string {
-  // Adapted from https://github.com/JedWatson/classnames/blob/master/index.js
+export function css(...args: any): string | undefined {
+  // Adapted from https://github.com/JedWatson/classnames/blob/main/index.js
   const classes = [] as string[];
   const hasOwn = {}.hasOwnProperty;
 
@@ -26,5 +26,5 @@ export function css(...args: any): string {
     }
   });
 
-  return classes.join(' ');
+  return classes.join(' ') || undefined;
 }