Merge pull request #8789 from IgniteUI/refactor_dialog_component

Dialog component refactoring

Author: kdinev

CHANGELOG.md

@@ -7,6 +7,8 @@ All notable changes for each version of this project will be documented in this
 - `IgxDropDown`
     - The `igx-drop-down-item` now allows for `igxPrefix`, `igxSuffix` and `igx-divider` directives to be passed as `ng-content` and they will be renderer accordingly in the item's content.
 ### General
+- `IgxDialog`
+    - The dialog content has been moved inside the dialog window container in the template. This means that if you have added something in-between the opening and closing tags of the dialog, you may have to adjust its styling a bit since that content is now rendered inside a container that has padding on it.
 - `IgxCalendar`
     - A new string enumeration `IgxCalendarView` is exported. Either the new one or the current `CalendarView` can be used. `CalendarView` will be deprecated in a future release.
 - `IgxRadioGroup`

projects/igniteui-angular/src/lib/dialog/dialog-content.component.html

@@ -6,8 +6,10 @@
         </div>
         <ng-content *ngIf="!title" select="igx-dialog-title,[igxDialogTitle]"></ng-content>
 
-        <div class="igx-dialog__window-content" *ngIf="message">{{ message }}</div>
-        <ng-content *ngIf="!message"></ng-content>
+        <div class="igx-dialog__window-content">
+            {{ message }}
+            <ng-content *ngIf="!message"></ng-content>
+        </div>
 
         <div *ngIf="leftButtonLabel || rightButtonLabel" class="igx-dialog__window-actions">
             <button *ngIf="leftButtonLabel" type="button" [igxFocus]="isOpen" igxButton="{{ leftButtonType }}" igxButtonColor="{{ leftButtonColor }}" igxButtonBackground="{{ leftButtonBackgroundColor }}"

projects/igniteui-angular/src/lib/dialog/dialog.component.spec.ts

@@ -232,7 +232,7 @@ describe('Dialog', () => {
         dialog.open();
         tick();
         fixture.detectChanges();
-        const buttons = document.getElementsByClassName('custom-sample')[0].nextElementSibling.querySelectorAll('button');
+        const buttons = document.querySelectorAll('button');
         const leftButton = buttons[0];
         const rightButton = buttons[1];
 
@@ -313,10 +313,10 @@ describe('Dialog', () => {
             fixture.detectChanges();
 
             const dialogWindow = fixture.debugElement.query(By.css('.igx-dialog__window'));
-            expect(dialogWindow.children.length).toEqual(2);
+            expect(dialogWindow.children.length).toEqual(3);
 
             expect(dialogWindow.children[0].nativeElement.innerText.toString()).toContain('TITLE');
-            expect(dialogWindow.children[1].nativeElement.innerText.toString()).toContain('BUTTONS');
+            expect(dialogWindow.children[2].nativeElement.innerText.toString()).toContain('BUTTONS');
 
             dialog.close();
         });

src/app/dialog/dialog.sample.css

@@ -2,10 +2,6 @@
     max-width: 200px;
 }
 
-.login-form {
-    padding: 0 24px 24px 24px;
-}
-
 .icon {
     font-size: .75em;
 }

src/app/drag-drop/drag-drop.sample.html

@@ -29,10 +29,10 @@ <h4 class="sample-title">Ghost and base templating:</h4>
         <br>
         <h4 class="sample-title">Drag Handle:</h4>
         <button igxButton="raised" igxRipple (click)="openDialog()" [style.width.px]="150">Open dialog</button>
-        <div igxToggle #toggleForm="toggle" class="igx-dialog" [style.width.px]="280"
+        <div igxToggle #toggleForm="toggle" class="igx-dialog" [style.width.px]="320"
              igxDrag [ghost]="false" [dragTolerance]="0" [dragChannel]="'dialog'">
             <div class="igx-dialog__window">
-                <div class="login-form">
+                <div class="igx-dialog__window-content">
                     <div class="dialogHeader">
                         <span [style.margin.px]="10">Sign In</span>
                         <igx-icon igxDragHandle fontSet="material" class="dialogHandle">control_camera</igx-icon>

src/app/grid-multi-row-layout-config/grid-mrl-config.sample.css

@@ -8,6 +8,11 @@
     border: 1px black dotted;
 }
 
+textarea {
+    max-width: 100%;
+    padding: 8px;
+}
+
 .columnOut {
     display: flex;
     height: 32px;

src/app/grid-multi-row-layout-config/grid-mrl-config.sample.html

@@ -93,8 +93,6 @@
      <igx-dialog #jsonDialog title="Multi-row layout result:"
         leftButtonLabel="Cancel" (onLeftButtonSelect)="jsonDialog.close()" rightButtonLabel="Copy" (onRightButtonSelect)="copyToClipboard()"
         backgroundClick="true" [closeOnOutsideSelect]="true">
-        <div class="login-form">
-            <textarea #textArea rows="18" cols="101" readonly style="margin: 10px;">{{jsonCollection}}</textarea>
-        </div>
+        <textarea #textArea rows="18" cols="101" readonly>{{jsonCollection}}</textarea>
     </igx-dialog>
 </section>

src/app/list/list.sample.html

@@ -325,11 +325,9 @@ <h4 class="sample-title">
 <igx-dialog #addFruitDialog title="Add Fruit" leftButtonLabel="Cancel" (onLeftButtonSelect)="addFruitDialog.close()" rightButtonLabel="Add"
             rightButtonBackgroundColor="#0375be" rightButtonColor="white" (onRightButtonSelect)="onAddFruitButtonClicked(newFruitName.value);newFruitName.value='';"
             backgroundClick="true" closeOnOutsideSelect="true">
-    <div class="sample-dialog-content">
-        <igx-input-group>
-            <label for="newFruit">Fruit Name</label>
-            <input id="newFruit" igxInput #newFruitName type="text" />
-        </igx-input-group>
-    </div>
+    <igx-input-group>
+        <label igxLabel for="newFruit">Fruit Name</label>
+        <input id="newFruit" igxInput #newFruitName type="text" />
+    </igx-input-group>
 </igx-dialog>
 

src/app/list/list.sample.scss

@@ -18,10 +18,6 @@
             position: relative;
         }
 
-        .sample-dialog-content {
-            padding: 8px;
-        }
-
         .sample-column.bootstrap {
             display: none;
         }