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

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;
@@ -18862,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);
@@ -20180,6 +20195,9 @@ 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);
 }