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

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
openfun · Jan 8, 2024 · 5c5964c · 5c5964c
1 parent 1787df0
commit 5c5964c
Show file tree

Hide file tree

Showing 8 changed files with 20 additions and 20 deletions.
diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
@@ -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>}
             />

diff --git a/packages/react/src/components/Forms/DatePicker/Calendar.tsx b/packages/react/src/components/Forms/DatePicker/Calendar.tsx
@@ -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)}

diff --git a/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx b/packages/react/src/components/Forms/DatePicker/CalendarCell.tsx
@@ -65,7 +65,7 @@ export const CalendarCell = ({ state, date }: CalendarCellProps) => {
                 : isSelected
             )
               ? "primary"
-              : "tertiary"
+              : "tertiary-text"
           }
           className={classNames(
             "c__calendar__wrapper__grid__week-row__button",

diff --git a/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx b/packages/react/src/components/Forms/DatePicker/DatePickerAux.tsx
@@ -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}

diff --git a/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx b/packages/react/src/components/Forms/FileUploader/FileUploaderMulti.tsx
@@ -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",

diff --git a/packages/react/src/components/Forms/Select/mono-common.tsx b/packages/react/src/components/Forms/Select/mono-common.tsx
@@ -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={

diff --git a/packages/react/src/components/Forms/Select/multi-common.tsx b/packages/react/src/components/Forms/Select/multi-common.tsx
@@ -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={

diff --git a/packages/react/src/components/Pagination/index.tsx b/packages/react/src/components/Pagination/index.tsx
@@ -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}