diff --git a/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json b/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json new file mode 100644 index 0000000000..341ecaa712 --- /dev/null +++ b/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json @@ -0,0 +1,7 @@ +{ + "type": "patch", + "comment": "Update column divider color on hover", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "patch" +} diff --git a/packages/nimble-components/src/table/index.ts b/packages/nimble-components/src/table/index.ts index dd9bed139b..d13ea2c918 100644 --- a/packages/nimble-components/src/table/index.ts +++ b/packages/nimble-components/src/table/index.ts @@ -439,7 +439,7 @@ export class Table< if (event.button === 0) { this.layoutManager.beginColumnInteractiveSize( event.clientX, - columnIndex * 2 + this.getRightDividerIndex(columnIndex) ); } } @@ -452,11 +452,21 @@ export class Table< if (event.button === 0) { this.layoutManager.beginColumnInteractiveSize( event.clientX, - columnIndex * 2 - 1 + this.getLeftDividerIndex(columnIndex) ); } } + /** @internal */ + public getLeftDividerIndex(columnIndex: number): number { + return columnIndex * 2 - 1; + } + + /** @internal */ + public getRightDividerIndex(columnIndex: number): number { + return columnIndex * 2; + } + /** @internal */ public handleGroupRowExpanded(rowIndex: number, event: Event): void { this.toggleRowExpanded(rowIndex); diff --git a/packages/nimble-components/src/table/models/table-layout-manager.ts b/packages/nimble-components/src/table/models/table-layout-manager.ts index b6ff323382..1f9da90fc6 100644 --- a/packages/nimble-components/src/table/models/table-layout-manager.ts +++ b/packages/nimble-components/src/table/models/table-layout-manager.ts @@ -14,7 +14,9 @@ export class TableLayoutManager { @observable public activeColumnIndex?: number; - private activeColumnDivider?: number; + @observable + public activeColumnDivider?: number; + private gridSizedColumns?: TableColumn[]; private visibleColumns: TableColumn[] = []; private initialTableScrollableWidth?: number; @@ -111,6 +113,7 @@ export class TableLayoutManager { this.resetGridSizedColumns(); this.isColumnBeingSized = false; this.activeColumnIndex = undefined; + this.activeColumnDivider = undefined; }; private getTotalColumnFixedWidth(): number { diff --git a/packages/nimble-components/src/table/styles.ts b/packages/nimble-components/src/table/styles.ts index af18cb9d02..870943fdf1 100644 --- a/packages/nimble-components/src/table/styles.ts +++ b/packages/nimble-components/src/table/styles.ts @@ -9,7 +9,8 @@ import { controlSlimHeight, mediumPadding, standardPadding, - tableRowBorderColor + tableRowBorderColor, + borderHoverColor } from '../theme-provider/design-tokens'; import { Theme } from '../theme-provider/types'; import { hexToRgbaCssColor } from '../utilities/style/colors'; @@ -115,6 +116,17 @@ export const styles = css` height: ${controlSlimHeight}; cursor: col-resize; position: absolute; + z-index: ${ZIndexLevels.zIndex1}; + } + + .column-divider:hover, + .column-divider.divider-active { + border-color: ${borderHoverColor}; + } + + .column-divider.column-active, + .header-container:hover .column-divider { + display: block; } .column-divider::before { @@ -131,17 +143,6 @@ export const styles = css` ); } - .column-divider.active { - display: block; - z-index: ${ZIndexLevels.zIndex1}; - } - - .header-container:hover .column-divider.left, - .header-container:hover .column-divider.right { - display: block; - z-index: ${ZIndexLevels.zIndex1}; - } - .column-divider.left { left: -1px; } diff --git a/packages/nimble-components/src/table/template.ts b/packages/nimble-components/src/table/template.ts index 181e423237..fd9ad33b96 100644 --- a/packages/nimble-components/src/table/template.ts +++ b/packages/nimble-components/src/table/template.ts @@ -83,8 +83,14 @@ export const template = html` ${repeat(x => x.visibleColumns, html`
${when((_, c) => c.index > 0, html` -
+
`)} <${tableHeaderTag} @@ -97,7 +103,13 @@ export const template = html
` ${when((_, c) => c.index < c.length - 1, html` -
`)} diff --git a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts index c6dba3e1f3..bbdc7e8086 100644 --- a/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts +++ b/packages/nimble-components/src/table/tests/table-column-sizing.spec.ts @@ -750,60 +750,74 @@ describe('Table Interactive Column Sizing', () => { describe('active divider tests', () => { const dividerActiveTests = [ { - name: 'click on first column right divider only results in one active divider', + name: 'click on first column right divider', dividerClickIndex: 0, leftDividerClick: false, - expectedActiveIndexes: [0] + expectedColumnActiveDividerIndexes: [0] }, { - name: 'click on second column left divider results in two active dividers', + name: 'click on second column left divider', dividerClickIndex: 1, - expectedActiveIndexes: [1, 2] + expectedColumnActiveDividerIndexes: [1, 2] }, { - name: 'click on second column right divider results in two active dividers', + name: 'click on second column right divider', dividerClickIndex: 2, - expectedActiveIndexes: [1, 2] + expectedColumnActiveDividerIndexes: [1, 2] }, { - name: 'click on third column left divider results in two active dividers', + name: 'click on third column left divider', dividerClickIndex: 3, - expectedActiveIndexes: [3, 4] + expectedColumnActiveDividerIndexes: [3, 4] }, { - name: 'click on third column right divider results in two active dividers', + name: 'click on third column right divider', dividerClickIndex: 4, - expectedActiveIndexes: [3, 4] + expectedColumnActiveDividerIndexes: [3, 4] }, { - name: 'click on last column left divider only results in one active divider', + name: 'click on last column left divider', dividerClickIndex: 5, - expectedActiveIndexes: [5] + expectedColumnActiveDividerIndexes: [5] } ] as const; parameterizeSpec(dividerActiveTests, (spec, name, value) => { - spec(name, async () => { - const dividers = Array.from( - element.shadowRoot!.querySelectorAll('.column-divider') - ); - const divider = dividers[value.dividerClickIndex]!; - const dividerRect = divider.getBoundingClientRect(); - const mouseDownEvent = new MouseEvent('mousedown', { - clientX: (dividerRect.x + dividerRect.width) / 2, - clientY: (dividerRect.y + dividerRect.height) / 2 - }); - const mouseUpEvent = new MouseEvent('mouseup'); - divider.dispatchEvent(mouseDownEvent); - await waitForUpdatesAsync(); - const activeDividers = []; - for (let i = 0; i < dividers.length; i++) { - if (dividers[i]!.classList.contains('active')) { - activeDividers.push(i); + spec( + `${name} updates expected dividers as "divider-active" and "column-active"`, + async () => { + const dividers = Array.from( + element.shadowRoot!.querySelectorAll('.column-divider') + ); + const divider = dividers[value.dividerClickIndex]!; + const dividerRect = divider.getBoundingClientRect(); + const mouseDownEvent = new MouseEvent('mousedown', { + clientX: (dividerRect.x + dividerRect.width) / 2, + clientY: (dividerRect.y + dividerRect.height) / 2 + }); + const mouseUpEvent = new MouseEvent('mouseup'); + divider.dispatchEvent(mouseDownEvent); + await waitForUpdatesAsync(); + const dividerActiveDividers = []; + const columnActiveDividers = []; + for (let i = 0; i < dividers.length; i++) { + if (dividers[i]!.classList.contains('divider-active')) { + dividerActiveDividers.push(i); + } + if (dividers[i]!.classList.contains('column-active')) { + columnActiveDividers.push(i); + } } + document.dispatchEvent(mouseUpEvent); // clean up registered event handlers + + expect(dividerActiveDividers.length).toEqual(1); + expect(dividerActiveDividers[0]).toEqual( + value.dividerClickIndex + ); + expect(columnActiveDividers).toEqual( + value.expectedColumnActiveDividerIndexes + ); } - document.dispatchEvent(mouseUpEvent); // clean up registered event handlers - expect(activeDividers).toEqual(value.expectedActiveIndexes); - }); + ); }); it('first column only has right divider', () => { @@ -831,12 +845,12 @@ describe('Table Interactive Column Sizing', () => { }); divider.dispatchEvent(mouseDownEvent); await waitForUpdatesAsync(); - expect(divider.classList.contains('active')).toBeTruthy(); + expect(divider.classList.contains('divider-active')).toBeTruthy(); const mouseUpEvent = new MouseEvent('mouseup'); document.dispatchEvent(mouseUpEvent); await waitForUpdatesAsync(); - expect(divider.classList.contains('active')).toBeFalsy(); + expect(divider.classList.contains('divider-active')).toBeFalsy(); }); });