fix(card): action-color not working (#15698)

Author: SisIvanova

projects/igniteui-angular/src/lib/action-strip/themes/_base.scss

@@ -94,6 +94,12 @@ $_theme: $material;
             igx-icon {
                 color: var-get($_theme, 'delete-action');
             }
+
+            [igxIconButton] {
+                igx-icon {
+                    color: var-get($_theme, 'delete-action');
+                }
+            }
         }
 
         @include e(editing-actions) {

projects/igniteui-angular/src/lib/card/themes/_base.scss

@@ -8,7 +8,21 @@
 $theme: $material;
 
 @include layer(base) {
-    %actions {
+    %h-actions {
+        display: flex;
+        align-items: center; 
+        gap: rem(8px);
+
+        [igxIconButton] {
+            color: var-get($theme, 'actions-text-color');
+        }
+
+        &:empty {
+            display: none;
+        }
+    }
+
+    %v-actions {
         flex-direction: column;
 
         [igxButton] ~ [igxButton] {
@@ -155,19 +169,14 @@ $theme: $material;
         }
 
         @include e(start) {
-            display: flex;
-            align-items: center;
-            order: 0;
-            gap: rem(8px);
+            @extend %h-actions;
 
-            &:empty {
-                display: none;
-            }
+            order: 0;
         }
 
         @include e(end) {
-            display: flex;
-            align-items: center;
+            @extend %h-actions;
+
             order: 1;
             color: var-get($theme, 'actions-text-color');
             margin-inline-start: auto;
@@ -178,29 +187,6 @@ $theme: $material;
             }
         }
 
-        @include e(igroup) {
-            display: flex;
-            flex-flow: row nowrap;
-
-            .igx-icon-button {
-                color: var-get($theme, 'actions-text-color');
-            }
-        }
-
-        @include e(igroup, $m: start) {
-            margin-inline-end: auto;
-        }
-
-        @include e(igroup, $m: end) {
-            margin-inline-start: auto;
-        }
-
-        @include e(bgroup) {
-            display: flex;
-            flex-flow: row nowrap;
-            gap: rem(8px);
-        }
-
         @include m(vertical) {
             flex-direction: column;
 
@@ -213,11 +199,11 @@ $theme: $material;
             }
 
             @include e(start) {
-                @extend %actions;
+                @extend %v-actions;
             }
 
             @include e(end) {
-                @extend %actions;
+                @extend %v-actions;
 
                 margin-top: auto;
                 margin-inline-start: 0;

src/app/grid/grid.sample.html

@@ -16,9 +16,7 @@ <h5 class="igx-card-header__subtitle">The row is added through the grid API</h5>
                     </div>
                 </igx-card-content>
                 <igx-card-actions>
-                    <div class="igx-card-actions__bgroup">
-                        <button igxButton igxRipple (click)="addRow()">Add</button>
-                    </div>
+                    <button igxButton igxRipple (click)="addRow()">Add</button>
                 </igx-card-actions>
             </igx-card>
 
@@ -43,9 +41,7 @@ <h3 class="igx-card-header__title">Delete selected row</h3>
                     <h5 class="igx-card-header__subtitle">Revertable for the last deleted row</h5>
                 </igx-card-header>
                 <igx-card-actions>
-                    <div class="igx-card-actions__bgroup">
-                        <button igxButton igxRipple (click)="deleteRow()">Delete Row</button>
-                    </div>
+                    <button igxButton igxRipple (click)="deleteRow()">Delete Row</button>
                 </igx-card-actions>
             </igx-card>
 

src/app/tooltip/tooltip.sample.html

@@ -67,14 +67,12 @@ <h4 class="sample-title">Rich tooltip</h4>
                     </div>
                 </igx-card-content>
                 <igx-card-actions>
-                    <div class="igx-card-actions__igroup igx-card-actions__igroup--start">
-                        <span igxIconButton="flat" igxRipple [igxRippleCentered]="true">
-                            <igx-icon>favorite</igx-icon>
-                        </span>
-                        <span igxIconButton="flat" igxRipple [igxRippleCentered]="true">
-                            <igx-icon>share</igx-icon>
-                        </span>
-                    </div>
+                    <span igxStart igxIconButton="flat" igxRipple [igxRippleCentered]="true">
+                        <igx-icon>favorite</igx-icon>
+                    </span>
+                    <span igxStart igxIconButton="flat" igxRipple [igxRippleCentered]="true">
+                        <igx-icon>share</igx-icon>
+                    </span>
                 </igx-card-actions>
             </igx-card>
         </article>