feat: [Select/Checkbox/Button] add id #353 (#373)

Co-authored-by: chenyuling <[email protected]>

packages/semi-foundation/checkbox/checkboxFoundation.ts

@@ -107,6 +107,7 @@ class CheckboxFoundation<P = Record<string, any>, S = Record<string, any>> exten
 }
 
 export interface BaseCheckboxProps {
+    id?: string;
     autoFocus?: boolean;
     checked?: boolean;
     defaultChecked?: boolean;

packages/semi-ui/button/Button.tsx

@@ -15,6 +15,7 @@ export type Theme = 'solid' | 'borderless' | 'light';
 export type Type = 'primary' | 'secondary' | 'tertiary' | 'warning' | 'danger';
 
 export interface ButtonProps {
+    id?: string;
     block?: boolean;
     circle?: boolean;
     disabled?: boolean;

packages/semi-ui/checkbox/checkbox.tsx

@@ -123,6 +123,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             onMouseLeave,
             extra,
             value,
+            id,
         } = this.props;
         const { checked } = this.state;
         const props: Record<string, any> = {
@@ -174,6 +175,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             <span
                 style={style}
                 className={wrapper}
+                id={id}
                 onMouseEnter={onMouseEnter}
                 onMouseLeave={onMouseLeave}
                 onClick={this.handleChange}

packages/semi-ui/checkbox/checkboxGroup.tsx

@@ -25,6 +25,7 @@ export type CheckboxGroupProps = {
     style?: React.CSSProperties;
     className?: string;
     type?: CheckboxType;
+    id?: string;
 };
 
 export type CheckboxGroupState = {
@@ -96,7 +97,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
     }
 
     render() {
-        const { children, options, prefixCls, direction, className, style, type } = this.props;
+        const { children, options, prefixCls, direction, className, id, style, type } = this.props;
 
         const isPureCardType = type === strings.TYPE_PURECARD;
         const isCardType = type === strings.TYPE_CARD || isPureCardType;
@@ -148,7 +149,7 @@ class CheckboxGroup extends BaseComponent<CheckboxGroupProps, CheckboxGroupState
         }
 
         return (
-            <div className={prefixClsDisplay} style={style}>
+            <div className={prefixClsDisplay} style={style} id={id}>
                 <Context.Provider
                     value={{
                         checkboxGroup: {

packages/semi-ui/select/index.tsx

@@ -78,6 +78,7 @@ export type RenderMultipleSelectedItemFn = (optionNode: Record<string, any>, mul
 export type RenderSelectedItemFn = RenderSingleSelectedItemFn | RenderMultipleSelectedItemFn;
 
 export type SelectProps = {
+    id?: string;
     autoFocus?: boolean;
     arrowIcon?: React.ReactNode;
     defaultValue?: string | number | any[] | Record<string, any>;
@@ -981,6 +982,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
             multiple,
             filter,
             style,
+            id,
             size,
             className,
             validateStatus,
@@ -1063,6 +1065,7 @@ class Select extends BaseComponent<SelectProps, SelectState> {
                 ref={ref => ((this.triggerRef as any).current = ref)}
                 onClick={e => this.foundation.handleClick(e)}
                 style={style}
+                id={id}
                 tabIndex={tabIndex}
                 onMouseEnter={this.onMouseEnter}
                 onMouseLeave={this.onMouseLeave}