fix: multiple ui issues

scripts/release.sh

@@ -28,4 +28,4 @@ if [ "$PUBLISH_BRANCH" != "" ]; then
   git push --follow-tags origin "$PUBLISH_BRANCH"
 fi
 
-npm publish release --tag "$NPM_TAG"
+npm publish ./release --tag "$NPM_TAG"

src/button/button.component.html

@@ -1,2 +1,2 @@
 <span class="aui-button__content"><ng-content></ng-content></span>
-<aui-icon *ngIf="loading" icon="spinner"></aui-icon>
+<aui-icon *ngIf="loading" class="aui-button__spinner" icon="spinner"></aui-icon>

src/button/button.component.scss

@@ -298,17 +298,17 @@ $button-size: (
     @include colorful-button(red);
   }
 
+  &__spinner {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+  }
+
   &.isLoading {
     .aui-button__content {
       opacity: 0;
     }
-
-    aui-icon {
-      position: absolute;
-      top: 50%;
-      left: 50%;
-      transform: translate(-50%, -50%);
-    }
   }
 }
 

src/card/card.component.scss

@@ -20,15 +20,15 @@ $b: aui-card;
     font-weight: get-size(font-weight-bold);
 
     + .#{$b}__content {
-      margin-top: get-size(spacing-xl);
+      margin-top: get-size(spacing-xxl);
     }
   }
 
   &__content {
     padding: 0;
 
     + .#{$b}__footer {
-      margin-top: get-size(spacing-xl);
+      margin-top: get-size(spacing-xxl);
     }
   }
 

src/checkbox/checkbox.component.scss

@@ -10,6 +10,7 @@ $block: 'aui-checkbox';
   width: fit-content;
   height: get-size(inline-height-m);
   position: relative;
+  vertical-align: bottom;
 
   &__label {
     display: flex;

src/checkbox/mixin.scss

@@ -8,7 +8,7 @@
     height: get-size(icon-size-m);
     margin-right: get-size(spacing-m);
     border-radius: get-size(border-radius-m);
-    border: get-size(border-m) $border-style get-color(n-7);
+    border: 1px $border-style get-color(n-7);
     color: get-color(n-10);
     background-color: get-color(n-9);
     position: relative;

src/dropdown/dropdown-button/dropdown-button.component.scss

@@ -57,7 +57,7 @@
   }
 
   &__content.aui-button + &__trigger.aui-button {
-    margin-left: get-size(border-m);
+    margin-left: 1px;
 
     &.isPlain {
       margin-left: -1px;

src/form/form-item/form-item.component.scss

@@ -16,15 +16,15 @@ $form-item-width: (
 .aui-form-item {
   display: flex;
   align-items: flex-start;
-  margin-bottom: $form-item-margin-vertical;
+  margin-bottom: get-size(spacing-xl);
   color: get-color(n-1);
   font-size: get-size(font-size-m);
 
   &--top {
     flex-direction: column;
     .aui-form-item__label-wrapper {
       line-height: get-size(line-height-m);
-      margin-bottom: 2px;
+      margin-bottom: get-size(spacing-xs);
       &:after {
         display: none;
       }
@@ -34,22 +34,22 @@ $form-item-width: (
   &__label-wrapper {
     display: flex;
     align-items: center;
-    line-height: get-size(line-height-xxxl);
+    line-height: get-size(inline-height-m);
     flex-shrink: 0;
-    padding-right: 8px;
+    padding-right: get-size(spacing-m);
     overflow: hidden;
 
     &--required .aui-form-item__label:before {
       content: '*';
-      color: $color-error;
-      margin-right: 4px;
+      color: get-color(red);
+      margin-right: get-size(spacing-s);
     }
 
     &.hasLabel:after {
       content: ':';
       align-self: flex-start;
-      margin-left: 2px;
-      line-height: get-size(line-height-xxxl);
+      margin-left: get-size(spacing-xs);
+      line-height: get-size(inline-height-m);
     }
 
     &--left {
@@ -82,7 +82,7 @@ $form-item-width: (
   &__content {
     display: flex;
     align-items: center;
-    min-height: get-size(line-height-xxxl);
+    min-height: get-size(inline-height-m);
 
     aui-select,
     aui-multi-select {
@@ -109,7 +109,7 @@ $form-item-width: (
 
   &__content + &__hint-wrapper,
   &__content + &__error-wrapper {
-    margin-top: 4px;
+    margin-top: get-size(spacing-s);
   }
 
   &__hint-wrapper,
@@ -131,8 +131,9 @@ $form-item-width: (
     display: flex;
     align-items: center;
     flex-shrink: 0;
-    height: get-size(line-height-xxxl);
-    padding-left: 8px;
+    height: get-size(inline-height-m);
+    width: get-size(inline-height-m);
+    padding-left: get-size(spacing-m);
     color: get-color(n-4);
     font-size: get-size(font-size-m);
   }
@@ -143,6 +144,6 @@ $form-item-width: (
 
   .aui-form-item {
     margin-bottom: 0;
-    margin-right: 8px;
+    margin-right: get-size(spacing-m);
   }
 }

src/input/search/search.component.scss

@@ -38,11 +38,11 @@ $component-size: (
 
       .#{$block}__clear,
       .#{$block}__spinner {
-        right: calc(#{get-size(inline-padding-xs)} + #{get-size(border-m)});
+        right: calc(#{get-size(inline-padding-xs)} + 1px);
       }
 
       .#{$block}__icon {
-        left: calc(#{get-size(inline-padding-xs)} + #{get-size(border-m)});
+        left: calc(#{get-size(inline-padding-xs)} + 1px);
       }
 
       .#{$block}__button-icon {
@@ -56,10 +56,7 @@ $component-size: (
 
       &.hasIcon .#{$block}__input {
         padding-left: calc(
-          #{map-get($map, icon-size)} +
-            #{get-size(inline-padding-xs)} *
-            2 +
-            #{get-size(border-m)}
+          #{map-get($map, icon-size)} + #{get-size(inline-padding-xs)} * 2 + 1px
         );
       }
 
@@ -75,7 +72,7 @@ $component-size: (
             #{map-get($map, icon-size)} +
               #{get-size(inline-padding-xs)} *
               3 +
-              #{get-size(border-m)} *
+              1px *
               2
           );
         }
@@ -97,7 +94,7 @@ $component-size: (
   &__button {
     position: absolute;
     top: 0;
-    right: get-size(border-m);
+    right: 1px;
     height: 100%;
     display: flex;
     align-items: center;
@@ -112,7 +109,7 @@ $component-size: (
   }
 
   &__button-icon {
-    border-left: get-size(border-m) solid get-color(n-7);
+    border-left: 1px solid get-color(n-7);
   }
 
   &__clear,

src/input/tags-input/mixin.scss

@@ -5,7 +5,7 @@
   .#{$block} {
     display: inline-block;
     position: relative;
-    width: $select-width;
+    width: 100%;
     color: $input-color;
     vertical-align: middle;
 

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

@@ -10,7 +10,7 @@ $block: 'aui-radio-button';
   vertical-align: middle;
   position: relative;
   color: get-color(primary);
-  border: get-size(border-m) $border-style get-color(primary);
+  border: 1px $border-style get-color(primary);
   background-color: get-color(n-9);
   overflow: hidden;
   z-index: 1;

src/radio/radio.component.scss

@@ -42,7 +42,7 @@ $block: 'aui-radio';
     height: get-size(icon-size-m);
     margin-right: get-size(spacing-m);
     border-radius: 50%;
-    border: get-size(border-m) $border-style get-color(n-7);
+    border: 1px $border-style get-color(n-7);
     background-color: get-color(n-9);
     vertical-align: middle;
     @include transition;

src/select/multi-select/multi-select.component.scss

@@ -17,7 +17,7 @@ $block: aui-multi-select;
 
   .#{$block} {
     &__suffix {
-      right: calc(#{get-size(border-m)} + #{get-size(inline-padding-xs)});
+      right: calc(1px + #{get-size(inline-padding-xs)});
     }
   }
 

src/select/option-container.scss

@@ -4,7 +4,7 @@
 
 @mixin option-container($block, $size: m) {
   .#{$block} {
-    padding: get-size(select-options-padding) 0;
+    padding: $select-options-padding 0;
     border-radius: get-size(border-radius-m);
     background-color: get-color(n-10);
     @include popper-shadow;
@@ -16,7 +16,7 @@
       @include scroll-bar;
       .divider {
         border: none;
-        @include option-group-divider;
+        border-top: 1px solid get-color(n-8);
       }
     }
 

src/select/option-group/option-group-style.scss

@@ -1,50 +1,17 @@
 @import '../../theme/var';
 @import '../../theme/mixin';
 
-@mixin option-group-divider {
-  border-top: get-size(border-m) solid get-color(n-8);
-}
-
 @mixin option-group($block) {
-  $title-height: calc(
-    #{get-size(line-height-s)} + #{get-size(select-options-padding)}
-  );
   .#{$block} {
     &__title {
-      font-size: get-size(font-size-s);
-      line-height: get-size(line-height-s);
-      padding: calc(#{get-size(select-options-padding)} / 2)
-        get-size(select-options-padding);
-      color: get-text-color(help);
-      width: 100%;
-      background-color: get-color(n-10);
-      position: relative;
-      z-index: 1;
-    }
-
-    &__title-wrapper {
-      position: sticky;
-      top: 0;
-      margin-top: get-size(border-m);
-      height: calc(#{$title-height} + #{get-size(border-m)});
-      &:after {
-        position: sticky;
-        content: ' ';
-        width: 100%;
-        height: get-size(border-m);
-        display: block;
-        background-color: get-color(n-8);
-        top: $title-height;
-        margin-top: -1px;
-      }
+      padding: 4px 8px;
+      @include text-set(s, help);
     }
   }
 
   #{$block}:not(:first-child) .#{$block} {
-    padding-top: get-size(select-options-padding);
-    @include option-group-divider;
-  }
-  #{$block}:not(:last-child) .#{$block} {
-    padding-bottom: get-size(select-options-padding);
+    margin-top: 8px;
+    padding-top: 8px;
+    border-top: 1px solid get-color(n-8);
   }
 }

src/select/option-group/option-group.component.html

@@ -1,6 +1,4 @@
 <div [hidden]="!(hasVisibleOption$ | async)" class="aui-option-group">
-  <div class="aui-option-group__title-wrapper" [hidden]="!groupTitle">
-    <ng-content select="[auiOptionGroupTitle]"></ng-content>
-  </div>
+  <ng-content select="[auiOptionGroupTitle]"></ng-content>
   <div class="aui-option-group__content"><ng-content></ng-content></div>
 </div>

src/select/option-group/option-group.component.ts

@@ -2,7 +2,6 @@ import {
   AfterContentInit,
   ChangeDetectionStrategy,
   Component,
-  ContentChild,
   ContentChildren,
   QueryList,
   ViewEncapsulation,
@@ -17,7 +16,6 @@ import {
   switchMap,
 } from 'rxjs/operators';
 
-import { OptionGroupTitleDirective } from '../helper-directives';
 import { OptionComponent } from '../option/option.component';
 
 @Component({
@@ -32,9 +30,6 @@ export class OptionGroupComponent<T> implements AfterContentInit {
   @ContentChildren(forwardRef(() => OptionComponent))
   options: QueryList<OptionComponent<T>>;
 
-  @ContentChild(forwardRef(() => OptionGroupTitleDirective))
-  groupTitle: OptionGroupTitleDirective;
-
   hasVisibleOption$: Observable<boolean>;
 
   ngAfterContentInit() {

src/select/select.component.scss

@@ -9,7 +9,7 @@
 .aui-select {
   display: inline-block;
   position: relative;
-  width: get-size(select-width);
+  width: 100%;
 
   &__clear .aui-icon {
     @include clear-button;

src/switch/switch.component.scss

@@ -11,8 +11,9 @@ $switch-bar-width: 28px;
 $switch-bar-height: 14px;
 
 .#{$block} {
-  display: inline-block;
+  display: inline-flex;
   position: relative;
+  vertical-align: text-bottom;
   &__input {
     position: absolute;
     width: 0;