From ee175e70fc0c86fe105e9f1c43f6a943b8d95904 Mon Sep 17 00:00:00 2001
From: Wang Sijie <wangsijie@silverhand.io>
Date: Wed, 16 Mar 2022 15:55:15 +0800
Subject: [PATCH] feat(console): button with title and icon (#393)

---
 .../src/components/Button/index.module.scss   | 12 +++++++++++
 .../console/src/components/Button/index.tsx   | 21 +++++++++++++++----
 packages/console/src/icons/Search.tsx         | 19 +++++++++++++++++
 3 files changed, 48 insertions(+), 4 deletions(-)
 create mode 100644 packages/console/src/icons/Search.tsx

diff --git a/packages/console/src/components/Button/index.module.scss b/packages/console/src/components/Button/index.module.scss
index de01b008a..b95c5dcad 100644
--- a/packages/console/src/components/Button/index.module.scss
+++ b/packages/console/src/components/Button/index.module.scss
@@ -7,11 +7,23 @@
   font: var(--font-button);
   transition: background 0.2s ease-in-out;
   @include _.text-ellipsis;
+  display: flex;
+  align-items: center;
 
   &:not(:disabled) {
     cursor: pointer;
   }
 
+  .icon {
+    display: block;
+    width: 16px;
+    height: 16px;
+
+    &:not(:last-child) {
+      margin-right: _.unit(2);
+    }
+  }
+
   &.small {
     height: 30px;
     padding: 0 _.unit(3);
diff --git a/packages/console/src/components/Button/index.tsx b/packages/console/src/components/Button/index.tsx
index cd8166c35..1a490e48f 100644
--- a/packages/console/src/components/Button/index.tsx
+++ b/packages/console/src/components/Button/index.tsx
@@ -1,22 +1,34 @@
 import { I18nKey } from '@logto/phrases';
 import classNames from 'classnames';
-import React, { HTMLProps } from 'react';
+import React, { HTMLProps, ReactNode } from 'react';
 import { useTranslation } from 'react-i18next';
 
 import * as styles from './index.module.scss';
 
-export type Props = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
+type BaseProps = Omit<HTMLProps<HTMLButtonElement>, 'type' | 'size' | 'title'> & {
   htmlType?: 'button' | 'submit' | 'reset';
-  title: I18nKey;
   type?: 'primary' | 'danger' | 'outline' | 'plain' | 'default';
   size?: 'small' | 'medium' | 'large';
 };
 
+type TitleButtonProps = BaseProps & {
+  title: I18nKey;
+  icon?: ReactNode;
+};
+
+type IconButtonProps = BaseProps & {
+  title?: I18nKey;
+  icon: ReactNode;
+};
+
+export type Props = TitleButtonProps | IconButtonProps;
+
 const Button = ({
   htmlType = 'button',
   type = 'default',
   size = 'medium',
   title,
+  icon,
   ...rest
 }: Props) => {
   const { t } = useTranslation();
@@ -27,7 +39,8 @@ const Button = ({
       type={htmlType}
       {...rest}
     >
-      {t(title)}
+      {icon && <span className={styles.icon}>{icon}</span>}
+      {title && <span>{t(title)}</span>}
     </button>
   );
 };
diff --git a/packages/console/src/icons/Search.tsx b/packages/console/src/icons/Search.tsx
new file mode 100644
index 000000000..8e18c4049
--- /dev/null
+++ b/packages/console/src/icons/Search.tsx
@@ -0,0 +1,19 @@
+import React, { SVGProps } from 'react';
+
+const Search = (props: SVGProps<SVGSVGElement>) => (
+  <svg
+    width="18"
+    height="18"
+    viewBox="0 0 18 18"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    {...props}
+  >
+    <path
+      d="M16.5583 13.025L14.8333 11.2583C14.4623 10.9056 13.9942 10.6719 13.4894 10.5873C12.9845 10.5027 12.4658 10.5709 12 10.7833L11.25 10.0333C12.1338 8.85244 12.5374 7.38058 12.3796 5.91404C12.2218 4.44751 11.5143 3.0952 10.3995 2.12935C9.28474 1.16349 7.84545 0.65581 6.37139 0.708499C4.89733 0.761189 3.49796 1.37034 2.45498 2.41332C1.41199 3.4563 0.802845 4.85567 0.750156 6.32973C0.697466 7.80379 1.20515 9.24308 2.171 10.3579C3.13686 11.4727 4.48916 12.1802 5.9557 12.338C7.42223 12.4958 8.8941 12.0921 10.075 11.2083L10.8167 11.95C10.5792 12.4164 10.4942 12.9455 10.5734 13.4628C10.6526 13.9801 10.8922 14.4594 11.2583 14.8333L13.025 16.6C13.4938 17.0682 14.1292 17.3311 14.7917 17.3311C15.4542 17.3311 16.0896 17.0682 16.5583 16.6C16.7965 16.3672 16.9856 16.0891 17.1148 15.7822C17.244 15.4752 17.3105 15.1455 17.3105 14.8125C17.3105 14.4795 17.244 14.1498 17.1148 13.8429C16.9856 13.5359 16.7965 13.2578 16.5583 13.025ZM9.49167 9.49168C8.90853 10.0733 8.16609 10.4691 7.35812 10.6291C6.55015 10.789 5.71292 10.7058 4.95217 10.3902C4.19143 10.0745 3.5413 9.54044 3.08393 8.85546C2.62656 8.17048 2.38245 7.36532 2.38245 6.54168C2.38245 5.71804 2.62656 4.91287 3.08393 4.2279C3.5413 3.54292 4.19143 3.00886 4.95217 2.69319C5.71292 2.37752 6.55015 2.29439 7.35812 2.4543C8.16609 2.61422 8.90853 3.01001 9.49167 3.59168C9.8797 3.97873 10.1876 4.43852 10.3976 4.94473C10.6077 5.45094 10.7158 5.99362 10.7158 6.54168C10.7158 7.08974 10.6077 7.63242 10.3976 8.13863C10.1876 8.64484 9.8797 9.10463 9.49167 9.49168ZM15.3833 15.3833C15.3059 15.4615 15.2137 15.5234 15.1121 15.5658C15.0106 15.6081 14.9017 15.6298 14.7917 15.6298C14.6817 15.6298 14.5727 15.6081 14.4712 15.5658C14.3696 15.5234 14.2775 15.4615 14.2 15.3833L12.4333 13.6167C12.3552 13.5392 12.2932 13.447 12.2509 13.3455C12.2086 13.2439 12.1868 13.135 12.1868 13.025C12.1868 12.915 12.2086 12.8061 12.2509 12.7045C12.2932 12.603 12.3552 12.5108 12.4333 12.4333C12.5108 12.3552 12.603 12.2932 12.7045 12.2509C12.8061 12.2086 12.915 12.1868 13.025 12.1868C13.135 12.1868 13.2439 12.2086 13.3455 12.2509C13.447 12.2932 13.5392 12.3552 13.6167 12.4333L15.3833 14.2C15.4614 14.2775 15.5234 14.3696 15.5657 14.4712C15.6081 14.5727 15.6298 14.6817 15.6298 14.7917C15.6298 14.9017 15.6081 15.0106 15.5657 15.1122C15.5234 15.2137 15.4614 15.3059 15.3833 15.3833Z"
+      fill="#747778"
+    />
+  </svg>
+);
+
+export default Search;