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

@@ -1,7 +0,0 @@
----
-'@backstage/ui': patch
----
-
-Added support for native HTML div attributes on the `Flex` component.
-
-**Affected components:** Flex

.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

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)

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>

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>;