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

[logonoff]

What: Closes #11590

Summary by CodeRabbit

• Bug Fixes
  • The class generation utility now returns undefined for empty class lists instead of returning empty strings. This delivers more consistent and predictable behavior throughout your application. The updated function ensures that conditional styling scenarios function more reliably, reducing unexpected empty string occurrences and improving overall code consistency.

[patternfly-build]

Preview: https://patternfly-react-pr-11602.surge.sh

A11y report: https://patternfly-react-pr-11602-a11y.surge.sh

Preview: https://pf-react-pr-11602.surge.sh

A11y report: https://pf-react-pr-11602-a11y.surge.sh

[dlabaj]

Waiting on breaking change release to merge this PR.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[github-actions]

This PR has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 5de3b4aa-a220-4de4-a224-c07e6440c678

📥 Commits

Reviewing files that changed from the base of the PR and between 9e88adf and e267321.

⛔ Files ignored due to path filters (6)

• packages/react-core/src/components/List/__tests__/__snapshots__/ListItem.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/Nav/__tests__/__snapshots__/Nav.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/SearchInput/__tests__/__snapshots__/SearchInput.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/components/ToggleGroup/__tests__/__snapshots__/ToggleGroupItemElement.test.tsx.snap is excluded by !**/*.snap
• packages/react-core/src/layouts/Flex/__tests__/__snapshots__/Flex.test.tsx.snap is excluded by !**/*.snap
• packages/react-drag-drop/src/components/DragDrop/__tests__/__snapshots__/DragDrop.test.tsx.snap is excluded by !**/*.snap

📒 Files selected for processing (1)

• packages/react-styles/src/index.ts

---

Walkthrough

The css helper function in packages/react-styles/src/index.ts is updated to declare a return type of string | undefined and to return undefined when the computed class list is empty instead of an empty string. This prevents rendering of empty class="" attributes.

Changes

css Helper Return Type Update

Layer / File(s)	Summary
css function signature and empty class handling packages/react-styles/src/index.ts	The css function return type is updated to string | undefined, and its implementation changes to return undefined when the joined class string is empty, replacing the previous empty string behavior.

🎯 1 (Trivial) | ⏱️ ~3 minutes

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly and concisely describes the primary change: updating the css function to return undefined instead of an empty string when no classNames are provided.
Linked Issues check	✅ Passed	The code change directly addresses the linked issue #11590 by modifying the css function to return undefined when the class list is empty, enabling the omission of empty class attributes in rendered HTML.
Out of Scope Changes check	✅ Passed	All changes are directly scoped to the css function's return type and behavior, with no unrelated modifications present in the changeset.
Docstring Coverage	✅ Passed	Docstring coverage is 100.00% which is sufficient. The required threshold is 80.00%.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}