diff --git a/.changeset/small-turkeys-change.md b/.changeset/small-turkeys-change.md new file mode 100644 index 0000000000..d51f44aaa5 --- /dev/null +++ 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 index 9242f81854..f06f1582d5 100644 --- 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 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} > {variant === "error" ? ( <> - + {i18nErrorLabel} ) : 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 index 14594b2e60..bbf5e09530 100644 --- 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) => void; @@ -29,6 +30,8 @@ export const PillCloseIcon: React.FC 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 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" > - + ); }; 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 index cde970c838..360c1b21bd 100644 --- 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 ? : null} - {index % 3 === 1 ? : null} + {index % 3 === 2 ? ( + + ) : null} + {index % 3 === 1 ? : null} {pill} ))} @@ -52,6 +59,9 @@ export const Large = (): JSX.Element => ; export const Selected = (): JSX.Element => ; export const Dismissable = (): JSX.Element => ; +export const LargeAndDismissable = (): JSX.Element => ( + +); export const OverflowWrapping = (): JSX.Element => (