Merge branch 'master' into mpopov/progressbar/refactor-progressbar

Author: simeonoff

CHANGELOG.md

@@ -4,12 +4,14 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](http://keepachangelog.com/)
 and this project adheres to [Semantic Versioning](http://semver.org/).
 
-## Unreleased
+## [5.2.1] - 2025-01-23
 ### Added
 - #### Dialog
   - A new `message` slot that renders text content inside the dialog component has been added. The enhancement was introduced to align the design behavior between Ignite UI for WC and Ignite UI for Angular, ensuring a consistent user experience across products. The newly added `message' slot comes with additional styling with a max-width of 40 characters. The default slot is also still available for rendering content inside the dialog without limiting the component's width.
 
 ### Fixed
+- #### List
+  - CSS variables are correctly consumed from internal schemas [#1538](https://github.com/IgniteUI/igniteui-webcomponents/pull/1538)
 - #### Rating
   - Inaccurate value calculation on selection when step is set to 1 [#1548](https://github.com/IgniteUI/igniteui-webcomponents/issues/1548)
 
@@ -670,6 +672,7 @@ Initial release of Ignite UI Web Components
 - Ripple component
 - Switch component
 
+[5.2.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.2.0...5.2.1
 [5.2.0]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.2...5.2.0
 [5.1.2]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.1...5.1.2
 [5.1.1]: https://github.com/IgniteUI/igniteui-webcomponents/compare/5.1.0...5.1.1

package-lock.json

@@ -60,12 +60,12 @@
     "@custom-elements-manifest/analyzer": "^0.10.4",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^8.5.0",
-    "@storybook/addon-actions": "^8.5.0",
-    "@storybook/addon-essentials": "^8.5.0",
-    "@storybook/addon-links": "^8.5.0",
-    "@storybook/web-components": "^8.5.0",
-    "@storybook/web-components-vite": "^8.5.0",
+    "@storybook/addon-a11y": "^8.5.1",
+    "@storybook/addon-actions": "^8.5.1",
+    "@storybook/addon-essentials": "^8.5.1",
+    "@storybook/addon-links": "^8.5.1",
+    "@storybook/web-components": "^8.5.1",
+    "@storybook/web-components-vite": "^8.5.1",
     "@types/mocha": "^10.0.10",
     "@web/dev-server-esbuild": "^1.0.3",
     "@web/test-runner": "^0.19.0",
@@ -81,17 +81,17 @@
     "ig-typedoc-theme": "^6.0.0",
     "igniteui-theming": "^14.3.1",
     "keep-a-changelog": "^2.5.3",
-    "lint-staged": "^15.4.1",
+    "lint-staged": "^15.4.2",
     "lit-analyzer": "^2.0.3",
     "madge": "^8.0.0",
     "node-watch": "^0.7.4",
-    "playwright": "^1.49.1",
+    "playwright": "^1.50.0",
     "postcss": "^8.5.1",
     "prettier": "^3.4.2",
     "rimraf": "^5.0.10",
     "sass-embedded": "^1.78.0",
     "sinon": "^19.0.2",
-    "storybook": "^8.5.0",
+    "storybook": "^8.5.1",
     "stylelint": "^16.13.2",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-prettier": "^5.0.2",
@@ -101,7 +101,7 @@
     "typedoc": "^0.27.6",
     "typedoc-plugin-localization": "^3.0.6",
     "typescript": "^5.7.3",
-    "vite": "^6.0.10"
+    "vite": "^6.0.11"
   },
   "browserslist": [
     "defaults"

package.json

@@ -1431,6 +1431,45 @@ describe('Combo', () => {
       });
     });
 
+    describe('Form integration with delayed data', () => {
+      const spec = createFormAssociatedTestBed<IgcComboComponent<City>>(html`
+        <igc-combo name="combo" value-key="id" display-key="name"></igc-combo>
+      `);
+
+      function initDataDefaultValue(single = false) {
+        spec.element.singleSelect = single;
+        // assign data after init to simulate async data
+        spec.element.data = cities;
+        spec.element.defaultValue = value;
+      }
+
+      beforeEach(async () => {
+        await spec.setup(IgcComboComponent.tagName);
+      });
+
+      it('correct initial state (single)', () => {
+        initDataDefaultValue(true);
+        spec.assertIsPristine();
+        expect(spec.element.value).to.eql([first(value)]);
+      });
+
+      it('correct initial state (multiple)', () => {
+        initDataDefaultValue();
+        spec.assertIsPristine();
+        expect(spec.element.value).to.eql(value);
+      });
+
+      it('is correctly submitted (single)', () => {
+        initDataDefaultValue(true);
+        spec.assertSubmitHasValue(first(value));
+      });
+
+      it('is correctly submitted (multiple)', () => {
+        initDataDefaultValue();
+        spec.assertSubmitHasValues(value);
+      });
+    });
+
     describe('Validation', () => {
       const spec = createFormAssociatedTestBed<IgcComboComponent<City>>(html`
         <igc-combo

src/components/combo/combo.spec.ts

@@ -181,8 +181,13 @@ export default class IgcComboComponent<
   /* treatAsRef */
   @property({ attribute: false })
   public set data(value: T[]) {
+    if (this._data === value) {
+      return;
+    }
     this._data = asArray(value);
+    const pristine = this._pristine;
     this.value = asArray(this.value);
+    this._pristine = pristine;
     this._state.runPipeline();
   }
 

src/components/combo/combo.ts

@@ -16,7 +16,7 @@ $dropdown-theme: dropdown-theme.$material;
 
         margin-block-start: rem(4px);
         grid-auto-rows: minmax(rem(18px), auto);
-        padding-inline-start: pad-inline(rem(12px), rem(14px), rem(16px));
+        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 
     ::slotted([slot='prefix']),

src/components/combo/themes/shared/combo.material.scss

@@ -57,7 +57,7 @@ $input-theme: input-theme.$material;
         color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: rem(4px);
-        padding-inline-start: pad-inline(rem(12px), rem(14px), rem(16px));
+        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 }
 

src/components/date-picker/themes/shared/date-picker.common.scss

@@ -39,7 +39,7 @@ $fs: rem(16px) !default;
         color: var-get($theme, 'helper-text-color');
         margin-block-start: rem(4px);
         grid-auto-rows: minmax(rem(18px), auto);
-        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 }
 

src/components/input/themes/shared/input.material.scss

@@ -24,7 +24,7 @@ $active-border-width: rem(2px) !default;
         @include type-style('caption');
 
         margin-block-start: rem(4px);
-        padding-inline: pad-inline(rem(12px), rem(14px), rem(16px));
+        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
         grid-auto-rows: minmax(rem(18px), auto);
     }
 }

src/components/select/themes/shared/select.material.scss

@@ -17,7 +17,7 @@ $input-bottom-padding: rem(6px);
         color: var-get($theme, 'helper-text-color');
         grid-auto-rows: minmax(rem(18px), auto);
         margin-block-start: rem(4px);
-        padding-inline-start: pad-inline(rem(12px), rem(14px), rem(16px));
+        padding-inline: pad-inline(rem(14px), rem(16px), rem(18px));
     }
 }