From bd3a76eac7b961c7cb6b9252f78eab08f4febbe8 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 26 Feb 2026 16:42:46 +0100
Subject: [PATCH] Fix SearchField CSS selector to use lowercase data attribute

The useDefinition hook renders data attributes in lowercase,
so the CSS selector `[data-startCollapsed]` no longer matched.
Updated to `[data-startcollapsed]` to restore collapsed state
styling.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/loud-cups-tickle.md                   | 16 ++++++++++++++++
 .../SearchField/SearchField.module.css           |  2 +-
 2 files changed, 17 insertions(+), 1 deletion(-)
 create mode 100644 .changeset/loud-cups-tickle.md

diff --git a/.changeset/loud-cups-tickle.md b/.changeset/loud-cups-tickle.md
new file mode 100644
index 0000000000..122717f5e8
--- /dev/null
+++ b/.changeset/loud-cups-tickle.md
@@ -0,0 +1,16 @@
+---
+'@backstage/ui': minor
+---
+
+**BREAKING**: Data attributes rendered by components are now always lowercase. This affects CSS selectors targeting camelCase data attributes.
+
+**Migration:**
+
+Update any custom CSS selectors that target camelCase data attributes to use lowercase instead:
+
+```diff
+- [data-startCollapsed='true'] { ... }
++ [data-startcollapsed='true'] { ... }
+```
+
+**Affected components:** SearchField
diff --git a/packages/ui/src/components/SearchField/SearchField.module.css b/packages/ui/src/components/SearchField/SearchField.module.css
index da854ee7b1..f4415aa0f8 100644
--- a/packages/ui/src/components/SearchField/SearchField.module.css
+++ b/packages/ui/src/components/SearchField/SearchField.module.css
@@ -39,7 +39,7 @@
       }
     }
 
-    &[data-startCollapsed='true'] {
+    &[data-startcollapsed='true'] {
       transition: flex-basis 0.3s ease-in-out, width 0.3s ease-in-out,
         max-width 0.3s ease-in-out;
       padding: 0;