IconButtonFloating: reverting circle to squircle (#3784)

pinterest · Oct 1, 2024 · f784f35 · f784f35
1 parent 9c8baac
commit f784f35
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 5 deletions.
diff --git a/packages/gestalt/src/IconButton/InternalIconButton.tsx b/packages/gestalt/src/IconButton/InternalIconButton.tsx
@@ -52,7 +52,6 @@ type Props = {
     zIndex?: Indexable;
   };
   type?: 'submit' | 'button';
-  variant?: 'floating' | 'default';
 };
 
 const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(function IconButton(
@@ -78,7 +77,6 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
     tabIndex = 0,
     tooltip,
     type,
-    variant,
   }: Props,
   ref,
 ) {
@@ -179,7 +177,6 @@ const InternalIconButtonWithForwardRef = forwardRef<HTMLButtonElement, Props>(fu
           icon={icon}
           iconColor={iconColor}
           padding={padding}
-          rounding={variant === 'floating' ? 'circle' : undefined}
           selected={selected}
           size={size}
         />

diff --git a/packages/gestalt/src/IconButtonFloating.tsx b/packages/gestalt/src/IconButtonFloating.tsx
@@ -2,6 +2,7 @@ import { forwardRef } from 'react';
 import Box from './Box';
 import InternalIconButton from './IconButton/InternalIconButton';
 import icons from './icons/index';
+import useInExperiment from './useInExperiment';
 import { Indexable } from './zIndex';
 
 type Props = {
@@ -84,8 +85,13 @@ const IconButtonFloatingWithForwardRef = forwardRef<HTMLButtonElement, Props>(
     }: Props,
     ref,
   ) {
+    const isInVRExperiment = useInExperiment({
+      webExperimentName: 'web_gestalt_visualRefresh',
+      mwebExperimentName: 'web_gestalt_visualRefresh',
+    });
+
     return (
-      <Box borderStyle="shadow" color="default" rounding="circle">
+      <Box borderStyle="shadow" color="default" rounding={isInVRExperiment ? 4 : 'circle'}>
         <InternalIconButton
           ref={ref}
           accessibilityControls={accessibilityControls}
@@ -100,7 +106,6 @@ const IconButtonFloatingWithForwardRef = forwardRef<HTMLButtonElement, Props>(
           selected={selected}
           size="xl"
           tooltip={tooltip}
-          variant="floating"
         />
       </Box>
     );