@paypal/checkout-components 5.0.413 → 5.0.414

package/src/ui/buttons/styles/responsive.js

@@ -18,6 +18,8 @@ import {
   BUTTON_RELATIVE_STYLE,
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_REDESIGN_STYLE,
+  BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE,
+  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import { isBorderRadiusNumber } from "../util";
 
@@ -179,20 +181,23 @@ const generateButtonSizeStyles = ({
                 .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
                   ${
                     borderRadius && isBorderRadiusNumber(borderRadius)
-                      ? `border-radius: ${borderRadius}px`
+                      ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
                       : ""
                   }
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+                  --btn-radius: 0px;
                   border-radius: 0px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+                    --btn-radius: 4px;
                     border-radius: 4px;
                 }
 
                 .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+                    --btn-radius: ${pillBorderRadius}px;
                     border-radius: ${pillBorderRadius}px;
                 }
 
@@ -399,7 +404,7 @@ const generateDisableMaxHeightStyles = ({
       const { minHeight, maxHeight } = disableHeightStyle;
 
       return `
-            @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+            @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
               .${CLASS.BUTTON_LABEL} {
                 gap: ${gap}px;
               }
@@ -457,7 +462,7 @@ const generateDisableMaxHeightStyles = ({
                 border-radius: ${pillBorderRadius}px;
               }
 
-              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} 
+              .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL}
               .menu-button {
                 border-top-right-radius: ${pillBorderRadius}px;
                 border-bottom-right-radius: ${pillBorderRadius}px;
@@ -482,21 +487,26 @@ const generateDisableMaxHeightStyles = ({
 };
 
 const generateRebrandedDisableMaxHeightStyles = (): string => {
-  return Object.keys(BUTTON_REDESIGN_STYLE)
-    .map((redesign_size) => {
-      const { gap, fontSize, minHeight, maxHeight } =
-        getResponsiveRebrandedStyleVariables({
-          redesign_size,
-        });
+  const sizeKeys = Object.keys(BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE);
+  return sizeKeys
+    .map((redesignSize, sizeIndex) => {
+      const isLastSizeBucket = sizeIndex === sizeKeys.length - 1;
+      const style = BUTTON_REDESIGN_DISABLEMAXHEIGHT_STYLE[redesignSize];
+      const { gap, fontSize, minHeight, maxHeight } = style;
+      const maxHeightQuery = isLastSizeBucket
+        ? ""
+        : `and (max-height: ${maxHeight}px)`;
 
       return `
-        @media (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @container (min-height: ${minHeight}px) ${maxHeightQuery} {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
             gap: ${gap}px;
           }
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT},
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.SPACE} {
             font-size: ${fontSize}px;
+            line-height: 1.2;
+            margin: 0;
           }
         }
       `;
@@ -517,11 +527,12 @@ const generateRebrandedButtonSizeStyles = ({
   borderRadius?: ?number,
   shouldApplyRebrandedStyles?: boolean,
 |}): string => {
-  return Object.keys(BUTTON_REDESIGN_STYLE)
-    .map((redesign_size) => {
+  const redesignSizeKeys = Object.keys(BUTTON_REDESIGN_STYLE);
+  return redesignSizeKeys
+    .map((redesignSize, sizeIndex) => {
+      const isLastSizeBucket = sizeIndex === redesignSizeKeys.length - 1;
       const {
         buttonHeight,
-        pillBorderRadius,
         gap,
         fontSize,
         defaultHeight,
@@ -532,9 +543,13 @@ const generateRebrandedButtonSizeStyles = ({
         minDualWidth,
       } = getResponsiveRebrandedStyleVariables({
         height,
-        redesign_size,
+        redesignSize,
       });
 
+      const maxWidthQuery = isLastSizeBucket
+        ? ""
+        : `and (max-width: ${maxWidth}px)`;
+
       const widthBasedStyles = `
         @media only screen and (min-width: ${minWidth}px) {
           .${CLASS.CONTAINER} {
@@ -556,7 +571,9 @@ const generateRebrandedButtonSizeStyles = ({
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               margin: 0px 4vw;
               box-sizing: border-box;
-              height: ${buttonHeight * 0.76}px;
+              height: ${Math.round(
+                buttonHeight * REBRAND_LABEL_HEIGHT_RATIO
+              )}px;
           }
 
           .${CLASS.BUTTON_REBRAND}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
@@ -565,20 +582,8 @@ const generateRebrandedButtonSizeStyles = ({
               gap: ${gap}px;
           }
 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } .${CLASS.TEXT}, 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${
-        BUTTON_NUMBER.MULTIPLE
-      } .${CLASS.SPACE} {
-              font-size: ${fontSize}px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.NUMBER}-${BUTTON_NUMBER.MULTIPLE} .${
-        CLASS.BUTTON_REBRAND
-      } .${CLASS.TEXT} {
-              line-height: 1.2;
-              margin: 0;
+          .${CLASS.TAGLINE} .${CLASS.TEXT} {
+              font-size: ${minWidth >= 500 ? 14 : 12}px;
           }
 
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.VERTICAL}.${
@@ -596,8 +601,73 @@ const generateRebrandedButtonSizeStyles = ({
       }-${BUTTON_NUMBER.MULTIPLE}:last-child {
               margin-bottom: 0;
           }
+
+          .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
+            ${
+              borderRadius && isBorderRadiusNumber(borderRadius)
+                ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
+                : ""
+            }
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+            --btn-radius: 0px;
+            border-radius: 0px;
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+              --btn-radius: 4px;
+              border-radius: 4px;
+          }
+
+          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+              --btn-radius: 9999px;
+              border-radius: 9999px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
+            ${
+              borderRadius && isBorderRadiusNumber(borderRadius)
+                ? `border-top-right-radius: ${borderRadius}px; border-bottom-right-radius: ${borderRadius}px`
+                : ""
+            }
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.SHARP
+      } .menu-button {
+              border-top-right-radius: 0px;
+              border-bottom-right-radius: 0px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.RECT
+      } .menu-button {
+              border-top-right-radius: 4px;
+              border-bottom-right-radius: 4px;
+          }
+
+          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
+        BUTTON_SHAPE.PILL
+      } .menu-button {
+              border-top-right-radius: 9999px;
+              border-bottom-right-radius: 9999px;
+          }
         }
-      
+
+        @media only screen and (min-width: ${minWidth}px) ${maxWidthQuery} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
+        CLASS.TEXT
+      },
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${
+        CLASS.SPACE
+      } {
+              font-size: ${fontSize}px;
+              line-height: 1.2;
+              margin: 0;
+          }
+        }
+
         @media only screen and (min-width: ${minWidth}px) and (max-width: ${minDualWidth}px) {
           .${CLASS.BUTTON_ROW}.${CLASS.LAYOUT}-${BUTTON_LAYOUT.HORIZONTAL}.${
         CLASS.NUMBER
@@ -672,17 +742,18 @@ const generateRebrandedButtonSizeStyles = ({
        `;
 
       const heightBasedStyles = `
-        @media only screen and (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
+        @container (min-height: ${minHeight}px) and (max-height: ${maxHeight}px) {
           .${CLASS.BUTTON_REBRAND} > .${CLASS.BUTTON_LABEL} {
               gap: ${gap}px;
           }
 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.TEXT}, 
-          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.SPACE} {
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
+        CLASS.BUTTON_REBRAND
+      } .${CLASS.TEXT},
+          .${CLASS.CONTAINER} .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND}.${
+        CLASS.BUTTON_REBRAND
+      } .${CLASS.SPACE} {
               font-size: ${fontSize}px;
-          }
-
-          .${CLASS.BUTTON_ROW} .${CLASS.BUTTON_REBRAND} .${CLASS.TEXT} {
               line-height: 1.2;
               margin: 0;
           }
@@ -733,56 +804,7 @@ const generateRebrandedButtonSizeStyles = ({
       } .${CLASS.SPACE} {
               line-height: ${perc(buttonHeight, 50) + 5}px;
           }
-          
-          .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
-            ${
-              borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `border-radius: ${borderRadius}px`
-                : ""
-            }
-          }
-
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
-            border-radius: 0px;
-          }
 
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
-              border-radius: 4px;
-          }
-
-          .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
-              border-radius: ${pillBorderRadius}px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
-            ${
-              borderRadius && isBorderRadiusNumber(borderRadius)
-                ? `border-top-right-radius: ${borderRadius}px; border-bottom-right-radius: ${borderRadius}px`
-                : ""
-            }
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.SHARP
-      } .menu-button {
-              border-top-right-radius: 0px;
-              border-bottom-right-radius: 0px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.RECT
-      } .menu-button {
-              border-top-right-radius: 4px;
-              border-bottom-right-radius: 4px;
-          }
-
-          .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${
-        BUTTON_SHAPE.PILL
-      } .menu-button {
-              border-top-right-radius: ${pillBorderRadius}px;
-              border-bottom-right-radius: ${pillBorderRadius}px;
-          }
-          
           .${CLASS.TAGLINE} .${CLASS.TEXT} {
               height: ${perc(buttonHeight, BUTTON_RELATIVE_STYLE.TAGLINE)}px;
               line-height: ${perc(
@@ -869,16 +891,22 @@ export function buttonResponsiveStyle({
     .${CLASS.BUTTON}.${CLASS.BORDER_RADIUS} {
       ${
         borderRadius && isBorderRadiusNumber(borderRadius)
-          ? `border-radius: ${borderRadius}px`
+          ? `--btn-radius: ${borderRadius}px; border-radius: ${borderRadius}px`
           : ""
       };
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.SHARP} {
+        --btn-radius: 0px;
         border-radius: 0px;
     }
     .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.RECT} {
+        --btn-radius: 4px;
         border-radius: 4px;
     }
+    .${CLASS.BUTTON}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} {
+        --btn-radius: 9999px;
+        border-radius: 9999px;
+    }
 
     // menu button - border radius
     .${CLASS.BUTTON_ROW}.${CLASS.BORDER_RADIUS} .menu-button {
@@ -898,10 +926,18 @@ export function buttonResponsiveStyle({
         border-top-right-radius: 4px;
         border-bottom-right-radius: 4px;
     }
+    .${CLASS.BUTTON_ROW}.${CLASS.SHAPE}-${BUTTON_SHAPE.PILL} .menu-button {
+        border-top-right-radius: 9999px;
+        border-bottom-right-radius: 9999px;
+    }
 
     .${CLASS.CARD} {
         display: inline-block;
         height: 100%;
+    }
+
+    .${CLASS.BUTTON_ROW} {
+        container-type: size;
     }`;
 
   const rebrandedStyles = shouldApplyRebrandedStyles

package/src/ui/buttons/styles/styleUtils.js

@@ -7,6 +7,7 @@ import {
   BUTTON_DISABLE_MAX_HEIGHT_STYLE,
   BUTTON_SIZE_STYLE,
   BUTTON_REDESIGN_STYLE,
+  REBRAND_LABEL_HEIGHT_RATIO,
 } from "../config";
 import {
   BUTTON_SIZE,
@@ -32,7 +33,7 @@ function getLabelHeight({
   let labelHeight = max(roundUp(perc(height, labelPercPercentage) + 5, 2), 12);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(height, 76), 1);
+    labelHeight = roundUp(perc(height, REBRAND_LABEL_HEIGHT_RATIO * 100), 1);
   }
 
   return parseInt(labelHeight, 10);
@@ -141,7 +142,10 @@ export function getResponsiveStyleVariables({
   const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   if (shouldApplyRebrandedStyles) {
-    labelHeight = roundUp(perc(buttonHeight, 76), 1);
+    labelHeight = roundUp(
+      perc(buttonHeight, REBRAND_LABEL_HEIGHT_RATIO * 100),
+      1
+    );
     // smallerLabelHeight gets triggered at widths < 320px
     // We will need to investigate why the labels need to get significantly smaller at this breakpoint
     smallerLabelHeight = labelHeight;
@@ -165,12 +169,12 @@ export function getResponsiveStyleVariables({
 
 export function getResponsiveRebrandedStyleVariables({
   height,
-  redesign_size,
+  redesignSize,
 }: {|
   height?: ?number,
-  redesign_size: $Values<typeof BUTTON_REDESIGN_SIZE>,
+  redesignSize: $Values<typeof BUTTON_REDESIGN_SIZE>,
 |}): Object {
-  const style = BUTTON_REDESIGN_STYLE[redesign_size];
+  const style = BUTTON_REDESIGN_STYLE[redesignSize];
   const {
     minHeight,
     maxHeight,
@@ -182,7 +186,6 @@ export function getResponsiveRebrandedStyleVariables({
   } = style;
 
   const buttonHeight = height || defaultHeight;
-  const pillBorderRadius = Math.ceil(buttonHeight / 2);
 
   const minDualWidth = Math.max(
     Math.round(
@@ -194,7 +197,6 @@ export function getResponsiveRebrandedStyleVariables({
   const styleVariables = {
     style,
     buttonHeight,
-    pillBorderRadius,
     gap,
     defaultHeight,
     minHeight,

package/src/ui/buttons/styles/styleUtils.test.js

@@ -398,10 +398,9 @@ const expectedRebrandDisableMaxHeightStylesTiny = {
   buttonHeight: 25,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.TINY],
-  labelHeight: 19,
+  labelHeight: 13,
   fontSize: 10,
   marginTop: 1,
-  pillBorderRadius: 13,
   spinnerSize: 13,
   gap: 3,
 };
@@ -412,10 +411,9 @@ const expectedRebrandDisableMaxHeightStylesSmall = {
   buttonHeight: 30,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.SMALL],
-  labelHeight: 23,
+  labelHeight: 15,
   fontSize: 11,
   marginTop: 1,
-  pillBorderRadius: 15,
   spinnerSize: 15,
   gap: 3,
 };
@@ -428,10 +426,9 @@ const expectedRebrandDisableMaxHeightStylesMediumSmall = {
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[
       BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_SMALL
     ],
-  labelHeight: 27,
+  labelHeight: 18,
   fontSize: 13,
   marginTop: 1,
-  pillBorderRadius: 18,
   spinnerSize: 18,
   gap: 4,
 };
@@ -442,10 +439,9 @@ const expectedRebrandDisableMaxHeightStylesMediumBig = {
   buttonHeight: 40,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.MEDIUM_BIG],
-  labelHeight: 30,
+  labelHeight: 20,
   fontSize: 14,
   marginTop: 1,
-  pillBorderRadius: 20,
   spinnerSize: 20,
   gap: 4,
 };
@@ -456,10 +452,9 @@ const expectedRebrandDisableMaxHeightStylesLargeSmall = {
   buttonHeight: 45,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_SMALL],
-  labelHeight: 34,
+  labelHeight: 23,
   fontSize: 16,
   marginTop: 2,
-  pillBorderRadius: 23,
   spinnerSize: 23,
   gap: 5,
 };
@@ -470,10 +465,9 @@ const expectedRebrandDisableMaxHeightStylesLargeBig = {
   buttonHeight: 50,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.LARGE_BIG],
-  labelHeight: 38,
+  labelHeight: 25,
   fontSize: 18,
   marginTop: 2,
-  pillBorderRadius: 25,
   spinnerSize: 25,
   gap: 5,
 };
@@ -484,10 +478,9 @@ const expectedRebrandDisableMaxHeightStylesXL = {
   buttonHeight: 55,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XL],
-  labelHeight: 42,
+  labelHeight: 28,
   fontSize: 20,
   marginTop: 2,
-  pillBorderRadius: 28,
   spinnerSize: 28,
   gap: 6,
 };
@@ -498,10 +491,9 @@ const expectedRebrandDisableMaxHeightStylesXXL = {
   buttonHeight: 65,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXL],
-  labelHeight: 49,
+  labelHeight: 33,
   fontSize: 23,
   marginTop: 2,
-  pillBorderRadius: 33,
   spinnerSize: 33,
   gap: 7,
 };
@@ -512,10 +504,9 @@ const expectedRebrandDisableMaxHeightStylesXXXL = {
   buttonHeight: 75,
   disableHeightStyle:
     BUTTON_DISABLE_MAX_HEIGHT_STYLE[BUTTON_DISABLE_MAX_HEIGHT_SIZE.XXXL],
-  labelHeight: 57,
+  labelHeight: 38,
   fontSize: 27,
   marginTop: 3,
-  pillBorderRadius: 38,
   spinnerSize: 38,
   gap: 7,
 };
@@ -524,7 +515,6 @@ const expectedRebrandDisableMaxHeightStylesXXXL = {
 const expectedRebrandedResponsiveStylesExtraSmall = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.EXTRA_SMALL],
   buttonHeight: 20,
-  pillBorderRadius: 10,
   gap: 3,
   defaultHeight: 20,
   minHeight: 20,
@@ -532,13 +522,12 @@ const expectedRebrandedResponsiveStylesExtraSmall = {
   minWidth: 50,
   minDualWidth: 300,
   maxWidth: 75,
-  fontSize: 12,
+  fontSize: 10,
 };
 
 const expectedRebrandedResponsiveStylesTiny = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.TINY],
   buttonHeight: 25,
-  pillBorderRadius: 13,
   gap: 3,
   defaultHeight: 25,
   minHeight: 25,
@@ -546,27 +535,25 @@ const expectedRebrandedResponsiveStylesTiny = {
   minWidth: 75,
   minDualWidth: 300,
   maxWidth: 200,
-  fontSize: 12,
+  fontSize: 10,
 };
 
 const expectedRebrandedResponsiveStylesSmall = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.SMALL],
   buttonHeight: 35,
-  pillBorderRadius: 18,
-  gap: 3,
+  gap: 4,
   defaultHeight: 35,
   minHeight: 30,
   maxHeight: 35,
   minWidth: 200,
   minDualWidth: 300,
   maxWidth: 250,
-  fontSize: 14,
+  fontSize: 12,
 };
 
 const expectedRebrandedResponsiveStylesMediumSmall = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.MEDIUM_SMALL],
   buttonHeight: 35,
-  pillBorderRadius: 18,
   gap: 4,
   defaultHeight: 35,
   minHeight: 35,
@@ -574,27 +561,25 @@ const expectedRebrandedResponsiveStylesMediumSmall = {
   minWidth: 250,
   minDualWidth: 300,
   maxWidth: 300,
-  fontSize: 16,
+  fontSize: 14,
 };
 
 const expectedRebrandedResponsiveStylesMediumBig = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.MEDIUM_BIG],
   buttonHeight: 45,
-  pillBorderRadius: 23,
-  gap: 4,
+  gap: 5,
   defaultHeight: 45,
   minHeight: 40,
   maxHeight: 45,
   minWidth: 300,
   minDualWidth: 300,
   maxWidth: 350,
-  fontSize: 16,
+  fontSize: 14,
 };
 
 const expectedRebrandedResponsiveStylesLargeSmall = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.LARGE_SMALL],
   buttonHeight: 45,
-  pillBorderRadius: 23,
   gap: 5,
   defaultHeight: 45,
   minHeight: 45,
@@ -602,63 +587,33 @@ const expectedRebrandedResponsiveStylesLargeSmall = {
   minWidth: 350,
   minDualWidth: 300,
   maxWidth: 425,
-  fontSize: 18,
+  fontSize: 16,
 };
 
 const expectedRebrandedResponsiveStylesLargeBig = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.LARGE_BIG],
-  buttonHeight: 45,
-  pillBorderRadius: 23,
+  buttonHeight: 50,
   gap: 5,
-  defaultHeight: 45,
+  defaultHeight: 50,
   minHeight: 50,
   maxHeight: 55,
   minWidth: 425,
   minDualWidth: 300,
   maxWidth: 500,
-  fontSize: 20,
+  fontSize: 18,
 };
 
 const expectedRebrandedResponsiveStylesXlSmall = {
   style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XL_SMALL],
   buttonHeight: 55,
-  pillBorderRadius: 28,
   gap: 6,
   defaultHeight: 55,
   minHeight: 55,
   maxHeight: 60,
   minWidth: 500,
   minDualWidth: 300,
-  maxWidth: 550,
-  fontSize: 22,
-};
-
-const expectedRebrandedResponsiveStylesXlBig = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XL_BIG],
-  buttonHeight: 55,
-  pillBorderRadius: 28,
-  gap: 7,
-  defaultHeight: 55,
-  minHeight: 60,
-  maxHeight: 65,
-  minWidth: 550,
-  minDualWidth: 300,
-  maxWidth: 650,
-  fontSize: 24,
-};
-
-const expectedRebrandedResponsiveStylesXXL = {
-  style: BUTTON_REDESIGN_STYLE[BUTTON_REDESIGN_SIZE.XXL],
-  buttonHeight: 55,
-  pillBorderRadius: 28,
-  gap: 7,
-  defaultHeight: 55,
-  minHeight: 65,
-  maxHeight: 100,
-  minWidth: 650,
-  minDualWidth: 300,
   maxWidth: 750,
-  fontSize: 26,
+  fontSize: 18,
 };
 
 describe("test responsive style variables for legacy", () => {
@@ -784,20 +739,12 @@ describe("test responsive style variables for rebranded buttons", () => {
       input: BUTTON_REDESIGN_SIZE.XL_SMALL,
       expected: expectedRebrandedResponsiveStylesXlSmall,
     },
-    {
-      input: BUTTON_REDESIGN_SIZE.XL_BIG,
-      expected: expectedRebrandedResponsiveStylesXlBig,
-    },
-    {
-      input: BUTTON_REDESIGN_SIZE.XXL,
-      expected: expectedRebrandedResponsiveStylesXXL,
-    },
   ])(
     `should return rebrand responsive styles for size $input`,
     ({ input, expected }) => {
       expect(
         getResponsiveRebrandedStyleVariables({
-          redesign_size: input,
+          redesignSize: input,
         })
       ).toEqual(expected);
     }
@@ -993,7 +940,7 @@ describe("test rebrand responsive style variables for disable max height", () =>
           shouldApplyRebrandedStyles,
           disableMaxHeightSize: input,
         })
-      ).toEqual(expected);
+      ).toMatchObject(expected);
     }
   );
 });