Skip to content

Commit 6afdebd

Browse files
mihai-albu-sagemihai-albu-sage
committed
fix(secondary-button): split button additional secondary style
added additional secondary style to the split button
1 parent f8ee86f commit 6afdebd

7 files changed

+163
-11
lines changed

‎src/components/button/button-types.style.ts

+35-2
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,11 @@ const gradientSharedStyle = `
3737
}
3838
`;
3939

40-
export default (isDisabled?: boolean, destructive?: boolean) => ({
40+
export default (
41+
isDisabled?: boolean,
42+
destructive?: boolean,
43+
isWhite?: boolean,
44+
) => ({
4145
primary: `
4246
background: var(--colorsActionMajor500);
4347
border-color: transparent;
@@ -93,6 +97,20 @@ export default (isDisabled?: boolean, destructive?: boolean) => ({
9397
${makeColors("var(--colorsActionMajorYang100)")};
9498
}
9599
100+
${
101+
isWhite && (!isDisabled || !destructive)
102+
? `
103+
border-color: var(--colorsActionMajorYang100);
104+
${makeColors("var(--colorsActionMajorYang100)")};
105+
&:hover {
106+
background: var(--colorsActionMajorYang100);
107+
border-color: var(--colorsActionMajorYang100);
108+
${makeColors("var(--colorsYin100)")};
109+
}
110+
`
111+
: ""
112+
}
113+
96114
${
97115
destructive
98116
? `
@@ -108,7 +126,7 @@ export default (isDisabled?: boolean, destructive?: boolean) => ({
108126
}
109127
110128
${
111-
isDisabled
129+
isDisabled && !isWhite
112130
? `
113131
border-color: var(--colorsActionDisabled500);
114132
${makeColors("var(--colorsActionMajorYin030)")};
@@ -121,6 +139,21 @@ export default (isDisabled?: boolean, destructive?: boolean) => ({
121139
`
122140
: ""
123141
}
142+
143+
${
144+
isDisabled && isWhite
145+
? `
146+
border-color: var(--colorsActionMinorGray700);
147+
${makeColors("var(--colorsActionMinorGray700)")};
148+
&:hover {
149+
background: transparent;
150+
border-color: var(--colorsActionMinorGray700);
151+
${makeColors("var(--colorsActionMinorGray700)")};
152+
}
153+
${disabledImageStyle}
154+
`
155+
: ""
156+
}
124157
`,
125158
tertiary: `
126159
background: transparent;

‎src/components/button/button.component.tsx

+9
Original file line numberDiff line numberDiff line change
@@ -92,6 +92,13 @@ export interface ButtonProps extends SpaceProps, TagProps {
9292
* Set a class name on the button element. INTERNAL USE ONLY.
9393
*/
9494
className?: string;
95+
/**
96+
* @private
97+
* @internal
98+
* @ignore
99+
* Renders the white variant of the secondary split button. INTERNAL USE ONLY.
100+
*/
101+
isWhite?: boolean;
95102
}
96103

97104
interface RenderChildrenProps
@@ -195,6 +202,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
195202
children,
196203
destructive = false,
197204
disabled = false,
205+
isWhite = false,
198206
fullWidth: fullWidthProp = false,
199207
href,
200208
iconPosition: iconPositionProp = "before",
@@ -292,6 +300,7 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
292300
buttonType={buttonType}
293301
disabled={isDisabled}
294302
destructive={destructive}
303+
isWhite={isWhite}
295304
type={href ? undefined : "button"}
296305
iconType={iconType}
297306
size={size}

‎src/components/button/button.style.ts

+3-2
Original file line numberDiff line numberDiff line change
@@ -37,12 +37,13 @@ function stylingForType({
3737
buttonType,
3838
size,
3939
destructive,
40-
}: Pick<ButtonProps, "disabled" | "size" | "destructive"> & {
40+
isWhite,
41+
}: Pick<ButtonProps, "disabled" | "size" | "destructive" | "isWhite"> & {
4142
iconOnly?: boolean;
4243
buttonType: Required<ButtonProps>["buttonType"];
4344
}) {
4445
return css`
45-
${buttonTypes(disabled, destructive)[buttonType]};
46+
${buttonTypes(disabled, destructive, isWhite)[buttonType]};
4647
4748
${size === "small" &&
4849
css`

‎src/components/split-button/split-button-toggle.style.ts

+17-2
Original file line numberDiff line numberDiff line change
@@ -14,16 +14,17 @@ type StyledSplitButtonToggleProps = {
1414
disabled: boolean;
1515
displayed: boolean;
1616
size: "small" | "medium" | "large";
17+
isWhite?: boolean;
1718
};
1819

1920
const StyledSplitButtonToggle = styled(
2021
StyledButton,
2122
)<StyledSplitButtonToggleProps>`
22-
${({ buttonType, disabled, displayed, size }) => css`
23+
${({ buttonType, disabled, displayed, size, isWhite }) => css`
2324
border-top-left-radius: var(--borderRadius000);
2425
border-bottom-left-radius: var(--borderRadius000);
2526
26-
${!disabled && displayed
27+
${!disabled && displayed && !isWhite
2728
? css`
2829
background-color: var(--colorsActionMajor500);
2930
border-color: var(--colorsActionMajor500);
@@ -73,6 +74,20 @@ const StyledSplitButtonToggle = styled(
7374
color: var(--colorsActionMajorYang100);
7475
}
7576
}
77+
78+
${!disabled &&
79+
isWhite &&
80+
`
81+
&:focus {
82+
background-color: var(--colorsActionMajorYang100);
83+
border-color: var(--colorsActionMajorYang100);
84+
85+
&,
86+
${StyledIcon} {
87+
color: var(--colorsYin100);
88+
}
89+
}
90+
`}
7691
`}
7792
`;
7893

‎src/components/split-button/split-button.component.tsx

+7
Original file line numberDiff line numberDiff line change
@@ -57,6 +57,8 @@ export interface SplitButtonProps
5757
text: string;
5858
/** Sets rendering position of menu */
5959
position?: "left" | "right";
60+
/** Renders the white variant of the secondary split button */
61+
isWhite?: boolean;
6062
}
6163

6264
export type SplitButtonHandle = {
@@ -83,6 +85,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
8385
"data-element": dataElement,
8486
"data-role": dataRole,
8587
"aria-label": ariaLabel,
88+
isWhite = false,
8689
...rest
8790
},
8891
ref,
@@ -97,6 +100,8 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
97100
const { isInFlatTable } =
98101
useContext<FlatTableContextProps>(FlatTableContext);
99102

103+
const shouldRenderIsWhiteVariant = buttonType === "secondary" && isWhite;
104+
100105
useImperativeHandle<SplitButtonHandle, SplitButtonHandle>(
101106
ref,
102107
() => ({
@@ -140,6 +145,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
140145
onClick: handleMainClick,
141146
size,
142147
subtext,
148+
isWhite: shouldRenderIsWhiteVariant,
143149
...filterOutStyledSystemSpacingProps(rest),
144150
};
145151

@@ -148,6 +154,7 @@ export const SplitButton = forwardRef<SplitButtonHandle, SplitButtonProps>(
148154
};
149155

150156
const toggleButtonProps = {
157+
isWhite: shouldRenderIsWhiteVariant,
151158
disabled,
152159
displayed: showAdditionalButtons,
153160
onTouchStart: showButtons,

‎src/components/split-button/split-button.stories.tsx

+64-5
Original file line numberDiff line numberDiff line change
@@ -69,11 +69,27 @@ ProgrammaticFocus.parameters = { chromatic: { disableSnapshot: true } };
6969

7070
export const Disabled: Story = () => {
7171
return (
72-
<SplitButton disabled text="Split button">
73-
<Button>Button 1</Button>
74-
<Button>Button 2</Button>
75-
<Button>Button 3</Button>
76-
</SplitButton>
72+
<>
73+
<Box mb={3}>
74+
<SplitButton disabled text="Split button">
75+
<Button>Button 1</Button>
76+
<Button>Button 2</Button>
77+
<Button>Button 3</Button>
78+
</SplitButton>
79+
</Box>
80+
<Box p={2} width="298px" backgroundColor="#000">
81+
<SplitButton
82+
buttonType="secondary"
83+
text="Split button - secondary - white"
84+
isWhite
85+
disabled
86+
>
87+
<Button>Button 1</Button>
88+
<Button>Button 2</Button>
89+
<Button>Button 3</Button>
90+
</SplitButton>
91+
</Box>
92+
</>
7793
);
7894
};
7995
Disabled.storyName = "Disabled";
@@ -93,6 +109,17 @@ export const ButtonTypes: Story = () => {
93109
</SplitButton>
94110
</Box>
95111
))}
112+
<Box p={2} width="298px" backgroundColor="#000">
113+
<SplitButton
114+
buttonType="secondary"
115+
text="Split button - secondary - white"
116+
isWhite
117+
>
118+
<Button>Button 1</Button>
119+
<Button>Button 2</Button>
120+
<Button>Button 3</Button>
121+
</SplitButton>
122+
</Box>
96123
</>
97124
);
98125
};
@@ -220,3 +247,35 @@ export const InOverflowHiddenContainer: Story = () => (
220247
);
221248
InOverflowHiddenContainer.storyName = "In Overflow Hidden Container";
222249
InOverflowHiddenContainer.parameters = { chromatic: { disableSnapshot: true } };
250+
251+
export const SecondaryIsWhite: Story = () => {
252+
return (
253+
<Box p={3} backgroundColor="#000" width="400px" height="200px">
254+
<Box mb={3}>
255+
<SplitButton
256+
buttonType="secondary"
257+
text="secondary - white variant"
258+
isWhite
259+
>
260+
<Button>Button 1</Button>
261+
<Button>Button 2</Button>
262+
<Button>Button 3</Button>
263+
</SplitButton>
264+
</Box>
265+
<Box>
266+
<SplitButton
267+
buttonType="secondary"
268+
text="secondary - white variant - disabled"
269+
isWhite
270+
disabled
271+
>
272+
<Button>Button 1</Button>
273+
<Button>Button 2</Button>
274+
<Button>Button 3</Button>
275+
</SplitButton>
276+
</Box>
277+
</Box>
278+
);
279+
};
280+
SecondaryIsWhite.storyName = "White variant";
281+
SecondaryIsWhite.parameters = { chromatic: { disableSnapshot: false } };

‎src/components/split-button/split-button.test.tsx

+28
Original file line numberDiff line numberDiff line change
@@ -984,3 +984,31 @@ test("should support navigating the additional buttons via shift+tab key, hide t
984984
expect(screen.queryByRole("list")).not.toBeInTheDocument();
985985
expect(toggle).toHaveFocus();
986986
});
987+
988+
test("should render white variant", async () => {
989+
render(
990+
<SplitButton text="Main" isWhite>
991+
<Button>Single Button</Button>
992+
</SplitButton>,
993+
);
994+
995+
const mainButton = screen.getByRole("button", { name: "Main" });
996+
997+
expect(mainButton).toHaveStyle({
998+
borderColor: "var(--colorsActionMajorYang100)",
999+
});
1000+
});
1001+
1002+
test("should render disabled white variant", () => {
1003+
render(
1004+
<SplitButton text="Main" isWhite disabled>
1005+
<Button>Single Button</Button>
1006+
</SplitButton>,
1007+
);
1008+
1009+
const mainButton = screen.getByRole("button", { name: "Main" });
1010+
1011+
expect(mainButton).toHaveStyle({
1012+
borderColor: "var(--colorsActionMinorGray700)",
1013+
});
1014+
});

0 commit comments

Comments
 (0)