antd-mobile 0.0.0-dev-626cbf51f → 0.0.0-dev.bc248f5c7

package/es/components/slider/thumb.js

@@ -1,6 +1,8 @@
-import React, { useRef } from 'react';
+import React, { useRef, useState } from 'react';
 import { useDrag } from '@use-gesture/react';
 import { ThumbIcon } from './thumb-icon';
+import { Popover } from '../popover/popover';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-slider`;
 
 const Thumb = props => {
@@ -13,6 +15,9 @@ const Thumb = props => {
     icon
   } = props;
   const prevValue = useRef(value);
+  const {
+    locale
+  } = useConfig();
 
   const currentPosition = () => {
     return {
@@ -21,6 +26,7 @@ const Thumb = props => {
     };
   };
 
+  const [dragging, setDragging] = useState(false);
   const bind = useDrag(state => {
     var _a;
 
@@ -35,20 +41,36 @@ const Thumb = props => {
     if (!sliderOffsetWith) return;
     const diff = x / Math.ceil(sliderOffsetWith) * (max - min);
     onDrag(prevValue.current + diff, state.first, state.last);
+    setDragging(!state.last);
   }, {
     axis: 'x',
     pointer: {
       touch: true
     }
   });
-  return React.createElement("div", Object.assign({
-    className: `${classPrefix}-thumb-container`,
-    style: currentPosition()
-  }, bind()), React.createElement("div", {
+  const renderPopoverContent = typeof props.popover === 'function' ? props.popover : props.popover ? value => value.toString() : null;
+  const thumbElement = React.createElement("div", {
     className: `${classPrefix}-thumb`
   }, icon ? icon : React.createElement(ThumbIcon, {
     className: `${classPrefix}-thumb-icon`
-  })));
+  }));
+  return React.createElement("div", Object.assign({
+    className: `${classPrefix}-thumb-container`,
+    style: currentPosition()
+  }, bind(), {
+    role: 'slider',
+    "aria-label": props['aria-label'] || locale.Slider.name,
+    "aria-valuemax": max,
+    "aria-valuemin": min,
+    "aria-valuenow": value,
+    "aria-disabled": disabled
+  }), renderPopoverContent ? React.createElement(Popover, {
+    content: renderPopoverContent(value),
+    placement: 'top',
+    visible: dragging,
+    getContainer: null,
+    mode: 'dark'
+  }, thumbElement) : thumbElement);
 };
 
 export default Thumb;

package/es/components/space/space.patch.css

@@ -0,0 +1,13 @@
+.adm-space-vertical > .adm-space-item {
+  margin-bottom: 8px;
+}
+.adm-space-horizontal > .adm-space-item {
+  margin-right: 8px;
+}
+.adm-space-horizontal.adm-space-wrap {
+  flex-wrap: wrap;
+  margin-bottom: -8px;
+}
+.adm-space-horizontal.adm-space-wrap > .adm-space-item {
+  padding-bottom: 8px;
+}

package/es/components/spin-loading/spin-loading.css

@@ -1,9 +1,6 @@
 .adm-spin-loading {
   --color: var(--adm-color-weak);
   --size: 32px;
-  --pi: 3.14159265;
-  --radius: 15;
-  --circumference: calc(var(--radius) * var(--pi) * 2);
   width: var(--size);
   height: var(--size);
 }

package/es/components/spin-loading/spin-loading.js

@@ -2,6 +2,7 @@ import React, { memo } from 'react';
 import { withNativeProps } from '../../utils/native-props';
 import { mergeProps } from '../../utils/with-default-props';
 import { useSpring, animated } from '@react-spring/web';
+import { useMotionReduced } from '../../utils/reduce-and-restore-motion';
 const classPrefix = 'adm-spin-loading';
 const colorRecord = {
   default: 'var(--adm-color-weak)',
@@ -16,17 +17,19 @@ export const SpinLoading = memo(p => {
   var _a;
 
   const props = mergeProps(defaultProps, p);
+  const motionReduced = useMotionReduced();
   const {
     percent
   } = useSpring({
+    cancel: motionReduced,
     loop: {
       reverse: true
     },
     from: {
-      percent: 30
+      percent: 80
     },
     to: {
-      percent: 80
+      percent: 30
     },
     config: {
       duration: 1200

package/es/components/spin-loading/spin-loading.patch.css

@@ -0,0 +1,12 @@
+.adm-spin-loading {
+  width: 32px;
+  height: 32px;
+}
+.adm-spin-loading-svg {
+  width: 100%;
+  height: 100%;
+  animation: adm-spin-loading-rotate 0.8s infinite linear;
+}
+.adm-spin-loading-svg > .adm-spin-loading-fill {
+  stroke: #999999;
+}

package/es/components/stepper/stepper.css

@@ -3,14 +3,14 @@
   --input-width: 44px;
   --input-font-size: var(--adm-font-size-main);
   --input-font-color: var(--adm-color-text);
-  --input-background-color: #f5f5f5;
+  --input-background-color: var(--adm-color-box);
   --border-radius: 2px;
   --border: none;
   --border-inner: solid 2px transparent;
   --active-border: var(--border);
-  --button-font-size: 15px;
+  --button-font-size: var(--adm-font-size-7);
   --button-text-color: var(--adm-color-primary);
-  --button-background-color: #f5f5f5;
+  --button-background-color: var(--adm-color-box);
   --button-width: var(--height);
   display: flex;
   align-items: center;

package/es/components/stepper/stepper.js

@@ -8,6 +8,7 @@ import { bound } from '../../utils/bound';
 import Input from '../input';
 import Button from '../button';
 import Big from 'big.js';
+import { useConfig } from '../config-provider';
 const classPrefix = `adm-stepper`;
 const defaultProps = {
   defaultValue: 0,
@@ -24,6 +25,9 @@ export const Stepper = p => {
     min,
     inputReadOnly
   } = props;
+  const {
+    locale
+  } = useConfig();
   const [value, setValue] = usePropsValue(props);
   const [inputValue, setInputValue] = useState(() => convertValueToText(value, props.digits));
 
@@ -105,7 +109,8 @@ export const Stepper = p => {
     disabled: minusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.decrease
   }, React.createElement(MinusOutline, null)), React.createElement("div", {
     className: `${classPrefix}-middle`
   }, React.createElement(Input, {
@@ -127,14 +132,19 @@ export const Stepper = p => {
       setHasFocus(false);
       (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    readOnly: inputReadOnly
+    readOnly: inputReadOnly,
+    role: 'spinbutton',
+    "aria-valuenow": Number(inputValue),
+    "aria-valuemax": max,
+    "aria-valuemin": min
   })), React.createElement(Button, {
     className: `${classPrefix}-plus`,
     onClick: handlePlus,
     disabled: plusDisabled(),
     fill: 'none',
     shape: 'rectangular',
-    color: 'primary'
+    color: 'primary',
+    "aria-label": locale.Stepper.increase
   }, React.createElement(AddOutline, null))));
 };
 

package/es/components/steps/steps.css

@@ -14,7 +14,7 @@
 .adm-step .adm-step-indicator .adm-step-icon-container {
   position: absolute;
   z-index: 1;
-  background: var(--adm-color-white);
+  background: var(--adm-color-background);
   color: var(--icon-color);
 }
 .adm-step .adm-step-indicator .adm-step-icon-container > .antd-mobile-icon {
@@ -48,8 +48,8 @@
   color: var(--adm-color-danger);
 }
 .adm-steps {
-  --title-font-size: 13px;
-  --description-font-size: 12px;
+  --title-font-size: var(--adm-font-size-main);
+  --description-font-size: var(--adm-font-size-4);
   --indicator-margin-right: 0;
   --icon-size: 18px;
   width: 100%;

package/es/components/swipe-action/swipe-action.css

@@ -1,6 +1,7 @@
 .adm-swipe-action {
-  --background: #ffffff;
+  --background: var(--adm-color-background);
   background: var(--background);
+  cursor: -webkit-grab;
   cursor: grab;
   overflow: hidden;
   touch-action: pan-y;

package/es/components/swipe-action/swipe-action.d.ts

@@ -20,6 +20,7 @@ export declare type SwipeActionProps = {
     closeOnAction?: boolean;
     children: ReactNode;
     stopPropagation?: PropagationEvent[];
+    onActionsReveal?: (side: 'left' | 'right') => void;
 } & NativeProps<'--background'>;
 export declare const SwipeAction: React.ForwardRefExoticComponent<{
     rightActions?: Action[] | undefined;
@@ -29,5 +30,10 @@ export declare const SwipeAction: React.ForwardRefExoticComponent<{
     closeOnAction?: boolean | undefined;
     children: ReactNode;
     stopPropagation?: "click"[] | undefined;
-} & NativeProps<"--background"> & React.RefAttributes<SwipeActionRef>>;
+    onActionsReveal?: ((side: 'left' | 'right') => void) | undefined;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--background", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwipeActionRef>>;
 export {};

package/es/components/swipe-action/swipe-action.js

@@ -6,6 +6,7 @@ import Button from '../button';
 import { nearest } from '../../utils/nearest';
 import { withNativeProps } from '../../utils/native-props';
 import { withStopPropagation } from '../../utils/with-stop-propagation';
+const classPrefix = `adm-swipe-action`;
 const defaultProps = {
   rightActions: [],
   leftActions: [],
@@ -44,6 +45,8 @@ export const SwipeAction = forwardRef((p, ref) => {
   }), []);
   const draggingRef = useRef(false);
   const bind = useDrag(state => {
+    var _a;
+
     draggingRef.current = true;
     const [offsetX] = state.offset;
 
@@ -60,9 +63,15 @@ export const SwipeAction = forwardRef((p, ref) => {
         position = 0;
       }
 
+      const targetX = nearest([-rightWidth, 0, leftWidth], position);
       api.start({
-        x: nearest([-rightWidth, 0, leftWidth], position)
+        x: targetX
       });
+
+      if (targetX !== 0) {
+        (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, targetX > 0 ? 'left' : 'right');
+      }
+
       window.setTimeout(() => {
         draggingRef.current = false;
       });
@@ -98,6 +107,8 @@ export const SwipeAction = forwardRef((p, ref) => {
 
   useImperativeHandle(ref, () => ({
     show: (side = 'right') => {
+      var _a;
+
       if (side === 'right') {
         api.start({
           x: -getRightWidth()
@@ -107,6 +118,8 @@ export const SwipeAction = forwardRef((p, ref) => {
           x: getLeftWidth()
         });
       }
+
+      (_a = p.onActionsReveal) === null || _a === void 0 ? void 0 : _a.call(p, side);
     },
     close
   }));
@@ -137,7 +150,7 @@ export const SwipeAction = forwardRef((p, ref) => {
     const color = (_a = action.color) !== null && _a !== void 0 ? _a : 'light';
     return React.createElement(Button, {
       key: action.key,
-      className: 'adm-swipe-action-action-button',
+      className: `${classPrefix}-action-button`,
       style: {
         '--background-color': (_b = colorRecord[color]) !== null && _b !== void 0 ? _b : color
       },
@@ -155,7 +168,7 @@ export const SwipeAction = forwardRef((p, ref) => {
   }
 
   return withNativeProps(props, React.createElement("div", Object.assign({
-    className: 'adm-swipe-action'
+    className: classPrefix
   }, bind(), {
     ref: rootRef,
     onClickCapture: e => {
@@ -165,15 +178,15 @@ export const SwipeAction = forwardRef((p, ref) => {
       }
     }
   }), React.createElement(animated.div, {
-    className: 'adm-swipe-action-track',
+    className: `${classPrefix}-track`,
     style: {
       x
     }
   }, withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-left',
+    className: `${classPrefix}-actions ${classPrefix}-actions-left`,
     ref: leftRef
   }, props.leftActions.map(renderAction))), React.createElement("div", {
-    className: 'adm-swipe-action-content',
+    className: `${classPrefix}-content`,
     onClickCapture: e => {
       if (x.goal !== 0) {
         e.preventDefault();
@@ -188,7 +201,7 @@ export const SwipeAction = forwardRef((p, ref) => {
       pointerEvents: x.to(v => v !== 0 && x.goal !== 0 ? 'none' : 'auto')
     }
   }, props.children)), withStopPropagation(props.stopPropagation, React.createElement("div", {
-    className: 'adm-swipe-action-actions adm-swipe-action-actions-right',
+    className: `${classPrefix}-actions ${classPrefix}-actions-right`,
     ref: rightRef
   }, props.rightActions.map(renderAction))))));
 });

package/es/components/swiper/index.d.ts

@@ -16,10 +16,18 @@ declare const _default: import("react").ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>> | import("react").ReactElement<any, string | import("react").JSXElementConstructor<any>>[] | undefined;
-} & import("../../utils/native-props").NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
+} & {
+    className?: string | undefined;
+    style?: (import("react").CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & import("react").AriaAttributes & import("react").RefAttributes<import("./swiper").SwiperRef>> & {
     Item: import("react").FC<{
         onClick?: ((e: import("react").MouseEvent<HTMLDivElement, MouseEvent>) => void) | undefined;
         children?: import("react").ReactNode;
-    } & import("../../utils/native-props").NativeProps<never>>;
+    } & {
+        className?: string | undefined;
+        style?: (import("react").CSSProperties & Partial<Record<never, string>>) | undefined;
+        tabIndex?: number | undefined;
+    } & import("react").AriaAttributes>;
 };
 export default _default;

package/es/components/swiper/swiper.css

@@ -20,6 +20,7 @@
   padding: var(--track-padding);
 }
 .adm-swiper-track-allow-touch-move {
+  cursor: -webkit-grab;
   cursor: grab;
 }
 .adm-swiper-track-inner {

package/es/components/swiper/swiper.d.ts

@@ -37,4 +37,8 @@ export declare const Swiper: React.ForwardRefExoticComponent<{
     stuckAtBoundary?: boolean | undefined;
     rubberband?: boolean | undefined;
     children?: React.ReactElement<any, string | React.JSXElementConstructor<any>> | React.ReactElement<any, string | React.JSXElementConstructor<any>>[] | undefined;
-} & NativeProps<"--border-radius" | "--width" | "--height" | "--track-padding"> & React.RefAttributes<SwiperRef>>;
+} & {
+    className?: string | undefined;
+    style?: (React.CSSProperties & Partial<Record<"--width" | "--height" | "--border-radius" | "--track-padding", string>>) | undefined;
+    tabIndex?: number | undefined;
+} & React.AriaAttributes & React.RefAttributes<SwiperRef>>;

package/es/components/swiper/swiper.js

@@ -11,6 +11,7 @@ import { staged } from 'staged-components';
 import { useRefState } from '../../utils/use-ref-state';
 import { bound } from '../../utils/bound';
 import { useIsomorphicLayoutEffect, useUpdateEffect } from 'ahooks';
+const classPrefix = `adm-swiper`;
 const defaultProps = {
   defaultIndex: 0,
   allowTouchMove: true,
@@ -112,7 +113,14 @@ export const Swiper = forwardRef(staged((p, ref) => {
         });
       }
     }), [count]);
+    const forceDragCancelRef = useRef(() => {});
     const bind = useDrag(state => {
+      forceDragCancelRef.current = () => {
+        state.cancel();
+        setDragging(false);
+      };
+
+      if (!state.intentional) return;
       const slidePixels = getSlidePixels();
       if (!slidePixels) return;
       const paramIndex = isVertical ? 1 : 0;
@@ -141,6 +149,7 @@ export const Swiper = forwardRef(staged((p, ref) => {
         const slidePixels = getSlidePixels();
         return [position.get() / 100 * slidePixels, position.get() / 100 * slidePixels];
       },
+      triggerAllEvents: true,
       bounds: () => {
         if (loop) return {};
         const slidePixels = getSlidePixels();
@@ -209,10 +218,10 @@ export const Swiper = forwardRef(staged((p, ref) => {
     function renderTrackInner() {
       if (loop) {
         return React.createElement("div", {
-          className: 'adm-swiper-track-inner'
+          className: `${classPrefix}-track-inner`
         }, React.Children.map(validChildren, (child, index) => {
           return React.createElement(animated.div, {
-            className: 'adm-swiper-slide',
+            className: `${classPrefix}-slide`,
             style: {
               [isVertical ? 'y' : 'x']: position.to(position => {
                 let finalPosition = -position + index * 100;
@@ -227,13 +236,13 @@ export const Swiper = forwardRef(staged((p, ref) => {
         }));
       } else {
         return React.createElement(animated.div, {
-          className: 'adm-swiper-track-inner',
+          className: `${classPrefix}-track-inner`,
           style: {
             [isVertical ? 'y' : 'x']: position.to(position => `${-position}%`)
           }
         }, React.Children.map(validChildren, child => {
           return React.createElement("div", {
-            className: 'adm-swiper-slide'
+            className: `${classPrefix}-slide`
           }, child);
         }));
       }
@@ -244,20 +253,22 @@ export const Swiper = forwardRef(staged((p, ref) => {
       '--track-offset': `${props.trackOffset}%`
     };
     return withNativeProps(props, React.createElement("div", {
-      className: classNames('adm-swiper', `adm-swiper-${props.direction}`),
+      className: classNames(classPrefix, `${classPrefix}-${props.direction}`),
       style: style
     }, React.createElement("div", Object.assign({
       ref: trackRef,
-      className: classNames('adm-swiper-track', {
-        'adm-swiper-track-allow-touch-move': props.allowTouchMove
+      className: classNames(`${classPrefix}-track`, {
+        [`${classPrefix}-track-allow-touch-move`]: props.allowTouchMove
       }),
       onClickCapture: e => {
         if (draggingRef.current) {
           e.stopPropagation();
         }
+
+        forceDragCancelRef.current();
       }
     }, props.allowTouchMove ? bind() : {}), renderTrackInner()), props.indicator === undefined ? React.createElement("div", {
-      className: 'adm-swiper-indicator'
+      className: `${classPrefix}-indicator`
     }, React.createElement(PageIndicator, Object.assign({}, props.indicatorProps, {
       total: count,
       current: current,

package/es/components/swiper/swiper.patch.css

@@ -0,0 +1,21 @@
+.adm-swiper {
+  display: block;
+  width: 100%;
+  height: auto;
+  border-radius: 0;
+}
+.adm-swiper-track {
+  padding: 0;
+}
+.adm-swiper-horizontal .adm-swiper-track {
+  transform: translateX(0%);
+}
+.adm-swiper-horizontal .adm-swiper-track-inner {
+  width: 100%;
+}
+.adm-swiper-vertical .adm-swiper-track {
+  transform: translateY(0%);
+}
+.adm-swiper-vertical .adm-swiper-track-inner {
+  height: 100%;
+}

package/es/components/switch/switch.css

@@ -26,7 +26,7 @@
   height: var(--height);
   box-sizing: border-box;
   border-radius: 31px;
-  background: #e5e5e5;
+  background: var(--adm-color-border);
   z-index: 0;
   overflow: hidden;
   line-height: var(--height);
@@ -40,7 +40,7 @@
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
   box-sizing: border-box;
-  background: #fff;
+  background: var(--adm-color-background);
   z-index: 1;
   transition: all 200ms;
   transform: scale(1);
@@ -52,7 +52,7 @@
   width: calc(var(--height) - 2 * var(--border-width));
   height: calc(var(--height) - 2 * var(--border-width));
   border-radius: calc(var(--height) - 2 * var(--border-width));
-  background: #fff;
+  background: var(--adm-color-white);
   position: absolute;
   z-index: 2;
   top: var(--border-width);
@@ -70,7 +70,7 @@
   height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
-  font-size: 15px;
+  font-size: var(--adm-font-size-7);
 }
 .adm-switch.adm-switch-checked .adm-switch-checkbox {
   background: var(--checked-color);

package/es/components/switch/switch.d.ts

@@ -5,8 +5,9 @@ export declare type SwitchProps = {
     disabled?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;
+    /** @deprecated use `onChange` instead */
     beforeChange?: (val: boolean) => Promise<void>;
-    onChange?: (checked: boolean) => void;
+    onChange?: (checked: boolean) => void | Promise<void>;
     checkedText?: ReactNode;
     uncheckedText?: ReactNode;
 } & NativeProps<'--checked-color' | '--width' | '--height' | '--border-width'>;

package/es/components/switch/switch.js

@@ -5,6 +5,8 @@ import { withNativeProps } from '../../utils/native-props';
 import { usePropsValue } from '../../utils/use-props-value';
 import { mergeProps } from '../../utils/with-default-props';
 import { SpinIcon } from './spin-icon';
+import { useConfig } from '../config-provider';
+import { isPromise } from '../../utils/validate';
 const classPrefix = `adm-switch`;
 const defaultProps = {
   defaultChecked: false
@@ -13,6 +15,9 @@ export const Switch = p => {
   const props = mergeProps(defaultProps, p);
   const disabled = props.disabled || props.loading || false;
   const [changing, setChanging] = useState(false);
+  const {
+    locale
+  } = useConfig();
   const [checked, setChecked] = usePropsValue({
     value: props.checked,
     defaultValue: props.defaultChecked,
@@ -32,14 +37,25 @@ export const Switch = p => {
 
         try {
           yield props.beforeChange(nextChecked);
-          setChecked(nextChecked);
           setChanging(false);
         } catch (e) {
           setChanging(false);
           throw e;
         }
-      } else {
-        setChecked(nextChecked);
+      }
+
+      const result = setChecked(nextChecked);
+
+      if (isPromise(result)) {
+        setChanging(true);
+
+        try {
+          yield result;
+          setChanging(false);
+        } catch (e) {
+          setChanging(false);
+          throw e;
+        }
       }
     });
   }
@@ -49,7 +65,11 @@ export const Switch = p => {
     className: classNames(classPrefix, {
       [`${classPrefix}-checked`]: checked,
       [`${classPrefix}-disabled`]: disabled || changing
-    })
+    }),
+    role: 'switch',
+    "aria-label": locale.Switch.name,
+    "aria-checked": checked,
+    "aria-disabled": disabled
   }, React.createElement("div", {
     className: `${classPrefix}-checkbox`
   }, React.createElement("div", {

package/es/components/tab-bar/tab-bar.css

@@ -4,13 +4,14 @@
   justify-content: flex-start;
   align-items: stretch;
   overflow: hidden;
-  min-height: 50px;
+  min-height: 48px;
 }
 .adm-tab-bar-item {
   flex: 1;
   color: var(--adm-color-weak);
   white-space: nowrap;
   padding: 4px 8px;
+  width: -webkit-min-content;
   width: min-content;
   position: relative;
   cursor: pointer;
@@ -20,15 +21,17 @@
   flex-direction: column;
 }
 .adm-tab-bar-item-icon {
-  font-size: 20px;
-  height: 22px;
+  font-size: 24px;
+  height: 24px;
   line-height: 1;
-  margin: 4px 0 1px;
 }
 .adm-tab-bar-item-title {
-  font-size: 11px;
+  font-size: var(--adm-font-size-3);
   line-height: 15px;
 }
+.adm-tab-bar-item-title-with-icon {
+  margin-top: 2px;
+}
 .adm-tab-bar-item-active {
   color: var(--adm-color-primary);
 }

package/es/components/tab-bar/tab-bar.js

@@ -6,6 +6,8 @@ import Badge from '../badge';
 import SafeArea from '../safe-area';
 import { usePropsValue } from '../../utils/use-props-value';
 import { traverseReactNode } from '../../utils/traverse-react-node';
+/* istanbul ignore next */
+
 export const TabBarItem = () => {
   return null;
 };
@@ -52,7 +54,7 @@ export const TabBar = p => {
         className: `${classPrefix}-item-icon`
       }, typeof item.props.icon === 'function' ? item.props.icon(active) : item.props.icon);
       const titleElement = item.props.title && React.createElement("div", {
-        className: `${classPrefix}-item-title`
+        className: classNames(`${classPrefix}-item-title`, Boolean(iconElement) && `${classPrefix}-item-title-with-icon`)
       }, typeof item.props.title === 'function' ? item.props.title(active) : item.props.title);
 
       if (iconElement) {