From 526e5a90bbcafd9b7acd6db105de21abb10a05ae Mon Sep 17 00:00:00 2001 From: Valerie Gleason <5265744+hellovolcano@users.noreply.github.com> Date: Fri, 23 Jan 2026 12:59:29 -0600 Subject: [PATCH 1/9] breakpoint hld draft --- .../src/table-column/breakpoint/specs}/IxD.md | 0 .../breakpoint/specs/spec-images/States.png | Bin .../specs/table-column-breakpoint-hld.md | 159 ++++++++++++++++++ 3 files changed, 159 insertions(+) rename packages/{nimble-components/src/table-column/breakpoint => spright-components/src/table-column/breakpoint/specs}/IxD.md (100%) rename packages/{nimble-components => spright-components}/src/table-column/breakpoint/specs/spec-images/States.png (100%) create mode 100644 packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md diff --git a/packages/nimble-components/src/table-column/breakpoint/IxD.md b/packages/spright-components/src/table-column/breakpoint/specs/IxD.md similarity index 100% rename from packages/nimble-components/src/table-column/breakpoint/IxD.md rename to packages/spright-components/src/table-column/breakpoint/specs/IxD.md diff --git a/packages/nimble-components/src/table-column/breakpoint/specs/spec-images/States.png b/packages/spright-components/src/table-column/breakpoint/specs/spec-images/States.png similarity index 100% rename from packages/nimble-components/src/table-column/breakpoint/specs/spec-images/States.png rename to packages/spright-components/src/table-column/breakpoint/specs/spec-images/States.png diff --git a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md new file mode 100644 index 0000000000..5995136f1f --- /dev/null +++ b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md @@ -0,0 +1,159 @@ +# Table Column Breakpoint + +## Overview + +The breakpoint table column provides a visual indicator for debugging breakpoints in code-centric table displays. + +### Background + +[IxD](https://emerson-my.sharepoint.com/:w:/p/alice_darrow/EUyUN2MwIVZKnzUm0MNHSw0BFfTMtxGMTpEupWpMPbD-og?e=z8UyoJ) + +### Features + +- Visual breakpoint indicators with multiple states (Off, Enabled, Disabled, Hit) +- Click-to-toggle functionality for setting/removing breakpoints +- Callback mechanisms for client-implemented breakpoint operations (like row highlighting and context menu, as specified in IxD) +- Keyboard shortcuts for breakpoint management (Ctrl+B, F9) +- Tooltip display for breakpoint actions + +### Non-goals + +- Debugging functionality or integration with debugger engines +- Sorting or grouping capabilities +- Resizable column width +- Context menu for disabling or enabling breakpoints + +## Implementation / Design + +The breakpoint column will render a clickable indicator in each row that can cycle through different breakpoint states. + +Typical usage: + +```html + + + + + + +``` + +### API + +#### Column Element + +_Element Name_ + +- `spright-table-column-breakpoint` + +_Props/Attrs_ + +- `breakpoint-field-name`: string - The field name in the data record that contains the breakpoint state + +_Content_ + +- Typically empty + +_Events_ + +- `breakpoint-toggle`: Emitted when a breakpoint is toggled via click or keyboard interaction + ```ts + interface BreakpointToggleEventDetail { + recordId: string; + newState: BreakpointState; + oldState: BreakpointState; + } + ``` + +- `breakpoint-action`: Emitted for additional breakpoint actions (e.g., right-click, secondary interactions) + ```ts + interface BreakpointActionEventDetail { + recordId: string; + currentState: BreakpointState; + actionType: 'secondary-click'; + nativeEvent: Event; + } + ``` + +#### Cell View Element + +_Element Name_ + +- `spright-table-column-breakpoint-cell-view` + +_Rendering_ + +The cell view will render a breakpoint indicator based on the current state: +- **Off**: Empty circular outline (shown on hover) +- **Enabled**: Filled red circle +- **Disabled**: Outlined red circle with slash through it +- **Hit**: Filled red circle with highlight/border indicating active state within the indicator itself + +Each indicator will have a minimum 24x24 pixel hit target. + +#### Group Header View Element + +No new group header view element. + +### Sorting / Grouping + +The breakpoint column will not be sortable or groupable. + +### Sizing + +Column will be a fixed width of 32 pixels and will not be resizable. + +### Placeholder + +When the breakpoint state is `undefined` or `null`, the cell will render in the "Off" state (no visible indicator until hover). + +### Delegated Events + +The following events from the cell view will be delegated to the column: + +- `click` events from the breakpoint indicator will be delegated as `breakpoint-toggle` events +- `contextmenu` events will be delegated as `breakpoint-action` events with `actionType: 'secondary-click'` + +Both events will include the `recordId` to identify the row where the interaction occurred. + +### Interactions + +The breakpoint indicator will be marked as focusable via the cell view's `tabbableChildren`. The indicator element will properly forward the `tabIndex` value to ensure keyboard accessibility. + +Interactive elements: +- Breakpoint indicator button (focusable) + +### Test Cases + +- Verify breakpoint state transitions (Off ↔ Enabled ↔ Disabled ↔ Hit) +- Test click-to-toggle functionality +- Verify keyboard shortcuts (Ctrl+B, F9) work when row/cell is focused +- Test right-click event delegation for client callback implementation +- Verify tooltip display on hover/focus +- Test accessibility with screen readers +- Verify proper event delegation with correct recordId values +- Test that column appears leftmost in table layout +- Verify non-resizable behavior +- Test with various data states (undefined, null, invalid values) +- Verify callback events provide proper context for client implementations + +### Internationalization + +Tooltips will use the standard HTML `title` attribute, with built-in default text ("Add breakpoint" / "Remove breakpoint"). If applications need custom tooltip text, they can override the `title` attribute on the column element. This follows the same pattern as other nimble components. + +### Accessibility + +- Breakpoint indicators will have proper ARIA labels describing current state +- Keyboard navigation support with Tab/Shift+Tab +- Space/Enter key activation for toggling breakpoints +- Tooltips will be announced by screen readers +- High contrast support for different breakpoint states +- Minimum 24x24 pixel hit targets for web accessibility + +### Angular Integration + +- Add new table column and events to Angular and Blazor wrappers. + +## Open Issues + +None \ No newline at end of file From 155bd9ef62c28bffa56101bdeb7bedad96b607e2 Mon Sep 17 00:00:00 2001 From: Valerie Gleason <5265744+hellovolcano@users.noreply.github.com> Date: Fri, 23 Jan 2026 13:23:09 -0600 Subject: [PATCH 2/9] fixing IxD link --- .../breakpoint/specs/table-column-breakpoint-hld.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md index 5995136f1f..7e200b3930 100644 --- a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md +++ b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md @@ -6,7 +6,7 @@ The breakpoint table column provides a visual indicator for debugging breakpoint ### Background -[IxD](https://emerson-my.sharepoint.com/:w:/p/alice_darrow/EUyUN2MwIVZKnzUm0MNHSw0BFfTMtxGMTpEupWpMPbD-og?e=z8UyoJ) +[IxD](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/table-column/breakpoint/IxD.md) ### Features From a33e66f13db6c32635d2f4ee3ced2b419de4237f Mon Sep 17 00:00:00 2001 From: Valerie Gleason <5265744+hellovolcano@users.noreply.github.com> Date: Fri, 23 Jan 2026 15:10:22 -0600 Subject: [PATCH 3/9] fixing broken image link from move --- .../spright-components/src/table-column/breakpoint/specs/IxD.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/spright-components/src/table-column/breakpoint/specs/IxD.md b/packages/spright-components/src/table-column/breakpoint/specs/IxD.md index 4766b1202b..100462202c 100644 --- a/packages/spright-components/src/table-column/breakpoint/specs/IxD.md +++ b/packages/spright-components/src/table-column/breakpoint/specs/IxD.md @@ -22,7 +22,7 @@ Use with the Nimble Table when displaying code, especially in environments where ### Anatomy **Breakpoint states** -![Breakpoint States](./specs/spec-images/States.png) +![Breakpoint States](./spec-images/States.png) > Note, not yet approved by visual design: Breakpoints should appear to the left of checkboxes for multiselect From ce88f36f31e7997e600cef521bacfe7ddd07d663 Mon Sep 17 00:00:00 2001 From: Valerie Gleason <5265744+hellovolcano@users.noreply.github.com> Date: Thu, 29 Jan 2026 17:07:57 -0600 Subject: [PATCH 4/9] HLD changes --- .../specs/table-column-breakpoint-hld.md | 28 ++++++++++--------- 1 file changed, 15 insertions(+), 13 deletions(-) diff --git a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md index 7e200b3930..1c854a5843 100644 --- a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md +++ b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md @@ -22,6 +22,7 @@ The breakpoint table column provides a visual indicator for debugging breakpoint - Sorting or grouping capabilities - Resizable column width - Context menu for disabling or enabling breakpoints +- Updates to the nimble table to modify column ordering or pin columns ## Implementation / Design @@ -52,7 +53,7 @@ _Props/Attrs_ _Content_ -- Typically empty +- Column label (icon and/or text), typically empty _Events_ @@ -65,16 +66,6 @@ _Events_ } ``` -- `breakpoint-action`: Emitted for additional breakpoint actions (e.g., right-click, secondary interactions) - ```ts - interface BreakpointActionEventDetail { - recordId: string; - currentState: BreakpointState; - actionType: 'secondary-click'; - nativeEvent: Event; - } - ``` - #### Cell View Element _Element Name_ @@ -91,6 +82,19 @@ The cell view will render a breakpoint indicator based on the current state: Each indicator will have a minimum 24x24 pixel hit target. +#### Breakpoint States + +The breakpoint state is represented as an enum with the following values: + +```ts +enum BreakpointState { + Off = 'off', + Enabled = 'enabled', + Disabled = 'disabled', + Hit = 'hit' +} +``` + #### Group Header View Element No new group header view element. @@ -112,7 +116,6 @@ When the breakpoint state is `undefined` or `null`, the cell will render in the The following events from the cell view will be delegated to the column: - `click` events from the breakpoint indicator will be delegated as `breakpoint-toggle` events -- `contextmenu` events will be delegated as `breakpoint-action` events with `actionType: 'secondary-click'` Both events will include the `recordId` to identify the row where the interaction occurred. @@ -130,7 +133,6 @@ Interactive elements: - Verify keyboard shortcuts (Ctrl+B, F9) work when row/cell is focused - Test right-click event delegation for client callback implementation - Verify tooltip display on hover/focus -- Test accessibility with screen readers - Verify proper event delegation with correct recordId values - Test that column appears leftmost in table layout - Verify non-resizable behavior From 35af3aa8367a080316c52790e853f4905b38a777 Mon Sep 17 00:00:00 2001 From: Valerie Gleason <5265744+hellovolcano@users.noreply.github.com> Date: Wed, 11 Feb 2026 15:35:44 -0600 Subject: [PATCH 5/9] HLD feedback --- .../specs/table-column-breakpoint-hld.md | 32 +++++++++---------- 1 file changed, 16 insertions(+), 16 deletions(-) diff --git a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md index 1c854a5843..d5d85bc0cc 100644 --- a/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md +++ b/packages/spright-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md @@ -23,6 +23,7 @@ The breakpoint table column provides a visual indicator for debugging breakpoint - Resizable column width - Context menu for disabling or enabling breakpoints - Updates to the nimble table to modify column ordering or pin columns +- Implementing keyboard shortcuts ## Implementation / Design @@ -32,9 +33,9 @@ Typical usage: ```html - + - + ``` @@ -45,11 +46,11 @@ Typical usage: _Element Name_ -- `spright-table-column-breakpoint` +- `ok-table-column-breakpoint` _Props/Attrs_ -- `breakpoint-field-name`: string - The field name in the data record that contains the breakpoint state +- `field-name`: string - The field name in the data record that contains the breakpoint state _Content_ @@ -57,7 +58,7 @@ _Content_ _Events_ -- `breakpoint-toggle`: Emitted when a breakpoint is toggled via click or keyboard interaction +- `breakpoint-column-toggle`: Emitted when a breakpoint is toggled via click or keyboard interaction ```ts interface BreakpointToggleEventDetail { recordId: string; @@ -70,7 +71,7 @@ _Events_ _Element Name_ -- `spright-table-column-breakpoint-cell-view` +- `ok-table-column-breakpoint-cell-view` _Rendering_ @@ -82,6 +83,10 @@ The cell view will render a breakpoint indicator based on the current state: Each indicator will have a minimum 24x24 pixel hit target. +_DOM / Hit Target_ + +The indicator will be implemented as a native `