style: 优化input-tag、input-year-range、list-select等组件样式 (baidu#9477)

* style: 优化tag组件样式 * 组件样式优化 * 修复编辑器组件提示溢出问题 * 优化年份\季度\月份范围选择器组件样式 * 更新快照 * 更新快照 --------- Co-authored-by: qinhaoyan <30946345+qinhaoyan@users.noreply.github.com>
lhtuling · Jan 23, 2024 · 002b824 · 002b824
1 parent e82b604
commit 002b824
Show file tree

Hide file tree

Showing 15 changed files with 84 additions and 44 deletions.
diff --git a/packages/amis-editor-core/scss/_renderers.scss b/packages/amis-editor-core/scss/_renderers.scss
@@ -271,7 +271,7 @@
   .ae-Renderer-preview {
     position: relative;
     max-height: 200px;
-    // overflow: hidden;
+    overflow: auto;
   }
 }
 

diff --git a/packages/amis-theme-editor-helper/src/systemTheme/component.ts b/packages/amis-theme-editor-helper/src/systemTheme/component.ts
@@ -4428,7 +4428,7 @@ const component: ThemeDefinition['component'] = {
           paddingLeft: 'var(--sizes-size-3)',
           paddingRight: 'var(--sizes-size-3)',
           marginTop: 'var(--sizes-size-0)',
-          marginBottom: 'var(--sizes-size-2)',
+          marginBottom: 'var(--sizes-size-0)',
           marginLeft: 'var(--sizes-size-0)',
           marginRight: 'var(--sizes-size-3)'
         },
@@ -5701,7 +5701,7 @@ const component: ThemeDefinition['component'] = {
           paddingRight: 'var(--sizes-size-6)'
         },
         'bg-color': 'var(--colors-neutral-fill-11)',
-        'hover-color': 'var(--colors-brand-5)',
+        'hover-color': 'var(--colors-neutral-text-2)',
         'hover-bg-color': 'var(--colors-brand-10)'
       }
     }

diff --git a/packages/amis-ui/scss/_components.scss b/packages/amis-ui/scss/_components.scss
@@ -2805,7 +2805,7 @@
   --select-multiple-paddingLeft: var(--sizes-size-3);
   --select-multiple-paddingRight: var(--sizes-size-3);
   --select-multiple-marginTop: var(--sizes-size-0);
-  --select-multiple-marginBottom: var(--sizes-size-2);
+  --select-multiple-marginBottom: var(--sizes-size-0);
   --select-multiple-marginLeft: var(--sizes-size-0);
   --select-multiple-marginRight: var(--sizes-size-3);
   --select-multiple-color: var(--colors-neutral-text-2);
@@ -2910,7 +2910,7 @@
   --Form-selectValue-onInvalid-color: var(--danger);
   --Form-valueLabel-maxWidth: #{px2rem(120px)};
   --Form-select-onFocus-boxShadow: none;
-  --ResultBox-tag-height: #{px2rem(24px)};
+  --ResultBox-tag-height: #{px2rem(22px)};
   --ResultBox-tag-marginBottom: var(--select-multiple-marginBottom);
   --ResultBox-icon--onDisabled-color: #ebebeb;
   --ResultBox-icon--onHover-color: var(--select-multiple-icon-hover-color);
@@ -3797,7 +3797,7 @@
   --inputTag-option-paddingLeft: var(--sizes-size-6);
   --inputTag-option-paddingRight: var(--sizes-size-6);
   --inputTag-option-bg-color: var(--colors-neutral-fill-11);
-  --inputTag-option-hover-color: var(--colors-brand-5);
+  --inputTag-option-hover-color: var(--colors-neutral-text-2);
   --inputTag-option-hover-bg-color: var(--colors-brand-10);
   --inputTag-popover-maxHeight: 300px;
 

diff --git a/packages/amis-ui/scss/_properties.scss b/packages/amis-ui/scss/_properties.scss
@@ -819,7 +819,7 @@ $Table-strip-bg: transparent;
   --SearchBox-hover-color: var(--colors-brand-5);
   --SearchBox-focus-color: var(--colors-brand-4);
   --SearchBox-search-icon-color: var(--colors-neutral-text-5);
-  --SearchBox-enhonce-icon-color: var(--button-default-default-font-color);
+  --SearchBox-enhonce-icon-color: var(--button-primary-default-font-color);
   --SearchBox-clearable-icon-color: var(--colors-neutral-text-7);
   --SearchBox-clearable-icon-size: var(--sizes-size-9);
   --SearchBox-height: var(--sizes-base-15);

diff --git a/packages/amis-ui/scss/components/_search-box.scss b/packages/amis-ui/scss/components/_search-box.scss
@@ -15,7 +15,6 @@
   transition: all var(--animation-duration) ease-in-out;
   border: var(--Form-input-borderWidth) solid transparent;
   border-radius: var(--Form-input-borderRadius);
-  overflow: hidden;
 
   &:hover {
     background: var(--Form-input-onHover-bg);
@@ -25,6 +24,7 @@
     background: var(--Form-input-bg);
     border: var(--Form-input-borderWidth) solid var(--Form-input-borderColor);
     width: var(--SearchBox-width);
+    position: relative;
     > input {
       flex-grow: 1;
     }
@@ -121,9 +121,13 @@
   }
 
   &--enhance.is-active &-searchBtn {
-    height: 100%;
     color: var(--SearchBox-enhonce-icon-color);
     background: var(--SearchBox-hover-color);
+    position: absolute;
+    top: px2rem(-1px);
+    bottom: px2rem(-1px);
+    right: px2rem(-1px);
+    border-radius: 0 var(--borderRadius) var(--borderRadius) 0;
     svg {
       top: px2rem(2px);
     }

diff --git a/packages/amis-ui/scss/components/form/_date.scss b/packages/amis-ui/scss/components/form/_date.scss
@@ -719,7 +719,7 @@ td.rdtQuarter {
   > span {
     display: inline-block;
     color: var(--inputDate-other-color);
-    background: var(--inputDate-other-bg-color);
+    // background: var(--inputDate-other-bg-color);
     border-radius: var(--inputDate-other-top-left-border-radius)
       var(--inputDate-other-top-right-border-radius)
       var(--inputDate-other-bottom-right-border-radius)
@@ -760,7 +760,7 @@ td.rdtQuarter {
   }
 }
 
-.rdtPicker .rdtActive.rdtBetween.rdtStartDay {
+.rdtPicker .rdtActive.rdtBetween.rdtStart {
   background: linear-gradient(
     to right,
     transparent 0%,
@@ -770,6 +770,16 @@ td.rdtQuarter {
   );
 }
 
+.rdtPicker .rdtActive.rdtBetween.rdtEnd {
+  background: linear-gradient(
+    to right,
+    var(--Calendar-cell-onBetween-bg) 0%,
+    var(--Calendar-cell-onBetween-bg) 50%,
+    transparent 51%,
+    transparent 100%
+  );
+}
+
 .rdt .rdtPicker td.is-disabled {
   cursor: not-allowed !important;
   background: var(--Calendar-cell-onDisabled-bg);
@@ -785,16 +795,6 @@ td.rdtQuarter {
   }
 }
 
-.rdtPicker .rdtActive.rdtBetween.rdtEndDay {
-  background: linear-gradient(
-    to right,
-    var(--Calendar-cell-onBetween-bg) 0%,
-    var(--Calendar-cell-onBetween-bg) 50%,
-    transparent 51%,
-    transparent 100%
-  );
-}
-
 .#{$ns}DateCalendar {
   display: inline-block;
   border-width: var(--DatePicker-borderWidth);

diff --git a/packages/amis-ui/scss/components/form/_list.scss b/packages/amis-ui/scss/components/form/_list.scss
@@ -161,14 +161,14 @@
       &:after {
         content: '';
         position: absolute;
-        width: px2rem(10px);
-        height: var(--gap-xs);
-        border-color: var(--ListControl-item-onActive-after-borderColor);
         border-style: solid;
-        border-width: 0 0 px2rem(2px) px2rem(2px);
-        right: px2rem(1px);
+        border-width: 0 0 px2rem(1px) px2rem(1px);
+        right: px2rem(2px);
         bottom: px2rem(6px);
         transform: rotate(-40deg);
+        width: var(--Checkbox--full-inner-size);
+        height: calc(var(--Checkbox--full-inner-size) / 2);
+        border-color: #fff;
       }
     }
 

diff --git a/packages/amis-ui/scss/components/form/_select.scss b/packages/amis-ui/scss/components/form/_select.scss
@@ -595,6 +595,11 @@
   // PopOver 上已经配置了，这个要是配置就会覆盖，所以先干掉好了
   // z-index: 10;
 }
+.#{$ns}InputGroup:hover {
+  .#{$ns}Select-popover {
+    border-color: var(--Form-select-outer-borderColor) !important;
+  }
+}
 
 .#{$ns}SelectControl {
   &:not(.is-inline) > .#{$ns}Select {
@@ -607,8 +612,6 @@
   }
 
   .#{$ns}TransferDropDown-popover {
-    border: none;
-
     .#{$ns}Tree-list {
       .#{$ns}Tree-item {
         .#{$ns}Tree-itemLabel,

diff --git a/packages/amis-ui/scss/components/form/_tag.scss b/packages/amis-ui/scss/components/form/_tag.scss
@@ -11,9 +11,7 @@
   }
 
   > .#{$ns}TagControl-popover {
-    // box-shadow: none;
     padding: 0;
-    border: none;
     width: 100%;
     margin-top: px2rem(4px);
 

diff --git a/packages/amis-ui/scss/components/form/_transfer.scss b/packages/amis-ui/scss/components/form/_transfer.scss
@@ -251,10 +251,6 @@
         var(--transfer-search-bottom-right-border-radius)
         var(--transfer-search-bottom-left-border-radius);
       box-shadow: var(--transfer-search-shadow);
-      padding: var(--transfer-search-input-paddingTop)
-        var(--transfer-search-input-paddingRight)
-        var(--transfer-search-input-paddingBottom)
-        var(--transfer-search-input-paddingLeft);
 
       &:hover {
         border-color: var(--transfer-search-border-hover-color);

diff --git a/packages/amis-ui/src/components/DateRangePicker.tsx b/packages/amis-ui/src/components/DateRangePicker.tsx
@@ -1552,11 +1552,11 @@ export class DateRangePicker extends React.Component<
     }
 
     if (startDate && currentDate.isSame(startDate, 'day')) {
-      props.className += ' rdtActive rdtStartDay';
+      props.className += ' rdtActive rdtStart';
     }
 
     if (endDate && currentDate.isSame(endDate, 'day')) {
-      props.className += ' rdtActive rdtEndDay';
+      props.className += ' rdtActive rdtEnd';
     }
 
     const {className, ...others} = this.getDisabledElementProps(
@@ -1591,6 +1591,19 @@ export class DateRangePicker extends React.Component<
       props.className += ' rdtBetween';
     }
 
+    // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+    if (startDate && endDate && props.className.includes('rdtActive')) {
+      props.className = props.className.replace('rdtActive', '');
+    }
+
+    if (startDate && currentDate.isSame(startDate, 'month')) {
+      props.className += ' rdtActive rdtStart';
+    }
+
+    if (endDate && currentDate.isSame(endDate, 'month')) {
+      props.className += ' rdtActive rdtEnd';
+    }
+
     const {className, ...others} = this.getDisabledElementProps(
       currentDate,
       'month'
@@ -1616,6 +1629,19 @@ export class DateRangePicker extends React.Component<
       props.className += ' rdtBetween';
     }
 
+    // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+    if (startDate && endDate && props.className.includes('rdtActive')) {
+      props.className = props.className.replace('rdtActive', '');
+    }
+
+    if (startDate && currentDate.isSame(startDate, 'quarter')) {
+      props.className += ' rdtActive rdtStart';
+    }
+
+    if (endDate && currentDate.isSame(endDate, 'quarter')) {
+      props.className += ' rdtActive rdtEnd';
+    }
+
     const {className, ...others} = this.getDisabledElementProps(
       currentDate,
       'quarter'
@@ -1640,6 +1666,19 @@ export class DateRangePicker extends React.Component<
       props.className += ' rdtBetween';
     }
 
+    // 如果已经选择了开始时间和结束时间，那么中间的时间都不应该高亮
+    if (startDate && endDate && props.className.includes('rdtActive')) {
+      props.className = props.className.replace('rdtActive', '');
+    }
+
+    if (startDate && currentDate.isSame(startDate, 'year')) {
+      props.className += ' rdtActive rdtStart';
+    }
+
+    if (endDate && currentDate.isSame(endDate, 'year')) {
+      props.className += ' rdtActive rdtEnd';
+    }
+
     const {className, ...others} = this.getDisabledElementProps(
       currentDate,
       'year'

diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputMonthRange.test.tsx.snap
@@ -192,7 +192,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = `
                             </tr>
                             <tr>
                               <td
-                                class="rdtMonth rdtActive rdtBetween"
+                                class="rdtMonth  rdtBetween rdtActive rdtStart"
                                 data-value="9"
                               >
                                 <span>
@@ -343,7 +343,7 @@ exports[`Renderer:inputMonthRange with embed 1`] = `
                                 </span>
                               </td>
                               <td
-                                class="rdtMonth rdtActive rdtBetween"
+                                class="rdtMonth  rdtBetween rdtActive rdtEnd"
                                 data-value="10"
                               >
                                 <span>

diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputQuarterRange.test.tsx.snap
@@ -141,7 +141,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = `
                                 </span>
                               </td>
                               <td
-                                class="rdtQuarter rdtActive rdtBetween"
+                                class="rdtQuarter  rdtBetween rdtActive rdtStart rdtActive rdtEnd"
                                 data-value="4"
                               >
                                 <span>
@@ -218,7 +218,7 @@ exports[`Renderer:InputQuarterRange with embed 1`] = `
                                 </span>
                               </td>
                               <td
-                                class="rdtQuarter rdtActive rdtBetween"
+                                class="rdtQuarter  rdtBetween rdtActive rdtStart rdtActive rdtEnd"
                                 data-value="4"
                               >
                                 <span>

diff --git a/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap b/packages/amis/__tests__/renderers/Form/__snapshots__/inputYearRange.test.tsx.snap
@@ -166,7 +166,7 @@ exports[`Renderer:inputYearRange with embed 1`] = `
                             </tr>
                             <tr>
                               <td
-                                class="rdtYear rdtActive rdtBetween"
+                                class="rdtYear  rdtBetween rdtActive rdtStart"
                                 data-value="1995"
                               >
                                 <span>
@@ -317,7 +317,7 @@ exports[`Renderer:inputYearRange with embed 1`] = `
                                 </span>
                               </td>
                               <td
-                                class="rdtYear rdtActive rdtBetween"
+                                class="rdtYear  rdtBetween rdtActive rdtEnd"
                                 data-value="2076"
                               >
                                 <span>

diff --git a/packages/amis/__tests__/renderers/Form/dateRange.test.tsx b/packages/amis/__tests__/renderers/Form/dateRange.test.tsx
@@ -221,7 +221,7 @@ test('Renderer:dateRange with minDuration & maxDuration', async () => {
 
   expect(
     container.querySelector(
-      '.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEndDay.rdtDisabled'
+      '.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEnd.rdtDisabled'
     )!
   ).toBeInTheDocument();
 
@@ -238,7 +238,7 @@ test('Renderer:dateRange with minDuration & maxDuration', async () => {
 
   expect(
     container.querySelector(
-      '.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEndDay.rdtDisabled'
+      '.cxd-DateRangePicker-picker-wrap .rdtDay.rdtActive.rdtEnd.rdtDisabled'
     )!
   ).toBeInTheDocument();
 });