fix(icon-button): change padding and fixed width (#1727)

* docs(table): add stories

* fix(icon-button): change padding and fixed width

n

Co-authored-by: maxin <maxin@growingio.com>

src/button/demos/Button.stories.tsx

@@ -1,11 +1,12 @@
 import React from 'react';
 import { Story, Meta } from '@storybook/react/types-6-0';
-import { PlusOutlined, FilterOutlined } from '@gio-design/icons';
+import { PlusOutlined, FilterOutlined, ExplainOutlined } from '@gio-design/icons';
 import Button from '../index';
 import IconButton from '../IconButton';
 import { ButtonProps, IconButtonProps } from '../interface';
 import '../style';
 import Docs from './ButtonPage';
+import { Divider } from '../..';
 
 export default {
   title: 'Upgraded/Button',
@@ -141,9 +142,21 @@ Disable.args = {
 };
 
 const IconButtonTemplate: Story<IconButtonProps> = (args) => (
-  <IconButton {...args}>
-    <FilterOutlined />
-  </IconButton>
+  <>
+    <div>
+      <p>图标的默认大小为 14px</p>
+      <IconButton {...args}>
+        <FilterOutlined />
+      </IconButton>
+    </div>
+    <Divider style={{ width: '100%' }} />
+    <div>
+      <p>可以设置 IconButton 的 font-size: 20px; 来改变图标大小</p>
+      <IconButton {...args} style={{ fontSize: '20px' }}>
+        <ExplainOutlined />
+      </IconButton>
+    </div>
+  </>
 );
 export const IconButtonDemo = IconButtonTemplate.bind({});
 IconButtonDemo.args = {};

src/button/style/index.less

@@ -163,10 +163,14 @@
 
 // ----------------------- IconButton Style --------------------------- //
 .@{icon-button-prefix-cls} {
-  padding: 5px 10px;
+  width: 36px;
+  height: 36px;
+  padding: 10px;
 
   &.@{button-prefix-cls}_small {
-    padding: 3px 7px;
+    width: 30px;
+    height: 30px;
+    padding: 7px;
   }
   & > .@{button-prefix-cls}-prefix-icon,
   & > .@{button-prefix-cls}-suffix-icon {

src/table/demos/Table.stories.tsx

@@ -4,7 +4,7 @@ import { action } from '@storybook/addon-actions';
 import Table from '../index';
 import { ColumnsType, SortOrder, TableProps } from '../interface';
 import '../style';
-import { Tooltip } from '../..';
+import { Divider, Tooltip } from '../..';
 import Docs from './TablePage';
 
 type DataSourceType = {
@@ -421,12 +421,10 @@ export const Fixed = () => {
     {
       dataIndex: 'name',
       title: 'Name',
-      width: 300,
     },
     {
       dataIndex: 'age',
       title: 'Age',
-      width: 100,
     },
     {
       dataIndex: 'address',
@@ -437,15 +435,30 @@ export const Fixed = () => {
   ];
 
   return (
-    <Table<DataSourceType>
-      title="可固定表头和列"
-      style={{ width: 900 }}
-      scroll={{ y: 300 }}
-      columns={columns}
-      pagination={false}
-      dataSource={genDataSource(30)}
-      rowKey="id"
-    />
+    <>
+      <h4>可固定表头和列</h4>
+      <p>对于列数很多的数据，可以固定前后的列，横向滚动查看其它数据，需要和 scroll.x 配合使用。</p>
+      <ol style={{ fontSize: '.9em', color: 'rgb(161, 157, 157)', lineHeight: '2' }}>
+        <li>若列头与内容不对齐或出现列重复，请指定固定列的宽度 width。</li>
+        <li>
+          如果指定 width
+          不生效或出现白色垂直空隙，请尝试建议留一列不设宽度以适应弹性布局，或者检查是否有超长连续字段破坏布局。
+        </li>
+        <li>建议指定 scroll.x 为大于表格宽度的固定值或百分比。</li>
+        <li>注意，且非固定列宽度之和不要超过 scroll.x。</li>
+      </ol>
+      <Divider style={{ width: '100%' }} />
+      <div style={{ maxWidth: 1320, minWidth: 1000 }}>
+        <Table<DataSourceType>
+          style={{ width: '100%' }}
+          scroll={{ x: 1600, y: 600 }}
+          columns={columns}
+          pagination={false}
+          dataSource={genDataSource(30)}
+          rowKey="id"
+        />
+      </div>
+    </>
   );
 };