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

🐛(react) change most tertiary buttons to tertiary-text

Browse Source 
Since the addition of tertiary-text variant, the original tertiary
variant has seen its background color changing from transparent to
greyscale-100, the change has impacted lots of components making
them look odd. So that's why I updated most of old tertiary to
tertiary-text.

Fixes #223
This commit is contained in:
Nathan Vasse
2024-01-08 11:36:43 +01:00
committed by NathanVss
parent 1787df0853
commit 5c5964cf9d
8 changed files with 20 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -82,7 +82,7 @@ export const ClientSideWithoutPagination = () => {
id: "actions",
renderCell: () => (
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">delete</span>}
/>
@@ -225,7 +225,7 @@ export const FullServerSide = () => {
id: "actions",
renderCell: () => (
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">delete</span>}
/>

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

@@ -222,7 +222,7 @@ const CalendarAux = forwardRef(
<div className="c__calendar__wrapper__header">
<div className="c__calendar__wrapper__header__actions">
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">navigate_before</span>}
{...{
@@ -236,7 +236,7 @@ const CalendarAux = forwardRef(
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary"
color="tertiary-text"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -247,7 +247,7 @@ const CalendarAux = forwardRef(
)}
</Button>
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">navigate_next</span>}
{...{
@@ -262,7 +262,7 @@ const CalendarAux = forwardRef(
</div>
<div className="c__calendar__wrapper__header__actions">
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">navigate_before</span>}
onClick={() => state.focusPreviousSection(true)}
@@ -277,7 +277,7 @@ const CalendarAux = forwardRef(
/>
<Button
className="c__calendar__wrapper__header__actions__dropdown"
color="tertiary"
color="tertiary-text"
size="small"
iconPosition="right"
icon={<span className="material-icons">arrow_drop_down</span>}
@@ -288,7 +288,7 @@ const CalendarAux = forwardRef(
)}
</Button>
<Button
color="tertiary"
color="tertiary-text"
size="small"
icon={<span className="material-icons">navigate_next</span>}
onClick={() => state.focusNextSection(true)}

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

@@ -65,7 +65,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
: isSelected
)
? "primary"
: "tertiary"
: "tertiary-text"
}
className={classNames(
"c__calendar__wrapper__grid__week-row__button",

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

@@ -149,7 +149,7 @@ const DatePickerAux = forwardRef(
: "components.forms.date_picker.toggle_button_aria_label_open",
),
}}
color="tertiary"
color="tertiary-text"
size="small"
className="c__date-picker__wrapper__toggle"
onClick={pickerState.toggle}
@@ -166,7 +166,7 @@ const DatePickerAux = forwardRef(
"c__date-picker__inner__action--hidden":
labelAsPlaceholder || disabled,
})}
color="tertiary"
color="tertiary-text"
size="nano"
icon={<span className="material-icons">cancel</span>}
onClick={onClear}

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

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

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

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

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

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

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

@@ -103,7 +103,7 @@ export const Pagination = ({
<div className="c__pagination">
<div className="c__pagination__list">
<Button
color="tertiary"
color="tertiary-text"
aria-label={t("components.pagination.previous_aria")}
onClick={onPreviousClick}
disabled={!canPrevious}
@@ -116,7 +116,7 @@ export const Pagination = ({
{_page > (pageList[index - 1] || 0) + 1 && <span>...</span>}
{_page === page ? (
<Button
color="tertiary"
color="tertiary-text"
active={true}
aria-label={t("components.pagination.current_page_aria", {
page: _page,
@@ -127,7 +127,7 @@ export const Pagination = ({
</Button>
) : (
<Button
color="tertiary"
color="tertiary-text"
aria-label={t("components.pagination.goto_page_aria", {
page: _page,
})}
@@ -140,7 +140,7 @@ export const Pagination = ({
</Fragment>
))}
<Button
color="tertiary"
color="tertiary-text"
aria-label={t("components.pagination.next_aria")}
onClick={onNextClick}
disabled={!canNext}