Merge pull request #1245 from IgniteUI/rkolev/fix-1239

Fixing the visibility of a button

Author: gedinakova

src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.html

@@ -3,20 +3,13 @@
         <igx-list-item [isHeader]="true">Contacts</igx-list-item>
 
         <igx-list-item igxRipple="pink" igxRippleTarget=".igx-list__item-content" *ngFor="let item of navItems">
-            <div class="item-container">
-                <div class="contact">
-                    <igx-avatar [src]="item.avatar" roundShape="true"></igx-avatar>
-                    <div class="contact__info">
-                        <span class="name">{{item.text}}</span>
-                    </div>
-                </div>
-                <span igxButton="icon" igxRipple igxRippleCentered="true" (click)="delete(item)">
+                <igx-avatar igxListThumbnail [src]="item.avatar" roundShape="true"></igx-avatar>
+                <span igxListLineTitle class="name">{{item.text}}</span>
+                <span igxListAction igxButton="icon" igxRipple igxRippleCentered="true" (click)="delete(item)">
                     <igx-icon color="#ff5252">delete</igx-icon>
                 </span>
-            </div>
-
         </igx-list-item>
 
         <igx-snackbar actionText="Undo" (onAction)="restore()">Contact deleted</igx-snackbar>
     </igx-list>
-</div>
+</div>

src/app/notifications/snackbar/snackbar-sample-4/snackbar-sample-4.component.scss

@@ -12,26 +12,6 @@
     box-shadow: 0px 1px 3px 0px rgba(0, 0, 0, 0.2), 0px 1px 1px 0px rgba(0, 0, 0, 0.14), 0px 2px 1px -1px rgba(0, 0, 0, 0.12);
 }
 
-.item-container {
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-}
-
-.contact {
-  display: flex;
-  flex: 1 0 240px;
-  align-items: center;
-  position: relative;
-  z-index: 0;
-
-  &__info {
-    display: flex;
-    flex-flow: column nowrap;
-    margin-left: 24px;
-  }
-}
-
 igx-snackbar {
     position: absolute;
     bottom: 0;