feat(icons): upgrade @gio-design-icons to v23 (#1994)

* feat(icons): upgrade @gio-design-icons to v23

* feat(panel): remove panel component

* docs(list-pro): change list-pro document dir

.husky/commit-msg

@@ -1,4 +1,4 @@
 #!/bin/sh
 . "$(dirname "$0")/_/husky.sh"
 
-npx --no-install commitlint --edit $1
+npx --no-install commitlint --edit "$1"

.husky/prepare-commit-msg

@@ -0,0 +1,4 @@
+#!/bin/sh
+. "$(dirname "$0")/_/husky.sh"
+
+exec < /dev/tty && ./node_modules/.bin/cz --hook || true

package.json

@@ -31,7 +31,7 @@
     "watch": "gio-rewire lib compile --watch"
   },
   "peerDependencies": {
-    "@gio-design/icons": ">=23.0.0",
+    "@gio-design/icons": ">=23.2.0",
     "@gio-design/tokens": ">=22.0.0-alpha.0",
     "@gio-design/utils": ">=23.0.0",
     "react": ">=16.8.0",
@@ -86,7 +86,7 @@
     "@commitlint/config-conventional": "^16.0.0",
     "@formatjs/cli": "^4.2.31",
     "@formatjs/ts-transformer": "^3.4.8",
-    "@gio-design/icons": "^22.0.0",
+    "@gio-design/icons": "^23.2.0",
     "@gio-design/tokens": "22.0.0-alpha.0",
     "@gio-design/utils": "^23.0.0",
     "@semantic-release/changelog": "^6.0.1",
@@ -178,4 +178,4 @@
       "path": "./node_modules/cz-conventional-changelog"
     }
   }
-}
+}

src/alert/Alert.tsx

@@ -3,10 +3,10 @@ import classnames from 'classnames';
 import { usePrefixCls } from '@gio-design/utils';
 import _ from 'lodash';
 import {
-  CheckCircleFilled,
-  WarningCircleFilled,
-  InfoCircleFilled,
-  CloseCircleFilled,
+  SuccessFilled,
+  WarningFilled,
+  InfoFilled,
+  ErrorFilled,
   CloseOutlined,
 } from '@gio-design/icons';
 import Button from '../button';
@@ -24,15 +24,15 @@ export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(
       if (icon) return icon;
       switch (type) {
         case 'success':
-          return <CheckCircleFilled />;
+          return <SuccessFilled />;
         case 'warning':
-          return <WarningCircleFilled />;
+          return <WarningFilled />;
         case 'error':
-          return <CloseCircleFilled />;
+          return <ErrorFilled />;
         case 'info':
-          return <InfoCircleFilled />;
+          return <InfoFilled />;
         default:
-          return <InfoCircleFilled />;
+          return <InfoFilled />;
       }
     };
 

src/alert/demos/Alert.stories.tsx

@@ -1,7 +1,7 @@
 /* eslint-disable no-console */
 import React from 'react';
 import { Meta } from '@storybook/react/types-6-0';
-import { CheckCircleOutlined, CheckOutlined } from '@gio-design/icons';
+import { SuccessOutlined, CheckOutlined } from '@gio-design/icons';
 import Docs from './AlertPage';
 import Alert from '../index';
 import '../style';
@@ -69,7 +69,7 @@ export const Icons = () => (
       description="This is a success alert"
       type="success"
       showIcon
-      icon={<CheckCircleOutlined />}
+      icon={<SuccessOutlined />}
     />
   </>
 );

src/avatar/demos/Avatar.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Meta, Story } from '@storybook/react/types-6-0';
-import { AppOutlined, EditOutlined, SettingOutlined, UserOutlined } from '@gio-design/icons';
+import { CardOutlined, EditOutlined, GearOutlined, UserOutlined } from '@gio-design/icons';
 import Docs from './AvatarPage';
 import Avatar, { AvatarProps } from '../index';
 import '../style';
@@ -91,16 +91,16 @@ export const Sizes = () => (
 
 export const IconAvatars = () => (
   <>
-    <Avatar icon={<SettingOutlined />} />
-    <Avatar icon={<AppOutlined />} backgroundColor="pink" />
+    <Avatar icon={<GearOutlined />} />
+    <Avatar icon={<CardOutlined />} backgroundColor="pink" />
     <Avatar icon={<EditOutlined />} backgroundColor="palegoldenrod" />
   </>
 );
 
 export const Modes = () => (
   <>
     <Avatar icon={<UserOutlined />} size="large" mode="square" />
-    <Avatar icon={<AppOutlined />} size="large" mode="square" />
+    <Avatar icon={<CardOutlined />} size="large" mode="square" />
     <Avatar icon={<EditOutlined />} size="large" mode="square" />
   </>
 );

src/breadcrumbs/demos/Breadcrumbs.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { HomeOutlined, RightOutlined } from '@gio-design/icons';
+import { HomeOutlined, ArrowRightOutlined } from '@gio-design/icons';
 import Breadcrumbs, { BreadcrumbsProps } from '..';
 import Link from '../../link';
 import '../style';
@@ -39,7 +39,7 @@ export const Separator = () => (
       <span>Current</span>
     </Breadcrumbs>
     <br />
-    <Breadcrumbs separator={<RightOutlined size="14px" />}>
+    <Breadcrumbs separator={<ArrowRightOutlined size="14px" />}>
       <Link href="/?path=/story/upgraded-breadcrumbs--default">Home</Link>
       <Link href="/?path=/story/upgraded-breadcrumbs--default">Second</Link>
       <span>Current</span>

src/button/Button.tsx

@@ -21,7 +21,7 @@ const Button = WithRef<HTMLButtonElement, ButtonProps>((props, ref) => {
   } = props;
 
   const prefixCls = usePrefixCls('button');
-  const classes = classNames([className, prefixCls], {
+  const classes = classNames([prefixCls, className], {
     [`${prefixCls}_${type}`]: type,
     [`${prefixCls}_${size}`]: size,
     [`${prefixCls}_loading`]: loading,

src/button/style/index.less

@@ -27,7 +27,6 @@
   user-select: none;
   .text-body1();
   .border(2, transparent);
-
   &_primary {
     color: @gray-0;
     background-color: @blue-2;

src/card/demo/Card.stories.tsx

@@ -1,5 +1,5 @@
 import React, { useMemo, useState } from 'react';
-import { CloseOutlined, MoreOutlined, PlusCircleFilled, UserOutlined } from '@gio-design/icons';
+import { CloseOutlined, MoreVerticalOutlined, PlusCircleFilled, UserOutlined } from '@gio-design/icons';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import Docs from './CardPage';
 import { CardProps } from '../interfaces';
@@ -41,7 +41,7 @@ Default.args = {
         description="卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题"
         action={
           <Button.IconButton size="small" type="text">
-            <MoreOutlined />
+            <MoreVerticalOutlined />
           </Button.IconButton>
         }
       />
@@ -65,7 +65,7 @@ export const BoxShadow = () => (
       description="卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题卡片副标题"
       action={
         <Button.IconButton size="small" type="text">
-          <MoreOutlined />
+          <MoreVerticalOutlined />
         </Button.IconButton>
       }
     />
@@ -93,7 +93,7 @@ export const WithoutContent = () => (
       description="卡片副标题"
       action={
         <Button.IconButton size="small" type="text">
-          <MoreOutlined />
+          <MoreVerticalOutlined />
         </Button.IconButton>
       }
     />
@@ -111,7 +111,7 @@ export const Disabled = () => (
       description="卡片副标题"
       action={
         <Button.IconButton size="small" type="text" onClick={() => alert('action click')}>
-          <MoreOutlined />
+          <MoreVerticalOutlined />
         </Button.IconButton>
       }
     />
@@ -128,7 +128,7 @@ export const GridCard = () => (
             description="卡片副标题"
             action={
               <Button.IconButton size="small" type="text">
-                <MoreOutlined />
+                <MoreVerticalOutlined />
               </Button.IconButton>
             }
           />
@@ -154,7 +154,7 @@ export const GridCard = () => (
             description="卡片副标题"
             action={
               <Button.IconButton size="small" type="text">
-                <MoreOutlined />
+                <MoreVerticalOutlined />
               </Button.IconButton>
             }
           />
@@ -181,7 +181,7 @@ export const GridCard = () => (
             description="卡片副标题"
             action={
               <Button.IconButton size="small" type="text">
-                <MoreOutlined />
+                <MoreVerticalOutlined />
               </Button.IconButton>
             }
           />
@@ -203,7 +203,7 @@ export const FullWidthContent = () => (
       description="卡片副标题"
       action={
         <Button.IconButton size="small" type="text">
-          <MoreOutlined />
+          <MoreVerticalOutlined />
         </Button.IconButton>
       }
     />
@@ -229,7 +229,7 @@ export const Clickable = () => {
           description="卡片副标题"
           action={
             <Button.IconButton size="small" type="text">
-              <MoreOutlined />
+              <MoreVerticalOutlined />
             </Button.IconButton>
           }
         />
@@ -325,7 +325,7 @@ export const ComplexCard = () => {
               }
             >
               <Button.IconButton size="small" type="secondary">
-                <MoreOutlined />
+                <MoreVerticalOutlined />
               </Button.IconButton>
             </Dropdown>
           </>

src/collapse/demos/Collapse.Panel.stories.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { MoreOutlined, EditOutlined, RightOutlined } from '@gio-design/icons';
+import { MoreVerticalOutlined, EditOutlined, ArrowRightOutlined } from '@gio-design/icons';
 import Docs from './CollapsePanel';
 import Collapse, { CollapsePanel } from '../index';
 import Button from '../../button';
@@ -32,7 +32,7 @@ const Template: Story = () => (
       </Collapse.Panel>
       <Collapse.Panel header="折叠面板标题" key="2">
         <p>{text}</p>
-        <Collapse expandIcon={() => <RightOutlined size="14px" />} bordered={false} onChange={callback}>
+        <Collapse expandIcon={() => <ArrowRightOutlined size="14px" />} bordered={false} onChange={callback}>
           <Collapse.Panel header="折叠面板标题" key="1">
             <p>{text}</p>
             <p>{text}</p>
@@ -82,7 +82,7 @@ export const Extra = () => {
         }}
         type="text"
       >
-        <MoreOutlined />
+        <MoreVerticalOutlined />
       </Button.IconButton>
     </>
   );

src/collapse/demos/Collapse.stories.tsx

@@ -2,7 +2,7 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { action } from '@storybook/addon-actions';
-import { MoreOutlined, EditOutlined, RightOutlined } from '@gio-design/icons';
+import { MoreVerticalOutlined, EditOutlined, ArrowRightOutlined } from '@gio-design/icons';
 import Docs from './CollapsePage';
 import Collapse from '../index';
 import Button from '../../button';
@@ -40,7 +40,7 @@ const Template: Story = () => (
       </Collapse.Panel>
       <Collapse.Panel header="折叠面板标题" key="2">
         <div>{text}</div>
-        <Collapse expandIcon={() => <RightOutlined size="14px" />} bordered={false} onChange={callback}>
+        <Collapse expandIcon={() => <ArrowRightOutlined size="14px" />} bordered={false} onChange={callback}>
           <Collapse.Panel header="折叠面板标题" key="1">
             <div>{text}</div>
             <div>{text}</div>
@@ -98,12 +98,12 @@ export const Extra = () => {
         }}
         type="text"
       >
-        <MoreOutlined />
+        <MoreVerticalOutlined />
       </Button.IconButton>
     </>
   );
   return (
-    <Collapse expandIcon={() => <RightOutlined size="14px" />}>
+    <Collapse expandIcon={() => <ArrowRightOutlined size="14px" />}>
       <Collapse.Panel header="折叠面板标题" key="1" extra={genExtra()}>
         <div>{text}</div>
         <div>{text}</div>

src/collapse/demos/CollapsePage.tsx

@@ -27,20 +27,30 @@ export default function ListPage() {
       <Canvas>
         <Story id="upgraded-collapse--default" />
       </Canvas>
-
-      <Subheading>{formatMessage({ defaultMessage: 'Icon替换' })}</Subheading>
+
+      <Subheading>{formatMessage({ defaultMessage: '额外节点' })}</Subheading>
+      <Description>
+        {formatMessage({
+          defaultMessage: '右侧附加额外的节点，可用于额外附加操作',
+        })}
+      </Description>
       <Canvas>
         <Story id="upgraded-collapse--extra" />
       </Canvas>
       <Subheading>{formatMessage({ defaultMessage: '手风琴效果' })}</Subheading>
+      <Description>
+        {formatMessage({
+          defaultMessage: '每次只打开一个 tab',
+        })}
+      </Description>
       <Canvas>
         <Story id="upgraded-collapse--accordion" />
       </Canvas>
       <Subheading>{formatMessage({ defaultMessage: '无边框' })}</Subheading>
       <Canvas>
         <Story id="upgraded-collapse--bordered" />
       </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: '二级菜单使用' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '嵌套面板' })}</Subheading>
       <Canvas>
         <Story id="upgraded-collapse--secondmenu" />
       </Canvas>