From a733fd1a68ee47314567713b1e3510eb69bea84a Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 5 Mar 2026 09:19:09 +0100
Subject: [PATCH] feat(ui): support native HTML attributes on Flex component

Extend FlexProps to accept standard HTML div attributes (e.g. onClick,
id, aria-*) by inheriting from React.HTMLAttributes<HTMLDivElement>.
The rest props are spread onto the underlying div element.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/flex-html-attributes.md       | 7 +++++++
 packages/ui/report.api.md                | 5 ++++-
 packages/ui/src/components/Flex/Flex.tsx | 3 ++-
 packages/ui/src/components/Flex/types.ts | 5 ++++-
 4 files changed, 17 insertions(+), 3 deletions(-)
 create mode 100644 .changeset/flex-html-attributes.md

diff --git a/.changeset/flex-html-attributes.md b/.changeset/flex-html-attributes.md
new file mode 100644
index 0000000000..882594deba
--- /dev/null
+++ b/.changeset/flex-html-attributes.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added support for native HTML div attributes on the `Flex` component.
+
+**Affected components:** Flex
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index 7e8c8833ee..d584031c7a 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -1214,7 +1214,10 @@ export type FlexOwnProps = {
 };
 
 // @public (undocumented)
-export interface FlexProps extends SpaceProps, FlexOwnProps {
+export interface FlexProps
+  extends SpaceProps,
+    FlexOwnProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   // (undocumented)
   align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
   // (undocumented)
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index 8700d52681..1e4e4fecb3 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/packages/ui/src/components/Flex/Flex.tsx
@@ -21,7 +21,7 @@ import { FlexDefinition } from './definition';
 
 /** @public */
 export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
-  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+  const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition(
     FlexDefinition,
     { gap: '4', ...props },
   );
@@ -33,6 +33,7 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
       className={classes.root}
       style={{ ...utilityStyle, ...ownProps.style }}
       {...dataAttributes}
+      {...restProps}
     >
       {childrenWithBgProvider}
     </div>
diff --git a/packages/ui/src/components/Flex/types.ts b/packages/ui/src/components/Flex/types.ts
index 048d70affc..1c7f887e62 100644
--- a/packages/ui/src/components/Flex/types.ts
+++ b/packages/ui/src/components/Flex/types.ts
@@ -26,7 +26,10 @@ export type FlexOwnProps = {
 };
 
 /** @public */
-export interface FlexProps extends SpaceProps, FlexOwnProps {
+export interface FlexProps
+  extends SpaceProps,
+    FlexOwnProps,
+    Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {
   gap?: Responsive<Space>;
   align?: Responsive<'start' | 'center' | 'end' | 'baseline' | 'stretch'>;
   justify?: Responsive<'start' | 'center' | 'end' | 'between'>;