Skip to content

Commit d03d3a1

Browse files
gjonesgjones
authored
Updating styles for button groups (#631)
* Updating styles for button groups * Making updates based on feedback. * Fixing panel stroke issue
1 parent 8d1191c commit d03d3a1

File tree

5 files changed

+84
-40
lines changed

5 files changed

+84
-40
lines changed

‎src/components/ButtonGroup/ButtonGroup.tsx‎

Lines changed: 15 additions & 25 deletions
Original file line numberDiff line numberDiff line change
@@ -67,26 +67,24 @@ interface ButtonProps {
6767
}
6868

6969
const ButtonGroupWrapper = styled.div<{ $fillWidth?: boolean; $type?: ButtonGroupType }>`
70-
box-sizing: border-box;
7170
display: inline-flex;
71+
box-sizing: border-box;
7272
flex-direction: row;
7373
justify-content: center;
7474
align-items: center;
75-
padding: 0px;
76-
gap: ${({ theme, $type = "default" }) => theme.click.button.group.space.gap[$type]};
77-
border: 1px solid
78-
${({ theme, $type = "default" }) =>
79-
theme.click.button.group.color.panel.stroke[$type]};
75+
padding: ${({ theme, $type = "default" }) =>
76+
`${theme.click.button.group.space.panel[$type].x} ${theme.click.button.group.space.panel[$type].y}`};
77+
gap: ${({ theme, $type = "default" }) =>
78+
theme.click.button.group.space.panel[$type].gap};
79+
border: ${({ theme, $type = "default" }) =>
80+
$type === "default"
81+
? `1px solid ${theme.click.button.group.color.panel.stroke[$type]}`
82+
: "none"};
8083
background: ${({ theme }) => theme.click.button.group.color.background.panel};
81-
border-radius: ${({ theme }) => theme.click.button.group.radii.all};
84+
border-radius: ${({ theme }) => theme.click.button.group.radii.panel.all};
8285
width: ${({ $fillWidth }) => ($fillWidth ? "100%" : "auto")};
8386
`;
8487

85-
const endRadii = "var(--click-button-button-group-radii-end)";
86-
const leftBorderRadius = `${endRadii} 0px 0px ${endRadii}`;
87-
const rightBorderRadius = `0px ${endRadii} ${endRadii} 0px`;
88-
const centerBorderRadius = "var(--click-button-button-group-radii-center)";
89-
9088
const Button = styled.button.attrs<ButtonProps>((props: ButtonProps) => ({
9189
"aria-pressed": props.$active,
9290
}))`
@@ -95,18 +93,19 @@ const Button = styled.button.attrs<ButtonProps>((props: ButtonProps) => ({
9593
flex-direction: row;
9694
justify-content: center;
9795
align-items: center;
98-
border: none;
9996
background: ${({ $active, theme }: ButtonProps) =>
10097
$active
10198
? theme.click.button.group.color.background.active
10299
: theme.click.button.group.color.background.default};
103100
color: ${({ theme }) => theme.click.button.group.color.text.default};
104101
font: ${({ theme }) => theme.click.button.group.typography.label.default};
105-
padding: ${({ theme }) => theme.click.button.basic.space.y}
106-
${({ theme }) => theme.click.button.basic.space.x};
107-
gap: ${({ theme }) => theme.click.button.basic.space.group};
102+
padding: ${({ theme, $type = "default" }) =>
103+
`${theme.click.button.group.space.button[$type].y} ${theme.click.button.group.space.button[$type].x}`};
108104
${({ $fillWidth = false }) => ($fillWidth ? "flex: 1;" : "")};
105+
border-radius: ${({ theme, $type = "default" }) =>
106+
theme.click.button.group.radii.button[$type].all};
109107
cursor: pointer;
108+
border: none;
110109
111110
&:hover {
112111
background: ${({ theme }) => theme.click.button.group.color.background.hover};
@@ -141,13 +140,4 @@ const Button = styled.button.attrs<ButtonProps>((props: ButtonProps) => ({
141140
theme.click.button.group.color.background["disabled-active"]};
142141
}
143142
}
144-
145-
border-radius: ${({ theme, $type, $position }: ButtonProps) =>
146-
$type === "borderless"
147-
? theme.click.button.group.radii.all
148-
: $position === "left"
149-
? leftBorderRadius
150-
: $position === "right"
151-
? rightBorderRadius
152-
: centerBorderRadius};
153143
`;

‎src/styles/types.ts‎

Lines changed: 32 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -712,8 +712,17 @@
712712
},
713713
"group": {
714714
"radii": {
715-
"all": string,
716-
"end": string
715+
"button": {
716+
"default": {
717+
"all": string
718+
},
719+
"borderless": {
720+
"all": string
721+
}
722+
},
723+
"panel": {
724+
"all": string
725+
}
717726
},
718727
"typography": {
719728
"label": {
@@ -731,9 +740,27 @@
731740
}
732741
},
733742
"space": {
734-
"gap": {
735-
"default": string,
736-
"borderless": string
743+
"panel": {
744+
"default": {
745+
"x": string,
746+
"y": string,
747+
"gap": string
748+
},
749+
"borderless": {
750+
"x": string,
751+
"y": string,
752+
"gap": string
753+
}
754+
},
755+
"button": {
756+
"default": {
757+
"y": string,
758+
"x": string
759+
},
760+
"borderless": {
761+
"y": string,
762+
"x": string
763+
}
737764
}
738765
},
739766
"color": {

‎src/styles/variables.dark.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -419,7 +419,7 @@
419419
"background": {
420420
"default": "rgba(0,0,0,0)",
421421
"hover": "#282828",
422-
"active": "rgb(17.8% 17.8% 17.8%)",
422+
"active": "#414141",
423423
"disabled": "rgba(0,0,0,0)",
424424
"disabled-active": "lch(0 0 0 / 0)",
425425
"panel": "rgba(0,0,0,0)"

‎src/styles/variables.json‎

Lines changed: 34 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -711,8 +711,17 @@
711711
},
712712
"group": {
713713
"radii": {
714-
"all": "0.25rem",
715-
"end": "0"
714+
"button": {
715+
"default": {
716+
"all": "2px"
717+
},
718+
"borderless": {
719+
"all": "0.25rem"
720+
}
721+
},
722+
"panel": {
723+
"all": "0.25rem"
724+
}
716725
},
717726
"typography": {
718727
"label": {
@@ -730,18 +739,36 @@
730739
}
731740
},
732741
"space": {
733-
"gap": {
734-
"default": "0",
735-
"borderless": "0.25rem"
742+
"panel": {
743+
"default": {
744+
"x": "3px",
745+
"y": "3px",
746+
"gap": "3px"
747+
},
748+
"borderless": {
749+
"x": "0",
750+
"y": "0",
751+
"gap": "0.25rem"
752+
}
753+
},
754+
"button": {
755+
"default": {
756+
"y": "1.5px",
757+
"x": "0.75rem"
758+
},
759+
"borderless": {
760+
"y": "5.5px",
761+
"x": "1rem"
762+
}
736763
}
737764
},
738765
"color": {
739766
"background": {
740767
"default": "rgba(0,0,0,0)",
741768
"hover": "#f6f7fa",
742-
"active": "lch(97.3 1.53 272)",
769+
"active": "lch(95.3 1.54 272)",
743770
"disabled": "rgba(0,0,0,0)",
744-
"disabled-active": "lch(77.8 1.22 272)",
771+
"disabled-active": "lch(76.2 1.23 272)",
745772
"panel": "rgba(0,0,0,0)"
746773
},
747774
"text": {

‎src/styles/variables.light.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -419,9 +419,9 @@
419419
"background": {
420420
"default": "rgba(0,0,0,0)",
421421
"hover": "#f6f7fa",
422-
"active": "lch(97.3 1.53 272)",
422+
"active": "lch(95.3 1.54 272)",
423423
"disabled": "rgba(0,0,0,0)",
424-
"disabled-active": "lch(77.8 1.22 272)",
424+
"disabled-active": "lch(76.2 1.23 272)",
425425
"panel": "rgba(0,0,0,0)"
426426
},
427427
"text": {

0 commit comments

Comments
 (0)