@douyinfe/semi-ui 2.3.0-beta.0 → 2.4.0

package/_base/_story/a11y.scss

@@ -22,7 +22,6 @@ body[data-page="a11y"] {
     }
     
     .grid {
-    
         .semi-row,
         .semi-row-flex {
             text-align: center;

package/_base/_story/index.scss

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

package/avatar/avatarGroup.tsx

@@ -76,6 +76,6 @@ export default class AvatarGroup extends PureComponent<AvatarGroupProps> {
 
         }
 
-        return <div className={groupCls} aria-label="avatar group">{inner}</div>;
+        return <div className={groupCls}>{inner}</div>;
     }
 }

package/avatar/index.tsx

@@ -136,24 +136,20 @@ export default class Avatar extends BaseComponent<AvatarProps, AvatarState> {
         );
         let content = children;
         const hoverRender = hoverContent ? (<div className={`${prefixCls}-hover`}>{hoverContent}</div>) : null;
-        let ariaLabel;
         if (isImg) {
             content = (
                 <img src={src} srcSet={srcSet} onError={this.handleError} alt={alt} {...imgAttr} />
             );
-            ariaLabel = 'avatar';
         } else if (typeof children === 'string') {
             content = (
                 <span className={`${prefixCls}-content`}>
                     <span className={`${prefixCls}-label`}>{children}</span>
                 </span>
             );
-            ariaLabel = `avatar of ${children}`;
         }
         return (
             // eslint-disable-next-line jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events
             <span
-                aria-label={ariaLabel}
                 {...(others as any)}
                 style={style}
                 className={avatarCls}

package/button/__test__/button.test.js

@@ -29,7 +29,7 @@ describe('Button', () => {
 
     it(`test loading`, () => {
         const elem = mount(<Button icon={<IconEdit />} loading />);
-        expect(elem.find({ 'aria-label': 'spin' }).length).toBe(1);
+        expect(elem.find({ 'data-icon': 'spin' }).length).toBe(1);
     });
 
     it('test button type',()=>{

package/checkbox/_story/checkbox.stories.js

@@ -578,9 +578,9 @@ export const CheckboxGroupCardStyle = () => (
     </CheckboxGroup>
     <br />
     <br />
-    <div>radio disabled</div>
+    <div>Checkbox disabled</div>
     <CheckboxGroup key={getUuidShort({ prefix: '' })} aria-label='group demo' 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" disabled extra="disabled+unchecked" style={{ width: 280 }}>

package/collapse/index.tsx

@@ -97,7 +97,7 @@ class Collapse extends BaseComponent<CollapseReactProps, CollapseState> {
         const clsPrefix = cls(cssClasses.PREFIX, className);
         const { activeSet } = this.state;
         return (
-            <div className={clsPrefix} style={style} aria-label={`Collapse`}>
+            <div className={clsPrefix} style={style}>
                 <CollapseContext.Provider
                     value={{
                         activeSet,

package/collapse/item.tsx

@@ -65,7 +65,7 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                     {iconPosLeft ? icon : null}
                     <span>{header}</span>
                     <span className={`${cssClasses.PREFIX}-header-right`}>
-                        <span aria-label={'Extra of collapse header'}>{extra}</span>
+                        <span>{extra}</span>
                         {iconPosLeft ? null : icon}
                     </span>
                 </>
@@ -108,7 +108,6 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
         });
         return (
             <div
-                aria-label={'Collapse panel'}
                 className={itemCls}
                 {...restProps}
             >
@@ -129,7 +128,6 @@ export default class CollapsePanel extends PureComponent<CollapsePanelProps> {
                             reCalcKey={reCalcKey}>
                             <div
                                 className={contentCls}
-                                aria-label={'Collapse content'}
                                 aria-hidden={!active}
                                 id={this.ariaID}
                             >

package/datePicker/_story/RenderDate/index.js

@@ -2,20 +2,30 @@ import React from 'react';
 import DatePicker from '../../index';
 import { Tooltip } from '@douyinfe/semi-ui';
 
+/**
+ * 使用 Chromatic UI 测试
+ */
 export default function Demo() {
     const dateStyle = { width: '100%', height: '100%', border: '1px solid #0077FA', display: 'flex', justifyContent: 'center', alignItems: 'center' };
+    const defaultValue = new Date('2021-01-10 00:00:00');
     const renderDate = (dayNumber, fullDate) => {
         if (dayNumber === 1) {
             return <Tooltip content={'Always Day 1'} >
                 <div style={dateStyle}>{dayNumber}</div>
-            </Tooltip>
+            </Tooltip>;
         }
         return dayNumber;
     };
     return (
-        <div>
+        <div style={{ height: '100vh' }}>
             <div>通过 renderDate 可以自定义日期的显示内容</div>
-            <DatePicker renderDate={renderDate} />
+            <DatePicker motion={false} defaultValue={defaultValue} defaultOpen renderDate={renderDate} />
         </div>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+    },
+};

package/datePicker/_story/RenderFullDate/index.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import DatePicker from '../../index';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
 import classNames from 'classnames';
 import '@douyinfe/semi-foundation/datePicker/datePicker.scss'; 
+import './index.scss';
 
+/**
+ * 开启 Chromatic UI 测试
+ */
 export default function Demo() {
     const dayStyle = {
         display: 'flex',
@@ -33,24 +37,42 @@ export default function Demo() {
             </div>
         );
     };
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+        motion: false,
+    };
+    const singleDefaultValue = new Date('2021-01-08');
+    const multipleDefaultValue = [new Date('2021-01-08'), new Date('2021-01-09'), new Date('2021-01-10'), new Date('2021-01-19')];
+    const rangeDefaultValue = [new Date('2021-12-08'), new Date('2021-01-20')];
 
     return (
-        <div>
+        <div style={{ height: '100vh' }}>
             <div>
                 通过 renderFullDate 可以自定义日期单元格子的渲染，API 提供日期的当前状态：是否被选中，是否是当前日等。
             </div>  
-            <div>
-                单选选中
-                <DatePicker style={{ width: '230px' }} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                多选选中
-                <DatePicker style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} />
-            </div>
-            <div>
-                范围选中
-                <DatePicker style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} />
-            </div>
+            <Space wrap spacing={[12, 400]}>
+                <div>
+                    单选选中
+                    <DatePicker {...props} style={{ width: '230px' }} renderFullDate={renderFullDate} defaultValue={singleDefaultValue} />
+                </div>
+                <div>
+                    多选选中
+                    <DatePicker {...props} style={{ width: '230px' }} multiple={true} renderFullDate={renderFullDate} defaultValue={multipleDefaultValue} />
+                </div>
+                <div>
+                    范围选中
+                    <DatePicker {...props} style={{ width: '230px' }} type={'dateRange'} renderFullDate={renderFullDate} defaultValue={rangeDefaultValue} />
+                </div>
+            </Space>
         </div>
     );
 }
+Demo.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};

package/datePicker/_story/RenderFullDate/index.scss

@@ -20,4 +20,4 @@
 
 .components-datepicker-demo-day-disabled {
     background: rgba(46, 50, 56, 0.04);
-}
+}

package/datePicker/_story/datePicker.stories.js

@@ -36,7 +36,7 @@ import DatePickerSlot from './DatePickerSlot';
 import DatePickerTimeZone from './DatePickerTimeZone';
 import BetterRangePicker from './BetterRangePicker';
 import SyncSwitchMonth from './SyncSwitchMonth';
-import { YearButton } from './v2';
+export * from './v2';
 
 export default {
   title: 'DatePicker',
@@ -67,7 +67,6 @@ export {
   DatePickerTimeZone,
   BetterRangePicker,
   SyncSwitchMonth,
-  YearButton
 }
 
 const demoDiv = {
@@ -76,7 +75,7 @@ const demoDiv = {
 };
 
 export const DatePickerDefault = () => (
-  <div style={demoDiv}>
+  <div style={{...demoDiv, height: '100vh'}}>
     <span>datePicker施工现场</span>
     <DatePicker
       insetLabel={<span>日期</span>}
@@ -87,14 +86,7 @@ export const DatePickerDefault = () => (
     <br />
 
     <span>datePicker默认显示</span>
-    <DatePicker defaultOpen />
-    <br />
-
-    <span>defaultValue: new Date('2019-07-07')</span>
-    <DatePicker
-      defaultValue={new Date('2019-07-07')}
-      onOpenChange={isOpen => console.log(isOpen)}
-    />
+    <DatePicker />
     <br />
 
     <span>defaultValue: 2019-07-09</span>
@@ -106,8 +98,23 @@ export const DatePickerDefault = () => (
       defaultValue={1569888000000}
       onChange={(input, value) => console.log({ input, value })}
     />
+    <br />
+
+    <span>defaultValue: new Date('2019-07-07')</span>
+    <DatePicker
+      defaultValue={new Date('2019-07-07')}
+      onOpenChange={isOpen => console.log(isOpen)}
+      defaultOpen
+      motion={false}
+    />
   </div>
 );
+DatePickerDefault.parameters = {
+  chromatic: {
+    disableSnapshot: false,
+    delay: 300
+  }
+};
 
 export const DatePickerCallbacks = () => {
   const printArgs = (...args) => console.log(...args);
@@ -806,3 +813,4 @@ export const FixTriggerRenderClosePanel = () => {
   );
 };
 FixTriggerRenderClosePanel.storyName = "fix triggerRender close bug"
+

package/datePicker/_story/v2/PanelOpen.jsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import { DatePicker, Space } from '@douyinfe/semi-ui';
+
+/**
+ * Test with Chromatic
+ */
+export default function App() {
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultValue = new Date('2021-01-01 00:00:00');
+    const props = {
+        defaultOpen: true,
+        position: 'bottomLeft',
+        autoAdjustOverflow: false,
+        defaultPickerValue: defaultValue,
+        needConfirm: true,
+        motion: false,
+    };
+    const spacing = [48, 400];
+    // 使用过去的时间，避免当前日变动引入 UI 测试失败
+    const defaultRangeValue = [defaultValue, new Date('2021-03-31 00:00:00')];
+    return (
+        <div style={{ height: '100vh' }}>
+            <Space wrap spacing={spacing}>
+                <DatePicker {...props} type="month" defaultValue={defaultValue} />
+                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} density="compact" />
+                <DatePicker {...props} type="dateTimeRange" defaultValue={defaultRangeValue} />
+            </Space>
+        </div>
+    );
+}
+
+App.parameters = {
+    chromatic: {
+        disableSnapshot: false,
+        delay: 3000,
+        viewports: [1800]
+    },
+};
+App.storyName = 'defaultOpen';

package/datePicker/_story/v2/index.js

@@ -1 +1,2 @@
-export { default as YearButton } from './YearButton';
+export { default as YearButton } from './YearButton';
+export { default as PanelOpen  } from './PanelOpen';

package/dist/css/semi.css

@@ -648,6 +648,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -1667,21 +1668,27 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-button-borderless {
   background-color: transparent;
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-borderless:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light {
   background-color: var(--semi-color-fill-0);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):hover {
   background-color: var(--semi-color-fill-1);
+  border: 0 transparent solid;
 }
 .semi-button-light:not(.semi-button-disabled):active {
   background-color: var(--semi-color-fill-2);
+  border: 0 transparent solid;
 }
 .semi-button-size-small {
   height: 24px;
@@ -12060,6 +12067,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding: 0 0;
   font-size: 14px;
   font-weight: 600;
+  background-color: transparent;
   color: var(--semi-color-text-0);
   border-bottom: 0 solid transparent;
 }
@@ -12082,6 +12090,7 @@ body[theme-mode=dark], body .semi-always-dark {
   text-align: right;
   border-radius: 0 0 5px 5px;
   border-top: 0 solid transparent;
+  background-color: transparent;
 }
 .semi-modal-footer .semi-button {
   margin-left: 12px;
@@ -14167,6 +14176,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-scrolllist-header-title {
   padding: 16px 0;
   font-weight: 600;
+  color: var(--semi-color-text-0);
   font-size: 14px;
   line-height: 20px;
   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Helvetica, Arial, sans-serif;
@@ -14336,6 +14346,7 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 8px;
   padding-bottom: 8px;
   color: var(--semi-color-text-0);
+  border-radius: 0;
   position: relative;
   display: flex;
   flex-wrap: nowrap;
@@ -14415,9 +14426,11 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid transparent;
 }
 .semi-select:active {
   background-color: var(--semi-color-fill-2);
+  border: 1px solid var(--semi-color-focus-border);
 }
 .semi-select:focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -14697,6 +14710,7 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-select-option-list {
   overflow-x: hidden;
   overflow-y: auto;
+  padding: 0 0 0 0;
 }
 .semi-select-option-list-chosen .semi-select-option-icon {
   display: flex;
@@ -16135,6 +16149,9 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-0);
   width: 100%;
 }
+.semi-table-wrapper[data-column-fixed=true] {
+  z-index: 1;
+}
 .semi-table-middle .semi-table-tbody > .semi-table-row > .semi-table-row-cell {
   padding-top: 12px;
   padding-bottom: 12px;
@@ -18859,6 +18876,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-tree-select:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px solid inherit;
 }
 .semi-tree-select-focus {
   border: 1px solid var(--semi-color-focus-border);
@@ -20113,20 +20131,20 @@ p.semi-typography-extended,
 .semi-input-textarea-wrapper .semi-input-clearbtn-hidden {
   visibility: hidden;
 }
-.semi-input-textarea-wrapper-readonly {
-  cursor: default;
-}
-.semi-input-textarea-wrapper-disabled {
+.semi-input-textarea-wrapper-disabled, .semi-input-textarea-wrapper-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled:hover {
+.semi-input-textarea-wrapper-disabled:hover, .semi-input-textarea-wrapper-readonly:hover {
   background-color: var(--semi-color-disabled-fill);
 }
-.semi-input-textarea-wrapper-disabled::placeholder {
+.semi-input-textarea-wrapper-disabled::placeholder, .semi-input-textarea-wrapper-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-wrapper-readonly {
+  cursor: text;
+}
 .semi-input-textarea-wrapper-error {
   background-color: var(--semi-color-danger-light-default);
   border-color: var(--semi-color-danger-light-default);
@@ -20177,23 +20195,29 @@ p.semi-typography-extended,
   box-sizing: border-box;
   color: var(--semi-color-text-0);
 }
+.semi-input-textarea:hover {
+  border-color: transparent;
+}
 .semi-input-textarea::placeholder {
   color: var(--semi-color-text-2);
 }
 .semi-input-textarea-showClear {
   padding-right: 36px;
 }
-.semi-input-textarea-disabled {
+.semi-input-textarea-disabled, .semi-input-textarea-readonly {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: transparent;
 }
-.semi-input-textarea-disabled:hover {
+.semi-input-textarea-disabled:hover, .semi-input-textarea-readonly:hover {
   background-color: transparent;
 }
-.semi-input-textarea-disabled::placeholder {
+.semi-input-textarea-disabled::placeholder, .semi-input-textarea-readonly::placeholder {
   color: var(--semi-color-disabled-text);
 }
+.semi-input-textarea-readonly {
+  cursor: text;
+}
 .semi-input-textarea-autosize {
   overflow: hidden;
 }