Merge pull request #31374 from backstage/ui-data-attributes-dom

Pass data attributes to the rendered elements

.changeset/open-symbols-find.md

@@ -0,0 +1,5 @@
+---
+'@backstage/ui': patch
+---
+
+Added support for data attributes in `<Box />`, `<Container />`, `<Flex />`, and `<Grid />` components, ensuring they are correctly applied to the rendered elements.

packages/ui/src/components/Box/Box.tsx

@@ -40,11 +40,12 @@ export const Box = forwardRef<HTMLDivElement, BoxProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Box');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement(props.as || 'div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children,
   });

packages/ui/src/components/Container/Container.tsx

@@ -43,11 +43,12 @@ export const Container = forwardRef<HTMLDivElement, ContainerProps>(
       ...displayPropDefs,
       ...containerSpacingProps,
     };
-    const { className, style } = extractProps(props, propDefs);
+    const { className, style, dataProps } = extractProps(props, propDefs);
 
     return createElement('div', {
       ref,
       className: clsx(classNames.root, className),
+      ...dataProps,
       style,
       children,
     });

packages/ui/src/components/Flex/Flex.tsx

@@ -32,11 +32,12 @@ export const Flex = forwardRef<HTMLDivElement, FlexProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Flex');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children: props.children,
   });

packages/ui/src/components/Grid/Grid.tsx

@@ -32,11 +32,12 @@ const GridRoot = forwardRef<HTMLDivElement, GridProps>((props, ref) => {
 
   const { classNames } = useStyles('Grid');
 
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.root, className),
+    ...dataProps,
     style,
     children: props.children,
   });
@@ -48,11 +49,12 @@ const GridItem = forwardRef<HTMLDivElement, GridItemProps>((props, ref) => {
   };
 
   const { classNames } = useStyles('Grid');
-  const { className, style } = extractProps(props, propDefs);
+  const { className, style, dataProps } = extractProps(props, propDefs);
 
   return createElement('div', {
     ref,
     className: clsx(classNames.item, className),
+    ...dataProps,
     style,
     children: props.children,
   });

packages/ui/src/utils/extractProps.ts

@@ -86,16 +86,25 @@ export function extractProps(
   }
 
   // Ensure keys from props that are defined in propDefs are removed
-  const cleanedProps = Object.keys(props).reduce((acc, key) => {
-    if (!propDefs.hasOwnProperty(key)) {
-      acc[key] = props[key];
-    }
-    return acc;
-  }, {} as { [key: string]: any });
+  const { cleanedProps, dataProps } = Object.keys(props).reduce(
+    (acc, key) => {
+      if (key.startsWith('data-')) {
+        acc.dataProps[key] = props[key];
+      }
+      if (!propDefs.hasOwnProperty(key)) {
+        acc.cleanedProps[key] = props[key];
+      }
+      return acc;
+    },
+    { dataProps: {}, cleanedProps: {} } as {
+      dataProps: { [key: string]: any };
+      cleanedProps: { [key: string]: any };
+    },
+  );
 
   const newClassNames = className
     .filter(name => name && name.trim() !== '')
     .join(' ');
 
-  return { ...cleanedProps, className: newClassNames, style };
+  return { ...cleanedProps, className: newClassNames, style, dataProps };
 }