From c86bb9b9b5427eddefa383bad80b9b3d37890c08 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 11:04:51 -0500 Subject: [PATCH 01/13] first pass --- .../table-column-menu-button.md | 148 ++++++++++++++++++ 1 file changed, 148 insertions(+) create mode 100644 packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md new file mode 100644 index 0000000000..5feadf26ae --- /dev/null +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -0,0 +1,148 @@ +# Menu Button Table Column HLD + +## Overview + +In some tables, the user needs to make a selection associated with a given data field and record. For example, in a table of software packages, the user needs to select a version for each software packages. The selection and options can vary between records. + +### Background + +[GitHub issue: Research and spec for select-like input table column (#1872)](https://github.com/ni/nimble/issues/1872) + +### Features + +- Add `nimble-menu-button` to a cell where the text on the menu button is populated from the table row's record +- Allow a client application to specify custom menu items for each button instance + +### Non-goals + +- Support icons in the menu button +- Support icon-only menu buttons +- Allow configuration of the menu button's `appearance` or `appearance-variant` +- Automatically updating the row's record when an item in the menu is activated + +## Implementation / Design + +The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. + +### API + +#### Column Component + +_Component Name_ + +- `nimble-table-column-menu-button` + +_Props/Attrs_ + +- `field-name`: string - The name of the field in a record that contains the string that will be displayed in the menu button. +- `menu-slot`: string - The name of the slot within the `nimble-table` instance where the menu associated with the column's menu button will be provided +- `fractional-width`: number (defaults to 1) +- `min-pixel-width`: number (defaults to minimum supported by table) + +_Content_ + +- column title (icon and/or text) +- 1 or more `nimble-mapping-icon`, `nimble-mapping-spinner`, `nimble-mapping-text`, or `nimble-mapping-empty` elements + +#### Cell View Component + +_Component Name_ + +- `nimble-table-column-menu-button-cell-view` + +_Rendering_ + +If the record value associated with the specified `field-name` is a string, the cell will render a menu button containing the record value text. If the record value associated with the specified `field-name` is not a string, the cell will render nothing. + +Specifically, the menu button will have the following behaviors/styles: + +- Always use `ghost` appearance mode +- Always have `nimble-icon-arrow-expander-down` slotted in the `end` slot +- Grow to fill the width of the cell +- Left-align the text (with padding) in the button. By default, button text is centered, but custom styling will be written to handle this case so that the text within each button is aligned for a given column. +- Ellipsize text in the button if it doesn't fit in the button. + +#### Group Header View Component + +The column will specify the existing `tableColumnTextGroupHeaderViewTag` as the `groupHeaderViewTag`. + +### Sorting & Grouping + +The column will be sorted and grouped based on the text that is provided for display in the button. + +### Placeholder + +The column cell will not have a placeholder. If an empty, `undefined`, or `null` value is provided for the record, an empty cell will be rendered. Group rows will display `tableGroupRowPlaceholderNoValueLabel` when the value is `undefined` or `null` and `tableGroupRowPlaceholderEmptyLabel` when the value is an empty string. + +### Delegated Events + +The cell will delegate the `beforetoggle` and `toggle` events from the menu button. This will allow a client application to listen for the delegated event and update the menu items in the slotted menu as appropriate before the menu opens. + +### Focus Recycling + +Because the menu button in the cell can have focus, we must override `focusedRecycleCallback()` in our cell view and have it call `blur()` on the button. If we don't, the focus can pass to other cells as you scroll. + +### Sizing + +The column will support fractional width sizing along with a minimum pixel width. + +### Interactions + +When the menu button is focused, it will have the same keyboard interactions as the `nimble-menu-button` outside of a table. Interacting with the menu button, whether via keyboard or mouse, will not modify the selection in the table. + +### Accessibility + +- If the text of the button does not fit fully in the button, it will be ellipsized and the button's `title` will be set to the full text. + +### Angular integration + +An Angular wrapper will be created for the component. There is no special considerations for Angular. + +### Blazor integration + +A Blazor wrapper will be created for the component. There is no special considerations needed for Blazor. + +### API Updates to Existing Table Components + +API changes need to be made to multiple parts of the table's existing parts to facilitate slotting a menu through the table and into a specific cell view. + +These changes include changes to the following: + +- `ColumnInternalsOptions` - The `ColumnInternalsOptions` interface will include an optional string array named `slotNames`, which allows a column to specify the names of any slots that need to be forwarded into a cell. +- `ColumnInternals` - As with the `ColumnInternalsOptions`, the `ColumnInternals` class will have a `slotNames` array that specifies the names of any slots that need to be forwarded into a cell. The value will be readonly and will be populated by the `ColumnInternalsOptions` `slotNames` property. It will default to an empty array if a value is not provided in `ColumnInternalsOptions`. +- Base `cell-view` template - The `createCellViewTemplate` function exported from the base `cell-view` template will be updated to `repeat` over all slot names specified in the column's `slotNames` array and create a `slot` for each. The `name` of each slot will be the value in the `slotNames` array concatenated to the column's unique ID (i.e. `column.columnInternals.uniqueId + column.columnInternals.slotNames[i]`). The `slot` attribute will be set to the value in the `slotNames` array. +- Add events to pass slot information between cell views, rows, and the table. Specifically, this will look like: + - `cell-view-slots-requested` event + - Fired by cell view instances if they want to request that the column's slots to be placed within that cell. For example, the menu button column's cell view will fire this event when the cell's `menu-button` fires a `beforetoggle` event with the `newState` as `true`. + - Handled by table rows. When handling this event, a table row will fire the `row-slots-requested` event to request the table to slot the necessary elements within the row. + - Event details: + ```ts + interface CellViewSlotRequestedEventDetail { + slots: { slot: string, name: string }[]; + } + ``` + - `row-slots-requested` event + - Fired by table rows to request that column's slots to be placed within that row. This event is fired in response to the row recieving a `cell-view-slots-requested` event fired by one of its cell views. + - Handled by table. When handling this event, the table will update its template to move the appropriate slots into the correct table row. + - Event details: + ```ts + interface RowSlotRequestedEventDetail { + columnInternalId: string; + rowId: string; + slots: { slot: string, name: string }[]; + } + ``` + +## Alternative Implementations / Designs + +_Alternative #1_ + +Rather than creating a menu button column, we could create a select column. However this has a number of different challenges steming from the fact that the `nimble-select` has a different slotting model than the `nimble-menu-button`. As a result, it would be very difficult have an API that allows providing unique options for each record without a significant redesign of the select. + +## Open Issues + +- In the Software Table, how should the currently installed version be represented? Currently it is italicized in both the menu and menu-button, but this is probably not the solution we want in the nimble table column. +- In the Software Table, the full software version is displayed as the title of the menu button and menu items. Where should that information go? +- There is no visual design spec for this feature yet. Therefore there are a few open visual design questions, including the following: + - If we only support one appearance for the menu-button, is `ghost` the appropriate one to support? + - Is there any concern that the button text will not align with the column header because of the padding between the edge of the button and the text within the button? From 2dfe111381bd565a090bc3ed9352a243e2de1b21 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 11:05:34 -0500 Subject: [PATCH 02/13] Change files --- ...le-components-df0276a7-20b8-4667-b0c9-6351f207d6a1.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 change/@ni-nimble-components-df0276a7-20b8-4667-b0c9-6351f207d6a1.json diff --git a/change/@ni-nimble-components-df0276a7-20b8-4667-b0c9-6351f207d6a1.json b/change/@ni-nimble-components-df0276a7-20b8-4667-b0c9-6351f207d6a1.json new file mode 100644 index 0000000000..691d60f0d1 --- /dev/null +++ b/change/@ni-nimble-components-df0276a7-20b8-4667-b0c9-6351f207d6a1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Create HLD for menu-button table column", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "none" +} From b4f1490d7544c315cd3810feb445054ec57c7e6c Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 12:15:15 -0500 Subject: [PATCH 03/13] updates --- .../table-column-menu-button.md | 52 +++++++++---------- 1 file changed, 26 insertions(+), 26 deletions(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 5feadf26ae..3bb72b2057 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -2,7 +2,7 @@ ## Overview -In some tables, the user needs to make a selection associated with a given data field and record. For example, in a table of software packages, the user needs to select a version for each software packages. The selection and options can vary between records. +In some tables, the user needs to make a selection associated with cell in the table. For example, in a table of software packages where there is a column for the software version to install, the user needs to select a version for each software package. The selection and options can vary between records. ### Background @@ -11,18 +11,17 @@ In some tables, the user needs to make a selection associated with a given data ### Features - Add `nimble-menu-button` to a cell where the text on the menu button is populated from the table row's record -- Allow a client application to specify custom menu items for each button instance +- Allow a client application to specify custom menu items for each menu button instance ### Non-goals -- Support icons in the menu button -- Support icon-only menu buttons +- Support client-specified icons in the menu button, including icon-only menu buttons - Allow configuration of the menu button's `appearance` or `appearance-variant` - Automatically updating the row's record when an item in the menu is activated ## Implementation / Design -The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. +The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. A client will configure a column with the name of the slot to find the menu associated with the menu button, say `software-version-menu`. The client will also slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `delegated-event` event firing from the table. In the case of a menu button opening or closing, the original event's details will be an instance of `MenuButtonToggleEventDetail`. ### API @@ -42,7 +41,6 @@ _Props/Attrs_ _Content_ - column title (icon and/or text) -- 1 or more `nimble-mapping-icon`, `nimble-mapping-spinner`, `nimble-mapping-text`, or `nimble-mapping-empty` elements #### Cell View Component @@ -52,19 +50,19 @@ _Component Name_ _Rendering_ -If the record value associated with the specified `field-name` is a string, the cell will render a menu button containing the record value text. If the record value associated with the specified `field-name` is not a string, the cell will render nothing. +If the record value associated with the specified `field-name` is a non-empty string, the cell will render a menu button containing the record value text. If the record value associated with the specified `field-name` is not a non-empty string, the cell will render nothing. -Specifically, the menu button will have the following behaviors/styles: +The menu button will have the following behaviors/styles: -- Always use `ghost` appearance mode -- Always have `nimble-icon-arrow-expander-down` slotted in the `end` slot +- Use `ghost` appearance mode +- Have `nimble-icon-arrow-expander-down` slotted into the `end` slot - Grow to fill the width of the cell - Left-align the text (with padding) in the button. By default, button text is centered, but custom styling will be written to handle this case so that the text within each button is aligned for a given column. - Ellipsize text in the button if it doesn't fit in the button. #### Group Header View Component -The column will specify the existing `tableColumnTextGroupHeaderViewTag` as the `groupHeaderViewTag`. +A new component will not be created for the group header view of the menu button column. The column will specify the existing `tableColumnTextGroupHeaderViewTag` as the `groupHeaderViewTag` because the header will contain only text. ### Sorting & Grouping @@ -72,11 +70,13 @@ The column will be sorted and grouped based on the text that is provided for dis ### Placeholder -The column cell will not have a placeholder. If an empty, `undefined`, or `null` value is provided for the record, an empty cell will be rendered. Group rows will display `tableGroupRowPlaceholderNoValueLabel` when the value is `undefined` or `null` and `tableGroupRowPlaceholderEmptyLabel` when the value is an empty string. +The column cell will not have a placeholder. If an empty, `undefined`, or `null` value is provided for the record, an empty cell will be rendered. + +Group rows will display `tableGroupRowPlaceholderNoValueLabel` when the value is `undefined` or `null` and `tableGroupRowPlaceholderEmptyLabel` when the value is an empty string. This group row placeholder behavior already exists in the `TableColumnTextGroupHeaderView`, so no changes are required to achieve this behavior. ### Delegated Events -The cell will delegate the `beforetoggle` and `toggle` events from the menu button. This will allow a client application to listen for the delegated event and update the menu items in the slotted menu as appropriate before the menu opens. +The cell will delegate the `beforetoggle` and `toggle` events from the menu button through the table's `delegate-event` event. This will allow a client application to listen for the delegated event and update the menu items in the slotted menu as appropriate before the menu opens. ### Focus Recycling @@ -88,7 +88,7 @@ The column will support fractional width sizing along with a minimum pixel width ### Interactions -When the menu button is focused, it will have the same keyboard interactions as the `nimble-menu-button` outside of a table. Interacting with the menu button, whether via keyboard or mouse, will not modify the selection in the table. +When the menu button is focused, it will have the same keyboard interactions as the `nimble-menu-button` outside of a table. Interacting with the menu button and its slotted menu, whether via keyboard or mouse, will not modify the selection in the table. ### Accessibility @@ -104,29 +104,29 @@ A Blazor wrapper will be created for the component. There is no special consider ### API Updates to Existing Table Components -API changes need to be made to multiple parts of the table's existing parts to facilitate slotting a menu through the table and into a specific cell view. +Multiple API changes need to be made the table, its subcomponents, and the classes it uses to facilitate slotting a menu through the table and into a specific cell view. These changes include changes to the following: -- `ColumnInternalsOptions` - The `ColumnInternalsOptions` interface will include an optional string array named `slotNames`, which allows a column to specify the names of any slots that need to be forwarded into a cell. -- `ColumnInternals` - As with the `ColumnInternalsOptions`, the `ColumnInternals` class will have a `slotNames` array that specifies the names of any slots that need to be forwarded into a cell. The value will be readonly and will be populated by the `ColumnInternalsOptions` `slotNames` property. It will default to an empty array if a value is not provided in `ColumnInternalsOptions`. -- Base `cell-view` template - The `createCellViewTemplate` function exported from the base `cell-view` template will be updated to `repeat` over all slot names specified in the column's `slotNames` array and create a `slot` for each. The `name` of each slot will be the value in the `slotNames` array concatenated to the column's unique ID (i.e. `column.columnInternals.uniqueId + column.columnInternals.slotNames[i]`). The `slot` attribute will be set to the value in the `slotNames` array. -- Add events to pass slot information between cell views, rows, and the table. Specifically, this will look like: - - `cell-view-slots-requested` event +- The `ColumnInternalsOptions` interface will be updated to include an optional string array named `slotNames`, which allows a column to specify the names of any slots that need to be forwarded into a cell. +- As with the `ColumnInternalsOptions`, the `ColumnInternals` class will be updated to have a `slotNames` array that specifies the names of any slots that need to be forwarded into a cell. The value will be readonly and will be populated by the `ColumnInternalsOptions` `slotNames` property. It will default to an empty array if a value is not provided in `ColumnInternalsOptions`. +- The `createCellViewTemplate` function exported from the base `cell-view` template will be updated to `repeat` over all slot names specified in the column's `slotNames` array and create a `slot` for each. The `name` of each slot will be the value in the `slotNames` array concatenated to the column's unique ID (i.e. `column.columnInternals.uniqueId + column.columnInternals.slotNames[i]`). The `slot` attribute will be set to the value in the `slotNames` array. +- Add events to pass slot information between cell views, rows, and the table. These will look as follows: + - `cell-view-slots-request` event - Fired by cell view instances if they want to request that the column's slots to be placed within that cell. For example, the menu button column's cell view will fire this event when the cell's `menu-button` fires a `beforetoggle` event with the `newState` as `true`. - - Handled by table rows. When handling this event, a table row will fire the `row-slots-requested` event to request the table to slot the necessary elements within the row. + - Handled by table rows. When handling this event, a table row will fire the `row-slots-request` event to request the table to slot the necessary elements within the row. - Event details: ```ts - interface CellViewSlotRequestedEventDetail { + interface CellViewSlotRequestEventDetail { slots: { slot: string, name: string }[]; } ``` - - `row-slots-requested` event - - Fired by table rows to request that column's slots to be placed within that row. This event is fired in response to the row recieving a `cell-view-slots-requested` event fired by one of its cell views. + - `row-slots-request` event + - Fired by table rows to request that column's slots to be placed within that row. This event is fired in response to the row recieving a `cell-view-slots-request` event fired by one of its cell views. - Handled by table. When handling this event, the table will update its template to move the appropriate slots into the correct table row. - Event details: ```ts - interface RowSlotRequestedEventDetail { + interface RowSlotRequestEventDetail { columnInternalId: string; rowId: string; slots: { slot: string, name: string }[]; @@ -137,7 +137,7 @@ These changes include changes to the following: _Alternative #1_ -Rather than creating a menu button column, we could create a select column. However this has a number of different challenges steming from the fact that the `nimble-select` has a different slotting model than the `nimble-menu-button`. As a result, it would be very difficult have an API that allows providing unique options for each record without a significant redesign of the select. +Rather than creating a menu button column, we could create a select column. However this has a number of challenges steming from the fact that the `nimble-select` has a different slotting model than the `nimble-menu-button`. As a result, it would be very difficult have an API that allows providing unique options for each record without a significant redesign of the select. Additionally, the `nimble-select` has interactions that allow the value to be changed without the component being open. This poses a challenge of handling all the cases where a given select's options need to be updated. ## Open Issues From a4defc3dc9e15594014d79cdb058f20b30a44542 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 12:28:53 -0500 Subject: [PATCH 04/13] Update table-column-menu-button.md --- .../table/specs/table-column-specs/table-column-menu-button.md | 2 ++ 1 file changed, 2 insertions(+) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 3bb72b2057..bd733985b9 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -116,6 +116,7 @@ These changes include changes to the following: - Fired by cell view instances if they want to request that the column's slots to be placed within that cell. For example, the menu button column's cell view will fire this event when the cell's `menu-button` fires a `beforetoggle` event with the `newState` as `true`. - Handled by table rows. When handling this event, a table row will fire the `row-slots-request` event to request the table to slot the necessary elements within the row. - Event details: + ```ts interface CellViewSlotRequestEventDetail { slots: { slot: string, name: string }[]; @@ -125,6 +126,7 @@ These changes include changes to the following: - Fired by table rows to request that column's slots to be placed within that row. This event is fired in response to the row recieving a `cell-view-slots-request` event fired by one of its cell views. - Handled by table. When handling this event, the table will update its template to move the appropriate slots into the correct table row. - Event details: + ```ts interface RowSlotRequestEventDetail { columnInternalId: string; From 7407277a6c322600da1a17b853fbcf7eddacec29 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 12:35:33 -0500 Subject: [PATCH 05/13] Update table-column-menu-button.md --- .../table-column-menu-button.md | 16 ++++++++++++++++ 1 file changed, 16 insertions(+) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index bd733985b9..b16fd8f0f3 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -23,6 +23,22 @@ In some tables, the user needs to make a selection associated with cell in the t The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. A client will configure a column with the name of the slot to find the menu associated with the menu button, say `software-version-menu`. The client will also slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `delegated-event` event firing from the table. In the case of a menu button opening or closing, the original event's details will be an instance of `MenuButtonToggleEventDetail`. +Usage of the column would look as follows: + +```html + + + Software version + + + + 1.0.0 + 1.5.0 + 2.0.0 + + +``` + ### API #### Column Component From d655cd455bbd4cd4355c1e0b5414bc2592631528 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Wed, 22 May 2024 14:00:09 -0500 Subject: [PATCH 06/13] Update table-column-menu-button.md --- .../specs/table-column-specs/table-column-menu-button.md | 5 ++++- 1 file changed, 4 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index b16fd8f0f3..92767bf443 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -27,7 +27,10 @@ Usage of the column would look as follows: ```html - + Software version From 38adebb704f46c33f12d7cd4e8f42e7c1d4ab763 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 24 May 2024 10:49:56 -0500 Subject: [PATCH 07/13] Update table-column-menu-button.md --- .../table-column-menu-button.md | 57 +++++++++++++++---- 1 file changed, 45 insertions(+), 12 deletions(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 92767bf443..8964341eb2 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -21,7 +21,7 @@ In some tables, the user needs to make a selection associated with cell in the t ## Implementation / Design -The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. A client will configure a column with the name of the slot to find the menu associated with the menu button, say `software-version-menu`. The client will also slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `delegated-event` event firing from the table. In the case of a menu button opening or closing, the original event's details will be an instance of `MenuButtonToggleEventDetail`. +The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. Part of the menu button column's configuration will include the name of the slot where the menu associated with the menu button will be provided, say `software-version-menu`. The client will slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `menu-button-beforetoggle` event firing from the column. Usage of the column would look as follows: @@ -52,7 +52,7 @@ _Component Name_ _Props/Attrs_ -- `field-name`: string - The name of the field in a record that contains the string that will be displayed in the menu button. +- `field-name`: string - The name of the field in each record that contains the string that will be displayed in the menu button - `menu-slot`: string - The name of the slot within the `nimble-table` instance where the menu associated with the column's menu button will be provided - `fractional-width`: number (defaults to 1) - `min-pixel-width`: number (defaults to minimum supported by table) @@ -61,6 +61,21 @@ _Content_ - column title (icon and/or text) +_Events_ + +- `menu-button-beforetoggle`: Fired when a menu button in a cell fires the `beforetoggle` event +- `menu-button-toggle`: Fired when a menu button in a cell fires the `toggle` event + +The detail for each of these events will be as follows: +```ts +interface MenuButtonColumnToggleEventDetail { + recordId: string; + newState: boolean; + oldState: boolean; + originalEvent: CustomEvent; +} +``` + #### Cell View Component _Component Name_ @@ -76,8 +91,11 @@ The menu button will have the following behaviors/styles: - Use `ghost` appearance mode - Have `nimble-icon-arrow-expander-down` slotted into the `end` slot - Grow to fill the width of the cell -- Left-align the text (with padding) in the button. By default, button text is centered, but custom styling will be written to handle this case so that the text within each button is aligned for a given column. +- Left-align the text (with padding) in the button to make the text within each button is aligned for a given column. + - By default, button text is centered, so custom styling will be written to handle this case. - Ellipsize text in the button if it doesn't fit in the button. +- Provide the full text within the button's `title` if the text is ellipsized. + - This likely will not be able to leverage the existing `overflow` directive as-is because the overflow will occur on the text within a `span` within the button, but the `title` should be added when the button is hovered. The best solution to this problem will be determined during implementation. #### Group Header View Component @@ -95,7 +113,9 @@ Group rows will display `tableGroupRowPlaceholderNoValueLabel` when the value is ### Delegated Events -The cell will delegate the `beforetoggle` and `toggle` events from the menu button through the table's `delegate-event` event. This will allow a client application to listen for the delegated event and update the menu items in the slotted menu as appropriate before the menu opens. +The cell will delegate the `beforetoggle` and `toggle` events from the menu button through the column's `delegated-event` event. The column will listen for the `delegated-event` event, and it will fire the `menu-button-beforetoggle` event when it recieves a delegated event for `beforetoggle` on the menu button and will fire the `menu-button-toggle` event when it recieves a delegated event for `toggle` on the menu button. + +The `menu-button-beforetoggle` and `menu-button-toggle` event detail will both include the original event fired by the menu button. With this, the client can interact with the original event if necessary, such as cancelling the event once the menu button supports this (see [nimble issue #1157](https://github.com/ni/nimble/issues/1157)). ### Focus Recycling @@ -111,26 +131,38 @@ When the menu button is focused, it will have the same keyboard interactions as ### Accessibility -- If the text of the button does not fit fully in the button, it will be ellipsized and the button's `title` will be set to the full text. +If the text of the button does not fit fully in the button, it will be ellipsized and the button's `title` will be set to the full text. + +All other accessibility needs are already implemented by the table, menu button, and menu. ### Angular integration -An Angular wrapper will be created for the component. There is no special considerations for Angular. +An Angular wrapper will be created for the component. There are no special considerations for Angular. ### Blazor integration -A Blazor wrapper will be created for the component. There is no special considerations needed for Blazor. +A Blazor wrapper will be created for the component. There are no special considerations needed for Blazor. ### API Updates to Existing Table Components -Multiple API changes need to be made the table, its subcomponents, and the classes it uses to facilitate slotting a menu through the table and into a specific cell view. - -These changes include changes to the following: +Multiple API changes need to be made the table, its subcomponents, and the classes it uses to facilitate slotting a menu through the table and into a specific cell view. This includes the following: - The `ColumnInternalsOptions` interface will be updated to include an optional string array named `slotNames`, which allows a column to specify the names of any slots that need to be forwarded into a cell. - As with the `ColumnInternalsOptions`, the `ColumnInternals` class will be updated to have a `slotNames` array that specifies the names of any slots that need to be forwarded into a cell. The value will be readonly and will be populated by the `ColumnInternalsOptions` `slotNames` property. It will default to an empty array if a value is not provided in `ColumnInternalsOptions`. -- The `createCellViewTemplate` function exported from the base `cell-view` template will be updated to `repeat` over all slot names specified in the column's `slotNames` array and create a `slot` for each. The `name` of each slot will be the value in the `slotNames` array concatenated to the column's unique ID (i.e. `column.columnInternals.uniqueId + column.columnInternals.slotNames[i]`). The `slot` attribute will be set to the value in the `slotNames` array. -- Add events to pass slot information between cell views, rows, and the table. These will look as follows: +- Add slots to component templates: + - table template - slots created within each table row element that has most recently requested the slot + - slot's name: specified by client's column configuration (e.g. `software-version-menu`) + - slot's slot: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) + - row template - slots created within each table row element for each slot name that is specified in the column's `ColumnInternals.slotNames` array + - slot's name: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) + - slot's slot: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) + - cell view, created via `createCellViewTemplate` - slots created within the cell view + - slot's name: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) + - slot's slot: _column-requested-slot-name from column internal's slotNames array_ (e.g. menu) + - menu button column cell view - slot created within the menu button component + - slot's name: _column-requested-slot-name from column internal's slotNames array_ (e.g. menu) + - slot's slot: `"menu"`, which is the slot name required by the `nimble-menu-button` comonent +- Add events to pass slot information between cell views, rows, and the table: - `cell-view-slots-request` event - Fired by cell view instances if they want to request that the column's slots to be placed within that cell. For example, the menu button column's cell view will fire this event when the cell's `menu-button` fires a `beforetoggle` event with the `newState` as `true`. - Handled by table rows. When handling this event, a table row will fire the `row-slots-request` event to request the table to slot the necessary elements within the row. @@ -167,3 +199,4 @@ Rather than creating a menu button column, we could create a select column. Howe - There is no visual design spec for this feature yet. Therefore there are a few open visual design questions, including the following: - If we only support one appearance for the menu-button, is `ghost` the appropriate one to support? - Is there any concern that the button text will not align with the column header because of the padding between the edge of the button and the text within the button? +- If the menu is open in a cell, it needs to be closed when scrolling. However, the `focusedRecycleCallback()` doesn't provide the appropriate hook to do this today. The problem appears to be that the menu has focus when the menu button is open, which means the focus isn't actually in the cell view -- it's in the menu slotted into the cell view. We need to come up with a plan to address this. From e210732bf1344a54f12fad3351731a0e9627696b Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 24 May 2024 11:04:15 -0500 Subject: [PATCH 08/13] format --- .../table/specs/table-column-specs/table-column-menu-button.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 8964341eb2..596c256825 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -67,6 +67,7 @@ _Events_ - `menu-button-toggle`: Fired when a menu button in a cell fires the `toggle` event The detail for each of these events will be as follows: + ```ts interface MenuButtonColumnToggleEventDetail { recordId: string; @@ -157,7 +158,7 @@ Multiple API changes need to be made the table, its subcomponents, and the class - slot's name: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) - slot's slot: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) - cell view, created via `createCellViewTemplate` - slots created within the cell view - - slot's name: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) + - slot's name: _unique-column-id_ + _column-requested-slot-name from column internal's slotNames array_ (e.g. table-column-slot2-menu) - slot's slot: _column-requested-slot-name from column internal's slotNames array_ (e.g. menu) - menu button column cell view - slot created within the menu button component - slot's name: _column-requested-slot-name from column internal's slotNames array_ (e.g. menu) From 72f463bb0e521a1bc6de01346c586fdb696962ed Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Thu, 30 May 2024 09:32:34 -0500 Subject: [PATCH 09/13] more updates --- .../table-column-menu-button.md | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 596c256825..77d0500e38 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -17,11 +17,12 @@ In some tables, the user needs to make a selection associated with cell in the t - Support client-specified icons in the menu button, including icon-only menu buttons - Allow configuration of the menu button's `appearance` or `appearance-variant` -- Automatically updating the row's record when an item in the menu is activated +- Having the table or the column automatically update the row's record when an item in the menu is activated. + - If a record needs to be updated, the expectation is that this will be done within client code in reaction to an event fired by the menu items. ## Implementation / Design -The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. Part of the menu button column's configuration will include the name of the slot where the menu associated with the menu button will be provided, say `software-version-menu`. The client will slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `menu-button-beforetoggle` event firing from the column. +The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. Part of the menu button column's configuration will be the name of the slot where the menu associated with the menu button will be provided, say `software-version-menu`. The client will slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `menu-button-beforetoggle` event firing from the column. Usage of the column would look as follows: @@ -92,11 +93,11 @@ The menu button will have the following behaviors/styles: - Use `ghost` appearance mode - Have `nimble-icon-arrow-expander-down` slotted into the `end` slot - Grow to fill the width of the cell -- Left-align the text (with padding) in the button to make the text within each button is aligned for a given column. +- Left-align the text (with padding) in the button to make the text within each button is aligned for a given column - By default, button text is centered, so custom styling will be written to handle this case. -- Ellipsize text in the button if it doesn't fit in the button. -- Provide the full text within the button's `title` if the text is ellipsized. - - This likely will not be able to leverage the existing `overflow` directive as-is because the overflow will occur on the text within a `span` within the button, but the `title` should be added when the button is hovered. The best solution to this problem will be determined during implementation. +- Ellipsize text in the button if it doesn't fit in the button +- Provide the full text within the button's `title` if the text is ellipsized + - It is unlikely this can leverage the existing `overflow` directive as-is because the overflow will occur on the text within a `span` within the button, but the `title` should be added when the button is hovered. The best solution to this problem will be determined during implementation. #### Group Header View Component @@ -122,6 +123,8 @@ The `menu-button-beforetoggle` and `menu-button-toggle` event detail will both i Because the menu button in the cell can have focus, we must override `focusedRecycleCallback()` in our cell view and have it call `blur()` on the button. If we don't, the focus can pass to other cells as you scroll. +Note, there are open issues associated with scrolling, keyboard navigation, and focus recycling with the menu button. + ### Sizing The column will support fractional width sizing along with a minimum pixel width. @@ -146,7 +149,7 @@ A Blazor wrapper will be created for the component. There are no special conside ### API Updates to Existing Table Components -Multiple API changes need to be made the table, its subcomponents, and the classes it uses to facilitate slotting a menu through the table and into a specific cell view. This includes the following: +Multiple API changes need to be made to the table, its subcomponents, and the classes it uses to facilitate slotting a menu through the table and into a specific cell view. This includes the following: - The `ColumnInternalsOptions` interface will be updated to include an optional string array named `slotNames`, which allows a column to specify the names of any slots that need to be forwarded into a cell. - As with the `ColumnInternalsOptions`, the `ColumnInternals` class will be updated to have a `slotNames` array that specifies the names of any slots that need to be forwarded into a cell. The value will be readonly and will be populated by the `ColumnInternalsOptions` `slotNames` property. It will default to an empty array if a value is not provided in `ColumnInternalsOptions`. @@ -201,3 +204,4 @@ Rather than creating a menu button column, we could create a select column. Howe - If we only support one appearance for the menu-button, is `ghost` the appropriate one to support? - Is there any concern that the button text will not align with the column header because of the padding between the edge of the button and the text within the button? - If the menu is open in a cell, it needs to be closed when scrolling. However, the `focusedRecycleCallback()` doesn't provide the appropriate hook to do this today. The problem appears to be that the menu has focus when the menu button is open, which means the focus isn't actually in the cell view -- it's in the menu slotted into the cell view. We need to come up with a plan to address this. +- Some issues need to be resolved with keyboard navigation + menu button column. From 06139cc88bf7f85876b9b430637e3498dbcb1987 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Thu, 30 May 2024 10:28:24 -0500 Subject: [PATCH 10/13] Update packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md Co-authored-by: Jonathan Meyer <26874831+atmgrifter00@users.noreply.github.com> --- .../table/specs/table-column-specs/table-column-menu-button.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 77d0500e38..88527b8b52 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -2,7 +2,7 @@ ## Overview -In some tables, the user needs to make a selection associated with cell in the table. For example, in a table of software packages where there is a column for the software version to install, the user needs to select a version for each software package. The selection and options can vary between records. +In some tables, the user needs to make a selection associated with a cell in the table. For example, in a table of software packages where there is a column for the software version to install, the user needs to select a version for each software package. The selection and options can vary between records. ### Background From 95e3fd07e4438468452dafcc8a28aec93b6272e2 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Fri, 31 May 2024 10:20:13 -0500 Subject: [PATCH 11/13] Remove open questions that have design direction --- .../table/specs/table-column-specs/table-column-menu-button.md | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 88527b8b52..5847d67537 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -198,8 +198,6 @@ Rather than creating a menu button column, we could create a select column. Howe ## Open Issues -- In the Software Table, how should the currently installed version be represented? Currently it is italicized in both the menu and menu-button, but this is probably not the solution we want in the nimble table column. -- In the Software Table, the full software version is displayed as the title of the menu button and menu items. Where should that information go? - There is no visual design spec for this feature yet. Therefore there are a few open visual design questions, including the following: - If we only support one appearance for the menu-button, is `ghost` the appropriate one to support? - Is there any concern that the button text will not align with the column header because of the padding between the edge of the button and the text within the button? From eb1814603cbee9e60fe71c90bd6f74259ecb4ec5 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 11 Jun 2024 15:43:28 -0500 Subject: [PATCH 12/13] Update table-column-menu-button.md --- .../table-column-menu-button.md | 52 ++++++++++++++----- 1 file changed, 40 insertions(+), 12 deletions(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 5847d67537..9e29ad35c0 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -22,7 +22,7 @@ In some tables, the user needs to make a selection associated with a cell in the ## Implementation / Design -The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. Part of the menu button column's configuration will be the name of the slot where the menu associated with the menu button will be provided, say `software-version-menu`. The client will slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `menu-button-beforetoggle` event firing from the column. +The `nimble-table-column-menu-button` will follow many of the API patterns established by the table's action menu. Part of the menu button column's configuration will be the name of the slot where the menu associated with the menu button will be provided, say `software-version-menu`. The client will slot their menu into the table using the slot name they configured on the column; in this case, `software-version-menu`. The table, along with all of its subcomponents, will be responsible for coordinating the slotting of the menu into the appropriate row and cell when a menu button becomes open. If the client needs different menu items depending on which menu button is open, they can update the menu items within their slotted menu in reaction to the `menu-button-column-beforetoggle` event firing from the column. Usage of the column would look as follows: @@ -43,6 +43,35 @@ Usage of the column would look as follows: ``` +Because the menu will only be shown for one menu button at a time, the same slot and menu element can be shared across menu button columns and action menus. For example: + +```html + + + Name + + + Bitness + + + Version + + + + + + +``` + ### API #### Column Component @@ -64,17 +93,14 @@ _Content_ _Events_ -- `menu-button-beforetoggle`: Fired when a menu button in a cell fires the `beforetoggle` event -- `menu-button-toggle`: Fired when a menu button in a cell fires the `toggle` event +- `menu-button-column-beforetoggle`: Fired when a menu button in a cell fires the `beforetoggle` event +- `menu-button-column-toggle`: Fired when a menu button in a cell fires the `toggle` event The detail for each of these events will be as follows: ```ts -interface MenuButtonColumnToggleEventDetail { +interface MenuButtonColumnToggleEventDetail extends MenuButtonToggleEventDetail { recordId: string; - newState: boolean; - oldState: boolean; - originalEvent: CustomEvent; } ``` @@ -105,19 +131,19 @@ A new component will not be created for the group header view of the menu button ### Sorting & Grouping -The column will be sorted and grouped based on the text that is provided for display in the button. +The column will not be sortable or groupable. ### Placeholder -The column cell will not have a placeholder. If an empty, `undefined`, or `null` value is provided for the record, an empty cell will be rendered. +The column's cells will not have a placeholder. If an empty, `undefined`, or `null` value is provided for the record, an empty cell will be rendered. Group rows will display `tableGroupRowPlaceholderNoValueLabel` when the value is `undefined` or `null` and `tableGroupRowPlaceholderEmptyLabel` when the value is an empty string. This group row placeholder behavior already exists in the `TableColumnTextGroupHeaderView`, so no changes are required to achieve this behavior. ### Delegated Events -The cell will delegate the `beforetoggle` and `toggle` events from the menu button through the column's `delegated-event` event. The column will listen for the `delegated-event` event, and it will fire the `menu-button-beforetoggle` event when it recieves a delegated event for `beforetoggle` on the menu button and will fire the `menu-button-toggle` event when it recieves a delegated event for `toggle` on the menu button. +The cell will delegate the `beforetoggle` and `toggle` events from the menu button through the column's `delegated-event` event. The column will listen for the `delegated-event` event, and it will fire the `menu-button-column-beforetoggle` event when it recieves a delegated event for `beforetoggle` on the menu button and will fire the `menu-button-column-toggle` event when it recieves a delegated event for `toggle` on the menu button. -The `menu-button-beforetoggle` and `menu-button-toggle` event detail will both include the original event fired by the menu button. With this, the client can interact with the original event if necessary, such as cancelling the event once the menu button supports this (see [nimble issue #1157](https://github.com/ni/nimble/issues/1157)). +The `menu-button-column-beforetoggle` and `menu-button-column-toggle` event detail will extend the menu button's event detail with an additional `recordId` property to indicate which menu button was toggled. When the menu button's toggle events are updated to be cancellable, the menu button column's toggle events will also be made cancellable so that the toggle events can be cancelled within the table (see [nimble issue #1157](https://github.com/ni/nimble/issues/1157)). ### Focus Recycling @@ -190,6 +216,8 @@ Multiple API changes need to be made to the table, its subcomponents, and the cl } ``` +In addition to the slotting changes needed within the table, updates also need to be made to disable sorting on this column. Specifically, the sorting properties of `sortDirection`, `sortIndex`, and `sortingDisabled` will be moved out of the base `TableColumn` class and into a mixin that all existing columns will leverage. + ## Alternative Implementations / Designs _Alternative #1_ @@ -202,4 +230,4 @@ Rather than creating a menu button column, we could create a select column. Howe - If we only support one appearance for the menu-button, is `ghost` the appropriate one to support? - Is there any concern that the button text will not align with the column header because of the padding between the edge of the button and the text within the button? - If the menu is open in a cell, it needs to be closed when scrolling. However, the `focusedRecycleCallback()` doesn't provide the appropriate hook to do this today. The problem appears to be that the menu has focus when the menu button is open, which means the focus isn't actually in the cell view -- it's in the menu slotted into the cell view. We need to come up with a plan to address this. -- Some issues need to be resolved with keyboard navigation + menu button column. +- There may be additional work to integrate this column with the table keyboard navigation work that is currently in progress. From 10399eb441b1b5be4e1ddc1dabffa554c1ebb014 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 11 Jun 2024 15:47:47 -0500 Subject: [PATCH 13/13] format --- .../table/specs/table-column-specs/table-column-menu-button.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md index 9e29ad35c0..c6bf72f4de 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-menu-button.md @@ -99,7 +99,8 @@ _Events_ The detail for each of these events will be as follows: ```ts -interface MenuButtonColumnToggleEventDetail extends MenuButtonToggleEventDetail { +interface MenuButtonColumnToggleEventDetail + extends MenuButtonToggleEventDetail { recordId: string; } ```