fix: optimize component layout

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/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/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

@@ -5,14 +5,18 @@
 $block: 'aui-tooltip';
 
 .#{$block} {
-  position: relative;
-  padding: use-var(spacing-xl);
-  border-radius: use-var(border-radius-m);
-  @include popper-shadow;
-  @include text-set(s);
+  &:not(.#{$block}--empty) {
+    position: relative;
+    border-radius: use-var(border-radius-m);
+    background-color: use-rgb(popper-bg);
+    @include popper-shadow;
+  }
 
-  max-width: 400px;
-  word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
+  &:not(.#{$block}--empty):not(.#{$block}--plain) {
+    max-width: 400px;
+    word-wrap: break-word; // do NOT add 'word-break: break-all;', design requirement
+    @include text-set(s);
+  }
 
   &--default {
     padding: use-var(spacing-m) use-var(spacing-xl);
@@ -27,37 +31,49 @@ $block: 'aui-tooltip';
   }
 
   &--primary {
+    padding: use-var(spacing-xl);
     color: use-rgb(primary);
-    background-color: use-rgb(popper-bg);
   }
 
   &--success {
+    padding: use-var(spacing-xl);
     color: use-rgb(green);
-    background-color: use-rgb(popper-bg);
   }
 
   &--warning {
+    padding: use-var(spacing-xl);
     color: use-rgb(yellow);
-    background-color: use-rgb(popper-bg);
   }
 
   &--error {
+    padding: use-var(spacing-xl);
     color: use-rgb(red);
-    background-color: use-rgb(popper-bg);
   }
 
   &--info {
+    padding: use-var(spacing-xl);
     color: use-rgb(n-1);
-    background-color: use-rgb(popper-bg);
   }
 
-  &--top,
-  &--bottom {
-    margin: use-var(spacing-s) 0;
-  }
+  &--align {
+    &_center {
+      margin: 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,
-  &--end {
-    margin: 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 `${b} ${b}--direction_${direction} ${b}--align_${
+          align ?? 'center'
+        } ${b}--${inputType} ${inputClass} ${this.bem.element(
+          'transform-origin',
+        )} `;
       }),
       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');
   }));