@douyinfe/semi-ui 2.4.1 → 2.6.0-beta.0

package/datePicker/quickControl.tsx

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions,jsx-a11y/click-events-have-key-events */
 import React, { PureComponent } from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';

package/datePicker/yearAndMonth.tsx

@@ -208,7 +208,7 @@ class YearAndMonth extends BaseComponent<YearAndMonthProps, YearAndMonthState> {
                     <div className={prefix}>
                         <IconButton
                             noHorizontalPadding={false}
-                            icon={<IconChevronLeft size={iconSize} />}
+                            icon={<IconChevronLeft aria-hidden size={iconSize} />}
                             size={buttonSize}
                             onClick={this.backToMain}
                         >

package/dist/css/semi.css

@@ -19,7 +19,7 @@ body .semi-always-light {
   --semi-blue-2: 152,205,253;
   --semi-blue-3: 101,178,252;
   --semi-blue-4: 50,149,251;
-  --semi-blue-5: 0,119,250;
+  --semi-blue-5: 0,100,250;
   --semi-blue-6: 0,98,214;
   --semi-blue-7: 0,79,179;
   --semi-blue-8: 0,61,143;
@@ -410,7 +410,7 @@ body, body[theme-mode=dark] .semi-always-light {
   --semi-color-bg-4: rgba(var(--semi-white), 1);
   --semi-color-text-0: rgba(var(--semi-grey-9), 1);
   --semi-color-text-1: rgba(var(--semi-grey-9), .8);
-  --semi-color-text-2: rgba(var(--semi-grey-9), .6);
+  --semi-color-text-2: rgba(var(--semi-grey-9), .62);
   --semi-color-text-3: rgba(var(--semi-grey-9), .35);
   --semi-shadow-elevated: 0 0 1px rgba(0, 0, 0, .3), 0 4px 14px rgba(0, 0, 0, .1);
   --semi-border-radius-extra-small: 3px;
@@ -487,9 +487,9 @@ body[theme-mode=dark], body .semi-always-dark {
   --semi-color-nav-bg: rgba(35, 36, 41, 1);
   --semi-shadow-elevated: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 4px 14px rgba(0, 0, 0, .25);
   --semi-color-overlay-bg: rgba(22, 22, 26, .6);
-  --semi-color-fill-0: rgba(var(--semi-white), .05);
-  --semi-color-fill-1: rgba(var(--semi-white), .09);
-  --semi-color-fill-2: rgba(var(--semi-white), .13);
+  --semi-color-fill-0: rgba(var(--semi-white), .12);
+  --semi-color-fill-1: rgba(var(--semi-white), .16);
+  --semi-color-fill-2: rgba(var(--semi-white), .20);
   --semi-color-border: rgba(var(--semi-white), .08);
   --semi-color-shadow: rgba(var(--semi-black), .04);
   --semi-color-bg-0: rgba(22, 22, 26, 1);
@@ -1588,6 +1588,9 @@ body[theme-mode=dark], body .semi-always-dark {
   vertical-align: middle;
   white-space: nowrap;
 }
+.semi-button:focus {
+  outline: 2px solid var(--semi-color-primary-light-active);
+}
 .semi-button-danger {
   background-color: var(--semi-color-danger);
   color: white;
@@ -1601,6 +1604,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-button-danger.semi-button-light, .semi-button-danger.semi-button-borderless {
   color: var(--semi-color-danger);
 }
+.semi-button-danger:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-danger-light-active);
+}
 .semi-button-warning {
   background-color: var(--semi-color-warning);
   color: white;
@@ -1614,6 +1620,9 @@ body[theme-mode=dark], body .semi-always-dark {
 .semi-button-warning.semi-button-light, .semi-button-warning.semi-button-borderless {
   color: var(--semi-color-warning);
 }
+.semi-button-warning:not(.semi-button-borderless):not(.semi-button-light):focus {
+  outline-color: var(--semi-color-warning-light-active);
+}
 .semi-button-tertiary {
   background-color: var(--semi-color-tertiary);
   color: white;
@@ -2612,6 +2621,7 @@ body[theme-mode=dark], body .semi-always-dark {
 }
 .semi-cascader:hover {
   background-color: var(--semi-color-fill-1);
+  border: 1px transparent solid;
 }
 .semi-cascader-small {
   min-height: 24px;
@@ -2687,7 +2697,7 @@ body[theme-mode=dark], body .semi-always-dark {
   color: var(--semi-color-text-2);
 }
 .semi-cascader-selection-tag {
-  margin: 1px 2px;
+  margin: 1px 2px 1px 0;
 }
 .semi-cascader-selection-tag:first-child {
   margin-left: 0;
@@ -4739,6 +4749,10 @@ body[theme-mode=dark], body .semi-always-dark {
   padding-top: 6px;
   padding-bottom: 6px;
 }
+.semi-form-field[x-label-pos=left] .semi-radioGroup-buttonRadio {
+  padding-top: 0;
+  padding-bottom: 0;
+}
 .semi-form-field[x-label-pos=left] .semi-switch,
 .semi-form-field[x-label-pos=left] .semi-rating {
   vertical-align: middle;
@@ -11447,6 +11461,7 @@ body[theme-mode=dark], body .semi-always-dark {
   cursor: not-allowed;
   color: var(--semi-color-disabled-text);
   background-color: var(--semi-color-disabled-fill);
+  -webkit-text-fill-color: var(--semi-color-disabled-text);
 }
 .semi-input-wrapper-disabled:hover {
   background-color: var(--semi-color-disabled-fill);
@@ -16206,7 +16221,6 @@ body[theme-mode=dark], body .semi-always-dark {
   word-break: break-all;
   word-wrap: break-word;
   position: relative;
-  user-select: none;
 }
 .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-left, .semi-table-thead > .semi-table-row > .semi-table-row-head.semi-table-cell-fixed-right {
   z-index: 101;
@@ -16478,7 +16492,7 @@ body[theme-mode=dark], body .semi-always-dark {
   position: relative;
   z-index: 1;
   padding: 16px 12px;
-  color: var(--semi-color-disabled-bg);
+  color: var(--semi-color-text-2);
   font-size: 14px;
   text-align: center;
   background: transparent;
@@ -19438,11 +19452,10 @@ p.semi-typography-extended,
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-add {
   display: inline-flex;
-  order: 2;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-prompt {
   display: inline-flex;
-  order: 1;
+  order: -1;
 }
 .semi-upload[x-prompt-pos=left] .semi-upload-file-list {
   order: 2;
@@ -19622,15 +19635,9 @@ p.semi-typography-extended,
 .semi-upload-picture[x-prompt-pos=bottom] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=bottom] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture[x-prompt-pos=right] .semi-upload-prompt {
   order: 1;
 }
-.semi-upload-picture[x-prompt-pos=right] .semi-upload-add {
-  order: 0;
-}
 .semi-upload-picture-add {
   background-color: var(--semi-color-fill-0);
   height: 96px;
@@ -19642,7 +19649,6 @@ p.semi-typography-extended,
   border: 2px dashed var(--semi-color-border);
   color: var(--semi-color-tertiary);
   border-radius: var(--semi-border-radius-small);
-  order: 2;
   cursor: pointer;
 }
 .semi-upload-picture-add:hover {
@@ -19682,35 +19688,32 @@ p.semi-typography-extended,
   border-radius: var(--semi-border-radius-small);
 }
 .semi-upload-picture-file-card-close {
-  width: 16px;
-  height: 16px;
-  background-color: var(--semi-color-overlay-bg);
+  visibility: hidden;
+  display: inline-flex;
   position: absolute;
   top: 8px;
   right: 8px;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  display: none;
   border-radius: var(--semi-border-radius-circle);
-  color: white;
   cursor: pointer;
   transition: all 0s;
 }
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
-  display: flex;
-}
-.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
-  visibility: visible;
+.semi-upload-picture-file-card-icon-close {
+  font-size: 16px;
+  color: var(--semi-color-white);
 }
-.semi-upload-picture-file-card .semi-progress-circle {
+.semi-upload-picture-file-card::before {
+  visibility: hidden;
+  background-color: var(--semi-color-overlay-bg);
+  content: "";
   position: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
 }
 .semi-upload-picture-file-card-retry {
-  background-color: #fff;
+  visibility: hidden;
+  background-color: var(--semi-color-white);
   width: 24px;
   height: 24px;
   position: absolute;
@@ -19738,6 +19741,15 @@ p.semi-typography-extended,
   color: var(--semi-color-white);
   transform: translate3D(-50%, -50%, 0);
 }
+.semi-upload-picture-file-card-preview {
+  visibility: hidden;
+  display: inline-flex;
+  position: absolute;
+  cursor: pointer;
+  top: 50%;
+  left: 50%;
+  transform: translate3D(-50%, -50%, 0);
+}
 .semi-upload-picture-file-card-pic-info {
   display: inline-flex;
   box-sizing: border-box;
@@ -19769,6 +19781,30 @@ p.semi-typography-extended,
 .semi-upload-picture-file-card-error {
   outline: 1px solid var(--semi-color-danger);
 }
+.semi-upload-picture-file-card:hover::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-close {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-replace {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-retry {
+  visibility: visible;
+}
+.semi-upload-picture-file-card:hover .semi-upload-picture-file-card-preview {
+  visibility: visible;
+}
+.semi-upload-picture-file-card-uploading::before {
+  visibility: visible;
+}
+.semi-upload-picture-file-card .semi-progress-circle {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
 .semi-upload-drag-area {
   border-radius: var(--semi-border-radius-small);
   border: 2px dashed var(--semi-color-border);