From 6067852c1ca8c09fb71adba2b6b7db40fd26427f Mon Sep 17 00:00:00 2001 From: Murali Singh <68021313+muraliSingh7@users.noreply.github.com> Date: Wed, 11 Dec 2024 19:22:55 +0530 Subject: [PATCH] fix(chip): update padding for transparent variant (#7164) (#8823) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit This PR addresses the issue described in #7164, where the Chip component's padding for the Transparent variant was not correctly aligned. The following changes have been made: The padding-left for the Transparent variant is now set to 2px to improve alignment. Other chip variants retain the default horizontal padding values. These changes ensure that the Transparent chip variant is rendered consistently with the rest of the design, as described in #7164. See screenshots below for before and after comparison: Before: ![image](https://github.com/user-attachments/assets/7749e393-3a9b-4367-a6f9-cb32a9897e7d) ![image](https://github.com/user-attachments/assets/2ad80002-f867-4bf2-b27c-29392b008ed9) After: ![Screenshot 2024-12-01 at 4 02 08 AM](https://github.com/user-attachments/assets/71fb19a1-00fb-4ea3-989f-185c92221d5e) ![image](https://github.com/user-attachments/assets/7cc93c5e-d42b-4ada-bd27-178836b660b4) Please review @Bonapara and let me know if you have any feedback or concerns. --------- Co-authored-by: guillim --- .../components/RecordTableCellDisplayContainer.tsx | 2 +- packages/twenty-ui/src/display/chip/components/Chip.tsx | 5 +++++ 2 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx index c172bb8e0..c8ab53e1e 100644 --- a/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx +++ b/packages/twenty-front/src/modules/object-record/record-table/record-table-cell/components/RecordTableCellDisplayContainer.tsx @@ -8,7 +8,7 @@ const StyledOuterContainer = styled.div<{ display: flex; height: 100%; overflow: hidden; - padding-left: 6px; + padding-left: 8px; width: 100%; `; diff --git a/packages/twenty-ui/src/display/chip/components/Chip.tsx b/packages/twenty-ui/src/display/chip/components/Chip.tsx index eda194d5e..8807d25dc 100644 --- a/packages/twenty-ui/src/display/chip/components/Chip.tsx +++ b/packages/twenty-ui/src/display/chip/components/Chip.tsx @@ -115,6 +115,11 @@ const StyledContainer = withTheme(styled.div< & > svg { flex-shrink: 0; } + + padding-left: ${({ theme, variant }) => + variant === ChipVariant.Transparent + ? theme.spacing(0) + : 'var(--chip-horizontal-padding)'}; `); export const Chip = ({