igniteui-angular 21.2.0-rc.0 → 21.2.0-rc.2

package/skills/igniteui-angular-components/references/charts.md

@@ -56,16 +56,16 @@ chartComponent.itemsSource = dataArray;
 ```
 
 ### Chart Type Selection
-- **Category Chart**: `chartType` property (Area, Bar, Column, Line, etc.)
+- **Category Chart**: `chartType` property (Auto, Area, Column, Line, Point, etc.)
 - **Financial Chart**: `chartType` property (Line, Candlestick, OHLC Bar)
-- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, etc.)
+- **Data Chart**: Configure explicit series (IgxAreaSeriesComponent, IgxBarSeriesComponent, IgxBarSeries, etc.)
 - **Pie Chart**: No chartType needed; inherent pie structure
 
 ### Required Properties
 
 **IgxCategoryChartComponent** (simplest API; auto-detects numeric & string columns):
 - `dataSource` — Data array (required)
-- `chartType` — Chart type (Area, Bar, Column, Line, etc.)
+- `chartType` — Chart type (Auto, Area, Column, Line, Point, etc.)
 - Component auto-detects: first string column → X-axis labels, numeric columns → Y-axis data
 
 **IgxDataChartComponent** (advanced; requires explicit configuration):
@@ -233,7 +233,7 @@ chartComponent.itemsSource = dataArray;
 ```typescript
 // Required
 dataSource: any[];           // Data array (auto-detects numeric fields)
-chartType: ChartType;        // Area, Bar, Column, Line, Waterfall, etc.
+chartType: CategoryChartType;        // Auto, Area, Column, Line, Point, etc.
 
 // Common optional inputs
 xAxisTitle: string;          // X-axis label

package/skills/igniteui-angular-grids/SKILL.md

@@ -38,6 +38,7 @@ Base your code and explanation exclusively on what you read in Step 3. If the re
 | Cell editing, row editing, batch editing, transactions, validation, summaries | [`references/editing.md`](./references/editing.md) |
 | Paging, remote data, server-side ops, noop strategies, virtual scroll, multi-grid coordination | [`references/paging-remote.md`](./references/paging-remote.md) |
 | State persistence, Tree Grid / Hierarchical Grid / Pivot Grid data operations | [`references/state.md`](./references/state.md) |
+| Grid sizing (width, height, column sizing, null/px/% modes, cell spacing CSS variables) | [`references/sizing.md`](./references/sizing.md) |
 
 > **When in doubt, read more rather than fewer reference files.** The cost of an unnecessary file read is negligible; the cost of hallucinated API usage is a broken application.
 
@@ -82,6 +83,7 @@ After choosing the grid type, **you must still complete Steps 2–4 from the man
 Replace `igniteui-angular` with `@infragistics/igniteui-angular` for the licensed package — entry-point paths are identical.
 
 > **AGENT INSTRUCTION — Documentation URL Pattern**: For grid-specific topics (sorting, filtering, editing, paging, etc.), docs URLs follow this naming pattern per grid type:
+> - Grid Lite: `.../components/grid-lite/{topic}`
 > - Flat Grid: `.../components/grid/{topic}`
 > - Tree Grid: `.../components/treegrid/{topic}`
 > - Hierarchical Grid: `.../components/hierarchicalgrid/{topic}`

package/skills/igniteui-angular-grids/references/data-operations.md

@@ -111,7 +111,7 @@ export class CompanyGridComponent {
 <igx-hierarchical-grid #hGrid
   [data]="companies()"
   primaryKey="id"
-  height="600px">
+  height="800px">
   <igx-column field="name" [sortable]="true"></igx-column>
   <igx-row-island key="orders" primaryKey="orderId">
     <igx-column field="orderId" [sortable]="true"></igx-column>
@@ -139,7 +139,8 @@ Enable sorting on individual columns and optionally bind the sorting state:
 <igx-grid #grid
   [data]="data()"
   [(sortingExpressions)]="sortExprs"
-  [sortingOptions]="{ mode: 'single' }">
+  [sortingOptions]="{ mode: 'single' }"
+  height="500px">
   <igx-column field="name" [sortable]="true"></igx-column>
   <igx-column field="date" dataType="date" [sortable]="true"></igx-column>
   <igx-column field="amount" dataType="number" [sortable]="true"></igx-column>

package/skills/igniteui-angular-grids/references/sizing.md

@@ -0,0 +1,204 @@
+# Grid Sizing — Width, Height, Column Sizing & Spacing
+
+> **Part of the [`igniteui-angular-grids`](../SKILL.md) skill hub.**
+> For grid setup, column config, sorting, filtering, selection — see [`structure.md`](./structure.md).
+> For virtualization and performance — see [`features.md`](./features.md).
+
+## Contents
+
+- [Overview](#overview)
+- [Grid Width](#grid-width)
+- [Grid Height](#grid-height)
+- [Column Sizing](#column-sizing)
+- [Grid Cell Spacing Control](#grid-cell-spacing-control)
+- [Key Rules](#key-rules)
+
+## Overview
+
+The grid uses **border-box sizing** — border and padding are included in the width/height calculations. Do **not** override `box-sizing` on the grid element; doing so will break size calculations.
+
+The grid supports both component inputs (`width`/`height`) and regular CSS/layout sizing from the host or wrapping container (including flex/grid layouts). Use the inputs when you need explicit fixed or percentage grid sizing.
+
+## Grid Width
+
+> **Docs:** [Grid Sizing — Width](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#width)
+
+**Default:** `100%` — the grid fills available width of the parent/window.
+
+### Pixel Width
+
+```html
+<igx-grid width="1200px" ...></igx-grid>
+```
+
+- Grid is fixed at the specified size and does not react to browser/DOM resizing.
+- A horizontal scrollbar appears inside the grid when the combined column widths exceed the grid `width`.
+- If a parent element is narrower than the grid and has `overflow: auto | scroll`, the parent scrolls — the grid itself remains at its specified width.
+
+### Percentage Width
+
+```html
+<igx-grid width="100%" ...></igx-grid>
+```
+
+- Grid sizes relative to its parent element (or the browser window if there is no parent with explicit width).
+- Resizes responsively when the browser or parent is resized.
+- Setting `width` above `100%` (e.g. `150%`) makes the grid wider than the parent; the parent renders a scrollbar only if it has `overflow: auto | scroll`.
+
+## Grid Height
+
+> **Docs:** [Grid Sizing — Height](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#height)
+
+**Default:** `100%` — see the Percentage Height section for how this behaves depending on the DOM structure.
+
+### `null` Height
+
+```html
+<igx-grid [height]="null" ...></igx-grid>
+```
+
+- All rows are rendered — **row virtualization is disabled**.
+- Grid height expands to show every row with no vertical scrollbar inside the grid.
+- If rows overflow the viewport, the browser renders a native scrollbar.
+- A parent element with `overflow: auto | scroll` will scroll while the grid itself remains unshrunk.
+- **Warning:** large data sets with `null` height can significantly impact browser performance due to no virtualization.
+
+### Pixel Height
+
+```html
+<igx-grid height="500px" ...></igx-grid>
+```
+
+- Grid is fixed at the specified height.
+- A vertical scrollbar appears when rows exceed the visible area.
+- If the grid is taller than a parent with `overflow: auto | scroll`, the parent scrolls.
+
+### Percentage Height
+
+```html
+<igx-grid height="100%" ...></igx-grid>
+```
+
+- Grid sizes relative to the **parent element's height**.
+- **Parent has explicit height** (px or %): grid sizes to that percentage of the parent's height.
+- **Parent has NO explicit height**: the browser cannot resolve a percentage, so the grid falls back to rendering a maximum of **10 rows** with a vertical scrollbar if there are more rows, or fits all rows if there are fewer.
+- To fill the entire browser window: set both `body` and the parent container `height: 100%`, then use `height="100%"` on the grid.
+
+```css
+/* Full-window grid */
+html, body, .grid-container {
+  height: 100%;
+}
+```
+
+```html
+<div class="grid-container">
+  <igx-grid height="100%" ...></igx-grid>
+</div>
+```
+
+## Column Sizing
+
+> **Docs:** [Grid Sizing — Column Sizing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#column-sizing)
+
+### Default (no `width` set — auto-sized)
+
+- Auto-sized columns share the available grid width equally.
+- Minimum column width is **`136px`**; if the equal share is less than `136px`, all auto-sized columns default to `136px` and the grid renders a horizontal scrollbar.
+- Feature columns (row selector checkbox, etc.) consume space that reduces what is available for auto-sized columns.
+
+```html
+<!-- No width on these columns — they auto-fill available space -->
+<igx-column field="name" header="Name"></igx-column>
+<igx-column field="email" header="Email"></igx-column>
+```
+
+### Pixel Width
+
+```html
+<igx-column field="name" width="200px"></igx-column>
+```
+
+- Column is fixed at the specified width regardless of grid size.
+- If the combined column widths are less than the grid width, empty space appears on the right — this is expected.
+- If the combined column widths exceed the grid width, a horizontal scrollbar is rendered.
+
+### `auto` Width
+
+```html
+<igx-column field="description" width="auto"></igx-column>
+```
+
+- Column sizes to fit the longest visible cell value.
+- May leave empty space if most values are short but one is very long.
+
+### Percentage Width
+
+```html
+<igx-column field="name" width="20%"></igx-column>
+```
+
+- Column width is calculated as a percentage of the grid width.
+- Responsive — resizes when the grid resizes.
+- Combined percentages less than `100%` leave an empty area; greater than `100%` triggers a horizontal scrollbar.
+
+## Grid Cell Spacing Control
+
+> **Docs:** [Grid Sizing — Cell Spacing](https://www.infragistics.com/products/ignite-ui-angular/angular/components/grid/sizing#grid-cell-spacing-control)
+
+The grid automatically adapts internal cell spacing based on the `size` (display density) setting. Fine-grained control is available through CSS custom properties.
+
+### Global Spacing (all grids in the app)
+
+```css
+igx-grid {
+    --ig-spacing: 0.8; /* multiplier — reduces all grid spacing by 20% */
+}
+```
+
+### Instance-Specific Spacing
+
+```css
+.my-compact-grid {
+    --ig-spacing: 0.6;
+}
+```
+
+### Directional Spacing (horizontal vs vertical independently)
+
+```css
+.my-grid {
+    --ig-spacing-inline: 0.5;  /* horizontal padding */
+    --ig-spacing-block: 1.0;   /* vertical padding */
+}
+```
+
+### Density-Level Spacing
+
+```css
+.my-grid {
+    --ig-spacing-small:  0.5;  /* compact density */
+    --ig-spacing-medium: 1.0;  /* medium density */
+    --ig-spacing-large:  1.3;  /* comfortable density */
+}
+```
+
+### Header vs Body Cell Spacing
+
+```css
+.my-grid igx-grid-header {
+    --ig-spacing: 0.7;
+}
+
+.my-grid igx-grid-cell {
+    --ig-spacing: 0.9;
+}
+```
+
+## Key Rules
+
+- Grid sizing can come from CSS/layout context (host/container sizing) or from `[width]`/`[height]` inputs.
+- **Never** override `box-sizing` on the grid — it uses border-box and relies on this.
+- Use `null` for height only when the data set is small; row virtualization is disabled and large data will hurt performance.
+- When using percentage height, the parent **must** have an explicit height for the percentage to resolve correctly. Without it, the grid falls back to 10 visible rows.
+- A mix of fixed-width and auto-sized columns is valid — auto-sized columns fill the remaining space after fixed-width columns are laid out.

package/skills/igniteui-angular-theming/SKILL.md

@@ -414,9 +414,6 @@ Raw hex values are acceptable **only** in these contexts:
 
 Everything else must use `var(--ig-<family>-<shade>)` tokens.
 
-## Contributing to Component Themes
-> **Contributing to the in-repo SCSS source (component theme files, structural SCSS, base functions, and the component registry) is covered in [`references/contributing.md`](./references/contributing.md).** Read that file when modifying or creating `_*-theme.scss` or `_*-component.scss` files, wiring a new component into the theme system, or writing style tests.
-
 ## Common Patterns
 
 > **Light/dark theme switching, scoped themes, and licensed package configuration are in [`references/common-patterns.md`](./references/common-patterns.md).** Read that file for ready-to-use Sass patterns.