Pill large dismiss (#4003)

* fix(form-pill): fix dismiss button position for large size * fix(form-pill): add changeset * fix(form-pill): increase icon wrapper size instead of position * Update .changeset/small-turkeys-change.md Co-authored-by: Nora Krantz <[email protected]> * chore: increase size of icons and avatars inside of large form pills --------- Co-authored-by: Nora Krantz <[email protected]> Co-authored-by: “nora <[email protected]>
twilio-labs · Jul 26, 2024 · 4441e59 · 4441e59
1 parent 9838a4f
commit 4441e59
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 7 deletions.
diff --git a/.changeset/small-turkeys-change.md b/.changeset/small-turkeys-change.md
@@ -0,0 +1,6 @@
+---
+"@twilio-paste/form-pill-group": patch
+"@twilio-paste/core": patch
+---
+
+[Form Pill Group]: Fix position of dismiss button for large pill size
diff --git a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx
@@ -75,14 +75,14 @@ export const FormPillButton = React.forwardRef<HTMLElement, FormPillStylesProps>
         fontWeight="fontWeightMedium"
         outline="none"
         paddingLeft="space30"
-        paddingRight={isDismissable ? "space80" : "space30"}
+        paddingRight={isDismissable ? (size === "large" ? "space90" : "space80") : "space30"}
         transition="background-color 150ms ease-in, border-color 150ms ease-in, box-shadow 150ms ease-in, color 150ms ease-in"
         {...computedStyles}
       >
         <Box display="flex" alignItems="center" columnGap="space20" opacity={isDisabled ? 0.3 : 1}>
           {variant === "error" ? (
             <>
-              <ErrorIcon decorative size="sizeIcon10" />
+              <ErrorIcon decorative size={size === "large" ? "sizeIcon20" : "sizeIcon10"} />
               <ScreenReaderOnly>{i18nErrorLabel}</ScreenReaderOnly>
             </>
           ) : null}

diff --git a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx
@@ -12,6 +12,7 @@ import {
   selectedCloseColorStyles,
 } from "./FormPill.styles";
 import type { PillVariant } from "./types";
+import { FormPillGroupContext } from "./useFormPillState";
 
 interface PillCloseIconProps {
   onClick?: (event: React.MouseEvent<HTMLElement>) => void;
@@ -29,6 +30,8 @@ export const PillCloseIcon: React.FC<React.PropsWithChildren<PillCloseIconProps>
   variant = "default",
   pillIsHoverable = false,
 }) => {
+  const { size } = React.useContext(FormPillGroupContext);
+
   const baseStyles = selected ? selectedBaseCloseStyles[variant] : baseCloseStyles[variant];
   let colorStyles = selected ? selectedCloseColorStyles[variant] : closeColorStyles[variant];
 
@@ -49,15 +52,15 @@ export const PillCloseIcon: React.FC<React.PropsWithChildren<PillCloseIconProps>
       display="flex"
       alignItems="center"
       justifyContent="center"
-      height="sizeIcon40"
-      width="sizeIcon40"
+      height={size === "large" ? "sizeIcon50" : "sizeIcon40"}
+      width={size === "large" ? "sizeIcon50" : "sizeIcon40"}
       borderRadius="borderRadiusCircle"
       borderWidth="borderWidth10"
       borderStyle="solid"
       borderColor="transparent"
       transition="color 150ms ease-in, border-color 150ms ease-in, background-color 150ms ease-in"
     >
-      <CloseIcon decorative size="sizeIcon10" color="inherit" />
+      <CloseIcon decorative size={size === "large" ? "sizeIcon20" : "sizeIcon10"} color="inherit" />
     </Box>
   );
 };

diff --git a/packages/paste-core/components/form-pill-group/stories/index.stories.tsx b/packages/paste-core/components/form-pill-group/stories/index.stories.tsx
@@ -1,3 +1,4 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
 import { Avatar } from "@twilio-paste/avatar";
 import { Box } from "@twilio-paste/box";
 import { CalendarIcon } from "@twilio-paste/icons/esm/CalendarIcon";
@@ -38,8 +39,14 @@ export const Basic: React.FC<
             onDismiss={dismissable ? () => {} : undefined}
             disabled={disabled}
           >
-            {index % 3 === 2 ? <Avatar size="sizeIcon10" name="avatar example" src="./avatars/avatar4.png" /> : null}
-            {index % 3 === 1 ? <CalendarIcon decorative size="sizeIcon10" /> : null}
+            {index % 3 === 2 ? (
+              <Avatar
+                size={size === "large" ? "sizeIcon20" : "sizeIcon10"}
+                name="avatar example"
+                src="./avatars/avatar4.png"
+              />
+            ) : null}
+            {index % 3 === 1 ? <CalendarIcon decorative size={size === "large" ? "sizeIcon20" : "sizeIcon10"} /> : null}
             {pill}
           </FormPill>
         ))}
@@ -52,6 +59,9 @@ export const Large = (): JSX.Element => <Basic size="large" ariaLabel="Large pil
 export const Disabled = (): JSX.Element => <Basic disabled ariaLabel="Disabled pills:" />;
 export const Selected = (): JSX.Element => <Basic selected ariaLabel="Selected pills:" />;
 export const Dismissable = (): JSX.Element => <Basic dismissable ariaLabel="Dismissable pills:" />;
+export const LargeAndDismissable = (): JSX.Element => (
+  <Basic size="large" dismissable ariaLabel="Large and dismissable pills:" />
+);
 
 export const OverflowWrapping = (): JSX.Element => (
   <Box maxWidth="size40">