fix(chip): update padding for transparent variant (#7164) (#8823)

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 <guigloo@msn.com>
This commit is contained in:
Murali Singh
2024-12-11 19:22:55 +05:30
committed by GitHub
parent 841b1f0e11
commit 6067852c1c
2 changed files with 6 additions and 1 deletions

View File

@ -8,7 +8,7 @@ const StyledOuterContainer = styled.div<{
display: flex;
height: 100%;
overflow: hidden;
padding-left: 6px;
padding-left: 8px;
width: 100%;
`;

View File

@ -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 = ({