Merge pull request #29310 from ant-design/feature-merge-master-branch

chore(merge): Merge master into feature branch

.github/workflows/pr-welcome.yml

@@ -0,0 +1,22 @@
+name: PR Welcome
+
+on:
+  pull_request_target:
+    types: [opened, edited, reopened]
+
+jobs:
+  welcome:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions-cool/pr-welcome@v1.1.0
+        with:
+          token: ${{ secrets.ANT_BOT_TOKEN }}
+          refuse-issue-label: '🎱 Collaborate PR only'
+          need-creator-authority: 'write'
+          comment: |
+            Hi @${{ github.event.pull_request.user.login }}. The issue mentioned in this PR needs to be confirmed with the designer or core team. This PR is temporarily not accepted. Thank you again for your contribution! 😊
+
+            你好 @${{ github.event.pull_request.user.login }}。这个 PR 提及的 issue 需要和设计师或核心团队进行确认，暂时不接受 PR，再次感谢你的贡献！😊   
+          emoji: 'heart'
+          pr-emoji: 'heart'
+          close: true

.github/workflows/verify-package-version.yml

@@ -7,7 +7,7 @@ on:
 jobs:
   verify:
     runs-on: ubuntu-latest
-    if: contains(github.event.pull_request.title, 'changelog')
+    if: contains(github.event.pull_request.title, 'changelog') || contains(github.event.pull_request.title, 'release')
     steps:
       - uses: actions/checkout@v2
       - name: verify-version

CHANGELOG.en-US.md

@@ -15,6 +15,21 @@ timeline: true
 
 ---
 
+## 4.12.3
+
+`2021-02-10`
+
+- 🛠 Refactor Drawer with React hooks. [#29229](https://github.com/ant-design/ant-design/pull/29229)
+- 🐞 Fix Table pagination not disappear when `pagination.position` is `['none', 'none']`. [#29256](https://github.com/ant-design/ant-design/pull/29256) [@mumiao](https://github.com/mumiao)
+- 🐞 Fix TextArea `showCount` should not be interactive. [#29245](https://github.com/ant-design/ant-design/pull/29245)
+- 🐞 Fix abnormal background color for `multiple` and `disabled` Select in dark. [#29242](https://github.com/ant-design/ant-design/pull/29242)
+- ⚡️ Optimize Slider align performance of tooltip. [#29308](https://github.com/ant-design/ant-design/pull/29308) [@kerm1it](https://github.com/kerm1it)
+- ⚡️ Upgrade `@ant-design/colors` to 6.x to reduce gzipped bundle size `1KB`. [#29307](https://github.com/ant-design/ant-design/pull/29307) [@07akioni](https://github.com/07akioni)
+- 🇷🇺 Add `ru_RU` locale text for Image. [#29271](https://github.com/ant-design/ant-design/pull/29271) [@mumiao](https://github.com/mumiao)
+- 🇮🇷 Add `fa_IR` locale text for DatePicker, Form, Table, TimePicker and Transfer. [#29232](https://github.com/ant-design/ant-design/pull/29232) [@amiralitaheri](https://github.com/amiralitaheri)
+- TypeScript
+  - 🤖 Fix type definition for Table FilterDropdownProps `confirm` parameter. [#29241](https://github.com/ant-design/ant-design/pull/29241) [@mumiao](https://github.com/mumiao)
+
 ## 4.12.2
 
 `2021-02-04`

CHANGELOG.zh-CN.md

@@ -15,6 +15,21 @@ timeline: true
 
 ---
 
+## 4.12.3
+
+`2021-02-10`
+
+- 🛠 使用 React hooks 重构 Drawer。[#29229](https://github.com/ant-design/ant-design/pull/29229)
+- 🐞 修复 Table 的 `pagination. position` 为 `['none', 'none']`时分页器仍然展示的问题。[#29256](https://github.com/ant-design/ant-design/pull/29256) [@mumiao](https://github.com/mumiao)
+- 🐞 修复 TextArea `showCount` 字数会遮挡 Form.Item `extra` 的问题。[#29245](https://github.com/ant-design/ant-design/pull/29245)
+- 🐞 修复多选 Select 在暗黑模式下禁用的背景颜色异常的问题。[#29242](https://github.com/ant-design/ant-design/pull/29242)
+- ⚡️ 优化 Slider 提示的对齐性能。[#29308](https://github.com/ant-design/ant-design/pull/29308) [@kerm1it](https://github.com/kerm1it)
+- ⚡️ 升级 `@ant-design/colors` 依赖到 6.x，减少 gzipped 包体积 `1KB`。[#29307](https://github.com/ant-design/ant-design/pull/29307) [@07akioni](https://github.com/07akioni)
+- 🇷🇺 为 Image 组件添加 `ru_RU` 俄语翻译。[#29271](https://github.com/ant-design/ant-design/pull/29271) [@mumiao](https://github.com/mumiao)
+- 🇮🇷 为 DatePicker、Form、Table、TimePicker 和 Transfer 组件添加 `fa_IR` 波斯语翻译。[#29232](https://github.com/ant-design/ant-design/pull/29232) [@amiralitaheri](https://github.com/amiralitaheri)
+- TypeScript
+  - 🤖 修复 Table FilterDropdownProps 的 `confirm` 入参为可选类型。[#29241](https://github.com/ant-design/ant-design/pull/29241) [@mumiao](https://github.com/mumiao)
+
 ## 4.12.2
 
 `2021-02-04`

components/date-picker/locale/fa_IR.tsx

@@ -6,7 +6,14 @@ import { PickerLocale } from '../generatePicker';
 const locale: PickerLocale = {
   lang: {
     placeholder: 'انتخاب تاریخ',
+    yearPlaceholder: 'انتخاب سال',
+    quarterPlaceholder: 'انتخاب فصل',
+    monthPlaceholder: 'انتخاب ماه',
+    weekPlaceholder: 'انتخاب هفته',
     rangePlaceholder: ['تاریخ شروع', 'تاریخ پایان'],
+    rangeYearPlaceholder: ['سال شروع', 'سال پایان'],
+    rangeMonthPlaceholder: ['ماه شروع', 'ماه پایان'],
+    rangeWeekPlaceholder: ['هفته شروع', 'هفته پایان'],
     ...CalendarLocale,
   },
   timePickerLocale: {

components/form/style/index.less

@@ -191,9 +191,7 @@
 
   .@{ant-prefix}-input-textarea-show-count {
     &::after {
-      position: absolute;
+      margin-bottom: -22px;
-      bottom: -22px;
-      width: 100%;
     }
   }
 }

components/input/style/index.less

@@ -46,10 +46,11 @@
 
   &-textarea {
     &-show-count::after {
-      display: block;
+      float: right;
       color: @text-color-secondary;
-      text-align: right;
+      white-space: nowrap;
       content: attr(data-count);
+      pointer-events: none;
     }
   }
 }

components/list/index.zh-CN.md

@@ -32,6 +32,7 @@ cover: https://gw.alipayobjects.com/zos/alicdn/5FrZKStG_/List.svg
 | locale | 默认文案设置，目前包括空数据文案 | object | {emptyText: `暂无数据`} |  |
 | pagination | 对应的 `pagination` 配置, 设置 false 不显示 | boolean \| object | false |  |
 | renderItem | 当使用 dataSource 时，可以用 `renderItem` 自定义渲染列表项 | (item) => ReactNode | - |  |
+| rowKey | 当 `renderItem` 自定义渲染列表项有效时，自定义每一行的 `key` 的获取方式  | ((item: T) => string) | `list-item-${index}`  |  |
 | size | list 的尺寸 | `default` \| `large` \| `small` | `default` |  |
 | split | 是否展示分割线 | boolean | true |  |
 

components/locale-provider/__tests__/__snapshots__/index.test.js.snap

@@ -70699,7 +70699,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
         <span
           class="ant-transfer-list-header-selected"
         >
-          0 
+          0 عدد
         </span>
         <span
           class="ant-transfer-list-header-title"
@@ -70891,7 +70891,7 @@ exports[`Locale Provider should display the text as fa 1`] = `
         <span
           class="ant-transfer-list-header-selected"
         >
-          0 
+          0 عدد
         </span>
         <span
           class="ant-transfer-list-header-title"

components/locale/fa_IR.tsx

@@ -13,12 +13,18 @@ const localeValues: Locale = {
   DatePicker,
   TimePicker,
   Calendar,
+  global: {
+    placeholder: 'لطفاً انتخاب کنید',
+  },
   Table: {
     filterTitle: 'منوی فیلتر',
     filterConfirm: 'تایید',
     filterReset: 'پاک کردن',
+    filterEmptyText: 'بدون فیلتر',
+    emptyText: 'بدون داده',
     selectAll: 'انتخاب صفحه‌ی کنونی',
     selectInvert: 'معکوس کردن انتخاب‌ها در صفحه ی کنونی',
+    selectNone: 'انتخاب هیچکدام',
     selectionAll: 'انتخاب همه داده‌ها',
     sortTitle: 'مرتب سازی',
     expand: 'باز شدن ردیف',
@@ -39,8 +45,14 @@ const localeValues: Locale = {
   Transfer: {
     titles: ['', ''],
     searchPlaceholder: 'جستجو',
-    itemUnit: '',
+    itemUnit: 'عدد',
-    itemsUnit: '',
+    itemsUnit: 'عدد',
+    remove: 'حذف',
+    selectCurrent: 'انتخاب صفحه فعلی',
+    removeCurrent: 'پاک کردن انتخاب‌های صفحه فعلی',
+    selectAll: 'انتخاب همه',
+    removeAll: 'پاک کردن همه انتخاب‌ها',
+    selectInvert: 'معکوس کردن انتخاب‌ها در صفحه ی کنونی',
   },
   Upload: {
     uploading: 'در حال آپلود...',
@@ -57,7 +69,7 @@ const localeValues: Locale = {
   },
   Text: {
     edit: 'ویرایش',
-    copy: 'کپس',
+    copy: 'کپی',
     copied: 'کپی شد',
     expand: 'توسعه',
   },
@@ -65,6 +77,7 @@ const localeValues: Locale = {
     back: 'برگشت',
   },
   Form: {
+    optional: '(اختیاری)',
     defaultValidateMessages: {
       default: 'خطا در ${label}',
       required: 'فیلد ${label} اجباریست',
@@ -104,8 +117,8 @@ const localeValues: Locale = {
       },
       array: {
         len: 'تعداد ${label} باید ${len} باشد.',
-        min: 'تعداد ${lable} حداقل باید ${min} باشد',
+        min: 'تعداد ${label} حداقل باید ${min} باشد',
-        max: 'تعداد ${lable} حداکثر باید ${max} باشد',
+        max: 'تعداد ${label} حداکثر باید ${max} باشد',
         range: 'مقدار ${label} باید بین ${min}-${max} باشد',
       },
       pattern: {
@@ -113,6 +126,9 @@ const localeValues: Locale = {
       },
     },
   },
+  Image: {
+    preview: 'نمایش',
+  },
 };
 
 export default localeValues;

components/locale/ru_RU.tsx

@@ -124,6 +124,9 @@ const localeValues: Locale = {
       },
     },
   },
+  Image: {
+    preview: 'Превью',
+  },
 };
 
 export default localeValues;

components/select/style/index.less

@@ -37,6 +37,10 @@
     background: @input-disabled-bg;
     cursor: not-allowed;
 
+    .@{select-prefix-cls}-multiple& {
+      background: @select-multiple-disabled-background;
+    }
+
     input {
       cursor: not-allowed;
     }

components/slider/SliderTooltip.tsx

@@ -19,7 +19,6 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
     rafRef.current = raf(() => {
       innerRef.current?.forcePopupAlign();
       rafRef.current = null;
-      keepAlign();
     });
   }
 
@@ -31,7 +30,7 @@ const SliderTooltip = React.forwardRef<unknown, TooltipProps>((props, ref) => {
     }
 
     return cancelKeepAlign;
-  }, [visible]);
+  }, [visible, props.title]);
 
   return <Tooltip ref={composeRef(innerRef, ref)} {...props} />;
 });

components/table/Table.tsx

@@ -238,9 +238,10 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
   };
 
   /**
-   * Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to read
+   * Controlled state in `columns` is not a good idea that makes too many code (1000+ line?) to
-   * state out and then put it back to title render. Move these code into `hooks` but still too
+   * read state out and then put it back to title render. Move these code into `hooks` but still
-   * complex. We should provides Table props like `sorter` & `filter` to handle control in next big version.
+   * too complex. We should provides Table props like `sorter` & `filter` to handle control in next
+   * big version.
    */
 
   // ============================ Sorter =============================
@@ -439,18 +440,19 @@ function Table<RecordType extends object = any>(props: TableProps<RecordType>) {
       />
     );
     const defaultPosition = direction === 'rtl' ? 'left' : 'right';
-    if (mergedPagination.position !== null && Array.isArray(mergedPagination.position)) {
+    const { position } = mergedPagination;
-      const topPos = mergedPagination.position.find(p => p.indexOf('top') !== -1);
+    if (position !== null && Array.isArray(position)) {
-      const bottomPos = mergedPagination.position.find(p => p.indexOf('bottom') !== -1);
+      const topPos = position.find(p => p.indexOf('top') !== -1);
-      if (!topPos && !bottomPos) {
+      const bottomPos = position.find(p => p.indexOf('bottom') !== -1);
+      const isDisable = position.every(p => `${p}` === 'none');
+      if (!topPos && !bottomPos && !isDisable) {
         bottomPaginationNode = renderPagination(defaultPosition);
-      } else {
+      }
-        if (topPos) {
+      if (topPos) {
-          topPaginationNode = renderPagination(topPos!.toLowerCase().replace('top', ''));
+        topPaginationNode = renderPagination(topPos!.toLowerCase().replace('top', ''));
-        }
+      }
-        if (bottomPos) {
+      if (bottomPos) {
-          bottomPaginationNode = renderPagination(bottomPos!.toLowerCase().replace('bottom', ''));
+        bottomPaginationNode = renderPagination(bottomPos!.toLowerCase().replace('bottom', ''));
-        }
       }
     } else {
       bottomPaginationNode = renderPagination(defaultPosition);

components/table/__tests__/Table.pagination.test.js

@@ -324,13 +324,17 @@ describe('Table.pagination', () => {
     expect(wrapper.find('.ant-spin-container').children()).toHaveLength(3);
     expect(wrapper.find('.ant-spin-container').childAt(0).find('.ant-pagination')).toHaveLength(1);
     expect(wrapper.find('.ant-spin-container').childAt(2).find('.ant-pagination')).toHaveLength(1);
+    wrapper.setProps({ pagination: { position: ['none', 'none'] } });
+    expect(wrapper.find('.ant-pagination')).toHaveLength(0);
     wrapper.setProps({ pagination: { position: ['invalid'] } });
     expect(wrapper.find('.ant-pagination')).toHaveLength(1);
+    wrapper.setProps({ pagination: { position: ['invalid', 'invalid'] } });
+    expect(wrapper.find('.ant-pagination')).toHaveLength(1);
   });
 
   /**
-   * `pagination` is not designed to accept `true` value, but in practice, many people assign `true`
+   * `pagination` is not designed to accept `true` value, but in practice, many people assign
-   * to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
+   * `true` to `pagination`, since they misunderstand that `pagination` can accept a boolean value.
    */
   it('Accepts pagination as true', () => {
     const wrapper = mount(createTable({ pagination: true }));

components/table/index.en-US.md

@@ -157,7 +157,7 @@ Properties for pagination.
 
 | Property | Description | Type | Default |
 | --- | --- | --- | --- |
-| position | Specify the position of `Pagination`, could be `topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
+| position | Specify the position of `Pagination`, could be`topLeft` \| `topCenter` \| `topRight` \|`bottomLeft` \| `bottomCenter` \| `bottomRight` | Array | \[`bottomRight`] |
 
 More about pagination, please check [`Pagination`](/components/pagination/).
 

components/table/interface.tsx

@@ -76,7 +76,7 @@ export interface FilterDropdownProps {
   prefixCls: string;
   setSelectedKeys: (selectedKeys: React.Key[]) => void;
   selectedKeys: React.Key[];
-  confirm: (param: FilterConfirmProps) => void;
+  confirm: (param?: FilterConfirmProps) => void;
   clearFilters?: () => void;
   filters?: ColumnFilterItem[];
   visible: boolean;

components/time-picker/locale/fa_IR.tsx

@@ -2,6 +2,7 @@ import { TimePickerLocale } from '../index';
 
 const locale: TimePickerLocale = {
   placeholder: 'انتخاب زمان',
+  rangePlaceholder: ['زمان شروع', 'زمان پایان'],
 };
 
 export default locale;

components/typography/__tests__/__snapshots__/demo.test.js.snap

@@ -68,7 +68,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       <li>
         <a
           class="ant-typography"
-          href="/docs/pattern/navigation"
+          href="/docs/spec/overview"
         >
           Patterns
         </a>
@@ -76,7 +76,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       <li>
         <a
           class="ant-typography"
-          href="/docs/resource/download"
+          href="/docs/resources"
         >
           Resource Download
         </a>
@@ -164,7 +164,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       <li>
         <a
           class="ant-typography"
-          href="/docs/spec/proximity"
+          href="/docs/spec/proximity-cn"
         >
           设计原则
         </a>
@@ -172,7 +172,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       <li>
         <a
           class="ant-typography"
-          href="/docs/pattern/navigation"
+          href="/docs/spec/overview-cn"
         >
           设计模式
         </a>
@@ -180,7 +180,7 @@ exports[`renders ./components/typography/demo/basic.md correctly 1`] = `
       <li>
         <a
           class="ant-typography"
-          href="/docs/resource/download"
+          href="/docs/resources-cn"
         >
           设计资源
         </a>

components/typography/demo/basic.md

@@ -51,10 +51,10 @@ ReactDOM.render(
           <Link href="/docs/spec/proximity">Principles</Link>
         </li>
         <li>
-          <Link href="/docs/pattern/navigation">Patterns</Link>
+          <Link href="/docs/spec/overview">Patterns</Link>
         </li>
         <li>
-          <Link href="/docs/resource/download">Resource Download</Link>
+          <Link href="/docs/resources">Resource Download</Link>
         </li>
       </ul>
     </Paragraph>
@@ -84,13 +84,13 @@ ReactDOM.render(
     <Paragraph>
       <ul>
         <li>
-          <Link href="/docs/spec/proximity">设计原则</Link>
+          <Link href="/docs/spec/proximity-cn">设计原则</Link>
         </li>
         <li>
-          <Link href="/docs/pattern/navigation">设计模式</Link>
+          <Link href="/docs/spec/overview-cn">设计模式</Link>
         </li>
         <li>
-          <Link href="/docs/resource/download">设计资源</Link>
+          <Link href="/docs/resources-cn">设计资源</Link>
         </li>
       </ul>
     </Paragraph>

docs/spec/colors.en-US.md

@@ -40,7 +40,7 @@ ReactDOM.render(<Palette color={{ name: 'gray', count: 13 }} direction="horizont
 
 ### Data Visualization Color Palette
 
-Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV's "effective, clear, accurate and beautiful". [View Palette](https://antv.vision/en/docs/specification/principles/visual)
+Data visualization color palette is based on the basic color palette and neutral color palette, and based on the principle that AntV's "effective, clear, accurate and beautiful". [View Palette](https://antv.vision/en/docs/specification/language/palette)
 
 ### Palette Generation Tool
 

docs/spec/colors.zh-CN.md

@@ -48,7 +48,7 @@ ReactDOM.render(<Palette color={{ name: 'gray', count: 13 }} direction="horizont
 
 ### 数据可视化色板
 
-数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 「有效、清晰、准确、美」的原则产生的。[查看色板](https://antv.vision/zh/docs/specification/principles/basic/)
+数据可视化色板是在基础色板以及中性色板的基础上，融合 AntV 「有效、清晰、准确、美」的原则产生的。[查看色板](https://antv.vision/zh/docs/specification/language/palette)
 
 ### 色板生成工具
 

docs/spec/overview.zh-CN.md

@@ -6,7 +6,7 @@ title: 概览
 
 > 这是一份动态更新的设计文档，你的阅读和反馈是我们前进的动力。
 
-秉承 [Ant Design 设计价值观](/docs/spec/values)，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 [antd 组件](/docs/react/introduce)设计界面，既减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，变不离宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容：
+秉承 [Ant Design 设计价值观](/docs/spec/values)，针对企业级产品反复出现的设计问题，设计模式给出一般性的解决方案，实现跨应用交互一致性的有效融合。依照设计模式使用 [antd 组件](/docs/react/introduce)设计界面，既减少了不必要的认知成本，又能够提升交互确定性和设计的效率。考虑到需要适应各种独特的业务场景，模式的规则具有一定的灵活性，万变不离其宗，通过了解设计模式的构建逻辑，可以衍生出更具场景特性的解决方案。设计模式包含以下内容：
 
 ### 原则
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "antd",
-  "version": "4.12.2",
+  "version": "4.12.3",
   "description": "An enterprise-class UI design language and React components implementation",
   "title": "Ant Design",
   "keywords": [
@@ -109,8 +109,8 @@
     "ie >= 11"
   ],
   "dependencies": {
-    "@ant-design/colors": "^5.0.0",
+    "@ant-design/colors": "^6.0.0",
-    "@ant-design/icons": "^4.4.0",
+    "@ant-design/icons": "^4.5.0",
     "@ant-design/react-slick": "~0.28.1",
     "@babel/runtime": "^7.12.5",
     "array-tree-filter": "^2.1.0",