@douyinfe/semi-ui 2.8.0 → 2.9.0-beta.0

package/_base/_story/index.scss

@@ -5,7 +5,6 @@ body {
     color: var(--semi-color-text-0);
 }
 
-
 // 给每个组件的 story 区域加个 padding，如果需要更大的 padding 可以在组件内自定义样式
 .sb-show-main.sb-main-padded > #root {
     padding: 20px;

package/badge/index.tsx

@@ -1,7 +1,7 @@
 import React, { PureComponent } from 'react';
 import cls from 'classnames';
 import PropTypes from 'prop-types';
-import { isNumber, isString } from 'lodash';
+import { isNumber, isString, noop } from 'lodash';
 import ConfigContext from '../configProvider/context';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/badge/constants';
 import '@douyinfe/semi-foundation/badge/badge.scss';
@@ -22,6 +22,9 @@ export interface BadgeProps {
     style?: React.CSSProperties;
     className?: string;
     children?: React.ReactNode;
+    onMouseEnter?: (e: React.MouseEvent) => any;
+    onMouseLeave?: (e: React.MouseEvent) => any;
+    onClick?: (e: React.MouseEvent) => any;
 }
 
 export default class Badge extends PureComponent<BadgeProps> {
@@ -36,6 +39,9 @@ export default class Badge extends PureComponent<BadgeProps> {
         style: PropTypes.object,
         className: PropTypes.string,
         children: PropTypes.node,
+        onClick: PropTypes.func,
+        onMouseEnter: PropTypes.func,
+        onMouseLeave: PropTypes.func,
     };
 
     static defaultProps = {
@@ -43,6 +49,9 @@ export default class Badge extends PureComponent<BadgeProps> {
         type: 'primary',
         theme: 'solid',
         className: '',
+        onClick: () => noop,
+        onMouseEnter: () => noop,
+        onMouseLeave: () => noop,
     };
 
     render() {
@@ -50,7 +59,7 @@ export default class Badge extends PureComponent<BadgeProps> {
         // DefaultPosition here, static can't get this
         const defaultPosition = direction === 'rtl' ? 'leftTop' : 'rightTop';
         // eslint-disable-next-line max-len
-        const { count, dot, type, theme, position = defaultPosition, overflowCount, style, children, className } = this.props;
+        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, {
@@ -69,7 +78,7 @@ export default class Badge extends PureComponent<BadgeProps> {
             content = count;
         }
         return (
-            <span className={prefixCls}>
+            <span className={prefixCls} {...rest}>
                 {children}
                 <span className={wrapper} style={style}>
                     {dot ? null : content}

package/descriptions/index.tsx

@@ -10,8 +10,7 @@ import Item from './item';
 export { DescriptionsItemProps } from './item';
 export type DescriptionsSize = 'small' | 'medium' | 'large';
 export interface Data {
-    [x: string]: any;
-    key?: string | number;
+    key?: React.ReactNode;
     value?: (() => React.ReactNode) | React.ReactNode;
     hidden?: boolean;
 }
@@ -26,7 +25,7 @@ export interface DescriptionsProps {
 
 const prefixCls = cssClasses.PREFIX;
 
-class Descriptions extends PureComponent<DescriptionsProps > {
+class Descriptions extends PureComponent<DescriptionsProps> {
     static Item = Item;
 
     static contextType = DescriptionsContext;
@@ -61,8 +60,8 @@ class Descriptions extends PureComponent<DescriptionsProps > {
             [`${prefixCls}-double-${size}`]: row,
         });
         const childrenList = data && data.length ?
-            data.map(item => (
-                isPlainObject(item) ? <Item key={item.key} itemKey={item.key} {...item}>{item.value}</Item> : null
+            data.map((item, index) => (
+                isPlainObject(item) ? <Item itemKey={item.key} {...item} key={index}>{item.value}</Item> : null
             )) :
             children;
         return (

package/descriptions/item.tsx

@@ -8,7 +8,7 @@ export interface DescriptionsItemProps {
     hidden?: boolean;
     className?: string;
     style?: React.CSSProperties;
-    itemKey: string | number;
+    itemKey?: React.ReactNode;
 }
 
 const prefixCls = cssClasses.PREFIX;

package/dist/css/semi.css

@@ -759,12 +759,7 @@ body[theme-mode=dark], body .semi-always-dark {
   font-weight: 600;
 }
 .semi-avatar-content {
-  position: absolute;
   user-select: none;
-  left: 50%;
-  top: 50%;
-  transform: translate(-50%, -50%);
-  transform-origin: center;
 }
 .semi-avatar-extra-extra-small {
   width: 20px;
@@ -772,7 +767,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-avatar-extra-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -784,7 +779,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-avatar-extra-small .semi-avatar-content {
   transform-origin: center;
-  transform: scale(0.8) translate(-62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-avatar-extra-small .semi-avatar-label {
   font-size: 10px;
@@ -1108,19 +1103,13 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-portal-rtl .semi-avatar {
   direction: rtl;
 }
-.semi-rtl .semi-avatar-content,
-.semi-portal-rtl .semi-avatar-content {
-  left: auto;
-  right: 50%;
-  transform: translate(50%, -50%);
-}
 .semi-rtl .semi-avatar-extra-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-extra-small .semi-avatar-content,
 .semi-portal-rtl .semi-avatar-extra-small .semi-avatar-content {
-  transform: scale(0.8) translate(62.5%, -62.5%);
+  transform: scale(0.8);
 }
 .semi-rtl .semi-avatar-hover,
 .semi-portal-rtl .semi-avatar-hover {
@@ -4572,6 +4561,64 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-left: 80px;
 }
 
+.semi-divider {
+  margin: 1px 0px 1px 0px;
+  border-bottom: 1px solid var(--semi-color-border);
+  color: var(--semi-color-text-0);
+  box-sizing: border-box;
+}
+.semi-divider-dashed {
+  border-bottom-style: dashed;
+}
+.semi-divider-horizontal {
+  width: 100%;
+  display: flex;
+}
+.semi-divider-vertical {
+  border-bottom: 0;
+  display: inline-block;
+  margin: 0px 1px 0px 1px;
+  border-left: 1px solid var(--semi-color-border);
+  height: 20px;
+  vertical-align: middle;
+}
+.semi-divider-with-text {
+  display: flex;
+  border-bottom: 0;
+  white-space: nowrap;
+  align-items: center;
+}
+.semi-divider-with-text .semi-divider_inner-text {
+  font-weight: 600;
+  padding: 0px 8px 0px 8px;
+  display: inline-block;
+}
+.semi-divider-with-text::before, .semi-divider-with-text::after {
+  content: "";
+  width: 50%;
+  border-bottom: 1px solid var(--semi-color-border);
+}
+.semi-divider-with-text-left::before {
+  width: 40px;
+}
+.semi-divider-with-text-left::after {
+  flex: 1;
+}
+.semi-divider-with-text-right::before {
+  flex: 1;
+}
+.semi-divider-with-text-right::after {
+  width: 40px;
+}
+
+.semi-divider-dashed::before, .semi-divider-dashed::after {
+  border-bottom: 1px dashed var(--semi-color-border);
+}
+
+.semi-divider-vertical.semi-divider-dashed {
+  border-left: 1px dashed var(--semi-color-border);
+}
+
 .semi-dropdown {
   font-size: 14px;
   line-height: 20px;
@@ -16799,7 +16846,7 @@ body[theme-mode=dark], body .semi-always-dark {
   flex-direction: column;
 }
 .semi-tabs-bar-extra {
-  padding: 0 5px;
+  padding: 0px 5px;
 }
 .semi-tabs-bar .semi-tabs-tab {
   font-size: 14px;