feat: some api

content/basic/button/index-en-US.md

@@ -523,10 +523,11 @@ function SplitButtonDemo(){
 ### Button
 
 | Properties          | Instructions                                                                                                                                                                              | Type                             | Default   |
-| ------------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------- | --------- |
-| aria-label          | Label of the button                                                                                                                                                                       | string                            | -    |
+| ------------------- |-------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------| -------------------------------- |-----------|
+| aria-label          | Label of the button                                                                                                                                                                       | string                            | -         |
 | block               | Set the button to the block level button                                                                                                                                                  | boolean                          | false     |
 | className           | Class name                                                                                                                                                                                | string                           |           |
+| contentClassName | content className                                                                                                                                                                         |  string | -         |
 | disabled            | Prohibited status                                                                                                                                                                         | boolean                          | false     |
 | htmlType           | Set the `button` native `type` value, optional values: `"button"`, `"reset"`, `"submit"`                                                                                                  | string                           | "button"  |
 | icon                | Icon                                                                                                                                                                                      | ReactNode              |           |
@@ -535,7 +536,7 @@ function SplitButtonDemo(){
 | noHorizontalPadding | Set whether to remove the inner margin in the horizontal direction, only valid for iconButton, optional: `true` (equivalent to \["left", "right"\]), "left", "right", \["left", "right"\] | boolean\|string\| Array<string\> | false     |
 | size                | Button size, optional value: `"large"`,`"default"`,`"small"`                                                                                                                              | string                           | "default" |
 | style               | Custom style                                                                                                                                                                              | CSSProperties                           |           |
-| theme               | Button theme, optional value: `"solid"` (with background color), `"borderless"` (no background color), `"light"` (light background color), `"outline"`(Border Mode)                    | string                           | "light"   |
+| theme               | Button theme, optional value: `"solid"` (with background color), `"borderless"` (no background color), `"light"` (light background color), `"outline"`(Border Mode)                       | string                           | "light"   |
 | type                | Type, optional values: `"primary"`,`"secondary"`, `"tertiary"`, `"warning"`, `"danger"`                                                                                                   | string                           | "primary" |
 | onClick             | Click event                                                                                                                                                                               | Function(MouseEvent)                         |           |
 | onMouseDown             | Mouse down                                                                                                                                                                                | Function(MouseEvent)                        |           |

content/basic/button/index.md

@@ -475,6 +475,7 @@ function SplitButtonDemo(){
 | aria-label          | 按钮的标签                                                                                                       | string                            | -    |
 | block               | 将按钮设置为块级按钮                                                                                                  | bool                            | false     |
 | className           | 类名                                                                                                          | string                          |           |
+| contentClassName | 内容区域 className |  string | 无 |
 | disabled            | 禁用状态                                                                                                        | boolean                         | false     |
 | htmlType           | 设置 `button` 原生的 `type` 值，可选值：`button`、`reset`、`submit`                                                      | string                          | "button"  |
 | icon                | 图标                                                                                                          | ReactNode               |           |

content/show/badge/index-en-US.md

@@ -276,16 +276,17 @@ import { Badge } from '@douyinfe/semi-ui';
 
 ## API Reference
 
-| Properties    | Instructions                                                                    | type       | Default    |
-| ------------- | ------------------------------------------------------------------------------- | ---------- | ---------- |
-| children      | Base                                                                            | ReactNode  | -          |
-| count         | Display content                                                                 | ReactNode | -          |
-| dot           | Displayed as a little dot.                                                      | boolean    | false      |
-| overflowCount | Cap number value                                                                | number     | -          |
-| position      | Badge position, optional `left Top`, `left Bottom`, `right Top`, `right Bottom` | string     | `rightTop` |
-| style         | style                                                                           | CSSProperties     | -          |
-| theme         | Badge theme, one of `solid`, `light`, `inverted`                                | string     | `solid`    |
-| type          | Badge type, one of `primary`, `secondary`, `tertiary`, `danger`, `warning`,`success`,         | string     | `primary`  |
+| Properties    | Instructions                                                                          | type       | Default    |
+| ------------- |---------------------------------------------------------------------------------------| ---------- |------------|
+| children      | Base                                                                                  | ReactNode  | -          |
+| contentClassName | content className                                                                     |  string | -          |
+| count         | Display content                                                                       | ReactNode | -          |
+| dot           | Displayed as a little dot.                                                            | boolean    | false      |
+| overflowCount | Cap number value                                                                      | number     | -          |
+| position      | Badge position, optional `left Top`, `left Bottom`, `right Top`, `right Bottom`       | string     | `rightTop` |
+| style         | style                                                                                 | CSSProperties     | -          |
+| theme         | Badge theme, one of `solid`, `light`, `inverted`                                      | string     | `solid`    |
+| type          | Badge type, one of `primary`, `secondary`, `tertiary`, `danger`, `warning`,`success`, | string     | `primary`  |
 
 ## Content Guidelines
 

content/show/badge/index.md

@@ -275,16 +275,16 @@ import { Badge } from '@douyinfe/semi-ui';
 ## API参考
 
 | 属性  | 说明        | 类型   | 默认值 |
-|-------|-------------|-----------------|--------|
+|-------|-------------|-----------------|---|
 | children | 徽章的 base | ReactNode | 无 | 
-| count  | 展示的内容 | ReactNode  | 无  |
+| contentClassName | 内容区域 className |  string | 无 |
+| count  | 展示的内容 | ReactNode  | 无 |
 | dot  | 不展示数字，显示小圆点 | boolean  | false |
 | overflowCount | 最大的展示数字值 | number | 无 |
-| position | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop`  |
+| position | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop` |
 | style | 徽章的样式 | CSSProperties | 无 | 
 | theme | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
-| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary`  |
-
+| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary` |
 
 ## 文案规范
 - Badge内容若为英文时，首字母应大写

packages/semi-foundation/avatar/avatar.scss

@@ -283,6 +283,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-radius: var(--semi-border-radius-circle);
             line-height:normal;
         }
+        &-shape_circle-extra-small{
+            width:$width-avatar-bottom_slot_circle_extra_small;
+            height:$width-avatar-bottom_slot_circle_extra_small;
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+        }
         &-shape_circle-small{
             width:$width-avatar-bottom_slot_circle_small;
             height:$width-avatar-bottom_slot_circle_small;
@@ -324,6 +329,11 @@ $colors: 'amber', 'blue', 'cyan', 'green', 'grey', 'indigo', 'light-blue', 'ligh
             border-color: $color-avatar-bottom_slot_square-border;
         }
 
+        &-shape_square-extra_small{
+            font-size: $font-avatar_bottom_slot-extra_small-fontSize;
+            border-width: $width-avatar-bottom_slot_square_extra_small-border;
+        }
+
         &-shape_square-small{
             font-size: $font-avatar_bottom_slot-small-fontSize;
             border-width: $width-avatar-bottom_slot_square_small-border;

packages/semi-foundation/avatar/variables.scss

@@ -50,6 +50,7 @@ $width-avatar_additional-border: 1.5px; // 额外描边尺寸
 $color-avatar_additional-border: var(--semi-color-primary); // 额外描边颜色
 $spacing-avatar_additional-borderGap: 2px; // 额外描边与内侧间距
 
+$width-avatar-bottom_slot_circle_extra_small: 12px; // extra small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_small: 12px; // small 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_default: 16px; // default 头像底部 slot 圆形半径
 $width-avatar-bottom_slot_circle_medium: 18px; // medium 头像底部 slot 圆形半径
@@ -58,6 +59,7 @@ $width-avatar-bottom_slot_circle_extra_large: 28px; // extra large 头像底部
 $color-avatar-bottom_slot_bg:var(--semi-color-primary); // 头像底部 slot 背景色
 
 $radius-avatar-bottom_slot_square:4px;  // 底部 slot square 圆角
+$font-avatar_bottom_slot-extra_small-fontSize: 5px; // extra small 底部 slot 文字大小
 $font-avatar_bottom_slot-small-fontSize: 5px; // small 底部 slot 文字大小
 $font-avatar_bottom_slot-default-fontSize: 12px; // default 底部 slot 文字大小
 $font-avatar_bottom_slot-medium-fontSize: 12px; // medium 底部 slot 文字大小
@@ -79,6 +81,7 @@ $spacing-avatar-top_slot_large-content-marginTop: 0px; // large 顶部文字 mar
 $spacing-avatar-top_slot_extra_large-content-marginTop: 0px; // extra large 顶部文字 marginTop 
 
 $color-avatar-bottom_slot_square-border:var(--semi-color-bg-0); // 底部 square 边框颜色
+$width-avatar-bottom_slot_square_extra_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_small-border:2px; // small 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_default-border:2px; // default 头像底部 square 边框宽度
 $width-avatar-bottom_slot_square_medium-border:2px; // medium 头像底部 square 边框宽度 

packages/semi-ui/avatar/index.tsx

@@ -404,8 +404,8 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         if (shouldWrap) {
             return <span className={cls([`${prefixCls}-wrapper`])} style={style} {...mouseEvent}>
                 {avatar}
-                {topSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
-                {bottomSlot && ["small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()}
+                {topSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && shape === "circle" && this.renderTopSlot()}
+                {bottomSlot && ["extra-small","small", "default", "medium", "large", "extra-large"].includes(size) && this.renderBottomSlot()}
             </span>;
         } else {
             return avatar;

packages/semi-ui/badge/index.tsx

@@ -24,7 +24,9 @@ export interface BadgeProps {
     onMouseEnter?: (e: React.MouseEvent) => any;
     onMouseLeave?: (e: React.MouseEvent) => any;
     onClick?: (e: React.MouseEvent) => any;
-    children?: React.ReactNode
+    children?: React.ReactNode;
+    contentClassName?: string
+
 }
 
 export default class Badge extends PureComponent<BadgeProps> {
@@ -42,6 +44,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         onClick: PropTypes.func,
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
+        contentClassName: PropTypes.string,
     };
 
     static defaultProps = {
@@ -63,7 +66,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
         const custom = count && !(isNumber(count) || isString(count));
         const showBadge = count !== null && typeof count !== 'undefined';
-        const wrapper = cls(className, {
+        const wrapper = cls(className, this.props.contentClassName, {
             [`${prefixCls}-${type}`]: !custom,
             [`${prefixCls}-${theme}`]: !custom,
             [`${prefixCls}-${position}`]: Boolean(position) && Boolean(children),

packages/semi-ui/button/Button.tsx

@@ -5,6 +5,7 @@ import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants'
 import '@douyinfe/semi-foundation/button/button.scss';
 import { noop } from '@douyinfe/semi-foundation/utils/function';
 import { omit } from 'lodash';
+import cls from "classnames";
 
 const btnSizes = strings.sizes;
 const { htmlTypes, btnTypes } = strings;
@@ -34,7 +35,8 @@ export interface ButtonProps extends Omit<React.ButtonHTMLAttributes<HTMLButtonE
     onMouseDown?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseEnter?: React.MouseEventHandler<HTMLButtonElement>;
     onMouseLeave?: React.MouseEventHandler<HTMLButtonElement>;
-    'aria-label'?: React.AriaAttributes['aria-label']
+    'aria-label'?: React.AriaAttributes['aria-label'];
+    contentClassName?: string
 }
 
 // TODO: icon configuration
@@ -71,6 +73,7 @@ export default class Button extends PureComponent<ButtonProps> {
         onMouseEnter: PropTypes.func,
         onMouseLeave: PropTypes.func,
         'aria-label': PropTypes.string,
+        contentClassName: PropTypes.string,
     };
 
     render() {
@@ -123,7 +126,7 @@ export default class Button extends PureComponent<ButtonProps> {
 
         return (
             <button {...baseProps} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} style={style}>
-                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()} {...xSemiProps}>
+                <span className={cls(`${prefixCls}-content`, this.props.contentClassName)} onClick={e => disabled && e.stopPropagation()} {...xSemiProps}>
                     {children}
                 </span>
             </button>

packages/semi-ui/iconButton/index.tsx

@@ -24,7 +24,8 @@ export interface IconButtonProps extends ButtonProps {
     className?: string;
     disabled?: boolean;
     noHorizontalPadding?: boolean | HorizontalPaddingType | HorizontalPaddingType[];
-    prefixCls?: string
+    prefixCls?: string;
+    contentClassName?: string;
 }
 
 // TODO: add a buttonGroup component