Merge branch 'master' into fix/date-time-range-picker-can-select-late…

…r-time-as-start-time

.changeset/thirty-windows-listen.md

@@ -0,0 +1,5 @@
+---
+"@alauda/ui": patch
+---
+
+feat: mod sroll bar style

src/date-picker/range-picker/range-picker.style.scss

@@ -1,5 +1,7 @@
-.aui-tooltip.range-picker-wrapper {
-  max-width: none;
+@import '../../theme/var';
+
+.aui-range-picker-wrapper {
+  padding: use-var(spacing-xl);
 }
 
 aui-range-picker {

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

@@ -7,8 +7,8 @@
   auiTooltipAnimType="none"
   [disabled]="!!disabled"
   style="display: flex"
-  auiTooltipType="info"
-  auiTooltipClass="range-picker-wrapper"
+  auiTooltipType="plain"
+  auiTooltipClass="aui-range-picker-wrapper"
   auiTooltipPosition="bottom start"
   auiTooltipTrigger="click"
   [auiTooltipHideOnClick]="true"

src/drawer/component/drawer.component.ts

@@ -112,6 +112,7 @@ export class DrawerComponent<
         this.drawerRef.close();
       }
     }
+    this.drawerService.updateOptions(this);
   }
 
   ngAfterViewInit() {

src/drawer/component/internal/internal.component.ts

@@ -21,6 +21,7 @@ import {
 } from '@angular/common';
 import {
   ChangeDetectionStrategy,
+  ChangeDetectorRef,
   Component,
   ElementRef,
   InjectionToken,
@@ -128,7 +129,10 @@ export class DrawerInternalComponent<T = unknown, C extends object = object> {
 
   isTemplateRef = isTemplateRef;
 
-  constructor(private readonly injector: Injector) {}
+  constructor(
+    private readonly injector: Injector,
+    private readonly cdr: ChangeDetectorRef,
+  ) {}
 
   ngAfterViewInit() {
     this.attachBodyContent();
@@ -206,6 +210,11 @@ export class DrawerInternalComponent<T = unknown, C extends object = object> {
     }
   }
 
+  updateOptions(options: DrawerOptions<T, C>) {
+    this.options = options;
+    this.cdr.markForCheck();
+  }
+
   show() {
     this.showHide$$.next('show');
   }

src/drawer/drawer.service.ts

@@ -47,6 +47,7 @@ export class DrawerService<
 
   updateOptions(options: DrawerOptions<T, C>): void {
     this.options = merge<DrawerOptions<T, C>>(DEFAULT_OPTIONS, options);
+    this.drawerInternalComponentRef?.instance.updateOptions(this.options);
   }
 
   private createOverlay() {
@@ -66,7 +67,6 @@ export class DrawerService<
           event.target instanceof Node &&
           !this.overlayRef.hostElement?.parentNode?.contains(event.target)
         ) {
-          event.stopPropagation();
           event.preventDefault();
           this.drawerRef.close();
         }
@@ -97,7 +97,7 @@ export class DrawerService<
     const drawerInternalComponentRef = this.overlayRef.attach(
       new ComponentPortal(DrawerInternalComponent<T, C>),
     );
-    drawerInternalComponentRef.instance.options = this.options;
+    drawerInternalComponentRef.instance.updateOptions(this.options);
     drawerInternalComponentRef.instance.animationStep$.subscribe(step => {
       if (step === 'hideDone') {
         this.invisible$.next();

src/dropdown/menu/menu.component.scss

@@ -1,8 +1,6 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
-$max-width: 280px;
-
 $button-size: (
   large: (
     height: use-var(inline-height-l),
@@ -36,10 +34,6 @@ $button-size: (
 
 .aui-menu {
   padding: use-var(spacing-m);
-  max-width: $max-width;
-  border-radius: use-var(border-radius-m);
-  background-color: use-rgb(popper-bg);
-  @include popper-shadow;
 
   @each $key in large medium small mini {
     $map: map-get($button-size, $key);

src/radio/radio-button/radio-button.component.scss

@@ -3,11 +3,16 @@
 
 $block: 'aui-radio-button';
 
+#{$block} {
+  display: flex;
+  min-height: 100%;
+}
+
 .#{$block} {
   font-size: 0;
   margin-left: -1px;
-  display: inline-block;
-  vertical-align: middle;
+  display: inline-flex;
+  align-items: center;
   position: relative;
   color: use-rgb(primary);
   border: 1px solid use-rgb(primary);
@@ -129,8 +134,11 @@ $block: 'aui-radio-button';
       }
 
       &__label {
-        height: calc(#{use-var(inline-height-m)} - 2px);
-        padding: 0 use-var(inline-padding-m);
+        min-height: calc(#{use-var(inline-height-m)} - 2px);
+        padding: calc(
+            (#{use-var(inline-height-m)} - #{use-var(line-height-m)} - 2px) / 2
+          )
+          use-var(inline-padding-m);
       }
     }
   }
@@ -144,8 +152,11 @@ $block: 'aui-radio-button';
       }
 
       &__label {
-        height: calc(#{use-var(inline-height-s)} - 2px);
-        padding: 0 use-var(inline-padding-s);
+        min-height: calc(#{use-var(inline-height-s)} - 2px);
+        padding: calc(
+            (#{use-var(inline-height-s)} - #{use-var(line-height-s)} - 2px) / 2
+          )
+          use-var(inline-padding-s);
       }
     }
   }

src/radio/radio-group/radio-group.component.scss

@@ -5,6 +5,10 @@
     align-items: center;
   }
 
+  &--row:has(aui-radio-button) {
+    align-items: normal;
+  }
+
   &--column {
     flex-direction: column;
 

src/select/option-container.scss

@@ -6,9 +6,6 @@
   .#{$block} {
     padding: 8px 0;
     max-width: 90vw;
-    border-radius: use-var(border-radius-m);
-    background-color: use-rgb(popper-bg);
-    @include popper-shadow;
 
     &__content {
       max-height: calc(#{use-var(inline-height-#{$size})} * 10);

src/status-bar/__snapshots__/status-bar.component.spec.ts.snap

@@ -186,7 +186,7 @@ exports[`Status Bar should match snapshot 3`] = `
     >
       <aui-tooltip>
         <div
-          class="ng-trigger ng-trigger-showHide aui-tooltip aui-tooltip--default aui-tooltip--top aui-tooltip__transform-origin"
+          class="ng-trigger ng-trigger-showHide aui-tooltip aui-tooltip--align_center aui-tooltip--default aui-tooltip--direction_top aui-tooltip__transform-origin"
         >
             
           <div

src/table/table.component.scss

@@ -91,7 +91,6 @@
     padding: $table-padding $table-cell-padding-h;
     font-weight: use-var(font-weight-bold);
     background-color: use-rgb(n-9);
-    @include text-overflow;
   }
 
   &__column-expand-button {

src/theme/_mixin.scss

@@ -152,17 +152,21 @@
   transform: translate(-50%, -50%);
 }
 
-@mixin scroll-bar($color: #{use-rgba(n-1, 0.2)}) {
+@mixin scroll-bar($color: #{use-rgb(n-7)}, $hover-color: #{use-rgb(n-5)}) {
   &::-webkit-scrollbar {
-    width: 4px;
+    width: 8px;
     height: 4px;
   }
 
   &::-webkit-scrollbar-thumb {
-    border-radius: 2px;
+    border-radius: 4px;
     background-color: $color;
   }
 
+  &::-webkit-scrollbar-thumb:hover {
+    background-color: $hover-color;
+  }
+
   &::-webkit-scrollbar-corner {
     background-color: transparent;
   }

src/time-picker/panel/panel.style.scss

@@ -10,11 +10,8 @@ $strut_height: $cell_height * ($col_reveal_items - 1);
 .#{$block} {
   display: flex;
   flex-direction: column;
-  background-color: use-rgb(n-10);
-  border-radius: use-var(border-radius-m);
   overflow: hidden;
   @include text-set(m);
-  @include popper-shadow;
 
   ul,
   li {

src/tooltip/tooltip.component.scss

@@ -4,18 +4,20 @@
 
 $block: 'aui-tooltip';
 
+@mixin text-styles {
+  max-width: 400px;
+  word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
+  @include text-set(s);
+}
+
 .#{$block} {
-  position: relative;
-  padding: use-var(spacing-xl);
   border-radius: use-var(border-radius-m);
+  background-color: use-rgb(popper-bg);
   @include popper-shadow;
-  @include text-set(s);
-
-  max-width: 400px;
-  word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
 
   &--default {
     padding: use-var(spacing-m) use-var(spacing-xl);
+    @include text-styles;
     @include theme-light {
       color: use-rgb(n-10);
       background-color: use-rgb(n-1);
@@ -27,37 +29,54 @@ $block: 'aui-tooltip';
   }
 
   &--primary {
+    padding: use-var(spacing-xl);
     color: use-rgb(primary);
-    background-color: use-rgb(popper-bg);
+    @include text-styles;
   }
 
   &--success {
+    padding: use-var(spacing-xl);
     color: use-rgb(green);
-    background-color: use-rgb(popper-bg);
+    @include text-styles;
   }
 
   &--warning {
+    padding: use-var(spacing-xl);
     color: use-rgb(yellow);
-    background-color: use-rgb(popper-bg);
+    @include text-styles;
   }
 
   &--error {
+    padding: use-var(spacing-xl);
     color: use-rgb(red);
-    background-color: use-rgb(popper-bg);
+    @include text-styles;
   }
 
   &--info {
+    padding: use-var(spacing-xl);
     color: use-rgb(n-1);
-    background-color: use-rgb(popper-bg);
+    @include text-styles;
   }
 
-  &--top,
-  &--bottom {
-    margin: use-var(spacing-s) 0;
-  }
+  &--align {
+    &_center {
+      margin: use-var(spacing-s);
+    }
 
-  &--start,
-  &--end {
-    margin: 0 use-var(spacing-s);
+    &_top {
+      margin: 0 use-var(spacing-s) use-var(spacing-s) use-var(spacing-s);
+    }
+
+    &_end {
+      margin: use-var(spacing-s) 0 use-var(spacing-s) use-var(spacing-s);
+    }
+
+    &_bottom {
+      margin: use-var(spacing-s) use-var(spacing-s) 0 use-var(spacing-s);
+    }
+
+    &_start {
+      margin: use-var(spacing-s) use-var(spacing-s) use-var(spacing-s) 0;
+    }
   }
 }

src/tooltip/tooltip.component.ts

@@ -103,13 +103,12 @@ export class TooltipComponent implements OnDestroy {
     ]).pipe(
       map(([inputPosition, inputType, inputClass]) => {
         const b = this.bem.block();
-        const dir = inputPosition.split(' ')[0];
-        return (
-          `${b}--${dir} ${inputClass} ${this.bem.element(
-            'transform-origin',
-          )} ` +
-          (inputType === TooltipType.Plain ? '' : `${b} ${b}--${inputType}`)
-        );
+        const [direction, align] = inputPosition.split(' ');
+        return `${
+          inputType === TooltipType.Empty ? '' : b
+        } ${b}--${inputType} ${b}--direction_${direction} ${b}--align_${
+          align ?? 'center'
+        } ${this.bem.element('transform-origin')} ${inputClass}`;
       }),
       publishRef(),
     );

src/tooltip/tooltip.directive.spec.ts

@@ -140,7 +140,7 @@ describe('TooltipDirective', () => {
     const tooltipEl = ocEl.querySelector('.aui-tooltip');
     expect(tooltipEl.innerHTML).toContain('custom content');
     expect(tooltipEl.className).toContain('aui-tooltip--primary');
-    expect(tooltipEl.className).toContain('aui-tooltip--start');
+    expect(tooltipEl.className).toContain('aui-tooltip--direction_start');
     expect(tooltipEl.className).toContain('custom-class');
   }));
 

src/tooltip/tooltip.types.ts

@@ -6,6 +6,7 @@ export enum TooltipType {
   Error = 'error',
   Info = 'info',
   Plain = 'plain',
+  Empty = 'empty',
 }
 
 export enum TooltipTrigger {

stories/drawer/basic-drawer.component.ts

@@ -29,7 +29,6 @@ import { ChangeDetectionStrategy, Component } from '@angular/core';
       [divider]="divider"
       [offsetY]="offsetY + 'px'"
       [visible]="visible"
-      [hideOnClickOutside]="true"
       (close)="closeHandle()"
     >
       <div *auiDrawerHeader>header</div>