From 03050a6ad426e6ed6893ca179a3deb2cf899f194 Mon Sep 17 00:00:00 2001
From: Vincenzo Scamporlino <vincenzos@spotify.com>
Date: Thu, 9 Oct 2025 15:51:33 +0200
Subject: [PATCH] ui: make sure data attributes are passed down to the DOM

Signed-off-by: Vincenzo Scamporlino <vincenzos@spotify.com>
---
 packages/ui/src/components/Box/Box.tsx             | 3 ++-
 packages/ui/src/components/Container/Container.tsx | 3 ++-
 packages/ui/src/components/Flex/Flex.tsx           | 3 ++-
 packages/ui/src/components/Grid/Grid.tsx           | 6 ++++--
 4 files changed, 10 insertions(+), 5 deletions(-)

diff --git a/packages/ui/src/components/Box/Box.tsx b/packages/ui/src/components/Box/Box.tsx
index 4273ee86f9..06d7d1d434 100644
--- a/packages/ui/src/components/Box/Box.tsx
+++ b/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,
   });
diff --git a/packages/ui/src/components/Container/Container.tsx b/packages/ui/src/components/Container/Container.tsx
index 7be4e5fdce..eef1e187c4 100644
--- a/packages/ui/src/components/Container/Container.tsx
+++ b/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,
     });
diff --git a/packages/ui/src/components/Flex/Flex.tsx b/packages/ui/src/components/Flex/Flex.tsx
index ded4fffffa..021fe87820 100644
--- a/packages/ui/src/components/Flex/Flex.tsx
+++ b/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,
   });
diff --git a/packages/ui/src/components/Grid/Grid.tsx b/packages/ui/src/components/Grid/Grid.tsx
index 27257c8972..18ed40b87b 100644
--- a/packages/ui/src/components/Grid/Grid.tsx
+++ b/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,
   });