fix: picker header overflow and preview button font

.storybook/global.scss

@@ -0,0 +1,2 @@
+@import './reset-browser';
+@import '../src/theme/style.scss';

.storybook/reset-browser.scss

@@ -0,0 +1,92 @@
+@import '../src/theme/var';
+@import '../src/theme/mixin';
+
+* {
+  &,
+  &:before,
+  &:after {
+    margin: 0;
+    padding: 0;
+    border: 0;
+    font: inherit;
+    box-sizing: border-box;
+    vertical-align: baseline;
+  }
+
+  &:focus {
+    outline: none;
+  }
+}
+
+em {
+  font-style: italic;
+}
+
+ol {
+  list-style: decimal;
+  margin-left: 16px;
+}
+
+ul {
+  list-style: none;
+}
+
+blockquote,
+q {
+  quotes: none;
+
+  &:before,
+  &:after {
+    content: '';
+    content: none;
+  }
+}
+
+table {
+  border-collapse: collapse;
+  border-spacing: 0;
+}
+
+body {
+  -webkit-font-smoothing: auto;
+  -moz-osx-font-smoothing: auto;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-width: 100%;
+  min-height: 100%;
+  color: use-text-color(main);
+  background-color: use-rgb(main-bg);
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'PingFang SC',
+    Arial, 'Microsoft YaHei', sans-serif;
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 1.43;
+}
+
+pre,
+code {
+  font-family: Menlo, Monaco, 'Courier New', monospace;
+  white-space: pre-wrap;
+  font-size: 14px;
+  line-height: 20px;
+  padding: 12px;
+  background: use-rgb(n-9);
+  border-radius: 2px;
+
+  &[ngCodeColorize] {
+    padding: 0 12px;
+  }
+}
+
+input:-webkit-autofill,
+input:-webkit-autofill:hover,
+input:-webkit-autofill:focus,
+input:-webkit-autofill:active {
+  -webkit-text-fill-color: #{use-text-color(main)} !important;
+  box-shadow: 0 0 0 3000px #{use-rgb(main-bg)} inset !important;
+}
+
+[hidden] {
+  display: none !important;
+}

angular.json

@@ -64,7 +64,8 @@
             "browserTarget": "storybook:build",
             "compodoc": true,
             "compodocArgs": ["-e", "json", "-d", "."],
-            "port": 6006
+            "port": 6006,
+            "styles": [".storybook/global.scss"]
           }
         },
         "build-storybook": {

src/date-picker/calendar/header/style.scss

@@ -1,6 +1,7 @@
 @import '../../../theme/var';
 
 $block: aui-calendar-header;
+$prev-next-icon-button-width: 24px;
 
 .#{$block} {
   &__container {
@@ -12,6 +13,7 @@ $block: aui-calendar-header;
 
   &__nav-content {
     flex: 1;
+    max-width: calc(100% - $prev-next-icon-button-width * 4);
     display: flex;
     flex-wrap: wrap;
     justify-content: center;
@@ -43,6 +45,10 @@ $block: aui-calendar-header;
         margin-left: 0;
       }
     }
+
+    .aui-button--text.header-range {
+      max-width: 100%;
+    }
   }
 }
 

src/date-picker/calendar/header/template.html

@@ -125,6 +125,8 @@
 <ng-template #yearTemplate>
   <button
     aui-button="text"
+    class="header-range"
+    [title]="headerRange?.start?.year() + ('year_suffix' | auiI18n)"
     (click)="clickNav(DateNavRange.Year)"
   >
     {{ headerRange?.start?.year() }}{{ 'year_suffix' | auiI18n }}
@@ -133,6 +135,8 @@
 <ng-template #monthTemplate>
   <button
     aui-button="text"
+    class="header-range"
+    [title]="headerRange?.start?.month() + 1 + ('month_suffix' | auiI18n)"
     (click)="clickNav(DateNavRange.Month)"
   >
     {{ headerRange?.start?.month() + 1 }}{{ 'month_suffix' | auiI18n }}

src/date-picker/date-picker/date-picker.template.html

@@ -21,7 +21,7 @@
 <ng-template #template>
   <aui-date-picker-panel
     [type]="type"
-    style="padding-top: 9px; display: inline-block"
+    style="padding-top: 9px; display: inline-block; max-width: 100%"
     [(ngModel)]="value"
     [showTime]="showTime"
     [showFooter]="showFooter"