@douyinfe/semi-ui 2.9.1 → 2.10.0-alpha.0

package/badge/_story/badge.stories.js

@@ -1,6 +1,5 @@
 import React from 'react';
-import { Avatar, Badge } from '../../index';
-import { IconLock } from '@douyinfe/semi-icons';
+import Badge from '../index';
 
 export default {
   title: 'Badge',
@@ -89,35 +88,4 @@ export const Theme = () => (
       <a style={style}></a>
     </Badge>
   </div>
-);
-
-export const AvatarBadge = () => {
-  const style = {
-      width: '42px',
-      height: '42px',
-      borderRadius: '4px',
-  };
-  return (
-      <div>
-          <Badge count={5}>
-              <Avatar color='blue' shape='square' style={style}>BM</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge dot>
-              <Avatar color='blue' shape='square' style={style}>YL</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge count={<IconLock style={{color:'var(--semi-color-primary)'}}/>}>
-              <Avatar color='light-blue' shape='square' style={style}>XZ</Avatar>
-          </Badge>
-          <br/>
-          <br/>
-          <Badge count='NEW' >
-              <Avatar color='light-blue' shape='square' style={style}>WF</Avatar>
-          </Badge>
-      </div>
-  );  
-};
-AvatarBadge.storyName = '头像 badge';
+);

package/checkbox/checkbox.tsx

@@ -29,9 +29,13 @@ export interface CheckboxProps extends BaseCheckboxProps {
     'aria-label'?: React.AriaAttributes['aria-label'];
     role?: React.HTMLAttributes<HTMLSpanElement>['role']; // a11y: wrapper role
     tabIndex?: number; // a11y: wrapper tabIndex
+    addonId?: string;
+    extraId?: string;
 }
 interface CheckboxState {
     checked: boolean;
+    addonId?: string;
+    extraId?: string;
 }
 class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
     static contextType = Context;
@@ -89,7 +93,13 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             notifyGroupChange: cbContent => {
                 this.context.checkboxGroup.onChange(cbContent);
             },
-            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled)
+            getGroupDisabled: () => (this.context && this.context.checkboxGroup.disabled),
+            setAddonId: () => {
+                this.setState({ addonId: getUuidShort({ prefix: 'addon' }) });
+            },
+            setExtraId: () => {
+                this.setState({ extraId: getUuidShort({ prefix: 'extra' }) });
+            }
         };
     }
 
@@ -103,11 +113,11 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         this.state = {
             checked: props.checked || props.defaultChecked || checked,
+            addonId: props.addonId,
+            extraId: props.extraId,
         };
 
         this.checkboxEntity = null;
-        this.addonId = getUuidShort({ prefix: 'addon' });
-        this.extraId = getUuidShort({ prefix: 'extra' });
         this.foundation = new CheckboxFoundation(this.adapter);
     }
 
@@ -153,7 +163,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             tabIndex,
             id
         } = this.props;
-        const { checked } = this.state;
+        const { checked, addonId, extraId } = this.state;
         const props: Record<string, any> = {
             checked,
             disabled,
@@ -196,8 +206,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
 
         const renderContent = () => (
             <>
-                {children ? <span id={this.addonId} className={`${prefix}-addon`}>{children}</span> : null}
-                {extra ? <div id={this.extraId} className={extraCls}>{extra}</div> : null}
+                {children ? <span id={addonId} className={`${prefix}-addon`}>{children}</span> : null}
+                {extra ? <div id={extraId} className={extraCls}>{extra}</div> : null}
             </>
         );
         return (
@@ -218,8 +228,8 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
                 <CheckboxInner
                     {...this.props}
                     {...props}
-                    addonId={children && this.addonId}
-                    extraId={extra && this.extraId}
+                    addonId={children && addonId}
+                    extraId={extra && extraId}
                     name={name}
                     isPureCardType={props.isPureCardType}
                     ref={ref => {

package/dist/css/semi.css

@@ -14622,7 +14622,6 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-select-open:hover, .semi-select-focus:hover {
   background-color: var(--semi-color-fill-0);
-  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select-warning {
   background-color: var(--semi-color-warning-light-default);