style:组件time/date/anchornav/progress/alert样式对齐4.0 (#4890)

* style:组件time/date/anchornav/progress/alert样式对齐4.0 * test:更新测试用例 * pref:日期图标替换 * test:更新测试用例 Co-authored-by: hongyang03 <hongyang03@baidu.com>
2024-11-29 18:48:45 +08:00 · 2022-07-26 15:57:00 +08:00 · 2022-07-26 15:57:00 +08:00 · b03f895c48
commit b03f895c48
parent 1cf6fcbfbe
22 changed files with 267 additions and 69 deletions
--- a/docs/zh-CN/components/progress.md
+++ b/docs/zh-CN/components/progress.md
@ -212,19 +212,51 @@ List 的内容、Card 卡片的内容配置同上
 }
 ```

-## 圆形进度条设置线条宽度
+## 设置线条宽度

 可设置 strokeWidth 调整线条宽度

 ```schema
 {
    "type": "page",
-    "body": {
-        "type": "progress",
-        "value": 60,
-        "mode": "dashboard",
-        "strokeWidth": 3
-    }
+    "body": [
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "line",
+            "strokeWidth": 4
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "line",
+            "strokeWidth": 8
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "line",
+            "strokeWidth": 12
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "dashboard",
+            "strokeWidth": 4
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "dashboard",
+            "strokeWidth": 8
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "dashboard",
+            "strokeWidth": 12
+        },
+    ]
 }
 ```

--- a/fis-conf.js
+++ b/fis-conf.js
@ -15,7 +15,7 @@ fis.set('project.ignore', [
  '.*/**'
 ]);
 // 配置只编译哪些文件。
-
+fis.config.set("project.watch.usePolling", true)
 const Resource = fis.require('postpackager-loader/lib/resource.js');
 const versionHash = fis.util.md5(package.version);

--- a/packages/amis-ui/scss/_properties.scss
+++ b/packages/amis-ui/scss/_properties.scss
@ -131,8 +131,8 @@
  --Alert-boxShadow: none;
  --Alert-fontSize: var(--fontSizeBase);
  --Alert-marginBottom: var(--gap-md);
-  --Alert-paddingX: var(--gap-sm);
-  --Alert-paddingY: var(--gap-sm);
+  --Alert-paddingX: var(--gap-md);
+  --Alert-paddingY: var(--gap-xs);

  --Audio-border: #{px2rem(1px)} solid #dee2e6;
  --Audio-height: #{px2rem(50px)};
@ -607,7 +607,7 @@
  --DatePicker-height: var(--Form-input-height);
  --DatePicker-iconColor: var(--icon-color);
  --DatePicker-lineHeight: var(--Form-input-lineHeight);
-  --DatePicker-onFocused-borderColor: var(--Form-input-onFocused-borderColor);
+  --DatePicker-onFocused-borderColor: #144BCC;
  --DatePicker-onHover-bg: var(--DatePicker-bg);
  --DatePicker-onHover-borderColor: var(--Form-input-onFocused-borderColor);
  --DatePicker-onHover-iconColor: var(--icon-onHover-color);
@ -1608,8 +1608,8 @@
  --Wizard-steps-ulDisplay: block;
  --Wizard-stepsContent-padding: var(--gap-base);

-  --AnchorNav-links-container-borderRight: #{px2rem(1px)} solid #d3dae0;
-  --AnchorNav-onActive-borderWidth: 0 #{px2rem(2px)} 0 0;
+  --AnchorNav-links-container-borderRight: #{px2rem(2px)} solid #d3dae0;
+  --AnchorNav-onActive-borderWidth: 0 0 0 #{px2rem(2px)};

  --Steps-bg: var(--borderColorDarken);
  --Steps-status-success: var(--info);
--- a/packages/amis-ui/scss/components/_alert.scss
+++ b/packages/amis-ui/scss/components/_alert.scss
@ -12,6 +12,21 @@
  justify-content: space-between;
  align-items: flex-start;

+  &-has-title {
+    padding: var(--Alert-paddingX);
+
+    .#{$ns}Alert-content {
+
+      .#{$ns}Alert-title {
+        line-height: #{px2rem(22px)};
+      }
+
+      .#{$ns}Alert-desc {
+        line-height: #{px2rem(20px)};
+      }
+    }
+  }
+
  &-icon {
    margin-right: var(--gap-sm);
    font-size: var(--fontSizeLg);
--- a/packages/amis-ui/scss/components/_anchor-nav.scss
+++ b/packages/amis-ui/scss/components/_anchor-nav.scss
@ -7,7 +7,7 @@
      margin: 0;
      padding: 0;
      width: var(--Tabs--vertical-width);
-      border-right: var(--AnchorNav-links-container-borderRight);
+      border-left: var(--AnchorNav-links-container-borderRight);
      padding-bottom: px2rem(60px);

      > .#{$ns}AnchorNav-link {
@ -19,24 +19,39 @@
          border: var(--Tabs-borderWidth) solid transparent;
          border-width: var(--AnchorNav-onActive-borderWidth);
          color: var(--Tabs-color);
-          padding: var(--Tabs-linkPadding);
-          font-size: var(--Tabs-linkFontSize);
+          padding: 0 var(--gap-sm);
+          padding-left: px2rem(10px);
+          font-size: var(--fontSizeSm);
          outline: none;
-          text-align: right;
+          text-align: left;
          text-decoration: none;
          cursor: pointer;
          margin: 0;
+          margin-left: px2rem(-2px);
+          height: px2rem(32px);
+          line-height: px2rem(32px);

          &:hover {
            color: var(--primary);
          }
+
+          &:active {
+            color: #144bcc;
+          }
        }

        &.is-active {
-          > a,
+          > a {
+            color: var(--primary);
+            border-color: var(--primary);
+          }
          > a:hover {
-            color: var(--Tabs--vertical-onActive-color);
-            border-color: var(--Tabs--vertical-onActive-border);
+            color: #528EFF;
+            border-color: #528EFF;
+          }
+          > a:active {
+            color: #144bcc;
+            border-color: #144bcc;
          }
        }
      }
--- a/packages/amis-ui/scss/components/_progress.scss
+++ b/packages/amis-ui/scss/components/_progress.scss
@ -29,9 +29,10 @@
    &-bar {
      float: left;
      width: 0;
-      height: 10px;
+      height: 8px;
      background: var(--primary);
      transition: width var(--animation-duration) ease;
+      border-radius: var(--Progress-borderRadius);

      &--stripe {
        background-image: linear-gradient(
--- a/packages/amis-ui/scss/components/form/_date-range.scss
+++ b/packages/amis-ui/scss/components/form/_date-range.scss
@ -4,7 +4,7 @@
  flex-wrap: nowrap;
  border: var(--DatePicker-borderWidth) solid var(--DatePicker-borderColor);
  font-size: var(--DatePicker-fontSize);
-  padding: var(--DatePicker-paddingY) var(--DatePicker-paddingX);
+  padding: 0 var(--DatePicker-paddingX);
  height: var(--DatePicker-height);
  outline: none;
  border-radius: var(--DatePicker-borderRadius);
@ -29,11 +29,11 @@
        display: none;
      }
    }
-  }

-  &.is-focused {
-    border-color: var(--DatePicker-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    &.is-focused {
+      border-color: var(--DatePicker-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+    }
  }

  .#{$ns}DateRangePicker-input {
@ -44,6 +44,11 @@
    background: 0;
    flex: 1;
    width: 50%;
+    line-height: px2rem(30px);
+
+    &::placeholder {
+      color: #{$G6};
+    }
  }

  .#{$ns}DateRangePicker-input.isActive {
@ -52,6 +57,14 @@

  .#{$ns}DateRangePicker-input-separator {
    margin: 0 var(--gap-sm);
+    display: flex;
+    align-items: center;
+
+    &-line {
+      width: var(--gap-sm);
+      height: 1px;
+      background: #B8BABF;
+    }
  }

  &.is-disabled {
@ -95,8 +108,7 @@

 .#{$ns}DateRangePicker-start,
 .#{$ns}DateRangePicker-end {
-  display: inline-block;
-  vertical-align: top;
+  display: block;

  .rdtPicker {
    padding: 0;
--- a/packages/amis-ui/scss/components/form/_date.scss
+++ b/packages/amis-ui/scss/components/form/_date.scss
@ -24,6 +24,9 @@
      outline: none;
      box-sizing: none;
    }
+    &::placeholder {
+      color: #{$G6};
+    }
  }

  .#{$ns}DatePicker-clear {
@ -47,11 +50,11 @@
        display: none;
      }
    }
-  }

-  &.is-focused {
-    border-color: var(--DatePicker-onFocused-borderColor);
-    box-shadow: var(--Form-input-boxShadow);
+    &.is-focused {
+      border-color: var(--DatePicker-onFocused-borderColor);
+      box-shadow: var(--Form-input-boxShadow);
+    }
  }

  &.is-disabled {
@ -254,11 +257,17 @@
    .rdtTimeToggle {
      background: var(--Calendar-cell-bg);

-      &:hover {
+      &:hover span {
        background: var(--Calendar-cell-onHover-bg);
      }
    }

+    td.rdtToday {
+      &:hover span {
+        background: transparent;
+      }
+    }
+
    td.rdtBetween {
      background: var(--Calendar-cell-onBetween-bg);
    }
@ -293,7 +302,6 @@
      }
    }

-    td.rdtDisabled,
    td.rdtDisabled:hover {
      > span {
        background: var(--Calendar-cell-onDisabled-bg);
@ -368,15 +376,22 @@
      text-align: center;
      height: 28px;
      line-height: 28px;
-      &.is-highlight,
-      &:hover {
+      &.is-highlight {
        color: var(--Form-select-menu-onHover-color);
        background: var(--Form-select-menu-onHover-bg);
      }
+      &:hover {
+        color: var(--Form-select-menu-onHover-color);
+        background: #F7F7F9;
+      }
    }
  }
 }

+.#{$ns}TimeContentWrapper {
+  display: flex;
+}
+
 .#{$ns}TimeRangeHeaderWrapper {
  height: 40px;
  padding-top: 10px;
@ -390,6 +405,7 @@
  justify-content: space-between;
  align-items: center;
  padding: 0 12px;
+  border-top: 1px solid var(--Calendar-input-borderColor);

  .#{$ns}Button {
    height: 24px;
@ -573,7 +589,6 @@
  display: table;
  table-layout: fixed;
  border-collapse: separate;
-  border-bottom: 1px solid var(--Calendar-input-borderColor);
  height: 40px;
  width: 100%;
  margin-top: -8px;
@ -587,6 +602,28 @@
  .rdtSwitch + .rdtSwitch {
    margin-left: var(--gap-xs);
  }
+
+  .date-icon-arrow-left,
+  .date-icon-arrow {
+    width: #{px2rem(10px)};
+    height: #{px2rem(10px)};
+    top: 0;
+  }
+
+  .date-icon-arrow-left {
+    transform: rotate(180deg);
+    transform-origin: 50% 50%;
+  }
+}
+
+.header-line {
+  display: block;
+  position: absolute;
+  right: 0;
+  left: 0;
+  top: 40px;
+  height: 1px;
+  background: var(--Calendar-input-borderColor);
 }

 td.rdtMonth,
@ -600,7 +637,15 @@ td.rdtQuarter {
    background: var(--Calendar-cell-onBetween-bg);
  }

-  &:hover,
+  &:hover {
+    background: transparent;
+
+    > span {
+      color: var(--Form-select-menu-onHover-color);
+      background: #F7F7F9;
+    }
+  }
+
  &.rdtActive,
  &.rdtActive:hover {
    background: transparent;
--- a/packages/amis-ui/scss/components/react-datetime.scss
+++ b/packages/amis-ui/scss/components/react-datetime.scss
@ -16,6 +16,11 @@
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
  border: 1px solid #f9f9f9;
 }
+
+.rdtPickerNotDays {
+  width: 192px;
+}
+
 .rdtOpen .rdtPicker {
  display: block;
 }
@ -57,7 +62,7 @@
  > span {
    display: inline-block;
    border-radius: 2px;
-    height: 100%;
+    height: 24px;
    width: 24px;
  }
 }
--- a/packages/amis-ui/scss/themes/_cxd-variables.scss
+++ b/packages/amis-ui/scss/themes/_cxd-variables.scss
@ -558,7 +558,7 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
  --TransferSelect-heading-borderBottom: 0;

  // Alert
-  --Alert-fontColor: #{$G4};
+  --Alert-fontColor: #{$G2};
  --Alert-title-fontColor: #{$G2};

  --Alert-height: #{px2rem(40px)};
@ -567,19 +567,19 @@ $L1: 0px 4px 6px 0px rgba(8, 14, 26, 0.06),
  --Alert-borderRadius: #{$R3};
  --Alert-marginBottom: var(--gap-md);

-  --Alert--danger-color: #{$G4};
+  --Alert--danger-color: #{$G2};
  --Alert--danger-bg: #{$danger-bg};
  --Alert--danger-borderColor: transparent;

-  --Alert--info-color: #{$G4};
+  --Alert--info-color: #{$G2};
  --Alert--info-bg: #{$info-bg};
  --Alert--info-borderColor: transparent;

-  --Alert--success-color: #{$G4};
+  --Alert--success-color: #{$G2};
  --Alert--success-bg: #{$success-bg};
  --Alert--success-borderColor: transparent;

-  --Alert--warning-color: #{$G4};
+  --Alert--warning-color: #{$G2};
  --Alert--warning-bg: #{$warning-bg};
  --Alert--warning-borderColor: transparent;

--- a/packages/amis-ui/src/components/Alert2.tsx
+++ b/packages/amis-ui/src/components/Alert2.tsx
@ -92,7 +92,7 @@ export class Alert extends React.Component<AlertProps, AlertState> {
    ) : null;

    return this.state.show ? (
-      <div className={cx('Alert', level ? `Alert--${level}` : '', className)}>
+      <div className={cx('Alert', level ? `Alert--${level}` : '', title ? 'Alert-has-title' : '', className)}>
        {showIcon && iconNode ? (
          <div className={cx('Alert-icon', iconClassName)}>{iconNode}</div>
        ) : null}
--- a/packages/amis-ui/src/components/DateRangePicker.tsx
+++ b/packages/amis-ui/src/components/DateRangePicker.tsx
@ -1505,7 +1505,9 @@ export class DateRangePicker extends React.Component<
          value={this.state.startInputValue || ''}
          disabled={disabled}
        />
-        <span className={cx('DateRangePicker-input-separator')}>-</span>
+        <span className={cx('DateRangePicker-input-separator')}>
+          <span className={cx('DateRangePicker-input-separator-line')}></span>
+        </span>
        <Input
          className={cx('DateRangePicker-input', {
            isActive: this.state.editState === 'end' && isOpened
--- a/packages/amis-ui/src/components/Progress.tsx
+++ b/packages/amis-ui/src/components/Progress.tsx
@ -135,7 +135,11 @@ export class Progress extends React.Component<ProgressProps, Object> {
        this.getLabel(prefixCls)
      ];
    } else if (type === 'circle' || type === 'dashboard') {
-      const circleWidth = strokeWidth || 6;
+      const circleWidth = strokeWidth || 8;
+      const circleStyle = {
+        width: circleWidth * 10 + 'px',
+        height: circleWidth * 10 + 'px'
+      };
      const gapPos = gapPosition || (type === 'dashboard' && 'bottom') || 'top';
      const getGapDegree = () => {
        if (gapDegree || gapDegree === 0) {
@ -149,8 +153,9 @@ export class Progress extends React.Component<ProgressProps, Object> {

      viewValue = [
        <div
-          className={cx(prefixCls, progressClassName || 'w-ssm')}
+          className={cx(prefixCls, progressClassName)}
          key="circle"
+          style={circleStyle}
        >
          <Circle
            percent={value}
@ -160,6 +165,7 @@ export class Progress extends React.Component<ProgressProps, Object> {
            prefixCls={isColorClass ? bgColor : ''}
            gapDegree={getGapDegree()}
            gapPosition={gapPos}
+            style={circleStyle}
          />
          {this.getLabel(prefixCls)}
        </div>
--- a/packages/amis-ui/src/components/calendar/Calendar.tsx
+++ b/packages/amis-ui/src/components/calendar/Calendar.tsx
@ -692,6 +692,9 @@ class BaseDatePicker extends React.Component<
              ? 'rdtPickerTime'
              : dateFormat && !timeFormat
              ? 'rdtPickerDate'
+              : '',
+            viewMode === 'months' || viewMode === 'years' || viewMode === 'quarters'
+              ? 'rdtPickerNotDays'
              : ''
          )}
        >
--- a/packages/amis-ui/src/components/calendar/DaysView.tsx
+++ b/packages/amis-ui/src/components/calendar/DaysView.tsx
@ -17,6 +17,7 @@ import Picker from '../Picker';
 import {PickerOption} from '../PickerColumn';
 import {DateType} from './Calendar';
 import type {TimeScale} from './TimeView';
+import {Icon} from '../icons';

 interface CustomDaysViewProps extends LocaleProps {
  classPrefix?: string;
@ -737,13 +738,13 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                  className="rdtPrev"
                  onClick={this.props.subtractTime(1, 'years')}
                >
-                  &laquo;
+                  <Icon icon="right-double-arrow" className="icon date-icon-arrow-left" />
                </a>
                <a
                  className="rdtPrev"
                  onClick={this.props.subtractTime(1, 'months')}
                >
-                  &lsaquo;
+                  <Icon icon="right-arrow" className="icon date-icon-arrow-left" />
                </a>

                <div className="rdtCenter">
@ -765,12 +766,13 @@ export class CustomDaysView extends React.Component<CustomDaysViewProps> {
                  className="rdtNext"
                  onClick={this.props.addTime(1, 'months')}
                >
-                  &rsaquo;
+                  <Icon icon="right-arrow" className="icon date-icon-arrow" />
                </a>
                <a className="rdtNext" onClick={this.props.addTime(1, 'years')}>
-                  &raquo;
+                  <Icon icon="right-double-arrow" className="icon date-icon-arrow" />
                </a>
              </div>
+              <div className='header-line'></div>
            </th>
          </tr>
          <tr>
--- a/packages/amis-ui/src/components/icons.tsx
+++ b/packages/amis-ui/src/components/icons.tsx
@ -98,6 +98,7 @@ import DotIcon from '../icons/dot.svg';
 import Invisible from '../icons/invisible.svg';
 import DateIcon from '../icons/date.svg';
 import InvisibleIcon from '../icons/invisible.svg';
+import RightDoubleArrowIcon from '../icons/right-double-arrow.svg';

 // 兼容原来的用法，后续不直接试用。

@ -223,6 +224,7 @@ registerIcon('plus-fine', PlusFineIcon);
 registerIcon('date', DateIcon);
 registerIcon('remove', RemoveIcon);
 registerIcon('invisible', InvisibleIcon);
+registerIcon('right-double-arrow', RightDoubleArrowIcon);

 export function Icon({
  icon,
@ -266,5 +268,6 @@ export {
  UserRemove,
  Role,
  Department,
-  Post
+  Post,
+  RightDoubleArrowIcon
 };
--- a/packages/amis-ui/src/icons/alert-danger.svg
+++ b/packages/amis-ui/src/icons/alert-danger.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M667.904 704.32L508.992 546.56l-157.888 158.912-45.376-45.056 157.824-158.976L304.64 343.488l45.12-45.376 158.912 157.824 157.888-158.848 45.44 45.056L553.984 501.12l158.976 157.888-45.12 45.44zM510.528 64a448 448 0 1 0 2.944 896 448 448 0 0 0-2.944-896z" fill="#E8684A"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M667.904 704.32L508.992 546.56l-157.888 158.912-45.376-45.056 157.824-158.976L304.64 343.488l45.12-45.376 158.912 157.824 157.888-158.848 45.44 45.056L553.984 501.12l158.976 157.888-45.12 45.44zM510.528 64a448 448 0 1 0 2.944 896 448 448 0 0 0-2.944-896z" fill="#F33E3E"></path></svg>
--- a/packages/amis-ui/src/icons/alert-success.svg
+++ b/packages/amis-ui/src/icons/alert-success.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M449.856 706.56l-45.44-45.056 0.128-0.064L268.16 526.016l45.12-45.44 136.32 135.488 270.592-272.384 45.376 45.056-315.712 317.888zM510.528 64A448 448 0 1 0 960 510.528 448 448 0 0 0 510.528 64z" fill="#0BC286"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M449.856 706.56l-45.44-45.056 0.128-0.064L268.16 526.016l45.12-45.44 136.32 135.488 270.592-272.384 45.376 45.056-315.712 317.888zM510.528 64A448 448 0 1 0 960 510.528 448 448 0 0 0 510.528 64z" fill="#30BF13"></path></svg>
--- a/packages/amis-ui/src/icons/alert-warning.svg
+++ b/packages/amis-ui/src/icons/alert-warning.svg
@ -1 +1 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m0 627.2A38.4 38.4 0 1 0 512 768a38.4 38.4 0 0 0 0-76.8zM544 256h-64v349.12h64V256z" fill="#FFB200"></path></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1024" width="16px" fill="currentColor"><path d="M512 64A448 448 0 1 1 512 960 448 448 0 0 1 512 64z m0 627.2A38.4 38.4 0 1 0 512 768a38.4 38.4 0 0 0 0-76.8zM544 256h-64v349.12h64V256z" fill="#FF9326"></path></svg>
--- a/packages/amis-ui/src/icons/right-double-arrow.svg
+++ b/packages/amis-ui/src/icons/right-double-arrow.svg
@ -0,0 +1,10 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="10px" height="10px" viewBox="0 0 10 10" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <g stroke="none" stroke-width="1" fill="currentColor" fill-rule="evenodd">
+        <g transform="translate(-3209.000000, -2165.000000)">
+            <g transform="translate(3206.000000, 2162.000000)">
+                <path d="M3.713,3.0012 L8.663,7.9502 L8.66,7.9542 L8.663,7.9572 L3.713,12.9072 L3,12.1942 L7.24,7.9542 L3,3.7142 L3.713,3.0012 Z M7.7099,3.0003 L12.6599,7.9493 L12.6559,7.9533 L12.6599,7.9563 L7.7099,12.9053 L6.9969,12.1923 L11.2369,7.9533 L6.9969,3.7133 L7.7099,3.0003 Z"></path>
+            </g>
+        </g>
+    </g>
+</svg>
--- a/packages/amis/tests/renderers/Form/snapshots/dateRange.test.tsx.snap
+++ b/packages/amis/tests/renderers/Form/snapshots/dateRange.test.tsx.snap
@ -66,7 +66,9 @@ exports[`Renderer:dateRange 1`] = `
              <span
                class="cxd-DateRangePicker-input-separator"
              >
-                -
+                <span
+                  class="cxd-DateRangePicker-input-separator-line"
+                />
              </span>
              <input
                autocomplete="off"
--- a/packages/amis/tests/renderers/snapshots/calendar.test.tsx.snap
+++ b/packages/amis/tests/renderers/snapshots/calendar.test.tsx.snap
@ -47,12 +47,18 @@ exports[`Renderer:calendar 1`] = `
                                <a
                                  class="rdtPrev"
                                >
-                                  «
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtPrev"
                                >
-                                  ‹
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <div
                                  class="rdtCenter"
@ -71,14 +77,23 @@ exports[`Renderer:calendar 1`] = `
                                <a
                                  class="rdtNext"
                                >
-                                  ›
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtNext"
                                >
-                                  »
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                              </div>
+                              <div
+                                class="header-line"
+                              />
                            </th>
                          </tr>
                          <tr>
@ -540,12 +555,18 @@ exports[`Renderer:calendar largeMode 1`] = `
                                <a
                                  class="rdtPrev"
                                >
-                                  «
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtPrev"
                                >
-                                  ‹
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <div
                                  class="rdtCenter"
@ -564,14 +585,23 @@ exports[`Renderer:calendar largeMode 1`] = `
                                <a
                                  class="rdtNext"
                                >
-                                  ›
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtNext"
                                >
-                                  »
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                              </div>
+                              <div
+                                class="header-line"
+                              />
                            </th>
                          </tr>
                          <tr>
@ -1181,12 +1211,18 @@ exports[`Renderer:calendar scheduleAction 1`] = `
                                <a
                                  class="rdtPrev"
                                >
-                                  «
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtPrev"
                                >
-                                  ‹
+                                  <icon-mock
+                                    classname="icon date-icon-arrow-left icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <div
                                  class="rdtCenter"
@ -1205,14 +1241,23 @@ exports[`Renderer:calendar scheduleAction 1`] = `
                                <a
                                  class="rdtNext"
                                >
-                                  ›
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-arrow"
+                                    icon="right-arrow"
+                                  />
                                </a>
                                <a
                                  class="rdtNext"
                                >
-                                  »
+                                  <icon-mock
+                                    classname="icon date-icon-arrow icon-right-double-arrow"
+                                    icon="right-double-arrow"
+                                  />
                                </a>
                              </div>
+                              <div
+                                class="header-line"
+                              />
                            </th>
                          </tr>
                          <tr>