refactor(console): support text button in the Button component (#2146)

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>

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

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';

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"

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>
   );

packages/console/src/components/TextButton/index.module.scss

@@ -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);
-  }
-}

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"

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;
     }
   }
 }

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>

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}

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}

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

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

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 {

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