feat(accordion): change buttonWidth prop type to string

closes #5897 BREAKING CHANGE: buttonWidth type changed from number to string
Sage · Mar 13, 2023 · 046dbf3 · 046dbf3
1 parent e01478a
commit 046dbf3
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 17 deletions.
diff --git a/src/components/accordion/accordion-test.stories.tsx b/src/components/accordion/accordion-test.stories.tsx
@@ -363,7 +363,7 @@ export const AccordionOpeningButton = () => {
         borders="none"
         iconAlign="left"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
         error="hello"
       >
         <div>Content</div>
@@ -378,7 +378,7 @@ export const AccordionOpeningButton = () => {
         borders="none"
         iconAlign="right"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -394,7 +394,7 @@ export const AccordionOpeningButton = () => {
         headerSpacing={{
           px: 0,
         }}
-        buttonWidth={96}
+        buttonWidth="96px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -408,7 +408,7 @@ export const AccordionOpeningButton = () => {
         openTitle="Less info"
         iconAlign="left"
         buttonHeading
-        buttonWidth={120}
+        buttonWidth="120px"
         headerSpacing={{
           px: 1,
         }}

diff --git a/src/components/accordion/accordion.component.tsx b/src/components/accordion/accordion.component.tsx
@@ -21,7 +21,7 @@ export interface AccordionProps
   extends StyledAccordionContainerProps,
     SpaceProps {
   /** Width of the buttonHeading when it's set, defaults to 150px */
-  buttonWidth?: number;
+  buttonWidth?: string;
   /** Content of the Accordion component */
   children?: React.ReactNode;
   /** Set the default state of expansion of the Accordion if component is meant to be used as uncontrolled */
@@ -95,7 +95,7 @@ export const Accordion = React.forwardRef<
       warning,
       info,
       buttonHeading,
-      buttonWidth = 150,
+      buttonWidth = "150px",
       openTitle,
       ...rest
     }: AccordionProps & AccordionInternalProps,

diff --git a/src/components/accordion/accordion.spec.tsx b/src/components/accordion/accordion.spec.tsx
@@ -530,7 +530,7 @@ describe("Accordion", () => {
       }
     );
 
-    it.each(Array.from({ length: 10 }).map((_, i) => 100 + i))(
+    it.each(Array.from({ length: 10 }).map((_, i) => `${100 + i}px`))(
       "sets the width of the button to the value passed in via the buttonWidth prop",
       (buttonWidth) => {
         wrapper = mount(
@@ -539,7 +539,7 @@ describe("Accordion", () => {
 
         assertStyleMatch(
           {
-            width: `${buttonWidth}px`,
+            width: `${buttonWidth}`,
           },
           wrapper
         );

diff --git a/src/components/accordion/accordion.stories.tsx b/src/components/accordion/accordion.stories.tsx
@@ -287,7 +287,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         borders="none"
         iconAlign="left"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
         error="hello"
       >
         <div>Content</div>
@@ -302,7 +302,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         borders="none"
         iconAlign="right"
         buttonHeading
-        buttonWidth={200}
+        buttonWidth="200px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -316,7 +316,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         openTitle="Less info"
         buttonHeading
         headerSpacing={{ px: 0 }}
-        buttonWidth={96}
+        buttonWidth="96px"
       >
         <div>Content</div>
         <div>Content</div>
@@ -330,7 +330,7 @@ export const OpeningButton: ComponentStory<typeof Accordion> = () => {
         openTitle="Less info"
         iconAlign="left"
         buttonHeading
-        buttonWidth={120}
+        buttonWidth="120px"
         headerSpacing={{ px: 1 }}
       >
         <div>Content</div>

diff --git a/src/components/accordion/accordion.style.ts b/src/components/accordion/accordion.style.ts
@@ -124,7 +124,7 @@ const StyledAccordionHeadingsContainer = styled.div<StyledAccordionHeadingsConta
 
 interface StyledAccordionTitleContainerProps {
   buttonHeading?: boolean;
-  buttonWidth?: number;
+  buttonWidth?: string;
   hasButtonProps?: boolean;
   iconAlign?: "left" | "right";
   size?: "large" | "small";
@@ -195,7 +195,7 @@ const StyledAccordionTitleContainer = styled.div<StyledAccordionTitleContainerPr
 
       ${buttonWidth &&
       css`
-        width: ${buttonWidth}px;
+        width: ${buttonWidth};
       `}
     `}
   `}

diff --git a/src/components/accordion/accordion.test.js b/src/components/accordion/accordion.test.js
@@ -300,8 +300,8 @@ context("Testing Accordion component", () => {
         .and("have.attr", "type", "info");
     });
 
-    it.each([[100], [200], [300]])(
-      "should check accordion heading is a button with width %spx",
+    it.each([["100px"], ["200px"], ["300px"]])(
+      "should check accordion heading is a button with width %s",
       (widths) => {
         CypressMountWithProviders(
           <AccordionComponent

diff --git a/src/components/dialog-full-screen/dialog-full-screen.stories.tsx b/src/components/dialog-full-screen/dialog-full-screen.stories.tsx
@@ -670,7 +670,7 @@ export const WithHideableHeaderChildren = () => {
       borders="none"
       disableContentPadding
       buttonHeading
-      buttonWidth={120}
+      buttonWidth="120px"
       ml="-13px"
     >
       <Box py="16px" pl="14px">