From f8c7c0dfa325d2b8e84eda0cb13405cd9c6d7647 Mon Sep 17 00:00:00 2001
From: Xiao Yijun <xiaoyijun@silverhand.io>
Date: Fri, 14 Oct 2022 10:18:06 +0800
Subject: [PATCH] refactor(console): support text button in the `Button`
 component (#2146)

---
 .../console/src/components/Alert/index.tsx    |  2 +-
 .../src/components/Button/index.module.scss   | 22 ++++++++++--------
 .../console/src/components/Button/index.tsx   |  2 +-
 .../src/components/MultiTextInput/index.tsx   | 18 ++++++---------
 .../console/src/components/Search/index.tsx   |  2 +-
 .../components/TextButton/index.module.scss   | 23 -------------------
 .../components/GuideHeader/index.tsx          |  2 +-
 .../src/pages/GetStarted/index.module.scss    |  7 +-----
 .../console/src/pages/GetStarted/index.tsx    | 17 ++++----------
 .../SignInExperience/components/ColorForm.tsx |  2 +-
 .../components/GuideModal.tsx                 |  2 +-
 .../components/LanguagesForm.tsx              |  4 +++-
 .../ManageLanguage/ManageLanguageButton.tsx   | 10 ++++++--
 .../components/index.module.scss              |  5 ++++
 .../UserDetails/components/UserConnectors.tsx |  3 ++-
 15 files changed, 49 insertions(+), 72 deletions(-)
 delete mode 100644 packages/console/src/components/TextButton/index.module.scss

diff --git a/packages/console/src/components/Alert/index.tsx b/packages/console/src/components/Alert/index.tsx
index 42bb5a66e..ac32821bb 100644
--- a/packages/console/src/components/Alert/index.tsx
+++ b/packages/console/src/components/Alert/index.tsx
@@ -38,7 +38,7 @@ const Alert = ({
       )}
       {action && onClick && (
         <div className={styles.action}>
-          <Button title={action} type="plain" onClick={onClick} />
+          <Button title={action} type="text" size="small" onClick={onClick} />
         </div>
       )}
     </div>
diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index 57e8af522..07ea78ee9 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -53,9 +53,8 @@
     height: 30px;
     padding: 0 _.unit(3);
 
-    &.plain {
+    &.text {
       height: 24px;
-      padding: 0;
     }
   }
 
@@ -63,9 +62,9 @@
     height: 36px;
     padding: 0 _.unit(4);
 
-    &.plain {
+    &.text {
+      font: var(--font-subhead-1);
       height: 28px;
-      padding: 0;
     }
   }
 
@@ -73,9 +72,10 @@
     height: 44px;
     padding: 0 _.unit(6);
 
-    &.plain {
-      height: 28px; // same as medium
-      padding: 0;
+    &.text {
+      // same as medium
+      font: var(--font-subhead-1);
+      height: 28px;
     }
   }
 
@@ -196,11 +196,13 @@
     }
   }
 
-  &.plain {
+  &.text {
     background: none;
     border-color: none;
-    font: var(--font-body-medium);
+    font: var(--font-label-large);
     color: var(--color-text-link);
+    padding: _.unit(0.5) _.unit(1);
+    border-radius: 4px;
 
     &:disabled {
       color: var(--color-disabled);
@@ -211,7 +213,7 @@
     }
 
     &:not(:disabled):hover {
-      text-decoration: underline;
+      background-color: var(--color-focused-variant);
     }
   }
 }
diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx
index 9f0ee18fb..f5dd61d14 100644
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@@ -8,7 +8,7 @@ import { Ring as Spinner } from '@/components/Spinner';
 import DangerousRaw from '../DangerousRaw';
 import * as styles from './index.module.scss';
 
-export type ButtonType = 'primary' | 'danger' | 'outline' | 'plain' | 'default' | 'branding';
+export type ButtonType = 'primary' | 'danger' | 'outline' | 'text' | 'default' | 'branding';
 
 type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
   htmlType?: 'button' | 'submit' | 'reset';
diff --git a/packages/console/src/components/MultiTextInput/index.tsx b/packages/console/src/components/MultiTextInput/index.tsx
index 67d2722bd..e3b28690b 100644
--- a/packages/console/src/components/MultiTextInput/index.tsx
+++ b/packages/console/src/components/MultiTextInput/index.tsx
@@ -1,12 +1,10 @@
 import { AdminConsoleKey } from '@logto/phrases';
-import classNames from 'classnames';
 import { KeyboardEvent, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import Minus from '@/assets/images/minus.svg';
-import * as textButtonStyles from '@/components/TextButton/index.module.scss';
-import { onKeyDownHandler } from '@/utilities/a11y';
 
+import Button from '../Button';
 import ConfirmModal from '../ConfirmModal';
 import IconButton from '../IconButton';
 import TextInput from '../TextInput';
@@ -86,15 +84,13 @@ const MultiTextInput = ({ title, value, onChange, onKeyPress, error, placeholder
           )}
         </div>
       ))}
-      <div
-        role="button"
-        tabIndex={0}
-        className={classNames(textButtonStyles.button, styles.addAnother)}
-        onKeyDown={onKeyDownHandler(handleAdd)}
+      <Button
+        size="small"
+        type="text"
+        title="general.add_another"
+        className={styles.addAnother}
         onClick={handleAdd}
-      >
-        {t('general.add_another')}
-      </div>
+      />
       <ConfirmModal
         isOpen={deleteFieldIndex !== undefined}
         confirmButtonText="general.delete"
diff --git a/packages/console/src/components/Search/index.tsx b/packages/console/src/components/Search/index.tsx
index f50ebffcb..0ddd7baf9 100644
--- a/packages/console/src/components/Search/index.tsx
+++ b/packages/console/src/components/Search/index.tsx
@@ -45,7 +45,7 @@ const Search = ({ defaultValue = '', isClearable = false, onSearch, onClearSearc
       </div>
       <Button title="general.search" onClick={handleClick} />
       {isClearable && (
-        <Button size="small" type="plain" title="general.clear_result" onClick={onClearSearch} />
+        <Button size="small" type="text" title="general.clear_result" onClick={onClearSearch} />
       )}
     </div>
   );
diff --git a/packages/console/src/components/TextButton/index.module.scss b/packages/console/src/components/TextButton/index.module.scss
deleted file mode 100644
index 35fa5c37d..000000000
--- a/packages/console/src/components/TextButton/index.module.scss
+++ /dev/null
@@ -1,23 +0,0 @@
-@use '@/scss/underscore' as _;
-
-.button {
-  display: inline-block;
-  font: var(--font-body-medium);
-  color: var(--color-text-link);
-  padding: _.unit(0.5) _.unit(1);
-  border-radius: _.unit(1);
-  text-decoration: none;
-  cursor: pointer;
-
-  svg {
-    color: var(--color-primary);
-  }
-
-  &:hover {
-    text-decoration: underline;
-  }
-
-  &:focus {
-    outline: 2px solid var(--color-focused-variant);
-  }
-}
diff --git a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
index d1f3355eb..c9513f3b3 100644
--- a/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
+++ b/packages/console/src/pages/Applications/components/GuideHeader/index.tsx
@@ -87,7 +87,7 @@ const GuideHeader = ({ appName, selectedSdk, isCompact = false, onClose }: Props
             subtitle="applications.guide.header_description"
           />
           <Spacer />
-          <Button type="plain" size="small" title="general.skip" onClick={onClose} />
+          <Button type="text" size="small" title="general.skip" onClick={onClose} />
           <Button
             className={styles.getSampleButton}
             type="outline"
diff --git a/packages/console/src/pages/GetStarted/index.module.scss b/packages/console/src/pages/GetStarted/index.module.scss
index c65f7f355..2a75cc787 100644
--- a/packages/console/src/pages/GetStarted/index.module.scss
+++ b/packages/console/src/pages/GetStarted/index.module.scss
@@ -23,12 +23,7 @@
     color: var(--color-text-secondary);
 
     .hideButton {
-      color: var(--color-text-link);
-      cursor: pointer;
-
-      &:hover {
-        text-decoration: underline;
-      }
+      display: inline-block;
     }
   }
 }
diff --git a/packages/console/src/pages/GetStarted/index.tsx b/packages/console/src/pages/GetStarted/index.tsx
index 6fc7b7004..19a457751 100644
--- a/packages/console/src/pages/GetStarted/index.tsx
+++ b/packages/console/src/pages/GetStarted/index.tsx
@@ -8,7 +8,6 @@ import Card from '@/components/Card';
 import ConfirmModal from '@/components/ConfirmModal';
 import Spacer from '@/components/Spacer';
 import useUserPreferences from '@/hooks/use-user-preferences';
-import { onKeyDownHandler } from '@/utilities/a11y';
 
 import Skeleton from './components/Skeleton';
 import useGetStartedMetadata from './hook';
@@ -44,19 +43,13 @@ const GetStarted = () => {
           <Spacer />
           <span>
             {t('get_started.subtitle_part2')}
-            <span
-              role="button"
-              tabIndex={0}
+            <Button
+              title="get_started.hide_this"
+              type="text"
+              size="small"
               className={styles.hideButton}
               onClick={showConfirmModalHandler}
-              onKeyDown={onKeyDownHandler({
-                Enter: showConfirmModalHandler,
-                ' ': showConfirmModalHandler,
-                Esc: hideConfirmModalHandler,
-              })}
-            >
-              {t('get_started.hide_this')}
-            </span>
+            />
           </span>
         </div>
       </div>
diff --git a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
index 21278806e..5b34369cd 100644
--- a/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ColorForm.tsx
@@ -77,7 +77,7 @@ const ColorForm = () => {
             <div className={styles.darkModeTip}>
               {t('sign_in_exp.color.dark_mode_reset_tip')}
               <Button
-                type="plain"
+                type="text"
                 size="small"
                 title="sign_in_exp.color.reset"
                 onClick={handleResetColor}
diff --git a/packages/console/src/pages/SignInExperience/components/GuideModal.tsx b/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
index 46af47557..2519140ed 100644
--- a/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
+++ b/packages/console/src/pages/SignInExperience/components/GuideModal.tsx
@@ -92,7 +92,7 @@ const GuideModal = ({ isOpen, onClose }: Props) => {
           <CardTitle size="small" title="sign_in_exp.title" subtitle="sign_in_exp.description" />
           <Spacer />
           <Button
-            type="plain"
+            type="text"
             size="small"
             title="general.skip"
             isLoading={isLoading}
diff --git a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
index 2eda45584..1fa734743 100644
--- a/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
+++ b/packages/console/src/pages/SignInExperience/components/LanguagesForm.tsx
@@ -51,7 +51,9 @@ const LanguagesForm = ({ isManageLanguageVisible = false }: Props) => {
           {...register('languageInfo.autoDetect')}
           label={t('sign_in_exp.others.languages.description')}
         />
-        {isManageLanguageVisible && <ManageLanguageButton />}
+        {isManageLanguageVisible && (
+          <ManageLanguageButton className={styles.manageLanguageButton} />
+        )}
       </FormField>
       <FormField title="sign_in_exp.others.languages.default_language">
         <Controller
diff --git a/packages/console/src/pages/SignInExperience/components/ManageLanguage/ManageLanguageButton.tsx b/packages/console/src/pages/SignInExperience/components/ManageLanguage/ManageLanguageButton.tsx
index e41cd7d4d..84cf838d2 100644
--- a/packages/console/src/pages/SignInExperience/components/ManageLanguage/ManageLanguageButton.tsx
+++ b/packages/console/src/pages/SignInExperience/components/ManageLanguage/ManageLanguageButton.tsx
@@ -4,14 +4,20 @@ import Button from '@/components/Button';
 
 import LanguageEditor from './LanguageEditor';
 
-const ManageLanguageButton = () => {
+type Props = {
+  className?: string;
+};
+
+const ManageLanguageButton = ({ className }: Props) => {
   const [isLanguageEditorOpen, setIsLanguageEditorOpen] = useState(false);
 
   return (
     <>
       <Button
-        type="plain"
+        type="text"
+        size="small"
         title="sign_in_exp.others.languages.manage_language"
+        className={className}
         onClick={() => {
           setIsLanguageEditorOpen(true);
         }}
diff --git a/packages/console/src/pages/SignInExperience/components/index.module.scss b/packages/console/src/pages/SignInExperience/components/index.module.scss
index 3c9afbac5..c12274bf0 100644
--- a/packages/console/src/pages/SignInExperience/components/index.module.scss
+++ b/packages/console/src/pages/SignInExperience/components/index.module.scss
@@ -27,6 +27,11 @@
   align-items: baseline;
   font: var(--font-body-medium);
   color: var(--color-text-secondary);
+  margin-top: _.unit(1);
+}
+
+.manageLanguageButton {
+  margin-top: _.unit(1);
 }
 
 .defaultLanguageDescription {
diff --git a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx b/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
index c52785b9b..46703d072 100644
--- a/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
+++ b/packages/console/src/pages/UserDetails/components/UserConnectors.tsx
@@ -126,7 +126,8 @@ const UserConnectors = ({ userId, connectors, onDelete }: Props) => {
                   <td>
                     <Button
                       title="user_details.connectors.remove"
-                      type="plain"
+                      type="text"
+                      size="small"
                       onClick={() => {
                         setDeletingConnector(connector);
                       }}