Button: Fix VR in type=submit (#3941)

pinterest · Jan 16, 2025 · 55a2252 · 55a2252
1 parent 2cc3d27
commit 55a2252
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 24 deletions.
diff --git a/packages/gestalt/src/Button.tsx b/packages/gestalt/src/Button.tsx
@@ -323,7 +323,7 @@ const ButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function Butto
       <button
         ref={innerRef}
         aria-label={accessibilityLabel}
-        className={baseTypeClasses}
+        className={parentButtonClasses}
         data-test-id={dataTestId}
         disabled={disabled}
         name={name}
@@ -337,17 +337,24 @@ const ButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function Butto
         onTouchMove={handleTouchMove}
         // @ts-expect-error - TS2322 - Type '(arg1: TouchEvent<HTMLDivElement>) => void' is not assignable to type 'TouchEventHandler<HTMLButtonElement>'.
         onTouchStart={handleTouchStart}
-        style={compressStyle || undefined}
+        style={isInVRExperiment ? compressStyle || undefined : undefined}
         // @ts-expect-error - TS2322 - Type '0 | -1 | null' is not assignable to type 'number | undefined'.
         tabIndex={disabled ? null : tabIndex}
         type="submit"
       >
-        <InternalButtonContent
-          iconEnd={iconEnd}
-          size={size}
-          text={buttonText}
-          textColor={textColor}
-        />
+        <div className={childrenDivClasses} style={compressStyle || undefined}>
+          {iconEnd || iconStart ? (
+            <InternalButtonContent
+              iconEnd={iconEnd}
+              iconStart={iconStart}
+              size={size}
+              text={buttonText}
+              textColor={textColor}
+            />
+          ) : (
+            buttonText
+          )}
+        </div>
       </button>
     );
   }

diff --git a/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsell.test.tsx.snap
@@ -145,7 +145,7 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
               >
                 <button
                   aria-label="Submit button"
-                  className="button inline accessibilityOutline tapTransition md red enabled"
+                  className="button inline accessibilityOutline parentButton"
                   disabled={false}
                   onBlur={[Function]}
                   onClick={[Function]}
@@ -159,16 +159,12 @@ exports[`<BannerUpsell /> message + title + dismissButton + image + form 1`] = `
                   type="submit"
                 >
                   <div
-                    className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+                    className="button inline accessibilityOutline tapTransition md red enabled childrenDiv"
                   >
                     <div
-                      className="FlexItem"
+                      className="inverse alignCenter Text fontSize300 fontWeightSemiBold"
                     >
-                      <div
-                        className="inverse alignCenter Text fontSize300 fontWeightSemiBold"
-                      >
-                        Submit
-                      </div>
+                      Submit
                     </div>
                   </div>
                 </button>

diff --git a/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap b/packages/gestalt/src/__snapshots__/BannerUpsellForm.test.tsx.snap
@@ -45,7 +45,7 @@ exports[`BannerUpsellForm renders 1`] = `
     >
       <button
         aria-label="Submit button"
-        className="button inline accessibilityOutline tapTransition md red enabled"
+        className="button inline accessibilityOutline parentButton"
         disabled={false}
         onBlur={[Function]}
         onClick={[Function]}
@@ -59,16 +59,12 @@ exports[`BannerUpsellForm renders 1`] = `
         type="submit"
       >
         <div
-          className="Flex rowGap200 columnGap0 justifyCenter xsDirectionRow xsItemsCenter"
+          className="button inline accessibilityOutline tapTransition md red enabled childrenDiv"
         >
           <div
-            className="FlexItem"
+            className="inverse alignCenter Text fontSize300 fontWeightSemiBold"
           >
-            <div
-              className="inverse alignCenter Text fontSize300 fontWeightSemiBold"
-            >
-              Submit
-            </div>
+            Submit
           </div>
         </div>
       </button>