@douyinfe/semi-ui 2.1.4-alpha.0 → 2.1.4

package/_base/_story/index.scss

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

package/button/__test__/button.test.js

@@ -1,4 +1,5 @@
 import Button from '../index';
+import ButtonGroup from '../index';
 import { mount } from 'enzyme';
 import { BASE_CLASS_PREFIX } from '../../../semi-foundation/base/constants';
 import { IconEdit } from '@douyinfe/semi-icons';
@@ -46,4 +47,18 @@ describe('Button', () => {
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-left`).length).toBe(1);
         expect(elem.find(`.${BASE_CLASS_PREFIX}-button-content-right`).length).toBe(0);
     });
+
+    it(`button group with invalid child`, () => {
+        const buttonGroup = mount(
+            <ButtonGroup>
+                {false}
+                {null}
+                {undefined}
+                {1}
+                <Button>查询</Button>
+                <Button>剪切</Button>
+            </ButtonGroup>
+        );
+        expect(buttonGroup.getDOMNode().textContent).toEqual('1查询剪切');
+    });
 });

package/button/_story/button.stories.js

@@ -122,6 +122,19 @@ export const ButtonGroupDemo = () => (
       </Button>
     </ButtonGroup>
     <br />
+    <div>ButtonGroup children 不是合法元素的情况:</div>
+    <ButtonGroup>
+      {false}
+      {123}
+      {null}
+      {undefined}
+      text
+      <span>span</span>
+      {true && <Button>拷贝</Button>}
+      <Button>查询</Button>
+      <Button>剪切</Button>
+    </ButtonGroup>
+    <br />
   </div>
 );
 

package/button/buttonGroup.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { isValidElement, cloneElement } from 'react';
 import BaseComponent, { BaseProps } from '../_base/baseComponent';
 import PropTypes from 'prop-types';
 import { cssClasses, strings } from '@douyinfe/semi-foundation/button/constants';
@@ -38,9 +38,11 @@ export default class ButtonGroup extends BaseComponent<ButtonGroupProps> {
         let inner;
 
         if (children) {
-            inner = ((Array.isArray(children) ? children : [children]) as React.ReactElement[]).map((itm, index) =>
-                React.cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
-            );
+            inner = ((Array.isArray(children) ? children : [children])).map((itm, index) => (
+                isValidElement(itm)
+                    ? cloneElement(itm, { disabled, size, type, ...itm.props, ...rest, key: index })
+                    : itm
+            ));
         }
         return <div className={`${prefixCls}-group`}>{inner}</div>;
     }

package/cascader/item.tsx

@@ -104,6 +104,9 @@ export default class Item extends PureComponent<CascaderItemProps> {
         const { onItemCheckboxClick } = this.props;
         // Prevent Checkbox's click event bubbling to trigger the li click event
         e.stopPropagation();
+        if (e.nativeEvent && typeof e.nativeEvent.stopImmediatePropagation === 'function') {
+            e.nativeEvent.stopImmediatePropagation();
+        }
         onItemCheckboxClick(item);
     };
 

package/checkbox/__test__/checkboxGroup.test.js

@@ -136,13 +136,45 @@ describe('CheckboxGroup', () => {
     });
 
     it('checkboxGroup card style', () => {
-        const checkbox = getCG({ type: 'card' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'card' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'card', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 
     it('checkboxGroup pure card style', () => {
-        const checkbox = getCG({ type: 'pureCard' });
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
-        expect(checkbox.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        const checkboxGroup = getCG({ type: 'pureCard' });
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)).toEqual(true);
+        expect(checkboxGroup.exists(`.${BASE_CLASS_PREFIX}-checkbox-inner-pureCardType`)).toEqual(true);
+        checkboxGroup.unmount();
+
+        const disabledCheckboxGroup = getCG({ type: 'pureCard', disabled: true, defaultValue: 'abc' });
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(0)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(true);
+        expect(
+            disabledCheckboxGroup
+            .find(`.${BASE_CLASS_PREFIX}-checkbox-cardType`)
+            .at(1)
+            .exists(`.${BASE_CLASS_PREFIX}-checkbox-cardType_checked_disabled`)
+        ).toEqual(false);
+        disabledCheckboxGroup.unmount();
     });
 });

package/checkbox/_story/checkbox.stories.js

@@ -1,6 +1,8 @@
 import React, { useCallback, useMemo, useState } from 'react';
 import Button from '../../button';
 import Popover from '../../popover';
+import Tag from '../../tag';
+import Cascader from '../../cascader';
 import Checkbox from '../index';
 import CheckboxGroup from '../checkboxGroup';
 import { Col, Input, Row } from '../../index';
@@ -572,12 +574,12 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="card" direction="horizontal" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
@@ -765,12 +767,12 @@ export const CheckboxGroupPureCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup type="pureCard" defaultValue={['1']}>
-      <Checkbox value="1" disabled extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="1" disabled extra="disabled+checked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
-      <Checkbox value="2" extra="Semi Design" style={{ width: 280 }}>
+      <Checkbox value="2" disabled extra="disabled+unchecked" style={{ width: 280 }}>
         多选框标题
       </Checkbox>
       <Checkbox value="3" extra="Semi Design" style={{ width: 280 }}>
@@ -941,3 +943,73 @@ export const CheckboxGroupPureCardStyle = () => (
     </CheckboxGroup>
   </>
 );
+
+export const CheckboxOnChangeEvent = () =>  (
+  <div style={{marginLeft: 100}}>
+      <div>查看 onChange 入参</div>
+      <Checkbox onChange={e => console.log(e)}>
+          Apple
+      </Checkbox>
+      <div style={{marginTop: 30}}>Popover 内套 Popover, 且 content 为 checkbox</div>
+      <Popover
+          trigger={'click'}
+          onClickOutSide={e => console.log('onClickOutSide')}
+          content={
+              <Popover
+                  trigger='click'
+                  content={
+                      <Checkbox
+                          onChange={e => {
+                              console.log('checkbox onChange', e);
+                              e.stopPropagation();
+                              e.nativeEvent && e.nativeEvent.stopImmediatePropagation();
+                          }}
+                      >
+                          Semi Design
+                      </Checkbox>
+                  }
+              >
+                  trigger
+              </Popover>
+          }
+      >
+          <Tag>点击此处</Tag>
+      </Popover>
+      <div style={{marginTop: 30}}>Popover 内套 Cascader 多选</div>
+      <Popover
+          trigger={'click'}
+          content={
+              <Cascader
+                  defaultValue={['zhejiang', 'ningbo', 'jiangbei']}
+                  style={{ width: 300 }}
+                  treeData={[
+                      {
+                          label: '浙江省',
+                          value: 'zhejiang',
+                          children: [
+                              {
+                                  label: '杭州市',
+                                  value: 'hangzhou',
+                                  children: [
+                                      {
+                                          label: '西湖区',
+                                          value: 'xihu',
+                                      },
+                                  ],
+                              },
+                          ],
+                      }
+                  ]}
+                  placeholder="请选择所在地区"
+                  multiple
+              />
+          }
+      >
+          <Tag>点击此处</Tag>
+      </Popover>
+  </div>
+);
+
+CheckboxOnChangeEvent.story = {
+  name: 'checkbox onChange event',
+};

package/checkbox/checkbox.tsx

@@ -154,6 +154,7 @@ class Checkbox extends BaseComponent<CheckboxProps, CheckboxState> {
             [`${prefix}-cardType_disabled`]: props.disabled && props.isCardType,
             [`${prefix}-cardType_unDisabled`]: !(props.disabled && props.isCardType),
             [`${prefix}-cardType_checked`]: props.isCardType && props.checked && !props.disabled,
+            [`${prefix}-cardType_checked_disabled`]: props.isCardType && props.checked && props.disabled,
             [className]: Boolean(className),
         });
 

package/dist/css/semi.css

@@ -3059,12 +3059,14 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-display {
   background: var(--semi-color-fill-1);
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
+  box-shadow: none;
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-display {
   background: var(--semi-color-disabled-fill);
@@ -3072,6 +3074,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox.semi-checkbox-disabled:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display, .semi-checkbox.semi-checkbox-disabled:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-disabled);
+  box-shadow: none;
 }
 .semi-checkbox-inner {
   position: relative;
@@ -3112,7 +3115,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox:hover.semi-checkbox-indeterminate .semi-checkbox-inner-display {
   background: var(--semi-color-primary-hover);
-  box-shadow: inset 0 0 0 1px var(--semi-color-focus-border);
+  box-shadow: none;
   color: var(--semi-color-white);
 }
 .semi-checkbox:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
@@ -3130,6 +3133,7 @@ body[theme-mode=dark], body .semi-always-dark {
   background: var(--semi-color-primary-active);
   border-color: var(--semi-color-primary-active);
   color: var(--semi-color-white);
+  box-shadow: none;
 }
 .semi-checkbox:active .semi-checkbox-inner-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary-active);
@@ -3181,10 +3185,18 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-checkbox-cardType_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
 }
 .semi-checkbox-cardType_checked:hover {
   background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-checkbox-cardType_checked:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
+.semi-checkbox-cardType_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-checkbox-cardType_disabled:active {
   background: transparent;
@@ -3192,6 +3204,13 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-checkbox-cardType_disabled:hover {
   background: transparent;
 }
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-checkbox-cardType_checked_disabled.semi-checkbox-cardType:hover .semi-checkbox-inner-checked .semi-checkbox-inner-display {
+  box-shadow: none;
+}
 .semi-checkbox-indeterminate .semi-checkbox-inner-display, .semi-checkbox-checked .semi-checkbox-inner-display {
   background: var(--semi-color-primary);
   color: var(--semi-color-white);
@@ -13658,6 +13677,7 @@ body[theme-mode=dark], body .semi-always-dark {
   width: 100%;
   height: 100%;
   margin: 0;
+  cursor: pointer;
 }
 .semi-radio:hover .semi-radio-inner-display {
   background: var(--semi-color-fill-0);
@@ -13668,6 +13688,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:hover .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-hover);
+  border-color: var(--semi-color-primary-hover);
 }
 .semi-radio:active .semi-radio-inner-display {
   background: var(--semi-color-fill-1);
@@ -13677,6 +13698,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-active);
+  border-color: var(--semi-color-primary-active);
 }
 .semi-radio-buttonRadioComponent {
   padding: 4px;
@@ -13734,7 +13756,23 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-cardRadioGroup_checked {
   background: var(--semi-color-primary-light-default);
-  border: 1px solid var(--semi-color-focus-border);
+  border: 1px solid var(--semi-color-primary);
+}
+.semi-radio-cardRadioGroup_checked:hover {
+  border: 1px solid var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-hover);
+}
+.semi-radio-cardRadioGroup_checked:active {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-active);
+}
+.semi-radio-cardRadioGroup_checked:active .semi-radio-inner-checked:hover .semi-radio-inner-display {
+  background: var(--semi-color-primary-active);
 }
 .semi-radio-cardRadioGroup_hover {
   background: var(--semi-color-fill-0);
@@ -13742,12 +13780,23 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-radio-cardRadioGroup_disabled:active {
   background: transparent;
 }
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup {
+  background: var(--semi-color-primary-light-default);
+  border: 1px solid var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
+.semi-radio-cardRadioGroup_checked_disabled.semi-radio-cardRadioGroup:hover .semi-radio-inner-checked .semi-radio-inner-display {
+  border-color: var(--semi-color-primary-disabled);
+}
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-display {
   background: var(--semi-color-disabled-fill);
   border: solid 1px var(--semi-color-border);
 }
 .semi-radio.semi-radio-disabled:hover .semi-radio-inner-checked .semi-radio-inner-display, .semi-radio.semi-radio-disabled:active .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-inner {
   position: absolute;
@@ -13855,10 +13904,11 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display {
   background: var(--semi-color-primary-disabled);
-  border-color: var(--semi-color-border);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-inner-checked .semi-radio-inner-display:hover {
   background: var(--semi-color-primary-disabled);
+  border-color: var(--semi-color-primary-disabled);
 }
 .semi-radio-disabled .semi-radio-addon {
   color: var(--semi-color-disabled-text);
@@ -14020,6 +14070,9 @@ body[theme-mode=dark], body .semi-always-dark {
   height: 24px;
   font-size: 24px;
 }
+.semi-rating-star-wrapper {
+  position: relative;
+}
 .semi-rating-star-first, .semi-rating-star-second {
   color: var(--semi-color-fill-0);
   user-select: none;