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

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

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)

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>

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