fix: v2/SimpleMenu - IconButton trigger style props

strapi · Oct 25, 2023 · e305a0e · e305a0e
1 parent 8f02ce1
commit e305a0e
Show file tree

Hide file tree

Showing 2 changed files with 14 additions and 4 deletions.
diff --git a/packages/strapi-design-system/src/IconButton/IconButton.tsx b/packages/strapi-design-system/src/IconButton/IconButton.tsx
@@ -106,6 +106,8 @@ export const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
   },
 );
 
+IconButton.displayName = 'IconButton';
+
 const IconButtonWrapper = styled(BaseButton)<Required<Pick<IconButtonProps, 'size' | 'variant'>>>`
   background-color: ${({ theme, variant }) => {
     if (variant === VARIANT_SECONDARY) {
@@ -210,3 +212,5 @@ export const IconButtonGroup = styled(Flex)`
     }
   }
 `;
+
+IconButtonGroup.displayName = 'IconButtonGroup';
diff --git a/packages/strapi-design-system/src/v2/SimpleMenu/Menu.tsx b/packages/strapi-design-system/src/v2/SimpleMenu/Menu.tsx
@@ -29,17 +29,23 @@ interface TriggerProps extends ButtonProps {}
 
 const MenuTrigger = forwardRef<HTMLButtonElement, TriggerProps>(
   ({ size, endIcon = <CarretDown width={`${6 / 16}rem`} height={`${4 / 16}rem`} aria-hidden />, ...props }, ref) => {
+    const isSizeS = size === 'S';
+    const isIconButton = (props.as as any)?.displayName === 'IconButton';
+    const paddingY = isSizeS ? 1 : 2;
+    const paddingX = isSizeS ? 3 : 4;
+
     return (
       <DropdownMenu.Trigger asChild>
         <Button
           ref={ref}
           type="button"
           variant="ghost"
           endIcon={endIcon}
-          paddingTop={size === 'S' ? 1 : 2}
-          paddingBottom={size === 'S' ? 1 : 2}
-          paddingLeft={size === 'S' ? 3 : 4}
-          paddingRight={size === 'S' ? 3 : 4}
+          paddingTop={isIconButton ? '0' : paddingY}
+          paddingBottom={isIconButton ? '0' : paddingY}
+          paddingLeft={isIconButton ? '0' : paddingX}
+          paddingRight={isIconButton ? '0' : paddingX}
+          justifyContent={isIconButton ? 'center' : undefined}
           {...props}
         />
       </DropdownMenu.Trigger>