From 5c5964cf9df28698bb53d3de82f845ceaa4a910d Mon Sep 17 00:00:00 2001
From: Nathan Vasse <nathan.vasse@gmail.com>
Date: Mon, 8 Jan 2024 11:36:43 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=90=9B(react)=20change=20most=20tertiary?=
 =?UTF-8?q?=20buttons=20to=20tertiary-text?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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
---
 .../react/src/components/DataGrid/index.stories.tsx  |  4 ++--
 .../src/components/Forms/DatePicker/Calendar.tsx     | 12 ++++++------
 .../src/components/Forms/DatePicker/CalendarCell.tsx |  2 +-
 .../components/Forms/DatePicker/DatePickerAux.tsx    |  4 ++--
 .../Forms/FileUploader/FileUploaderMulti.tsx         |  2 +-
 .../src/components/Forms/Select/mono-common.tsx      |  4 ++--
 .../src/components/Forms/Select/multi-common.tsx     |  4 ++--
 packages/react/src/components/Pagination/index.tsx   |  8 ++++----
 8 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/react/src/components/DataGrid/index.stories.tsx b/packages/react/src/components/DataGrid/index.stories.tsx
index 0c16d92..2860647 100644
--- 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
index b69391b..b725f42 100644
--- 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
index a935317..66e6d36 100644
--- 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
index f0cc620..8d8a143 100644
--- 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
index b37ae77..69e8328 100644
--- 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
index 68064e0..8f32447 100644
--- 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
index 844f208..bc5d997 100644
--- 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
index 0db2e05..f6c524b 100644
--- 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}