fix(box): css style properties passed as HTML attributes

removed the css properties from being passed directly to the styled component
Sage · Dec 3, 2024 · 79ed1a2 · 79ed1a2
1 parent 68a2ca8
commit 79ed1a2
Show file tree

Hide file tree

Showing 4 changed files with 55 additions and 12 deletions.
diff --git a/src/components/box/box.component.tsx b/src/components/box/box.component.tsx
@@ -101,6 +101,8 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
       borderRadius,
       color,
       opacity,
+      height,
+      width,
       "aria-hidden": ariaHidden,
       ...rest
     }: BoxProps,
@@ -131,15 +133,19 @@ export const Box = React.forwardRef<HTMLDivElement, BoxProps>(
         backgroundColor={backgroundColor}
         boxShadow={boxShadow}
         borderRadius={borderRadius}
-        color={color}
-        opacity={opacity}
         aria-hidden={ariaHidden}
         {...tagComponent(dataComponent, rest)}
         {...filterStyledSystemMarginProps(rest)}
         {...filterStyledSystemPaddingProps(rest)}
         {...filterStyledSystemFlexboxProps(rest)}
         {...filterStyledSystemGridProps(rest)}
         {...filterStyledSystemLayoutProps(rest)}
+        cssProps={{
+          color,
+          opacity,
+          width,
+          height,
+        }}
       >
         {children}
       </StyledBox>

diff --git a/src/components/box/box.stories.tsx b/src/components/box/box.stories.tsx
@@ -87,7 +87,13 @@ Position.storyName = "Position";
 export const Color: Story = () => {
   return (
     <Box m={3} p={3} bg="secondary">
-      <Box width="100px" height="100px" bg="primary" color="yellow">
+      <Box
+        width="100px"
+        height="100px"
+        bg="primary"
+        color="yellow"
+        opacity="25%"
+      >
         This is some sample text
       </Box>
     </Box>

diff --git a/src/components/box/box.style.ts b/src/components/box/box.style.ts
@@ -23,7 +23,16 @@ const calculatePosition = (props: Omit<PositionProps, "zIndex">) => {
   };
 };
 
-const StyledBox = styled.div<BoxProps>`
+const StyledBox = styled.div<
+  BoxProps & {
+    cssProps: {
+      color?: Pick<BoxProps, "color">;
+      opacity?: Pick<BoxProps, "opacity">;
+      height?: string | number;
+      width?: string | number;
+    };
+  }
+>`
   ${space}
   ${layout}
   ${flexbox}
@@ -35,26 +44,30 @@ const StyledBox = styled.div<BoxProps>`
     css`
       border-radius: var(--${borderRadius});
     `}
+  
+  ${({ cssProps, bg, backgroundColor, ...rest }) =>
+    styledColor({ color: cssProps?.color, bg, backgroundColor, ...rest })}
 
-  ${({ color, bg, backgroundColor, ...rest }) =>
-    styledColor({ color, bg, backgroundColor, ...rest })}
+  ${({ cssProps }) => css`
+    opacity: ${cssProps?.opacity};
+  `}
 
   ${({ overflowWrap }) =>
     overflowWrap &&
     css`
       overflow-wrap: ${overflowWrap};
     `}
   
-  ${({ height }) =>
-    height &&
+  ${({ cssProps }) =>
+    cssProps?.height &&
     css`
-      height: ${height};
+      height: ${cssProps?.height};
     `}
 
-  ${({ width }) =>
-    width &&
+  ${({ cssProps }) =>
+    cssProps?.width &&
     css`
-      width: ${width};
+      width: ${cssProps?.width};
     `}
 
   ${({ scrollVariant }) =>

diff --git a/src/components/box/box.test.tsx b/src/components/box/box.test.tsx
@@ -76,6 +76,24 @@ it("applies the boxShadow styling correctly when a design token is passed in", (
   expect(box).toHaveStyle(`box-shadow: var(--boxShadow100)`);
 });
 
+it("applies the correct styling from the cssProps", () => {
+  render(
+    <Box
+      width="100px"
+      height="100px"
+      opacity="25%"
+      color="yellow"
+      data-role="box"
+    />,
+  );
+
+  const box = screen.getByTestId("box");
+  expect(box).toHaveStyle(`width: 100px`);
+  expect(box).toHaveStyle(`height: 100px`);
+  expect(box).toHaveStyle(`opacity: 25%`);
+  expect(box).toHaveStyle(`color: yellow`);
+});
+
 test("logs a deprecation warning when the `tabIndex` prop is passed with a value", () => {
   const loggerSpy = jest
     .spyOn(Logger, "deprecate")