feat: closes #26594

ant-design · Sep 5, 2020 · 0c3dc16 · 0c3dc16
1 parent 2595b17
commit 0c3dc16
Show file tree

Hide file tree

Showing 85 changed files with 859 additions and 666 deletions.
diff --git a/components/anchor/Anchor.tsx b/components/anchor/Anchor.tsx
@@ -286,9 +286,13 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState, Co
       visible: activeLink,
     });
 
-    const wrapperClass = classNames(className, `${prefixCls}-wrapper`, {
-      [`${prefixCls}-rtl`]: direction === 'rtl',
-    });
+    const wrapperClass = classNames(
+      `${prefixCls}-wrapper`,
+      {
+        [`${prefixCls}-rtl`]: direction === 'rtl',
+      },
+      className,
+    );
 
     const anchorClass = classNames(prefixCls, {
       fixed: !affix && !showInkInFixed,

diff --git a/components/anchor/AnchorLink.tsx b/components/anchor/AnchorLink.tsx
@@ -51,9 +51,13 @@ class AnchorLink extends React.Component<AnchorLinkProps, any, AntAnchor> {
     const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
     const prefixCls = getPrefixCls('anchor', customizePrefixCls);
     const active = this.context.activeLink === href;
-    const wrapperClassName = classNames(className, `${prefixCls}-link`, {
-      [`${prefixCls}-link-active`]: active,
-    });
+    const wrapperClassName = classNames(
+      `${prefixCls}-link`,
+      {
+        [`${prefixCls}-link-active`]: active,
+      },
+      className,
+    );
     const titleClassName = classNames(`${prefixCls}-link-title`, {
       [`${prefixCls}-link-title-active`]: active,
     });

diff --git a/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap b/components/auto-complete/__tests__/__snapshots__/demo.test.js.snap
@@ -79,7 +79,7 @@ exports[`renders ./components/auto-complete/demo/certain-category.md correctly 1
       class="ant-select-selection-search"
     >
       <span
-        class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper ant-input-affix-wrapper-lg"
+        class="ant-input-affix-wrapper ant-input-affix-wrapper-lg ant-input-search ant-select-selection-search-input"
       >
         <input
           aria-activedescendant="undefined_list_0"
@@ -448,7 +448,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                 class="ant-select-selection-search"
               >
                 <span
-                  class="ant-select-selection-search-input ant-input-affix-wrapper"
+                  class="ant-input-affix-wrapper ant-select-selection-search-input"
                 >
                   <input
                     aria-activedescendant="undefined_list_0"
@@ -590,7 +590,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -733,7 +733,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -877,7 +877,7 @@ exports[`renders ./components/auto-complete/demo/form-debug.md correctly 1`] = `
                   class="ant-select-selection-search"
                 >
                   <span
-                    class="ant-input-search ant-select-selection-search-input ant-input-affix-wrapper"
+                    class="ant-input-affix-wrapper ant-input-search ant-select-selection-search-input"
                   >
                     <input
                       aria-activedescendant="undefined_list_0"
@@ -1037,7 +1037,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
       class="ant-select-selection-search"
     >
       <span
-        class="ant-input-search ant-select-selection-search-input ant-input-search-enter-button ant-input-search-large ant-input-group-wrapper ant-input-group-wrapper-lg"
+        class="ant-input-group-wrapper ant-input-group-wrapper-lg ant-input-search ant-input-search-enter-button ant-input-search-large ant-select-selection-search-input"
       >
         <span
           class="ant-input-wrapper ant-input-group"
@@ -1059,7 +1059,7 @@ exports[`renders ./components/auto-complete/demo/uncertain-category.md correctly
             class="ant-input-group-addon"
           >
             <button
-              class="ant-btn ant-input-search-button ant-btn-primary ant-btn-lg"
+              class="ant-btn ant-btn-primary ant-btn-lg ant-input-search-button"
               type="button"
             >
               <span

diff --git a/components/auto-complete/__tests__/__snapshots__/index.test.js.snap b/components/auto-complete/__tests__/__snapshots__/index.test.js.snap
@@ -89,7 +89,7 @@ exports[`AutoComplete legacy dataSource should accept react element option 1`] =
 
 exports[`AutoComplete rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-select ant-select-auto-complete ant-select-rtl ant-select-single ant-select-show-search"
+  class="ant-select ant-select-rtl ant-select-auto-complete ant-select-single ant-select-show-search"
 >
   <div
     class="ant-select-selector"

diff --git a/components/auto-complete/index.tsx b/components/auto-complete/index.tsx
@@ -117,7 +117,7 @@ const AutoComplete: React.ForwardRefRenderFunction<Select, AutoCompleteProps> =
             ref={selectRef as any}
             {...omit(props, ['dataSource'])}
             prefixCls={prefixCls}
-            className={classNames(className, `${prefixCls}-auto-complete`)}
+            className={classNames(`${prefixCls}-auto-complete`, className)}
             mode={Select.SECRET_COMBOBOX_MODE_DO_NOT_USE as any}
             getInputElement={getInputElement}
           >

diff --git a/components/avatar/avatar.tsx b/components/avatar/avatar.tsx
@@ -107,11 +107,16 @@ const InternalAvatar: React.ForwardRefRenderFunction<unknown, AvatarProps> = (pr
     [`${prefixCls}-sm`]: size === 'small',
   });
 
-  const classString = classNames(prefixCls, className, sizeCls, {
-    [`${prefixCls}-${shape}`]: shape,
-    [`${prefixCls}-image`]: src && isImgExist,
-    [`${prefixCls}-icon`]: icon,
-  });
+  const classString = classNames(
+    prefixCls,
+    sizeCls,
+    {
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-image`]: src && isImgExist,
+      [`${prefixCls}-icon`]: icon,
+    },
+    className,
+  );
 
   const sizeStyle: React.CSSProperties =
     typeof size === 'number'

diff --git a/components/back-top/index.tsx b/components/back-top/index.tsx
@@ -98,9 +98,13 @@ const BackTop: React.FC<BackTopProps> = props => {
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const { prefixCls: customizePrefixCls, className = '' } = props;
   const prefixCls = getPrefixCls('back-top', customizePrefixCls);
-  const classString = classNames(prefixCls, className, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classString = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   // fix https://fb.me/react-unknown-prop
   const divProps = omit(props, [

diff --git a/components/badge/Ribbon.tsx b/components/badge/Ribbon.tsx
@@ -29,10 +29,15 @@ const Ribbon: React.FC<RibbonProps> = function Ribbon({
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
   const prefixCls = getPrefixCls('ribbon', customizePrefixCls);
   const colorInPreset = isPresetColor(color);
-  const ribbonCls = classNames(prefixCls, className, `${prefixCls}-placement-${placement}`, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-    [`${prefixCls}-color-${color}`]: colorInPreset,
-  });
+  const ribbonCls = classNames(
+    prefixCls,
+    `${prefixCls}-placement-${placement}`,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+      [`${prefixCls}-color-${color}`]: colorInPreset,
+    },
+    className,
+  );
   const colorStyle: React.CSSProperties = {};
   const cornerColorStyle: React.CSSProperties = {};
   if (color && !colorInPreset) {

diff --git a/components/badge/__tests__/__snapshots__/demo.test.js.snap b/components/badge/__tests__/__snapshots__/demo.test.js.snap
@@ -1318,7 +1318,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="site-badge-count-4 ant-badge ant-badge-not-a-wrapper"
+    class="ant-badge ant-badge-not-a-wrapper site-badge-count-4"
   >
     <sup
       class="ant-scroll-number ant-badge-count"
@@ -1483,7 +1483,7 @@ exports[`renders ./components/badge/demo/no-wrapper.md correctly 1`] = `
     </sup>
   </span>
   <span
-    class="site-badge-count-109 ant-badge ant-badge-not-a-wrapper"
+    class="ant-badge ant-badge-not-a-wrapper site-badge-count-109"
   >
     <sup
       class="ant-scroll-number ant-badge-count ant-badge-multiple-words"

diff --git a/components/badge/index.tsx b/components/badge/index.tsx
@@ -62,7 +62,8 @@ const Badge: CompoundedComponent = ({
     return displayCount as string | number | null;
   };
 
-  const hasStatus = (): boolean => (status !== null && status !== undefined) || (color !== null && color !== undefined);
+  const hasStatus = (): boolean =>
+    (status !== null && status !== undefined) || (color !== null && color !== undefined);
 
   const isZero = () => {
     const numberedDisplayCount = getNumberedDisplayCount();
@@ -177,11 +178,15 @@ const Badge: CompoundedComponent = ({
     statusStyle.background = color;
   }
 
-  const badgeClassName = classNames(className, prefixCls, {
-    [`${prefixCls}-status`]: hasStatus(),
-    [`${prefixCls}-not-a-wrapper`]: !children,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const badgeClassName = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-status`]: hasStatus(),
+      [`${prefixCls}-not-a-wrapper`]: !children,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   // <Badge status="success" />
   if (!children && hasStatus()) {

diff --git a/components/breadcrumb/Breadcrumb.tsx b/components/breadcrumb/Breadcrumb.tsx
@@ -135,9 +135,13 @@ const Breadcrumb: BreadcrumbInterface = ({
     });
   }
 
-  const breadcrumbClassName = classNames(className, prefixCls, {
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const breadcrumbClassName = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   return (
     <div className={breadcrumbClassName} style={style} {...restProps}>

diff --git a/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/Breadcrumb.test.js.snap
@@ -116,7 +116,7 @@ exports[`Breadcrumb should render a menu 1`] = `
   </span>
   <span>
     <span
-      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
     >
       <span
         class="ant-breadcrumb-link"

diff --git a/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap b/components/breadcrumb/__tests__/__snapshots__/demo.test.js.snap
@@ -97,7 +97,7 @@ exports[`renders ./components/breadcrumb/demo/overlay.md correctly 1`] = `
   </span>
   <span>
     <span
-      class="ant-breadcrumb-overlay-link ant-dropdown-trigger"
+      class="ant-dropdown-trigger ant-breadcrumb-overlay-link"
     >
       <span
         class="ant-breadcrumb-link"

diff --git a/components/button/button.tsx b/components/button/button.tsx
@@ -233,18 +233,22 @@ const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (pr
 
   const iconType = innerLoading ? 'loading' : icon;
 
-  const classes = classNames(prefixCls, className, {
-    [`${prefixCls}-${type}`]: type,
-    [`${prefixCls}-${shape}`]: shape,
-    [`${prefixCls}-${sizeCls}`]: sizeCls,
-    [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
-    [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
-    [`${prefixCls}-loading`]: innerLoading,
-    [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
-    [`${prefixCls}-block`]: block,
-    [`${prefixCls}-dangerous`]: !!danger,
-    [`${prefixCls}-rtl`]: direction === 'rtl',
-  });
+  const classes = classNames(
+    prefixCls,
+    {
+      [`${prefixCls}-${type}`]: type,
+      [`${prefixCls}-${shape}`]: shape,
+      [`${prefixCls}-${sizeCls}`]: sizeCls,
+      [`${prefixCls}-icon-only`]: !children && children !== 0 && iconType,
+      [`${prefixCls}-background-ghost`]: ghost && !isUnborderedButtonType(type),
+      [`${prefixCls}-loading`]: innerLoading,
+      [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
+      [`${prefixCls}-block`]: block,
+      [`${prefixCls}-dangerous`]: !!danger,
+      [`${prefixCls}-rtl`]: direction === 'rtl',
+    },
+    className,
+  );
 
   const iconNode =
     icon && !innerLoading ? (

diff --git a/components/calendar/__tests__/__snapshots__/demo.test.js.snap b/components/calendar/__tests__/__snapshots__/demo.test.js.snap
@@ -955,7 +955,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
       class="ant-picker-calendar-header"
     >
       <div
-        class="ant-select ant-picker-calendar-year-select ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -1015,7 +1015,7 @@ exports[`renders ./components/calendar/demo/card.md correctly 1`] = `
         </span>
       </div>
       <div
-        class="ant-select ant-picker-calendar-month-select ant-select-sm ant-select-single ant-select-show-arrow"
+        class="ant-select ant-select-sm ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
       >
         <div
           class="ant-select-selector"
@@ -1964,7 +1964,7 @@ exports[`renders ./components/calendar/demo/customize-header.md correctly 1`] =
           style="padding-left:4px;padding-right:4px"
         >
           <div
-            class="ant-select my-year-select ant-select-sm ant-select-single ant-select-show-arrow"
+            class="ant-select ant-select-sm my-year-select ant-select-single ant-select-show-arrow"
           >
             <div
               class="ant-select-selector"

diff --git a/components/calendar/__tests__/__snapshots__/index.test.js.snap b/components/calendar/__tests__/__snapshots__/index.test.js.snap
@@ -954,7 +954,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
     class="ant-picker-calendar-header"
   >
     <div
-      class="ant-select ant-picker-calendar-year-select ant-select-rtl ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-rtl ant-picker-calendar-year-select ant-select-single ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"
@@ -1014,7 +1014,7 @@ exports[`Calendar rtl render component should be rendered correctly in RTL direc
       </span>
     </div>
     <div
-      class="ant-select ant-picker-calendar-month-select ant-select-rtl ant-select-single ant-select-show-arrow"
+      class="ant-select ant-select-rtl ant-picker-calendar-month-select ant-select-single ant-select-show-arrow"
     >
       <div
         class="ant-select-selector"

diff --git a/components/calendar/generateCalendar.tsx b/components/calendar/generateCalendar.tsx
@@ -241,11 +241,15 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
         {(mergedLocale: any) => {
           return (
             <div
-              className={classNames(calendarPrefixCls, className, {
-                [`${calendarPrefixCls}-full`]: fullscreen,
-                [`${calendarPrefixCls}-mini`]: !fullscreen,
-                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
-              })}
+              className={classNames(
+                calendarPrefixCls,
+                {
+                  [`${calendarPrefixCls}-full`]: fullscreen,
+                  [`${calendarPrefixCls}-mini`]: !fullscreen,
+                  [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
+                },
+                className,
+              )}
               style={style}
             >
               {headerRender ? (

diff --git a/components/card/__tests__/__snapshots__/demo.test.js.snap b/components/card/__tests__/__snapshots__/demo.test.js.snap
@@ -839,7 +839,7 @@ Array [
         </div>
       </div>
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
+        class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
           class="ant-tabs-nav"
@@ -962,7 +962,7 @@ Array [
         class="ant-card-head-wrapper"
       />
       <div
-        class="ant-tabs ant-tabs-top ant-card-head-tabs ant-tabs-large"
+        class="ant-tabs ant-tabs-top ant-tabs-large ant-card-head-tabs"
       >
         <div
           class="ant-tabs-nav"