Merge branch 'master' into sivanova/chip-discrepancies

Author: didimmova

.github/CONTRIBUTING.md

@@ -27,7 +27,7 @@ v18.19.1
 git clone https://github.com/IgniteUI/igniteui-webcomponents.git
 cd igniteui-webcomponents
 npm ci
-npm run build
+npm start
 ```
 
 ## Making Changes

package-lock.json

@@ -18,18 +18,14 @@
   },
   "scripts": {
     "start": "npm run storybook",
-    "build": "npm run clean && npm run build:styles && npm run build:typescript && npm run cem && npm run build:meta",
     "build:publish": "npm run cem && node scripts/build.mjs",
-    "build:typescript": "tsc",
     "cem": "cem analyze --config cem.config.mjs",
     "cem:watch": "cem analyze --config cem.config.mjs --watch",
     "build:styles": "node scripts/build-styles.mjs",
-    "build:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\"",
     "build:meta": "node scripts/build-stories.mjs",
     "watch-meta": "node scripts/stories-watcher.js ",
     "watch-scss": "node scripts/styles-watcher.mjs",
-    "watch-ts": "tsc --watch --preserveWatchOutput",
-    "check": "madge --circular --warning --no-spinner dist/src/index.js",
+    "check": "madge --circular --warning --no-spinner --ts-config ./tsconfig.json --extensions ts src/index.ts",
     "clean": "npm run clean:dist && npm run clean:styles && npm run clean:docs",
     "clean:dist": "rimraf ./dist",
     "clean:styles": "rimraf --glob \"src/**/*.css.ts\"",
@@ -41,10 +37,10 @@
     "lint:styles": "stylelint \"src/**/*.scss\"",
     "format": "biome check --fix && prettier \"**/*.ts\" --write --ignore-path .gitignore",
     "release": "node scripts/gen-changelog.mjs",
-    "test": "npm run build && wtr --coverage",
-    "test:watch": "npm run build && concurrently -k -r \"npm:watch-scss\" \"npm:watch-ts\" \"wtr --watch\"",
-    "storybook": "npm run build && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000 --debug\"",
-    "storybook:build": "npm run build && storybook build -o ./storybook-static",
+    "test": "npm run build:styles && wtr --coverage",
+    "test:watch": "npm run build:styles && concurrently -k -r \"npm:watch-scss\" \"wtr --watch\"",
+    "storybook": "npm run build:styles && concurrently -k -r \"npm run cem:watch\" \"npm:watch-scss\" \"npm:watch-meta\" \"storybook dev -p 8000\"",
+    "storybook:build": "npm run build:styles && storybook build -o ./storybook-static",
     "build:typedoc:export": "node scripts/build-typedoc.js export",
     "build:typedoc:import": "node scripts/build-typedoc.js import",
     "build:typedoc:watch": "node scripts/build-typedoc.js watch",
@@ -64,13 +60,14 @@
     "@custom-elements-manifest/analyzer": "^0.10.3",
     "@igniteui/material-icons-extended": "^3.1.0",
     "@open-wc/testing": "^4.0.0",
-    "@storybook/addon-a11y": "^8.4.6",
-    "@storybook/addon-actions": "^8.4.6",
-    "@storybook/addon-essentials": "^8.4.6",
-    "@storybook/addon-links": "^8.4.6",
-    "@storybook/web-components": "^8.4.6",
-    "@storybook/web-components-vite": "^8.4.6",
+    "@storybook/addon-a11y": "^8.4.7",
+    "@storybook/addon-actions": "^8.4.7",
+    "@storybook/addon-essentials": "^8.4.7",
+    "@storybook/addon-links": "^8.4.7",
+    "@storybook/web-components": "^8.4.7",
+    "@storybook/web-components-vite": "^8.4.7",
     "@types/mocha": "^10.0.10",
+    "@web/dev-server-esbuild": "^1.0.3",
     "@web/test-runner": "^0.19.0",
     "@web/test-runner-playwright": "^0.11.0",
     "autoprefixer": "^10.4.20",
@@ -90,12 +87,12 @@
     "node-watch": "^0.7.4",
     "playwright": "^1.49.0",
     "postcss": "^8.4.49",
-    "prettier": "^3.4.1",
+    "prettier": "^3.4.2",
     "rimraf": "^5.0.10",
     "sass": "^1.78.0",
     "sass-embedded": "^1.78.0",
     "sinon": "^19.0.2",
-    "storybook": "^8.4.6",
+    "storybook": "^8.4.7",
     "stylelint": "^16.11.0",
     "stylelint-config-standard-scss": "^14.0.0",
     "stylelint-prettier": "^5.0.2",
@@ -105,17 +102,23 @@
     "typedoc": "^0.26.11",
     "typedoc-plugin-localization": "^3.0.5",
     "typescript": "^5.6.3",
-    "vite": "^6.0.1"
+    "vite": "^6.0.3"
   },
   "browserslist": [
     "defaults"
   ],
   "lint-staged": {
     "*.{js,ts,cjs,mjs,jsx,tsx}": [
       "biome check --fix --no-errors-on-unmatched",
-      "prettier --write",
-      "git add"
+      "prettier --write"
     ]
   },
+  "madge": {
+    "detectiveOptions": {
+      "ts": {
+        "skipTypeImports": true
+      }
+    }
+  },
   "customElements": "custom-elements.json"
 }

package.json

@@ -5,6 +5,12 @@ $theme: $material;
 
 :host {
     --component-size: var(--ig-size, #{var-get($theme, 'default-size')});
+
+    ::slotted(igc-icon) {
+        --ig-size: 3;
+
+        color: var-get($theme, 'icon-color');
+    }
 }
 
 [part='base'] {

src/components/avatar/themes/shared/avatar.common.scss

@@ -8,7 +8,5 @@ $theme: $indigo;
 
     ::slotted(igc-icon) {
         --ig-size: 1;
-
-        color: var-get($theme, 'icon-color');
     }
 }

src/components/avatar/themes/shared/avatar.indigo.scss

@@ -1,8 +1,14 @@
 import type { Meta, StoryObj } from '@storybook/web-components';
 
-import { IgcAvatarComponent, defineComponents } from 'igniteui-webcomponents';
+import {
+  IgcAvatarComponent,
+  IgcIconComponent,
+  defineComponents,
+  registerIcon,
+} from 'igniteui-webcomponents';
+import { html } from 'lit';
 
-defineComponents(IgcAvatarComponent);
+defineComponents(IgcAvatarComponent, IgcIconComponent);
 
 // region default
 const metadata: Meta<IgcAvatarComponent> = {
@@ -57,6 +63,11 @@ interface IgcAvatarArgs {
 }
 type Story = StoryObj<IgcAvatarArgs>;
 
+registerIcon(
+  'home',
+  'https://unpkg.com/[email protected]/action/svg/production/ic_home_24px.svg'
+);
+
 // endregion
 
 export const Image: Story = {
@@ -66,6 +77,14 @@ export const Image: Story = {
   },
 };
 
+export const WithIcon: Story = {
+  render: () => html`
+    <igc-avatar>
+      <igc-icon name="home"></igc-icon>
+    </igc-avatar>
+  `,
+};
+
 export const WithInitials: Story = {
   args: {
     initials: 'RK',

stories/avatar.stories.ts

@@ -4,6 +4,7 @@ import { html } from 'lit';
 import {
   IgcButtonComponent,
   IgcInputComponent,
+  type IgcStepComponent,
   IgcStepperComponent,
   defineComponents,
 } from 'igniteui-webcomponents';
@@ -122,19 +123,35 @@ const BasicTemplate = ({
   verticalAnimation,
   horizontalAnimation,
 }: IgcStepperArgs) => {
-  const next = () => {
+  document.addEventListener('DOMContentLoaded', () => {
     const stepper = document.getElementById('stepper') as IgcStepperComponent;
-    stepper.next();
-  };
 
-  const prev = () => {
+    stepper.addEventListener('igcInput', () => {
+      checkValidity();
+    });
+    stepper.addEventListener('igcChange', () => {
+      checkValidity();
+    });
+  });
+
+  function checkValidity() {
     const stepper = document.getElementById('stepper') as IgcStepperComponent;
-    stepper.prev();
-  };
+    const activeStep = stepper.steps.find(
+      (step) => step.active
+    ) as IgcStepComponent;
+    const form = activeStep!.querySelector('form') as HTMLFormElement;
+    const isFormInvalid = !form.checkValidity();
 
-  return html`
-    <span>test content top</span>
+    if (activeStep!.optional) {
+      return;
+    }
+
+    if (stepper.linear) {
+      activeStep!.invalid = isFormInvalid;
+    }
+  }
 
+  return html`
     <igc-stepper
       id="stepper"
       .orientation=${orientation}
@@ -146,31 +163,28 @@ const BasicTemplate = ({
       .verticalAnimation=${verticalAnimation}
       .horizontalAnimation=${horizontalAnimation}
     >
-      <igc-step complete>
+      <igc-step invalid>
         <span slot="title">Step1</span>
-        <span slot="subtitle">(completed)</span>
-        <igc-input
-          label="First Name"
-          id="first-name"
-          name="first-name"
-          required
-        ></igc-input>
-        <br /><br />
-        <igc-button @click=${next}>Next</igc-button>
+        <form id="form">
+          <igc-input
+            label="First Name"
+            id="first-name"
+            name="first-name"
+            required
+          ></igc-input>
+        </form>
       </igc-step>
 
-      <igc-step active>
+      <igc-step invalid>
         <span slot="title">Step 2</span>
-        <span slot="subtitle">(default)</span>
-        <igc-input
-          label="Last Name"
-          id="last-name"
-          name="last-name"
-          required
-        ></igc-input>
-        <br /><br />
-        <igc-button @click=${prev}>Prev</igc-button>
-        <igc-button @click=${next}>Next</igc-button>
+        <form id="form">
+          <igc-input
+            label="Last Name"
+            id="last-name"
+            name="last-name"
+            required
+          ></igc-input>
+        </form>
       </igc-step>
 
       <igc-step optional>
@@ -180,9 +194,6 @@ const BasicTemplate = ({
         soluta nulla asperiores, officia ullam recusandae voluptatem omnis
         perferendis vitae non magni magnam praesentium placeat nemo quas
         repudiandae. Nisi, quo ex!
-        <br /><br />
-        <igc-button @click=${prev}>Prev</igc-button>
-        <igc-button @click=${next}>Next</igc-button>
       </igc-step>
 
       <igc-step disabled>
@@ -197,11 +208,8 @@ const BasicTemplate = ({
           repudiandae. Nisi, quo ex!
         </div>
         <br />
-        <igc-button @click=${prev}>Prev</igc-button>
       </igc-step>
     </igc-stepper>
-
-    <span>test content bottom</span>
   `;
 };
 

stories/stepper.stories.ts

@@ -1,7 +1,9 @@
+import { fileURLToPath } from 'node:url';
 import { playwrightLauncher } from '@web/test-runner-playwright';
+import { esbuildPlugin } from '@web/dev-server-esbuild';
 
 export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
-  files: ['dist/**/*.spec.js'],
+  files: ['src/**/*.spec.ts'],
   browsers: [playwrightLauncher({ product: 'chromium', headless: true })],
 
   /** Compile JS for older browsers. Requires @web/dev-server-esbuild plugin */
@@ -16,6 +18,13 @@ export default /** @type {import("@web/test-runner").TestRunnerConfig} */ ({
     exclude: ['node_modules/**/*', '**/themes/**'],
   },
 
+  plugins: [
+    esbuildPlugin({
+      ts: true,
+      tsconfig: fileURLToPath(new URL('./tsconfig.json', import.meta.url)),
+    }),
+  ],
+
   // See documentation for all available options
   // https://modern-web.dev/docs/test-runner/cli-and-configuration/#configuration-file
 });