Merge pull request #2084 from IgniteUI/sivanova/improve-drop-down-samples

refactor(drop-down): improve drop-down samples

Author: simeonoff

src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.html

@@ -1,4 +1,4 @@
-<button igxButton [igxToggleAction]="remoteDropDown" [igxDropDownItemNavigation]="remoteDropDown">Products</button>
+<button class="button" igxButton="raised" [igxToggleAction]="remoteDropDown" [igxDropDownItemNavigation]="remoteDropDown">Products</button>
 <igx-drop-down #remoteDropDown>
     <div class="drop-down-virtual-wrapper">
         <igx-drop-down-item
@@ -9,7 +9,7 @@
         </igx-drop-down-item>
     </div>
 </igx-drop-down>
-<div class="selection">Selected Product: <span
-        class="selection__name">{{ remoteDropDown.selectedItem?.value }}</span>
+<div class="selection">Selected Product:
+    <span>{{ remoteDropDown.selectedItem?.value }}</span>
 </div>
-<igx-toast #loadingToast></igx-toast>
+<igx-toast #loadingToast></igx-toast>

src/app/data-entries/dropdown/drop-down-remote-virtual/drop-down-remote.component.scss

@@ -1,21 +1,24 @@
 .drop-down-virtual-wrapper {
     overflow-y: hidden;
-    width: 320px;
+    width: 260px;
     height: 320px;
 }
 
 :host {
     display: flex;
     flex-flow: row;
-    padding: 4px;
+    margin: 8px;
 }
 
-.selection__name {
-    font-weight: 800;
+.button {
+    width: 260px;
 }
 
 .selection {
     line-height: 2.25rem;
-    font-size: 0.925rem;
     padding: 0px 8px;
-}
+}
+
+.igx-drop-down__item {
+    padding: 0 0.8rem;
+}

src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.html

@@ -1,4 +1,4 @@
-<button igxButton [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button>
+<button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown">Item Series</button>
 <igx-drop-down #dropdown>
     <div class="drop-down-virtual-wrapper">
         <igx-drop-down-item
@@ -9,4 +9,4 @@
         </igx-drop-down-item>
     </div>
 </igx-drop-down>
-<div class="selection">Selected Model: <span class="selection__name">{{ dropdown.selectedItem?.value.name }}</span></div>
+<div class="selection">Selected Model: <span>{{ dropdown.selectedItem?.value.name }}</span></div>

src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.scss

@@ -1,21 +1,25 @@
 .drop-down-virtual-wrapper {
     overflow: hidden;
     max-height: 240px;
-    width: 160px;
+    width: 180px;
 }
 
 :host {
     display: flex;
     flex-flow: row;
-    padding: 4px;
+    margin: 8px;
 }
 
-.selection__name {
-    font-weight: 800;
+.button {
+    width: 180px;
 }
 
 .selection {
     line-height: 2.25rem;
-    font-size: 0.925rem;
     padding: 0px 8px;
-}
+}
+
+
+.igx-drop-down__item {
+    padding: 0 0.8rem;
+}

src/app/data-entries/dropdown/drop-down-virtual/drop-down-virtual.component.ts

@@ -1,4 +1,4 @@
-import { ChangeDetectorRef, Component, OnInit } from "@angular/core";
+import { Component } from "@angular/core";
 
 // tslint:disable:object-literal-sort-keys
 // tslint:disable-next-line:interface-name
@@ -14,7 +14,7 @@ interface DataItem {
   templateUrl: "./drop-down-virtual.component.html",
   styleUrls: ["./drop-down-virtual.component.scss"]
 })
-export class DropDownVirtualComponent implements OnInit {
+export class DropDownVirtualComponent {
   public items: DataItem[];
   public itemHeight = 48;
   public itemsMaxHeight = 240;
@@ -40,7 +40,4 @@ export class DropDownVirtualComponent implements OnInit {
     }
     this.items = itemsCollection;
   }
-
-  public ngOnInit() {
-  }
 }

src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.html

@@ -15,9 +15,9 @@
 
     <div class="textContainer">
         <ng-container *ngIf="text">
-            <label igxLabel>Clicked menu item: {{ text }}</label>
+            <label igxLabel>{{ text }}</label>
         </ng-container>
     </div>
 
     <div class="overlayOutlet" igxOverlayOutlet #outlet="overlay-outlet"></div>
-</div>
+</div>

src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.scss

@@ -1,26 +1,12 @@
-
-// in component.scss
-@import '~igniteui-angular/lib/core/styles/themes/index';
-
-$custom-drop-down-theme: igx-drop-down-theme(
-    $border-radius: 4px
-);
-
-:host {
-    ::ng-deep {
-        @include igx-drop-down($custom-drop-down-theme);
-    }
-}
-
 .drop-down-wrapper {
     width: 30%;
-    margin: 5px 5px;
+    margin: 8px;
     min-width: 280px;
+    box-shadow: 0 1px 3px 0 rgba(0,0,0,.26), 0 1px 1px 0 rgba(0,0,0,.12), 0 2px 1px -1px rgba(0,0,0,.08);
 
     .textContainer {
         height: 100px;
-        box-shadow: igx-elevation($elevations, 1);
         border-radius: 2px;
-        padding: 15px;
+        padding: 16px;
     }
 }

src/app/data-entries/dropdown/dropdown-menu/dropdown-menu.component.ts

@@ -1,4 +1,4 @@
-import { Component, ViewEncapsulation } from "@angular/core";
+import { Component } from "@angular/core";
 import {
     ConnectedPositioningStrategy, HorizontalAlignment,
     ISelectionEventArgs, NoOpScrollStrategy, VerticalAlignment

src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.html

@@ -1,8 +1,7 @@
-<div class="sample-wrapper">
-    <button class="button" igxButton="raised" [igxToggleAction]="dropdown" [igxDropDownItemNavigation]="dropdown" >Options</button>
-    <igx-drop-down #dropdown [width]="'100px'">
-        <igx-drop-down-item *ngFor="let item of items">
-            {{ item.field }}
-        </igx-drop-down-item>
-    </igx-drop-down>
-</div>
+<button class="button" igxButton="raised" [igxToggleAction]="dropdown"
+    [igxDropDownItemNavigation]="dropdown">Options</button>
+<igx-drop-down #dropdown>
+    <igx-drop-down-item *ngFor="let item of items">
+        {{ item.field }}
+    </igx-drop-down-item>
+</igx-drop-down>

src/app/data-entries/dropdown/dropdown-sample-1/dropdown-sample-1.component.scss

@@ -1,8 +1,4 @@
-.sample-wrapper {
-    padding-left: 10px;
-    padding-top: 10px;;
-}
-
 .button {
-    width:100px;
+    margin: 8px;
+    width: 128px;
 }