diff --git a/packages/nimble-components/src/table-column/breakpoint/IxD.md b/packages/ok-components/src/table-column/breakpoint/specs/IxD.md similarity index 99% rename from packages/nimble-components/src/table-column/breakpoint/IxD.md rename to packages/ok-components/src/table-column/breakpoint/specs/IxD.md index 4766b1202b..100462202c 100644 --- a/packages/nimble-components/src/table-column/breakpoint/IxD.md +++ b/packages/ok-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 diff --git a/packages/nimble-components/src/table-column/breakpoint/specs/spec-images/States.png b/packages/ok-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/ok-components/src/table-column/breakpoint/specs/spec-images/States.png diff --git a/packages/ok-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md b/packages/ok-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md new file mode 100644 index 0000000000..cf739c5cd6 --- /dev/null +++ b/packages/ok-components/src/table-column/breakpoint/specs/table-column-breakpoint-hld.md @@ -0,0 +1,164 @@ +# Table Column Breakpoint + +## Overview + +The breakpoint table column provides a visual indicator for debugging breakpoints in code-centric table displays. + +### Background + +[IxD](https://github.com/ni/nimble/blob/main/packages/nimble-components/src/table-column/breakpoint/IxD.md) + +### 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 +- Updates to the nimble table to modify column ordering or pin columns +- Implementing keyboard shortcuts + +## 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_ + +- `ok-table-column-breakpoint` + +_Props/Attrs_ + +- `field-name`: string - The field name in the data record that contains the breakpoint state + +_Content_ + +- Column label (icon and/or text), typically empty + +_Events_ + +- `breakpoint-column-toggle`: Emitted when a breakpoint is toggled via click or keyboard interaction + ```ts + interface BreakpointToggleEventDetail { + recordId: string; + newState: BreakpointState; + oldState: BreakpointState; + } + ``` + +#### Cell View Element + +_Element Name_ + +- `ok-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. + +_DOM / Hit Target_ + +The indicator will be implemented as a native `