From 5af9e14bb0f188b98e77e38c3647ef17588400c9 Mon Sep 17 00:00:00 2001 From: Johan Persson Date: Wed, 28 Jan 2026 16:12:15 +0100 Subject: [PATCH] fix(ui): prevent literal "undefined" class name in useDefinition When no className prop was passed to a component using useDefinition, the hook would add a literal "undefined" string as a CSS class. This happened because clsx treats object keys as class names, and `{ [undefined]: true }` creates an "undefined" key. Fixed by using conditional expressions instead of object syntax, which clsx correctly ignores when falsy. Signed-off-by: Johan Persson --- .changeset/gold-lions-stick.md | 5 +++++ packages/ui/src/hooks/useDefinition/useDefinition.tsx | 6 ++---- 2 files changed, 7 insertions(+), 4 deletions(-) create mode 100644 .changeset/gold-lions-stick.md diff --git a/.changeset/gold-lions-stick.md b/.changeset/gold-lions-stick.md new file mode 100644 index 0000000000..da18dd6cf6 --- /dev/null +++ b/.changeset/gold-lions-stick.md @@ -0,0 +1,5 @@ +--- +'@backstage/ui': patch +--- + +Fixed `useDefinition` hook adding literal "undefined" class name when no className prop was passed. diff --git a/packages/ui/src/hooks/useDefinition/useDefinition.tsx b/packages/ui/src/hooks/useDefinition/useDefinition.tsx index 7060ef4a1a..0de2eb8358 100644 --- a/packages/ui/src/hooks/useDefinition/useDefinition.tsx +++ b/packages/ui/src/hooks/useDefinition/useDefinition.tsx @@ -103,10 +103,8 @@ export function useDefinition< classes[name] = clsx( cssKey as string, definition.styles[cssKey as keyof typeof definition.styles], - { - [utilityClasses]: utilityTarget === name, - [ownPropsResolved.className]: classNameTarget === name, - }, + utilityTarget === name && utilityClasses, + classNameTarget === name && ownPropsResolved.className, ); }