diff --git a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md index 9b80141..14d4aaf 100644 --- a/skills/igniteui-react-components/reference/CHARTS-GRIDS.md +++ b/skills/igniteui-react-components/reference/CHARTS-GRIDS.md @@ -374,7 +374,7 @@ const currencyTemplate = (ctx: IgrCellContext) => ( ); const dateTemplate = (ctx: IgrCellContext) => ( - ${(ctx.value as Date).toLocaleDateString()} + {(ctx.value as Date).toLocaleDateString()} ); const statusTemplate = (ctx: IgrCellContext) => { diff --git a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md index 498e587..d3170f1 100644 --- a/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md +++ b/skills/igniteui-react-components/reference/COMPONENT-CATALOGUE.md @@ -57,7 +57,7 @@ Use the tables below to map a UI need to the right React component. All componen | UI Need | Component | Import | Docs | |---|---|---|---| | Full calendar view | `IgrCalendar` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/calendar) | -| Date picker (popup calendar) | `IgrDatepicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) | +| Date picker (popup calendar) | `IgrDatePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-picker) | | Date range selection | `IgrDateRangePicker` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/scheduling/date-range-picker) | ### Notifications & Feedback @@ -109,7 +109,7 @@ Use the tables below to map a UI need to the right React component. All componen | Simple scrollable list | `IgrList` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/list) | | Hierarchical / tree data | `IgrTree` | `igniteui-react` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree) | | Tabular data (MIT, lightweight) | `IgrGridLite` | `igniteui-react/grid-lite` (requires both `igniteui-react` and `igniteui-grid-lite` packages) | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grid-lite/overview) | -| Full-featured tabular data grid | `IgrDataGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) | +| Full-featured tabular data grid | `IgrGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/grid/overview) | | Nested / master-detail grid | `IgrHierarchicalGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/hierarchical-grid/overview) | | Parent-child relational tree grid | `IgrTreeGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/tree-grid/overview) | | Cross-tabulation / BI pivot table | `IgrPivotGrid` | `igniteui-react-grids` | [Docs](https://www.infragistics.com/products/ignite-ui-react/react/components/grids/pivot-grid/overview) | @@ -156,8 +156,8 @@ Use the **Component Catalogue** tables above to find matching components. When i | Simple static list | `IgrList` | Data Grid | | Basic dropdown | `IgrSelect` | `IgrCombo` | | Searchable or multi-select dropdown | `IgrCombo` | `IgrSelect` | -| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrDataGrid` (commercial) | -| Tabular data, advanced features needed | `IgrDataGrid` | `IgrGridLite` (grid-lite) | +| Tabular data with basic display | `IgrGridLite` (grid-lite) | `IgrGrid` (commercial) | +| Tabular data, advanced features needed | `IgrGrid` | `IgrGridLite` (grid-lite) | | Single dismissible message | `IgrToast` | `IgrSnackbar` | | Message requiring user action | `IgrSnackbar` | `IgrToast` | | Collapsible single section | `IgrExpansionPanel` | `IgrAccordion` | @@ -249,7 +249,7 @@ function Dashboard() { - `IgrInput` — search bar - `IgrCombo` — filter dropdowns -- `IgrGridLite` (grid-lite) or `IgrDataGrid` — tabular data +- `IgrGridLite` (grid-lite) or `IgrGrid` — tabular data - `IgrButton` / `IgrIconButton` — actions - `IgrDialog` — confirm delete modal - `IgrBadge` — status indicators @@ -269,7 +269,7 @@ function Dashboard() { - `IgrNavDrawer` — side navigation - `IgrCard` — KPI summary cards - `IgrTabs` or `IgrTileManager` — section layout -- `IgrDataGrid` or `IgrPivotGrid` — detailed data tables +- `IgrGrid` or `IgrPivotGrid` — detailed data tables - `IgrCategoryChart` — charts (from `igniteui-react-charts`) - `IgrLinearProgress` / `IgrCircularProgress` — loading indicators diff --git a/skills/igniteui-react-components/reference/EVENT-HANDLING.md b/skills/igniteui-react-components/reference/EVENT-HANDLING.md index 60d0e65..6729b6d 100644 --- a/skills/igniteui-react-components/reference/EVENT-HANDLING.md +++ b/skills/igniteui-react-components/reference/EVENT-HANDLING.md @@ -50,7 +50,7 @@ function MyForm() { | `IgrDialog` | `onClosed` | Dialog has closed | | `IgrTabs` | `onChange` | Active tab changes | | `IgrCalendar` | `onChange` | Selected date changes | -| `IgrDatepicker` | `onChange` | Selected date changes | +| `IgrDatePicker` | `onChange` | Selected date changes | ## TypeScript Event Types diff --git a/skills/igniteui-react-components/reference/JSX-PATTERNS.md b/skills/igniteui-react-components/reference/JSX-PATTERNS.md index 801632d..47acbbf 100644 --- a/skills/igniteui-react-components/reference/JSX-PATTERNS.md +++ b/skills/igniteui-react-components/reference/JSX-PATTERNS.md @@ -51,6 +51,7 @@ Ignite UI components use the web component **slot** mechanism under the hood. In Some components like the Data Grid support **render props** for custom cell rendering: ```tsx +import { IgrBadge } from 'igniteui-react'; import { IgrGrid, IgrColumn } from 'igniteui-react-grids'; function UserGrid({ users }: { users: User[] }) { @@ -152,10 +153,9 @@ function MainLayout() { const location = useLocation(); const handleTabChange = (e: CustomEvent) => { - const selectedIndex = (e.target as any).selectedIndex; - if (selectedIndex !== undefined && tabs[selectedIndex]) { - navigate(tabs[selectedIndex].path); - } + const selectedLabel = (e.detail as any).label as string; + const tab = tabs.find(t => t.label === selectedLabel); + if (tab) navigate(tab.path); }; return ( diff --git a/skills/igniteui-react-components/reference/REFS-FORMS.md b/skills/igniteui-react-components/reference/REFS-FORMS.md index 0d9b858..7d0825a 100644 --- a/skills/igniteui-react-components/reference/REFS-FORMS.md +++ b/skills/igniteui-react-components/reference/REFS-FORMS.md @@ -57,7 +57,7 @@ import { IgrInput, IgrSelect, IgrSelectItem, IgrButton } from 'igniteui-react'; function SimpleForm() { const handleSubmit = (e: React.SubmitEvent) => { // e.preventDefault(); // optionally prevent default submit for custom handling - const formData = new FormData(e.target); + const formData = new FormData(e.currentTarget); console.log(formData.get('name')); // input value console.log(formData.get('role')); // selected option value }; @@ -84,7 +84,7 @@ Wire up Ignite UI form components with React state for controlled behavior: ```tsx import { useState } from 'react'; -import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem } from 'igniteui-react'; +import { IgrInput, IgrCheckbox, IgrSelect, IgrSelectItem, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react'; function ProfileForm() { const [name, setName] = useState(''); @@ -101,7 +101,7 @@ function ProfileForm() { ) => + onChange={(e: CustomEvent) => setNewsletter(e.detail.checked) } > @@ -111,7 +111,7 @@ function ProfileForm() { ) => + onChange={(e: CustomEvent) => setRole(e.detail.value) } > @@ -130,7 +130,7 @@ Ignite UI components are form-associated web components. You can integrate them ```tsx import { useForm, Controller } from 'react-hook-form'; -import { IgrInput, IgrCheckbox, IgrButton } from 'igniteui-react'; +import { IgrInput, IgrCheckbox, IgrButton, IgrCheckboxChangeEventArgsDetail } from 'igniteui-react'; interface FormData { email: string; @@ -172,7 +172,7 @@ function SignUpForm() { render={({ field }) => ( ) => + onChange={(e: CustomEvent) => field.onChange(e.detail.checked) } > diff --git a/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md b/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md index ca97199..d769010 100644 --- a/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md +++ b/skills/igniteui-react-generate-from-image-design/reference/component-mapping.md @@ -39,10 +39,10 @@ Component decision matrix (by visual pattern, domain-neutral): | Content blocks / summary cards | `IgrCard` | Use when card chrome helps match the panel shape and structure. Use `IgrCardHeader`, `IgrCardContent`, and `IgrCardActions`, or plain `
` containers for flat or highly custom tiles | | Any text input field | `IgrInput` | Use when the input anatomy matches the screenshot, including search fields and inline editors. Apply CSS to match the screenshot's border/radius style | | Dropdown or select | `IgrSelect` | Use when the screenshot clearly shows select/dropdown behavior | -| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatepicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs | +| Form fields with labels and inputs | `IgrInput`, `IgrSelect`, `IgrCombo`, `IgrDatePicker`, `IgrDateTimeInput` | Cover text, select, combo, and date/time inputs | | Multi-step form / wizard | `IgrStepper` | Use when a sequence of steps is visually present | | Filter chips / tag inputs | `IgrChip` | Use when chip anatomy matches status badges, filter tags, or removable labels in the screenshot | -| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatepicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI | +| Calendar or date picker as a primary view element | `IgrCalendar`, `IgrDatePicker`, `IgrDateRangePicker` | Use when scheduling or date selection is the core UI | | Top icon/action bar | `IgrNavbar` with `IgrButton` / `IgrIconButton` | Use when a navbar structure matches the screenshot; use plain icon buttons or custom containers when that is a closer fit | ## Chart Components @@ -68,7 +68,7 @@ Decision rule: | UI Pattern | Ignite UI Component | Key Properties | |---|---|---| | Item list | `IgrList` | slot-based row content, selection, and dense list styling | -| User avatar | `IgrAvatar` | `initials`, `shape`, `size` | +| User avatar | `IgrAvatar` | `initials`, `shape`, `src` | | Status badge | `IgrBadge` | value/children plus token-based styling | | Icons | `IgrIcon` | icon name, collection, styling | | Progress bar | `IgrLinearProgress` | `value`, `max` | @@ -91,7 +91,7 @@ Decision rule: | Text input | `IgrInput` | `label`, `placeholder`, `type` | | Dropdown select | `IgrSelect` | option children, label, value | | Searchable multi-select | `IgrCombo` | `data`, `displayKey`, `valueKey` | -| Date picker | `IgrDatepicker` | value and label props | +| Date picker | `IgrDatePicker` | value and label props | | Date/time input | `IgrDateTimeInput` | value, format options | | Toggle switch | `IgrSwitch` | checked state, change events | | Checkbox | `IgrCheckbox` | checked state, `indeterminate` |