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

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")}