antd-mobile 5.0.0-rc.22 → 5.0.0-rc.26

package/2x/cjs/components/popover/popover.d.ts

@@ -2,28 +2,29 @@ import React, { ReactElement } from 'react';
 import type { TooltipProps } from 'rc-tooltip/lib/Tooltip';
 import { NativeProps } from '../../utils/native-props';
 import { PropagationEvent } from '../../utils/with-stop-propagation';
-export declare type BasePopoverProps = {
-    getContainer?: () => HTMLElement;
+import { GetContainer } from '../../utils/render-to-container';
+export declare type PopoverProps = {
+    getContainer?: GetContainer;
     destroyOnHide?: boolean;
     children: ReactElement;
     mode?: 'light' | 'dark';
     trigger?: 'click';
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
     stopPropagation?: PropagationEvent[];
-} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'overlayStyle' | 'overlayClassName' | 'align' | 'zIndex'> & NativeProps<'--z-index'>;
+    content: React.ReactNode;
+} & Pick<TooltipProps, 'defaultVisible' | 'visible' | 'onVisibleChange' | 'align'> & NativeProps<'--z-index'>;
 export declare type PopoverRef = {
     show: () => void;
     hide: () => void;
     visible: boolean;
 };
 export declare const Popover: React.ForwardRefExoticComponent<{
-    getContainer?: (() => HTMLElement) | undefined;
+    getContainer?: HTMLElement | (() => HTMLElement) | null | undefined;
     destroyOnHide?: boolean | undefined;
     children: ReactElement;
     mode?: "dark" | "light" | undefined;
     trigger?: "click" | undefined;
-    placement: 'top' | 'left' | 'right' | 'bottom' | 'topLeft' | 'topRight' | 'bottomLeft' | 'bottomRight' | 'leftTop' | 'leftBottom' | 'rightTop' | 'rightBottom';
+    placement?: "left" | "right" | "bottom" | "top" | "topLeft" | "topRight" | "bottomLeft" | "bottomRight" | "leftTop" | "leftBottom" | "rightTop" | "rightBottom" | undefined;
     stopPropagation?: "click"[] | undefined;
-} & Pick<TooltipProps, "visible" | "zIndex" | "align" | "defaultVisible" | "onVisibleChange" | "overlayStyle" | "overlayClassName"> & NativeProps<"--z-index"> & {
     content: React.ReactNode;
-} & React.RefAttributes<PopoverRef>>;
+} & Pick<TooltipProps, "visible" | "align" | "defaultVisible" | "onVisibleChange"> & NativeProps<"--z-index"> & React.RefAttributes<PopoverRef>>;

package/2x/cjs/components/popover/popover.js

@@ -17,6 +17,8 @@ var _withDefaultProps = require("../../utils/with-default-props");
 
 var _withStopPropagation = require("../../utils/with-stop-propagation");
 
+var _arrow = require("./arrow");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -24,11 +26,11 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
 const classPrefix = `adm-popover`;
-const enterClassName = 'entering';
-const leaveClassName = 'leaving';
 const defaultProps = {
+  placement: 'top',
   defaultVisible: false,
-  stopPropagation: ['click']
+  stopPropagation: ['click'],
+  getContainer: () => document.body
 };
 const Popover = (0, _react.forwardRef)((p, ref) => {
   var _a;
@@ -53,27 +55,19 @@ const Popover = (0, _react.forwardRef)((p, ref) => {
     className: `${classPrefix}-inner-content`
   }, props.content));
   return _react.default.createElement(_rcTooltip.default, Object.assign({}, props, {
-    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.overlayClassName),
+    placement: props.placement,
+    align: props.align,
+    overlayClassName: (0, _classnames.default)(`${classPrefix}-${mode}`, props.className),
+    overlayStyle: props.style,
     destroyTooltipOnHide: props.destroyOnHide,
     prefixCls: classPrefix,
     getTooltipContainer: props.getContainer || (() => document.body),
     visible: visible,
-    arrowContent: _react.default.createElement("span", {
-      className: `${classPrefix}-arrow-content`
+    arrowContent: _react.default.createElement(_arrow.Arrow, {
+      className: `${classPrefix}-arrow-icon`
     }),
     onVisibleChange: setVisible,
     trigger: (_a = props.trigger) !== null && _a !== void 0 ? _a : [],
-    motion: {
-      motionName: {
-        appear: enterClassName,
-        appearActive: enterClassName,
-        enter: enterClassName,
-        enterActive: enterClassName,
-        leaveActive: leaveClassName,
-        leave: leaveClassName
-      },
-      motionDeadline: 200
-    },
     overlay: overlay
   }), props.children);
 });

package/2x/cjs/components/radio/radio.css

@@ -18,18 +18,15 @@
   border: 2px solid var(--adm-color-light);
   border-radius: var(--icon-size);
   box-sizing: border-box;
-  display: flex;
-  justify-content: center;
-  align-items: center;
   width: var(--icon-size);
   height: var(--icon-size);
-  color: #ffffff;
+  color: var(--adm-color-white);
 }
 
-.adm-radio .adm-radio-icon-checked {
+.adm-radio .adm-radio-icon > svg {
   display: block;
-  width: 65%;
-  height: 65%;
+  width: 100%;
+  height: 100%;
 }
 
 .adm-radio.adm-radio-block {

package/2x/cjs/components/radio/radio.js

@@ -70,9 +70,7 @@ const Radio = p => {
 
     return _react.default.createElement("div", {
       className: `${classPrefix}-icon`
-    }, checked && _react.default.createElement(_checkIcon.CheckIcon, {
-      className: `${classPrefix}-icon-checked`
-    }));
+    }, checked && _react.default.createElement(_checkIcon.CheckIcon, null));
   };
 
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("label", {

package/2x/cjs/components/search-bar/search-bar.css

@@ -57,7 +57,7 @@
   padding: 6px 24px;
 }
 
-.adm-search-bar-active .adm-input.adm-input {
+.adm-search-bar-active .adm-input.adm-input.adm-input {
   --placeholder-color: var(--adm-color-light);
 }
 

package/2x/cjs/components/selector/selector.css

@@ -1,6 +1,12 @@
 .adm-selector {
-  --color: var(--adm-color-text);
+  --color: #f5f5f5;
   --checked-color: #e7f1ff;
+  --text-color: var(--adm-color-text);
+  --checked-text-color: var(--adm-color-primary);
+  --border: none;
+  --checked-border: none;
+  --border-radius: 4px;
+  --padding: 16px 32px;
   overflow: hidden;
   font-size: 30px;
   line-height: 1.4;
@@ -11,11 +17,12 @@
 }
 
 .adm-selector-item {
-  padding: 16px 32px;
+  padding: var(--padding);
   position: relative;
-  background-color: #f5f5f5;
-  border-radius: 4px;
-  color: #333;
+  background-color: var(--color);
+  border: var(--border);
+  border-radius: var(--border-radius);
+  color: var(--text-color);
   opacity: 1;
   cursor: pointer;
   display: inline-block;
@@ -31,8 +38,9 @@
 
 .adm-selector-item-active,
 .adm-selector-item-multiple-active {
-  color: var(--adm-color-primary);
+  color: var(--checked-text-color);
   background-color: var(--checked-color);
+  border: var(--checked-border);
 }
 
 .adm-selector-item .adm-selector-check-mark-wrapper {

package/2x/cjs/components/selector/selector.d.ts

@@ -16,5 +16,6 @@ export declare type SelectorProps<V> = {
     onChange?: (v: V[], extend: {
         items: SelectorOption<V>[];
     }) => void;
-} & NativeProps<'--checked-color'>;
+    showCheckMark?: boolean;
+} & NativeProps<'--color' | '--checked-color' | '--text-color' | '--checked-text-color' | '--border' | '--checked-border' | '--border-radius' | '--padding'>;
 export declare const Selector: <V extends string | number>(p: SelectorProps<V>) => React.ReactElement<any, string | ((props: any) => React.ReactElement<any, any> | null) | (new (props: any) => React.Component<any, any, any>)>;

package/2x/cjs/components/selector/selector.js

@@ -28,7 +28,8 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 const classPrefix = `adm-selector`;
 const defaultProps = {
   multiple: false,
-  defaultValue: []
+  defaultValue: [],
+  showCheckMark: true
 };
 
 const Selector = p => {
@@ -74,7 +75,7 @@ const Selector = p => {
       }
     }, option.label, option.description && _react.default.createElement("div", {
       className: `${classPrefix}-item-description`
-    }, option.description), active && _react.default.createElement("div", {
+    }, option.description), active && props.showCheckMark && _react.default.createElement("div", {
       className: `${classPrefix}-check-mark-wrapper`
     }, _react.default.createElement(_checkMark.CheckMark, null)));
   });

package/2x/cjs/components/swiper/swiper.js

@@ -212,7 +212,7 @@ const Swiper = (0, _react.forwardRef)((0, _stagedComponents.staged)((p, ref) =>
       swipeNext,
       swipePrev
     }));
-    (0, _react.useLayoutEffect)(() => {
+    (0, _ahooks.useIsomorphicLayoutEffect)(() => {
       const maxIndex = validChildren.length - 1;
 
       if (current > maxIndex) {

package/2x/cjs/components/switch/switch.css

@@ -6,8 +6,8 @@
 
 .adm-switch {
   --checked-color: var(--adm-color-primary);
-  --height: 60px;
-  --width: 100px;
+  --height: 62px;
+  --width: 102px;
   --border-width: 4px;
   display: inline-block;
   vertical-align: middle;
@@ -69,9 +69,14 @@
 .adm-switch-inner {
   position: relative;
   z-index: 1;
-  margin: 0 20px 0 calc(var(--height) - var(--border-width) + 10px);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0 16px 0 calc(var(--height) - var(--border-width) + 8px);
+  height: 100%;
   color: var(--adm-color-weak);
   transition: margin 200ms;
+  font-size: 30px;
 }
 
 .adm-switch.adm-switch-checked .adm-switch-checkbox {

package/2x/cjs/components/tabs/tabs.js

@@ -163,7 +163,7 @@ const Tabs = p => {
     });
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(true);
   }, []);
   (0, _ahooks.useUpdateLayoutEffect)(() => {
@@ -197,7 +197,7 @@ const Tabs = p => {
     trailing: true,
     leading: true
   });
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     updateMask(true);
   }, []);
   return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {

package/2x/cjs/components/text-area/text-area.css

@@ -1,4 +1,4 @@
-.adm-text-area-wrapper {
+.adm-text-area {
   --font-size: 34px;
   --color: var(--adm-color-text);
   --placeholder-color: var(--adm-color-light);
@@ -8,7 +8,7 @@
   max-height: 100%;
 }
 
-.adm-text-area {
+.adm-text-area-element {
   font-family: var(--adm-font-family);
   resize: none;
   flex: auto;
@@ -29,35 +29,35 @@
   min-height: 1.5em;
 }
 
-.adm-text-area::placeholder {
+.adm-text-area-element::placeholder {
   color: var(--placeholder-color);
   font-family: inherit;
 }
 
-.adm-text-area:-webkit-autofill {
+.adm-text-area-element:-webkit-autofill {
   background-color: transparent;
 }
 
-.adm-text-area:disabled {
+.adm-text-area-element:disabled {
   color: var(--disabled-color);
   cursor: not-allowed;
   opacity: 1;
   -webkit-text-fill-color: var(--disabled-color);
 }
 
-.adm-text-area:read-only {
+.adm-text-area-element:read-only {
   cursor: default;
 }
 
-.adm-text-area:invalid {
+.adm-text-area-element:invalid {
   box-shadow: none;
 }
 
-.adm-text-area::-ms-clear {
+.adm-text-area-element::-ms-clear {
   display: none;
 }
 
-.adm-text-area[readonly] {
+.adm-text-area-element[readonly] {
   pointer-events: none;
 }
 

package/2x/cjs/components/text-area/text-area.d.ts

@@ -1,7 +1,7 @@
 import React from 'react';
 import type { ReactNode } from 'react';
 import { NativeProps } from '../../utils/native-props';
-export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur'> & {
+export declare type TextAreaProps = Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, 'autoComplete' | 'disabled' | 'readOnly' | 'onFocus' | 'onBlur' | 'onCompositionStart' | 'onCompositionEnd'> & {
     onChange?: (val: string) => void;
     value?: string;
     defaultValue?: string;
@@ -20,7 +20,7 @@ export declare type TextAreaRef = {
     focus: () => void;
     blur: () => void;
 };
-export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
+export declare const TextArea: React.ForwardRefExoticComponent<Pick<React.DetailedHTMLProps<React.TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, "disabled" | "onCompositionEnd" | "onCompositionStart" | "onFocus" | "onBlur" | "autoComplete" | "readOnly"> & {
     onChange?: ((val: string) => void) | undefined;
     value?: string | undefined;
     defaultValue?: string | undefined;

package/2x/cjs/components/text-area/text-area.js

@@ -5,18 +5,14 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.TextArea = void 0;
 
-var _tslib = require("tslib");
-
 var _react = _interopRequireWildcard(require("react"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _nativeProps = require("../../utils/native-props");
 
 var _usePropsValue = require("../../utils/use-props-value");
 
 var _withDefaultProps = require("../../utils/with-default-props");
 
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
@@ -31,16 +27,10 @@ const defaultProps = {
 const TextArea = (0, _react.forwardRef)((p, ref) => {
   const props = (0, _withDefaultProps.mergeProps)(defaultProps, p);
   const {
-    className,
-    style,
-    defaultValue: outerDefaultValue,
-    value: outerValue,
-    onChange: outerOnChange,
-    rows: rows,
-    autoSize: autoSize,
-    showCount
-  } = props,
-        textAreaProps = (0, _tslib.__rest)(props, ["className", "style", "defaultValue", "value", "onChange", "rows", "autoSize", "showCount"]);
+    autoSize,
+    showCount,
+    maxLength
+  } = props;
   const [value, setValue] = (0, _usePropsValue.usePropsValue)(props);
   const nativeTextAreaRef = (0, _react.useRef)(null);
   (0, _react.useImperativeHandle)(ref, () => ({
@@ -80,40 +70,59 @@ const TextArea = (0, _react.forwardRef)((p, ref) => {
 
     textArea.style.height = `${height}px`;
   }, [value, autoSize]);
+  const compositingRef = (0, _react.useRef)(false);
   let count;
+  const valueLength = [...value].length;
 
   if (typeof showCount === 'function') {
-    count = showCount(value.length, props.maxLength);
+    count = showCount(valueLength, maxLength);
   } else if (showCount) {
     count = _react.default.createElement("div", {
       className: `${classPrefix}-count`
-    }, props.maxLength === undefined ? value.length : value.length + '/' + props.maxLength);
+    }, maxLength === undefined ? valueLength : valueLength + '/' + maxLength);
   }
 
-  return _react.default.createElement("div", {
-    className: (0, _classnames.default)(`${classPrefix}-wrapper`, className),
-    style: style
-  }, _react.default.createElement("textarea", Object.assign({
-    ref: nativeTextAreaRef
-  }, textAreaProps, {
-    className: classPrefix,
-    rows: rows,
+  return (0, _nativeProps.withNativeProps)(props, _react.default.createElement("div", {
+    className: classPrefix
+  }, _react.default.createElement("textarea", {
+    ref: nativeTextAreaRef,
+    className: `${classPrefix}-element`,
+    rows: props.rows,
     value: value,
+    placeholder: props.placeholder,
     onChange: e => {
-      setValue(e.target.value);
+      let v = e.target.value;
+
+      if (maxLength && !compositingRef.current) {
+        v = [...v].slice(0, maxLength).join('');
+      }
+
+      setValue(v);
     },
-    onFocus: e => {
+    id: props.id,
+    onCompositionStart: e => {
       var _a;
 
-      (_a = props.onFocus) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = true;
+      (_a = props.onCompositionStart) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    onBlur: e => {
+    onCompositionEnd: e => {
       var _a;
 
-      (_a = props.onBlur) === null || _a === void 0 ? void 0 : _a.call(props, e);
+      compositingRef.current = false;
+
+      if (maxLength) {
+        setValue([...value].slice(0, maxLength).join(''));
+      }
+
+      (_a = props.onCompositionEnd) === null || _a === void 0 ? void 0 : _a.call(props, e);
     },
-    id: props.id
-  })), count);
+    autoComplete: props.autoComplete,
+    disabled: props.disabled,
+    readOnly: props.readOnly,
+    onFocus: props.onFocus,
+    onBlur: props.onBlur
+  }), count));
 });
 exports.TextArea = TextArea;
 TextArea.defaultProps = defaultProps;

package/2x/cjs/components/virtual-input/virtual-input.js

@@ -17,6 +17,8 @@ var _classnames = _interopRequireDefault(require("classnames"));
 
 var _antdMobileIcons = require("antd-mobile-icons");
 
+var _ahooks = require("ahooks");
+
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
@@ -47,7 +49,7 @@ const VirtualInput = (0, _react.forwardRef)((p, ref) => {
     content.scrollLeft = content.clientWidth;
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     scrollToEnd();
   }, [value]);
   (0, _react.useEffect)(() => {

package/2x/cjs/utils/get-scroll-parent.js

@@ -12,7 +12,7 @@ const defaultRoot = _canUseDom.canUseDom ? window : undefined;
 
 function isElement(node) {
   const ELEMENT_NODE_TYPE = 1;
-  return node.tagName !== 'HTML' && node.tagName !== 'BODY' && node.nodeType === ELEMENT_NODE_TYPE;
+  return node.nodeType === ELEMENT_NODE_TYPE;
 } // https://github.com/youzan/vant/issues/3823
 
 

package/2x/cjs/utils/use-ref-state.js

@@ -10,7 +10,7 @@ var _react = require("react");
 function useRefState(initialState) {
   const [state, setState] = (0, _react.useState)(initialState);
   const ref = (0, _react.useRef)(state);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _react.useEffect)(() => {
     ref.current = state;
   }, [state]);
   return [state, setState, ref];

package/2x/cjs/utils/use-resize-effect.js

@@ -5,13 +5,11 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useResizeEffect = useResizeEffect;
 
-var _react = require("react");
-
 var _ahooks = require("ahooks");
 
 function useResizeEffect(effect, targetRef) {
   const fn = (0, _ahooks.useMemoizedFn)(effect);
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     const target = targetRef.current;
     if (!target) return;
 

package/2x/cjs/utils/use-tab-list-scroll.js

@@ -5,8 +5,6 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.useTabListScroll = void 0;
 
-var _react = require("react");
-
 var _web = require("@react-spring/web");
 
 var _useMutationEffect = require("./use-mutation-effect");
@@ -49,7 +47,7 @@ const useTabListScroll = (targetRef, activeIndex) => {
     });
   }
 
-  (0, _react.useLayoutEffect)(() => {
+  (0, _ahooks.useIsomorphicLayoutEffect)(() => {
     animate(true);
   }, []);
   (0, _ahooks.useUpdateLayoutEffect)(() => {

package/2x/es/components/badge/badge.css

@@ -4,24 +4,28 @@
 }
 
 .adm-badge {
-  display: inline-block;
-  color: #fff;
-  font-weight: normal;
-  text-align: center;
+  display: inline-flex;
   vertical-align: middle;
-  box-sizing: border-box;
-  min-width: 32px;
+  box-sizing: content-box;
   border-radius: 200px;
-  padding: 0 8px;
-  font-size: 18px;
-  line-height: 28px;
-  white-space: nowrap;
   background-color: var(--color);
   --right: 0;
   --top: 0;
   --color: var(--adm-badge-color, #ff411c);
 }
 
+.adm-badge-content {
+  color: #fff;
+  box-sizing: border-box;
+  min-width: 16px;
+  padding: 2px 8px;
+  font-size: 18px;
+  line-height: 24px;
+  white-space: nowrap;
+  font-weight: normal;
+  text-align: center;
+}
+
 .adm-badge-fixed {
   position: absolute;
   right: var(--right);
@@ -34,4 +38,8 @@
   width: 20px;
   height: 20px;
   border-radius: 10px;
+}
+
+.adm-badge-bordered {
+  border: solid 2px var(--adm-color-white);
 }

package/2x/es/components/badge/badge.d.ts

@@ -4,5 +4,6 @@ export declare const dot: unique symbol;
 export declare type BadgeProps = {
     content?: React.ReactNode | typeof dot;
     color?: string;
+    bordered?: boolean;
 } & NativeProps<'--right' | '--top' | '--color'>;
 export declare const Badge: FC<BadgeProps>;

package/2x/es/components/badge/badge.js

@@ -10,16 +10,15 @@ export const Badge = props => {
     children
   } = props;
   const isDot = content === dot;
-  const badgeCls = classNames(classPrefix, {
-    [`${classPrefix}-fixed`]: !!children,
-    [`${classPrefix}-dot`]: isDot
-  });
+  const badgeCls = classNames(classPrefix, !!children && `${classPrefix}-fixed`, isDot && `${classPrefix}-dot`, props.bordered && `${classPrefix}-bordered`);
   const element = content ? withNativeProps(props, React.createElement("div", {
     className: badgeCls,
     style: {
       '--color': color
     }
-  }, !isDot && content)) : null;
+  }, !isDot && React.createElement("div", {
+    className: `${classPrefix}-content`
+  }, content))) : null;
   return children ? React.createElement("div", {
     className: `${classPrefix}-wrap`
   }, children, element) : element;

package/2x/es/components/button/button.css

@@ -12,9 +12,9 @@
   display: inline-block;
   box-sizing: border-box;
   height: auto;
-  padding: 16px 24px;
+  padding: 14px 24px;
   margin: 0;
-  font-size: 30px;
+  font-size: 34px;
   line-height: 1.4;
   text-align: center;
   border: var(--border-width) var(--border-style) var(--border-color);
@@ -71,7 +71,7 @@
 .adm-button:not(.adm-button-default).adm-button-fill-none {
   --text-color: var(--color);
   --background-color: transparent;
-  --border-color: transparent;
+  --border-width: 0;
 }
 
 .adm-button-primary {