fluentui-design 0.1.1 → 0.2.0

package/CHANGELOG.md

@@ -8,6 +8,43 @@ Each release records three things: the skill version, the baseline
 `@fluentui/react-components` package version, and the pinned `fluentui-mcp` facts commit. See
 [MAINTENANCE.md](MAINTENANCE.md) for the re-pin procedure.
 
+## [0.2.0] - 2026-09-21
+
+### Baseline
+
+| Item | Value |
+| --- | --- |
+| `@fluentui/react-components` | 9.74.7 |
+| `fluentui-mcp` facts commit | d595d79 |
+
+### Fixes
+
+- datagrid: correct the finding kinds and rule provenance
+
+### Documentation
+
+- plan: correct the datagrid coverage progress count
+- plan: add the datagrid coverage requirements and plan
+
+### Features
+
+- datagrid: enrich the list pattern and regenerate the skill
+- datagrid: add API-grounded grid rules and refresh coverage
+- datagrid: add the DataGrid evidence source and findings
+
+## [0.1.2] - 2026-09-21
+
+### Baseline
+
+| Item | Value |
+| --- | --- |
+| `@fluentui/react-components` | 9.74.7 |
+| `fluentui-mcp` facts commit | d595d79 |
+
+### Documentation
+
+- plan: record the validated automated release
+
 ## [0.1.1] - 2026-09-21
 
 ### Baseline

package/README.md

@@ -115,8 +115,6 @@ re-verify the rules it uses.
   (`SRC-045`) are recorded as a discovered expansion target; `SRC-002` covers only the public
   getting-started page. Rules therefore lean on published guidance and the component library, not on
   Figma files.
-- **The dedicated v9 DataGrid usage page was not analyzed.** Grid rules lean on the accessibility
-  practices guide (APG) and the pinned package source (`SRC-027`).
 - **Automated accessibility output is findings, not conformance.** The fixture is scanned with axe
   and the results are reported as defects that were fixed; the project makes no WCAG conformance
   claim.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluentui-design",
-  "version": "0.1.1",
+  "version": "0.2.0",
   "type": "module",
   "description": "Evidence-backed Agent Skill for composing web applications with Fluent UI React v9",
   "license": "MIT",

package/skills/fluentui-design/references/index.md

@@ -11,9 +11,9 @@ For exact component props and imports, use the sibling `fluentui` skill
 | Decision | Patterns | Rules |
 | --- | --- | --- |
 | `command-scope` | PAT-001 | RULE-001, RULE-002, RULE-003 |
-| `data-processing-location` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
-| `data-resilience` | PAT-002, PAT-008 | RULE-003, RULE-010, RULE-011, RULE-012, RULE-015, RULE-016 |
-| `data-surface` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `data-processing-location` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
+| `data-resilience` | PAT-002, PAT-008 | RULE-003, RULE-010, RULE-011, RULE-012, RULE-015, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
+| `data-surface` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 | `edit-surface` | PAT-005 | RULE-008, RULE-009, RULE-029 |
 | `feedback-channel` | PAT-008 | RULE-003, RULE-015, RULE-016 |
 | `field-annotation` | PAT-004 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
@@ -22,11 +22,11 @@ For exact component props and imports, use the sibling `fluentui` skill
 | `navigation-model` | PAT-001, PAT-006 | RULE-001, RULE-002, RULE-003, RULE-013, RULE-014 |
 | `permission-state` | PAT-003, PAT-008 | RULE-003, RULE-015, RULE-016, RULE-029 |
 | `progressive-disclosure` | PAT-006 | RULE-013, RULE-014 |
-| `row-activation` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `row-activation` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 | `save-model` | PAT-007 | RULE-029, RULE-030 |
-| `selection-scope` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `selection-scope` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 | `submit-feedback` | PAT-004, PAT-007 | RULE-005, RULE-006, RULE-007, RULE-029, RULE-030 |
-| `virtualization` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016 |
+| `virtualization` | PAT-002 | RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036 |
 
 ## Application patterns
 

package/skills/fluentui-design/references/patterns/PAT-002-list-page.md

@@ -2,8 +2,8 @@
 id: PAT-002
 title: Searchable and filterable list page
 decisions: [data-surface, data-processing-location, selection-scope, row-activation, data-resilience, virtualization]
-rules: [RULE-010, RULE-011, RULE-012, RULE-016]
-components: [DataGrid, DataGridBody, DataGridRow, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell, createTableColumn, Table, TableHeader, TableRow, TableCell, TableBody, TableCellLayout, Input, Button, MenuButton, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Spinner, Skeleton, SkeletonItem, MessageBar, MessageBarBody, Checkbox, Field]
+rules: [RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036]
+components: [DataGrid, DataGridBody, DataGridRow, DataGridCell, DataGridHeader, DataGridHeaderCell, DataGridSelectionCell, createTableColumn, TableResizeHandle, Table, TableHeader, TableRow, TableCell, TableBody, TableCellLayout, Input, Button, MenuButton, Menu, MenuTrigger, MenuPopover, MenuList, MenuItem, Spinner, Skeleton, SkeletonItem, MessageBar, MessageBarBody, Checkbox, Field]
 derived: [application-owned FilterBar composition, application-owned query and pagination state]
 ---
 
@@ -51,27 +51,38 @@ or on the server is explicit in application state, not inferred by the grid.
 
 Below the project's narrow breakpoint, low-priority columns are hidden behind a detail view and
 filters collapse into a single control that opens a panel. The grid keeps vertical scrolling; it
-never requires two-dimensional scrolling to read a value. Virtualize the grid only after measuring a
-performance need, because virtualization keeps only the visible rows in the DOM and can break
-in-page search and predictable focus movement.
+never requires two-dimensional scrolling to read a value. When columns can be resized, keep the grid
+inside a region that scrolls horizontally so resizing never pushes the page itself into horizontal
+scrolling, and prefer hiding low-priority columns over relying on resize at narrow widths.
+Virtualize the grid only after measuring a performance need, because virtualization keeps only the
+visible rows in the DOM and can break in-page search and predictable focus movement; when it is
+used, keep the row renderer stable and the row key constant so the rendered window does not churn.
 
 ## Accessibility
 
-The grid uses one tab stop with arrow-key navigation inside it. Sort state is announced, selection
-changes are announced, and an async result update is announced through a polite status region. The
-select-all control states whether it selects the current page or all matching results.
+The grid uses one tab stop with arrow-key navigation inside it. A cell that contains controls
+declares its own focus mode: `group` when it holds several focusable elements so Enter enters the
+cell and Escape returns to it, and `none` when it holds exactly one so that control is reached
+directly. A sortable header cell stays a single sort button and must not contain nested focusable
+controls. Sort state, selection changes, and async result updates are announced through a polite
+status region, and every selection control carries an accessible name: the header control states
+its selection scope and each row control names the row. The select-all control states whether it
+selects the current page or all matching results.
 
 ## Edge cases
 
 Loading shows Skeletons in the grid region. No data, no search matches, and a failed load each show a
-distinct message; the failed state offers a retry action. A server-paged sort re-queries instead of
-sorting only the loaded page. A selection that spans pages keeps its ids when the page changes. When
-virtualization is enabled, keep a stable row key, expose the row's position and total count to
-assistive technology, and ensure focus is not lost when the visible window moves.
+distinct message; the failed state offers a retry action. A column with no `compare` function stays
+unsortable even when sorting is enabled, so a header that looks sortable can silently do nothing.
+Because the library does not reliably announce a sort change, add a polite status message when the
+result order changes. A server-paged sort re-queries instead of sorting only the loaded page. A
+selection that spans pages keeps its ids when the page changes. When virtualization is enabled, keep
+a stable row key, expose the row's position and total count to assistive technology, and ensure
+focus is not lost when the visible window moves.
 
 ## Rules applied
 
-RULE-010, RULE-011, RULE-012, RULE-016
+RULE-010, RULE-011, RULE-012, RULE-016, RULE-031, RULE-032, RULE-033, RULE-034, RULE-035, RULE-036
 
 ## Derived decisions
 

package/skills/fluentui-design/references/rules/index.md

@@ -50,6 +50,12 @@ when it applies, and where its evidence comes from. Full provenance lives in
 | RULE-010 | should | Use DataGrid when the layout must be controlled by column definitions and keyboard grid behavior is required, and use Table when a native table structure is the goal. |
 | RULE-011 | should | Decide explicitly whether each collection operation runs on loaded rows or on the server, and pass the resulting state into the grid so the component does not imply a data source it does not have. |
 | RULE-012 | must | Make the selection scope explicit to the user, and when a bulk action can apply to all matching results rather than only the loaded page, offer that choice deliberately. |
+| RULE-031 | must | Provide a compare function in every column definition whose header is meant to sort; a column without compare stays unsortable even when the grid enables sorting. |
+| RULE-032 | must | Set focusMode group on a cell with several focusable elements so Enter enters the cell and Escape returns to it, and set focusMode none on a cell with exactly one focusable element so that control receives focus directly. |
+| RULE-033 | must | Keep a sortable header cell free of nested focusable controls; move header actions into a context menu or into the body cells instead. |
+| RULE-034 | should | Use resizableColumns only inside a container that allows horizontal overflow, provide the column sizing options, and keep keyboard resizing available; do not let resizing push the page into two-dimensional scrolling. |
+| RULE-035 | must | Keep the row render function stable with useCallback and a stable row key before enabling virtualization. |
+| RULE-036 | must | Provide an aria-label through the selection cell for both the header select-all control and each row control, naming the action and, for the header, the selection scope. |
 
 ## overlays