From b7177e00104d1ee3c93726753d1eb1cbf69b3dbe Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Fri, 24 Apr 2026 14:31:27 +0300 Subject: [PATCH 1/7] feat(skills): updating all skills with igniteui-cli mcp refs (#17236) Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-angular-components/SKILL.md | 32 +++++--- .../references/charts.md | 1 + .../references/data-display.md | 3 + .../references/directives.md | 3 + .../references/feedback.md | 3 + .../references/form-controls.md | 3 + .../references/layout-manager.md | 3 + .../references/layout.md | 3 + .../references/mcp-setup.md | 77 +++++++++++++++++++ 9 files changed, 119 insertions(+), 9 deletions(-) create mode 100644 skills/igniteui-angular-components/references/mcp-setup.md diff --git a/skills/igniteui-angular-components/SKILL.md b/skills/igniteui-angular-components/SKILL.md index 1986d57a876..bd59ba8e33d 100644 --- a/skills/igniteui-angular-components/SKILL.md +++ b/skills/igniteui-angular-components/SKILL.md @@ -6,6 +6,29 @@ user-invocable: true # Ignite UI for Angular — UI Components +## Prerequisites +- Angular 20+ project +- `@angular/cli` installed +- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below. +- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)). +- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component** +- The **Ignite UI CLI MCP server** (`igniteui-cli`) is available as a tool provider + +> **AGENT INSTRUCTION — MCP Server Setup (REQUIRED)** +> +> Before using any Ignite UI CLI MCP tools, you MUST verify the MCP server is available +> by calling `list_components`. If the tool is not available or the call fails, +> you MUST automatically configure it by following the setup process steps described below. +> +> After writing the file, inform the user that the MCP server has been +> configured and they may need to reload the editor for the tools to activate. +> Start the MCP server and wait for that MCP server to start before continuing the component-related work. +> Do NOT skip this step or ask the user to do it manually. + +## Setting Up the Ignite UI CLI MCP Server + +> **Full setup instructions for VS Code, Cursor, Claude Desktop, and JetBrains IDEs are in [`references/mcp-setup.md`](./references/mcp-setup.md).** Read that file for editor-specific configuration steps and verification. + ## MANDATORY AGENT PROTOCOL — YOU MUST FOLLOW THIS BEFORE PRODUCING ANY OUTPUT **This file is a routing hub only. It contains NO code examples and NO API details.** @@ -41,15 +64,6 @@ Base your code and explanation exclusively on what you read. If the reference fi --- -## Prerequisites - -- Angular 20+ project -- `@angular/cli` installed -- `igniteui-angular` or `@infragistics/igniteui-angular` added to the project via `ng add igniteui-angular` (or the `@infragistics` variant) or `npm install` — see [Package Variants](#package-variants) below. -- A theme applied to the application (see [`igniteui-angular-theming`](../igniteui-angular-theming/SKILL.md)). -- `provideAnimations()` in `app.config.ts` — **required before using any overlay or animated component** - - ## Package Variants | Package | Install | Who uses it | diff --git a/skills/igniteui-angular-components/references/charts.md b/skills/igniteui-angular-components/references/charts.md index 06ac70b56a3..a73586903eb 100644 --- a/skills/igniteui-angular-components/references/charts.md +++ b/skills/igniteui-angular-components/references/charts.md @@ -15,6 +15,7 @@ ## Overview Ignite UI for Angular Charts provides 65+ chart types for data visualization. Charts are packaged separately in `igniteui-angular-charts` (or `@infragistics/igniteui-angular-charts` for licensed users). +This reference gives high-level guidance on when to use each chart type, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific chart component or feature you're interested in. ### Chart Component packages - `igniteui-angular-charts` — Category Chart, Financial Chart, Data Chart, and Pie Chart components (NPM) diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md index c63c3c1ac9c..2464d6ec8c7 100644 --- a/skills/igniteui-angular-components/references/data-display.md +++ b/skills/igniteui-angular-components/references/data-display.md @@ -16,6 +16,9 @@ - [Progress Indicators](#progress-indicators) - [Chat (AI Chat Component)](#chat-ai-chat-component) +## Overview +This reference gives high-level guidance on when to use each data display component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + ## List > **Docs:** [List Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/list) diff --git a/skills/igniteui-angular-components/references/directives.md b/skills/igniteui-angular-components/references/directives.md index e32b2cb0571..7b242d17c28 100644 --- a/skills/igniteui-angular-components/references/directives.md +++ b/skills/igniteui-angular-components/references/directives.md @@ -11,6 +11,9 @@ - [Tooltip](#tooltip) - [Drag and Drop](#drag-and-drop) +## Overview +This reference gives high-level guidance on when to use each directive, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific directive or feature you're interested in. + ## Button & Icon Button > **Docs:** [Button Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/button) diff --git a/skills/igniteui-angular-components/references/feedback.md b/skills/igniteui-angular-components/references/feedback.md index 3e65adb6d17..abdd9046b7c 100644 --- a/skills/igniteui-angular-components/references/feedback.md +++ b/skills/igniteui-angular-components/references/feedback.md @@ -13,6 +13,9 @@ - [Banner](#banner) - [Key Rules](#key-rules) +## Overview +This reference gives high-level guidance on when to use each feedback and overlay component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + ## Dialog > **Docs:** [Dialog Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/dialog) diff --git a/skills/igniteui-angular-components/references/form-controls.md b/skills/igniteui-angular-components/references/form-controls.md index 27f0b3f484a..ae6c2bd1314 100644 --- a/skills/igniteui-angular-components/references/form-controls.md +++ b/skills/igniteui-angular-components/references/form-controls.md @@ -18,6 +18,9 @@ - [Reactive Forms Integration](#reactive-forms-integration) - [Key Rules](#key-rules) +## Overview +This reference gives high-level guidance on when to use each form control component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + ## Input Group > **Docs:** [Input Group](https://www.infragistics.com/products/ignite-ui-angular/angular/components/input-group) diff --git a/skills/igniteui-angular-components/references/layout-manager.md b/skills/igniteui-angular-components/references/layout-manager.md index 36fc1f55871..d49d8e36400 100644 --- a/skills/igniteui-angular-components/references/layout-manager.md +++ b/skills/igniteui-angular-components/references/layout-manager.md @@ -9,6 +9,9 @@ - [Dock Manager](#dock-manager) - [Tile Manager](#tile-manager) +## Overview +This reference gives high-level guidance on when to use each layout manager component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + --- ## Layout Manager Directives diff --git a/skills/igniteui-angular-components/references/layout.md b/skills/igniteui-angular-components/references/layout.md index cb5ee4e2563..86819fff7eb 100644 --- a/skills/igniteui-angular-components/references/layout.md +++ b/skills/igniteui-angular-components/references/layout.md @@ -12,6 +12,9 @@ - [Splitter](#splitter) - [Navigation Drawer](#navigation-drawer) +## Overview +This reference gives high-level guidance on when to use each layout component, their key features, and common API members. For detailed documentation, call `get_doc` and `get_api_reference` from `igniteui-cli` with the specific component or feature you're interested in. + ## Tabs > **Docs:** [Tabs Component](https://www.infragistics.com/products/ignite-ui-angular/angular/components/tabs) diff --git a/skills/igniteui-angular-components/references/mcp-setup.md b/skills/igniteui-angular-components/references/mcp-setup.md new file mode 100644 index 00000000000..8a18711807f --- /dev/null +++ b/skills/igniteui-angular-components/references/mcp-setup.md @@ -0,0 +1,77 @@ +# Setting Up the Ignite UI CLI MCP Server + +> **Part of the [`igniteui-angular-components`](../SKILL.md) skill hub.** + +## Contents + +- [VS Code](#vs-code) +- [Cursor](#cursor) +- [Claude Desktop](#claude-desktop) +- [WebStorm / JetBrains IDEs](#webstorm--jetbrains-ides) +- [Verifying the Setup](#verifying-the-setup) + +The Ignite UI CLI MCP server enables AI assistants to discover Ignite UI components, access component documentation, and support related Ignite UI workflows. It must be configured in your editor before these tools become available. + +## VS Code + +Create or edit `.vscode/mcp.json` in your project: + +```json +{ + "servers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +This works whether `igniteui-cli` is installed locally in `node_modules` or needs to be pulled from the npm registry — `npx -y` handles both cases. + +## Cursor + +Create or edit `.cursor/mcp.json`: + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## Claude Desktop + +Edit the Claude Desktop config file: +- **macOS**: `~/Library/Application Support/Claude/claude_desktop_config.json` +- **Windows**: `%APPDATA%\Claude\claude_desktop_config.json` + +```json +{ + "mcpServers": { + "igniteui-cli": { + "command": "npx", + "args": ["-y", "igniteui-cli@next", "mcp"] + } + } +} +``` + +## WebStorm / JetBrains IDEs + +1. Go to **Settings → Tools → AI Assistant → MCP Servers** +2. Click **+ Add MCP Server** +3. Set Command to `npx` and Arguments to `igniteui-cli@next mcp` +4. Click OK and restart the AI Assistant + +## Verifying the Setup + +After configuring the MCP server, ask your AI assistant: + +> "List all available Ignite UI components" + +If the MCP server is running, the `list_components` tool will return all available components for the detected framework. From e5930712dc8f4e0222d5fd5efb389b99a411a97d Mon Sep 17 00:00:00 2001 From: mstoyanova Date: Mon, 27 Apr 2026 13:42:49 +0300 Subject: [PATCH 2/7] feat(badge): update badge example and styles for avatar integration --- .../badge/src/badge/badge.component.ts | 8 ++++--- .../references/data-display.md | 22 ++++++++++++++++--- 2 files changed, 24 insertions(+), 6 deletions(-) diff --git a/projects/igniteui-angular/badge/src/badge/badge.component.ts b/projects/igniteui-angular/badge/src/badge/badge.component.ts index 4774c4bed21..fad37ca85f6 100644 --- a/projects/igniteui-angular/badge/src/badge/badge.component.ts +++ b/projects/igniteui-angular/badge/src/badge/badge.component.ts @@ -32,9 +32,11 @@ export type IgxBadgeType = (typeof IgxBadgeType)[keyof typeof IgxBadgeType]; * * @example * ```html - * - * - * + *
+ * + * + *
+ * ``` */ @Component({ selector: 'igx-badge', diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md index 2464d6ec8c7..275108f490c 100644 --- a/skills/igniteui-angular-components/references/data-display.md +++ b/skills/igniteui-angular-components/references/data-display.md @@ -136,9 +136,10 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; ```html - - - +
+ + +
@@ -150,6 +151,21 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; ``` +```scss +// Required styles to position the badge as an overlay on the avatar +.avatar-badge-container { + position: relative; + display: inline-flex; + + igx-badge { + position: absolute; + bottom: 0; + right: 0; + transform: translate(25%, 25%); + } +} +``` + Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS. Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`. From f1b0d60dd71fee544ad777aee874a55da289cef1 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 27 Apr 2026 13:50:37 +0300 Subject: [PATCH 3/7] Apply suggestion from @Copilot Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com> --- skills/igniteui-angular-components/references/data-display.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/skills/igniteui-angular-components/references/data-display.md b/skills/igniteui-angular-components/references/data-display.md index 275108f490c..8ab836a9b97 100644 --- a/skills/igniteui-angular-components/references/data-display.md +++ b/skills/igniteui-angular-components/references/data-display.md @@ -167,7 +167,7 @@ import { IgxBadgeComponent } from 'igniteui-angular/badge'; ``` Avatar shapes: `'circle'`, `'rounded'`, `'square'`. Sizes: `'small'`, `'medium'`, `'large'`, or custom CSS. -Badge types: `'default'`, `'info'`, `'success'`, `'warning'`, `'error'`. +Badge types: `'primary'`, `'info'`, `'success'`, `'warning'`, `'error'`. ## Icon From b71b2c2c2f2ec880d6e922bde6d00b1ad6bd7701 Mon Sep 17 00:00:00 2001 From: Konstantin Dinev Date: Mon, 27 Apr 2026 18:09:31 +0300 Subject: [PATCH 4/7] fix(skills): removing references to next from the CLI MCP setup (#17244) Co-authored-by: Copilot --- .../igniteui-angular-components/references/mcp-setup.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/skills/igniteui-angular-components/references/mcp-setup.md b/skills/igniteui-angular-components/references/mcp-setup.md index 8a18711807f..6d905bb876d 100644 --- a/skills/igniteui-angular-components/references/mcp-setup.md +++ b/skills/igniteui-angular-components/references/mcp-setup.md @@ -21,7 +21,7 @@ Create or edit `.vscode/mcp.json` in your project: "servers": { "igniteui-cli": { "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] + "args": ["-y", "igniteui-cli", "mcp"] } } } @@ -38,7 +38,7 @@ Create or edit `.cursor/mcp.json`: "mcpServers": { "igniteui-cli": { "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] + "args": ["-y", "igniteui-cli", "mcp"] } } } @@ -55,7 +55,7 @@ Edit the Claude Desktop config file: "mcpServers": { "igniteui-cli": { "command": "npx", - "args": ["-y", "igniteui-cli@next", "mcp"] + "args": ["-y", "igniteui-cli", "mcp"] } } } @@ -65,7 +65,7 @@ Edit the Claude Desktop config file: 1. Go to **Settings → Tools → AI Assistant → MCP Servers** 2. Click **+ Add MCP Server** -3. Set Command to `npx` and Arguments to `igniteui-cli@next mcp` +3. Set Command to `npx` and Arguments to `-y igniteui-cli mcp` 4. Click OK and restart the AI Assistant ## Verifying the Setup From 2b85445326ed30e503bcdca834d38cd2f3e7e1f8 Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Wed, 29 Apr 2026 14:54:12 +0300 Subject: [PATCH 5/7] docs(skills): Replace ng-deep with tokens in generate-from-image-design skill (#17247) --- .../SKILL.md | 2 +- .../references/gotchas.md | 19 ++----------------- 2 files changed, 3 insertions(+), 18 deletions(-) diff --git a/skills/igniteui-angular-generate-from-image-design/SKILL.md b/skills/igniteui-angular-generate-from-image-design/SKILL.md index 063386d6d25..a869db8a8f1 100644 --- a/skills/igniteui-angular-generate-from-image-design/SKILL.md +++ b/skills/igniteui-angular-generate-from-image-design/SKILL.md @@ -146,7 +146,7 @@ For **every** core Ignite UI component chosen in Steps 3-4, follow this MCP-firs - Resolve each value to a palette token or local semantic CSS variable - Call `create_component_theme("grid", ...)` with only `{ "header-background": "", "content-background": "", "row-hover-background": "" }` -Apply the generated theme blocks inside `::ng-deep` scoped to the component selector as shown in the `create_component_theme` output. +Apply the generated theme block using `@include tokens();` as returned by `create_component_theme`. Do not run `create_component_theme` for regions built with custom HTML/CSS only. diff --git a/skills/igniteui-angular-generate-from-image-design/references/gotchas.md b/skills/igniteui-angular-generate-from-image-design/references/gotchas.md index f81d3fdcadf..d7087737cbc 100644 --- a/skills/igniteui-angular-generate-from-image-design/references/gotchas.md +++ b/skills/igniteui-angular-generate-from-image-design/references/gotchas.md @@ -118,24 +118,9 @@ igx-nav-drawer { ``` ### Dark theme overrides for `IgxGridComponent` -Grid internals often need explicit dark-theme overrides. Use palette tokens or local semantic CSS variables that map to the design: +Grid internals often need explicit dark-theme overrides. Use `get_component_design_tokens("grid")` to discover available tokens, then call `create_component_theme` with the tokens that differ from the global theme. Apply the returned theme with the `tokens`: ```scss -:host ::ng-deep igx-grid { - .igx-grid__thead, - .igx-grid__tr { - background: ; - } - - .igx-grid__th, - .igx-grid__td { - color: ; - border-color: ; - } - - .igx-grid__tbody { - background: ; - } -} +@include tokens($custom-grid-theme); ``` ### Read luminance warnings from theme generation From 2e7ee65e9eeba64005e389d5c0c0d5a3e89aed0f Mon Sep 17 00:00:00 2001 From: Georgi Anastasov <48180072+georgianastasov@users.noreply.github.com> Date: Wed, 29 Apr 2026 14:54:40 +0300 Subject: [PATCH 6/7] docs(skills): add refs to the igniteui-angular-generate-from-image-design skill (#17248) Co-authored-by: Konstantin Dinev --- .github/AGENTS-README.md | 2 ++ .github/copilot-instructions.md | 1 + AGENTS.md | 3 ++- README.md | 1 + 4 files changed, 6 insertions(+), 1 deletion(-) diff --git a/.github/AGENTS-README.md b/.github/AGENTS-README.md index 853f03ba03a..f198b4269cd 100644 --- a/.github/AGENTS-README.md +++ b/.github/AGENTS-README.md @@ -408,6 +408,7 @@ The system also relies on repository-specific guidance and internal operational skills/igniteui-angular-components/SKILL.md skills/igniteui-angular-grids/SKILL.md skills/igniteui-angular-theming/SKILL.md +skills/igniteui-angular-generate-from-image-design/SKILL.md .github/skills/igniteui-angular-build/SKILL.md .github/skills/igniteui-angular-testing/SKILL.md .github/skills/igniteui-angular-linting/SKILL.md @@ -418,6 +419,7 @@ Repository-specific skills for implementation guidance: - `igniteui-angular-components` — shared guidance for general component patterns, structure, and repository conventions. - `igniteui-angular-grids` — shared guidance for grid architecture, patterns, and grid-specific implementation work. - `igniteui-angular-theming` — shared guidance for SCSS structure, theme wiring, and style-system conventions. +- `igniteui-angular-generate-from-image-design` — shared guidance for turning screenshots and mockups into Angular views with Ignite UI components and theming workflow. The internal operational skills are shared references for repository commands and validation flow: diff --git a/.github/copilot-instructions.md b/.github/copilot-instructions.md index 888cdd7a2a7..a25e361e849 100644 --- a/.github/copilot-instructions.md +++ b/.github/copilot-instructions.md @@ -121,6 +121,7 @@ Domain-specific skills for AI-assisted development are located in the [`skills/` - [`skills/igniteui-angular-components`](../skills/igniteui-angular-components/SKILL.md) — UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager) and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart) - [`skills/igniteui-angular-grids`](../skills/igniteui-angular-grids/SKILL.md) — Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) - [`skills/igniteui-angular-theming`](../skills/igniteui-angular-theming/SKILL.md) — Theming & Styling (includes MCP server setup) +- [`skills/igniteui-angular-generate-from-image-design`](../skills/igniteui-angular-generate-from-image-design/SKILL.md) — Generate Angular views from screenshots, mockups, and wireframes with Ignite UI components and theming guidance - [`.github/skills/igniteui-angular-build`](skills/igniteui-angular-build/SKILL.md) — Building the library (full build, `build:lib`, partial builds for styles, migrations, schematics, i18n, elements) - [`.github/skills/igniteui-angular-testing`](skills/igniteui-angular-testing/SKILL.md) — Testing (choosing the right test suite, grid vs non-grid, watch mode, schematics/styles/i18n tests) - [`.github/skills/igniteui-angular-linting`](skills/igniteui-angular-linting/SKILL.md) — Linting (ESLint + Stylelint, `lint:lib`, configuration files) diff --git a/AGENTS.md b/AGENTS.md index c99b6b497d8..7a00590f79f 100644 --- a/AGENTS.md +++ b/AGENTS.md @@ -39,7 +39,7 @@ projects/ igniteui-angular-i18n/ ← i18n package/resources igniteui-angular-performance/ ← performance-focused project scripts/ ← build, docs, packaging, and style scripts -skills/ ← AI skill guides for components, grids, and theming +skills/ ← AI skill guides for components, grids, theming, and image-to-app generation src/app/ ← demo application / ← existing demo/sample areas reused for user-visible changes CHANGELOG.md ← release notes @@ -118,6 +118,7 @@ Domain-specific knowledge for AI assistants: | Components | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | Working on non-grid UI components, charts | | Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Working on grid, tree-grid, hierarchical-grid, pivot-grid | | Theming | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Working on styles, themes, palettes | +| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Building Angular views from screenshots, mockups, or wireframes with Ignite UI components | | Build | [`.github/skills/igniteui-angular-build/SKILL.md`](.github/skills/igniteui-angular-build/SKILL.md) | Building the library, producing dist output, compiling migrations/schematics | | Testing | [`.github/skills/igniteui-angular-testing/SKILL.md`](.github/skills/igniteui-angular-testing/SKILL.md) | Running test suites, choosing the right Karma config | | Linting | [`.github/skills/igniteui-angular-linting/SKILL.md`](.github/skills/igniteui-angular-linting/SKILL.md) | Running ESLint and Stylelint, fixing lint errors | diff --git a/README.md b/README.md index dc4ce76dbe3..6adaeeaebf0 100644 --- a/README.md +++ b/README.md @@ -49,6 +49,7 @@ This repository ships with **Copilot Skills** — structured knowledge files tha | Components | [`skills/igniteui-angular-components/SKILL.md`](skills/igniteui-angular-components/SKILL.md) | UI Components (form controls, layout, data display, feedback/overlays, directives — Input Group, Combo, Select, Date/Time Pickers, Calendar, Tabs, Stepper, Accordion, List, Card, Dialog, Snackbar, Button, Ripple, Tooltip, Drag and Drop, Layout Manager, Dock Manager and Charts (Area Chart, Bar Chart, Column Chart, Stock/Financial Chart, Pie Chart)) | | Data Grids | [`skills/igniteui-angular-grids/SKILL.md`](skills/igniteui-angular-grids/SKILL.md) | Data Grids (grid type selection, column config, sorting, filtering, selection, editing, grouping, paging, remote data, state persistence, Tree Grid, Hierarchical Grid, Grid Lite, Pivot Grid) | | Theming & Styling | [`skills/igniteui-angular-theming/SKILL.md`](skills/igniteui-angular-theming/SKILL.md) | Theming & Styling (includes MCP server setup) | +| Generate From Image Design | [`skills/igniteui-angular-generate-from-image-design/SKILL.md`](skills/igniteui-angular-generate-from-image-design/SKILL.md) | Build Angular views from screenshots, mockups, and wireframes using Ignite UI components, theming MCP tools, and image-to-layout/component mapping guidance | #### How It Works From f054eb5af08754c8d94c93f88c2e66b69b1ccf6d Mon Sep 17 00:00:00 2001 From: Hristo Hristov Date: Thu, 30 Apr 2026 13:09:35 +0300 Subject: [PATCH 7/7] fix(pivot-grid): fix date format based on the localization --- .../grids/core/src/pivot-grid-dimensions.ts | 28 ++++++++++++++++++- .../grids/core/src/pivot-grid.interface.ts | 13 +++++++++ .../grids/pivot-grid/src/pivot-grid.spec.ts | 3 +- .../pivot-row-dimension-content.component.ts | 6 +++- 4 files changed, 47 insertions(+), 3 deletions(-) diff --git a/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts b/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts index 96efe72ff2a..70b50f6457b 100644 --- a/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts +++ b/projects/igniteui-angular/grids/core/src/pivot-grid-dimensions.ts @@ -139,7 +139,33 @@ export class IgxPivotDateDimension implements IPivotDimension { this.enabled = inBaseDimension.enabled; this.displayName = inBaseDimension.displayName || this.resourceStrings.igx_grid_pivot_date_dimension_total; - const baseDimension = options.fullDate ? inBaseDimension : null; + // When fullDate is enabled and the user has not provided a custom memberFunction, + // attach a locale-aware formatter so the leaf date values are displayed in + // short-date format instead of the raw data string. + // When the user provides their own memberFunction, the dimension is used as-is + // (spread-create is skipped) to avoid overriding the user's intended formatting. + let baseDimension: IPivotDimension = null; + if (options.fullDate) { + if (inBaseDimension.memberFunction) { + // User supplied a custom memberFunction — preserve it without adding a formatter. + baseDimension = inBaseDimension; + } else { + // No custom memberFunction: create a new dimension object with a locale-aware + // formatter that shows dates in short-date format. + baseDimension = { + ...inBaseDimension, + formatter: (value: any) => { + const dateValue = (value !== null && value !== undefined && value !== '') + ? getDateFormatter().createDateFromValue(value) + : null; + return dateValue + ? getDateFormatter().formatDateTime(dateValue, undefined, { dateStyle: 'short' }) + : value; + } + }; + } + } + const monthDimensionDef: IPivotDimension = { memberName: 'Months', memberFunction: (rec) => { diff --git a/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts b/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts index edbb95dc676..c57661c2321 100644 --- a/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts +++ b/projects/igniteui-angular/grids/core/src/pivot-grid.interface.ts @@ -140,6 +140,19 @@ export interface IPivotDimension { /** @hidden @internal */ autoWidth?: number; horizontalSummary? : boolean; + /** + * Optional function to format the display value of a dimension cell. + * Unlike `memberFunction`, this does not affect the data key used for grouping or sorting — + * it is applied only when rendering the dimension header text. + * When set, the return value of this function is shown instead of the raw dimension value. + * + * @example + * ```typescript + * // Display dates in a locale-aware short date format. + * { memberName: 'Date', enabled: true, formatter: (value) => new Date(value).toLocaleDateString() } + * ``` + */ + formatter?: (value: any) => string; } /* marshalByValue */ diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts index aa353b4ed15..11bf742a49a 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-grid.spec.ts @@ -1245,7 +1245,8 @@ describe('IgxPivotGrid #pivotGrid', () => { // check rows const rows = pivotGrid.rowList.toArray(); expect(rows.length).toBe(5); - const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', '12/08/2021']; + const formattedDate = Intl.DateTimeFormat(undefined, { dateStyle: 'short' }).format(new Date(2021, 11, 8)); + const expectedHeaders = ['All Periods', '2021', 'Q4', 'December', formattedDate]; const rowHeaders = fixture.debugElement.queryAll( By.directive(IgxPivotRowDimensionHeaderComponent)); const rowDimensionHeaders = rowHeaders.map(x => x.componentInstance.column.header); diff --git a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts index 5abfa05e44b..fa0874127d2 100644 --- a/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts +++ b/projects/igniteui-angular/grids/pivot-grid/src/pivot-row-dimension-content.component.ts @@ -183,7 +183,11 @@ export class IgxPivotRowDimensionContentComponent extends IgxGridHeaderRowCompon protected extractFromDimension(dim: IPivotDimension, rowData: IPivotGridGroupRecord) { const field = dim.memberName; - const header = rowData?.dimensionValues.get(field); + const rawHeader = rowData?.dimensionValues.get(field); + let header = rawHeader; + if (dim.formatter != null) { + header = dim.formatter(rawHeader) ?? rawHeader; + } const col = this._createColComponent(field, header, dim); return col; }