Merge pull request #23758 from ant-design/feature

chore: Merge feature into master

components/affix/index.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import ResizeObserver from 'rc-resize-observer';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext, ConfigConsumerProps } from '../config-provider';
 import { throttleByAnimationFrameDecorator } from '../_util/throttleByAnimationFrame';
 
 import {
@@ -50,9 +50,7 @@ export interface AffixState {
 }
 
 class Affix extends React.Component<AffixProps, AffixState> {
-  static defaultProps = {
+  static contextType = ConfigContext;
-    target: getDefaultTarget,
-  };
 
   state: AffixState = {
     status: AffixStatus.None,
@@ -66,14 +64,27 @@ class Affix extends React.Component<AffixProps, AffixState> {
 
   private timeout: number;
 
+  context: ConfigConsumerProps;
+
+  private getTargetFunc() {
+    const { getTargetContainer } = this.context;
+    const { target } = this.props;
+
+    if (target !== undefined) {
+      return target;
+    }
+
+    return getTargetContainer || getDefaultTarget;
+  }
+
   // Event handler
   componentDidMount() {
-    const { target } = this.props;
+    const targetFunc = this.getTargetFunc();
-    if (target) {
+    if (targetFunc) {
       // [Legacy] Wait for parent component ref has its value.
       // We should use target as directly element instead of function which makes element check hard.
       this.timeout = setTimeout(() => {
-        addObserveTarget(target(), this);
+        addObserveTarget(targetFunc(), this);
         // Mock Event object.
         this.updatePosition();
       });
@@ -82,10 +93,10 @@ class Affix extends React.Component<AffixProps, AffixState> {
 
   componentDidUpdate(prevProps: AffixProps) {
     const { prevTarget } = this.state;
-    const { target } = this.props;
+    const targetFunc = this.getTargetFunc();
     let newTarget = null;
-    if (target) {
+    if (targetFunc) {
-      newTarget = target() || null;
+      newTarget = targetFunc() || null;
     }
 
     if (prevTarget !== newTarget) {
@@ -141,15 +152,16 @@ class Affix extends React.Component<AffixProps, AffixState> {
   // =================== Measure ===================
   measure = () => {
     const { status, lastAffix } = this.state;
-    const { target, onChange } = this.props;
+    const { onChange } = this.props;
-    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !target) {
+    const targetFunc = this.getTargetFunc();
+    if (status !== AffixStatus.Prepare || !this.fixedNode || !this.placeholderNode || !targetFunc) {
       return;
     }
 
     const offsetTop = this.getOffsetTop();
     const offsetBottom = this.getOffsetBottom();
 
-    const targetNode = target();
+    const targetNode = targetFunc();
     if (!targetNode) {
       return;
     }
@@ -220,15 +232,15 @@ class Affix extends React.Component<AffixProps, AffixState> {
 
   @throttleByAnimationFrameDecorator()
   lazyUpdatePosition() {
-    const { target } = this.props;
+    const targetFunc = this.getTargetFunc();
     const { affixStyle } = this.state;
 
     // Check position change before measure to make Safari smooth
-    if (target && affixStyle) {
+    if (targetFunc && affixStyle) {
       const offsetTop = this.getOffsetTop();
       const offsetBottom = this.getOffsetBottom();
 
-      const targetNode = target();
+      const targetNode = targetFunc();
       if (targetNode && this.placeholderNode) {
         const targetRect = getTargetRect(targetNode);
         const placeholderReact = getTargetRect(this.placeholderNode);
@@ -249,7 +261,8 @@ class Affix extends React.Component<AffixProps, AffixState> {
   }
 
   // =================== Render ===================
-  renderAffix = ({ getPrefixCls }: ConfigConsumerProps) => {
+  render = () => {
+    const { getPrefixCls } = this.context;
     const { affixStyle, placeholderStyle } = this.state;
     const { prefixCls, children } = this.props;
     const className = classNames({
@@ -283,10 +296,6 @@ class Affix extends React.Component<AffixProps, AffixState> {
       </ResizeObserver>
     );
   };
-
-  render() {
-    return <ConfigConsumer>{this.renderAffix}</ConfigConsumer>;
-  }
 }
 
 export default Affix;

components/alert/demo/style.md

@@ -26,3 +26,9 @@ ReactDOM.render(
   mountNode,
 );
 ```
+
+<style>
+[data-theme="compact"] .code-box-demo .ant-alert {
+  margin-bottom: 8px;
+}
+</style>

components/alert/style/index.less

@@ -13,6 +13,10 @@
 
   &&-no-icon {
     padding: @alert-no-icon-padding-vertical 15px;
+    .@{alert-prefix-cls}-close-icon {
+      top: @alert-no-icon-padding-vertical + @font-size-base * @line-height-base / 2 -
+        @font-size-base / 2;
+    }
   }
 
   &&-closable {
@@ -21,14 +25,14 @@
 
   &-icon {
     position: absolute;
-    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
+    top: @alert-icon-top;
     left: 16px;
   }
 
   &-description {
     display: none;
     font-size: @font-size-base;
-    line-height: 22px;
+    line-height: @font-size-base + 8px;
   }
 
   &-success {
@@ -71,12 +75,12 @@
 
   &-close-icon {
     position: absolute;
-    top: @padding-xs;
+    top: 8px + @font-size-base * @line-height-base / 2 - @font-size-base / 2;
     right: 16px;
     padding: 0;
     overflow: hidden;
     font-size: @font-size-sm;
-    line-height: 22px;
+    line-height: @font-size-sm;
     background-color: transparent;
     border: none;
     outline: none;
@@ -101,7 +105,7 @@
 
   &-with-description {
     position: relative;
-    padding: 15px 15px 15px 64px;
+    padding: @alert-with-description-padding;
     color: @alert-text-color;
     line-height: @line-height-base;
     border-radius: @border-radius-base;
@@ -113,15 +117,15 @@
 
   &-with-description &-icon {
     position: absolute;
-    top: 16px;
+    top: @alert-with-description-icon-top;
-    left: 24px;
+    left: @alert-with-description-icon-size;
-    font-size: 24px;
+    font-size: @alert-with-description-icon-size;
   }
 
   &-with-description &-close-icon {
     position: absolute;
-    top: 16px;
+    top: @padding-xs;
-    right: 16px;
+    right: @padding-xs;
     font-size: @font-size-base;
     cursor: pointer;
   }

components/anchor/Anchor.tsx

@@ -1,13 +1,13 @@
 import * as React from 'react';
 import * as ReactDOM from 'react-dom';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import addEventListener from 'rc-util/lib/Dom/addEventListener';
 import Affix from '../affix';
 import AnchorLink from './AnchorLink';
-import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import { ConfigContext, ConfigConsumerProps } from '../config-provider';
 import scrollTo from '../_util/scrollTo';
 import getScroll from '../_util/getScroll';
+import AnchorContext from './context';
 
 function getDefaultContainer() {
   return window;
@@ -88,23 +88,22 @@ export interface AntAnchor {
   ) => void;
 }
 
-export default class Anchor extends React.Component<AnchorProps, AnchorState> {
+export default class Anchor extends React.Component<AnchorProps, AnchorState, ConfigConsumerProps> {
   static Link: typeof AnchorLink;
 
   static defaultProps = {
     affix: true,
     showInkInFixed: false,
-    getContainer: getDefaultContainer,
   };
 
-  static childContextTypes = {
+  static contextType = ConfigContext;
-    antAnchor: PropTypes.object,
-  };
 
   state = {
     activeLink: null,
   };
 
+  content: ConfigConsumerProps;
+
   private inkNode: HTMLSpanElement;
 
   // scroll scope's container
@@ -118,37 +117,38 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
 
   private prefixCls?: string;
 
-  getChildContext() {
+  // Context
-    const antAnchor: AntAnchor = {
+  registerLink = (link: string) => {
-      registerLink: (link: string) => {
+    if (!this.links.includes(link)) {
-        if (!this.links.includes(link)) {
+      this.links.push(link);
-          this.links.push(link);
+    }
-        }
+  };
-      },
+
-      unregisterLink: (link: string) => {
+  unregisterLink = (link: string) => {
-        const index = this.links.indexOf(link);
+    const index = this.links.indexOf(link);
-        if (index !== -1) {
+    if (index !== -1) {
-          this.links.splice(index, 1);
+      this.links.splice(index, 1);
-        }
+    }
-      },
+  };
-      activeLink: this.state.activeLink,
+
-      scrollTo: this.handleScrollTo,
+  getContainer = () => {
-      onClick: this.props.onClick,
+    const { getTargetContainer } = this.context;
-    };
+    const { getContainer } = this.props;
-    return { antAnchor };
+
-  }
+    const getFunc = getContainer || getTargetContainer || getDefaultContainer;
+
+    return getFunc();
+  };
 
   componentDidMount() {
-    const { getContainer } = this.props as AnchorDefaultProps;
+    this.scrollContainer = this.getContainer();
-    this.scrollContainer = getContainer();
     this.scrollEvent = addEventListener(this.scrollContainer, 'scroll', this.handleScroll);
     this.handleScroll();
   }
 
   componentDidUpdate() {
     if (this.scrollEvent) {
-      const { getContainer } = this.props as AnchorDefaultProps;
+      const currentContainer = this.getContainer();
-      const currentContainer = getContainer();
       if (this.scrollContainer !== currentContainer) {
         this.scrollContainer = currentContainer;
         this.scrollEvent.remove();
@@ -178,8 +178,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
     }
 
     const linkSections: Array<Section> = [];
-    const { getContainer } = this.props as AnchorDefaultProps;
+    const container = this.getContainer();
-    const container = getContainer();
     this.links.forEach(link => {
       const sharpLinkMatch = sharpMatcherRegx.exec(link.toString());
       if (!sharpLinkMatch) {
@@ -205,10 +204,10 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
   }
 
   handleScrollTo = (link: string) => {
-    const { offsetTop, getContainer, targetOffset } = this.props as AnchorDefaultProps;
+    const { offsetTop, targetOffset } = this.props;
 
     this.setCurrentActiveLink(link);
-    const container = getContainer();
+    const container = this.getContainer();
     const scrollTop = getScroll(container, true);
     const sharpLinkMatch = sharpMatcherRegx.exec(link);
     if (!sharpLinkMatch) {
@@ -228,7 +227,7 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
       callback: () => {
         this.animating = false;
       },
-      getContainer,
+      getContainer: this.getContainer,
     });
   };
 
@@ -274,7 +273,9 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
     }
   };
 
-  renderAnchor = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+  render = () => {
+    const { getPrefixCls, direction } = this.context;
+
     const {
       prefixCls: customizePrefixCls,
       className = '',
@@ -283,7 +284,6 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
       affix,
       showInkInFixed,
       children,
-      getContainer,
     } = this.props;
     const { activeLink } = this.state;
 
@@ -322,16 +322,24 @@ export default class Anchor extends React.Component<AnchorProps, AnchorState> {
       </div>
     );
 
-    return !affix ? (
+    return (
-      anchorContent
+      <AnchorContext.Provider
-    ) : (
+        value={{
-      <Affix offsetTop={offsetTop} target={getContainer}>
+          registerLink: this.registerLink,
-        {anchorContent}
+          unregisterLink: this.unregisterLink,
-      </Affix>
+          activeLink: this.state.activeLink,
+          scrollTo: this.handleScrollTo,
+          onClick: this.props.onClick,
+        }}
+      >
+        {!affix ? (
+          anchorContent
+        ) : (
+          <Affix offsetTop={offsetTop} target={this.getContainer}>
+            {anchorContent}
+          </Affix>
+        )}
+      </AnchorContext.Provider>
     );
   };
-
-  render() {
-    return <ConfigConsumer>{this.renderAnchor}</ConfigConsumer>;
-  }
 }

components/anchor/AnchorLink.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react';
-import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { AntAnchor } from './Anchor';
 import { ConfigConsumer, ConfigConsumerProps } from '../config-provider';
+import AnchorContext from './context';
 
 export interface AnchorLinkProps {
   prefixCls?: string;
@@ -13,37 +13,33 @@ export interface AnchorLinkProps {
   className?: string;
 }
 
-class AnchorLink extends React.Component<AnchorLinkProps, any> {
+class AnchorLink extends React.Component<AnchorLinkProps, any, AntAnchor> {
   static defaultProps = {
     href: '#',
   };
 
-  static contextTypes = {
+  static contextType = AnchorContext;
-    antAnchor: PropTypes.object,
-  };
 
-  context: {
+  context: AntAnchor;
-    antAnchor: AntAnchor;
-  };
 
   componentDidMount() {
-    this.context.antAnchor.registerLink(this.props.href);
+    this.context.registerLink(this.props.href);
   }
 
   componentDidUpdate({ href: prevHref }: AnchorLinkProps) {
     const { href } = this.props;
     if (prevHref !== href) {
-      this.context.antAnchor.unregisterLink(prevHref);
+      this.context.unregisterLink(prevHref);
-      this.context.antAnchor.registerLink(href);
+      this.context.registerLink(href);
     }
   }
 
   componentWillUnmount() {
-    this.context.antAnchor.unregisterLink(this.props.href);
+    this.context.unregisterLink(this.props.href);
   }
 
   handleClick = (e: React.MouseEvent<HTMLElement>) => {
-    const { scrollTo, onClick } = this.context.antAnchor;
+    const { scrollTo, onClick } = this.context;
     const { href, title } = this.props;
     if (onClick) {
       onClick(e, { title, href });
@@ -54,7 +50,7 @@ class AnchorLink extends React.Component<AnchorLinkProps, any> {
   renderAnchorLink = ({ getPrefixCls }: ConfigConsumerProps) => {
     const { prefixCls: customizePrefixCls, href, title, children, className, target } = this.props;
     const prefixCls = getPrefixCls('anchor', customizePrefixCls);
-    const active = this.context.antAnchor.activeLink === href;
+    const active = this.context.activeLink === href;
     const wrapperClassName = classNames(className, `${prefixCls}-link`, {
       [`${prefixCls}-link-active`]: active,
     });

components/anchor/context.ts

@@ -0,0 +1,6 @@
+import React from 'react';
+import { AntAnchor } from './Anchor';
+
+const AnchorContext = React.createContext<AntAnchor>(null as any);
+
+export default AnchorContext;

components/anchor/style/index.less

@@ -52,7 +52,7 @@
   }
 
   &-link {
-    padding: 7px 0 7px 16px;
+    padding: @anchor-link-padding;
     line-height: 1.143;
 
     &-title {

components/button/__tests__/type.test.tsx

@@ -263,7 +263,5 @@ describe('Button', () => {
         throw new Error('Should not called!!!');
       },
     });
-
-    expect(wrapper.find('Button').instance()).toBe(null);
   });
 });

components/button/button.tsx

@@ -104,16 +104,18 @@ export type NativeButtonProps = {
 
 export type ButtonProps = Partial<AnchorButtonProps & NativeButtonProps>;
 
-interface ButtonTypeProps extends React.FC<ButtonProps> {
+interface CompoundedComponent
+  extends React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLElement>> {
   Group: typeof Group;
   __ANT_BUTTON: boolean;
 }
 
-const Button: ButtonTypeProps = ({ ...props }) => {
+const InternalButton: React.ForwardRefRenderFunction<unknown, ButtonProps> = (props, ref) => {
+  const size = React.useContext(SizeContext);
   const [loading, setLoading] = React.useState(props.loading);
   const [hasTwoCNChar, setHasTwoCNChar] = React.useState(false);
   const { getPrefixCls, autoInsertSpaceInButton, direction } = React.useContext(ConfigContext);
-  const buttonRef = React.createRef<HTMLButtonElement>();
+  const buttonRef = (ref as any) || React.createRef<HTMLElement>();
   let delayTimeout: number;
 
   const isNeedInserted = () => {
@@ -162,116 +164,107 @@ const Button: ButtonTypeProps = ({ ...props }) => {
       (onClick as React.MouseEventHandler<HTMLButtonElement | HTMLAnchorElement>)(e);
     }
   };
+  const {
+    prefixCls: customizePrefixCls,
+    type,
+    danger,
+    shape,
+    size: customizeSize,
+    className,
+    children,
+    icon,
+    ghost,
+    block,
+    ...rest
+  } = props;
 
-  return (
+  warning(
-    <SizeContext.Consumer>
+    !(typeof icon === 'string' && icon.length > 2),
-      {size => {
+    'Button',
-        const {
+    `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
-          prefixCls: customizePrefixCls,
-          type,
-          danger,
-          shape,
-          size: customizeSize,
-          className,
-          children,
-          icon,
-          ghost,
-          block,
-          ...rest
-        } = props;
-
-        warning(
-          !(typeof icon === 'string' && icon.length > 2),
-          'Button',
-          `\`icon\` is using ReactNode instead of string naming in v4. Please check \`${icon}\` at https://ant.design/components/icon`,
-        );
-
-        warning(
-          (type as string) !== 'danger',
-          'Button',
-          `\`type="danger"\` is deprecated. Please use \`danger\`.`,
-        );
-
-        const prefixCls = getPrefixCls('btn', customizePrefixCls);
-        const autoInsertSpace = autoInsertSpaceInButton !== false;
-
-        // large => lg
-        // small => sm
-        let sizeCls = '';
-        switch (customizeSize || size) {
-          case 'large':
-            sizeCls = 'lg';
-            break;
-          case 'small':
-            sizeCls = 'sm';
-            break;
-          default:
-            break;
-        }
-
-        const iconType = loading ? '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,
-          [`${prefixCls}-loading`]: loading,
-          [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
-          [`${prefixCls}-block`]: block,
-          [`${prefixCls}-dangerous`]: !!danger,
-          [`${prefixCls}-rtl`]: direction === 'rtl',
-        });
-
-        const iconNode =
-          icon && !loading ? (
-            icon
-          ) : (
-            <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={loading} />
-          );
-
-        const kids =
-          children || children === 0
-            ? spaceChildren(children, isNeedInserted() && autoInsertSpace)
-            : null;
-
-        const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
-        if (linkButtonRestProps.href !== undefined) {
-          return (
-            <a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
-              {iconNode}
-              {kids}
-            </a>
-          );
-        }
-
-        // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
-        const { htmlType, ...otherProps } = rest as NativeButtonProps;
-
-        const buttonNode = (
-          <button
-            {...(omit(otherProps, ['loading']) as NativeButtonProps)}
-            type={htmlType}
-            className={classes}
-            onClick={handleClick}
-            ref={buttonRef}
-          >
-            {iconNode}
-            {kids}
-          </button>
-        );
-
-        if (type === 'link') {
-          return buttonNode;
-        }
-
-        return <Wave>{buttonNode}</Wave>;
-      }}
-    </SizeContext.Consumer>
   );
+
+  const prefixCls = getPrefixCls('btn', customizePrefixCls);
+  const autoInsertSpace = autoInsertSpaceInButton !== false;
+
+  // large => lg
+  // small => sm
+  let sizeCls = '';
+  switch (customizeSize || size) {
+    case 'large':
+      sizeCls = 'lg';
+      break;
+    case 'small':
+      sizeCls = 'sm';
+      break;
+    default:
+      break;
+  }
+
+  const iconType = loading ? '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,
+    [`${prefixCls}-loading`]: loading,
+    [`${prefixCls}-two-chinese-chars`]: hasTwoCNChar && autoInsertSpace,
+    [`${prefixCls}-block`]: block,
+    [`${prefixCls}-dangerous`]: !!danger,
+    [`${prefixCls}-rtl`]: direction === 'rtl',
+  });
+
+  const iconNode =
+    icon && !loading ? (
+      icon
+    ) : (
+      <LoadingIcon existIcon={!!icon} prefixCls={prefixCls} loading={loading} />
+    );
+
+  const kids =
+    children || children === 0
+      ? spaceChildren(children, isNeedInserted() && autoInsertSpace)
+      : null;
+
+  const linkButtonRestProps = omit(rest as AnchorButtonProps, ['htmlType', 'loading']);
+  if (linkButtonRestProps.href !== undefined) {
+    return (
+      <a {...linkButtonRestProps} className={classes} onClick={handleClick} ref={buttonRef}>
+        {iconNode}
+        {kids}
+      </a>
+    );
+  }
+
+  // React does not recognize the `htmlType` prop on a DOM element. Here we pick it out of `rest`.
+  const { htmlType, ...otherProps } = rest as NativeButtonProps;
+
+  const buttonNode = (
+    <button
+      {...(omit(otherProps, ['loading']) as NativeButtonProps)}
+      type={htmlType}
+      className={classes}
+      onClick={handleClick}
+      ref={buttonRef}
+    >
+      {iconNode}
+      {kids}
+    </button>
+  );
+
+  if (type === 'link') {
+    return buttonNode;
+  }
+
+  return <Wave>{buttonNode}</Wave>;
 };
 
+const Button = React.forwardRef<unknown, ButtonProps>(InternalButton) as CompoundedComponent;
+
+Button.displayName = 'Button';
+
 Button.defaultProps = {
   loading: false,
   ghost: false,

components/calendar/__tests__/__snapshots__/index.test.js.snap

@@ -942,7 +942,7 @@ exports[`Calendar Calendar should support locale 1`] = `
 
 exports[`Calendar rtl render component should be rendered correctly in RTL direction 1`] = `
 <div
-  class="ant-picker-calendar ant-picker-calendar-full"
+  class="ant-picker-calendar ant-picker-calendar-full ant-picker-calendar-rtl"
 >
   <div
     class="ant-picker-calendar-header"

components/calendar/generateCalendar.tsx

@@ -98,7 +98,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
       onPanelChange,
       onSelect,
     } = props;
-    const { getPrefixCls } = React.useContext(ConfigContext);
+    const { getPrefixCls, direction } = React.useContext(ConfigContext);
     const prefixCls = getPrefixCls('picker', customizePrefixCls);
     const calendarPrefixCls = `${prefixCls}-calendar`;
     const today = generateConfig.getNow();
@@ -239,6 +239,7 @@ function generateCalendar<DateType>(generateConfig: GenerateConfig<DateType>) {
               className={classNames(calendarPrefixCls, className, {
                 [`${calendarPrefixCls}-full`]: fullscreen,
                 [`${calendarPrefixCls}-mini`]: !fullscreen,
+                [`${calendarPrefixCls}-rtl`]: direction === 'rtl',
               })}
               style={style}
             >

components/calendar/style/index.less

@@ -14,7 +14,6 @@
     justify-content: flex-end;
     padding: @padding-sm 0;
 
-
     .@{calendar-prefix-cls}-year-select {
       min-width: 80px;
     }
@@ -190,3 +189,4 @@
   }
 }
 
+@import './rtl';

components/calendar/style/rtl.less

@@ -0,0 +1,44 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@calendar-prefix-cls: ~'@{ant-prefix}-picker-calendar';
+@calendar-picker-prefix-cls: ~'@{ant-prefix}-picker';
+
+.@{calendar-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-header {
+    .@{calendar-prefix-cls}-month-select {
+      .@{calendar-prefix-cls}-rtl & {
+        margin-right: @padding-xs;
+        margin-left: 0;
+      }
+    }
+
+    .@{calendar-prefix-cls}-mode-switch {
+      .@{calendar-prefix-cls}-rtl & {
+        margin-right: @padding-xs;
+        margin-left: 0;
+      }
+    }
+  }
+
+  // ========================== Full ==========================
+  &-full {
+    .@{calendar-picker-prefix-cls}-panel {
+      .@{calendar-prefix-cls}-rtl& {
+        text-align: left;
+      }
+
+      .@{calendar-picker-prefix-cls}-body {
+        th {
+          .@{calendar-prefix-cls}-rtl& {
+            padding: 0 0 5px 12px;
+          }
+        }
+      }
+    }
+  }
+}

components/card/style/index.less

@@ -166,7 +166,7 @@
         display: block;
         min-width: 32px;
         font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
         cursor: pointer;
 
         &:hover {

components/checkbox/style/mixin.less

@@ -171,7 +171,7 @@
     display: inline-block;
     &-item {
       display: inline-block;
-      margin-right: 8px;
+      margin-right: @checkbox-group-item-margin-right;
       &:last-child {
         margin-right: 0;
       }

components/collapse/style/index.less

@@ -26,7 +26,7 @@
       padding: @collapse-header-padding;
       padding-left: @collapse-header-padding-extra;
       color: @heading-color;
-      line-height: 22px;
+      line-height: @line-height-base;
       cursor: pointer;
       transition: all 0.3s;
       .clearfix;
@@ -36,7 +36,7 @@
 
         position: absolute;
         top: 50%;
-        left: @padding-md;
+        left: @collapse-header-arrow-left;
         display: inline-block;
         font-size: @font-size-sm;
         transform: translateY(-50%);

components/config-provider/__tests__/__snapshots__/components.test.js.snap

@@ -12358,9 +12358,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
     class="config-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="config-input-number-handler config-input-number-handler-up "
+      class="config-input-number-handler config-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -12386,9 +12385,8 @@ exports[`ConfigProvider components InputNumber configProvider 1`] = `
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="config-input-number-handler config-input-number-handler-down "
+      class="config-input-number-handler config-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -12438,9 +12436,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
     class="config-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="config-input-number-handler config-input-number-handler-up "
+      class="config-input-number-handler config-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -12466,9 +12463,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize larg
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="config-input-number-handler config-input-number-handler-down "
+      class="config-input-number-handler config-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -12518,9 +12514,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
     class="config-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="config-input-number-handler config-input-number-handler-up "
+      class="config-input-number-handler config-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -12546,9 +12541,8 @@ exports[`ConfigProvider components InputNumber configProvider componentSize midd
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="config-input-number-handler config-input-number-handler-down "
+      class="config-input-number-handler config-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -12598,9 +12592,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="ant-input-number-handler ant-input-number-handler-up "
+      class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -12626,9 +12619,8 @@ exports[`ConfigProvider components InputNumber normal 1`] = `
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="ant-input-number-handler ant-input-number-handler-down "
+      class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -12678,9 +12670,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
     class="prefix-InputNumber-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="prefix-InputNumber-handler prefix-InputNumber-handler-up "
+      class="prefix-InputNumber-handler prefix-InputNumber-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -12706,9 +12697,8 @@ exports[`ConfigProvider components InputNumber prefixCls 1`] = `
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="prefix-InputNumber-handler prefix-InputNumber-handler-down "
+      class="prefix-InputNumber-handler prefix-InputNumber-handler-down"
       role="button"
       unselectable="unselectable"
     >

components/config-provider/__tests__/index.test.js

@@ -3,6 +3,7 @@ import { mount } from 'enzyme';
 import ConfigProvider from '..';
 import Button from '../../button';
 import Table from '../../table';
+import Input from '../../input';
 import mountTest from '../../../tests/shared/mountTest';
 
 describe('ConfigProvider', () => {
@@ -54,4 +55,14 @@ describe('ConfigProvider', () => {
 
     expect(wrapper.find('button').props().className).toEqual('bamboo-btn');
   });
+
+  it('input autoComplete', () => {
+    const wrapper = mount(
+      <ConfigProvider input={{ autoComplete: 'off' }}>
+        <Input />
+      </ConfigProvider>,
+    );
+
+    expect(wrapper.find('input').props().autoComplete).toEqual('off');
+  });
 });

components/config-provider/__tests__/target.test.js

@@ -0,0 +1,41 @@
+import React from 'react';
+import { mount } from 'enzyme';
+import ConfigProvider from '..';
+import Affix from '../../affix';
+import Anchor from '../../anchor';
+
+describe('ConfigProvider.getTargetContainer', () => {
+  it('Affix', () => {
+    jest.useFakeTimers();
+    const getTargetContainer = jest.fn(() => window);
+    mount(
+      <ConfigProvider getTargetContainer={getTargetContainer}>
+        <Affix>
+          <span />
+        </Affix>
+      </ConfigProvider>,
+    );
+
+    jest.runAllTimers();
+
+    expect(getTargetContainer).toHaveBeenCalled();
+    jest.useRealTimers();
+  });
+
+  it('Anchor', () => {
+    jest.useFakeTimers();
+    const getTargetContainer = jest.fn(() => window);
+    mount(
+      <ConfigProvider getTargetContainer={getTargetContainer}>
+        <Anchor>
+          <Anchor.Link href="#API" title="API" />
+        </Anchor>
+      </ConfigProvider>,
+    );
+
+    jest.runAllTimers();
+
+    expect(getTargetContainer).toHaveBeenCalled();
+    jest.useRealTimers();
+  });
+});

components/config-provider/context.tsx

@@ -8,12 +8,16 @@ export interface CSPConfig {
 }
 
 export interface ConfigConsumerProps {
+  getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   rootPrefixCls?: string;
   getPrefixCls: (suffixCls: string, customizePrefixCls?: string) => string;
   renderEmpty: RenderEmptyHandler;
   csp?: CSPConfig;
   autoInsertSpaceInButton?: boolean;
+  input?: {
+    autoComplete?: string;
+  };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;

components/config-provider/demo/size.md

@@ -47,7 +47,7 @@ const FormSizeDemo = () => {
           <Input />
         </div>
         <div className="example">
-          <Input.Search />
+          <Input.Search allowClear />
         </div>
         <div className="example">
           <Select defaultValue="demo" options={[{ value: 'demo' }]} />

components/config-provider/index.en-US.md

@@ -41,8 +41,10 @@ Some components use dynamic style to support wave effect. You can config `csp` p
 | componentSize | Config antd component size | `small` \| `middle` \| `large` | - |  |
 | csp | Set [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) config | { nonce: string } | - |  |
 | form | Set Form common props | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
+| input | Set Input common props | { autoComplete?: string } | - | 4.2.0 |
 | renderEmpty | set empty content of components. Ref [Empty](/components/empty/) | Function(componentName: string): ReactNode | - |  |
 | getPopupContainer | to set the container of the popup element. The default is to create a `div` element in `body`. | Function(triggerNode) | `() => document.body` |  |
+| getTargetContainer | Config Affix, Anchor scroll target container. | () => HTMLElement | () => window | 4.2.0 |
 | locale | language package setting, you can find the packages in [antd/es/locale](http://unpkg.com/antd/es/locale/) | object |  |
 | prefixCls | set prefix class. `Note:` This will discard default styles from `antd`. | string | ant |  |
 | pageHeader | Unify the ghost of PageHeader, ref [PageHeader](/components/page-header) | { ghost:boolean } | 'true' |  |

components/config-provider/index.tsx

@@ -13,6 +13,7 @@ import { SizeType, SizeContextProvider } from './SizeContext';
 export { RenderEmptyHandler, ConfigContext, ConfigConsumer, CSPConfig, ConfigConsumerProps };
 
 export const configConsumerProps = [
+  'getTargetContainer',
   'getPopupContainer',
   'rootPrefixCls',
   'getPrefixCls',
@@ -24,6 +25,7 @@ export const configConsumerProps = [
 ];
 
 export interface ConfigProviderProps {
+  getTargetContainer?: () => HTMLElement;
   getPopupContainer?: (triggerNode: HTMLElement) => HTMLElement;
   prefixCls?: string;
   children?: React.ReactNode;
@@ -33,6 +35,9 @@ export interface ConfigProviderProps {
   form?: {
     validateMessages?: ValidateMessages;
   };
+  input?: {
+    autoComplete?: string;
+  };
   locale?: Locale;
   pageHeader?: {
     ghost: boolean;
@@ -60,11 +65,13 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
   renderProvider = (context: ConfigConsumerProps, legacyLocale: Locale) => {
     const {
       children,
+      getTargetContainer,
       getPopupContainer,
       renderEmpty,
       csp,
       autoInsertSpaceInButton,
       form,
+      input,
       locale,
       pageHeader,
       componentSize,
@@ -82,6 +89,10 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       space,
     };
 
+    if (getTargetContainer) {
+      config.getTargetContainer = getTargetContainer;
+    }
+
     if (getPopupContainer) {
       config.getPopupContainer = getPopupContainer;
     }
@@ -94,6 +105,10 @@ class ConfigProvider extends React.Component<ConfigProviderProps> {
       config.pageHeader = pageHeader;
     }
 
+    if (input) {
+      config.input = input;
+    }
+
     let childNode = children;
 
     // Additional Form provider

components/config-provider/index.zh-CN.md

@@ -42,8 +42,10 @@ return (
 | componentSize | 设置 antd 组件大小 | `small` \| `middle` \| `large` | - |  |
 | csp | 设置 [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP) 配置 | { nonce: string } | - |  |
 | form | 设置 Form 组件的通用属性 | { validateMessages?: [ValidateMessages](/components/form/#validateMessages) } | - |  |
+| input | 设置 Input 组件的通用属性 | { autoComplete?: string } | - | 4.2.0 |
 | renderEmpty | 自定义组件空状态。参考 [空状态](/components/empty/) | Function(componentName: string): ReactNode | - |  |
 | getPopupContainer | 弹出框（Select, Tooltip, Menu 等等）渲染父节点，默认渲染到 body 上。 | Function(triggerNode) | () => document.body |  |
+| getTargetContainer | 配置 Affix、Anchor 滚动监听容器。 | () => HTMLElement | () => window | 4.2.0 |
 | locale | 语言包配置，语言包可到 [antd/es/locale](http://unpkg.com/antd/es/locale/) 目录下寻找 | object | - |  |
 | prefixCls | 设置统一样式前缀。`注意：这将不会应用由 antd 提供的默认样式` | string | ant |  |
 | pageHeader | 统一设置 PageHeader 的 ghost，参考 [PageHeader](/components/page-header) | { ghost: boolean } | 'true' |  |

components/date-picker/style/index.less

@@ -4,7 +4,6 @@
 @import './panel';
 
 @picker-prefix-cls: ~'@{ant-prefix}-picker';
-@picker-text-height: 40px;
 
 .picker-padding(@input-height, @font-size, @padding-horizontal) {
   // font height probably 22.0001， So use floor better

components/date-picker/style/panel.less

@@ -6,8 +6,8 @@
 
 .@{picker-prefix-cls} {
   @picker-arrow-size: 7px;
-  @picker-panel-width: 280px;
   @picker-year-month-cell-width: 60px;
+  @picker-panel-width: @picker-panel-cell-width * 7 + @padding-sm * 2 + 4;
 
   &-panel {
     display: inline-block;
@@ -162,7 +162,7 @@
       right: 0;
       left: 0;
       z-index: 1;
-      height: 24px;
+      height: @picker-panel-cell-height;
       transform: translateY(-50%);
       content: '';
     }
@@ -172,9 +172,9 @@
       position: relative;
       z-index: 2;
       display: inline-block;
-      min-width: 24px;
+      min-width: @picker-panel-cell-height;
-      height: 24px;
+      height: @picker-panel-cell-height;
-      line-height: 24px;
+      line-height: @picker-panel-cell-height;
       border-radius: @border-radius-base;
       transition: background @animation-duration-slow, border @animation-duration-slow;
     }
@@ -378,7 +378,7 @@
   &-quarter-panel,
   &-month-panel {
     .@{picker-prefix-cls}-content {
-      height: 265px;
+      height: @picker-panel-without-time-cell-height * 4;
     }
 
     .@{picker-cell-inner-cls} {
@@ -540,10 +540,10 @@
     }
 
     .@{picker-prefix-cls}-content {
-      width: 36px * 7;
+      width: @picker-panel-cell-width * 7;
 
       th {
-        width: 36px;
+        width: @picker-panel-cell-width;
       }
     }
   }

components/date-picker/style/rtl.less

@@ -99,9 +99,9 @@
       position: relative;
       z-index: 2;
       display: inline-block;
-      min-width: 24px;
+      min-width: @picker-panel-cell-height;
-      height: 24px;
+      height: @picker-panel-cell-height;
-      line-height: 24px;
+      line-height: @picker-panel-cell-height;
       border-radius: @border-radius-base;
       transition: background @animation-duration-slow, border @animation-duration-slow;
     }

components/descriptions/style/index.less

@@ -25,7 +25,7 @@
   &-row {
     > th,
     > td {
-      padding-bottom: @padding-md;
+      padding-bottom: @descriptions-item-padding-bottom;
     }
     &:last-child {
       border-bottom: none;

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

@@ -1,83 +1,59 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders ./components/divider/demo/customize-style.md correctly 1`] = `
-<div>
+Array [
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
     style="height:2px;background-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-horizontal ant-divider-dashed"
     role="separator"
     style="border-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-vertical"
     role="separator"
     style="height:60px;background-color:#7cb305"
-  />
+  />,
   <div
     class="ant-divider ant-divider-vertical ant-divider-dashed"
     role="separator"
     style="height:60px;border-color:#7cb305"
-  />
+  />,
-</div>
+]
 `;
 
 exports[`renders ./components/divider/demo/horizontal.md correctly 1`] = `
-<div>
+Array [
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
     class="ant-divider ant-divider-horizontal"
     role="separator"
-  />
+  />,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
     class="ant-divider ant-divider-horizontal ant-divider-dashed"
     role="separator"
-  />
+  />,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
-</div>
+]
 `;
 
-exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+exports[`renders ./components/divider/demo/plain.md correctly 1`] = `
-<div>
+Array [
-  Text
-  <div
-    class="ant-divider ant-divider-vertical"
-    role="separator"
-  />
-  <a
-    href="#"
-  >
-    Link
-  </a>
-  <div
-    class="ant-divider ant-divider-vertical"
-    role="separator"
-  />
-  <a
-    href="#"
-  >
-    Link
-  </a>
-</div>
-`;
-
-exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
-<div>
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-center"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center ant-divider-plain"
     role="separator"
   >
     <span
@@ -85,12 +61,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left ant-divider-plain"
     role="separator"
   >
     <span
@@ -98,12 +74,12 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Left Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-right"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right ant-divider-plain"
     role="separator"
   >
     <span
@@ -111,9 +87,80 @@ exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
     >
       Right Text
     </span>
-  </div>
+  </div>,
   <p>
     Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
-  </p>
+  </p>,
-</div>
+]
+`;
+
+exports[`renders ./components/divider/demo/vertical.md correctly 1`] = `
+Array [
+  "Text",
+  <div
+    class="ant-divider ant-divider-vertical"
+    role="separator"
+  />,
+  <a
+    href="#"
+  >
+    Link
+  </a>,
+  <div
+    class="ant-divider ant-divider-vertical"
+    role="separator"
+  />,
+  <a
+    href="#"
+  >
+    Link
+  </a>,
+]
+`;
+
+exports[`renders ./components/divider/demo/with-text.md correctly 1`] = `
+Array [
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-center"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Left Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+  <div
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-right"
+    role="separator"
+  >
+    <span
+      class="ant-divider-inner-text"
+    >
+      Right Text
+    </span>
+  </div>,
+  <p>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista probare, quae sunt a te dicta? Refert tamen, quo modo.
+  </p>,
+]
 `;

components/divider/demo/customize-style.md

@@ -18,12 +18,12 @@ Use `style` to change default style.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <Divider style={{ height: 2, backgroundColor: '#7cb305' }} />
     <Divider style={{ borderColor: '#7cb305' }} dashed />
     <Divider type="vertical" style={{ height: 60, backgroundColor: '#7cb305' }} />
     <Divider type="vertical" style={{ height: 60, borderColor: '#7cb305' }} dashed />
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/horizontal.md

@@ -17,7 +17,7 @@ Divider is `horizontal` by default. You can add text within Divider.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -32,7 +32,7 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/plain.md

@@ -0,0 +1,47 @@
+---
+order: 2
+title:
+  zh-CN: 分割文字使用正文样式
+  en-US: Text without heading style
+---
+
+## zh-CN
+
+使用 `plain` 可以设置为更轻量的分割文字样式。
+
+## en-US
+
+You can use non-heading style of divider text by setting `plain`.
+
+```jsx
+import { Divider } from 'antd';
+
+ReactDOM.render(
+  <>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider plain>Text</Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="left" plain>
+      Left Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+    <Divider orientation="right" plain>
+      Right Text
+    </Divider>
+    <p>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
+      probare, quae sunt a te dicta? Refert tamen, quo modo.
+    </p>
+  </>,
+  mountNode,
+);
+```

components/divider/demo/vertical.md

@@ -1,5 +1,5 @@
 ---
-order: 2
+order: 3
 title:
   zh-CN: 垂直分割线
   en-US: Vertical
@@ -17,13 +17,13 @@ Use `type="vertical"` make it vertical.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     Text
     <Divider type="vertical" />
     <a href="#">Link</a>
     <Divider type="vertical" />
     <a href="#">Link</a>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/demo/with-text.md

@@ -17,7 +17,7 @@ Divider with inner title, set `orientation="left/right"` to align it.
 import { Divider } from 'antd';
 
 ReactDOM.render(
-  <div>
+  <>
     <p>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
@@ -37,7 +37,7 @@ ReactDOM.render(
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed nonne merninisti licere mihi ista
       probare, quae sunt a te dicta? Refert tamen, quo modo.
     </p>
-  </div>,
+  </>,
   mountNode,
 );
 ```

components/divider/index.en-US.md

@@ -2,7 +2,6 @@
 category: Components
 type: Other
 title: Divider
-cols: 1
 ---
 
 A divider line separates different content.
@@ -23,3 +22,4 @@ A divider line separates different content.
 | orientation | position of title inside divider | `left` \| `right` \| `center` | `center` |  |
 | style | style object of container | CSSProperties | - |  |
 | type | direction type of divider | `horizontal` \| `vertical` | `horizontal` |  |
+| plain | divider text show as plain style | boolean | true | 4.2.0 |

components/divider/index.tsx

@@ -10,6 +10,7 @@ export interface DividerProps {
   children?: React.ReactNode;
   dashed?: boolean;
   style?: React.CSSProperties;
+  plain?: boolean;
 }
 
 const Divider: React.FC<DividerProps> = props => (
@@ -22,13 +23,17 @@ const Divider: React.FC<DividerProps> = props => (
         className,
         children,
         dashed,
+        plain,
         ...restProps
       } = props;
       const prefixCls = getPrefixCls('divider', customizePrefixCls);
       const orientationPrefix = orientation.length > 0 ? `-${orientation}` : orientation;
+      const hasChildren = !!children;
       const classString = classNames(className, prefixCls, `${prefixCls}-${type}`, {
-        [`${prefixCls}-with-text${orientationPrefix}`]: children,
+        [`${prefixCls}-with-text`]: hasChildren,
+        [`${prefixCls}-with-text${orientationPrefix}`]: hasChildren,
         [`${prefixCls}-dashed`]: !!dashed,
+        [`${prefixCls}-plain`]: !!plain,
         [`${prefixCls}-rtl`]: direction === 'rtl',
       });
       return (

components/divider/index.zh-CN.md

@@ -14,10 +14,11 @@ subtitle: 分割线
 
 ## API
 
-| 参数        | 说明             | 类型                          | 默认值       | 版本 |
+| 参数        | 说明                       | 类型                          | 默认值       | 版本  |
-| ----------- | ---------------- | ----------------------------- | ------------ | ---- |
+| ----------- | -------------------------- | ----------------------------- | ------------ | ----- |
-| className   | 分割线样式类     | string                        | -            |      |
+| className   | 分割线样式类               | string                        | -            |       |
-| dashed      | 是否虚线         | boolean                       | false        |      |
+| dashed      | 是否虚线                   | boolean                       | false        |       |
-| orientation | 分割线标题的位置 | `left` \| `right` \| `center` | `center`     |      |
+| orientation | 分割线标题的位置           | `left` \| `right` \| `center` | `center`     |       |
-| style       | 分割线样式对象   | CSSProperties                 | -            |      |
+| style       | 分割线样式对象             | CSSProperties                 | -            |       |
-| type        | 水平还是垂直类型 | `horizontal` \| `vertical`    | `horizontal` |      |
+| type        | 水平还是垂直类型           | `horizontal` \| `vertical`    | `horizontal` |       |
+| plain       | 文字是否显示为普通正文样式 | boolean                       | false        | 4.2.0 |

components/divider/style/index.less

@@ -28,9 +28,7 @@
     margin: 24px 0;
   }
 
-  &-horizontal&-with-text-center,
+  &-horizontal&-with-text {
-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
     display: table;
     margin: 16px 0;
     color: @heading-color;
@@ -51,14 +49,6 @@
     }
   }
 
-  &-horizontal&-with-text-left,
-  &-horizontal&-with-text-right {
-    .@{divider-prefix-cls}-inner-text {
-      display: inline-block;
-      padding: 0 @divider-text-padding;
-    }
-  }
-
   &-horizontal&-with-text-left {
     &::before {
       top: 50%;
@@ -93,9 +83,7 @@
     border-width: 1px 0 0;
   }
 
-  &-horizontal&-with-text-center&-dashed,
+  &-horizontal&-with-text&-dashed {
-  &-horizontal&-with-text-left&-dashed,
-  &-horizontal&-with-text-right&-dashed {
     border-top: 0;
     &::before,
     &::after {
@@ -106,6 +94,12 @@
   &-vertical&-dashed {
     border-width: 0 0 0 1px;
   }
+
+  &-plain&-with-text {
+    color: @text-color;
+    font-weight: normal;
+    font-size: @font-size-base;
+  }
 }
 
 @import './rtl';

components/drawer/demo/user-profile.md

@@ -16,31 +16,9 @@ Use Drawer to quickly preview details of an object, such as those in a list.
 ```jsx
 import { Drawer, List, Avatar, Divider, Col, Row } from 'antd';
 
-const pStyle = {
-  fontSize: 16,
-  lineHeight: '24px',
-  display: 'block',
-  marginBottom: 16,
-};
-
 const DescriptionItem = ({ title, content }) => (
-  <div
+  <div className="site-description-item-profile-wrapper">
-    className="site-description-item-profile-wrapper"
+    <p className="site-description-item-profile-p-label">{title}:</p>
-    style={{
-      fontSize: 14,
-      lineHeight: '22px',
-      marginBottom: 7,
-    }}
-  >
-    <p
-      className="site-description-item-profile-p"
-      style={{
-        marginRight: 8,
-        display: 'inline-block',
-      }}
-    >
-      {title}:
-    </p>
     {content}
   </div>
 );
@@ -99,12 +77,10 @@ class App extends React.Component {
           onClose={this.onClose}
           visible={this.state.visible}
         >
-          <p className="site-description-item-profile-p" style={{ ...pStyle, marginBottom: 24 }}>
+          <p className="site-description-item-profile-p" style={{ marginBottom: 24 }}>
             User Profile
           </p>
-          <p className="site-description-item-profile-p" style={pStyle}>
+          <p className="site-description-item-profile-p">Personal</p>
-            Personal
-          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Full Name" content="Lily" />
@@ -138,9 +114,7 @@ class App extends React.Component {
             </Col>
           </Row>
           <Divider />
-          <p className="site-description-item-profile-p" style={pStyle}>
+          <p className="site-description-item-profile-p">Company</p>
-            Company
-          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Position" content="Programmer" />
@@ -166,9 +140,7 @@ class App extends React.Component {
             </Col>
           </Row>
           <Divider />
-          <p className="site-description-item-profile-p" style={pStyle}>
+          <p className="site-description-item-profile-p">Contacts</p>
-            Contacts
-          </p>
           <Row>
             <Col span={12}>
               <DescriptionItem title="Email" content="AntDesign@example.com" />
@@ -201,8 +173,32 @@ ReactDOM.render(<App />, mountNode);
 ```css
 .site-description-item-profile-wrapper {
   color: rgba(0, 0, 0, 0.65);
+  font-size: 14px;
+  line-height: 1.5715;
+  margin-bottom: 7px;
 }
-.site-description-item-profile-p {
+
+[data-theme='compact'] .site-description-item-profile-wrapper {
+  font-size: 12px;
+  line-height: 1.66667;
+}
+
+.ant-drawer-body p.site-description-item-profile-p {
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 16px;
+  line-height: 1.5715;
+  display: block;
+  margin-bottom: 16px;
+}
+
+[data-theme='compact'] .ant-drawer-body p.site-description-item-profile-p {
+  font-size: 14px;
+  line-height: 1.66667;
+}
+
+.site-description-item-profile-p-label {
+  margin-right: 8px;
+  display: inline-block;
   color: rgba(0, 0, 0, 0.85);
 }
 ```

components/dropdown/demo/dropdown-button.md

@@ -29,16 +29,13 @@ function handleMenuClick(e) {
 
 const menu = (
   <Menu onClick={handleMenuClick}>
-    <Menu.Item key="1">
+    <Menu.Item key="1" icon={<UserOutlined />}>
-      <UserOutlined />
       1st menu item
     </Menu.Item>
-    <Menu.Item key="2">
+    <Menu.Item key="2" icon={<UserOutlined />}>
-      <UserOutlined />
       2nd menu item
     </Menu.Item>
-    <Menu.Item key="3">
+    <Menu.Item key="3" icon={<UserOutlined />}>
-      <UserOutlined />
       3rd item
     </Menu.Item>
   </Menu>

components/dropdown/demo/menu-full.md

@@ -30,15 +30,7 @@ const menu = (
       <Menu.Item key="01">Option 0</Menu.Item>
       <Menu.Item key="02">Option 0</Menu.Item>
     </Menu.ItemGroup>
-    <SubMenu
+    <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-      key="sub1"
-      title={
-        <span>
-          <MailOutlined />
-          <span>Navigation One</span>
-        </span>
-      }
-    >
       <Menu.ItemGroup key="g1" title="Item 1">
         <Menu.Item key="1">Option 1</Menu.Item>
         <Menu.Item key="2">Option 2</Menu.Item>
@@ -48,15 +40,7 @@ const menu = (
         <Menu.Item key="4">Option 4</Menu.Item>
       </Menu.ItemGroup>
     </SubMenu>
-    <SubMenu
+    <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-      key="sub2"
-      title={
-        <span>
-          <AppstoreOutlined />
-          <span>Navigation Two</span>
-        </span>
-      }
-    >
       <Menu.Item key="5">Option 5</Menu.Item>
       <Menu.Item key="6">Option 6</Menu.Item>
       <SubMenu key="sub3" title="Submenu">
@@ -64,15 +48,7 @@ const menu = (
         <Menu.Item key="8">Option 8</Menu.Item>
       </SubMenu>
     </SubMenu>
-    <SubMenu
+    <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-      key="sub4"
-      title={
-        <span>
-          <SettingOutlined />
-          <span>Navigation Three</span>
-        </span>
-      }
-    >
       <Menu.Item key="9">Option 9</Menu.Item>
       <Menu.Item key="10">Option 10</Menu.Item>
       <Menu.Item key="11">Option 11</Menu.Item>

components/empty/style/index.less

@@ -7,7 +7,7 @@
 .@{empty-prefix-cls} {
   margin: 0 8px;
   font-size: @empty-font-size;
-  line-height: 22px;
+  line-height: @line-height-base;
   text-align: center;
 
   &-image {

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

@@ -1764,9 +1764,8 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
-                aria-disabled="false"
                 aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up "
+                class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
                 unselectable="unselectable"
               >
@@ -1792,9 +1791,8 @@ exports[`renders ./components/form/demo/nest-messages.md correctly 1`] = `
                 </span>
               </span>
               <span
-                aria-disabled="false"
                 aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down "
+                class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
                 unselectable="unselectable"
               >
@@ -3161,9 +3159,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
                 class="ant-input-number-handler-wrap"
               >
                 <span
-                  aria-disabled="false"
                   aria-label="Increase Value"
-                  class="ant-input-number-handler ant-input-number-handler-up "
+                  class="ant-input-number-handler ant-input-number-handler-up"
                   role="button"
                   unselectable="unselectable"
                 >
@@ -3189,9 +3186,8 @@ exports[`renders ./components/form/demo/size.md correctly 1`] = `
                   </span>
                 </span>
                 <span
-                  aria-disabled="false"
                   aria-label="Decrease Value"
-                  class="ant-input-number-handler ant-input-number-handler-down "
+                  class="ant-input-number-handler ant-input-number-handler-down"
                   role="button"
                   unselectable="unselectable"
                 >
@@ -4039,9 +4035,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
-                aria-disabled="false"
                 aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up "
+                class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
                 unselectable="unselectable"
               >
@@ -4067,9 +4062,8 @@ exports[`renders ./components/form/demo/validate-other.md correctly 1`] = `
                 </span>
               </span>
               <span
-                aria-disabled="false"
                 aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down "
+                class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
                 unselectable="unselectable"
               >
@@ -6075,9 +6069,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
-                aria-disabled="false"
                 aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up "
+                class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
                 unselectable="unselectable"
               >
@@ -6103,9 +6096,8 @@ exports[`renders ./components/form/demo/validate-static.md correctly 1`] = `
                 </span>
               </span>
               <span
-                aria-disabled="false"
                 aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down "
+                class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
                 unselectable="unselectable"
               >
@@ -6493,9 +6485,8 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
               class="ant-input-number-handler-wrap"
             >
               <span
-                aria-disabled="false"
                 aria-label="Increase Value"
-                class="ant-input-number-handler ant-input-number-handler-up "
+                class="ant-input-number-handler ant-input-number-handler-up"
                 role="button"
                 unselectable="unselectable"
               >
@@ -6521,9 +6512,8 @@ exports[`renders ./components/form/demo/without-form-create.md correctly 1`] = `
                 </span>
               </span>
               <span
-                aria-disabled="false"
                 aria-label="Decrease Value"
-                class="ant-input-number-handler ant-input-number-handler-down "
+                class="ant-input-number-handler ant-input-number-handler-down"
                 role="button"
                 unselectable="unselectable"
               >

components/form/index.en-US.md

@@ -73,9 +73,11 @@ Form field component for data bidirectional binding, validation, layout, and so
 | dependencies | Set the dependency field. See [below](#dependencies) | [NamePath](#NamePath)[] | - |  |
 | extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time | string\|ReactNode | - |  |
 | getValueFromEvent | Specify how to get value from event or other onChange arguments | (..args: any[]) => any | - |  |
+| getValueProps | Additional props with sub component | (value: any) => any | - | 4.2.0 |
 | hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input` | boolean | false |  |
 | help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|ReactNode | - |  |
 | htmlFor | Set sub label `htmlFor` | string | - |  |
+| initialValue | Config sub default value. Form `initialValues` get higher priority when conflict | string | - | 4.2.0 |
 | noStyle | No style for `true`, used as a pure field control | boolean | false |  |
 | label | Label text | string\|ReactNode | - |  |
 | labelAlign | text align of label | `left` \| `right` | `right` |  |
@@ -89,7 +91,7 @@ Form field component for data bidirectional binding, validation, layout, and so
 | validateFirst | Whether stop validate on first rule of error for this field | boolean | false |  |
 | validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | - |  |
 | validateTrigger | When to validate the value of children node | string \| string[] | onChange |  |
-| valuePropName | Props of children node, for example, the prop of Switch is 'checked' | string | 'value' |  |
+| valuePropName | Props of children node, for example, the prop of Switch is 'checked'. This prop is an encapsulation of `getValueProps`, which will be invalid after customizing `getValueProps` | string | 'value' |  |
 | wrapperCol | The layout for input controls, same as `labelCol`. You can set `wrapperCol` on Form. If both exists, use Item first | [object](/components/grid/#Col) | - |  |
 
 After wrapped by `Form.Item` with `name` property, `value`(or other property defined by `valuePropName`) `onChange`(or other property defined by `trigger`) props will be added to form controls, the flow of form data will be handled by Form which will cause:
@@ -316,6 +318,13 @@ Components inside Form.Item with name property will turn into controlled mode, t
 
 `resetFields` will re-mount component under Field to clean up customize component side effect(like asyn data, cached state, etc.). It's by design.
 
+### Difference between Form initialValues and Item initialValue?
+
+In most case, we always recommend to use Form `initialValues`. Use Item `initialValue` only when dynamic field usage. Priority follow the rules:
+
+1. Form `initialValues` is the first priority
+2. Field `initialValue` is secondary \*. Not work when multiple Item with same `name` setting the `initialValue`
+
 <style>
   .site-form-item-icon {
     color: rgba(0, 0, 0, 0.25);

components/form/index.zh-CN.md

@@ -74,9 +74,11 @@ const validateMessages = {
 | dependencies | 设置依赖字段，说明[见下](#dependencies) | [NamePath](#NamePath)[] | - |  |
 | extra | 额外的提示信息，和 `help` 类似，当需要错误信息和提示文案同时出现时，可以使用这个。 | string\|ReactNode | - |  |
 | getValueFromEvent | 设置如何将 event 的值转换成字段值 | (..args: any[]) => any | - |  |
+| getValueProps | 为子元素添加额外的属性 | (value: any) => any | - | 4.2.0 |
 | hasFeedback | 配合 `validateStatus` 属性使用，展示校验状态图标，建议只配合 Input 组件使用 | boolean | false |  |
 | help | 提示信息，如不设置，则会根据校验规则自动生成 | string\|ReactNode | - |  |
 | htmlFor | 设置子元素 label `htmlFor` 属性 | string | - |  |
+| initialValue | 设置子元素默认值，如果与 Form 的 `initialValues` 冲突则以 Form 为准 | string | - | 4.2.0 |
 | noStyle | 为 `true` 时不带样式，作为纯字段控件使用 | boolean | false |  |
 | label | `label` 标签的文本 | string\|ReactNode | - |  |
 | labelAlign | 标签文本对齐方式 | `left` \| `right` | `right` |  |
@@ -90,7 +92,7 @@ const validateMessages = {
 | validateFirst | 当某一规则校验不通过时，是否停止剩下的规则的校验 | boolean | false |  |
 | validateStatus | 校验状态，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating' | string | - |  |
 | validateTrigger | 设置字段校验的时机 | string \| string[] | onChange |  |
-| valuePropName | 子节点的值的属性，如 Switch 的是 'checked' | string | 'value' |  |
+| valuePropName | 子节点的值的属性，如 Switch 的是 'checked'。该属性为 `getValueProps` 的封装，自定义 `getValueProps` 后会失效 | string | 'value' |  |
 | wrapperCol | 需要为输入控件设置布局样式时，使用该属性，用法同 `labelCol`。你可以通过 Form 的 `wrapperCol` 进行统一设置。当和 Form 同时设置时，以 Item 为准。 | [object](/components/grid/#Col) | - |  |
 
 被设置了 `name` 属性的 `Form.Item` 包装的控件，表单控件会自动添加 `value`（或 `valuePropName` 指定的其他属性） `onChange`（或 `trigger` 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：
@@ -317,6 +319,13 @@ validator(rule, value, callback) => {
 
 `resetFields` 会重置整个 Field，因而其子组件也会重新 mount 从而消除自定义组件可能存在的副作用（例如异步数据、状态等等）。
 
+### Form 的 initialValues 与 Item 的 initialValue 区别？
+
+在大部分场景下，我们总是推荐优先使用 Form 的 `initialValues`。只有存在动态字段时你才应该使用 Item 的 `initialValue`。默认值遵循以下规则：
+
+1. Form 的 `initialValues` 拥有最高优先级
+2. Field 的 `initialValue` 次之 \*. 多个同 `name` Item 都设置 `initialValue` 时，则 Item 的 `initialValue` 不生效
+
 <style>
   .site-form-item-icon {
     color: rgba(0, 0, 0, 0.25);

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

@@ -74,7 +74,7 @@ Array [
 exports[`renders ./components/grid/demo/flex.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -109,7 +109,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -144,7 +144,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -179,7 +179,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -214,7 +214,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -254,7 +254,7 @@ Array [
 exports[`renders ./components/grid/demo/flex-align.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -305,7 +305,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -356,7 +356,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -439,7 +439,7 @@ exports[`renders ./components/grid/demo/flex-order.md correctly 1`] = `
 exports[`renders ./components/grid/demo/flex-stretch.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -466,7 +466,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -493,7 +493,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -525,7 +525,7 @@ Array [
 exports[`renders ./components/grid/demo/gutter.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -581,7 +581,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -637,7 +637,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
     style="color:#333;font-weight:normal"
   >
@@ -1231,14 +1231,4 @@ exports[`renders ./components/grid/demo/sort.md correctly 1`] = `
 </div>
 `;
 
-exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `
+exports[`renders ./components/grid/demo/useBreakpoint.md correctly 1`] = `null`;
-<div
-  class="ant-row"
->
-  <div
-    class="ant-col"
-  >
-    Current break point: 
-  </div>
-</div>
-`;

components/grid/demo/useBreakpoint.md

@@ -12,23 +12,23 @@ title: useBreakpoint Hook
 Use `useBreakpoint` Hook povide personalized layout.
 
 ```jsx
-import { Row, Col, Grid } from 'antd';
+import { Grid, Tag } from 'antd';
 
 const { useBreakpoint } = Grid;
 
 function UseBreakpointDemo() {
   const screens = useBreakpoint();
-
   return (
-    <Row>
+    <>
-      <Col>
+      Current break point:{' '}
-        Current break point:&nbsp;
+      {Object.entries(screens)
-        {Object.entries(screens)
+        .filter(screen => !!screen[1])
-          .filter(screen => !!screen[1])
+        .map(screen => (
-          .map(screen => screen[0])
+          <Tag color="blue" key={screen[0]}>
-          .join(' ')}
+            {screen[0]}
-      </Col>
+          </Tag>
-    </Row>
+        ))}
+    </>
   );
 }
 

components/input-number/__tests__/__snapshots__/demo.test.js.snap

@@ -8,9 +8,8 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="ant-input-number-handler ant-input-number-handler-up "
+      class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -36,9 +35,8 @@ exports[`renders ./components/input-number/demo/basic.md correctly 1`] = `
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="ant-input-number-handler ant-input-number-handler-down "
+      class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -91,9 +89,8 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
     class="ant-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="ant-input-number-handler ant-input-number-handler-up "
+      class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -119,9 +116,8 @@ exports[`renders ./components/input-number/demo/digit.md correctly 1`] = `
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="ant-input-number-handler ant-input-number-handler-down "
+      class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >
@@ -176,7 +172,7 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
       <span
         aria-disabled="true"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up ant-input-number-handler-up-disabled"
         role="button"
         unselectable="unselectable"
       >
@@ -204,7 +200,7 @@ exports[`renders ./components/input-number/demo/disabled.md correctly 1`] = `
       <span
         aria-disabled="true"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down ant-input-number-handler-down-disabled"
         role="button"
         unselectable="unselectable"
       >
@@ -272,9 +268,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="unselectable"
       >
@@ -300,9 +295,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >
@@ -378,9 +372,8 @@ exports[`renders ./components/input-number/demo/formatter.md correctly 1`] = `
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >
@@ -437,9 +430,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="unselectable"
       >
@@ -465,9 +457,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >
@@ -517,9 +508,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="unselectable"
       >
@@ -545,9 +535,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >
@@ -597,9 +586,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="unselectable"
       >
@@ -625,9 +613,8 @@ exports[`renders ./components/input-number/demo/size.md correctly 1`] = `
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >

components/input-number/__tests__/__snapshots__/index.test.js.snap

@@ -8,9 +8,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
     class="ant-input-number-handler-wrap"
   >
     <span
-      aria-disabled="false"
       aria-label="Increase Value"
-      class="ant-input-number-handler ant-input-number-handler-up "
+      class="ant-input-number-handler ant-input-number-handler-up"
       role="button"
       unselectable="unselectable"
     >
@@ -36,9 +35,8 @@ exports[`InputNumber rtl render component should be rendered correctly in RTL di
       </span>
     </span>
     <span
-      aria-disabled="false"
       aria-label="Decrease Value"
-      class="ant-input-number-handler ant-input-number-handler-down "
+      class="ant-input-number-handler ant-input-number-handler-down"
       role="button"
       unselectable="unselectable"
     >

components/input/Input.tsx

@@ -217,7 +217,11 @@ class Input extends React.Component<InputProps, InputState> {
     resolveOnChange(this.input, e, this.props.onChange);
   };
 
-  renderInput = (prefixCls: string, size?: SizeType) => {
+  renderInput = (
+    prefixCls: string,
+    size: SizeType | undefined,
+    input: ConfigConsumerProps['input'] = {},
+  ) => {
     const { className, addonBefore, addonAfter, size: customizeSize, disabled } = this.props;
     // Fix https://fb.me/react-unknown-prop
     const otherProps = omit(this.props, [
@@ -236,6 +240,7 @@ class Input extends React.Component<InputProps, InputState> {
     ]);
     return (
       <input
+        autoComplete={input.autoComplete}
         {...otherProps}
         onChange={this.handleChange}
         onFocus={this.onFocus}
@@ -280,11 +285,12 @@ class Input extends React.Component<InputProps, InputState> {
     }
   };
 
-  renderComponent = ({ getPrefixCls, direction }: ConfigConsumerProps) => {
+  renderComponent = ({ getPrefixCls, direction, input }: ConfigConsumerProps) => {
     const { value, focused } = this.state;
     const { prefixCls: customizePrefixCls } = this.props;
     const prefixCls = getPrefixCls('input', customizePrefixCls);
     this.direction = direction;
+
     return (
       <SizeContext.Consumer>
         {size => (
@@ -294,7 +300,7 @@ class Input extends React.Component<InputProps, InputState> {
             prefixCls={prefixCls}
             inputType="input"
             value={fixControlledValue(value)}
-            element={this.renderInput(prefixCls, size)}
+            element={this.renderInput(prefixCls, size, input)}
             handleReset={this.handleReset}
             ref={this.saveClearableInput}
             direction={direction}

components/input/__tests__/Password.test.js

@@ -24,15 +24,9 @@ describe('Input.Password', () => {
     const wrapper = mount(<Input.Password />);
     wrapper.find('input').simulate('change', { target: { value: '111' } });
     expect(wrapper.render()).toMatchSnapshot();
-    wrapper
+    wrapper.find('.ant-input-password-icon').at(0).simulate('click');
-      .find('.ant-input-password-icon')
-      .at(0)
-      .simulate('click');
     expect(wrapper.render()).toMatchSnapshot();
-    wrapper
+    wrapper.find('.ant-input-password-icon').at(0).simulate('click');
-      .find('.ant-input-password-icon')
-      .at(0)
-      .simulate('click');
     expect(wrapper.render()).toMatchSnapshot();
   });
 
@@ -54,32 +48,13 @@ describe('Input.Password', () => {
     const wrapper = mount(<Input.Password defaultValue="111" autoFocus />, {
       attachTo: document.body,
     });
-    expect(document.activeElement).toBe(
+    expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
-      wrapper
-        .find('input')
-        .at(0)
-        .getDOMNode(),
-    );
     document.activeElement.setSelectionRange(2, 2);
     expect(document.activeElement.selectionStart).toBe(2);
-    wrapper
+    wrapper.find('.ant-input-password-icon').at(0).simulate('mousedown');
-      .find('.ant-input-password-icon')
+    wrapper.find('.ant-input-password-icon').at(0).simulate('mouseup');
-      .at(0)
+    wrapper.find('.ant-input-password-icon').at(0).simulate('click');
-      .simulate('mousedown');
+    expect(document.activeElement).toBe(wrapper.find('input').at(0).getDOMNode());
-    wrapper
-      .find('.ant-input-password-icon')
-      .at(0)
-      .simulate('mouseup');
-    wrapper
-      .find('.ant-input-password-icon')
-      .at(0)
-      .simulate('click');
-    expect(document.activeElement).toBe(
-      wrapper
-        .find('input')
-        .at(0)
-        .getDOMNode(),
-    );
     expect(document.activeElement.selectionStart).toBe(2);
     wrapper.unmount();
   });
@@ -92,13 +67,7 @@ describe('Input.Password', () => {
       .at('0')
       .simulate('change', { target: { value: 'value' } });
     await sleep();
-    expect(
+    expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
-      wrapper
-        .find('input')
-        .at('0')
-        .getDOMNode()
-        .getAttribute('value'),
-    ).toBeFalsy();
   });
 
   // https://github.com/ant-design/ant-design/issues/20541
@@ -117,12 +86,6 @@ describe('Input.Password', () => {
   it('should not contain value attribute in input element with defautValue', async () => {
     const wrapper = mount(<Input.Password defaultValue="value" />);
     await sleep();
-    expect(
+    expect(wrapper.find('input').at('0').getDOMNode().getAttribute('value')).toBeFalsy();
-      wrapper
-        .find('input')
-        .at('0')
-        .getDOMNode()
-        .getAttribute('value'),
-    ).toBeFalsy();
   });
 });

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

@@ -357,9 +357,8 @@ Array [
       class="ant-input-number-handler-wrap"
     >
       <span
-        aria-disabled="false"
         aria-label="Increase Value"
-        class="ant-input-number-handler ant-input-number-handler-up "
+        class="ant-input-number-handler ant-input-number-handler-up"
         role="button"
         unselectable="unselectable"
       >
@@ -385,9 +384,8 @@ Array [
         </span>
       </span>
       <span
-        aria-disabled="false"
         aria-label="Decrease Value"
-        class="ant-input-number-handler ant-input-number-handler-down "
+        class="ant-input-number-handler ant-input-number-handler-down"
         role="button"
         unselectable="unselectable"
       >
@@ -1288,9 +1286,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
         class="ant-input-number-handler-wrap"
       >
         <span
-          aria-disabled="false"
           aria-label="Increase Value"
-          class="ant-input-number-handler ant-input-number-handler-up "
+          class="ant-input-number-handler ant-input-number-handler-up"
           role="button"
           unselectable="unselectable"
         >
@@ -1316,9 +1313,8 @@ exports[`renders ./components/input/demo/group.md correctly 1`] = `
           </span>
         </span>
         <span
-          aria-disabled="false"
           aria-label="Decrease Value"
-          class="ant-input-number-handler ant-input-number-handler-down "
+          class="ant-input-number-handler ant-input-number-handler-down"
           role="button"
           unselectable="unselectable"
         >

components/input/style/rtl.less

@@ -134,6 +134,35 @@
     direction: rtl;
   }
 
+  &-icon {
+    .@{search-rtl-cls} & {
+      margin-right: 0.5em;
+      margin-left: 0;
+    }
+
+    &::before {
+      .@{search-rtl-cls} & {
+        border-left: none;
+      }
+    }
+
+    &::after {
+      .@{search-rtl-cls} & {
+        right: auto;
+        left: 0;
+        border-right: @border-width-base @border-style-base @input-border-color;
+        transition: all 0.3s;
+      }
+    }
+  }
+
+  &:not(&-enter-button) {
+    .@{search-rtl-cls}& {
+      padding-right: @input-padding-horizontal-base;
+      padding-left: 0;
+    }
+  }
+
   &-enter-button {
     input {
       .@{search-rtl-cls}& {

components/input/style/search-input.less

@@ -5,14 +5,61 @@
 
 @search-prefix: ~'@{ant-prefix}-input-search';
 
+.searchInputIcon(@input-height, @font-size) {
+  .@{search-prefix}-icon {
+    @horizontal-padding: (@input-height - @font-size) / 2;
+    padding: 0 @horizontal-padding;
+
+    &::before {
+      transform: translateX(-@horizontal-padding - @border-width-base);
+    }
+
+    &::after {
+      width: @input-height;
+    }
+  }
+}
+
+.searchInputIcon(@input-height-base, @font-size-base);
+
+.@{ant-prefix}-input-affix-wrapper-lg {
+  .searchInputIcon(@input-height-lg, @font-size-lg);
+}
+.@{ant-prefix}-input-affix-wrapper-sm {
+  .searchInputIcon(@input-height-sm, @font-size-sm);
+}
+
 .@{search-prefix} {
   &-icon {
+    margin-left: 0.5em;
     color: @text-color-secondary;
     cursor: pointer;
     transition: all 0.3s;
     &:hover {
       color: @input-icon-hover-color;
     }
+
+    &::before {
+      position: absolute;
+      top: 0;
+      bottom: 0;
+      display: block;
+      border-left: @border-width-base @border-style-base @input-border-color;
+      transition: all 0.3s;
+      content: '';
+    }
+
+    &::after {
+      position: absolute;
+      top: 0;
+      right: 0;
+      bottom: 0;
+      content: '';
+    }
+  }
+
+  &:not(&-enter-button) {
+    padding-right: 0;
   }
 
   &-enter-button {

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

@@ -485,9 +485,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 1
           </span>
         </li>
@@ -516,9 +514,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 2
           </span>
         </li>
@@ -547,9 +543,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 3
           </span>
         </li>
@@ -578,9 +572,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 4
           </span>
         </li>
@@ -609,9 +601,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 5
           </span>
         </li>
@@ -640,9 +630,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 6
           </span>
         </li>
@@ -671,9 +659,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 7
           </span>
         </li>
@@ -702,9 +688,7 @@ exports[`renders ./components/layout/demo/fixed-sider.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 8
           </span>
         </li>
@@ -877,9 +861,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 1
           </span>
         </li>
@@ -908,9 +890,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 2
           </span>
         </li>
@@ -939,9 +919,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 3
           </span>
         </li>
@@ -970,9 +948,7 @@ exports[`renders ./components/layout/demo/responsive.md correctly 1`] = `
               />
             </svg>
           </span>
-          <span
+          <span>
-            class="nav-text"
-          >
             nav 4
           </span>
         </li>
@@ -1095,30 +1071,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
             role="button"
             style="padding-left:24px"
           >
-            <span>
+            <span
-              <span
+              aria-label="user"
-                aria-label="user"
+              class="anticon anticon-user"
-                class="anticon anticon-user"
+              role="img"
-                role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="user"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
+                <path
-                  aria-hidden="true"
+                  d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  class=""
+                />
-                  data-icon="user"
+              </svg>
-                  fill="currentColor"
+            </span>
-                  focusable="false"
+            <span>
-                  height="1em"
+              User
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                  />
-                </svg>
-              </span>
-              <span>
-                User
-              </span>
             </span>
             <i
               class="ant-menu-submenu-arrow"
@@ -1137,30 +1111,28 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
             role="button"
             style="padding-left:24px"
           >
-            <span>
+            <span
-              <span
+              aria-label="team"
-                aria-label="team"
+              class="anticon anticon-team"
-                class="anticon anticon-team"
+              role="img"
-                role="img"
+            >
+              <svg
+                aria-hidden="true"
+                class=""
+                data-icon="team"
+                fill="currentColor"
+                focusable="false"
+                height="1em"
+                viewBox="64 64 896 896"
+                width="1em"
               >
-                <svg
+                <path
-                  aria-hidden="true"
+                  d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
-                  class=""
+                />
-                  data-icon="team"
+              </svg>
-                  fill="currentColor"
+            </span>
-                  focusable="false"
+            <span>
-                  height="1em"
+              Team
-                  viewBox="64 64 896 896"
-                  width="1em"
-                >
-                  <path
-                    d="M824.2 699.9a301.55 301.55 0 00-86.4-60.4C783.1 602.8 812 546.8 812 484c0-110.8-92.4-201.7-203.2-200-109.1 1.7-197 90.6-197 200 0 62.8 29 118.8 74.2 155.5a300.95 300.95 0 00-86.4 60.4C345 754.6 314 826.8 312 903.8a8 8 0 008 8.2h56c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5A226.62 226.62 0 01612 684c60.9 0 118.2 23.7 161.3 66.8C814.5 792 838 846.3 840 904.3c.1 4.3 3.7 7.7 8 7.7h56a8 8 0 008-8.2c-2-77-33-149.2-87.8-203.9zM612 612c-34.2 0-66.4-13.3-90.5-37.5a126.86 126.86 0 01-37.5-91.8c.3-32.8 13.4-64.5 36.3-88 24-24.6 56.1-38.3 90.4-38.7 33.9-.3 66.8 12.9 91 36.6 24.8 24.3 38.4 56.8 38.4 91.4 0 34.2-13.3 66.3-37.5 90.5A127.3 127.3 0 01612 612zM361.5 510.4c-.9-8.7-1.4-17.5-1.4-26.4 0-15.9 1.5-31.4 4.3-46.5.7-3.6-1.2-7.3-4.5-8.8-13.6-6.1-26.1-14.5-36.9-25.1a127.54 127.54 0 01-38.7-95.4c.9-32.1 13.8-62.6 36.3-85.6 24.7-25.3 57.9-39.1 93.2-38.7 31.9.3 62.7 12.6 86 34.4 7.9 7.4 14.7 15.6 20.4 24.4 2 3.1 5.9 4.4 9.3 3.2 17.6-6.1 36.2-10.4 55.3-12.4 5.6-.6 8.8-6.6 6.3-11.6-32.5-64.3-98.9-108.7-175.7-109.9-110.9-1.7-203.3 89.2-203.3 199.9 0 62.8 28.9 118.8 74.2 155.5-31.8 14.7-61.1 35-86.5 60.4-54.8 54.7-85.8 126.9-87.8 204a8 8 0 008 8.2h56.1c4.3 0 7.9-3.4 8-7.7 1.9-58 25.4-112.3 66.7-153.5 29.4-29.4 65.4-49.8 104.7-59.7 3.9-1 6.5-4.7 6-8.7z"
-                  />
-                </svg>
-              </span>
-              <span>
-                Team
-              </span>
             </span>
             <i
               class="ant-menu-submenu-arrow"
@@ -1193,6 +1165,7 @@ exports[`renders ./components/layout/demo/side.md correctly 1`] = `
               />
             </svg>
           </span>
+          <span />
         </li>
       </ul>
     </div>
@@ -1632,27 +1605,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
+                <span
-                  <span
+                  aria-label="user"
-                    aria-label="user"
+                  class="anticon anticon-user"
-                    class="anticon anticon-user"
+                  role="img"
-                    role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="user"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
+                    <path
-                      aria-hidden="true"
+                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                      class=""
+                    />
-                      data-icon="user"
+                  </svg>
-                      fill="currentColor"
+                </span>
-                      focusable="false"
+                <span>
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                      />
-                    </svg>
-                  </span>
                   subnav 1
                 </span>
                 <i
@@ -1705,27 +1678,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
+                <span
-                  <span
+                  aria-label="laptop"
-                    aria-label="laptop"
+                  class="anticon anticon-laptop"
-                    class="anticon anticon-laptop"
+                  role="img"
-                    role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="laptop"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
+                    <path
-                      aria-hidden="true"
+                      d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                      class=""
+                    />
-                      data-icon="laptop"
+                  </svg>
-                      fill="currentColor"
+                </span>
-                      focusable="false"
+                <span>
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                      />
-                    </svg>
-                  </span>
                   subnav 2
                 </span>
                 <i
@@ -1745,27 +1718,27 @@ exports[`renders ./components/layout/demo/top-side.md correctly 1`] = `
                 role="button"
                 style="padding-left:24px"
               >
-                <span>
+                <span
-                  <span
+                  aria-label="notification"
-                    aria-label="notification"
+                  class="anticon anticon-notification"
-                    class="anticon anticon-notification"
+                  role="img"
-                    role="img"
+                >
+                  <svg
+                    aria-hidden="true"
+                    class=""
+                    data-icon="notification"
+                    fill="currentColor"
+                    focusable="false"
+                    height="1em"
+                    viewBox="64 64 896 896"
+                    width="1em"
                   >
-                    <svg
+                    <path
-                      aria-hidden="true"
+                      d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                      class=""
+                    />
-                      data-icon="notification"
+                  </svg>
-                      fill="currentColor"
+                </span>
-                      focusable="false"
+                <span>
-                      height="1em"
-                      viewBox="64 64 896 896"
-                      width="1em"
-                    >
-                      <path
-                        d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                      />
-                    </svg>
-                  </span>
                   subnav 3
                 </span>
                 <i
@@ -1931,27 +1904,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
+              <span
-                <span
+                aria-label="user"
-                  aria-label="user"
+                class="anticon anticon-user"
-                  class="anticon anticon-user"
+                role="img"
-                  role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="user"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    class=""
+                  />
-                    data-icon="user"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <span>
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M858.5 763.6a374 374 0 00-80.6-119.5 375.63 375.63 0 00-119.5-80.6c-.4-.2-.8-.3-1.2-.5C719.5 518 760 444.7 760 362c0-137-111-248-248-248S264 225 264 362c0 82.7 40.5 156 102.8 201.1-.4.2-.8.3-1.2.5-44.8 18.9-85 46-119.5 80.6a375.63 375.63 0 00-80.6 119.5A371.7 371.7 0 00136 901.8a8 8 0 008 8.2h60c4.4 0 7.9-3.5 8-7.8 2-77.2 33-149.5 87.8-204.3 56.7-56.7 132-87.9 212.2-87.9s155.5 31.2 212.2 87.9C779 752.7 810 825 812 902.2c.1 4.4 3.6 7.8 8 7.8h60a8 8 0 008-8.2c-1-47.8-10.9-94.3-29.5-138.2zM512 534c-45.9 0-89.1-17.9-121.6-50.4S340 407.9 340 362c0-45.9 17.9-89.1 50.4-121.6S466.1 190 512 190s89.1 17.9 121.6 50.4S684 316.1 684 362c0 45.9-17.9 89.1-50.4 121.6S557.9 534 512 534z"
-                    />
-                  </svg>
-                </span>
                 subnav 1
               </span>
               <i
@@ -2004,27 +1977,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
+              <span
-                <span
+                aria-label="laptop"
-                  aria-label="laptop"
+                class="anticon anticon-laptop"
-                  class="anticon anticon-laptop"
+                role="img"
-                  role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="laptop"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                    class=""
+                  />
-                    data-icon="laptop"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <span>
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M956.9 845.1L896.4 632V168c0-17.7-14.3-32-32-32h-704c-17.7 0-32 14.3-32 32v464L67.9 845.1C60.4 866 75.8 888 98 888h828.8c22.2 0 37.6-22 30.1-42.9zM200.4 208h624v395h-624V208zm228.3 608l8.1-37h150.3l8.1 37H428.7zm224 0l-19.1-86.7c-.8-3.7-4.1-6.3-7.8-6.3H398.2c-3.8 0-7 2.6-7.8 6.3L371.3 816H151l42.3-149h638.2l42.3 149H652.7z"
-                    />
-                  </svg>
-                </span>
                 subnav 2
               </span>
               <i
@@ -2044,27 +2017,27 @@ exports[`renders ./components/layout/demo/top-side-2.md correctly 1`] = `
               role="button"
               style="padding-left:24px"
             >
-              <span>
+              <span
-                <span
+                aria-label="notification"
-                  aria-label="notification"
+                class="anticon anticon-notification"
-                  class="anticon anticon-notification"
+                role="img"
-                  role="img"
+              >
+                <svg
+                  aria-hidden="true"
+                  class=""
+                  data-icon="notification"
+                  fill="currentColor"
+                  focusable="false"
+                  height="1em"
+                  viewBox="64 64 896 896"
+                  width="1em"
                 >
-                  <svg
+                  <path
-                    aria-hidden="true"
+                    d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                    class=""
+                  />
-                    data-icon="notification"
+                </svg>
-                    fill="currentColor"
+              </span>
-                    focusable="false"
+              <span>
-                    height="1em"
-                    viewBox="64 64 896 896"
-                    width="1em"
-                  >
-                    <path
-                      d="M880 112c-3.8 0-7.7.7-11.6 2.3L292 345.9H128c-8.8 0-16 7.4-16 16.6v299c0 9.2 7.2 16.6 16 16.6h101.7c-3.7 11.6-5.7 23.9-5.7 36.4 0 65.9 53.8 119.5 120 119.5 55.4 0 102.1-37.6 115.9-88.4l408.6 164.2c3.9 1.5 7.8 2.3 11.6 2.3 16.9 0 32-14.2 32-33.2V145.2C912 126.2 897 112 880 112zM344 762.3c-26.5 0-48-21.4-48-47.8 0-11.2 3.9-21.9 11-30.4l84.9 34.1c-2 24.6-22.7 44.1-47.9 44.1zm496 58.4L318.8 611.3l-12.9-5.2H184V417.9h121.9l12.9-5.2L840 203.3v617.4z"
-                    />
-                  </svg>
-                </span>
                 subnav 3
               </span>
               <i

components/layout/demo/custom-trigger-debug.md

@@ -42,42 +42,22 @@ class SiderDemo extends React.Component {
         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
           <div className="logo" />
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['3']} defaultOpenKeys={['sub1']}>
-            <Menu.Item key="1">
+            <Menu.Item key="1" icon={<PieChartOutlined />}>
-              <PieChartOutlined />
+              Option 1
-              <span>Option 1</span>
             </Menu.Item>
-            <Menu.Item key="2">
+            <Menu.Item key="2" icon={<DesktopOutlined />}>
-              <DesktopOutlined />
+              Option 2
-              <span>Option 2</span>
             </Menu.Item>
-            <SubMenu
+            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
-              key="sub1"
-              title={
-                <span>
-                  <UserOutlined />
-                  <span>User</span>
-                </span>
-              }
-            >
               <Menu.Item key="3">Tom</Menu.Item>
               <Menu.Item key="4">Bill</Menu.Item>
               <Menu.Item key="5">Alex</Menu.Item>
             </SubMenu>
-            <SubMenu
+            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
-              key="sub2"
-              title={
-                <span>
-                  <TeamOutlined />
-                  <span>Team</span>
-                </span>
-              }
-            >
               <Menu.Item key="6">Team 1</Menu.Item>
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="9">
+            <Menu.Item key="9" icon={<FileOutlined />} />
-              <FileOutlined />
-            </Menu.Item>
           </Menu>
         </Sider>
         <Layout>

components/layout/demo/custom-trigger.md

@@ -42,17 +42,14 @@ class SiderDemo extends React.Component {
         <Sider trigger={null} collapsible collapsed={this.state.collapsed}>
           <div className="logo" />
           <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
-            <Menu.Item key="1">
+            <Menu.Item key="1" icon={<UserOutlined />}>
-              <UserOutlined />
+              nav 1
-              <span>nav 1</span>
             </Menu.Item>
-            <Menu.Item key="2">
+            <Menu.Item key="2" icon={<VideoCameraOutlined />}>
-              <VideoCameraOutlined />
+              nav 2
-              <span>nav 2</span>
             </Menu.Item>
-            <Menu.Item key="3">
+            <Menu.Item key="3" icon={<UploadOutlined />}>
-              <UploadOutlined />
+              nav 3
-              <span>nav 3</span>
             </Menu.Item>
           </Menu>
         </Sider>

components/layout/demo/fixed-sider.md

@@ -41,37 +41,29 @@ ReactDOM.render(
     >
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
-        <Menu.Item key="1">
+        <Menu.Item key="1" icon={<UserOutlined />}>
-          <UserOutlined />
+          nav 1
-          <span className="nav-text">nav 1</span>
         </Menu.Item>
-        <Menu.Item key="2">
+        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
-          <VideoCameraOutlined />
+          nav 2
-          <span className="nav-text">nav 2</span>
         </Menu.Item>
-        <Menu.Item key="3">
+        <Menu.Item key="3" icon={<UploadOutlined />}>
-          <UploadOutlined />
+          nav 3
-          <span className="nav-text">nav 3</span>
         </Menu.Item>
-        <Menu.Item key="4">
+        <Menu.Item key="4" icon={<BarChartOutlined />}>
-          <BarChartOutlined />
+          nav 4
-          <span className="nav-text">nav 4</span>
         </Menu.Item>
-        <Menu.Item key="5">
+        <Menu.Item key="5" icon={<CloudOutlined />}>
-          <CloudOutlined />
+          nav 5
-          <span className="nav-text">nav 5</span>
         </Menu.Item>
-        <Menu.Item key="6">
+        <Menu.Item key="6" icon={<AppstoreOutlined />}>
-          <AppstoreOutlined />
+          nav 6
-          <span className="nav-text">nav 6</span>
         </Menu.Item>
-        <Menu.Item key="7">
+        <Menu.Item key="7" icon={<TeamOutlined />}>
-          <TeamOutlined />
+          nav 7
-          <span className="nav-text">nav 7</span>
         </Menu.Item>
-        <Menu.Item key="8">
+        <Menu.Item key="8" icon={<ShopOutlined />}>
-          <ShopOutlined />
+          nav 8
-          <span className="nav-text">nav 8</span>
         </Menu.Item>
       </Menu>
     </Sider>

components/layout/demo/responsive.md

@@ -37,21 +37,17 @@ ReactDOM.render(
     >
       <div className="logo" />
       <Menu theme="dark" mode="inline" defaultSelectedKeys={['4']}>
-        <Menu.Item key="1">
+        <Menu.Item key="1" icon={<UserOutlined />}>
-          <UserOutlined />
+          nav 1
-          <span className="nav-text">nav 1</span>
         </Menu.Item>
-        <Menu.Item key="2">
+        <Menu.Item key="2" icon={<VideoCameraOutlined />}>
-          <VideoCameraOutlined />
+          nav 2
-          <span className="nav-text">nav 2</span>
         </Menu.Item>
-        <Menu.Item key="3">
+        <Menu.Item key="3" icon={<UploadOutlined />}>
-          <UploadOutlined />
+          nav 3
-          <span className="nav-text">nav 3</span>
         </Menu.Item>
-        <Menu.Item key="4">
+        <Menu.Item key="4" icon={<UserOutlined />}>
-          <UserOutlined />
+          nav 4
-          <span className="nav-text">nav 4</span>
         </Menu.Item>
       </Menu>
     </Sider>

components/layout/demo/side.md

@@ -49,42 +49,22 @@ class SiderDemo extends React.Component {
         <Sider collapsible collapsed={this.state.collapsed} onCollapse={this.onCollapse}>
           <div className="logo" />
           <Menu theme="dark" defaultSelectedKeys={['1']} mode="inline">
-            <Menu.Item key="1">
+            <Menu.Item key="1" icon={<PieChartOutlined />}>
-              <PieChartOutlined />
+              Option 1
-              <span>Option 1</span>
             </Menu.Item>
-            <Menu.Item key="2">
+            <Menu.Item key="2" icon={<DesktopOutlined />}>
-              <DesktopOutlined />
+              Option 2
-              <span>Option 2</span>
             </Menu.Item>
-            <SubMenu
+            <SubMenu key="sub1" icon={<UserOutlined />} title="User">
-              key="sub1"
-              title={
-                <span>
-                  <UserOutlined />
-                  <span>User</span>
-                </span>
-              }
-            >
               <Menu.Item key="3">Tom</Menu.Item>
               <Menu.Item key="4">Bill</Menu.Item>
               <Menu.Item key="5">Alex</Menu.Item>
             </SubMenu>
-            <SubMenu
+            <SubMenu key="sub2" icon={<TeamOutlined />} title="Team">
-              key="sub2"
-              title={
-                <span>
-                  <TeamOutlined />
-                  <span>Team</span>
-                </span>
-              }
-            >
               <Menu.Item key="6">Team 1</Menu.Item>
               <Menu.Item key="8">Team 2</Menu.Item>
             </SubMenu>
-            <Menu.Item key="9">
+            <Menu.Item key="9" icon={<FileOutlined />} />
-              <FileOutlined />
-            </Menu.Item>
           </Menu>
         </Sider>
         <Layout className="site-layout">

components/layout/demo/top-side-2.md

@@ -38,43 +38,19 @@ ReactDOM.render(
           defaultOpenKeys={['sub1']}
           style={{ height: '100%', borderRight: 0 }}
         >
-          <SubMenu
+          <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
-            key="sub1"
-            title={
-              <span>
-                <UserOutlined />
-                subnav 1
-              </span>
-            }
-          >
             <Menu.Item key="1">option1</Menu.Item>
             <Menu.Item key="2">option2</Menu.Item>
             <Menu.Item key="3">option3</Menu.Item>
             <Menu.Item key="4">option4</Menu.Item>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
-            key="sub2"
-            title={
-              <span>
-                <LaptopOutlined />
-                subnav 2
-              </span>
-            }
-          >
             <Menu.Item key="5">option5</Menu.Item>
             <Menu.Item key="6">option6</Menu.Item>
             <Menu.Item key="7">option7</Menu.Item>
             <Menu.Item key="8">option8</Menu.Item>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
-            key="sub3"
-            title={
-              <span>
-                <NotificationOutlined />
-                subnav 3
-              </span>
-            }
-          >
             <Menu.Item key="9">option9</Menu.Item>
             <Menu.Item key="10">option10</Menu.Item>
             <Menu.Item key="11">option11</Menu.Item>

components/layout/demo/top-side.md

@@ -44,43 +44,19 @@ ReactDOM.render(
             defaultOpenKeys={['sub1']}
             style={{ height: '100%' }}
           >
-            <SubMenu
+            <SubMenu key="sub1" icon={<UserOutlined />} title="subnav 1">
-              key="sub1"
-              title={
-                <span>
-                  <UserOutlined />
-                  subnav 1
-                </span>
-              }
-            >
               <Menu.Item key="1">option1</Menu.Item>
               <Menu.Item key="2">option2</Menu.Item>
               <Menu.Item key="3">option3</Menu.Item>
               <Menu.Item key="4">option4</Menu.Item>
             </SubMenu>
-            <SubMenu
+            <SubMenu key="sub2" icon={<LaptopOutlined />} title="subnav 2">
-              key="sub2"
-              title={
-                <span>
-                  <LaptopOutlined />
-                  subnav 2
-                </span>
-              }
-            >
               <Menu.Item key="5">option5</Menu.Item>
               <Menu.Item key="6">option6</Menu.Item>
               <Menu.Item key="7">option7</Menu.Item>
               <Menu.Item key="8">option8</Menu.Item>
             </SubMenu>
-            <SubMenu
+            <SubMenu key="sub3" icon={<NotificationOutlined />} title="subnav 3">
-              key="sub3"
-              title={
-                <span>
-                  <NotificationOutlined />
-                  subnav 3
-                </span>
-              }
-            >
               <Menu.Item key="9">option9</Menu.Item>
               <Menu.Item key="10">option10</Menu.Item>
               <Menu.Item key="11">option11</Menu.Item>

components/list/Item.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { ListGridType, ColumnType, ListContext } from './index';
+import { ListGridType, ListContext } from './index';
 import { Col } from '../grid';
 import { ConfigContext } from '../config-provider';
 import { cloneElement } from '../_util/reactNode';
@@ -14,6 +14,7 @@ export interface ListItemProps extends React.HTMLAttributes<HTMLDivElement> {
   extra?: React.ReactNode;
   actions?: React.ReactNode[];
   grid?: ListGridType;
+  colStyle?: React.CSSProperties;
 }
 
 export interface ListItemMetaProps {
@@ -54,10 +55,6 @@ export const Meta: React.FC<ListItemMetaProps> = ({
   );
 };
 
-function getGrid(grid: ListGridType, t: ColumnType) {
-  return grid[t] && Math.floor(24 / grid[t]!);
-}
-
 export interface ListItemTypeProps extends React.FC<ListItemProps> {
   Meta: typeof Meta;
 }
@@ -85,7 +82,15 @@ const Item: ListItemTypeProps = props => {
     return !isItemContainsTextNodeAndNotSingular();
   };
 
-  const { prefixCls: customizePrefixCls, children, actions, extra, className, ...others } = props;
+  const {
+    prefixCls: customizePrefixCls,
+    children,
+    actions,
+    extra,
+    className,
+    colStyle,
+    ...others
+  } = props;
   const prefixCls = getPrefixCls('list', customizePrefixCls);
   const actionsContent = actions && actions.length > 0 && (
     <ul className={`${prefixCls}-item-action`} key="actions">
@@ -98,9 +103,9 @@ const Item: ListItemTypeProps = props => {
       ))}
     </ul>
   );
-  const Tag = grid ? 'div' : 'li';
+  const Element = grid ? 'div' : 'li';
   const itemChildren = (
-    <Tag
+    <Element
       {...(others as any)} // `li` element `onCopy` prop args is not same as `div`
       className={classNames(`${prefixCls}-item`, className, {
         [`${prefixCls}-item-no-flex`]: !isFlexMode(),
@@ -117,19 +122,11 @@ const Item: ListItemTypeProps = props => {
             </div>,
           ]
         : [children, actionsContent, cloneElement(extra, { key: 'extra' })]}
-    </Tag>
+    </Element>
   );
 
   return grid ? (
-    <Col
+    <Col flex={1} style={colStyle}>
-      span={getGrid(grid, 'column')}
-      xs={getGrid(grid, 'xs')}
-      sm={getGrid(grid, 'sm')}
-      md={getGrid(grid, 'md')}
-      lg={getGrid(grid, 'lg')}
-      xl={getGrid(grid, 'xl')}
-      xxl={getGrid(grid, 'xxl')}
-    >
       {itemChildren}
     </Col>
   ) : (

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

@@ -182,8 +182,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col ant-col-6"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -213,8 +213,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -244,8 +244,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -275,8 +275,8 @@ exports[`renders ./components/list/demo/grid.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-6"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;width:25%;max-width:25%;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -451,8 +451,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
         style="margin-left:-8px;margin-right:-8px"
       >
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -482,8 +482,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -513,8 +513,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -544,8 +544,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -575,8 +575,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -606,8 +606,8 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
           </div>
         </div>
         <div
-          class="ant-col ant-col-xs-24 ant-col-sm-12 ant-col-md-6 ant-col-lg-6 ant-col-xl-4 ant-col-xxl-8"
+          class="ant-col"
-          style="padding-left:8px;padding-right:8px"
+          style="padding-left:8px;padding-right:8px;flex:1 1 auto"
         >
           <div
             class="ant-list-item"
@@ -645,7 +645,7 @@ exports[`renders ./components/list/demo/resposive.md correctly 1`] = `
 exports[`renders ./components/list/demo/simple.md correctly 1`] = `
 Array [
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span
@@ -745,7 +745,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span
@@ -810,7 +810,7 @@ Array [
     </div>
   </div>,
   <div
-    class="ant-divider ant-divider-horizontal ant-divider-with-text-left"
+    class="ant-divider ant-divider-horizontal ant-divider-with-text ant-divider-with-text-left"
     role="separator"
   >
     <span
@@ -935,7 +935,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
             >
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -974,7 +974,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1013,7 +1013,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1104,7 +1104,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
             >
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1143,7 +1143,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1182,7 +1182,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1273,7 +1273,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
             >
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1312,7 +1312,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"
@@ -1351,7 +1351,7 @@ exports[`renders ./components/list/demo/vertical.md correctly 1`] = `
               </li>
               <li>
                 <div
-                  class="ant-space ant-space-horizontal"
+                  class="ant-space ant-space-horizontal ant-space-align-center"
                 >
                   <div
                     class="ant-space-item"

components/list/index.en-US.md

@@ -44,16 +44,16 @@ More about pagination, please check [`Pagination`](/components/pagination/).
 
 ### List grid props
 
-| Property | Description | Type | Default | Version |
+| Property | Description              | Type   | Default | Version |
-| --- | --- | --- | --- | --- |
+| -------- | ------------------------ | ------ | ------- | ------- |
-| column | column of grid, [optional number](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - |  |
+| column   | column of grid           | number | -       |         |
-| gutter | spacing between grid | number | 0 |  |
+| gutter   | spacing between grid     | number | 0       |         |
-| xs | `<576px` column of grid | number | - |  |
+| xs       | `<576px` column of grid  | number | -       |         |
-| sm | `≥576px` column of grid | number | - |  |
+| sm       | `≥576px` column of grid  | number | -       |         |
-| md | `≥768px` column of grid | number | - |  |
+| md       | `≥768px` column of grid  | number | -       |         |
-| lg | `≥992px` column of grid | number | - |  |
+| lg       | `≥992px` column of grid  | number | -       |         |
-| xl | `≥1200px` column of grid | number | - |  |
+| xl       | `≥1200px` column of grid | number | -       |         |
-| xxl | `≥1600px` column of grid | number | - |  |
+| xxl      | `≥1600px` column of grid | number | -       |         |
 
 ### List.Item
 

components/list/index.tsx

@@ -2,16 +2,16 @@ import * as React from 'react';
 import classNames from 'classnames';
 import omit from 'omit.js';
 import Spin, { SpinProps } from '../spin';
+import useBreakpoint from '../grid/hooks/useBreakpoint';
+import { Breakpoint, responsiveArray } from '../_util/responsiveObserve';
 import { RenderEmptyHandler, ConfigContext } from '../config-provider';
-
 import Pagination, { PaginationConfig } from '../pagination';
 import { Row } from '../grid';
-
 import Item from './Item';
 
 export { ListItemProps, ListItemMetaProps } from './Item';
 
-export type ColumnCount = 1 | 2 | 3 | 4 | 6 | 8 | 12 | 24;
+export type ColumnCount = number;
 
 export type ColumnType = 'gutter' | 'column' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
 
@@ -218,20 +218,40 @@ function List<T>({ pagination, ...props }: ListProps<T>) {
     }
   }
 
-  let childrenContent;
+  const screens = useBreakpoint();
-  childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
+  const currentBreakpoint = React.useMemo(() => {
+    for (let i = 0; i < responsiveArray.length; i += 1) {
+      const breakpoint: Breakpoint = responsiveArray[i];
+      if (screens[breakpoint]) {
+        return breakpoint;
+      }
+    }
+    return undefined;
+  }, [screens]);
+
+  const colStyle = React.useMemo(() => {
+    if (!grid) {
+      return undefined;
+    }
+    const columnCount =
+      currentBreakpoint && grid[currentBreakpoint] ? grid[currentBreakpoint] : grid.column;
+    if (columnCount) {
+      return {
+        width: `${100 / columnCount}%`,
+        maxWidth: `${100 / columnCount}%`,
+      };
+    }
+  }, [grid?.column, currentBreakpoint]);
+
+  let childrenContent = isLoading && <div style={{ minHeight: 53 }} />;
   if (splitDataSource.length > 0) {
     const items = splitDataSource.map((item: any, index: number) => renderItem(item, index));
-
+    const childrenList = React.Children.map(items, (child: any, index) =>
-    const childrenList: Array<React.ReactNode> = [];
+      React.cloneElement(child, {
-    React.Children.forEach(items, (child: any, index) => {
+        key: keys[index],
-      childrenList.push(
+        colStyle,
-        React.cloneElement(child, {
+      }),
-          key: keys[index],
+    );
-        }),
-      );
-    });
-
     childrenContent = grid ? (
       <Row gutter={grid.gutter}>{childrenList}</Row>
     ) : (

components/list/index.zh-CN.md

@@ -44,16 +44,16 @@ cols: 1
 
 ### List grid props
 
-| 参数 | 说明 | 类型 | 默认值 | 版本 |
+| 参数   | 说明                 | 类型   | 默认值 | 版本 |
-| --- | --- | --- | --- | --- |
+| ------ | -------------------- | ------ | ------ | ---- |
-| column | 列数，[可选值](https://github.com/ant-design/ant-design/blob/a7f17b4cdebbca07b3b9ce5698de61e772d46237/components/list/index.tsx#L16) | number | - |  |
+| column | 列数                 | number | -      |      |
-| gutter | 栅格间隔 | number | 0 |  |
+| gutter | 栅格间隔             | number | 0      |      |
-| xs | `<576px` 展示的列数 | number | - |  |
+| xs     | `<576px` 展示的列数  | number | -      |      |
-| sm | `≥576px` 展示的列数 | number | - |  |
+| sm     | `≥576px` 展示的列数  | number | -      |      |
-| md | `≥768px` 展示的列数 | number | - |  |
+| md     | `≥768px` 展示的列数  | number | -      |      |
-| lg | `≥992px` 展示的列数 | number | - |  |
+| lg     | `≥992px` 展示的列数  | number | -      |      |
-| xl | `≥1200px` 展示的列数 | number | - |  |
+| xl     | `≥1200px` 展示的列数 | number | -      |      |
-| xxl | `≥1600px` 展示的列数 | number | - |  |
+| xxl    | `≥1600px` 展示的列数 | number | -      |      |
 
 ### List.Item
 

components/list/style/index.less

@@ -76,7 +76,7 @@
         margin-bottom: 4px;
         color: @text-color;
         font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
         > a {
           color: @text-color;
           transition: all 0.3s;
@@ -88,7 +88,7 @@
       &-description {
         color: @text-color-secondary;
         font-size: @list-item-meta-description-font-size;
-        line-height: 22px;
+        line-height: @line-height-base;
       }
     }
     &-action {
@@ -104,7 +104,7 @@
         padding: 0 @padding-xs;
         color: @text-color-secondary;
         font-size: @font-size-base;
-        line-height: 22px;
+        line-height: @line-height-base;
         text-align: center;
         cursor: pointer;
       }

components/mentions/style/index.less

@@ -123,7 +123,7 @@
         overflow: hidden;
         color: @text-color;
         font-weight: normal;
-        line-height: 22px;
+        line-height: @line-height-base;
         white-space: nowrap;
         text-overflow: ellipsis;
         cursor: pointer;

components/menu/MenuItem.tsx

@@ -15,6 +15,7 @@ export interface MenuItemProps
   rootPrefixCls?: string;
   disabled?: boolean;
   level?: number;
+  icon?: React.ReactNode;
   title?: React.ReactNode;
   children?: React.ReactNode;
   className?: string;
@@ -37,9 +38,19 @@ export default class MenuItem extends React.Component<MenuItemProps> {
     this.menuItem = menuItem;
   };
 
+  renderItemChildren() {
+    const { icon, children } = this.props;
+    // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+    // ref: https://github.com/ant-design/ant-design/pull/23456
+    if (!icon || (React.isValidElement(children) && children.type === 'span')) {
+      return children;
+    }
+    return <span>{children}</span>;
+  }
+
   renderItem = ({ siderCollapsed }: SiderContextProps) => {
     const { level, className, children, rootPrefixCls } = this.props;
-    const { title, ...rest } = this.props;
+    const { title, icon, ...rest } = this.props;
 
     return (
       <MenuContext.Consumer>
@@ -60,6 +71,7 @@ export default class MenuItem extends React.Component<MenuItemProps> {
             // ref: https://github.com/ant-design/ant-design/issues/16742
             tooltipProps.visible = false;
           }
+          const childrenLength = toArray(children).length;
           return (
             <Tooltip
               {...tooltipProps}
@@ -69,11 +81,15 @@ export default class MenuItem extends React.Component<MenuItemProps> {
               <Item
                 {...rest}
                 className={classNames(className, {
-                  [`${rootPrefixCls}-item-only-child`]: toArray(children).length === 1,
+                  [`${rootPrefixCls}-item-only-child`]:
+                    (icon ? childrenLength + 1 : childrenLength) === 1,
                 })}
                 title={title}
                 ref={this.saveMenuItem}
-              />
+              >
+                {icon}
+                {this.renderItemChildren()}
+              </Item>
             </Tooltip>
           );
         }}

components/menu/SubMenu.tsx

@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { SubMenu as RcSubMenu } from 'rc-menu';
 import classNames from 'classnames';
-
+import omit from 'omit.js';
 import MenuContext, { MenuContextProps } from './MenuContext';
 
 interface TitleEventEntity {
@@ -15,6 +15,7 @@ export interface SubMenuProps {
   className?: string;
   disabled?: boolean;
   title?: React.ReactNode;
+  icon?: React.ReactNode;
   style?: React.CSSProperties;
   onTitleClick?: (e: TitleEventEntity) => void;
   onTitleMouseEnter?: (e: TitleEventEntity) => void;
@@ -41,13 +42,30 @@ class SubMenu extends React.Component<SubMenuProps, any> {
     this.subMenu = subMenu;
   };
 
+  renderTitle() {
+    const { icon, title } = this.props;
+    if (!icon) {
+      return title;
+    }
+    // inline-collapsed.md demo 依赖 span 来隐藏文字,有 icon 属性，则内部包裹一个 span
+    // ref: https://github.com/ant-design/ant-design/pull/23456
+    const titleIsSpan = React.isValidElement(title) && title.type === 'span';
+    return (
+      <>
+        {icon}
+        {titleIsSpan ? title : <span>{title}</span>}
+      </>
+    );
+  }
+
   render() {
     const { rootPrefixCls, popupClassName } = this.props;
     return (
       <MenuContext.Consumer>
         {({ antdMenuTheme }: MenuContextProps) => (
           <RcSubMenu
-            {...this.props}
+            {...omit(this.props, ['icon'])}
+            title={this.renderTitle()}
             ref={this.saveSubMenu}
             popupClassName={classNames(
               rootPrefixCls,

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

@@ -48,7 +48,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
         />
       </svg>
     </span>
-    Navigation One
+    <span>
+      Navigation One
+    </span>
   </li>
   <li
     class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@@ -94,7 +96,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
         />
       </svg>
     </span>
-    Navigation Two
+    <span>
+      Navigation Two
+    </span>
   </li>
   <li
     class="ant-menu-submenu ant-menu-submenu-horizontal ant-menu-overflowed-submenu"
@@ -145,7 +149,9 @@ exports[`renders ./components/menu/demo/horizontal.md correctly 1`] = `
           />
         </svg>
       </span>
-      Navigation Three - Submenu
+      <span>
+        Navigation Three - Submenu
+      </span>
       <i
         class="ant-menu-submenu-arrow"
       />
@@ -325,30 +331,28 @@ exports[`renders ./components/menu/demo/inline.md correctly 1`] = `
       role="button"
       style="padding-left:24px"
     >
-      <span>
+      <span
-        <span
+        aria-label="appstore"
-          aria-label="appstore"
+        class="anticon anticon-appstore"
-          class="anticon anticon-appstore"
+        role="img"
-          role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="appstore"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
+          <path
-            aria-hidden="true"
+            d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-            class=""
+          />
-            data-icon="appstore"
+        </svg>
-            fill="currentColor"
+      </span>
-            focusable="false"
+      <span>
-            height="1em"
+        Navigation Two
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation Two
-        </span>
       </span>
       <i
         class="ant-menu-submenu-arrow"
@@ -534,30 +538,28 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="mail"
-            aria-label="mail"
+          class="anticon anticon-mail"
-            class="anticon anticon-mail"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="mail"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              class=""
+            />
-              data-icon="mail"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation One
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation One
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -609,30 +611,28 @@ exports[`renders ./components/menu/demo/inline-collapsed.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="appstore"
-            aria-label="appstore"
+          class="anticon anticon-appstore"
-            class="anticon anticon-appstore"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              class=""
+            />
-              data-icon="appstore"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation Two
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation Two
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -737,30 +737,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
       role="button"
       style="padding-left:24px"
     >
-      <span>
+      <span
-        <span
+        aria-label="appstore"
-          aria-label="appstore"
+        class="anticon anticon-appstore"
-          class="anticon anticon-appstore"
+        role="img"
-          role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="appstore"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
+          <path
-            aria-hidden="true"
+            d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-            class=""
+          />
-            data-icon="appstore"
+        </svg>
-            fill="currentColor"
+      </span>
-            focusable="false"
+      <span>
-            height="1em"
+        Navigation Two
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation Two
-        </span>
       </span>
       <i
         class="ant-menu-submenu-arrow"
@@ -779,30 +777,28 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
       role="button"
       style="padding-left:24px"
     >
-      <span>
+      <span
-        <span
+        aria-label="setting"
-          aria-label="setting"
+        class="anticon anticon-setting"
-          class="anticon anticon-setting"
+        role="img"
-          role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="setting"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
+          <path
-            aria-hidden="true"
+            d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            class=""
+          />
-            data-icon="setting"
+        </svg>
-            fill="currentColor"
+      </span>
-            focusable="false"
+      <span>
-            height="1em"
+        Navigation Three
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation Three
-        </span>
       </span>
       <i
         class="ant-menu-submenu-arrow"
@@ -814,7 +810,7 @@ exports[`renders ./components/menu/demo/sider-current.md correctly 1`] = `
 `;
 
 exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="false"
     class="ant-switch"
@@ -824,12 +820,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
+  </button>,
-   Change Mode
+  " Change Mode",
-  <span
+  <div
-    class="ant-divider"
+    class="ant-divider ant-divider-vertical"
-    style="margin:0 1em"
+    role="separator"
-  />
+  />,
   <button
     aria-checked="false"
     class="ant-switch"
@@ -839,10 +835,10 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
     <span
       class="ant-switch-inner"
     />
-  </button>
+  </button>,
-   Change Style
+  " Change Style",
-  <br />
+  <br />,
-  <br />
+  <br />,
   <ul
     class="ant-menu ant-menu-light ant-menu-root ant-menu-inline"
     role="menu"
@@ -873,7 +869,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
           />
         </svg>
       </span>
-      Navigation One
+      <span>
+        Navigation One
+      </span>
     </li>
     <li
       class="ant-menu-item"
@@ -900,7 +898,9 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
           />
         </svg>
       </span>
-      Navigation Two
+      <span>
+        Navigation Two
+      </span>
     </li>
     <li
       class="ant-menu-submenu ant-menu-submenu-inline ant-menu-submenu-open"
@@ -914,30 +914,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="appstore"
-            aria-label="appstore"
+          class="anticon anticon-appstore"
-            class="anticon anticon-appstore"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              class=""
+            />
-              data-icon="appstore"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation Two
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation Three
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -994,30 +992,28 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="setting"
-            aria-label="setting"
+          class="anticon anticon-setting"
-            class="anticon anticon-setting"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="setting"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-              class=""
+            />
-              data-icon="setting"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation Three
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation Four
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -1025,12 +1021,12 @@ exports[`renders ./components/menu/demo/switch-mode.md correctly 1`] = `
       </div>
       <div />
     </li>
-  </ul>
+  </ul>,
-</div>
+]
 `;
 
 exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
-<div>
+Array [
   <button
     aria-checked="true"
     checked=""
@@ -1043,9 +1039,9 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
     >
       Dark
     </span>
-  </button>
+  </button>,
-  <br />
+  <br />,
-  <br />
+  <br />,
   <ul
     class="ant-menu ant-menu-dark ant-menu-root ant-menu-inline"
     role="menu"
@@ -1063,30 +1059,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="mail"
-            aria-label="mail"
+          class="anticon anticon-mail"
-            class="anticon anticon-mail"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="mail"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              class=""
+            />
-              data-icon="mail"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation One
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation One
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -1138,30 +1132,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="appstore"
-            aria-label="appstore"
+          class="anticon anticon-appstore"
-            class="anticon anticon-appstore"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="appstore"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              class=""
+            />
-              data-icon="appstore"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation Two
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M464 144H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H212V212h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V160c0-8.8-7.2-16-16-16zm-52 268H612V212h200v200zM464 544H160c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H212V612h200v200zm452-268H560c-8.8 0-16 7.2-16 16v304c0 8.8 7.2 16 16 16h304c8.8 0 16-7.2 16-16V560c0-8.8-7.2-16-16-16zm-52 268H612V612h200v200z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation Two
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -1180,30 +1172,28 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
         role="button"
         style="padding-left:24px"
       >
-        <span>
+        <span
-          <span
+          aria-label="setting"
-            aria-label="setting"
+          class="anticon anticon-setting"
-            class="anticon anticon-setting"
+          role="img"
-            role="img"
+        >
+          <svg
+            aria-hidden="true"
+            class=""
+            data-icon="setting"
+            fill="currentColor"
+            focusable="false"
+            height="1em"
+            viewBox="64 64 896 896"
+            width="1em"
           >
-            <svg
+            <path
-              aria-hidden="true"
+              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-              class=""
+            />
-              data-icon="setting"
+          </svg>
-              fill="currentColor"
+        </span>
-              focusable="false"
+        <span>
-              height="1em"
+          Navigation Three
-              viewBox="64 64 896 896"
-              width="1em"
-            >
-              <path
-                d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-              />
-            </svg>
-          </span>
-          <span>
-            Navigation Three
-          </span>
         </span>
         <i
           class="ant-menu-submenu-arrow"
@@ -1211,8 +1201,8 @@ exports[`renders ./components/menu/demo/theme.md correctly 1`] = `
       </div>
       <div />
     </li>
-  </ul>
+  </ul>,
-</div>
+]
 `;
 
 exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
@@ -1231,30 +1221,28 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
       class="ant-menu-submenu-title"
       role="button"
     >
-      <span>
+      <span
-        <span
+        aria-label="mail"
-          aria-label="mail"
+        class="anticon anticon-mail"
-          class="anticon anticon-mail"
+        role="img"
-          role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="mail"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
+          <path
-            aria-hidden="true"
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-            class=""
+          />
-            data-icon="mail"
+        </svg>
-            fill="currentColor"
+      </span>
-            focusable="false"
+      <span>
-            height="1em"
+        Navigation One
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation One
-        </span>
       </span>
       <i
         class="ant-menu-submenu-arrow"
@@ -1311,30 +1299,28 @@ exports[`renders ./components/menu/demo/vertical.md correctly 1`] = `
       class="ant-menu-submenu-title"
       role="button"
     >
-      <span>
+      <span
-        <span
+        aria-label="setting"
-          aria-label="setting"
+        class="anticon anticon-setting"
-          class="anticon anticon-setting"
+        role="img"
-          role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="setting"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
         >
-          <svg
+          <path
-            aria-hidden="true"
+            d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            class=""
+          />
-            data-icon="setting"
+        </svg>
-            fill="currentColor"
+      </span>
-            focusable="false"
+      <span>
-            height="1em"
+        Navigation Three
-            viewBox="64 64 896 896"
-            width="1em"
-          >
-            <path
-              d="M924.8 625.7l-65.5-56c3.1-19 4.7-38.4 4.7-57.8s-1.6-38.8-4.7-57.8l65.5-56a32.03 32.03 0 009.3-35.2l-.9-2.6a443.74 443.74 0 00-79.7-137.9l-1.8-2.1a32.12 32.12 0 00-35.1-9.5l-81.3 28.9c-30-24.6-63.5-44-99.7-57.6l-15.7-85a32.05 32.05 0 00-25.8-25.7l-2.7-.5c-52.1-9.4-106.9-9.4-159 0l-2.7.5a32.05 32.05 0 00-25.8 25.7l-15.8 85.4a351.86 351.86 0 00-99 57.4l-81.9-29.1a32 32 0 00-35.1 9.5l-1.8 2.1a446.02 446.02 0 00-79.7 137.9l-.9 2.6c-4.5 12.5-.8 26.5 9.3 35.2l66.3 56.6c-3.1 18.8-4.6 38-4.6 57.1 0 19.2 1.5 38.4 4.6 57.1L99 625.5a32.03 32.03 0 00-9.3 35.2l.9 2.6c18.1 50.4 44.9 96.9 79.7 137.9l1.8 2.1a32.12 32.12 0 0035.1 9.5l81.9-29.1c29.8 24.5 63.1 43.9 99 57.4l15.8 85.4a32.05 32.05 0 0025.8 25.7l2.7.5a449.4 449.4 0 00159 0l2.7-.5a32.05 32.05 0 0025.8-25.7l15.7-85a350 350 0 0099.7-57.6l81.3 28.9a32 32 0 0035.1-9.5l1.8-2.1c34.8-41.1 61.6-87.5 79.7-137.9l.9-2.6c4.5-12.3.8-26.3-9.3-35zM788.3 465.9c2.5 15.1 3.8 30.6 3.8 46.1s-1.3 31-3.8 46.1l-6.6 40.1 74.7 63.9a370.03 370.03 0 01-42.6 73.6L721 702.8l-31.4 25.8c-23.9 19.6-50.5 35-79.3 45.8l-38.1 14.3-17.9 97a377.5 377.5 0 01-85 0l-17.9-97.2-37.8-14.5c-28.5-10.8-55-26.2-78.7-45.7l-31.4-25.9-93.4 33.2c-17-22.9-31.2-47.6-42.6-73.6l75.5-64.5-6.5-40c-2.4-14.9-3.7-30.3-3.7-45.5 0-15.3 1.2-30.6 3.7-45.5l6.5-40-75.5-64.5c11.3-26.1 25.6-50.7 42.6-73.6l93.4 33.2 31.4-25.9c23.7-19.5 50.2-34.9 78.7-45.7l37.9-14.3 17.9-97.2c28.1-3.2 56.8-3.2 85 0l17.9 97 38.1 14.3c28.7 10.8 55.4 26.2 79.3 45.8l31.4 25.8 92.8-32.9c17 22.9 31.2 47.6 42.6 73.6L781.8 426l6.5 39.9zM512 326c-97.2 0-176 78.8-176 176s78.8 176 176 176 176-78.8 176-176-78.8-176-176-176zm79.2 255.2A111.6 111.6 0 01512 614c-29.9 0-58-11.7-79.2-32.8A111.6 111.6 0 01400 502c0-29.9 11.7-58 32.8-79.2C454 401.6 482.1 390 512 390c29.9 0 58 11.6 79.2 32.8A111.6 111.6 0 01624 502c0 29.9-11.7 58-32.8 79.2z"
-            />
-          </svg>
-        </span>
-        <span>
-          Navigation Three
-        </span>
       </span>
       <i
         class="ant-menu-submenu-arrow"

components/menu/__tests__/__snapshots__/index.test.js.snap

@@ -1,5 +1,145 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Menu Menu.Item with icon children auto wrap span 1`] = `
+<ul
+  class="ant-menu ant-menu-light ant-menu-root ant-menu-vertical"
+  role="menu"
+>
+  <li
+    class="ant-menu-item"
+    role="menuitem"
+  >
+    <span
+      aria-label="mail"
+      class="anticon anticon-mail"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="mail"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+        />
+      </svg>
+    </span>
+    <span>
+      Navigation One
+    </span>
+  </li>
+  <li
+    class="ant-menu-item"
+    role="menuitem"
+  >
+    <span
+      aria-label="mail"
+      class="anticon anticon-mail"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="mail"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+        />
+      </svg>
+    </span>
+    <span>
+      Navigation One
+    </span>
+  </li>
+  <li
+    class="ant-menu-submenu ant-menu-submenu-vertical"
+    role="menuitem"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-menu-submenu-title"
+      role="button"
+    >
+      <span
+        aria-label="mail"
+        class="anticon anticon-mail"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="mail"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+          />
+        </svg>
+      </span>
+      <span>
+        Navigation One
+      </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
+    </div>
+  </li>
+  <li
+    class="ant-menu-submenu ant-menu-submenu-vertical"
+    role="menuitem"
+  >
+    <div
+      aria-expanded="false"
+      aria-haspopup="true"
+      class="ant-menu-submenu-title"
+      role="button"
+    >
+      <span
+        aria-label="mail"
+        class="anticon anticon-mail"
+        role="img"
+      >
+        <svg
+          aria-hidden="true"
+          class=""
+          data-icon="mail"
+          fill="currentColor"
+          focusable="false"
+          height="1em"
+          viewBox="64 64 896 896"
+          width="1em"
+        >
+          <path
+            d="M928 160H96c-17.7 0-32 14.3-32 32v640c0 17.7 14.3 32 32 32h832c17.7 0 32-14.3 32-32V192c0-17.7-14.3-32-32-32zm-40 110.8V792H136V270.8l-27.6-21.5 39.3-50.5 42.8 33.3h643.1l42.8-33.3 39.3 50.5-27.7 21.5zM833.6 232L512 482 190.4 232l-42.8-33.3-39.3 50.5 27.6 21.5 341.6 265.6a55.99 55.99 0 0068.7 0L888 270.8l27.6-21.5-39.3-50.5-42.7 33.2z"
+          />
+        </svg>
+      </span>
+      <span>
+        Navigation One
+      </span>
+      <i
+        class="ant-menu-submenu-arrow"
+      />
+    </div>
+  </li>
+</ul>
+`;
+
 exports[`Menu rtl render component should be rendered correctly in RTL direction 1`] = `
 <ul
   class="ant-menu ant-menu-light ant-menu-root ant-menu-rtl ant-menu-vertical"
@@ -49,6 +189,26 @@ exports[`Menu should controlled collapse work 1`] = `
     role="menuitem"
     style="padding-left: 24px;"
   >
+    <span
+      aria-label="pie-chart"
+      class="anticon anticon-pie-chart"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="pie-chart"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+        />
+      </svg>
+    </span>
     <span>
       Option 1
     </span>
@@ -66,6 +226,26 @@ exports[`Menu should controlled collapse work 2`] = `
     role="menuitem"
     style="padding-left: 24px;"
   >
+    <span
+      aria-label="pie-chart"
+      class="anticon anticon-pie-chart"
+      role="img"
+    >
+      <svg
+        aria-hidden="true"
+        class=""
+        data-icon="pie-chart"
+        fill="currentColor"
+        focusable="false"
+        height="1em"
+        viewBox="64 64 896 896"
+        width="1em"
+      >
+        <path
+          d="M864 518H506V160c0-4.4-3.6-8-8-8h-26a398.46 398.46 0 00-282.8 117.1 398.19 398.19 0 00-85.7 127.1A397.61 397.61 0 0072 552a398.46 398.46 0 00117.1 282.8c36.7 36.7 79.5 65.6 127.1 85.7A397.61 397.61 0 00472 952a398.46 398.46 0 00282.8-117.1c36.7-36.7 65.6-79.5 85.7-127.1A397.61 397.61 0 00872 552v-26c0-4.4-3.6-8-8-8zM705.7 787.8A331.59 331.59 0 01470.4 884c-88.1-.4-170.9-34.9-233.2-97.2C174.5 724.1 140 640.7 140 552c0-88.7 34.5-172.1 97.2-234.8 54.6-54.6 124.9-87.9 200.8-95.5V586h364.3c-7.7 76.3-41.3 147-96.6 201.8zM952 462.4l-2.6-28.2c-8.5-92.1-49.4-179-115.2-244.6A399.4 399.4 0 00589 74.6L560.7 72c-4.7-.4-8.7 3.2-8.7 7.9V464c0 4.4 3.6 8 8 8l384-1c4.7 0 8.4-4 8-8.6zm-332.2-58.2V147.6a332.24 332.24 0 01166.4 89.8c45.7 45.6 77 103.6 90 166.1l-256.4.7z"
+        />
+      </svg>
+    </span>
     <span>
       Option 1
     </span>

components/menu/__tests__/index.test.js

@@ -1,7 +1,13 @@
 import React from 'react';
 import { mount } from 'enzyme';
+import {
+  MailOutlined,
+  InboxOutlined,
+  AppstoreOutlined,
+  PieChartOutlined,
+  UserOutlined,
+} from '@ant-design/icons';
 import Menu from '..';
-import Icon from '../../icon';
 import Layout from '../../layout';
 import Tooltip from '../../tooltip';
 import mountTest from '../../../tests/shared/mountTest';
@@ -62,12 +68,7 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   it('should accept defaultOpenKeys in mode inline', () => {
@@ -80,12 +81,7 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   it('should accept defaultOpenKeys in mode vertical', () => {
@@ -98,12 +94,7 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).not.toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   it('horizontal', () => {
@@ -116,31 +107,17 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
     wrapper.setProps({ openKeys: [] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(true);
     wrapper.setProps({ openKeys: ['1'] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   it('inline', () => {
@@ -153,31 +130,17 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
     wrapper.setProps({ openKeys: [] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(true);
     wrapper.setProps({ openKeys: ['1'] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   it('vertical', () => {
@@ -190,31 +153,17 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
     wrapper.setProps({ openKeys: [] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(true);
-      wrapper
-        .find('.ant-menu-sub')
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(true);
     wrapper.setProps({ openKeys: ['1'] });
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-      wrapper
+      true,
-        .find('.ant-menu-sub')
+    );
-        .hostNodes()
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).not.toBe(true);
   });
 
   // https://github.com/ant-design/ant-design/pulls/4677
@@ -243,33 +192,18 @@ describe('Menu', () => {
         <Menu.Item key="2">menu2</Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
     wrapper.setProps({ mode: 'vertical' });
-    expect(
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
     wrapper.setProps({ mode: 'inline' });
-    expect(
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
   });
 
   it('should always follow openKeys when inlineCollapsed is switched', () => {
     const wrapper = mount(
       <Menu defaultOpenKeys={['1']} mode="inline">
         <Menu.Item key="menu1">
-          <Icon type="inbox" />
+          <InboxOutlined />
           <span>Option</span>
         </Menu.Item>
         <SubMenu key="1" title="submenu1">
@@ -278,18 +212,8 @@ describe('Menu', () => {
         </SubMenu>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
-      wrapper
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-inline'),
-    ).toBe(true);
-    expect(
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
 
     wrapper.setProps({ inlineCollapsed: true });
     // 动画结束后套样式;
@@ -297,37 +221,22 @@ describe('Menu', () => {
     wrapper.update();
     wrapper.simulate('transitionEnd', { propertyName: 'width' });
 
-    expect(
+    expect(wrapper.find('ul.ant-menu-root').at(0).hasClass('ant-menu-vertical')).toBe(true);
-      wrapper
-        .find('ul.ant-menu-root')
-        .at(0)
-        .hasClass('ant-menu-vertical'),
-    ).toBe(true);
     expect(wrapper.find('ul.ant-menu-sub').length).toBe(0);
 
     wrapper.setProps({ inlineCollapsed: false });
     jest.runAllTimers();
     wrapper.update();
 
-    expect(
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-inline')).toBe(true);
-      wrapper
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-inline'),
-    ).toBe(true);
-    expect(
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
   });
 
   it('inlineCollapsed should works well when specify a not existed default openKeys', () => {
     const wrapper = mount(
       <Menu defaultOpenKeys={['not-existed']} mode="inline">
         <Menu.Item key="menu1">
-          <Icon type="inbox" />
+          <InboxOutlined />
           <span>Option</span>
         </Menu.Item>
         <SubMenu key="1" title="submenu1">
@@ -341,36 +250,15 @@ describe('Menu', () => {
     jest.runAllTimers();
     wrapper.update();
     wrapper.simulate('transitionEnd', { propertyName: 'width' });
-    wrapper
+    wrapper.find('.ant-menu-submenu-title').at(0).simulate('mouseEnter');
-      .find('.ant-menu-submenu-title')
-      .at(0)
-      .simulate('mouseEnter');
     jest.runAllTimers();
     wrapper.update();
-    expect(
+    expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-vertical')).toBe(
-      wrapper
+      true,
-        .find('.ant-menu-submenu')
+    );
-        .at(0)
+    expect(wrapper.find('.ant-menu-submenu').at(0).hasClass('ant-menu-submenu-open')).toBe(true);
-        .hasClass('ant-menu-submenu-vertical'),
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-vertical')).toBe(true);
-    ).toBe(true);
+    expect(wrapper.find('ul.ant-menu-sub').at(0).hasClass('ant-menu-hidden')).toBe(false);
-    expect(
-      wrapper
-        .find('.ant-menu-submenu')
-        .at(0)
-        .hasClass('ant-menu-submenu-open'),
-    ).toBe(true);
-    expect(
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-vertical'),
-    ).toBe(true);
-    expect(
-      wrapper
-        .find('ul.ant-menu-sub')
-        .at(0)
-        .hasClass('ant-menu-hidden'),
-    ).toBe(false);
   });
 
   it('inlineCollapsed Menu.Item Tooltip can be removed', () => {
@@ -399,48 +287,12 @@ describe('Menu', () => {
         </Menu.Item>
       </Menu>,
     );
-    expect(
+    expect(wrapper.find(Menu.Item).at(0).find(Tooltip).props().title).toBe('item');
-      wrapper
+    expect(wrapper.find(Menu.Item).at(1).find(Tooltip).props().title).toBe('title');
-        .find(Menu.Item)
+    expect(wrapper.find(Menu.Item).at(2).find(Tooltip).props().title).toBe('item');
-        .at(0)
+    expect(wrapper.find(Menu.Item).at(3).find(Tooltip).props().title).toBe(null);
-        .find(Tooltip)
+    expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
-        .props().title,
+    expect(wrapper.find(Menu.Item).at(4).find(Tooltip).props().title).toBe('');
-    ).toBe('item');
-    expect(
-      wrapper
-        .find(Menu.Item)
-        .at(1)
-        .find(Tooltip)
-        .props().title,
-    ).toBe('title');
-    expect(
-      wrapper
-        .find(Menu.Item)
-        .at(2)
-        .find(Tooltip)
-        .props().title,
-    ).toBe('item');
-    expect(
-      wrapper
-        .find(Menu.Item)
-        .at(3)
-        .find(Tooltip)
-        .props().title,
-    ).toBe(null);
-    expect(
-      wrapper
-        .find(Menu.Item)
-        .at(4)
-        .find(Tooltip)
-        .props().title,
-    ).toBe('');
-    expect(
-      wrapper
-        .find(Menu.Item)
-        .at(4)
-        .find(Tooltip)
-        .props().title,
-    ).toBe('');
   });
 
   describe('open submenu when click submenu title', () => {
@@ -453,10 +305,7 @@ describe('Menu', () => {
     });
 
     const toggleMenu = (wrapper, index, event) => {
-      wrapper
+      wrapper.find('.ant-menu-submenu-title').at(index).simulate(event);
-        .find('.ant-menu-submenu-title')
-        .at(index)
-        .simulate(event);
       jest.runAllTimers();
       wrapper.update();
     };
@@ -474,21 +323,13 @@ describe('Menu', () => {
       expect(wrapper.find('.ant-menu-sub').length).toBe(0);
       toggleMenu(wrapper, 0, 'click');
       expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).not.toBe(true);
       toggleMenu(wrapper, 0, 'click');
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).toBe(true);
     });
 
     it('vertical', () => {
@@ -504,21 +345,13 @@ describe('Menu', () => {
       expect(wrapper.find('.ant-menu-sub').length).toBe(0);
       toggleMenu(wrapper, 0, 'mouseenter');
       expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).not.toBe(true);
       toggleMenu(wrapper, 0, 'mouseleave');
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).toBe(true);
     });
 
     it('horizontal', () => {
@@ -535,21 +368,13 @@ describe('Menu', () => {
       expect(wrapper.find('.ant-menu-sub').length).toBe(0);
       toggleMenu(wrapper, 0, 'mouseenter');
       expect(wrapper.find('.ant-menu-sub').hostNodes().length).toBe(1);
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).not.toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).not.toBe(true);
       toggleMenu(wrapper, 0, 'mouseleave');
-      expect(
+      expect(wrapper.find('.ant-menu-sub').hostNodes().at(0).hasClass('ant-menu-hidden')).toBe(
-        wrapper
+        true,
-          .find('.ant-menu-sub')
+      );
-          .hostNodes()
-          .at(0)
-          .hasClass('ant-menu-hidden'),
-      ).toBe(true);
     });
   });
 
@@ -558,7 +383,7 @@ describe('Menu', () => {
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed>
         <Menu.Item key="1" title="bamboo lucky">
-          <Icon type="pie-chart" />
+          <PieChartOutlined />
           <span>
             Option 1
             <img
@@ -600,7 +425,7 @@ describe('Menu', () => {
                   key="sub1"
                   title={
                     <span>
-                      <Icon type="user" />
+                      <UserOutlined />
                       <span>User</span>
                     </span>
                   }
@@ -631,10 +456,7 @@ describe('Menu', () => {
         <Menu.Item key="test2">Navigation Two</Menu.Item>
       </Menu>,
     );
-    wrapper
+    wrapper.find('Menu').at(1).simulate('mouseenter');
-      .find('Menu')
-      .at(1)
-      .simulate('mouseenter');
     expect(onMouseEnter).toHaveBeenCalled();
   });
 
@@ -642,12 +464,9 @@ describe('Menu', () => {
     it('get correct animation type when switched from inline', () => {
       const wrapper = mount(<Menu mode="inline" />);
       wrapper.setProps({ mode: 'horizontal' });
-      expect(
+      expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
-        wrapper
+        motion: { motionName: '' },
-          .find('InternalMenu')
+      });
-          .instance()
-          .getOpenMotionProps(''),
-      ).toEqual({ motion: { motionName: '' } });
     });
 
     it('warning if use `openAnimation` as object', () => {
@@ -664,22 +483,14 @@ describe('Menu', () => {
     it('motion object', () => {
       const motion = { test: true };
       const wrapper = mount(<Menu motion={motion} />);
-      expect(
+      expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({ motion });
-        wrapper
-          .find('InternalMenu')
-          .instance()
-          .getOpenMotionProps(''),
-      ).toEqual({ motion });
     });
 
     it('legacy openTransitionName', () => {
       const wrapper = mount(<Menu openTransitionName="legacy" />);
-      expect(
+      expect(wrapper.find('InternalMenu').instance().getOpenMotionProps('')).toEqual({
-        wrapper
+        openTransitionName: 'legacy',
-          .find('InternalMenu')
+      });
-          .instance()
-          .getOpenMotionProps(''),
-      ).toEqual({ openTransitionName: 'legacy' });
     });
   });
 
@@ -687,11 +498,11 @@ describe('Menu', () => {
     const wrapper = mount(
       <Menu defaultSelectedKeys={['mail']} defaultOpenKeys={['mail']} mode="horizontal">
         <Menu.Item key="mail">
-          <Icon type="mail" />
+          <MailOutlined />
           Navigation One
         </Menu.Item>
         <Menu.Item key="app">
-          <Icon type="appstore" />
+          <AppstoreOutlined />
           Navigation Two
         </Menu.Item>
         <Menu.Item key="alipay">
@@ -701,20 +512,28 @@ describe('Menu', () => {
         </Menu.Item>
       </Menu>,
     );
-    wrapper
+    wrapper.find('MenuItem').first().simulate('mouseenter');
-      .find('MenuItem')
-      .first()
-      .simulate('mouseenter');
     jest.runAllTimers();
     wrapper.update();
     expect(wrapper.find('.ant-tooltip-inner').length).toBe(0);
   });
 
+  it('MenuItem should render icon and icon should be the first child when icon exists', () => {
+    const wrapper = mount(
+      <Menu>
+        <Menu.Item key="mail" icon={<MailOutlined />}>
+          Navigation One
+        </Menu.Item>
+      </Menu>,
+    );
+    expect(wrapper.find('.ant-menu-item .anticon').hasClass('anticon-mail')).toBe(true);
+  });
+
   it('should controlled collapse work', () => {
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed={false}>
         <Menu.Item key="1">
-          <Icon type="pie-chart" />
+          <PieChartOutlined />
           <span>Option 1</span>
         </Menu.Item>
       </Menu>,
@@ -732,7 +551,7 @@ describe('Menu', () => {
     const wrapper = mount(
       <Menu mode="inline" inlineCollapsed={false}>
         <Menu.Item key="1">
-          <Icon type="pie-chart" />
+          <PieChartOutlined />
           <span>Option 1</span>
         </Menu.Item>
       </Menu>,
@@ -790,10 +609,7 @@ describe('Menu', () => {
       </Menu>,
     );
     expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 1');
-    wrapper
+    wrapper.find('.ant-menu-item').at(1).simulate('click');
-      .find('.ant-menu-item')
-      .at(1)
-      .simulate('click');
     expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
     wrapper.setProps({ inlineCollapsed: true });
     jest.runAllTimers();
@@ -808,4 +624,20 @@ describe('Menu', () => {
     expect(wrapper.find('.ant-menu-item-selected').getDOMNode().textContent).toBe('Option 2');
     jest.useRealTimers();
   });
+
+  it('Menu.Item with icon children auto wrap span', () => {
+    const wrapper = mount(
+      <Menu>
+        <Menu.Item key="1" icon={<MailOutlined />}>
+          Navigation One
+        </Menu.Item>
+        <Menu.Item key="2" icon={<MailOutlined />}>
+          <span>Navigation One</span>
+        </Menu.Item>
+        <Menu.SubMenu key="3" icon={<MailOutlined />} title="Navigation One" />
+        <Menu.SubMenu key="4" icon={<MailOutlined />} title={<span>Navigation One</span>} />
+      </Menu>,
+    );
+    expect(wrapper.render()).toMatchSnapshot();
+  });
 });

components/menu/demo/horizontal.md

@@ -34,22 +34,13 @@ class App extends React.Component {
   render() {
     return (
       <Menu onClick={this.handleClick} selectedKeys={[this.state.current]} mode="horizontal">
-        <Menu.Item key="mail">
+        <Menu.Item key="mail" icon={<MailOutlined />}>
-          <MailOutlined />
           Navigation One
         </Menu.Item>
-        <Menu.Item key="app" disabled>
+        <Menu.Item key="app" disabled icon={<AppstoreOutlined />}>
-          <AppstoreOutlined />
           Navigation Two
         </Menu.Item>
-        <SubMenu
+        <SubMenu icon={<SettingOutlined />} title="Navigation Three - Submenu">
-          title={
-            <>
-              <SettingOutlined />
-              Navigation Three - Submenu
-            </>
-          }
-        >
           <Menu.ItemGroup title="Item 1">
             <Menu.Item key="setting:1">Option 1</Menu.Item>
             <Menu.Item key="setting:2">Option 2</Menu.Item>

components/menu/demo/inline-collapsed.md

@@ -55,41 +55,22 @@ class App extends React.Component {
           theme="dark"
           inlineCollapsed={this.state.collapsed}
         >
-          <Menu.Item key="1">
+          <Menu.Item key="1" icon={<PieChartOutlined />}>
-            <PieChartOutlined />
+            Option 1
-            <span>Option 1</span>
           </Menu.Item>
-          <Menu.Item key="2">
+          <Menu.Item key="2" icon={<DesktopOutlined />}>
-            <DesktopOutlined />
+            Option 2
-            <span>Option 2</span>
           </Menu.Item>
-          <Menu.Item key="3">
+          <Menu.Item key="3" icon={<ContainerOutlined />}>
-            <ContainerOutlined />
+            Option 3
-            <span>Option 3</span>
           </Menu.Item>
-          <SubMenu
+          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-            key="sub1"
-            title={
-              <span>
-                <MailOutlined />
-                <span>Navigation One</span>
-              </span>
-            }
-          >
             <Menu.Item key="5">Option 5</Menu.Item>
             <Menu.Item key="6">Option 6</Menu.Item>
             <Menu.Item key="7">Option 7</Menu.Item>
             <Menu.Item key="8">Option 8</Menu.Item>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-            key="sub2"
-            title={
-              <span>
-                <AppstoreOutlined />
-                <span>Navigation Two</span>
-              </span>
-            }
-          >
             <Menu.Item key="9">Option 9</Menu.Item>
             <Menu.Item key="10">Option 10</Menu.Item>
             <SubMenu key="sub3" title="Submenu">

components/menu/demo/inline.md

@@ -51,15 +51,7 @@ class Sider extends React.Component {
             <Menu.Item key="4">Option 4</Menu.Item>
           </Menu.ItemGroup>
         </SubMenu>
-        <SubMenu
+        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-          key="sub2"
-          title={
-            <span>
-              <AppstoreOutlined />
-              <span>Navigation Two</span>
-            </span>
-          }
-        >
           <Menu.Item key="5">Option 5</Menu.Item>
           <Menu.Item key="6">Option 6</Menu.Item>
           <SubMenu key="sub3" title="Submenu">

components/menu/demo/sider-current.md

@@ -60,15 +60,7 @@ class Sider extends React.Component {
           <Menu.Item key="3">Option 3</Menu.Item>
           <Menu.Item key="4">Option 4</Menu.Item>
         </SubMenu>
-        <SubMenu
+        <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-          key="sub2"
-          title={
-            <span>
-              <AppstoreOutlined />
-              <span>Navigation Two</span>
-            </span>
-          }
-        >
           <Menu.Item key="5">Option 5</Menu.Item>
           <Menu.Item key="6">Option 6</Menu.Item>
           <SubMenu key="sub3" title="Submenu">
@@ -76,15 +68,7 @@ class Sider extends React.Component {
             <Menu.Item key="8">Option 8</Menu.Item>
           </SubMenu>
         </SubMenu>
-        <SubMenu
+        <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-          key="sub4"
-          title={
-            <span>
-              <SettingOutlined />
-              <span>Navigation Three</span>
-            </span>
-          }
-        >
           <Menu.Item key="9">Option 9</Menu.Item>
           <Menu.Item key="10">Option 10</Menu.Item>
           <Menu.Item key="11">Option 11</Menu.Item>

components/menu/demo/switch-mode.md

@@ -14,7 +14,7 @@ title:
 Show the dynamic switching mode (between 'inline' and 'vertical').
 
 ```jsx
-import { Menu, Switch } from 'antd';
+import { Menu, Switch, Divider } from 'antd';
 import {
   MailOutlined,
   CalendarOutlined,
@@ -44,9 +44,9 @@ class Sider extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Switch onChange={this.changeMode} /> Change Mode
-        <span className="ant-divider" style={{ margin: '0 1em' }} />
+        <Divider type="vertical" />
         <Switch onChange={this.changeTheme} /> Change Style
         <br />
         <br />
@@ -57,23 +57,13 @@ class Sider extends React.Component {
           mode={this.state.mode}
           theme={this.state.theme}
         >
-          <Menu.Item key="1">
+          <Menu.Item key="1" icon={<MailOutlined />}>
-            <MailOutlined />
             Navigation One
           </Menu.Item>
-          <Menu.Item key="2">
+          <Menu.Item key="2" icon={<CalendarOutlined />}>
-            <CalendarOutlined />
             Navigation Two
           </Menu.Item>
-          <SubMenu
+          <SubMenu key="sub1" icon={<AppstoreOutlined />} title="Navigation Two">
-            key="sub1"
-            title={
-              <span>
-                <AppstoreOutlined />
-                <span>Navigation Three</span>
-              </span>
-            }
-          >
             <Menu.Item key="3">Option 3</Menu.Item>
             <Menu.Item key="4">Option 4</Menu.Item>
             <SubMenu key="sub1-2" title="Submenu">
@@ -81,22 +71,14 @@ class Sider extends React.Component {
               <Menu.Item key="6">Option 6</Menu.Item>
             </SubMenu>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub2" icon={<SettingOutlined />} title="Navigation Three">
-            key="sub2"
-            title={
-              <span>
-                <SettingOutlined />
-                <span>Navigation Four</span>
-              </span>
-            }
-          >
             <Menu.Item key="7">Option 7</Menu.Item>
             <Menu.Item key="8">Option 8</Menu.Item>
             <Menu.Item key="9">Option 9</Menu.Item>
             <Menu.Item key="10">Option 10</Menu.Item>
           </SubMenu>
         </Menu>
-      </div>
+      </>
     );
   }
 }

components/menu/demo/theme.md

@@ -40,7 +40,7 @@ class Sider extends React.Component {
 
   render() {
     return (
-      <div>
+      <>
         <Switch
           checked={this.state.theme === 'dark'}
           onChange={this.changeTheme}
@@ -57,29 +57,13 @@ class Sider extends React.Component {
           selectedKeys={[this.state.current]}
           mode="inline"
         >
-          <SubMenu
+          <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-            key="sub1"
-            title={
-              <span>
-                <MailOutlined />
-                <span>Navigation One</span>
-              </span>
-            }
-          >
             <Menu.Item key="1">Option 1</Menu.Item>
             <Menu.Item key="2">Option 2</Menu.Item>
             <Menu.Item key="3">Option 3</Menu.Item>
             <Menu.Item key="4">Option 4</Menu.Item>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub2" icon={<AppstoreOutlined />} title="Navigation Two">
-            key="sub2"
-            title={
-              <span>
-                <AppstoreOutlined />
-                <span>Navigation Two</span>
-              </span>
-            }
-          >
             <Menu.Item key="5">Option 5</Menu.Item>
             <Menu.Item key="6">Option 6</Menu.Item>
             <SubMenu key="sub3" title="Submenu">
@@ -87,22 +71,14 @@ class Sider extends React.Component {
               <Menu.Item key="8">Option 8</Menu.Item>
             </SubMenu>
           </SubMenu>
-          <SubMenu
+          <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-            key="sub4"
-            title={
-              <span>
-                <SettingOutlined />
-                <span>Navigation Three</span>
-              </span>
-            }
-          >
             <Menu.Item key="9">Option 9</Menu.Item>
             <Menu.Item key="10">Option 10</Menu.Item>
             <Menu.Item key="11">Option 11</Menu.Item>
             <Menu.Item key="12">Option 12</Menu.Item>
           </SubMenu>
         </Menu>
-      </div>
+      </>
     );
   }
 }

components/menu/demo/vertical.md

@@ -25,15 +25,7 @@ function handleClick(e) {
 
 ReactDOM.render(
   <Menu onClick={handleClick} style={{ width: 256 }} mode="vertical">
-    <SubMenu
+    <SubMenu key="sub1" icon={<MailOutlined />} title="Navigation One">
-      key="sub1"
-      title={
-        <span>
-          <MailOutlined />
-          <span>Navigation One</span>
-        </span>
-      }
-    >
       <Menu.ItemGroup title="Item 1">
         <Menu.Item key="1">Option 1</Menu.Item>
         <Menu.Item key="2">Option 2</Menu.Item>
@@ -59,15 +51,7 @@ ReactDOM.render(
         <Menu.Item key="8">Option 8</Menu.Item>
       </SubMenu>
     </SubMenu>
-    <SubMenu
+    <SubMenu key="sub4" icon={<SettingOutlined />} title="Navigation Three">
-      key="sub4"
-      title={
-        <span>
-          <SettingOutlined />
-          <span>Navigation Three</span>
-        </span>
-      }
-    >
       <Menu.Item key="9">Option 9</Menu.Item>
       <Menu.Item key="10">Option 10</Menu.Item>
       <Menu.Item key="11">Option 11</Menu.Item>

components/menu/index.en-US.md

@@ -52,11 +52,31 @@ More layouts with navigation: [Layout](/components/layout).
 
 ### Menu.Item
 
-| Param    | Description                          | Type    | Default value | Version |
+| Param    | Description                          | Type      | Default value | Version |
-| -------- | ------------------------------------ | ------- | ------------- | ------- |
+| -------- | ------------------------------------ | --------- | ------------- | ------- |
-| disabled | Whether menu item is disabled        | boolean | false         |         |
+| disabled | Whether menu item is disabled        | boolean   | false         |         |
-| key      | Unique ID of the menu item           | string  |               |         |
+| key      | Unique ID of the menu item           | string    |               |         |
-| title    | Set display title for collapsed item | string  |               |         |
+| title    | Set display title for collapsed item | string    |               |         |
+| icon     | icon of the menu item                | ReactNode |               | 4.2.0   |
+
+> Note: `icon` is a newly added prop in`4.2.0`. For previous versions, please use the following method to define the icon.
+>
+> ```jsx
+> <Menu.Item>
+>   <PieChartOutlined />
+>   <span>Option 1</span>
+> </Menu.Item>
+> <Menu.SubMenu
+>   title={
+>     <>
+>       <PieChartOutlined />
+>       <span>Option 2</span>
+>     </>
+>   }
+> >
+>   ...
+> </Menu.SubMenu>
+> ```
 
 ### Menu.SubMenu
 
@@ -66,7 +86,8 @@ More layouts with navigation: [Layout](/components/layout).
 | children | Sub-menus or sub-menu items | Array&lt;MenuItem\|SubMenu> |  |  |
 | disabled | Whether sub-menu is disabled | boolean | false |  |
 | key | Unique ID of the sub-menu | string |  |  |
-| title | Title of the sub-menu | string\|ReactNode |  |  |
+| title | Title of sub menu | string\|ReactNode |  |  |
+| icon | Icon of sub menu | ReactNode |  | 4.2.0 |
 | onTitleClick | Callback executed when the sub-menu title is clicked | function({ key, domEvent }) |  |  |
 
 ### Menu.ItemGroup

components/menu/index.zh-CN.md

@@ -53,22 +53,43 @@ subtitle: 导航菜单
 
 ### Menu.Item
 
-| 参数     | 说明                     | 类型    | 默认值 | 版本 |
+| 参数     | 说明                     | 类型      | 默认值 | 版本  |
-| -------- | ------------------------ | ------- | ------ | ---- |
+| -------- | ------------------------ | --------- | ------ | ----- |
-| disabled | 是否禁用                 | boolean | false  |      |
+| disabled | 是否禁用                 | boolean   | false  |       |
-| key      | item 的唯一标志          | string  |        |      |
+| key      | item 的唯一标志          | string    |        |       |
-| title    | 设置收缩时展示的悬浮标题 | string  |        |      |
+| title    | 设置收缩时展示的悬浮标题 | string    |        |       |
+| icon     | 菜单图标                 | ReactNode |        | 4.2.0 |
+
+> 注意：`icon` 是 `4.2.0` 新增的属性，之前的版本请使用下面的方式定义图标。
+>
+> ```jsx
+> <Menu.Item>
+>   <PieChartOutlined />
+>   <span>Option 1</span>
+> </Menu.Item>
+> <Menu.SubMenu
+>   title={
+>     <>
+>       <PieChartOutlined />
+>       <span>Option 2</span>
+>     </>
+>   }
+> >
+>   ...
+> </Menu.SubMenu>
+> ```
 
 ### Menu.SubMenu
 
-| 参数           | 说明           | 类型                        | 默认值 | 版本 |
+| 参数           | 说明           | 类型                        | 默认值 | 版本  |
-| -------------- | -------------- | --------------------------- | ------ | ---- |
+| -------------- | -------------- | --------------------------- | ------ | ----- |
-| popupClassName | 子菜单样式     | string                      |        |      |
+| popupClassName | 子菜单样式     | string                      |        |       |
-| children       | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> |        |      |
+| children       | 子菜单的菜单项 | Array&lt;MenuItem\|SubMenu> |        |       |
-| disabled       | 是否禁用       | boolean                     | false  |      |
+| disabled       | 是否禁用       | boolean                     | false  |       |
-| key            | 唯一标志       | string                      |        |      |
+| key            | 唯一标志       | string                      |        |       |
-| title          | 子菜单项值     | string\|ReactNode           |        |      |
+| title          | 子菜单项值     | string\|ReactNode           |        |       |
-| onTitleClick   | 点击子菜单标题 | function({ key, domEvent }) |        |      |
+| icon           | 菜单图标       | ReactNode                   |        | 4.2.0 |
+| onTitleClick   | 点击子菜单标题 | function({ key, domEvent }) |        |       |
 
 ### Menu.ItemGroup
 

components/menu/style/index.less

@@ -172,14 +172,14 @@
     position: relative;
     display: block;
     margin: 0;
-    padding: 0 20px;
+    padding: @menu-item-padding;
     white-space: nowrap;
     cursor: pointer;
     transition: color 0.3s @ease-in-out, border-color 0.3s @ease-in-out,
       background 0.3s @ease-in-out, padding 0.15s @ease-in-out;
     .@{iconfont-css-prefix} {
       min-width: 14px;
-      margin-right: 10px;
+      margin-right: @menu-item-icon-margin-right;
       font-size: @menu-icon-size;
       transition: font-size 0.15s @ease-out, margin 0.3s @ease-in-out;
       + span {
@@ -329,7 +329,7 @@
   }
 
   &-horizontal {
-    line-height: 46px;
+    line-height: @menu-horizontal-line-height;
     white-space: nowrap;
     border: 0;
     border-bottom: @border-width-base @border-style-base @border-color-split;

components/notification/__tests__/index.test.js

@@ -88,6 +88,16 @@ describe('notification', () => {
     notification.destroy();
   });
 
+  it('should be able to config rtl', () => {
+    notification.config({
+      rtl: true,
+    });
+    notification.open({
+      message: 'whatever',
+    });
+    expect(document.querySelectorAll('.ant-notification-rtl').length).toBe(1);
+  });
+
   it('should be able to open with icon', async () => {
     const openNotificationWithIcon = async type => {
       const iconPrefix = '.ant-notification-notice-icon';

components/notification/index.en-US.md

@@ -55,6 +55,7 @@ notification.config({
   placement: 'bottomRight',
   bottom: 50,
   duration: 3,
+  rtl: true,
 });
 ```
 
@@ -66,6 +67,7 @@ notification.config({
 | getContainer | Return the mount node for Notification | () => HTMLNode | () => document.body |
 | placement | Position of Notification, can be one of `topLeft` `topRight` `bottomLeft` `bottomRight` | string | `topRight` |
 | top | Distance from the top of the viewport, when `placement` is `topRight` or `topLeft` (unit: pixels). | number | 24 |
+| rtl | whether to enable RTL mode | boolean | `false` |
 
 ## FAQ
 

components/notification/index.tsx

@@ -2,6 +2,7 @@ import * as React from 'react';
 import Notification from 'rc-notification';
 import { NotificationInstance as RCNotificationInstance } from 'rc-notification/lib/Notification';
 import CloseOutlined from '@ant-design/icons/CloseOutlined';
+import classNames from 'classnames';
 import CheckCircleOutlined from '@ant-design/icons/CheckCircleOutlined';
 import CloseCircleOutlined from '@ant-design/icons/CloseCircleOutlined';
 import ExclamationCircleOutlined from '@ant-design/icons/ExclamationCircleOutlined';
@@ -29,8 +30,10 @@ export interface ConfigProps {
   placement?: NotificationPlacement;
   getContainer?: () => HTMLElement;
   closeIcon?: React.ReactNode;
+  rtl?: boolean;
 }
 
+let rtl = false;
 function setNotificationConfig(options: ConfigProps) {
   const { duration, placement, bottom, top, getContainer, closeIcon } = options;
   if (duration !== undefined) {
@@ -51,6 +54,9 @@ function setNotificationConfig(options: ConfigProps) {
   if (closeIcon !== undefined) {
     defaultCloseIcon = closeIcon;
   }
+  if (options.rtl !== undefined) {
+    rtl = options.rtl;
+  }
 }
 
 function getPlacementStyle(
@@ -122,11 +128,15 @@ function getNotificationInstance(
     </span>
   );
 
+  const notificationClass = classNames(`${outerPrefixCls}-${placement}`, {
+    [`${outerPrefixCls}-rtl`]: rtl === true,
+  });
+
   notificationInstance[cacheKey] = new Promise(resolve => {
     Notification.newInstance(
       {
         prefixCls: outerPrefixCls,
-        className: `${outerPrefixCls}-${placement}`,
+        className: notificationClass,
         style: getPlacementStyle(placement, top, bottom),
         getContainer,
         closeIcon: closeIconToRender,

components/notification/index.zh-CN.md

@@ -56,6 +56,7 @@ notification.config({
   placement: 'bottomRight',
   bottom: 50,
   duration: 3,
+  rtl: true,
 });
 ```
 
@@ -67,6 +68,7 @@ notification.config({
 | getContainer | 配置渲染节点的输出位置 | () => HTMLNode | () => document.body |
 | placement | 弹出位置，可选 `topLeft` `topRight` `bottomLeft` `bottomRight` | string | topRight |
 | top | 消息从顶部弹出时，距离顶部的位置，单位像素。 | number | 24 |
+| rtl | 是否开启 RTL 模式 | boolean | `false` |
 
 ## FAQ
 

components/notification/style/index.less

@@ -4,8 +4,6 @@
 
 @notification-prefix-cls: ~'@{ant-prefix}-notification';
 @notification-width: 384px;
-@notification-padding-vertical: 16px;
-@notification-padding-horizontal: 24px;
 @notification-padding: @notification-padding-vertical @notification-padding-horizontal;
 @notification-margin-bottom: 16px;
 
@@ -212,3 +210,5 @@
     opacity: 0;
   }
 }
+
+@import './rtl';

components/notification/style/rtl.less

@@ -0,0 +1,53 @@
+@import '../../style/themes/index';
+@import '../../style/mixins/index';
+
+@notification-prefix-cls: ~'@{ant-prefix}-notification';
+
+.@{notification-prefix-cls} {
+  &-rtl {
+    direction: rtl;
+  }
+
+  &-notice {
+    &-closable &-message {
+      .@{notification-prefix-cls}-rtl & {
+        padding-right: 0;
+        padding-left: 24px;
+      }
+    }
+
+    &-with-icon &-message {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+    }
+
+    &-with-icon &-description {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 48px;
+        margin-left: 0;
+      }
+    }
+
+    &-icon {
+      .@{notification-prefix-cls}-rtl & {
+        margin-right: 4px;
+        margin-left: 0;
+      }
+    }
+
+    &-close {
+      .@{notification-prefix-cls}-rtl & {
+        right: auto;
+        left: 22px;
+      }
+    }
+
+    &-btn {
+      .@{notification-prefix-cls}-rtl & {
+        float: left;
+      }
+    }
+  }
+}

components/page-header/demo/content.md

@@ -163,12 +163,21 @@ ReactDOM.render(
 }
 
 #components-page-header-demo-content .example-link {
+  line-height: 24px;
   margin-right: 16px;
 }
+[data-theme='compact'] #components-page-header-demo-content .example-link {
+  line-height: 20px;
+}
 #components-page-header-demo-content .example-link-icon {
   margin-right: 8px;
 }
 
+[data-theme='compact'] #components-page-header-demo-content .example-link-icon {
+  width: 20px;
+  height: 20px;
+}
+
 #components-page-header-demo-content .ant-page-header-rtl .example-link {
   float: right;
   margin-right: 0;

components/page-header/style/index.less

@@ -65,7 +65,7 @@
       margin-bottom: 0;
       color: @heading-color;
       font-weight: 600;
-      font-size: @heading-4-size;
+      font-size: @page-header-heading-title;
       line-height: 32px;
       .text-overflow-ellipsis;
     }
@@ -77,8 +77,8 @@
     &-sub-title {
       margin-right: @margin-sm;
       color: @text-color-secondary;
-      font-size: 14px;
+      font-size: @page-header-heading-sub-title;
-      line-height: 22px;
+      line-height: @line-height-base;
       .text-overflow-ellipsis;
     }
 
@@ -108,7 +108,7 @@
       .@{ant-prefix}-tabs-nav {
         .@{ant-prefix}-tabs-tab {
           padding: @tabs-horizontal-padding-sm;
-          font-size: 16px;
+          font-size: @page-header-tabs-tab-font-size;
         }
       }
     }

components/popover/style/index.less

@@ -88,7 +88,7 @@
     font-size: @font-size-base;
     > .@{iconfont-css-prefix} {
       position: absolute;
-      top: 8px; // 4px for padding-top, 4px for vertical middle;
+      top: 4px + (@line-height-base * @font-size-base - @font-size-base)/2; // 4px for padding-top, 4px for vertical middle;
       color: @warning-color;
       font-size: @font-size-base;
     }

components/progress/style/index.less

@@ -89,7 +89,7 @@
     width: 2em;
     margin-left: 8px;
     color: @text-color-secondary;
-    font-size: 1em;
+    font-size: @progress-text-font-size;
     line-height: 1;
     white-space: nowrap;
     text-align: left;
@@ -159,6 +159,7 @@
     margin: 0;
     padding: 0;
     color: @progress-text-color;
+    font-size: @progress-circle-text-font-size;
     line-height: 1;
     white-space: normal;
     text-align: center;

components/radio/style/index.less

@@ -29,7 +29,7 @@
 
   position: relative;
   display: inline-block;
-  margin-right: 8px;
+  margin-right: @radio-wrapper-margin-right;
   white-space: nowrap;
   cursor: pointer;
 }
@@ -38,6 +38,7 @@
   .reset-component;
 
   position: relative;
+  top: @radio-top;
   display: inline-block;
   line-height: 1;
   white-space: nowrap;

components/rate/index.tsx

@@ -1,7 +1,6 @@
 import * as React from 'react';
 import RcRate from 'rc-rate';
 import omit from 'omit.js';
-import classNames from 'classnames';
 import StarFilled from '@ant-design/icons/StarFilled';
 
 import Tooltip from '../tooltip';
@@ -35,12 +34,9 @@ const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
   };
 
   const { getPrefixCls, direction } = React.useContext(ConfigContext);
-  const { prefixCls, className, ...restProps } = props;
+  const { prefixCls, ...restProps } = props;
   const rateProps = omit(restProps, ['tooltips']);
   const ratePrefixCls = getPrefixCls('rate', prefixCls);
-  const rateClassNames = classNames(className, {
-    [`${ratePrefixCls}-rtl`]: direction === 'rtl',
-  });
 
   return (
     <RcRate
@@ -48,7 +44,7 @@ const Rate = React.forwardRef<unknown, RateProps>((props, ref) => {
       characterRender={characterRender}
       {...rateProps}
       prefixCls={ratePrefixCls}
-      className={rateClassNames}
+      direction={direction}
     />
   );
 });

components/rate/style/index.less

@@ -10,7 +10,7 @@
   margin: 0;
   padding: 0;
   color: @rate-star-color;
-  font-size: 20px;
+  font-size: @rate-star-size;
   line-height: unset;
   list-style: none;
   outline: none;
@@ -79,7 +79,7 @@
 
   &-text {
     display: inline-block;
-    margin-left: 8px;
+    margin: 0 8px;
     font-size: @font-size-base;
   }
 }

components/rate/style/rtl.less

@@ -23,11 +23,4 @@
       }
     }
   }
-
-  &-text {
-    .@{rate-prefix-cls}-rtl & {
-      margin-right: 8px;
-      margin-left: 0;
-    }
-  }
 }

components/result/style/index.less

@@ -34,26 +34,26 @@
     text-align: center;
 
     > .anticon {
-      font-size: 72px;
+      font-size: @result-icon-font-size;
     }
   }
 
   &-title {
     color: @heading-color;
-    font-size: 24px;
+    font-size: @result-title-font-size;
     line-height: 1.8;
     text-align: center;
   }
 
   &-subtitle {
     color: @text-color-secondary;
-    font-size: 14px;
+    font-size: @result-subtitle-font-size;
     line-height: 1.6;
     text-align: center;
   }
 
   &-extra {
-    margin-top: 32px;
+    margin: @result-extra-margin;
     text-align: center;
     > * {
       margin-right: 8px;

components/select/style/index.less

@@ -118,10 +118,6 @@
         vertical-align: top;
       }
 
-      .@{select-prefix-cls}-open &.anticon-down {
-        transform: rotate(180deg);
-      }
-
       &:not(.@{iconfont-css-prefix}-down) {
         pointer-events: auto;
       }