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>

docs/zh-CN/components/progress.md

@@ -212,19 +212,51 @@ List 的内容、Card 卡片的内容配置同上
 }
 ```
 
-## 圆形进度条设置线条宽度
+## 设置线条宽度
 
 可设置 strokeWidth 调整线条宽度
 
 ```schema
 {
     "type": "page",
-    "body": {
+    "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": 3
-    }
+            "strokeWidth": 4
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "dashboard",
+            "strokeWidth": 8
+        },
+        {
+            "type": "progress",
+            "value": 60,
+            "mode": "dashboard",
+            "strokeWidth": 12
+        },
+    ]
 }
 ```
 

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);
 

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);

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);

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;
           }
         }
       }

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(

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,12 +29,12 @@
         display: none;
       }
     }
-  }
 
     &.is-focused {
       border-color: var(--DatePicker-onFocused-borderColor);
       box-shadow: var(--Form-input-boxShadow);
     }
+  }
 
   .#{$ns}DateRangePicker-input {
     border: none;
@@ -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;

packages/amis-ui/scss/components/form/_date.scss

@@ -24,6 +24,9 @@
       outline: none;
       box-sizing: none;
     }
+    &::placeholder {
+      color: #{$G6};
+    }
   }
 
   .#{$ns}DatePicker-clear {
@@ -47,12 +50,12 @@
         display: none;
       }
     }
-  }
 
     &.is-focused {
       border-color: var(--DatePicker-onFocused-borderColor);
       box-shadow: var(--Form-input-boxShadow);
     }
+  }
 
   &.is-disabled {
     background: $gray200;
@@ -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,14 +376,21 @@
       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;
@@ -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;

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;
   }
 }

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;
 

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}

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

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>

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'
               : ''
           )}
         >

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>

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
 };

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>

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>

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>

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>

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"

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>