From 7960d542157d5da9b96db87339a5502d1f51b010 Mon Sep 17 00:00:00 2001
From: Johan Persson <johanopersson@gmail.com>
Date: Thu, 5 Mar 2026 09:39:07 +0100
Subject: [PATCH] feat(ui): support native HTML attributes on Grid components

Extend GridProps and GridItemProps to accept standard HTML div
attributes by inheriting from React.HTMLAttributes<HTMLDivElement>.
The rest props are spread onto the underlying div elements.

Signed-off-by: Johan Persson <johanopersson@gmail.com>
---
 .changeset/flex-html-attributes.md       |  7 -------
 .changeset/layout-html-attributes.md     |  7 +++++++
 packages/ui/report.api.md                | 10 ++++++++--
 packages/ui/src/components/Grid/Grid.tsx |  6 ++++--
 packages/ui/src/components/Grid/types.ts | 11 ++++++++---
 5 files changed, 27 insertions(+), 14 deletions(-)
 delete mode 100644 .changeset/flex-html-attributes.md
 create mode 100644 .changeset/layout-html-attributes.md

diff --git a/.changeset/flex-html-attributes.md b/.changeset/flex-html-attributes.md
deleted file mode 100644
index 882594deba..0000000000
--- a/.changeset/flex-html-attributes.md
+++ /dev/null
@@ -1,7 +0,0 @@
----
-'@backstage/ui': patch
----
-
-Added support for native HTML div attributes on the `Flex` component.
-
-**Affected components:** Flex
diff --git a/.changeset/layout-html-attributes.md b/.changeset/layout-html-attributes.md
new file mode 100644
index 0000000000..6dff67e7f1
--- /dev/null
+++ b/.changeset/layout-html-attributes.md
@@ -0,0 +1,7 @@
+---
+'@backstage/ui': patch
+---
+
+Added support for native HTML div attributes on the `Flex`, `Grid`, and `Grid.Item` components.
+
+**Affected components:** Flex, Grid, Grid.Item
diff --git a/packages/ui/report.api.md b/packages/ui/report.api.md
index d584031c7a..afda04ea5a 100644
--- a/packages/ui/report.api.md
+++ b/packages/ui/report.api.md
@@ -20,6 +20,7 @@ import type { DisclosureProps } from 'react-aria-components';
 import type { ElementType } from 'react';
 import { ForwardRefExoticComponent } from 'react';
 import type { HeadingProps } from 'react-aria-components';
+import type { HTMLAttributes } from 'react';
 import { JSX as JSX_2 } from 'react/jsx-runtime';
 import type { LinkProps as LinkProps_2 } from 'react-aria-components';
 import type { ListBoxItemProps } from 'react-aria-components';
@@ -1333,7 +1334,9 @@ export type GridItemOwnProps = {
 };
 
 // @public (undocumented)
-export interface GridItemProps extends GridItemOwnProps {
+export interface GridItemProps
+  extends GridItemOwnProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   // (undocumented)
   colEnd?: Responsive<Columns>;
   // (undocumented)
@@ -1353,7 +1356,10 @@ export type GridOwnProps = {
 };
 
 // @public (undocumented)
-export interface GridProps extends SpaceProps, GridOwnProps {
+export interface GridProps
+  extends SpaceProps,
+    GridOwnProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   // (undocumented)
   columns?: Responsive<Columns>;
   // (undocumented)
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 8d000c0925..f61cd67d6b 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/packages/ui/src/components/Grid/Grid.tsx
@@ -20,7 +20,7 @@ import { useDefinition } from '../../hooks/useDefinition';
 import { GridDefinition, GridItemDefinition } from './definition';
 
 const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
-  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+  const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition(
     GridDefinition,
     { columns: 'auto', gap: '4', ...props },
   );
@@ -32,6 +32,7 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
       className={classes.root}
       style={{ ...utilityStyle, ...ownProps.style }}
       {...dataAttributes}
+      {...restProps}
     >
       {childrenWithBgProvider}
     </div>
@@ -39,7 +40,7 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
 });
 
 const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
-  const { ownProps, dataAttributes, utilityStyle } = useDefinition(
+  const { ownProps, dataAttributes, utilityStyle, restProps } = useDefinition(
     GridItemDefinition,
     props,
   );
@@ -51,6 +52,7 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
       className={classes.root}
       style={{ ...utilityStyle, ...ownProps.style }}
       {...dataAttributes}
+      {...restProps}
     >
       {childrenWithBgProvider}
     </div>
diff --git a/packages/ui/src/components/Grid/types.ts b/packages/ui/src/components/Grid/types.ts
index c5fb713d17..6ad5d564c6 100644
--- a/packages/ui/src/components/Grid/types.ts
+++ b/packages/ui/src/components/Grid/types.ts
@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import type { ReactNode, CSSProperties } from 'react';
+import type { ReactNode, CSSProperties, HTMLAttributes } from 'react';
 import type {
   Space,
   SpaceProps,
@@ -32,7 +32,10 @@ export type GridOwnProps = {
 };
 
 /** @public */
-export interface GridProps extends SpaceProps, GridOwnProps {
+export interface GridProps
+  extends SpaceProps,
+    GridOwnProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   columns?: Responsive<Columns>;
   gap?: Responsive<Space>;
 }
@@ -46,7 +49,9 @@ export type GridItemOwnProps = {
 };
 
 /** @public */
-export interface GridItemProps extends GridItemOwnProps {
+export interface GridItemProps
+  extends GridItemOwnProps,
+    Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
   colSpan?: Responsive<Columns>;
   colEnd?: Responsive<Columns>;
   colStart?: Responsive<Columns>;