Skip to content

Commit

Permalink
fix: icon alignments and pill updates
Browse files Browse the repository at this point in the history 
Pill alignment with design system and icon fixes for badge, menu item, portrait and colour picker
  • Loading branch information
@harpalsingh
harpalsingh committed Jul 17, 2023
1 parent daabfa7 commit b55433f
Show file tree
Hide file tree
Showing 8 changed files with 47 additions and 51 deletions.
8 changes: 4 additions & 4 deletions cypress/components/pill/pill.cy.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -145,10 +145,10 @@ context("Testing Pill component", () => {
);

it.each([
[small, "16px", "10px", "0px 7px"],
[medium, "20px", "12px", "0px 11px"],
[large, "24px", "14px", "0px 15px"],
[extraLarge, "26px", "16px", "0px 19px"],
[small, "16px", "12px", "0px 8px"],
[medium, "20px", "14px", "0px 8px"],
[large, "24px", "14px", "0px 8px"],
[extraLarge, "28px", "16px", "0px 12px"],
] as [PillProps["size"], string, string, string][])(
"should render Pill component with size set to %s",
(size, height, fontSize, padding) => {
Expand Down
2 changes: 1 addition & 1 deletion src/components/badge/badge.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,7 +70,7 @@ const StyledBadge = styled.span.attrs(({ onClick }) => ({
margin-right: 0;
:before {
font-size: 16px;
font-size: 20px;
color: var(--colorsActionMajorYang100);
}
}
Expand Down
2 changes: 1 addition & 1 deletion src/components/menu/menu-item/menu-item.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ const StyledMenuItemWrapper = styled.a.attrs({
}
${StyledIcon} {
bottom: 1px;
bottom: 3px;
}
}
Expand Down
36 changes: 18 additions & 18 deletions src/components/pill/pill.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -252,10 +252,10 @@ describe("Pill", () => {
);
assertStyleMatch(
{
fontSize: "10px",
fontSize: "12px",
minHeight: "16px",
lineHeight: "16px",
padding: "0 7px",
padding: "0 8px",
},
wrapper
);
Expand All @@ -269,10 +269,10 @@ describe("Pill", () => {
);
assertStyleMatch(
{
fontSize: "12px",
fontSize: "14px",
minHeight: "20px",
lineHeight: "20px",
padding: "0 11px",
padding: "0 8px",
},
wrapper
);
Expand All @@ -289,7 +289,7 @@ describe("Pill", () => {
fontSize: "14px",
minHeight: "24px",
lineHeight: "24px",
padding: "0 15px",
padding: "0 8px",
},
wrapper
);
Expand All @@ -304,9 +304,9 @@ describe("Pill", () => {
assertStyleMatch(
{
fontSize: "16px",
minHeight: "26px",
lineHeight: "26px",
padding: "0 19px",
minHeight: "28px",
lineHeight: "28px",
padding: "0 12px",
},
wrapper
);
Expand All @@ -325,9 +325,9 @@ describe("Pill", () => {
);
assertStyleMatch(
{
fontWeight: "600",
fontWeight: "700",
position: "relative",
padding: "0 11px",
padding: "0 8px",
textAlign: "center",
},
wrapper
Expand All @@ -345,7 +345,7 @@ describe("Pill", () => {
);
assertStyleMatch(
{
padding: "0 32px 0 11px",
padding: "0 28px 0 8px",
},
wrapper
);
Expand Down Expand Up @@ -430,7 +430,7 @@ describe("Pill", () => {
);
assertStyleMatch(
{
padding: "0 24px 0 7px",
padding: "0 22px 0 8px",
minHeight: "16px",
height: "auto",
lineHeight: "16px",
Expand All @@ -453,8 +453,8 @@ describe("Pill", () => {
);
assertStyleMatch(
{
fontSize: "12px",
padding: "0 32px 0 11px",
fontSize: "14px",
padding: "0 28px 0 8px",
borderRadius: "var(--borderRadius025)",
minHeight: "20px",
height: "auto",
Expand All @@ -478,7 +478,7 @@ describe("Pill", () => {
assertStyleMatch(
{
fontSize: "14px",
padding: "0 36px 0 15px",
padding: "0 32px 0 8px",
borderRadius: "var(--borderRadius025)",
minHeight: "24px",
height: "auto",
Expand All @@ -502,11 +502,11 @@ describe("Pill", () => {
assertStyleMatch(
{
fontSize: "16px",
padding: "0 41px 0 19px",
padding: "0 36px 0 12px",
borderRadius: "var(--borderRadius025)",
minHeight: "26px",
minHeight: "28px",
height: "auto",
lineHeight: "26px",
lineHeight: "28px",
},
wrapper
);
Expand Down
4 changes: 2 additions & 2 deletions src/components/pill/pill.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,10 +13,10 @@ export const Default: ComponentStory<typeof Pill> = () => (

export const Wrapped: ComponentStory<typeof Pill> = () => (
<Box mb={1}>
<Pill maxWidth="44px" wrapText>
<Pill maxWidth="55px" wrapText>
Wrapped pill
</Pill>
<Pill ml={1} maxWidth="44px" wrapText>
<Pill ml={1} maxWidth="55px" wrapText>
Hyphe&shy;nated&shy;pill
</Pill>
</Box>
Expand Down
38 changes: 17 additions & 21 deletions src/components/pill/pill.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,9 +82,9 @@ const StyledPill = styled.span<AllStyledPillProps>`
}
return css`
font-size: 10px;
font-size: 12px;
letter-spacing: 0.7px;
font-weight: 600;
font-weight: 700;
position: relative;
display: inline-flex;
text-align: center;
Expand Down Expand Up @@ -121,7 +121,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
css`
min-height: 16px;
line-height: 16px;
font-size: 10px;
font-size: 12px;
${theme.roundedCornersOptOut &&
css`
Expand All @@ -137,7 +137,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
css`
min-height: 20px;
line-height: 20px;
font-size: 12px;
font-size: 14px;
${theme.roundedCornersOptOut &&
css`
Expand Down Expand Up @@ -167,8 +167,8 @@ const StyledPill = styled.span<AllStyledPillProps>`
${size === "XL" &&
css`
min-height: 26px;
line-height: 26px;
min-height: 28px;
line-height: 28px;
font-size: 16px;
${theme.roundedCornersOptOut &&
Expand Down Expand Up @@ -230,8 +230,6 @@ const StyledPill = styled.span<AllStyledPillProps>`
}
${StyledIcon} {
font-size: 12px;
padding: 0 4px;
height: unset;
width: unset;
color: ${contentColor};
Expand All @@ -252,48 +250,46 @@ const StyledPill = styled.span<AllStyledPillProps>`
${size === "S" &&
css`
padding: 0 24px 0 7px;
padding: 0 22px 0 8px;
button {
padding: 0;
line-height: 14px;
${addStyleToPillIcon("7px")}
line-height: 16px;
top: -2px;
${addStyleToPillIcon("16px")}
}
`}
${size === "M" &&
css`
padding: 0 32px 0 11px;
padding: 0 28px 0 8px;
button {
width: 24px;
padding: 0;
line-height: 15px;
${addStyleToPillIcon("10px")}
}
`}
${size === "L" &&
css`
padding: 0 36px 0 15px;
padding: 0 32px 0 8px;
button {
width: 28px;
padding: 0;
line-height: 16px;
${addStyleToPillIcon("12px")}
}
`}
${size === "XL" &&
css`
padding: 0 41px 0 19px;
padding: 0 36px 0 12px;
button {
width: 32px;
padding: 0;
line-height: 18px;
${addStyleToPillIcon("13px")}
}
`}
`}
Expand All @@ -302,7 +298,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
css`
${size === "S" &&
css`
padding: 0 7px;
padding: 0 8px;
button {
padding: 0;
Expand All @@ -311,7 +307,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
${size === "M" &&
css`
padding: 0 11px;
padding: 0 8px;
button {
width: 24px;
Expand All @@ -321,7 +317,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
${size === "L" &&
css`
padding: 0 15px;
padding: 0 8px;
button {
width: 28px;
Expand All @@ -331,7 +327,7 @@ const StyledPill = styled.span<AllStyledPillProps>`
${size === "XL" &&
css`
padding: 0 19px;
padding: 0 12px;
button {
width: 32px;
Expand Down
2 changes: 1 addition & 1 deletion src/components/portrait/portrait.config.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ export const PORTRAIT_SHAPES = ["circle", "square"];
export const PORTRAIT_SIZES = ["XS", "S", "M", "ML", "L", "XL", "XXL"];
export const PORTRAIT_SIZE_PARAMS = {
XS: { dimensions: 24, iconDimensions: 16 },
S: { dimensions: 32, iconDimensions: 16 },
S: { dimensions: 32, iconDimensions: 20 },
M: { dimensions: 40, iconDimensions: 24 },
ML: { dimensions: 56, iconDimensions: 32 },
L: { dimensions: 72, iconDimensions: 40 },
Expand Down
6 changes: 3 additions & 3 deletions src/components/simple-color-picker/simple-color/simple-color.style.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,13 +80,13 @@ const getIconColor = (color: string) => {
};

export const StyledTickIcon = styled(Icon)<{ color: string }>`
height: 22px;
width: 22px;
height: 20px;
width: 20px;
pointer-events: none;
display: block;
&::before {
font-size: 22px;
font-size: 20px;
color: ${({ color }) => getIconColor(color)};
}
`;

0 comments on commit b55433f

Please sign in to comment.