Merge pull request #374 from funidata/DS-292-storybook-figma-sync

[Dialog, Tooltip, Notification]: Sync components to match Figma designs

ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.docs.mdx

@@ -131,7 +131,8 @@ Directives written with `kebab-case` are meant to be used as HTML element.
 
 ## Examples
 
-<Canvas of={DialogStories.Example}></Canvas>
+<Canvas of={DialogStories.ExampleWithForm}></Canvas>
+<Canvas of={DialogStories.ExampleWithGrid}></Canvas>
 
 ### Full code example
 

ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/dialog.stories.ts

@@ -1,7 +1,6 @@
 import { Component, Inject, Input, TemplateRef } from '@angular/core';
 import { StoryFn, Meta, moduleMetadata } from '@storybook/angular';
 import { FormControl, FormGroup, ReactiveFormsModule, FormsModule } from '@angular/forms';
-import { RouterTestingModule } from '@angular/router/testing';
 import { ComponentType } from '@angular/cdk/portal';
 import { FudisDialogService } from '../../services/dialog/dialog.service';
 import docs from './dialog.docs.mdx';
@@ -15,10 +14,54 @@ type TestForm = {
   powerAnimal: FormControl<string | null>;
 };
 
+@Component({
+  selector: 'fudis-dialog-laucher',
+  template: ` <fudis-button
+      (handleClick)="openDialogComponent()"
+      [label]="'Open dialog with form'"
+    ></fudis-button>
+
+    <ng-container *ngIf="this._chosenPowerAnimal">
+      <fudis-body-text
+        >Great choise, your power animal is {{ this._chosenPowerAnimal }}.</fudis-body-text
+      >
+    </ng-container>`,
+})
+class DialogLaucherComponent {
+  constructor(private _dialogService: FudisDialogService) {}
+
+  @Input() size: FudisDialogSize = 'md';
+
+  protected _chosenPowerAnimal: string | null;
+
+  exampleDialogFormGroup = new FormGroup<TestForm>({
+    powerAnimal: new FormControl(
+      null,
+      FudisValidators.required('You need to choose your power animal'),
+    ),
+  });
+
+  openDialogComponent() {
+    this._dialogService
+      .open(DialogWithFormComponent, {
+        data: {
+          greeting: 'This is greeting sent from the component, which opened up this dialog!',
+          size: this.size,
+        },
+      })
+      .afterClosed()
+      .subscribe((result: string) => {
+        if (result) {
+          this._chosenPowerAnimal = result;
+        }
+      });
+  }
+}
+
 @Component({
   selector: 'fudis-dialog-with-form',
   template: `
-    <fudis-dialog [size]="size">
+    <fudis-dialog [size]="_size">
       <fudis-dialog-content>
         <fudis-form
           [title]="'Dialog with fudis-form'"
@@ -41,7 +84,7 @@ type TestForm = {
               </ng-template>
             </fudis-fieldset>
           </ng-template>
-          <ng-template fudisActions type="form">
+          <ng-template fudisActions [type]="'form'">
             <fudis-button
               fudisFormSubmit
               [formValid]="exampleDialogFormGroup.valid"
@@ -55,17 +98,18 @@ type TestForm = {
     </fudis-dialog>
   `,
 })
-class DialogExampleWithFormComponent {
+class DialogWithFormComponent {
   constructor(
-    @Inject(MAT_DIALOG_DATA) private data: { greeting: string },
+    @Inject(MAT_DIALOG_DATA) private data: { greeting: string; size: FudisDialogSize },
     private _dialogService: FudisDialogService,
   ) {
     this._greetingFromOpeningComponent = this.data.greeting;
+    this._size = this.data.size;
   }
 
-  protected _greetingFromOpeningComponent: string;
+  protected _size: FudisDialogSize;
 
-  @Input() size: FudisDialogSize = 'md';
+  protected _greetingFromOpeningComponent: string;
 
   exampleDialogFormGroup = new FormGroup<TestForm>({
     powerAnimal: new FormControl(
@@ -85,24 +129,13 @@ class DialogExampleWithFormComponent {
 }
 
 @Component({
-  selector: 'fudis-dialog-example-laucher',
+  selector: 'fudis-dialog-with-grid',
   template: `
-    <fudis-grid [columns]="'1fr 1fr'" [width]="'xs'" [align]="'start'">
-      <fudis-button
-        (handleClick)="openDialogComponent()"
-        [label]="'Open dialog with form'"
-      ></fudis-button>
-      <fudis-button
-        (handleClick)="openDialogTemplate(dialogWithGrid)"
-        [label]="'Open dialog with grid'"
-      ></fudis-button>
-    </fudis-grid>
+    <fudis-button
+      (handleClick)="openDialogTemplate(dialogWithGrid)"
+      [label]="'Open dialog with grid'"
+    ></fudis-button>
 
-    <ng-container *ngIf="this._chosenPowerAnimal">
-      <fudis-body-text
-        >Great choise, your power animal is {{ this._chosenPowerAnimal }}.</fudis-body-text
-      >
-    </ng-container>
     <ng-template #dialogWithGrid>
       <fudis-dialog [size]="size">
         <fudis-heading fudisDialogTitle [level]="2"
@@ -193,35 +226,11 @@ class DialogExampleWithFormComponent {
     </ng-template>
   `,
 })
-class DialogExampleLauncherComponent {
+class DialogWithGridComponent {
   constructor(private _dialogService: FudisDialogService) {}
 
   @Input() size: FudisDialogSize = 'md';
 
-  protected _chosenPowerAnimal: string | null;
-
-  exampleDialogFormGroup = new FormGroup<TestForm>({
-    powerAnimal: new FormControl(
-      null,
-      FudisValidators.required('You need to choose your power animal'),
-    ),
-  });
-
-  openDialogComponent() {
-    this._dialogService
-      .open(DialogExampleWithFormComponent, {
-        data: {
-          greeting: 'This is greeting sent from the component, which opened up this dialog!',
-        },
-      })
-      .afterClosed()
-      .subscribe((result: string) => {
-        if (result) {
-          this._chosenPowerAnimal = result;
-        }
-      });
-  }
-
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   openDialogTemplate<T = any>(dialogToOpen: ComponentType<T> | TemplateRef<T>) {
     this._dialogService.open(dialogToOpen);
@@ -233,9 +242,9 @@ export default {
   component: DialogComponent,
   decorators: [
     moduleMetadata({
-      imports: [ReactiveFormsModule, FormsModule, RouterTestingModule],
+      imports: [ReactiveFormsModule, FormsModule],
       providers: [],
-      declarations: [DialogExampleLauncherComponent, DialogExampleWithFormComponent],
+      declarations: [DialogWithGridComponent, DialogWithFormComponent, DialogLaucherComponent],
     }),
   ],
   parameters: {
@@ -256,12 +265,22 @@ export default {
 
 const html = String.raw;
 
-const Template: StoryFn<DialogComponent> = (args: DialogComponent) => ({
+const TemplateGrid: StoryFn<DialogComponent> = (args: DialogComponent) => ({
+  props: args,
+  template: html` <fudis-dialog-with-grid [size]="size"></fudis-dialog-with-grid> `,
+});
+
+const TemplateFrom: StoryFn<DialogComponent> = (args: DialogComponent) => ({
   props: args,
-  template: html` <fudis-dialog-example-laucher [size]="size"></fudis-dialog-example-laucher> `,
+  template: html` <fudis-dialog-laucher [size]="size"></fudis-dialog-laucher> `,
 });
 
-export const Example = Template.bind({});
-Example.args = {
+export const ExampleWithForm = TemplateFrom.bind({});
+ExampleWithForm.args = {
+  size: 'md',
+};
+
+export const ExampleWithGrid = TemplateGrid.bind({});
+ExampleWithForm.args = {
   size: 'md',
 };

ngx-fudis/projects/ngx-fudis/src/lib/components/dialog/ngMaterial-theme.scss

@@ -1,13 +1,15 @@
 /* stylelint-disable selector-max-compound-selectors */
 /* stylelint-disable declaration-no-important */
 /* stylelint-disable declaration-property-value-disallowed-list */
+/* stylelint-disable max-nesting-depth */
 /* stylelint-disable unit-disallowed-list */
 /* stylelint-disable selector-max-class */
 /* stylelint-disable selector-class-pattern */
 /* stylelint-disable selector-no-qualifying-type */
 /* stylelint-disable scss/selector-no-redundant-nesting-selector */
 
 @use "../../foundations/colors/tokens.scss" as colors;
+@use "../../foundations/colors/mixins.scss" as colorMixins;
 @use "../../foundations/borders/mixins.scss" as borders;
 @use "../../foundations/focus/mixins.scss" as focus;
 @use "../../foundations/breakpoints/mixins.scss" as breakpoints;
@@ -21,67 +23,79 @@
 }
 
 .fudis-dialog-panel {
-  border-top: 2px solid colors.$color-gray-dark;
+  border-top: 1px solid colors.$color-gray-dark;
   border-right: none;
-  border-bottom: 2px solid colors.$color-gray-dark;
+  border-bottom: 1px solid colors.$color-gray-dark;
   border-left: none;
   max-width: 100vw !important;
 
   & mat-dialog-container.mat-mdc-dialog-container {
     padding: 0;
 
-    & .mat-mdc-dialog-title {
-      margin: spacing.$spacing-xxs 0 spacing.$spacing-sm 0;
-      padding: 0;
-      pointer-events: none;
+    & .mat-mdc-dialog-surface {
+      border-radius: 0;
+      box-shadow: none;
 
-      &::before {
-        display: none;
-      }
+      & .mat-mdc-dialog-title {
+        margin: spacing.$spacing-xxs 0 spacing.$spacing-sm 0;
+        padding: 0;
+        pointer-events: none;
 
-      &:focus-visible {
-        @include focus.focus-generic;
-      }
+        &::before {
+          display: none;
+        }
+
+        &:focus-visible {
+          @include focus.focus-generic;
+        }
 
-      &:focus-visible.fudis-form__header__title__dialog {
-        outline-offset: -2px;
+        &:focus-visible.fudis-form__header__title__dialog {
+          outline-offset: -2px;
+        }
       }
-    }
 
-    & .mat-mdc-dialog-content {
-      @include utilities.box-reset;
+      & .mat-mdc-dialog-content {
+        @include utilities.box-reset;
 
-      &:focus-visible,
-      &:focus {
-        @include focus.focus-generic;
-      }
+        &:focus-visible,
+        &:focus {
+          @include focus.focus-generic;
+        }
 
-      // Checkbox and radio-button elements need small padding if form is inside dialog
-      // Otherwise focus and invalid styles won't show properly as dialog padding is overlapping them
-      & fudis-checkbox,
-      & fudis-radio-button {
-        padding-left: spacing.$spacing-xxs;
+        // Checkbox and radio-button elements need small padding if form is inside dialog
+        // Otherwise focus and invalid styles won't show properly as dialog padding is overlapping them
+        & fudis-checkbox,
+        & fudis-radio-button {
+          padding-left: spacing.$spacing-xxs;
+        }
       }
-    }
 
-    & .mat-mdc-dialog-actions {
-      align-items: flex-end;
-      margin-top: spacing.$spacing-xs;
-      margin-bottom: 0;
-      padding: 0;
-      min-height: initial;
-
-      & fudis-button {
-        &:not(:first-of-type) {
-          margin-top: spacing.$spacing-xs;
-          margin-left: spacing.$spacing-xs;
+      & .mat-mdc-dialog-actions {
+        align-items: flex-end;
+        margin-top: spacing.$spacing-xs;
+        margin-bottom: 0;
+        padding: 0;
+        min-height: initial;
+
+        & fudis-button {
+          &:not(:first-of-type) {
+            margin-top: spacing.$spacing-xs;
+            margin-left: spacing.$spacing-xs;
+          }
         }
       }
     }
   }
 
+  /* Keep dialog borders visible and as wide as possible until sm breakpoint */
+  @include breakpoints.breakpoint-max("sm") {
+    @include borders.border("1px", "solid", "gray-dark");
+
+    max-width: 98vw !important;
+  }
+
   @include breakpoints.breakpoint("sm") {
-    @include borders.border("2px", "solid", "gray-dark");
+    @include borders.border("1px", "solid", "gray-dark");
 
     max-width: 90vw !important;
 
@@ -98,3 +112,11 @@
     }
   }
 }
+
+.fudis-dialog-backdrop {
+  @include colorMixins.bg-color("white");
+
+  &.cdk-overlay-backdrop.cdk-overlay-backdrop-showing {
+    opacity: 0.95 !important;
+  }
+}

ngx-fudis/projects/ngx-fudis/src/lib/components/form/date/datepicker/datepicker.component.html

@@ -36,7 +36,10 @@
       [disableRipple]="true"
     >
       <mat-icon matDatepickerToggleIcon>
-        <fudis-icon [icon]="'calendar'" [color]="'primary'"></fudis-icon>
+        <fudis-icon
+          [icon]="'calendar'"
+          [color]="control.disabled || disabled ? 'gray-dark' : 'primary'"
+        ></fudis-icon>
       </mat-icon>
     </mat-datepicker-toggle>
     <mat-datepicker