studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

♻️(react) update Button component props and refactor related components

Browse Source 
This commit modifies the Button component to switch the `variant` and
`color` props, ensuring consistency across various components that
utilize the Button. The changes include updates in the Alert, Modal,
Tooltip, and other components to reflect this new prop structure.
Additionally, several test and story files have been adjusted to
accommodate these changes, enhancing the overall component architecture.
This commit is contained in:
Nathan Panchout
2025-09-18 15:19:01 +02:00
committed by NathanVss
parent f93a83655c
commit 748d070bd9
27 changed files with 186 additions and 186 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
packages/react/src/components/Alert/AlertAdditionalExpandable.tsx
View File

@@ -16,8 +16,8 @@ export const AlertAdditionalExpandable = (props: AlertProps) => {
const iconButton = (
<Button
variant={props.type}
color="tertiary"
color={props.type}
variant="tertiary"
size="nano"
aria-label={
expanded

14
packages/react/src/components/Alert/Utils.tsx
View File

@@ -14,7 +14,7 @@ export const AlertWrapper = (props: AlertProps) => {
props.className,
{
"c__alert--hide": props.hide,
},
}
)}
>
{props.children}
@@ -42,8 +42,8 @@ export const AlertClose = (props: AlertProps) => {
return (
props.canClose && (
<Button
variant={props.type}
color="tertiary"
color={props.type}
variant="tertiary"
size="small"
icon={<span className="material-icons">close</span>}
aria-label={t("components.alert.close_aria_label")}
@@ -60,8 +60,8 @@ export const AlertButtons = (props: AlertProps) => {
<>
{props.tertiaryLabel && (
<Button
color="tertiary"
variant={props.type}
variant="tertiary"
color={props.type}
onClick={props.tertiaryOnClick}
{...props.tertiaryProps}
>
@@ -70,8 +70,8 @@ export const AlertButtons = (props: AlertProps) => {
)}
{props.primaryLabel && (
<Button
variant={props.type}
color="secondary"
color={props.type}
variant="secondary"
onClick={props.primaryOnClick}
{...props.primaryProps}
>

30
packages/react/src/components/Alert/index.spec.tsx
View File

@@ -17,7 +17,7 @@ describe("<Alert/>", () => {
render(
<CunninghamProvider>
<Alert type={type}>Alert component</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
const $icon = document.querySelector(".c__alert__icon");
if (icon) {
@@ -32,7 +32,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} additional="Additional information">
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
expect(screen.getByText("Additional information")).toBeInTheDocument();
});
@@ -42,7 +42,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} primaryLabel="Primary">
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
screen.getByRole("button", { name: "Primary" });
});
@@ -52,7 +52,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} tertiaryLabel="Tertiary">
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
screen.getByRole("button", { name: "Tertiary" });
});
@@ -66,7 +66,7 @@ describe("<Alert/>", () => {
>
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
screen.getByRole("button", { name: "Primary" });
screen.getByRole("button", { name: "Tertiary" });
@@ -78,14 +78,14 @@ describe("<Alert/>", () => {
type={VariantType.INFO}
buttons={
<>
<Button color="primary">Primary Custom</Button>
<Button color="secondary">Secondary Custom</Button>
<Button variant="primary">Primary Custom</Button>
<Button variant="secondary">Secondary Custom</Button>
</>
}
>
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
screen.getByRole("button", { name: "Primary Custom" });
screen.getByRole("button", { name: "Secondary Custom" });
@@ -96,7 +96,7 @@ describe("<Alert/>", () => {
<Alert type={VariantType.INFO} canClose={true}>
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
screen.getByText("Alert component");
@@ -165,14 +165,14 @@ describe("<Alert/>", () => {
>
Alert component
</Alert>
</CunninghamProvider>,
</CunninghamProvider>
);
const user = userEvent.setup();
screen.getByText("Alert component");
expect(
screen.queryByText("Additional information"),
screen.queryByText("Additional information")
).not.toBeInTheDocument();
const $expandButton = screen.getByRole("button", { name: "Expand alert" });
@@ -184,7 +184,7 @@ describe("<Alert/>", () => {
await user.click($shrinkButton);
expect(
screen.queryByText("Additional information"),
screen.queryByText("Additional information")
).not.toBeInTheDocument();
});
it("can expand the alert controlled", async () => {
@@ -226,7 +226,7 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false");
expect(
screen.queryByText("Additional information"),
screen.queryByText("Additional information")
).not.toBeInTheDocument();
// Expand from alert.
@@ -246,14 +246,14 @@ describe("<Alert/>", () => {
screen.getByText("Expanded: false");
expect(
screen.queryByText("Additional information"),
screen.queryByText("Additional information")
).not.toBeInTheDocument();
});
it("renders with className", async () => {
render(<Alert className="my-custom-class" />);
expect(
document.querySelector(".c__alert.my-custom-class"),
document.querySelector(".c__alert.my-custom-class")
).toBeInTheDocument();
});
});

4
packages/react/src/components/Alert/index.stories.tsx
View File

@@ -58,10 +58,10 @@ export const CustomButtons: Story = {
canClose: true,
buttons: (
<div style={{ display: "flex", gap: "0.5rem" }}>
<Button variant="brand" color="primary">
<Button color="brand" variant="primary">
Primary
</Button>
<Button variant="brand" color="secondary">
<Button color="brand" variant="secondary">
Secondary
</Button>
</div>

74
packages/react/src/components/Button/index.stories.tsx
View File

@@ -11,10 +11,10 @@ export default meta;
type Story = StoryObj<typeof Button>;
type AllButtonsProps = ButtonProps & {
variant: ButtonProps["variant"];
color: ButtonProps["color"];
};
const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
const AllButtons = ({ color = "brand" }: AllButtonsProps) => {
return (
<div
style={{
@@ -33,24 +33,24 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
justifyContent: "start",
}}
>
<h4 className={`clr-content-semantic-${variant}-primary`}>Primary</h4>
<Button {...Primary.args} variant={variant} />
<Button {...PrimaryDisabled.args} variant={variant} />
<h4 className={`clr-content-semantic-${color}-primary`}>Primary</h4>
<Button {...Primary.args} color={color} />
<Button {...PrimaryDisabled.args} color={color} />
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<h4 className={`clr-content-semantic-${variant}-primary`}>Secondary</h4>
<Button {...Secondary.args} variant={variant} />
<Button {...SecondaryDisabled.args} variant={variant} />
<h4 className={`clr-content-semantic-${color}-primary`}>Secondary</h4>
<Button {...Secondary.args} color={color} />
<Button {...SecondaryDisabled.args} color={color} />
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<h4 className={`clr-content-semantic-${variant}-primary`}>Tertiary</h4>
<Button {...BrandTertiary.args} variant={variant} />
<Button {...TertiaryDisabled.args} variant={variant} />
<h4 className={`clr-content-semantic-${color}-primary`}>Tertiary</h4>
<Button {...BrandTertiary.args} color={color} />
<Button {...TertiaryDisabled.args} color={color} />
</div>
<div style={{ display: "flex", flexDirection: "column", gap: "1rem" }}>
<h4 className={`clr-content-semantic-${variant}-primary`}>Bordered</h4>
<Button {...Bordered.args} variant={variant} />
<Button {...BrandBorderedDisabled.args} variant={variant} />
<h4 className={`clr-content-semantic-${color}-primary`}>Bordered</h4>
<Button {...Bordered.args} color={color} />
<Button {...BrandBorderedDisabled.args} color={color} />
</div>
</div>
);
@@ -58,44 +58,44 @@ const AllButtons = ({ variant = "brand" }: AllButtonsProps) => {
export const AllBrands: Story = {
render: () => {
return <AllButtons variant="brand" />;
return <AllButtons color="brand" />;
},
};
export const AllNeutrals: Story = {
render: () => {
return <AllButtons variant="neutral" />;
return <AllButtons color="neutral" />;
},
};
export const AllWarnings: Story = {
render: () => {
return <AllButtons variant="warning" />;
return <AllButtons color="warning" />;
},
};
export const AllErrors: Story = {
render: () => {
return <AllButtons variant="error" />;
return <AllButtons color="error" />;
},
};
export const AllSuccesses: Story = {
render: () => {
return <AllButtons variant="success" />;
return <AllButtons color="success" />;
},
};
export const AllInfos: Story = {
render: () => {
return <AllButtons variant="info" />;
return <AllButtons color="info" />;
},
};
const Primary: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
icon: <span className="material-icons">bolt</span>,
},
};
@@ -103,7 +103,7 @@ const Primary: Story = {
const PrimaryDisabled: Story = {
args: {
children: "Disabled",
color: "primary",
variant: "primary",
disabled: true,
icon: <span className="material-icons">bolt</span>,
},
@@ -112,7 +112,7 @@ const PrimaryDisabled: Story = {
const Secondary: Story = {
args: {
children: "Secondary",
color: "secondary",
variant: "secondary",
icon: <span className="material-icons">bolt</span>,
},
};
@@ -120,7 +120,7 @@ const Secondary: Story = {
const SecondaryDisabled: Story = {
args: {
children: "Disabled",
color: "secondary",
variant: "secondary",
disabled: true,
icon: <span className="material-icons">bolt</span>,
},
@@ -129,7 +129,7 @@ const SecondaryDisabled: Story = {
const BrandTertiary: Story = {
args: {
children: "Tertiary",
color: "tertiary",
variant: "tertiary",
icon: <span className="material-icons">bolt</span>,
},
};
@@ -137,7 +137,7 @@ const BrandTertiary: Story = {
const TertiaryDisabled: Story = {
args: {
children: "Disabled",
color: "tertiary",
variant: "tertiary",
disabled: true,
icon: <span className="material-icons">bolt</span>,
},
@@ -146,7 +146,7 @@ const TertiaryDisabled: Story = {
const Bordered: Story = {
args: {
children: "Bordered",
color: "bordered",
variant: "bordered",
icon: <span className="material-icons">bolt</span>,
},
};
@@ -154,7 +154,7 @@ const Bordered: Story = {
const BrandBorderedDisabled: Story = {
args: {
children: " Disabled",
color: "bordered",
variant: "bordered",
disabled: true,
icon: <span className="material-icons">bolt</span>,
},
@@ -163,14 +163,14 @@ const BrandBorderedDisabled: Story = {
export const Medium: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
},
};
export const Small: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
size: "small",
},
};
@@ -178,7 +178,7 @@ export const Small: Story = {
export const Nano: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
size: "nano",
},
};
@@ -186,7 +186,7 @@ export const Nano: Story = {
export const FullWidth: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
fullWidth: true,
},
};
@@ -194,7 +194,7 @@ export const FullWidth: Story = {
export const FullWidthWithIcon: Story = {
args: {
children: "Primary",
color: "primary",
variant: "primary",
fullWidth: true,
icon: <span className="material-icons">bolt</span>,
},
@@ -204,7 +204,7 @@ export const IconLeft: Story = {
args: {
children: "Icon",
icon: <span className="material-icons">bolt</span>,
color: "primary",
variant: "primary",
},
};
@@ -213,7 +213,7 @@ export const IconRight: Story = {
children: "Icon",
iconPosition: "right",
icon: <span className="material-icons">bolt</span>,
color: "primary",
variant: "primary",
},
};
@@ -221,7 +221,7 @@ export const IconOnly: Story = {
args: {
"aria-label": "Button with only an icon",
icon: <span className="material-icons">bolt</span>,
color: "primary",
variant: "primary",
},
};
@@ -229,7 +229,7 @@ export const AsLink: Story = {
args: {
children: "Go to fun-mooc.fr",
icon: <span className="material-icons">link</span>,
color: "primary",
variant: "primary",
href: "https://www.fun-mooc.fr/",
target: "_blank",
rel: "noopener noreferrer",

16
packages/react/src/components/Button/index.tsx
View File

@@ -13,7 +13,7 @@ export type ButtonElement = HTMLButtonElement & HTMLAnchorElement;
export type ButtonProps = Omit<DomProps, "color"> &
RefAttributes<ButtonElement> & {
size?: "medium" | "small" | "nano";
variant?:
color?:
| "brand"
| "neutral"
| "info"
@@ -21,7 +21,7 @@ export type ButtonProps = Omit<DomProps, "color"> &
| "warning"
| "error"
| "success";
color?: "primary" | "secondary" | "tertiary" | "bordered";
variant?: "primary" | "secondary" | "tertiary" | "bordered";
icon?: ReactNode;
iconPosition?: "left" | "right";
active?: boolean;
@@ -30,10 +30,10 @@ export type ButtonProps = Omit<DomProps, "color"> &
export const Button = ({
children,
color = "primary",
variant = "primary",
size = "medium",
iconPosition = "left",
variant = "brand",
color = "brand",
icon,
active,
className,
@@ -43,8 +43,8 @@ export const Button = ({
}: ButtonProps) => {
const classes = [
"c__button",
"c__button--" + variant,
["c__button--", variant, "--", color].join(""),
"c__button--" + color,
["c__button--", color, "--", variant].join(""),
"c__button--" + size,
className,
];
@@ -60,7 +60,7 @@ export const Button = ({
if (fullWidth) {
classes.push("c__button--full-width");
}
if (["primary-text", "tertiary-text"].includes(color)) {
if (["primary-text", "tertiary-text"].includes(variant)) {
classes.push("c__button--text");
}
if (props.href && props.disabled) {
@@ -79,6 +79,6 @@ export const Button = ({
{!!icon && iconPosition === "left" && iconElement}
{children}
{!!icon && iconPosition === "right" && iconElement}
</>,
</>
);
};

32
packages/react/src/components/DataGrid/index.spec.tsx
View File

@@ -97,7 +97,7 @@ describe("<DataGrid/>", () => {
fetchMock.mockIf(
"https://example.com/?page=1&sort=lastName&sortOrder=desc",
() => deferred.promise,
() => deferred.promise
);
render(<Component />);
@@ -115,8 +115,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({
rows: database.slice(0, 10),
count: database.length,
}),
),
})
)
);
// Make sure the loader disappears.
@@ -124,8 +124,8 @@ describe("<DataGrid/>", () => {
expect(
screen.queryByRole("status", {
name: "Loading data",
}),
).toBeNull(),
})
).toBeNull()
);
// Make sure the rows are rendered.
@@ -154,7 +154,7 @@ describe("<DataGrid/>", () => {
deferred = new Deferred();
fetchMock.mockIf(
"https://example.com/?page=2&sort=lastName&sortOrder=desc",
() => deferred.promise,
() => deferred.promise
);
// Go to page 2.
@@ -187,8 +187,8 @@ describe("<DataGrid/>", () => {
JSON.stringify({
rows: database.slice(10, 20),
count: database.length,
}),
),
})
)
);
// Make sure the loader disappears.
@@ -196,8 +196,8 @@ describe("<DataGrid/>", () => {
expect(
screen.queryByRole("status", {
name: "Loading data",
}),
).toBeNull(),
})
).toBeNull()
);
// Make sure the rows are rendered.
@@ -248,7 +248,7 @@ describe("<DataGrid/>", () => {
id: "buttonValidator",
renderCell: () => (
<Button
color="tertiary"
variant="tertiary"
size="small"
icon={<span className="material-icons">delete</span>}
/>
@@ -330,15 +330,15 @@ describe("<DataGrid/>", () => {
expect(tds.length).toBe(3);
expect(tds[0].textContent).toEqual(row.firstName);
expect(Array.from(tds[0].classList)).toContain(
"c__datagrid__row__cell--highlight",
"c__datagrid__row__cell--highlight"
);
expect(tds[1].textContent).toEqual(row.lastName);
expect(Array.from(tds[1].classList)).not.toContain(
"c__datagrid__row__cell--highlight",
"c__datagrid__row__cell--highlight"
);
expect(tds[2].textContent).toEqual(row.email);
expect(Array.from(tds[2].classList)).toContain(
"c__datagrid__row__cell--highlight",
"c__datagrid__row__cell--highlight"
);
});
});
@@ -395,10 +395,10 @@ describe("<DataGrid/>", () => {
rows={[]}
className="my-custom-class"
/>
</CunninghamProvider>,
</CunninghamProvider>
);
expect(
document.querySelector(".c__datagrid.my-custom-class"),
document.querySelector(".c__datagrid.my-custom-class")
).toBeInTheDocument();
});

18
packages/react/src/components/DataGrid/index.stories.tsx
View File

@@ -43,7 +43,7 @@ export const EmptyCustomWithButton = () => {
emptyPlaceholderLabel="This table is empty, create the first object"
emptyCta={
<Button
color="secondary"
variant="secondary"
icon={<span className="material-icons">add</span>}
>
Create object
@@ -114,7 +114,7 @@ export const ClientSideWithoutPagination = () => {
id: "actions",
renderCell: () => (
<Button
color="tertiary"
variant="tertiary"
size="small"
icon={<span className="material-icons">delete</span>}
/>
@@ -198,14 +198,14 @@ export const FullServerSide = () => {
setTimeout(() => {
// Set the pagination length.
pagination.setPagesCount(
Math.ceil(sortedDatabase.length / pagination.pageSize),
Math.ceil(sortedDatabase.length / pagination.pageSize)
);
// Select the rows to display on the current page.
setRows(
sortedDatabase.slice(
(pagination.page - 1) * pagination.pageSize,
pagination.page * pagination.pageSize,
),
pagination.page * pagination.pageSize
)
);
setIsLoading(false);
}, 1000);
@@ -254,8 +254,8 @@ export const FullServerSide = () => {
id: "actions",
renderCell: () => (
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
icon={<span className="material-icons">delete</span>}
/>
@@ -286,7 +286,7 @@ export const DataListOnly = () => {
id: "actions",
renderCell: () => {
return (
<Button size="small" color="secondary">
<Button size="small" variant="secondary">
Do it
</Button>
);
@@ -328,7 +328,7 @@ export const WithColumnWidth = () => {
size: 50,
renderCell: () => (
<Button
color="tertiary"
variant="tertiary"
size="small"
icon={<span className="material-icons">delete</span>}
/>

24
packages/react/src/components/Forms/DatePicker/Calendar.tsx
View File

@@ -256,8 +256,8 @@ const CalendarAux = ({
<div className="c__calendar__wrapper__header">
<div className="c__calendar__wrapper__header__actions">
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
icon={<span className="material-icons">navigate_before</span>}
{...{
@@ -272,8 +272,8 @@ const CalendarAux = ({
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -285,8 +285,8 @@ const CalendarAux = ({
)}
</Button>
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
icon={<span className="material-icons">navigate_next</span>}
type="button"
@@ -302,8 +302,8 @@ const CalendarAux = ({
</div>
<div className="c__calendar__wrapper__header__actions">
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
icon={<span className="material-icons">navigate_before</span>}
onClick={() => state.focusPreviousSection(true)}
@@ -318,8 +318,8 @@ const CalendarAux = ({
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -331,8 +331,8 @@ const CalendarAux = ({
)}
</Button>
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
icon={<span className="material-icons">navigate_next</span>}
onClick={() => state.focusNextSection(true)}

4
packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
View File

@@ -58,8 +58,8 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
>
<Button
size="small"
variant={isSelected ? "brand" : "neutral"}
color={
color={isSelected ? "brand" : "neutral"}
variant={
(
isRangeCalendar(state)
? isSelectionStart || isSelectionEnd

8
packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
View File

@@ -150,8 +150,8 @@ const DatePickerAux = ({
? "components.forms.date_picker.toggle_button_aria_label_close"
: "components.forms.date_picker.toggle_button_aria_label_open"
)}
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="small"
className="c__date-picker__wrapper__toggle"
icon={
@@ -167,8 +167,8 @@ const DatePickerAux = ({
"c__date-picker__inner__action--hidden":
labelAsPlaceholder || disabled,
})}
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
size="nano"
icon={<span className="material-icons">close</span>}
onClick={onClear}

4
packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
View File

@@ -38,8 +38,8 @@ export const FileUploaderMulti = ({
<div className="c__file-uploader__file__specs">
<span>{formatBytes(file.size)}</span>
<Button
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="nano"
aria-label={t(
"components.forms.file_uploader.delete_file_name",

4
packages/react/src/components/Forms/Input/InputPassword.tsx
View File

@@ -22,8 +22,8 @@ export const InputPassword = (props: Omit<InputProps, "rightIcon">) => {
{showPassword ? "visibility_off" : "visibility"}
</span>
}
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="small"
aria-label={t(
`components.forms.input.password.${showPassword ? "hide" : "show"}_password`

8
packages/react/src/components/Forms/Select/mono-common.tsx
View File

@@ -138,8 +138,8 @@ export const SelectMonoAux = ({
{clearable && !disabled && downshiftReturn.selectedItem && (
<>
<Button
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="nano"
aria-label={t(
"components.forms.select.clear_button_aria_label"
@@ -157,8 +157,8 @@ export const SelectMonoAux = ({
)}
<Button
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="nano"
className="c__select__inner__actions__open"
icon={

8
packages/react/src/components/Forms/Select/multi-common.tsx
View File

@@ -117,8 +117,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
props.selectedItems.length > 0 && (
<>
<Button
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="nano"
aria-label={t(
"components.forms.select.clear_all_button_aria_label"
@@ -135,8 +135,8 @@ export const SelectMultiAux = ({ children, ...props }: SelectMultiAuxProps) => {
</>
)}
<Button
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="nano"
className="c__select__inner__actions__open"
icon={

4
packages/react/src/components/Forms/Select/multi-selected-items.tsx
View File

@@ -39,8 +39,8 @@ const SelectedItemsChips = ({
<SelectedOption option={selectedItemForRender} {...props} />
<Button
tabIndex={-1}
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
disabled={disabled}
size="small"
aria-label={t("components.forms.select.clear_button_aria_label")}

2
packages/react/src/components/Modal/ConfirmationModal.tsx
View File

@@ -20,7 +20,7 @@ export const ConfirmationModal = ({
actions={
<>
<Button
color="secondary"
variant="secondary"
fullWidth={true}
onClick={() => onDecide(null)}
>

4
packages/react/src/components/Modal/DeleteConfirmationModal.tsx
View File

@@ -23,7 +23,7 @@ export const DeleteConfirmationModal = ({
actions={
<>
<Button
color="secondary"
variant="secondary"
fullWidth={true}
onClick={() => onDecide(null)}
>
@@ -32,7 +32,7 @@ export const DeleteConfirmationModal = ({
<Button
fullWidth={true}
onClick={() => onDecide("delete")}
variant="error"
color="error"
>
{t("components.modals.helpers.delete_confirmation.delete")}
</Button>

18
packages/react/src/components/Modal/EdgeCases.stories.tsx
View File

@@ -57,11 +57,11 @@ export const StackedModals = {
Open Modals
</Button>
<Modal
leftActions={<Button color="tertiary">Tertiary</Button>}
leftActions={<Button variant="tertiary">Tertiary</Button>}
rightActions={
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
</>
}
size={ModalSize.LARGE}
@@ -70,11 +70,11 @@ export const StackedModals = {
{longLorem.text}
</Modal>
<Modal
leftActions={<Button color="tertiary">Tertiary</Button>}
leftActions={<Button variant="tertiary">Tertiary</Button>}
rightActions={
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
</>
}
size={ModalSize.MEDIUM}
@@ -83,11 +83,11 @@ export const StackedModals = {
{longLorem.text}
</Modal>
<Modal
leftActions={<Button color="tertiary">Tertiary</Button>}
leftActions={<Button variant="tertiary">Tertiary</Button>}
rightActions={
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
</>
}
size={ModalSize.SMALL}

26
packages/react/src/components/Modal/index.stories.tsx
View File

@@ -97,7 +97,7 @@ export const PrimaryButton: Story = {
args: {
size: ModalSize.MEDIUM,
rightActions: (
<Button color="primary" fullWidth={true}>
<Button variant="primary" fullWidth={true}>
Primary
</Button>
),
@@ -108,7 +108,7 @@ export const SecondaryButton: Story = {
args: {
size: ModalSize.MEDIUM,
rightActions: (
<Button color="secondary" fullWidth={true}>
<Button variant="secondary" fullWidth={true}>
Secondary
</Button>
),
@@ -119,12 +119,12 @@ export const TwoButtons: Story = {
args: {
size: ModalSize.MEDIUM,
leftActions: (
<Button color="secondary" fullWidth={true}>
<Button variant="secondary" fullWidth={true}>
Secondary
</Button>
),
rightActions: (
<Button color="primary" fullWidth={true}>
<Button variant="primary" fullWidth={true}>
Primary
</Button>
),
@@ -135,16 +135,16 @@ export const ThreeButtons: Story = {
args: {
size: ModalSize.MEDIUM,
leftActions: (
<Button color="tertiary" fullWidth={true}>
<Button variant="tertiary" fullWidth={true}>
Tertiary
</Button>
),
rightActions: (
<>
<Button color="secondary" fullWidth={true}>
<Button variant="secondary" fullWidth={true}>
Secondary
</Button>
<Button color="primary" fullWidth={true}>
<Button variant="primary" fullWidth={true}>
Primary
</Button>
</>
@@ -157,8 +157,8 @@ export const CenterButtons: Story = {
size: ModalSize.MEDIUM,
actions: (
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
</>
),
},
@@ -179,7 +179,7 @@ export const ExampleApplication: Story = {
touch.
</>
),
rightActions: <Button color="primary">I understand</Button>,
rightActions: <Button variant="primary">I understand</Button>,
},
parameters: {
docs: {
@@ -193,11 +193,11 @@ export const ExampleApplication: Story = {
export const FullWithContent: Story = {
args: {
size: ModalSize.FULL,
leftActions: <Button color="tertiary">Tertiary</Button>,
leftActions: <Button variant="tertiary">Tertiary</Button>,
rightActions: (
<>
<Button color="secondary">Secondary</Button>
<Button color="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
</>
),
children: longLorem.text,

4
packages/react/src/components/Modal/index.tsx
View File

@@ -99,8 +99,8 @@ export const ModalInner = ({ closeOnEsc = true, ...props }: ModalProps) => {
<div className="c__modal__close">
<Button
icon={<span className="material-icons">close</span>}
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
size="small"
onClick={props.onClose}
/>

16
packages/react/src/components/Pagination/index.tsx
View File

@@ -106,8 +106,8 @@ export const Pagination = ({
<div className="c__pagination">
<div className="c__pagination__list">
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
aria-label={t("components.pagination.previous_aria")}
onClick={onPreviousClick}
disabled={!canPrevious}
@@ -122,8 +122,8 @@ export const Pagination = ({
)}
{_page === page ? (
<Button
variant="neutral"
color="bordered"
color="neutral"
variant="bordered"
active={true}
aria-label={t("components.pagination.current_page_aria", {
page: _page,
@@ -134,8 +134,8 @@ export const Pagination = ({
</Button>
) : (
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
aria-label={t("components.pagination.goto_page_aria", {
page: _page,
})}
@@ -148,8 +148,8 @@ export const Pagination = ({
</Fragment>
))}
<Button
variant="neutral"
color="tertiary"
color="neutral"
variant="tertiary"
aria-label={t("components.pagination.next_aria")}
onClick={onNextClick}
disabled={!canNext}

2
packages/react/src/components/Toast/index.spec.tsx
View File

@@ -97,7 +97,7 @@ describe("<Toast />", () => {
<Button
onClick={() =>
toast("Toast content", VariantType.NEUTRAL, {
actions: <Button color="tertiary">Tertiary</Button>,
actions: <Button variant="tertiary">Tertiary</Button>,
})
}
>

4
packages/react/src/components/Toast/index.stories.tsx
View File

@@ -78,8 +78,8 @@ export const InfoCustom: Story = {
type: VariantType.INFO,
actions: (
<>
<Button color="primary">Primary</Button>
<Button color="secondary">Secondary</Button>
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
</>
),
},

4
packages/react/src/components/Toast/index.tsx
View File

@@ -45,7 +45,7 @@ export const Toast = (props: ToastProps) => {
const removeAfterAnimation = async () => {
await Promise.allSettled(
container.current!.getAnimations().map((animation) => animation.finished),
container.current!.getAnimations().map((animation) => animation.finished)
);
props.onDelete?.();
};
@@ -71,7 +71,7 @@ export const Toast = (props: ToastProps) => {
{props.primaryLabel && (
<div className="c__toast__content__buttons">
<Button
color="primary"
variant="primary"
onClick={props.primaryOnClick}
{...props.primaryProps}
>

20
packages/react/src/components/Tooltip/index.spec.tsx
View File

@@ -14,10 +14,10 @@ describe("<Tooltip />", () => {
it("appear on button hover and then disappear", async () => {
render(
<Tooltip content="Hi there" closeDelay={0}>
<Button size="nano" color="tertiary">
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>,
</Tooltip>
);
const button = screen.getByRole("button");
@@ -33,10 +33,10 @@ describe("<Tooltip />", () => {
it("appear on button focus and then disappear", async () => {
render(
<Tooltip content="Hi there" closeDelay={0}>
<Button size="nano" color="tertiary">
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>,
</Tooltip>
);
expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -51,10 +51,10 @@ describe("<Tooltip />", () => {
it("sets entering and exiting class", async () => {
render(
<Tooltip content="Hi there" closeDelay={0}>
<Button size="nano" color="tertiary">
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>,
</Tooltip>
);
expect(screen.queryByText("Hi there")).not.toBeInTheDocument();
@@ -102,10 +102,10 @@ describe("<Tooltip />", () => {
}
closeDelay={0}
>
<Button size="nano" color="tertiary">
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>,
</Tooltip>
);
const button = screen.getByRole("button");
@@ -128,10 +128,10 @@ describe("<Tooltip />", () => {
closeDelay={0}
className="my-custom-class"
>
<Button size="nano" color="tertiary">
<Button size="nano" variant="tertiary">
⬅️
</Button>
</Tooltip>,
</Tooltip>
);
const button = screen.getByRole("button");

16
packages/react/src/components/Tooltip/index.stories.tsx
View File

@@ -26,8 +26,8 @@ export const Default = {
<Button
size="small"
icon={<span className="material-icons">info</span>}
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
/>
),
content:
@@ -40,22 +40,22 @@ export const Placements = {
return (
<div>
<Tooltip placement="left" content="Hi there">
<Button size="nano" color="tertiary" variant="neutral">
<Button size="nano" variant="tertiary" color="neutral">
⬅️
</Button>
</Tooltip>
<Tooltip placement="bottom" content="Hi there">
<Button size="nano" color="tertiary" variant="neutral">
<Button size="nano" variant="tertiary" color="neutral">
⬇️
</Button>
</Tooltip>
<Tooltip placement="top" content="Hi there">
<Button size="nano" color="tertiary" variant="neutral">
<Button size="nano" variant="tertiary" color="neutral">
⬆️
</Button>
</Tooltip>
<Tooltip placement="right" content="Hi there">
<Button size="nano" color="tertiary" variant="neutral">
<Button size="nano" variant="tertiary" color="neutral">
➡️
</Button>
</Tooltip>
@@ -131,8 +131,8 @@ export const WithHtml = {
<Button
size="small"
icon={<span className="material-icons">info</span>}
color="tertiary"
variant="neutral"
variant="tertiary"
color="neutral"
/>
),
placement: "right",