From ffeaec21525a25eddb6792b9778b8f7cedf6f37c Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 26 Jul 2024 20:15:45 +0530 Subject: [PATCH 1/5] fix(form-pill): fix dismiss button position for large size --- .../components/form-pill-group/src/PillCloseIcon.tsx | 5 ++++- .../components/form-pill-group/stories/index.stories.tsx | 3 +++ 2 files changed, 7 insertions(+), 1 deletion(-) 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..a44ff080c0 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]; @@ -45,7 +48,7 @@ export const PillCloseIcon: React.FC {...computedStyles} position="absolute" right={0} - top={0} + top={size === "large" ? 2 : 0} display="flex" alignItems="center" justifyContent="center" 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..7206b772bb 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 @@ -52,6 +52,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 => ( From 14034a9a4464eeb2002cea156a1e2ec8f5330187 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 26 Jul 2024 20:20:09 +0530 Subject: [PATCH 2/5] fix(form-pill): add changeset --- .changeset/small-turkeys-change.md | 6 ++++++ 1 file changed, 6 insertions(+) create mode 100644 .changeset/small-turkeys-change.md diff --git a/.changeset/small-turkeys-change.md b/.changeset/small-turkeys-change.md new file mode 100644 index 0000000000..ced3bc8f1a --- /dev/null +++ b/.changeset/small-turkeys-change.md @@ -0,0 +1,6 @@ +--- +"@twilio-paste/form-pill-group": minor +"@twilio-paste/core": minor +--- + +[Form Pill Group]: Fix position of dismiss button for large pill size From a5937fa8993599340c753d8713de4dca49ab8e28 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 26 Jul 2024 20:35:40 +0530 Subject: [PATCH 3/5] fix(form-pill): increase icon wrapper size instead of position --- .../components/form-pill-group/src/FormPillButton.tsx | 2 +- .../components/form-pill-group/src/PillCloseIcon.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) 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..c68abd7877 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx @@ -75,7 +75,7 @@ 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} > 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 a44ff080c0..046edb03c8 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -48,12 +48,12 @@ export const PillCloseIcon: React.FC {...computedStyles} position="absolute" right={0} - top={size === "large" ? 2 : 0} + top={0} 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" From 1441493cbbc879b956140854193a171e61782c66 Mon Sep 17 00:00:00 2001 From: Shoaib Ahmed Date: Fri, 26 Jul 2024 21:08:02 +0530 Subject: [PATCH 4/5] Update .changeset/small-turkeys-change.md Co-authored-by: Nora Krantz <75342690+nkrantz@users.noreply.github.com> --- .changeset/small-turkeys-change.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/.changeset/small-turkeys-change.md b/.changeset/small-turkeys-change.md index ced3bc8f1a..d51f44aaa5 100644 --- a/.changeset/small-turkeys-change.md +++ b/.changeset/small-turkeys-change.md @@ -1,6 +1,6 @@ --- -"@twilio-paste/form-pill-group": minor -"@twilio-paste/core": minor +"@twilio-paste/form-pill-group": patch +"@twilio-paste/core": patch --- [Form Pill Group]: Fix position of dismiss button for large pill size From 4cc2bed6f9a95d17edfebf384b492217c2b33cf6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E2=80=9Cnora?= Date: Fri, 26 Jul 2024 15:53:46 -0400 Subject: [PATCH 5/5] chore: increase size of icons and avatars inside of large form pills --- .../components/form-pill-group/src/FormPillButton.tsx | 2 +- .../components/form-pill-group/src/PillCloseIcon.tsx | 2 +- .../form-pill-group/stories/index.stories.tsx | 11 +++++++++-- 3 files changed, 11 insertions(+), 4 deletions(-) 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 c68abd7877..f06f1582d5 100644 --- a/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx +++ b/packages/paste-core/components/form-pill-group/src/FormPillButton.tsx @@ -82,7 +82,7 @@ export const FormPillButton = React.forwardRef {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 046edb03c8..bbf5e09530 100644 --- a/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx +++ b/packages/paste-core/components/form-pill-group/src/PillCloseIcon.tsx @@ -60,7 +60,7 @@ export const PillCloseIcon: React.FC 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 7206b772bb..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} ))}