fix(dh): minor style update in calculations (#2014)

* Use vater in filters + fix minor styling issues * Chore: bump version to 0.3.340 for build/infrastructure/eo/configuration.yaml --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Energinet-DataHub · Sep 5, 2023 · 5e24576 · 5e24576
1 parent 634a64e
commit 5e24576
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 28 deletions.
diff --git a/build/infrastructure/eo/configuration.yaml b/build/infrastructure/eo/configuration.yaml
@@ -1,5 +1,5 @@
 name: eo-frontend
-version: 0.3.339
+version: 0.3.340
 repo: ghcr.io/energinet-datahub
 references:
   - file: k8s/energy-origin-apps/frontend/base/deployment.yaml

diff --git a/libs/dh/wholesale/feature-calculations/src/lib/filters/filters.component.ts b/libs/dh/wholesale/feature-calculations/src/lib/filters/filters.component.ts
@@ -40,6 +40,7 @@ import {
   GetGridAreasDocument,
 } from '@energinet-datahub/dh/shared/domain/graphql';
 import { executionStates, processTypes } from '@energinet-datahub/dh/wholesale/domain';
+import { VaterSpacerComponent, VaterStackComponent } from '@energinet-datahub/watt/vater';
 
 // Map query variables type to object of form controls type
 type FormControls<T> = { [P in keyof T]: FormControl<T[P] | null> };
@@ -54,9 +55,11 @@ const makeFormControl = <T>(value: T = null as T) =>
   changeDetection: ChangeDetectionStrategy.OnPush,
   imports: [
     CommonModule,
-    RxPush,
     ReactiveFormsModule,
+    RxPush,
     TranslocoModule,
+    VaterSpacerComponent,
+    VaterStackComponent,
     WATT_FORM_FIELD,
     WattButtonComponent,
     WattDateRangeChipComponent,
@@ -66,27 +69,21 @@ const makeFormControl = <T>(value: T = null as T) =>
   selector: 'dh-calculations-filters',
   styles: [
     `
-      :host {
-        display: block;
-      }
-
       form {
-        display: flex;
-        gap: 1rem;
-        align-items: center;
-        overflow: auto;
         overflow-y: hidden;
       }
-
-      watt-button {
-        margin-left: auto;
-      }
     `,
   ],
   template: `
-    <form [formGroup]="_formGroup" *transloco="let t; read: 'wholesale.calculations.filters'">
+    <form
+      vater-stack
+      direction="row"
+      gap="m"
+      tabindex="-1"
+      [formGroup]="_formGroup"
+      *transloco="let t; read: 'wholesale.calculations.filters'"
+    >
       <watt-date-range-chip formControlName="period">{{ t('period') }}</watt-date-range-chip>
-
       <watt-form-field>
         <watt-dropdown
           formControlName="processTypes"
@@ -96,7 +93,6 @@ const makeFormControl = <T>(value: T = null as T) =>
           [placeholder]="t('processType')"
         />
       </watt-form-field>
-
       <watt-form-field>
         <watt-dropdown
           formControlName="gridAreaCodes"
@@ -106,11 +102,9 @@ const makeFormControl = <T>(value: T = null as T) =>
           [placeholder]="t('gridAreas')"
         />
       </watt-form-field>
-
       <watt-date-range-chip formControlName="executionTime">
         {{ t('executionTime') }}
       </watt-date-range-chip>
-
       <watt-form-field>
         <watt-dropdown
           formControlName="executionStates"
@@ -120,7 +114,7 @@ const makeFormControl = <T>(value: T = null as T) =>
           [placeholder]="t('executionStates')"
         />
       </watt-form-field>
-
+      <vater-spacer />
       <watt-button variant="text" icon="undo" type="reset">{{ t('reset') }}</watt-button>
     </form>
   `,

diff --git a/libs/watt/src/lib/components/chip/watt-menu-chip.component.ts b/libs/watt/src/lib/components/chip/watt-menu-chip.component.ts
@@ -33,14 +33,6 @@ export type WattMenuChipHasPopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialo
         display: block;
       }
 
-      button {
-        all: unset;
-        pointer-events: none;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        flex: 1 1 auto;
-      }
-
       .menu-icon {
         margin-left: var(--watt-space-xs);
         transition: linear 0.2s all;
@@ -67,6 +59,7 @@ export type WattMenuChipHasPopup = 'menu' | 'listbox' | 'tree' | 'grid' | 'dialo
   template: `
     <watt-chip [disabled]="disabled" [selected]="selected">
       <button
+        class="cdk-visually-hidden"
         [attr.aria-haspopup]="hasPopup"
         [attr.aria-expanded]="opened"
         [attr.aria-pressed]="selected"

diff --git a/libs/watt/src/lib/components/vater/vater-flex.component.ts b/libs/watt/src/lib/components/vater/vater-flex.component.ts
@@ -33,6 +33,7 @@ import { VaterUtilityDirective } from './vater-utility.directive';
       vater-flex,
       [vater-flex] {
         display: flex;
+        line-height: normal;
       }
 
       vater-flex > *,