diff --git a/.github/PULL_REQUEST_TEMPLATE.md b/.github/PULL_REQUEST_TEMPLATE.md index 993f40d9268..0abea76f2db 100644 --- a/.github/PULL_REQUEST_TEMPLATE.md +++ b/.github/PULL_REQUEST_TEMPLATE.md @@ -6,6 +6,9 @@ Closes # - [ ] Documentation - [ ] Demos - [ ] CI/CD + - [ ] Tests + - [ ] Changelog + - [ ] Skills/Agents ### Checklist: - [ ] All relevant tags have been applied to this PR diff --git a/.github/agents/feature-orchestrator-agent.md b/.github/agents/feature-orchestrator-agent.md index f9f79e1b53e..4fd04e30459 100644 --- a/.github/agents/feature-orchestrator-agent.md +++ b/.github/agents/feature-orchestrator-agent.md @@ -131,7 +131,7 @@ projects/igniteui-angular/core/src/core/styles/ ← component SCSS themes 1. Read the feature request. 2. Search the repo to identify affected components, directives, services, and files. 3. If the feature touches theming or styles, read - `skills/igniteui-angular-theming/references/contributing.md` before planning the styling handoff. + `.github/themes-contributing.md` before planning the styling handoff. 4. Determine: - Which components are affected and where they live - Whether this replaces, renames, or deprecates any existing API diff --git a/.github/agents/theming-styles-agent.md b/.github/agents/theming-styles-agent.md index f11003633d0..6c3170e027b 100644 --- a/.github/agents/theming-styles-agent.md +++ b/.github/agents/theming-styles-agent.md @@ -23,7 +23,7 @@ Your job is to implement visual fixes and style features in the in-repo SCSS sou 1. Read the original request, bug report, or handoff summary. 2. Read the relevant SCSS, component markup, and any existing tests before editing. -3. Read `skills/igniteui-angular-theming/references/contributing.md` in full before modifying any `_*-theme.scss` or `_*-component.scss` file, wiring a component into the theme system, or changing style tests. +3. Read `.github/themes-contributing.md` in full before modifying any `_*-theme.scss` or `_*-component.scss` file, wiring a component into the theme system, or changing style tests. 4. Decide whether the change belongs in a component theme file, a structural component file, shared style infrastructure, or a minimal supporting markup hook. 5. Implement the required theming and style changes without expanding into unrelated production logic. 6. Run the relevant style validation before finishing. @@ -32,7 +32,7 @@ Your job is to implement visual fixes and style features in the in-repo SCSS sou ## Required Reference -Contributing to the in-repo SCSS source is covered in `skills/igniteui-angular-theming/references/contributing.md`. +Contributing to the in-repo SCSS source is covered in `.github/themes-contributing.md`. Read that file when: - modifying or creating `_*-theme.scss` files diff --git a/skills/igniteui-angular-theming/references/contributing.md b/.github/themes-contributing.md similarity index 100% rename from skills/igniteui-angular-theming/references/contributing.md rename to .github/themes-contributing.md diff --git a/skills/igniteui-angular-components/references/charts.md b/skills/igniteui-angular-components/references/charts.md index 31972523b58..6ca78aea8e2 100644 --- a/skills/igniteui-angular-components/references/charts.md +++ b/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 diff --git a/skills/igniteui-angular-grids/SKILL.md b/skills/igniteui-angular-grids/SKILL.md index b0c3d1f1f29..b8139d87a0a 100644 --- a/skills/igniteui-angular-grids/SKILL.md +++ b/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}` diff --git a/skills/igniteui-angular-grids/references/data-operations.md b/skills/igniteui-angular-grids/references/data-operations.md index feb17584871..7406e99bf22 100644 --- a/skills/igniteui-angular-grids/references/data-operations.md +++ b/skills/igniteui-angular-grids/references/data-operations.md @@ -111,7 +111,7 @@ export class CompanyGridComponent { + height="800px"> @@ -139,7 +139,8 @@ Enable sorting on individual columns and optionally bind the sorting state: + [sortingOptions]="{ mode: 'single' }" + height="500px"> diff --git a/skills/igniteui-angular-grids/references/sizing.md b/skills/igniteui-angular-grids/references/sizing.md new file mode 100644 index 00000000000..d7b99cb7639 --- /dev/null +++ b/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 + +``` + +- 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 + +``` + +- 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 + +``` + +- 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 + +``` + +- 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 + +``` + +- 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 +
+ +
+``` + +## 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 + + + +``` + +### Pixel Width + +```html + +``` + +- 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 + +``` + +- 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 + +``` + +- 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. diff --git a/skills/igniteui-angular-theming/SKILL.md b/skills/igniteui-angular-theming/SKILL.md index af1f6baf3ae..a48b39fe97f 100644 --- a/skills/igniteui-angular-theming/SKILL.md +++ b/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--)` 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.