RED-5875: Material upgrade - buttons: chevron button

src/assets/styles/common-buttons.scss

@@ -53,10 +53,6 @@ iqser-circle-button .mat-mdc-icon-button {
         height: inherit;
     }
 
-    &.overlay {
-        background: rgba(var(--iqser-primary-rgb), 0.1);
-    }
-
     &.primary {
         --mdc-icon-button-icon-color: var(--iqser-white);
 
@@ -76,6 +72,7 @@ iqser-circle-button .mat-mdc-icon-button {
         width: var(--circle-button-icon-size);
         height: var(--circle-button-icon-size);
         line-height: var(--circle-button-icon-size);
+        margin: 0 !important;
 
         svg {
             line-height: var(--circle-button-icon-size);
@@ -83,14 +80,31 @@ iqser-circle-button .mat-mdc-icon-button {
     }
 }
 
+iqser-chevron-button .mat-mdc-button {
+    --mdc-text-button-container-shape: var(--iqser-button-radius);
+
+    height: var(--iqser-button-height);
+
+    &:not([disabled]) {
+        --mdc-text-button-label-text-color: var(--iqser-accent);
+    }
+}
+
 iqser-chevron-button,
 iqser-circle-button,
 iqser-icon-button {
+    display: block;
+    position: relative;
+
     .dot {
         top: 1px;
         left: 1px;
     }
 
+    .overlay {
+        background: rgba(var(--iqser-primary-rgb), 0.1);
+    }
+
     &[aria-expanded='true'] {
         .mat-mdc-button-base {
             background: rgba(var(--iqser-primary-rgb), 0.1);

src/assets/styles/common-toggle.scss

@@ -35,7 +35,7 @@
     --mdc-switch-handle-shape: 6px;
 
     .mdc-form-field > label {
-        margin: 0;
+        margin-left: 8px;
         padding-left: 0;
     }
 

src/lib/buttons/chevron-button/chevron-button.component.html

@@ -1,6 +1,6 @@
 <button [class.overlay]="showDot" [class.primary]="primary" [disabled]="disabled" [id]="buttonId" mat-button>
     <span>{{ label }}</span>
-    <mat-icon class="chevron-icon" svgIcon="iqser:arrow-down"></mat-icon>
+    <mat-icon class="chevron-icon" iconPositionEnd svgIcon="iqser:arrow-down"></mat-icon>
 </button>
 
 <div *ngIf="showDot" class="dot"></div>

src/lib/buttons/circle-button/circle-button.component.scss

@@ -1,9 +1,4 @@
-:host {
+:host > div {
-    display: block;
+    width: var(--circle-button-size);
-
+    height: var(--circle-button-size);
-    > div {
-        width: var(--circle-button-size);
-        height: var(--circle-button-size);
-        position: relative;
-    }
 }

src/lib/filtering/popup-filter/popup-filter.component.ts

@@ -18,11 +18,10 @@ export class PopupFilterComponent implements OnInit {
     @Input() secondaryFiltersSlug = '';
     @Input() primaryFiltersLabel: string = _('filter-menu.filter-types');
 
-    hasActiveFilters$?: Observable<boolean>;
-
     readonly expanded = new BehaviorSubject<boolean>(false);
     readonly expanded$ = this.expanded.asObservable().pipe(delay(200));
 
+    hasActiveFilters$!: Observable<boolean>;
     primaryFilterGroup$!: Observable<IFilterGroup | undefined>;
     secondaryFilterGroup$!: Observable<IFilterGroup | undefined>;
     primaryFiltersDisabled$!: Observable<boolean>;