refactor: refactor: modify nonstandard component's name

BREAKING CHANGE: #### 取消从 `src/index.ts` 文件导出的子组件 `import { AvatarGroup } from '@gio-design/components';` 的用法需要更换为 `import { Avatar } from '@gio-design/components'; const { Group: AvatarGroup } = Avatar;` 1. AvatarGroup 2. CheckboxGroup 3. RadioGroup 4. Tab 5. Step 6. Text 7. Title #### IconButton 组件不再属于 Button 的子组件，而是抽离出单独的组件 `Button.IconButton` 的用法不再支持，需要自行导出组件: `import { IconButton } from '@gio-design/components';` #### src/popconfig 文件夹更名为 src/pop-confirm 如果有引入了该文件夹下的模块，请更改为 `import { PopConfirmProps } from '@gio-design/components/es/pop-confirm'` #### Toggles 组件更名为 Toggle #### SwitchGroupProps 类型更名为 SwitchProps
growingio · Mar 15, 2022 · 5b83202 · 5b83202
1 parent 230f320
commit 5b83202
Show file tree

Hide file tree

Showing 115 changed files with 693 additions and 558 deletions.
diff --git a/src/alert/Alert.tsx b/src/alert/Alert.tsx
@@ -9,7 +9,7 @@ import {
   CloseCircleFilled,
   CloseOutlined,
 } from '@gio-design/icons';
-import IconButton from '../button/IconButton';
+import IconButton from '../icon-button';
 import { AlertProps } from './interfaces';
 
 export const Alert = React.forwardRef<HTMLDivElement, AlertProps>(

diff --git a/src/alert/style/index.less b/src/alert/style/index.less
@@ -1,4 +1,4 @@
-@import '../../stylesheet/variables/index.less';
+@import (reference) '../../stylesheet/variables/index.less';
 
 @alert-prefix-cls: ~'@{component-prefix}-alert';
 

diff --git a/src/alert/style/index.ts b/src/alert/style/index.ts
@@ -1,2 +1,2 @@
-import '../../button/style';
+import '../../icon-button/style';
 import './index.less';
diff --git a/src/avatar/Avatar.tsx b/src/avatar/Avatar.tsx
@@ -6,6 +6,8 @@ import { usePrefixCls } from '@gio-design/utils';
 import Tooltip from '../tooltip';
 import { AvatarProps } from './interfaces';
 import composeRef from '../utils/composeRef';
+import WithSubComponent from '../utils/withSubComponent';
+import AvatarGroup from './AvatarGroup';
 
 const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
   (
@@ -122,4 +124,6 @@ const Avatar = React.forwardRef<HTMLSpanElement, AvatarProps>(
   }
 );
 
-export default Avatar;
+export default WithSubComponent(Avatar, {
+  Group: AvatarGroup,
+});
diff --git a/src/avatar/demos/Avatar.stories.tsx b/src/avatar/demos/Avatar.stories.tsx
@@ -4,15 +4,14 @@ import { AppOutlined, EditOutlined, SettingOutlined, UserOutlined } from '@gio-d
 import Docs from './AvatarPage';
 import Avatar, { AvatarProps } from '../index';
 import '../style';
-import AvatarGroup from '../AvatarGroup';
 import Dropdown from '../../dropdown';
 import { List } from '../..';
 
 export default {
   title: 'Upgraded/Avatar',
   component: Avatar,
   subcomponents: {
-    AvatarGroup,
+    'Avatar.Group': Avatar.Group,
   },
   parameters: {
     docs: {
@@ -121,7 +120,7 @@ export const Fallbacks = () => (
 
 export const Grouped = () => (
   <>
-    <AvatarGroup
+    <Avatar.Group
       number={4}
       users={[
         { name: 'Jay Chou', backgroundColor: 'purple' },

diff --git a/src/avatar/demos/AvatarPage.tsx b/src/avatar/demos/AvatarPage.tsx
@@ -117,7 +117,7 @@ export default function ListPage() {
       <Description>
         {formatMessage({
           defaultMessage:
-            '使用 `<AvatarGroup />` 组件并传入 `users` 参数，可以将头像排列成一组。用 `number` 参数来限制渲染的头像数量',
+            '使用 `<Avatar.Group />` 组件并传入 `users` 参数，可以将头像排列成一组。用 `number` 参数来限制渲染的头像数量',
         })}
       </Description>
       <Description>

diff --git a/src/avatar/index.tsx → src/avatar/index.ts b/src/avatar/index.tsx → src/avatar/index.ts
diff --git a/src/button/demos/Button.stories.tsx b/src/button/demos/Button.stories.tsx
@@ -1,17 +1,21 @@
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
 import { PlusOutlined, FilterOutlined, FolderOutlined } from '@gio-design/icons';
-import Button from '../index';
-import { ButtonProps, IconButtonProps } from '../interface';
+import Button from '..';
+import IconButton, { IconButtonProps } from '../../icon-button';
+import { ButtonProps } from '../interface';
+import '../../icon-button/style';
 import '../style';
+import '../../checkbox/style';
 import Docs from './ButtonPage';
-import Checkbox from '../../checkbox/Checkbox';
+import Checkbox from '../../checkbox';
 
-const { IconButton } = Button;
 export default {
   title: 'Upgraded/Button',
   component: Button,
-  subcomponents: { 'Button.IconButton': Button.IconButton },
+  subcomponents: {
+    IconButton,
+  },
   argTypes: {
     prefix: {
       control: { type: 'text' }, // 不约束react_node会传入对象导致报错

diff --git a/src/button/demos/ButtonPage.tsx b/src/button/demos/ButtonPage.tsx
@@ -102,17 +102,17 @@ export default function ButtonPage() {
       <Description>
         {formatMessage({
           defaultMessage:
-            '有些时候你可能希望为某些按钮设置图标，以增强应用程序的用户体验。可以通过设置 prefix, suffix 为Svg图标来实现',
+            '有些时候你可能希望为某些按钮设置图标，以增强应用程序的用户体验。可以通过设置 prefix, suffix 为 Svg 图标来实现',
         })}
       </Description>
       <Canvas>
         <Story id="upgraded-button--contains-icon" />
       </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: 'Button.IconButton 图标按钮' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: 'IconButton 图标按钮' })}</Subheading>
       <Description>
         {formatMessage({
           defaultMessage:
-            '图标按钮通常位于应用栏和工具栏中。 通过 Button.IconButton组件，配合Svg图标使用。可以通过设置IconButton 的style.fontSize修改图标的大小',
+            '图标按钮通常位于应用栏和工具栏中。 通过 IconButton 组件，配合 Svg 图标使用。可以通过设置 IconButton 的 style.fontSize 修改图标的大小',
         })}
       </Description>
       <Canvas>
@@ -132,17 +132,17 @@ export default function ButtonPage() {
       <Subheading>{formatMessage({ defaultMessage: 'Block 按钮' })}</Subheading>
       <Description>
         {formatMessage({
-          defaultMessage: '可以通过设置Button 的style.width=100% 使按钮适合其父宽度',
+          defaultMessage: '可以通过设置 Button 的 style.width=100% 使按钮适合其父宽度',
         })}
       </Description>
       <Canvas>
         <Story id="upgraded-button--block-button" />
       </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: '按钮的active状态' })}</Subheading>
+      <Subheading>{formatMessage({ defaultMessage: '按钮的 active 状态' })}</Subheading>
       <Description>
         {formatMessage({
           defaultMessage:
-            '按钮在非禁用状态下包含hover/active样式。可以设置active=true 来给按钮添加一个active状态。可以用于按钮与Dropdown组合下拉菜单时，当下拉列表展开时给按钮一个激活状态',
+            '按钮在非禁用状态下包含 hover/active 样式。可以设置 active=true 来给按钮添加一个 active 状态。可以用于按钮与 Dropdown 组合下拉菜单时，当下拉列表展开时给按钮一个激活状态',
         })}
       </Description>
       <Canvas>

diff --git a/src/button/index.ts b/src/button/index.ts
@@ -1,10 +1,6 @@
-import WithSubComponent from '../utils/withSubComponent';
-import InternalButton from './Button';
-import IconButton from './IconButton';
+import Button from './Button';
 
-const Button = WithSubComponent(InternalButton, { IconButton });
-
-export type { ButtonProps, IconButtonProps, ButtonType } from './interface';
-export { Button, IconButton };
+export type { ButtonProps, ButtonType } from './interface';
+export { Button };
 
 export default Button;
diff --git a/src/button/interface.ts b/src/button/interface.ts
@@ -51,5 +51,3 @@ export interface ButtonProps
    */
   active?: boolean;
 }
-
-export type IconButtonProps = Omit<ButtonProps, 'prefix' | 'suffix'>;
diff --git a/src/button/style/index.less b/src/button/style/index.less
@@ -1,7 +1,6 @@
 @import (reference) '../../stylesheet/variables/index.less';
 
 @button-prefix-cls: ~'@{component-prefix}-button';
-@icon-button-prefix-cls: ~'@{component-prefix}-icon-button';
 
 // ----------------------- Button Style --------------------------- //
 .@{button-prefix-cls} {
@@ -163,21 +162,3 @@
   }
 }
 // ----------------------- Button Style --------------------------- //
-
-// ----------------------- IconButton Style --------------------------- //
-.@{icon-button-prefix-cls} {
-  width: 36px;
-  height: 36px;
-  padding: 10px;
-
-  &.@{button-prefix-cls}_small {
-    width: 30px;
-    height: 30px;
-    padding: 7px;
-  }
-  & > .@{button-prefix-cls}-prefix-icon,
-  & > .@{button-prefix-cls}-suffix-icon {
-    margin: 0;
-  }
-}
-// ----------------------- IconButton Style --------------------------- //
diff --git a/src/card/demo/Card.stories.tsx b/src/card/demo/Card.stories.tsx
@@ -7,17 +7,18 @@ import '../style';
 import Avatar from '../../avatar';
 import Table from '../../table';
 import Tabs, { Tab } from '../../tabs';
-import Button, { IconButton } from '../../button';
+import Button from '../../button';
 import Dropdown from '../../dropdown';
 import { Item, List } from '../../list';
 import { Card, Col, Divider, Row, SearchBar, Skeleton } from '../..';
 import SkeletonImage from '../../skeleton/Image';
 import Toggle from '../../toggle';
+import IconButton from '../../icon-button';
 
 export default {
-  title: 'upgraded/Card',
+  title: 'Upgraded/Card',
   component: Card,
-  subcomponents: { CardMeta: Card.Meta },
+  subcomponents: { 'Card.Meta': Card.Meta },
   parameters: {
     design: {
       type: 'figma',
@@ -323,9 +324,9 @@ export const ComplexCard = () => {
                 </List>
               }
             >
-              <Button.IconButton size="small" type="secondary">
+              <IconButton size="small" type="secondary">
                 <MoreOutlined />
-              </Button.IconButton>
+              </IconButton>
             </Dropdown>
           </>
         }
@@ -376,9 +377,9 @@ export const ComplexCardPanel = () => {
         {selectedRowKeys?.length > 0 && (
           <div style={{ display: 'inline-block' }}>
             已选择 {selectedRowKeys?.length} 项
-            <Button.IconButton type="text" size="small" onClick={() => setSelectedRowKeys([])}>
+            <IconButton type="text" size="small" onClick={() => setSelectedRowKeys([])}>
               <CloseOutlined />
-            </Button.IconButton>
+            </IconButton>
             <Divider orientation="vertical" />
             <Button>全部删除</Button>
           </div>

diff --git a/src/card/demo/CardPage.tsx b/src/card/demo/CardPage.tsx
@@ -1,6 +1,6 @@
 import React from 'react';
 import { Canvas, Title, Heading, Story, Subheading, ArgsTable, Subtitle, Description } from '@storybook/addon-docs';
-import { Figma } from 'storybook-addon-designs/blocks'
+import { Figma } from 'storybook-addon-designs/blocks';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Card from '../index';
 
@@ -20,7 +20,8 @@ export default function CardPage() {
       </Subtitle>
       <Description>
         {formatMessage({
-          defaultMessage: '卡片内包含关于同一事物的内容和行动。最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。',
+          defaultMessage:
+            '卡片内包含关于同一事物的内容和行动。最基础的卡片容器，可承载文字、列表、图片、段落，常用于后台概览页面。',
         })}
       </Description>
       <Subtitle>
@@ -32,30 +33,41 @@ export default function CardPage() {
         url="https://www.figma.com/file/kP3A6S2fLUGVVMBgDuUx0f/GIO-Design?node-id=4066%3A42614"
       />
 
-
       <Heading>{formatMessage({ defaultMessage: '代码演示' })}</Heading>
       <Subheading>{formatMessage({ defaultMessage: '基础卡片' })}</Subheading>
       <Description>
         {formatMessage({
-          defaultMessage: '包含【标题】【副标题】【首图】【描述】【操作区域】,当“可点击”时，鼠标hover时会显示阴影的变化',
+          defaultMessage:
+            '包含【标题】【副标题】【首图】【描述】【操作区域】,当“可点击”时，鼠标hover时会显示阴影的变化',
         })}
       </Description>
       <Canvas>
         <Story id="upgraded-card--without-content" />
       </Canvas>
 
       <Subheading>{formatMessage({ defaultMessage: '卡片阴影' })}</Subheading>
-      <Description>{formatMessage({ defaultMessage: '默认情况下卡片只有在鼠标hover时有一个阴影，可以设置boxShadow=true 来给Card添加一个默认阴影效果' })}</Description>
+      <Description>
+        {formatMessage({
+          defaultMessage:
+            '默认情况下卡片只有在鼠标 hover 时有一个阴影，可以设置 boxShadow=true 来给 Card 添加一个默认阴影效果',
+        })}
+      </Description>
       <Canvas>
         <Story id="upgraded-card--box-shadow" />
       </Canvas>
-      <Subheading>{formatMessage({ defaultMessage: '不展示hover阴影' })}</Subheading>
-      <Description>{formatMessage({ defaultMessage: '默认情况下卡片在鼠标hover时有一个阴影变化，可以设置clickable=true 来去除卡片的阴影效果' })}</Description>
+      <Subheading>{formatMessage({ defaultMessage: '不展示 hover 阴影' })}</Subheading>
+      <Description>
+        {formatMessage({
+          defaultMessage: '默认情况下卡片在鼠标hover时有一个阴影变化，可以设置 clickable=true 来去除卡片的阴影效果',
+        })}
+      </Description>
       <Canvas>
         <Story id="upgraded-card--clickable" />
       </Canvas>
       <Subheading>{formatMessage({ defaultMessage: '禁用' })}</Subheading>
-      <Description>{formatMessage({ defaultMessage: '当卡片被禁用时，卡片本身不可被点击。此时卡片的【操作区域】仍可点击' })}</Description>
+      <Description>
+        {formatMessage({ defaultMessage: '当卡片被禁用时，卡片本身不可被点击。此时卡片的【操作区域】仍可点击' })}
+      </Description>
       <Canvas>
         <Story id="upgraded-card--disabled" />
       </Canvas>
@@ -69,7 +81,9 @@ export default function CardPage() {
         <Story id="upgraded-card--full-width-content" />
       </Canvas>
       <Subheading>{formatMessage({ defaultMessage: '栅格卡片' })}</Subheading>
-      <Description>{formatMessage({ defaultMessage: '在系统概览页面常常和栅格进行配合。展示一个卡片列表' })}</Description>
+      <Description>
+        {formatMessage({ defaultMessage: '在系统概览页面常常和栅格进行配合。展示一个卡片列表' })}
+      </Description>
       <Canvas>
         <Story id="upgraded-card--grid-card" />
       </Canvas>
@@ -93,7 +107,6 @@ export default function CardPage() {
         <Story id="upgraded-card--complex-card-panel" />
       </Canvas>
 
-
       <Heading>{formatMessage({ defaultMessage: '参数说明' })}</Heading>
       <ArgsTable of={Card} />
     </>

diff --git a/src/card/index.tsx → src/card/index.ts b/src/card/index.tsx → src/card/index.ts
diff --git a/src/checkbox/group.tsx → src/checkbox/CheckboxGroup.tsx b/src/checkbox/group.tsx → src/checkbox/CheckboxGroup.tsx
@@ -108,4 +108,6 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec
 
 const CheckboxGroup = WithRef<HTMLDivElement, CheckboxGroupProps<CheckboxValueType>>(InternalCheckboxGroup);
 
+CheckboxGroup.displayName = 'CheckboxGroup';
+
 export default React.memo(CheckboxGroup);
diff --git a/src/checkbox/demos/Checkbox.stories.tsx b/src/checkbox/demos/Checkbox.stories.tsx
@@ -1,15 +1,15 @@
 /* eslint-disable no-console */
 import React, { useState } from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import Checkbox, { CheckboxGroup } from '../index';
+import Checkbox from '../index';
 import { CheckboxProps } from '../interface';
 import '../style';
 import Docs from './CheckboxPage';
 
 export default {
   title: 'Upgraded/Checkbox',
   component: Checkbox,
-  subcomponents: { 'Checkbox.Group': CheckboxGroup },
+  subcomponents: { 'Checkbox.Group': Checkbox.Group },
   parameters: {
     design: {
       type: 'figma',

diff --git a/src/checkbox/index.tsx b/src/checkbox/index.tsx
@@ -1,5 +1,5 @@
 import GIOCheckbox from './Checkbox';
-import CheckboxGroup from './group';
+import CheckboxGroup from './CheckboxGroup';
 import WithSubComponent from '../utils/withSubComponent';
 
 export type TCheckbox = typeof GIOCheckbox & {

diff --git a/src/grid/col.tsx → src/col/Col.tsx b/src/grid/col.tsx → src/col/Col.tsx
@@ -3,7 +3,7 @@ import classNames from 'classnames';
 import { isNumber } from 'lodash';
 import { usePrefixCls } from '@gio-design/utils';
 import { ColProps } from './interface';
-import { RowContext } from './row';
+import { RowContext } from '../row';
 
 const Col = ({
   component: Component = 'div',

diff --git a/src/col/index.ts b/src/col/index.ts
@@ -1,4 +1,4 @@
-import { Col, ColProps } from '../grid';
+import Col from './Col';
 
-export { ColProps };
+export { ColProps } from './interface';
 export default Col;
diff --git a/src/col/interface.ts b/src/col/interface.ts
@@ -0,0 +1,28 @@
+import { ElementType } from 'react';
+
+export interface ColProps {
+  /**
+ `className`前缀
+*/
+  prefixCls?: string;
+  className?: string;
+  style?: React.CSSProperties;
+  /**
+  根元素的组件
+  */
+  component?: ElementType;
+  /**
+ `flex order` 映射
+*/
+  order?: number;
+  /**
+ 所占的栅格数
+ */
+  span?: number;
+  /*
+  栅格左侧的间隔格数，间隔内不可以有栅格
+*/
+  offset?: number;
+}
+
+export default ColProps;
-Original file line number
+Diff line change
@@ Expand Up / @@ -51,5 +51,3 @@ export interface ButtonProps @@
        */
       active?: boolean;
     }
-    export type IconButtonProps = Omit<ButtonProps, 'prefix' | 'suffix'>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -108,4 +108,6 @@ const InternalCheckboxGroup: React.ForwardRefRenderFunction<HTMLDivElement, Chec

		const CheckboxGroup = WithRef<HTMLDivElement, CheckboxGroupProps<CheckboxValueType>>(InternalCheckboxGroup);

		CheckboxGroup.displayName = 'CheckboxGroup';

		export default React.memo(CheckboxGroup);