Skip to content

Commit

Permalink
feat: Button Badge add contentClassName (#2262)
Browse files Browse the repository at this point in the history 
* fix: badge classname effect dom not correct
* feat: button add contentClassName
  • Loading branch information
@DaiQiangReal
DaiQiangReal authored May 29, 2024
1 parent e1b8717 commit cab2719
Show file tree
Hide file tree
Showing 10 changed files with 58 additions and 33 deletions.
7 changes: 4 additions & 3 deletions content/basic/button/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | |
Expand All @@ -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) | |
Expand Down
1 change: 1 addition & 0 deletions content/basic/button/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 | |
Expand Down
22 changes: 12 additions & 10 deletions content/show/badge/index-en-US.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -276,16 +276,18 @@ 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 | - |
| className | className | string | - |
| count | Display content | ReactNode | - |
| countClassName | count className | string | - |
| 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

Expand Down
23 changes: 12 additions & 11 deletions content/show/badge/index.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -274,17 +274,18 @@ import { Badge } from '@douyinfe/semi-ui';

## API参考

| 属性 | 说明 | 类型 | 默认值 |
|-------|-------------|-----------------|--------|
| children | 徽章的 base | ReactNode | 无 |
| count | 展示的内容 | ReactNode | 无 |
| dot | 不展示数字，显示小圆点 | boolean | false |
| overflowCount | 最大的展示数字值 | number | 无 |
| position | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop` |
| style | 徽章的样式 | CSSProperties | 无 |
| theme | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary` |

| 属性 | 说明 | 类型 | 默认值 |
|----------------|-------------|-----------------|---|
| children | 徽章的 base | ReactNode | 无 |
| className | 外侧 className | string | - |
| count | 展示的内容 | ReactNode | 无 |
| countClassName | 内容区域 className | string | 无 |
| dot | 不展示数字，显示小圆点 | boolean | false |
| overflowCount | 最大的展示数字值 | number | 无 |
| position | 徽章位置，可选 `leftTop`、 `leftBottom`、 `rightTop`、 `rightBottom` | string | `rightTop` |
| style | 徽章的样式 | CSSProperties | 无 |
| theme | 徽章主题，可选 `solid`、 `light`、 `inverted` | string | `solid` |
| type | 徽章类型，可选 `primary`、 `secondary`、 `tertiary`、 `danger`、 `warning`、 `success` | string | `primary` |

## 文案规范
- Badge内容若为英文时，首字母应大写
Expand Down
10 changes: 10 additions & 0 deletions packages/semi-foundation/avatar/avatar.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions packages/semi-foundation/avatar/variables.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 圆形半径
Expand All @@ -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 文字大小
Expand All @@ -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 边框宽度
Expand Down
4 changes: 2 additions & 2 deletions packages/semi-ui/avatar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
11 changes: 7 additions & 4 deletions packages/semi-ui/badge/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
countClassName?: string

}

export default class Badge extends PureComponent<BadgeProps> {
Expand All @@ -42,6 +44,7 @@ export default class Badge extends PureComponent<BadgeProps> {
onClick: PropTypes.func,
onMouseEnter: PropTypes.func,
onMouseLeave: PropTypes.func,
countClassName: PropTypes.string,
};

static defaultProps = {
Expand All @@ -60,10 +63,10 @@ export default class Badge extends PureComponent<BadgeProps> {
const { direction } = this.context;
// DefaultPosition here, static can't get this
const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className, ...rest } = this.props;
const { count, dot, type, countClassName, 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(countClassName, {
[`${prefixCls}-${type}`]: !custom,
[`${prefixCls}-${theme}`]: !custom,
[`${prefixCls}-${position}`]: Boolean(position) && Boolean(children),
Expand All @@ -79,7 +82,7 @@ export default class Badge extends PureComponent<BadgeProps> {
content = count;
}
return (
<span className={prefixCls} {...rest}>
<span className={cls(prefixCls, className)} {...rest}>
{children}
<span className={wrapper} style={style} x-semi-prop="count">
{dot ? null : content}
Expand Down
7 changes: 5 additions & 2 deletions packages/semi-ui/button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -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() {
Expand Down Expand Up @@ -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>
Expand Down
3 changes: 2 additions & 1 deletion packages/semi-ui/iconButton/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down

0 comments on commit cab2719

Please sign in to comment.