@douyinfe/semi-ui 2.12.0 → 2.12.1-alpha.2

package/avatar/index.tsx

@@ -135,7 +135,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
             className
         );
         let content = children;
-        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
+        const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`} x-semi-prop="hoverContent">{hoverContent}</div>) : null;
         if (isImg) {
             content = (
                 <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
@@ -143,7 +143,7 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         } else if (typeof children === 'string') {
             content = (
                 <span className={`${prefixCls}-content`}>
-                    <span className={`${prefixCls}-label`}>{children}</span>
+                    <span className={`${prefixCls}-label`} x-semi-prop="children">{children}</span>
                 </span>
             );
         }

package/backtop/index.tsx

@@ -101,13 +101,17 @@ export default class BackTop extends BaseComponent<BackTopProps, BackTopState> {
             className
         );
         const backtopBtn = children ? children : this.renderDefault();
-        const content = visible ?
-            (
-                <div {...others} className={preCls} style={style} onClick={e => this.handleClick(e)}>
-                    {backtopBtn}
-                </div>
-            ) :
-            null;
+        const content = visible ? (
+            <div
+                {...others} 
+                className={preCls} 
+                style={style} 
+                onClick={e => this.handleClick(e)} 
+                x-semi-prop="children"
+            >
+                {backtopBtn}
+            </div>
+        ) : null;
         return content;
     }
 }

package/badge/index.tsx

@@ -82,7 +82,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         return (
             <span className={prefixCls} {...rest}>
                 {children}
-                <span className={wrapper} style={style}>
+                <span className={wrapper} style={style} x-semi-prop="count">
                     {dot ? null : content}
                 </span>
             </span>

package/banner/index.tsx

@@ -109,7 +109,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
             <Button
                 className={`${prefixCls}-close`}
                 onClick={this.remove}
-                icon={closeIcon || <IconClose aria-hidden={true}/>}
+                icon={closeIcon || <IconClose x-semi-prop="closeIcon" aria-hidden={true}/>}
                 theme="borderless"
                 size="small"
                 type="tertiary"
@@ -137,7 +137,7 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
         }
         if (iconType) {
             return (
-                <div className={iconCls}>
+                <div className={iconCls} x-semi-prop="icon">
                     {iconType}
                 </div>
             );
@@ -160,13 +160,13 @@ export default class Banner extends BaseComponent<BannerProps, BannerState> {
                     <div className={`${prefixCls}-content`}>
                         {this.renderIcon()}
                         <div className={`${prefixCls}-content-body`}>
-                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div">{title}</Typography.Title> : null}
-                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div">{description}</Typography.Paragraph> : null}
+                            {title ? <Typography.Title heading={5} className={`${prefixCls}-title`} component="div" x-semi-prop="title">{title}</Typography.Title> : null}
+                            {description ? <Typography.Paragraph className={`${prefixCls}-description`} component="div" x-semi-prop="description">{description}</Typography.Paragraph> : null}
                         </div>
                     </div>
                     {this.renderCloser()}
                 </div>
-                {children ? <div className={`${prefixCls}-extra`}>{children}</div> : null}
+                {children ? <div className={`${prefixCls}-extra`} x-semi-prop="children">{children}</div> : null}
             </div>
         ) : null;
         return banner;

package/breadcrumb/index.tsx

@@ -167,9 +167,9 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
             <span className={`${clsPrefix}-collapse`} key={`more-${itemsLen}`}>
                 <span className={`${clsPrefix}-item-wrap`}>
                     <span
-                        role='button'
+                        role="button"
                         tabIndex={0}
-                        aria-label='Expand breadcrumb items'
+                        aria-label="Expand breadcrumb items"
                         className={`${clsPrefix}-item ${clsPrefix}-item-more`}
                         onClick={item => this.foundation.handleExpand(item)}
                         onKeyPress={e => this.foundation.handleExpandEnterPress(e)}
@@ -178,7 +178,9 @@ class Breadcrumb extends BaseComponent<BreadcrumbProps, BreadcrumbState> {
                         {!hasRenderMore && moreType === 'default' && <IconMore />}
                         {!hasRenderMore && moreType === 'popover' && this.renderPopoverMore(restItem)}
                     </span>
-                    <span className={`${clsPrefix}-separator`}>{this.props.separator}</span>
+                    <span className={`${clsPrefix}-separator`} x-semi-prop="separator">
+                        {this.props.separator}
+                    </span>
                 </span>
             </span>
         );

package/button/Button.tsx

@@ -5,6 +5,7 @@ import PropTypes from 'prop-types';
 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';
 
 const btnSizes = strings.sizes;
 const { htmlTypes, btnTypes } = strings;
@@ -93,7 +94,7 @@ export default class Button extends PureComponent<ButtonProps> {
 
         const baseProps = {
             disabled,
-            ...attr,
+            ...omit(attr, ['x-semi-children-alias']),
             className: classNames(
                 prefixCls,
                 {
@@ -113,16 +114,17 @@ export default class Button extends PureComponent<ButtonProps> {
             'aria-disabled': disabled,
         };
 
+        const xSemiProps = {};
+
+        if (!(className && className.includes('-with-icon'))) {
+            xSemiProps['x-semi-prop'] = this.props['x-semi-children-alias'] || 'children';
+        }
+
         return (
             // eslint-disable-next-line react/button-has-type
-            <button
-                {...baseProps}
-                onClick={this.props.onClick}
-                onMouseDown={this.props.onMouseDown}
-                style={style}
-            >
+            <button {...baseProps} onClick={this.props.onClick} onMouseDown={this.props.onMouseDown} style={style}>
                 {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events,jsx-a11y/no-static-element-interactions */}
-                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()}>
+                <span className={`${prefixCls}-content`} onClick={e => disabled && e.stopPropagation()} {...xSemiProps}>
                     {children}
                 </span>
             </button>

package/card/index.tsx

@@ -55,7 +55,6 @@ export interface CardProps {
     'aria-label'?: string;
 }
 
-
 class Card extends PureComponent<CardProps> {
     static Meta = Meta;
 
@@ -106,37 +105,33 @@ class Card extends PureComponent<CardProps> {
         if (header || headerExtraContent || title) {
             return (
                 <div style={headerStyle} className={headerCls}>
-                    {
-                        header || ( // Priority of header over title and headerExtraContent
-                            <div className={headerWrapperCls}>
-                                {headerExtraContent &&
-                                    (
-                                        <div className={`${prefixcls}-header-wrapper-extra`}>
-                                            {headerExtraContent}
-                                        </div>
-                                    )
-                                }
-                                {title &&
-                                    (
-                                        <div className={titleCls}>
-                                            {
-                                                isString(title) ?
-                                                    (
-                                                        <Typography.Title
-                                                            heading={6}
-                                                            ellipsis={{ showTooltip: true, rows: 1 }}
-                                                        >
-                                                            {title}
-                                                        </Typography.Title>
-                                                    ) :
-                                                    title
-                                            }
-                                        </div>
-                                    )
-                                }
-                            </div>
-                        )
-                    }
+                    {header || ( // Priority of header over title and headerExtraContent
+                        <div className={headerWrapperCls}>
+                            {headerExtraContent && (
+                                <div
+                                    className={`${prefixcls}-header-wrapper-extra`}
+                                    x-semi-prop="headerExtraContent"
+                                >
+                                    {headerExtraContent}
+                                </div>
+                            )}
+                            {title && (
+                                <div className={titleCls}>
+                                    {isString(title) ? (
+                                        <Typography.Title
+                                            heading={6}
+                                            ellipsis={{ showTooltip: true, rows: 1 }}
+                                            x-semi-prop="title"
+                                        >
+                                            {title}
+                                        </Typography.Title>
+                                    ) : (
+                                        title
+                                    )}
+                                </div>
+                            )}
+                        </div>
+                    )}
                 </div>
             );
         }
@@ -149,16 +144,17 @@ class Card extends PureComponent<CardProps> {
         } = this.props;
         const coverCls = cls(`${prefixcls}-cover`);
 
-        return cover && <div className={coverCls}>{cover}</div>;
+        return (
+            cover && (
+                <div className={coverCls} x-semi-prop="cover">
+                    {cover}
+                </div>
+            )
+        );
     };
 
     renderBody = (): ReactNode => {
-        const {
-            bodyStyle,
-            children,
-            actions,
-            loading
-        } = this.props;
+        const { bodyStyle, children, actions, loading } = this.props;
         const bodyCls = cls(`${prefixcls}-body`);
         const actionsCls = cls(`${prefixcls}-body-actions`);
         const actionsItemCls = cls(`${prefixcls}-body-actions-item`);
@@ -182,7 +178,7 @@ class Card extends PureComponent<CardProps> {
                         <div className={actionsCls}>
                             <Space spacing={12}>
                                 {actions.map((item, idx) => (
-                                    <div key={idx} className={actionsItemCls}>{item}</div>
+                                    <div key={idx} className={actionsItemCls} x-semi-prop={`actions.${idx}`}>{item}</div>
                                 ))}
                             </Space>
                         </div>
@@ -202,7 +198,13 @@ class Card extends PureComponent<CardProps> {
             [`${prefixcls}-footer-bordered`]: footerLine
         });
 
-        return footer && <div style={footerStyle} className={footerCls}>{footer}</div>;
+        return (
+            footer && (
+                <div style={footerStyle} className={footerCls} x-semi-prop="footer">
+                    {footer}
+                </div>
+            )
+        );
     };
 
     render(): ReactNode {

package/carousel/CarouselArrow.tsx

@@ -41,6 +41,7 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                     className={leftClassNames} 
                     onClick={prev}
                     {...get(this.props, 'arrowProps.leftArrow.props')}
+                    x-semi-prop="arrowProps.leftArrow.children"
                 >
                     {this.renderLeftIcon()}
                 </div>
@@ -50,6 +51,7 @@ class CarouselArrow extends React.PureComponent<CarouselArrowProps> {
                     className={rightClassNames} 
                     onClick={next}
                     {...get(this.props, 'arrowProps.rightArrow.props')}
+                    x-semi-prop="arrowProps.rightArrow.children"
                 >
                     {this.renderRightIcon()}
                 </div>

package/carousel/index.tsx

@@ -279,6 +279,7 @@ class Carousel extends BaseComponent<CarouselProps, CarouselState> {
                         [`${cssClasses.CAROUSEL_CONTENT}`]: true,
                         [`${cssClasses.CAROUSEL_CONTENT}-reverse`]: slideDirection === 'left' ? isReverse : !isReverse,
                     })}
+                    x-semi-prop="children"
                 >
                     {this.renderChildren()}
                 </div>