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

@@ -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,
   });