fix(chips): update chip padding to contain text padding (#17187)

* fix(chips): update chip padding to contain text padding

* fix(chip): indigo padding

* fix(chips): apply fixes on paddings

* fix(chips): fix start/end gaps

* spec(filtering-row): change view expectation

Chips are now wider (have bigger padding on both sides), hence fewer
chips are visible in the tests compared to before.

* lint(themes): fix chip linting errors

---------

Co-authored-by: Simeon Simeonoff <sim.simeonoff@gmail.com>

Author: didimmova

projects/igniteui-angular/core/src/core/styles/components/chip/_chip-theme.scss

@@ -1,3 +1,4 @@
+/* stylelint-disable max-nesting-depth */
 @use 'sass:map';
 @use '../../base' as *;
 @use 'igniteui-theming/sass/animations/easings' as *;
@@ -115,7 +116,6 @@
             )
         );
 
-        gap: sizable(rem(3px), rem(6px), rem(8px));
         color: var-get($theme, 'text-color');
         background: var-get($theme, 'background');
         border: $border-size solid var-get($theme, 'border-color');
@@ -410,6 +410,8 @@
     }
 
     %igx-chip__start {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:first-child {
@@ -437,6 +439,8 @@
     }
 
     %igx-chip__end {
+        gap: sizable(rem(3px), rem(6px), rem(8px));
+
         > igx-avatar,
         > igx-circular-bar {
             &:last-child {
@@ -490,6 +494,7 @@
     %igx-chip__content {
         @include ellipsis();
 
+        padding-inline: pad-inline(rem(3px), rem(6px), rem(8px));
         max-width: $chip-max-width;
 
         &:empty {
@@ -578,7 +583,6 @@
 
             &%igx-chip--primary {
                 %igx-chip__item {
-                    /* stylelint-disable max-nesting-depth */
                     @if $theme-variant == 'light' {
                         color: contrast-color($color: 'primary', $variant: 900, $opacity: .4);
                     } @else {

projects/igniteui-angular/grids/grid/src/grid-filtering-ui.spec.ts

@@ -1995,7 +1995,8 @@ describe('IgxGrid - Filtering Row UI actions #grid', () => {
             GridFunctions.clickFilterCellChip(fix, 'ProductName');
             await wait(300);
 
-            verifyMultipleChipsVisibility(fix, [true, true, false, false]);
+            // NOTE: This test is very sensitive to the width of the grid and the chips.
+            verifyMultipleChipsVisibility(fix, [true, false, false, false]);
 
             const filterUIRow = fix.debugElement.query(By.css(FILTER_UI_ROW));
             GridFunctions.removeFilterChipByIndex(1, filterUIRow);