docs: add some components to the storybook docs (#1901)

* fix(alert): fixed the problem of not being able to customize the icon * docs(alert): add story docs * docs(avatar): add story docs docs(avatar): add story * fix(checkbox): fix style of checkbox component fix(checkbox): fix style * docs(checkbox): add story * docs(pagination): add story Co-authored-by: maxin <maxin@growingio.com>
growingio · Mar 14, 2022 · 230f320 · 230f320 · vercel · Mar 14, 2022
1 parent 3f833e5
commit 230f320
Show file tree

Hide file tree

Showing 25 changed files with 629 additions and 666 deletions.
diff --git a/.storybook/index.less b/.storybook/index.less
@@ -25,7 +25,7 @@
   }
 }
 
-.sbdocs-content {
+.sb-show-main {
   code:not([class]) {
     margin: 0;
     overflow-x: auto;

diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -21,6 +21,7 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
     const [alertStatus, setAlertStatus] = useState(true);
 
     const getIcon = () => {
+      if (icon) return icon;
       switch (type) {
         case 'success':
           return <CheckCircleFilled />;
@@ -31,13 +32,13 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
         case 'info':
           return <InfoCircleFilled />;
         default:
-          return icon || <InfoCircleFilled />;
+          return <InfoCircleFilled />;
       }
     };
 
-    const closeAlert = () => {
+    const closeAlert = (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => {
       setAlertStatus(false);
-      onClose?.();
+      onClose?.(event);
     };
 
     return alertStatus ? (

diff --git a/src/alert/demos/Alert.stories.tsx b/src/alert/demos/Alert.stories.tsx
@@ -1,9 +1,9 @@
+/* eslint-disable no-console */
 import React from 'react';
-import { Story, Meta } from '@storybook/react/types-6-0';
-import { action } from '@storybook/addon-actions';
+import { Meta } from '@storybook/react/types-6-0';
+import { CheckCircleOutlined, CheckOutlined } from '@gio-design/icons';
 import Docs from './AlertPage';
 import Alert from '../index';
-import { AlertProps } from '../interfaces';
 import '../style';
 
 export default {
@@ -27,66 +27,53 @@ export default {
   },
 } as Meta;
 
-const DemoTemplate: Story<AlertProps> = (args) => (
-  <div>
-    <Alert {...args} type="info" style={{ width: '%100' }} onClose={action('close')} />
+export const Default = () => (
+  <>
+    <Alert message="This is an info alert" type="info" />
     <br />
-    <Alert {...args} type="warning" style={{ width: 800 }} onClose={action('close')} />
+    <Alert message="This is an error alert" type="error" />
     <br />
-    <Alert {...args} type="success" style={{ width: 500 }} onClose={action('close')} />
+    <Alert message="This is a success alert" type="success" />
     <br />
-    <Alert {...args} type="error" style={{ width: 300 }} onClose={action('close')} />
-  </div>
-);
-const Template: Story<AlertProps> = (args) => (
-  <div>
-    <Alert type="info" style={{ width: '%100' }} onClose={action('close')} {...args} />
-  </div>
+    <Alert message="This is a warning alert" type="warning" />
+  </>
 );
 
-export const Demo = DemoTemplate.bind({});
-Demo.args = {
-  message: 'This is an example of an embedded banner',
-  description:
-    'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
-};
-export const Default: Story<AlertProps> = (args) => (
-  <div>
-    <Alert style={{ width: '%100' }} onClose={action('close')} {...args} />
-  </div>
+export const Description = () => (
+  <>
+    <Alert message="Info" description="This is an info alert" type="info" />
+    <br />
+    <Alert message="Error" description="This is an error alert" type="error" />
+    <br />
+    <Alert message="Success" description="This is a success alert" type="success" />
+    <br />
+    <Alert message="Warning" description="This is a warning alert" type="warning" />
+  </>
 );
-Default.args = {
-  message: 'This is an example of an embedded banner',
-  description:
-    'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
-};
-export const NoDescription = Template.bind({});
-NoDescription.args = {
-  showIcon: true,
-  closeable: true,
-  message: 'This is an example of an embedded banner',
-};
 
-export const NoTitle = Template.bind({});
-NoTitle.args = {
-  showIcon: true,
-  closeable: true,
-  description:
-    'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
-};
-
-export const NoIcon = Template.bind({});
-NoIcon.args = {
-  closeable: true,
-  message: 'This is an example of an embedded banner',
-  description:
-    'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
-};
+export const Icons = () => (
+  <>
+    <Alert message="Info" description="This is an info alert" type="info" showIcon />
+    <br />
+    <Alert message="Error" description="This is an error alert" type="error" showIcon />
+    <br />
+    <Alert message="Success" description="This is a success alert" type="success" showIcon />
+    <br />
+    <Alert message="Warning" description="This is a warning alert" type="warning" showIcon />
+    <br />
+    <br />
+    <Alert message="Success" description="This is a success alert" type="success" showIcon icon={<CheckOutlined />} />
+    <br />
+    <Alert
+      message="Success"
+      description="This is a success alert"
+      type="success"
+      showIcon
+      icon={<CheckCircleOutlined />}
+    />
+  </>
+);
 
-export const NoClose = Template.bind({});
-NoClose.args = {
-  showIcon: true,
-  message: 'This is an example of an embedded banner',
-  description:
-    'Use this if you want to put it inside of another thing like this panel. Heres how you would format it, syntax.',
-};
+export const Closeable = () => (
+  <Alert message="Info" description="This is an info alert" type="info" closeable onClose={(e) => console.log(e)} />
+);
diff --git a/src/alert/demos/AlertPage.tsx b/src/alert/demos/AlertPage.tsx
@@ -1,57 +1,68 @@
 import React from 'react';
-import { Canvas, Title, Heading, Story, Subheading, ArgsTable } from '@storybook/addon-docs';
+import { Canvas, Title, Heading, Story, Subheading, ArgsTable, Description, Subtitle } from '@storybook/addon-docs';
 import { useIntl } from 'react-intl';
+import { Figma } from 'storybook-addon-designs/blocks';
 import Alert from '../Alert';
 
-export default function ListPage() {
+export default function AlertPage() {
   const { formatMessage } = useIntl();
 
   return (
     <>
       <Title>{formatMessage({ defaultMessage: 'Alert 警告信息' })}</Title>
-      <p>
-        当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的，例如未对公众号进行授权则影响某些功能的使用。
-      </p>
-      <p>通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。</p>
-      <p> Alert宽度根据不同使用场景，可以设置为固定宽度，内容超长时，换行展示。</p>
-      <p>
-        <a href="https://www.figma.com/file/lLYusioN7e9ifkQnIXeT4G/GIO-Design-(Running-File)?node-id=4093%3A45313">
-          Figma
-        </a>
-      </p>
-      <p>Upgrading Guide</p>
-      <ul>
-        <li>样式变化：4种颜色样式变化，边框，对齐问题，样式更新。</li>
-        <li>API变化：size大小控制去除，texticon自定义关闭按钮去除。</li>
-      </ul>
+      <Description>
+        {formatMessage({
+          defaultMessage: '当某个页面需要向用户显示警告、提示的信息时使用，这部分信息是用户必须了解的。',
+        })}
+      </Description>
+      <Subtitle>{formatMessage({ defaultMessage: '使用场景' })}</Subtitle>
+      <Description>
+        {formatMessage({ defaultMessage: '通常为页面级提示信息，提示重要性高，通常位置在页面或弹窗顶部。' })}
+      </Description>
+      <Subtitle>{formatMessage({ defaultMessage: '设计稿' })}</Subtitle>
+      <Figma
+        height="50%"
+        collapsable
+        url="https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GIO-Design?node-id=4093%3A45313"
+      />
+
       <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
-      <Subheading>{formatMessage({ defaultMessage: 'Demo' })}</Subheading>
-      <Canvas>
-        <Story id="upgraded-alert--demo" />
-      </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: 'default' })}</Subheading>
-      <Canvas>
-        <Story id="upgraded-alert--default" />
-      </Canvas>
 
-      <Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 关闭' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '简单的警告提示' })}</Subheading>
+      <Description>
+        {formatMessage({ defaultMessage: '`Alert` 组件有四种不同程度的级别，每种都有自己独特的颜色。' })}
+      </Description>
       <Canvas>
-        <Story id="upgraded-alert--no-description" />
+        <Story id="upgraded-alert--default" />
       </Canvas>
 
-      <Subheading>{formatMessage({ defaultMessage: 'Icon & 正文 & 关闭' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '描述信息' })}</Subheading>
+      <Description>
+        {formatMessage({ defaultMessage: '您可以使用 `description` 属性在标题下方显示描述信息。' })}
+      </Description>
       <Canvas>
-        <Story id="upgraded-alert--no-title" />
+        <Story id="upgraded-alert--description" />
       </Canvas>
 
-      <Subheading>{formatMessage({ defaultMessage: '标题 & 正文 & 关闭' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '图标' })}</Subheading>
+      <Description>
+        {formatMessage({
+          defaultMessage: '您可以设置 `showIcon` 属性来显示默认的图标。您也可以设置 `icon` 属性，覆盖默认的图标。',
+        })}
+      </Description>
       <Canvas>
-        <Story id="upgraded-alert--no-icon" />
+        <Story id="upgraded-alert--icons" />
       </Canvas>
 
-      <Subheading>{formatMessage({ defaultMessage: 'Icon & 标题 & 正文 ' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '可关闭的' })}</Subheading>
+      <Description>
+        {formatMessage({
+          defaultMessage:
+            '您可以设置 `closeable` 属性，在 Alert 组件的右侧展示一个关闭按钮，点击后会隐藏 Alert 组件，同时触发 `onClose` 事件。',
+        })}
+      </Description>
       <Canvas>
-        <Story id="upgraded-alert--no-close" />
+        <Story id="upgraded-alert--closeable" />
       </Canvas>
 
       <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>

diff --git a/src/alert/interfaces.ts b/src/alert/interfaces.ts
@@ -1,6 +1,7 @@
 export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
-   指定警告提示的样式
+   * 指定警告提示的样式
+   * @default `info`
    */
   type?: 'success' | 'info' | 'warning' | 'error';
   /**
@@ -16,7 +17,8 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
    */
   message?: React.ReactNode;
   /**
-   是否显示辅助图标
+   * 是否显示辅助图标
+   * @default `false`
    */
   showIcon?: boolean;
   /**
@@ -26,5 +28,5 @@ export interface AlertProps extends React.HTMLAttributes<HTMLDivElement> {
   /**
    关闭时触发的回调函数
    */
-  onClose?: () => void;
+  onClose?: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void;
 }
diff --git a/src/alert/style/index.less b/src/alert/style/index.less
@@ -24,10 +24,7 @@
     & .@{alert-prefix-cls}-content-title {
       width: 100%;
       overflow: hidden;
-      font-weight: 500;
-      font-size: 14px;
-      font-style: normal;
-      line-height: 22px;
+      .text-h4();
       text-overflow: ellipsis;
     }
     & .@{alert-prefix-cls}-content-gap {

diff --git a/src/alert/style/index.ts b/src/alert/style/index.ts
@@ -1 +1,2 @@
+import '../../button/style';
 import './index.less';
diff --git a/src/assets/images/Avatar.png b/src/assets/images/Avatar.png
diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -23,6 +23,7 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
       mode = 'circle',
       backgroundColor,
       icon,
+      style,
       ...rest
     }: AvatarProps,
     ref: React.Ref<HTMLSpanElement>
@@ -107,7 +108,13 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
     return renderTooltip(
       // For Dropdown trigger will set Event on rest
       // eslint-disable-next-line react/jsx-props-no-spreading
-      <span data-testid="avatar" ref={mergedRef} className={classString} {...rest} style={{ backgroundColor }}>
+      <span
+        data-testid="avatar"
+        ref={mergedRef}
+        className={classString}
+        style={{ backgroundColor, ...style }}
+        {...rest}
+      >
         {renderMore()}
         {renderAvatar()}
       </span>

diff --git a/src/avatar/AvatarGroup.tsx b/src/avatar/AvatarGroup.tsx
@@ -5,15 +5,20 @@ import { usePrefixCls } from '@gio-design/utils';
 import Avatar from './Avatar';
 import { AvatarGroupProps, UserAvatarType } from './interfaces';
 
-const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
+export const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
   const { number = 5, users = [], className, placement = 'bottom', style, displayTooltip = true, ...restProps } = props;
   const prefixCls = usePrefixCls('avatar');
 
   let children = null;
   const renderAvatarGroup = (sliceUsers: UserAvatarType[]) =>
     sliceUsers.map((user) => (
-      <Avatar key={user.name} displayTooltip={displayTooltip} placement={placement} {...user}>
-        {user.name}
+      <Avatar
+        key={`${user.name}-${_.uniqueId('avatar-key')}`}
+        displayTooltip={displayTooltip}
+        placement={placement}
+        {...user}
+      >
+        {user.name ?? user.children}
       </Avatar>
     ));
   const renderAvatarRest = (restUsers: UserAvatarType[]) => (
@@ -38,7 +43,7 @@ const AvatarGroup: React.FC<AvatarGroupProps> = (props: AvatarGroupProps) => {
   }
 
   return (
-    <div className={classString} style={style} test-dataId="avatarGroup" {...restProps} >
+    <div className={classString} style={style} test-dataId="avatarGroup" {...restProps}>
       {children}
     </div>
   );
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		import '../../button/style';
		import './index.less';