Merge branch 'master' into didimmova/grid-theme-builder

Author: didimmova

projects/igniteui-angular/badge/src/badge/badge.component.ts

@@ -77,7 +77,6 @@ export class IgxBadgeComponent {
     * Sets/gets the value to be displayed inside the badge.
     *
     * @remarks
-    * If an `icon` property is already set the `icon` will be displayed.
     * If neither a `value` nor an `icon` is set the content of the badge will be empty.
     *
     * @example
@@ -92,7 +91,6 @@ export class IgxBadgeComponent {
      * Sets/gets an icon for the badge from the material icons set.
      *
      * @remarks
-     * Has priority over the `value` property.
      * If neither a `value` nor an `icon` is set the content of the badge will be empty.
      * Providing an invalid value won't display anything.
      *

projects/igniteui-angular/core/src/core/styles/components/badge/_badge-theme.scss

@@ -26,6 +26,12 @@
         border-radius: calc(var(--size) / 2);
         box-shadow: var-get($theme, 'elevation');
         overflow: hidden;
+        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
+        gap: rem(2px);
+
+        &:has(igx-icon:only-child) {
+            padding-inline: 0;
+        }
 
         igx-icon {
             --size: var(--ig-icon-size, #{sizable(rem(12px), rem(14px), rem(16px))});
@@ -56,7 +62,6 @@
 
     %igx-badge-value {
         white-space: nowrap;
-        padding-inline: pad-inline(rem(4px), rem(6px), if($variant == 'indigo', rem(6px), rem(8px)));
     }
 
     %igx-badge--success {

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);