From d453002edff85ffcee1b6ab40514625f6c29c2d0 Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Mon, 4 Mar 2024 11:26:49 -0600 Subject: [PATCH 01/10] Pin playwright in jasmine-parameterized (#1897) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale The [renovate PR](https://github.com/ni/nimble/pull/1896) was trying to bump the playwright version in lock only mode even though it's locked. Believe it's because the jasmine-parameterize playwright version was not locked. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Locked the playwright version in jasmine-parameterized as well. ## ๐Ÿงช Testing Relying on CI. ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --- ...parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json | 7 +++++++ package-lock.json | 2 +- packages/jasmine-parameterized/package.json | 2 +- 3 files changed, 9 insertions(+), 2 deletions(-) create mode 100644 change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json diff --git a/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json b/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json new file mode 100644 index 0000000000..d40a9b7653 --- /dev/null +++ b/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Align playwright version across packages", + "packageName": "@ni/jasmine-parameterized", + "email": "rajsite@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/package-lock.json b/package-lock.json index e642d571d8..4d4d5ab46d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -33836,7 +33836,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-spec-reporter": "^0.0.36", - "playwright": "^1.30.0", + "playwright": "1.40.0", "typescript": "~4.8.2" } }, diff --git a/packages/jasmine-parameterized/package.json b/packages/jasmine-parameterized/package.json index 50829b1ca5..86d5ed7333 100644 --- a/packages/jasmine-parameterized/package.json +++ b/packages/jasmine-parameterized/package.json @@ -51,7 +51,7 @@ "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-spec-reporter": "^0.0.36", - "playwright": "^1.30.0", + "playwright": "1.40.0", "typescript": "~4.8.2" } } From 05709e4f2b98bb61ec13e24842624317882c2bf8 Mon Sep 17 00:00:00 2001 From: rajsite Date: Mon, 4 Mar 2024 17:42:52 +0000 Subject: [PATCH 02/10] applying package updates [skip ci] --- ...ized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json | 7 ------- packages/jasmine-parameterized/CHANGELOG.json | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 7 deletions(-) delete mode 100644 change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json diff --git a/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json b/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json deleted file mode 100644 index d40a9b7653..0000000000 --- a/change/@ni-jasmine-parameterized-5ea52984-eaf4-4d4f-958f-f44c22077ff2.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Align playwright version across packages", - "packageName": "@ni/jasmine-parameterized", - "email": "rajsite@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/packages/jasmine-parameterized/CHANGELOG.json b/packages/jasmine-parameterized/CHANGELOG.json index 99cb5e9999..6595ab1cfb 100644 --- a/packages/jasmine-parameterized/CHANGELOG.json +++ b/packages/jasmine-parameterized/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/jasmine-parameterized", "entries": [ + { + "date": "Mon, 04 Mar 2024 17:42:52 GMT", + "version": "0.2.2", + "tag": "@ni/jasmine-parameterized_v0.2.2", + "comments": { + "none": [ + { + "author": "rajsite@users.noreply.github.com", + "package": "@ni/jasmine-parameterized", + "commit": "d453002edff85ffcee1b6ab40514625f6c29c2d0", + "comment": "Align playwright version across packages" + } + ] + } + }, { "date": "Wed, 21 Feb 2024 19:48:20 GMT", "version": "0.2.2", From 74a406d6f0a183801ea61e5847baaa9f4879b62d Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 4 Mar 2024 18:21:52 +0000 Subject: [PATCH 03/10] Update dependency karma-firefox-launcher to v2.1.3 (#1896) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Change | Age | Adoption | Passing | Confidence | |---|---|---|---|---|---| | [karma-firefox-launcher](https://togithub.com/karma-runner/karma-firefox-launcher) | [`2.1.2` -> `2.1.3`](https://renovatebot.com/diffs/npm/karma-firefox-launcher/2.1.2/2.1.3) | [![age](https://developer.mend.io/api/mc/badges/age/npm/karma-firefox-launcher/2.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![adoption](https://developer.mend.io/api/mc/badges/adoption/npm/karma-firefox-launcher/2.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![passing](https://developer.mend.io/api/mc/badges/compatibility/npm/karma-firefox-launcher/2.1.2/2.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | [![confidence](https://developer.mend.io/api/mc/badges/confidence/npm/karma-firefox-launcher/2.1.2/2.1.3?slim=true)](https://docs.renovatebot.com/merge-confidence/) | --- ### Release Notes
karma-runner/karma-firefox-launcher (karma-firefox-launcher) ### [`v2.1.3`](https://togithub.com/karma-runner/karma-firefox-launcher/blob/HEAD/CHANGELOG.md#213-2024-03-03) [Compare Source](https://togithub.com/karma-runner/karma-firefox-launcher/compare/v2.1.2...v2.1.3)
--- ### Configuration ๐Ÿ“… **Schedule**: Branch creation - "monthly" (UTC), Automerge - At any time (no schedule defined). ๐Ÿšฆ **Automerge**: Disabled by config. Please merge this manually once you are satisfied. โ™ป **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. ๐Ÿ”• **Ignore**: Close this PR and you won't be reminded about this update again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ni/nimble). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> Co-authored-by: Milan Raj --- package-lock.json | 25 ++++++++++++++++++++----- 1 file changed, 20 insertions(+), 5 deletions(-) diff --git a/package-lock.json b/package-lock.json index 4d4d5ab46d..a26c75a918 100644 --- a/package-lock.json +++ b/package-lock.json @@ -21638,13 +21638,28 @@ } }, "node_modules/karma-firefox-launcher": { - "version": "2.1.2", - "resolved": "https://registry.npmjs.org/karma-firefox-launcher/-/karma-firefox-launcher-2.1.2.tgz", - "integrity": "sha512-VV9xDQU1QIboTrjtGVD4NCfzIH7n01ZXqy/qpBhnOeGVOkG5JYPEm8kuSd7psHE6WouZaQ9Ool92g8LFweSNMA==", + "version": "2.1.3", + "resolved": "https://registry.npmjs.org/karma-firefox-launcher/-/karma-firefox-launcher-2.1.3.tgz", + "integrity": "sha512-LMM2bseebLbYjODBOVt7TCPP9OI2vZIXCavIXhkO9m+10Uj5l7u/SKoeRmYx8FYHTVGZSpk6peX+3BMHC1WwNw==", "dev": true, "dependencies": { "is-wsl": "^2.2.0", - "which": "^2.0.1" + "which": "^3.0.0" + } + }, + "node_modules/karma-firefox-launcher/node_modules/which": { + "version": "3.0.1", + "resolved": "https://registry.npmjs.org/which/-/which-3.0.1.tgz", + "integrity": "sha512-XA1b62dzQzLfaEOSQFTCOd5KFf/1VSzZo7/7TUjnya6u0vGGKzU96UQBZTAThCb2j4/xjBAyii1OhRLJEivHvg==", + "dev": true, + "dependencies": { + "isexe": "^2.0.0" + }, + "bin": { + "node-which": "bin/which.js" + }, + "engines": { + "node": "^14.17.0 || ^16.13.0 || >=18.0.0" } }, "node_modules/karma-jasmine": { @@ -34043,7 +34058,7 @@ "jasmine-core": "^4.5.0", "karma": "^6.3.0", "karma-chrome-launcher": "^3.1.0", - "karma-firefox-launcher": "^2.1.0", + "karma-firefox-launcher": "^2.1.3", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-jasmine-spec-tags": "^2.0.0", From 4b0501210e4096c23350dbe5cb2eb9e4d6901ed6 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Mon, 4 Mar 2024 12:43:05 -0600 Subject: [PATCH 04/10] Green column divider (#1888) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Fixes #1880 ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation - A hovered column divider is now `borderHoverColor` - The column divider that is being dragged is styled using the `active` class to be `borderHoverColor` - The second column divider of the column being resized (assuming it exists) is styled using the `visible` class to be visible ## ๐Ÿงช Testing - Manually tested in storybook - Update unit tests that check for the correct CSS classes to be applied to dividers during a drag operation ## โœ… Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: m-akinc <7282195+m-akinc@users.noreply.github.com> Co-authored-by: Milan Raj --- ...-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json | 7 ++ packages/nimble-components/src/table/index.ts | 14 +++- .../src/table/models/table-layout-manager.ts | 5 +- .../nimble-components/src/table/styles.ts | 25 +++--- .../nimble-components/src/table/template.ts | 18 +++- .../table/tests/table-column-sizing.spec.ts | 82 +++++++++++-------- 6 files changed, 99 insertions(+), 52 deletions(-) create mode 100644 change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json 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(); }); }); From 2521df52ebd3c50f228a06e5e0063c1cb8511fc5 Mon Sep 17 00:00:00 2001 From: rajsite Date: Mon, 4 Mar 2024 19:02:52 +0000 Subject: [PATCH 05/10] applying package updates [skip ci] --- .../projects/ni/nimble-angular/CHANGELOG.json | 15 +++++++++++++++ .../projects/ni/nimble-angular/CHANGELOG.md | 10 +++++++++- .../projects/ni/nimble-angular/package.json | 4 ++-- ...ents-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json | 7 ------- package-lock.json | 10 +++++----- packages/nimble-blazor/package.json | 2 +- packages/nimble-components/CHANGELOG.json | 15 +++++++++++++++ packages/nimble-components/CHANGELOG.md | 10 +++++++++- packages/nimble-components/package.json | 2 +- 9 files changed, 57 insertions(+), 18 deletions(-) delete mode 100644 change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json index ccc8295754..63761fee2e 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-angular", "entries": [ + { + "date": "Mon, 04 Mar 2024 19:02:52 GMT", + "version": "20.2.17", + "tag": "@ni/nimble-angular_v20.2.17", + "comments": { + "patch": [ + { + "author": "beachball", + "package": "@ni/nimble-angular", + "comment": "Bump @ni/nimble-components to v21.8.2", + "commit": "not available" + } + ] + } + }, { "date": "Fri, 01 Mar 2024 23:02:58 GMT", "version": "20.2.16", diff --git a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md index 721dc7a3b3..9c661e4030 100644 --- a/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md +++ b/angular-workspace/projects/ni/nimble-angular/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-angular -This log was last generated on Fri, 01 Mar 2024 23:02:58 GMT and should not be manually modified. +This log was last generated on Mon, 04 Mar 2024 19:02:52 GMT and should not be manually modified. +## 20.2.17 + +Mon, 04 Mar 2024 19:02:52 GMT + +### Patches + +- Bump @ni/nimble-components to v21.8.2 + ## 20.2.16 Fri, 01 Mar 2024 23:02:58 GMT diff --git a/angular-workspace/projects/ni/nimble-angular/package.json b/angular-workspace/projects/ni/nimble-angular/package.json index 89732c42c8..ea50fd8dfc 100644 --- a/angular-workspace/projects/ni/nimble-angular/package.json +++ b/angular-workspace/projects/ni/nimble-angular/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-angular", - "version": "20.2.16", + "version": "20.2.17", "description": "Angular components for the NI Nimble Design System", "scripts": { "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish" @@ -31,7 +31,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^21.8.1" + "@ni/nimble-components": "^21.8.2" }, "dependencies": { "tslib": "^2.2.0" diff --git a/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json b/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json deleted file mode 100644 index 341ecaa712..0000000000 --- a/change/@ni-nimble-components-24dcfac0-abab-41bf-b3f8-c3821e2a18ed.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "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/package-lock.json b/package-lock.json index a26c75a918..51615a87e5 100644 --- a/package-lock.json +++ b/package-lock.json @@ -83,7 +83,7 @@ }, "angular-workspace/projects/ni/nimble-angular": { "name": "@ni/nimble-angular", - "version": "20.2.16", + "version": "20.2.17", "license": "MIT", "dependencies": { "tslib": "^2.2.0" @@ -94,7 +94,7 @@ "@angular/forms": "^15.2.10", "@angular/localize": "^15.2.10", "@angular/router": "^15.2.10", - "@ni/nimble-components": "^21.8.1" + "@ni/nimble-components": "^21.8.2" } }, "node_modules/@11ty/dependency-tree": { @@ -33890,7 +33890,7 @@ }, "packages/nimble-blazor": { "name": "@ni/nimble-blazor", - "version": "14.3.13", + "version": "14.3.14", "hasInstallScript": true, "license": "MIT", "devDependencies": { @@ -33981,7 +33981,7 @@ }, "packages/nimble-components": { "name": "@ni/nimble-components", - "version": "21.8.1", + "version": "21.8.2", "license": "MIT", "dependencies": { "@microsoft/fast-colors": "^5.3.1", @@ -34058,7 +34058,7 @@ "jasmine-core": "^4.5.0", "karma": "^6.3.0", "karma-chrome-launcher": "^3.1.0", - "karma-firefox-launcher": "^2.1.3", + "karma-firefox-launcher": "^2.1.0", "karma-jasmine": "^5.1.0", "karma-jasmine-html-reporter": "^2.0.0", "karma-jasmine-spec-tags": "^2.0.0", diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json index bcc2f9bf78..ddada76194 100644 --- a/packages/nimble-blazor/package.json +++ b/packages/nimble-blazor/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-blazor", - "version": "14.3.13", + "version": "14.3.14", "description": "Blazor components for the NI Nimble Design System", "scripts": { "postinstall": "node build/generate-playwright-version-properties/source/index.js", diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 7193c013c4..42258e43f6 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Mon, 04 Mar 2024 19:02:52 GMT", + "version": "21.8.2", + "tag": "@ni/nimble-components_v21.8.2", + "comments": { + "patch": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "4b0501210e4096c23350dbe5cb2eb9e4d6901ed6", + "comment": "Update column divider color on hover" + } + ] + } + }, { "date": "Fri, 01 Mar 2024 23:02:58 GMT", "version": "21.8.1", diff --git a/packages/nimble-components/CHANGELOG.md b/packages/nimble-components/CHANGELOG.md index 5c39560da7..d88bef0c3a 100644 --- a/packages/nimble-components/CHANGELOG.md +++ b/packages/nimble-components/CHANGELOG.md @@ -1,9 +1,17 @@ # Change Log - @ni/nimble-components -This log was last generated on Fri, 01 Mar 2024 23:02:58 GMT and should not be manually modified. +This log was last generated on Mon, 04 Mar 2024 19:02:52 GMT and should not be manually modified. +## 21.8.2 + +Mon, 04 Mar 2024 19:02:52 GMT + +### Patches + +- Update column divider color on hover ([ni/nimble@4b05012](https://github.com/ni/nimble/commit/4b0501210e4096c23350dbe5cb2eb9e4d6901ed6)) + ## 21.8.1 Fri, 01 Mar 2024 23:02:58 GMT diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json index 2c3c8f11c3..e514a96e00 100644 --- a/packages/nimble-components/package.json +++ b/packages/nimble-components/package.json @@ -1,6 +1,6 @@ { "name": "@ni/nimble-components", - "version": "21.8.1", + "version": "21.8.2", "description": "Styled web components for the NI Nimble Design System", "scripts": { "build": "npm run generate-icons && npm run generate-workers && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook", From fc97944fd07e5f24b8b176c06355ef579c441cf7 Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Mon, 4 Mar 2024 15:06:58 -0600 Subject: [PATCH 06/10] Enable github-actions updates on renovate (#1898) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Enable the renovate [`github-actions`](https://docs.renovatebot.com/modules/manager/github-actions/) manager to update our action versions ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Enabled in the renovate config following our current pattern of bundling the changes for the manager in a single PR. ## ๐Ÿงช Testing Not sure how to test a PR update to the renovate config. Doing it live ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --- .github/renovate.json | 9 +++++++-- 1 file changed, 7 insertions(+), 2 deletions(-) diff --git a/.github/renovate.json b/.github/renovate.json index f908bfd23e..33aefad77a 100644 --- a/.github/renovate.json +++ b/.github/renovate.json @@ -3,14 +3,14 @@ "extends": [ "config:base" ], - "enabledManagers": ["npm", "nuget"], + "enabledManagers": ["npm", "nuget", "github-actions"], "rebaseWhen": "conflicted", "schedule": [ "monthly" ], "packageRules": [ { - "matchManagers": ["npm", "nuget"], + "matchManagers": ["npm", "nuget", "github-actions"], "enabled": false }, { @@ -24,6 +24,11 @@ "groupName": "nuget dependencies", "matchManagers": ["nuget"], "enabled": true + }, + { + "groupName": "github actions dependencies", + "matchManagers": ["github-actions"], + "enabled": true } ] } From 136a79bc77cf5722f1d06201bd5fa7afe9164bf0 Mon Sep 17 00:00:00 2001 From: Milan Raj Date: Mon, 4 Mar 2024 17:18:39 -0600 Subject: [PATCH 07/10] Issue template labels and consistency (#1899) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale - Update labels on issue templates - Consistency on headers and button name - Consistency on EOF whitespace ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation See above ## ๐Ÿงช Testing Doing it live. ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --- .github/ISSUE_TEMPLATE/bug_report.md | 2 +- .github/ISSUE_TEMPLATE/feature_request.md | 4 +++- .../{ixd_user_story.md => interaction_design_request.md} | 8 +++++--- .github/ISSUE_TEMPLATE/new_component.md | 9 +++++---- .github/ISSUE_TEMPLATE/tech_debt.md | 5 +++-- .github/ISSUE_TEMPLATE/user_story.md | 2 +- ...ual_design_user_story.md => visual_design_request.md} | 8 +++++--- 7 files changed, 23 insertions(+), 15 deletions(-) rename .github/ISSUE_TEMPLATE/{ixd_user_story.md => interaction_design_request.md} (88%) rename .github/ISSUE_TEMPLATE/{visual_design_user_story.md => visual_design_request.md} (88%) diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md index 7c3a100192..23b9801ff5 100644 --- a/.github/ISSUE_TEMPLATE/bug_report.md +++ b/.github/ISSUE_TEMPLATE/bug_report.md @@ -1,5 +1,5 @@ --- -name: ๐Ÿ› Bug report +name: ๐Ÿ› Bug Report about: Create a report to help us improve title: '' labels: 'bug,triage' diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md index e426154a3c..eec33edebb 100644 --- a/.github/ISSUE_TEMPLATE/feature_request.md +++ b/.github/ISSUE_TEMPLATE/feature_request.md @@ -1,5 +1,5 @@ --- -name: ๐Ÿ™‹ Feature request +name: ๐Ÿ™‹ Feature Request about: Suggest an idea for this project title: '' labels: 'enhancement,triage' @@ -11,6 +11,8 @@ Thanks for filing an issue ๐Ÿ˜„! Before you submit, please read the following: Search open/closed issues before submitting. Someone may have requested the same feature before. --> +# ๐Ÿ™‹ Feature Request + ## ๐Ÿ˜ฏ Problem to Solve diff --git a/.github/ISSUE_TEMPLATE/ixd_user_story.md b/.github/ISSUE_TEMPLATE/interaction_design_request.md similarity index 88% rename from .github/ISSUE_TEMPLATE/ixd_user_story.md rename to .github/ISSUE_TEMPLATE/interaction_design_request.md index 7c206761c2..1583489eb7 100644 --- a/.github/ISSUE_TEMPLATE/ixd_user_story.md +++ b/.github/ISSUE_TEMPLATE/interaction_design_request.md @@ -1,12 +1,14 @@ --- -name: ๐Ÿง‘โ€๐Ÿ’ผ Interaction Design (IxD) User story +name: ๐Ÿ‘ˆ Interaction Design Request about: (PO ONLY) A small chunk of work to be done by an Interaction Designer title: 'nimble-{name} interaction design request' -labels: 'IxD,triage' +labels: 'interaction design,triage' --- +# ๐Ÿ‘ˆ Interaction Design Request + ## ๐Ÿ“Œ Request Background @@ -33,4 +35,4 @@ labels: 'IxD,triage' - [ ] Interaction Design Spec submitted (link) - [ ] Interaction Design Spec reviewed by design team -- [ ] Interaction Design Spec reviewed by dev team \ No newline at end of file +- [ ] Interaction Design Spec reviewed by dev team diff --git a/.github/ISSUE_TEMPLATE/new_component.md b/.github/ISSUE_TEMPLATE/new_component.md index 8157432874..302c431755 100644 --- a/.github/ISSUE_TEMPLATE/new_component.md +++ b/.github/ISSUE_TEMPLATE/new_component.md @@ -1,10 +1,12 @@ --- -name: ๐Ÿ’ก New component +name: ๐Ÿ’ก New Component about: (DEV TEAM ONLY) New Nimble component title: 'nimble-{name} Component' -labels: 'enhancement' +labels: 'new component,enhancement' --- +# ๐Ÿ’ก New Component + ## ๐Ÿ˜ฏ Problem to Solve @@ -18,8 +20,7 @@ labels: 'enhancement' ## ๐Ÿ“‹ Tasks - + - [ ] nimble-{name} interaction design issue - [ ] nimble-{name} interaction design spec diff --git a/.github/ISSUE_TEMPLATE/tech_debt.md b/.github/ISSUE_TEMPLATE/tech_debt.md index c096f9ac43..7a91d2645b 100644 --- a/.github/ISSUE_TEMPLATE/tech_debt.md +++ b/.github/ISSUE_TEMPLATE/tech_debt.md @@ -1,7 +1,8 @@ --- -name: ๐Ÿงน Tech debt +name: ๐Ÿงน Tech Debt about: (DEV TEAM ONLY) Non-user-visible improvement to code or development process title: '' labels: 'tech debt,triage' --- -## ๐Ÿงน Tech Debt + +# ๐Ÿงน Tech Debt diff --git a/.github/ISSUE_TEMPLATE/user_story.md b/.github/ISSUE_TEMPLATE/user_story.md index 9f969a1fa9..8325c8a436 100644 --- a/.github/ISSUE_TEMPLATE/user_story.md +++ b/.github/ISSUE_TEMPLATE/user_story.md @@ -6,4 +6,4 @@ title: '(Fully descriptive title)' -## ๐Ÿ“Œ User Story +# ๐Ÿ“Œ User Story diff --git a/.github/ISSUE_TEMPLATE/visual_design_user_story.md b/.github/ISSUE_TEMPLATE/visual_design_request.md similarity index 88% rename from .github/ISSUE_TEMPLATE/visual_design_user_story.md rename to .github/ISSUE_TEMPLATE/visual_design_request.md index ef1e4d5163..8954610f02 100644 --- a/.github/ISSUE_TEMPLATE/visual_design_user_story.md +++ b/.github/ISSUE_TEMPLATE/visual_design_request.md @@ -1,12 +1,14 @@ --- -name: ๐Ÿง‘โ€๐ŸŽจ Visual Design (ViD) User story +name: ๐ŸŽจ Visual Design Request about: (DEV TEAM ONLY) A small chunk of work to be done by Visual Designer title: 'nimble-{name} visual design request' -labels: 'ViD,triage' +labels: 'visual design,triage' --- +# ๐ŸŽจ Visual Design Request + ## ๐Ÿ“Œ Request Background @@ -33,4 +35,4 @@ labels: 'ViD,triage' - [ ] Visual Design Spec submitted (link) - [ ] Visual Design Spec reviewed by design team -- [ ] Visual Design Spec reviewed by dev team \ No newline at end of file +- [ ] Visual Design Spec reviewed by dev team From 5ed80484be42de1b04f77dae10ea4d4c5daa35a6 Mon Sep 17 00:00:00 2001 From: "renovate[bot]" <29139614+renovate[bot]@users.noreply.github.com> Date: Mon, 4 Mar 2024 23:42:27 -0600 Subject: [PATCH 08/10] Update github actions dependencies (major) (#1900) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [actions/checkout](https://togithub.com/actions/checkout) | action | major | `v3` -> `v4` | | [actions/deploy-pages](https://togithub.com/actions/deploy-pages) | action | major | `v1` -> `v4` | | [actions/setup-dotnet](https://togithub.com/actions/setup-dotnet) | action | major | `v3` -> `v4` | | [actions/setup-node](https://togithub.com/actions/setup-node) | action | major | `v3` -> `v4` | | [actions/upload-artifact](https://togithub.com/actions/upload-artifact) | action | major | `v3` -> `v4` | | [actions/upload-pages-artifact](https://togithub.com/actions/upload-pages-artifact) | action | major | `v1` -> `v3` | | [chromaui/action](https://togithub.com/chromaui/action) | action | major | `v1` -> `v11` | --- ### Release Notes
actions/checkout (actions/checkout) ### [`v4`](https://togithub.com/actions/checkout/blob/HEAD/CHANGELOG.md#v400) [Compare Source](https://togithub.com/actions/checkout/compare/v3...v4) - [Support fetching without the --progress option](https://togithub.com/actions/checkout/pull/1067) - [Update to node20](https://togithub.com/actions/checkout/pull/1436)
actions/deploy-pages (actions/deploy-pages) ### [`v4`](https://togithub.com/actions/deploy-pages/compare/v3...v4) [Compare Source](https://togithub.com/actions/deploy-pages/compare/v3...v4) ### [`v3`](https://togithub.com/actions/deploy-pages/compare/v2...v3) [Compare Source](https://togithub.com/actions/deploy-pages/compare/v2...v3) ### [`v2`](https://togithub.com/actions/deploy-pages/compare/v1...v2) [Compare Source](https://togithub.com/actions/deploy-pages/compare/v1...v2)
actions/setup-dotnet (actions/setup-dotnet) ### [`v4`](https://togithub.com/actions/setup-dotnet/compare/v3...v4) [Compare Source](https://togithub.com/actions/setup-dotnet/compare/v3...v4)
actions/setup-node (actions/setup-node) ### [`v4`](https://togithub.com/actions/setup-node/compare/v3...v4) [Compare Source](https://togithub.com/actions/setup-node/compare/v3...v4)
actions/upload-artifact (actions/upload-artifact) ### [`v4`](https://togithub.com/actions/upload-artifact/compare/v3...v4) [Compare Source](https://togithub.com/actions/upload-artifact/compare/v3...v4)
actions/upload-pages-artifact (actions/upload-pages-artifact) ### [`v3`](https://togithub.com/actions/upload-pages-artifact/compare/v2...v3) [Compare Source](https://togithub.com/actions/upload-pages-artifact/compare/v2...v3) ### [`v2`](https://togithub.com/actions/upload-pages-artifact/compare/v1...v2) [Compare Source](https://togithub.com/actions/upload-pages-artifact/compare/v1...v2)
chromaui/action (chromaui/action) ### [`v11`](https://togithub.com/chromaui/action/compare/v10...v11) [Compare Source](https://togithub.com/chromaui/action/compare/v10...v11) ### [`v10`](https://togithub.com/chromaui/action/compare/v9...v10) [Compare Source](https://togithub.com/chromaui/action/compare/v9...v10) ### [`v9`](https://togithub.com/chromaui/action/compare/v1...v9) [Compare Source](https://togithub.com/chromaui/action/compare/v1...v9)
--- ### Configuration ๐Ÿ“… **Schedule**: Branch creation - "monthly" (UTC), Automerge - At any time (no schedule defined). ๐Ÿšฆ **Automerge**: Disabled by config. Please merge this manually once you are satisfied. โ™ป **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox. ๐Ÿ‘ป **Immortal**: This PR will be recreated if closed unmerged. Get [config help](https://togithub.com/renovatebot/renovate/discussions) if that's undesired. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Mend Renovate](https://www.mend.io/free-developer-tools/renovate/). View repository job log [here](https://developer.mend.io/github/ni/nimble). Co-authored-by: renovate[bot] <29139614+renovate[bot]@users.noreply.github.com> --- .github/workflows/main.yml | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml index e5b3210cfd..6293471a17 100644 --- a/.github/workflows/main.yml +++ b/.github/workflows/main.yml @@ -26,7 +26,7 @@ jobs: build: runs-on: ubuntu-22.04 steps: - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 if: env.HAS_GITHUBPAGESDEPLOYTOKEN == 'true' with: # Required for beachball changelog detection @@ -35,19 +35,19 @@ jobs: # Cannot rely on GITHUB_TOKEN with workflow contents permission # See: https://github.com/orgs/community/discussions/40971 token: ${{ secrets.GITHUBPAGESDEPLOYTOKEN }} - - uses: actions/checkout@v3 + - uses: actions/checkout@v4 if: env.HAS_GITHUBPAGESDEPLOYTOKEN == 'false' with: # Required for beachball changelog detection fetch-depth: 0 # Install dependencies - - uses: actions/setup-dotnet@v3 + - uses: actions/setup-dotnet@v4 with: global-json-file: packages/nimble-blazor/global.json - run: dotnet --info working-directory: packages/nimble-blazor/ - - uses: actions/setup-node@v3 + - uses: actions/setup-node@v4 with: node-version: '20' registry-url: 'https://registry.npmjs.org' @@ -71,7 +71,7 @@ jobs: # Pack - run: npm run pack - - uses: actions/upload-artifact@v3 + - uses: actions/upload-artifact@v4 with: name: packages path: | @@ -83,14 +83,14 @@ jobs: # https://github.com/actions/upload-pages-artifact/issues/45 - name: Pages file permission workaround run: chmod -c -R +rX packages/site/dist - - uses: actions/upload-pages-artifact@v1 + - uses: actions/upload-pages-artifact@v3 with: path: 'packages/site/dist' # Publish to Chromatic (from any push) - name: Publish to Chromatic if: env.HAS_CHROMATIC_PROJECT_TOKEN == 'true' && github.event_name == 'push' - uses: chromaui/action@v1 + uses: chromaui/action@v11 with: projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} onlyChanged: "!startsWith(github.ref, 'refs/heads/main')" # Use TurboSnap for PR builds @@ -154,4 +154,4 @@ jobs: steps: - name: Deploy to GitHub Pages id: deployment - uses: actions/deploy-pages@v1 + uses: actions/deploy-pages@v4 From 3a75f1cc06b3c8967fa3e28d12a2bd6ddb4adf9c Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Tue, 5 Mar 2024 08:30:49 -0600 Subject: [PATCH 09/10] Fixed icon column width HLD update (#1878) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale HLD update for #1873 ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation N/A ## ๐Ÿงช Testing N/A ## โœ… Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --- ...-0d454896-3633-4eb0-bc2b-991ddac39fb3.json | 7 ++++++ .../table-column-mapping.md | 20 ++++++++++++++--- .../src/table/specs/table-column-width-hld.md | 22 +++++++++++++++++-- 3 files changed, 44 insertions(+), 5 deletions(-) create mode 100644 change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json diff --git a/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json b/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json new file mode 100644 index 0000000000..d01808e667 --- /dev/null +++ b/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Update Table Column Width HLD with details about non-resizable columns", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/nimble-components/src/table/specs/table-column-specs/table-column-mapping.md b/packages/nimble-components/src/table/specs/table-column-specs/table-column-mapping.md index 870e264976..c58c1e475e 100644 --- a/packages/nimble-components/src/table/specs/table-column-specs/table-column-mapping.md +++ b/packages/nimble-components/src/table/specs/table-column-specs/table-column-mapping.md @@ -102,11 +102,10 @@ _Props/Attrs_ - `field-name`: string - `key-type`: 'string' | 'number' | 'boolean' -- `pixel-width`: number (set to the desired fixed column width, else will use a default fixed width) _Content_ -- column title (text or icon) +- column title (icon) - 1 or more `nimble-mapping-icon` or `nimble-mapping-spinner` elements #### General mapping column element: @@ -259,7 +258,22 @@ For icons, if multiple values map to the same icon, it is possible that sorting ### Sizing -`nimble-table-column-icon` will support only a fixed width. We will introduce a new mixin for fixed-width support that exposes a `pixel-width` property. The default value will be the minimum supported by the table, which is still significantly larger than the width of an icon. +`nimble-table-column-icon` will be a fixed pixel size (32px) and will not be resizable. The 32px fixed size allows room from a single icon along with left and right cell padding of 8px each. + +This has the following implications: + +- The grouping indicator and sorting indicator will always be hidden on the icon column. +- A client is expected to only place an icon as the header content of an icon column. +- A user cannot resize an icon column. +- There will be no public API exposed on the icon column related to sizing. Unlike other columns today, the icon column will not have attributes for `min-pixel-width` or `fractional-width`. + +This will be accomplished through the following configuration on the column: + +- The icon column will not use the `mixinFractionalWidthColumnAPI` mixin because it will not expose a sizing API. +- The icon column will set `columnInternals.resizingDisabled` to `true`. +- The icon column will set both `columnInternals.pixelWidth` and `columnInternals.minPixelWidth` to `32`, which is equal to the icon size plus left and right paddings of 8px + +In the future, we can consider adding an API to allow the icon column to have its size configured by a user and/or client, but that is currently out of scope. `nimble-table-column-enum-text` will support fixed or fractional widths. If `pixel-width` is set, the column will have a fixed width, otherwise it defaults to a fractional width of 1. The client may configure `fractional-width` and/or `min-pixel-width`. diff --git a/packages/nimble-components/src/table/specs/table-column-width-hld.md b/packages/nimble-components/src/table/specs/table-column-width-hld.md index f102959b71..7fc2234251 100644 --- a/packages/nimble-components/src/table/specs/table-column-width-hld.md +++ b/packages/nimble-components/src/table/specs/table-column-width-hld.md @@ -82,6 +82,12 @@ ColumnInternals { @observable public minPixelWidth = defaultMinPixelWidth; + /** + * Whether or not this column can be interactively resized. + */ + @observable + public resizingDisabled = false; + ... } ``` @@ -150,11 +156,21 @@ At the moment there is no recognized use case for a pixel-width column that woul export class MyPixelWidthColumn : TableColumn<...> { public constructor() { super(); - this.columnInternals.currentPixelWidth = 100; + this.columnInternals.resizingDisabled = true; + this.columnInternals.pixelWidth = 100; + // Set the minPixelWidth of the column equal to the specified fixed pixel width so that + // the column won't be coerced to a larger size based on the default minimum width. + this.columnInternals.minPixelWidth = 100; } } ``` +#### Hiding Header Indicators On Narrow Columns + +In some cases a column may not have space in its header for the sorting indicator or grouping indicator. For example, the icon column will be fixed width with enough space to render only a single icon. Therefore, there will not be space for a sorting indicator or grouping indicator next to the column's header icon. + +In this case, the sorting indicator and grouping indicator will be hidden in the column header. This scenario will be determined by comparing the column's `minPixelWidth` with `defaultMinPixelWidth`. If the `minPixelWidth` of the column is less than `defaultMinPixelWidth`, then the sorting and grouping indicator will automatically be hidden in the header. + ### Implementation considerations [Prototype branch](https://github.com/ni/nimble/tree/column-width-prototype) ([Storybook](https://60e89457a987cf003efc0a5b-qheevxtkdu.chromatic.com/?path=/story/table--table)) @@ -176,7 +192,9 @@ Because we will allow a horizontal scrollbar once the right-most column reaches #### **Interactive visual states** -Consult the [design document](https://xd.adobe.com/view/5b476816-dad1-4671-b20a-efe796631c72-0e14/) for details on the column divider appearance states, as well as the cursor appearance while hovering over a divider. If a user hovers over a column that is not resizable, no dividers will be shown. +Consult the [design document](https://xd.adobe.com/view/5b476816-dad1-4671-b20a-efe796631c72-0e14/) for details on the column divider appearance states, as well as the cursor appearance while hovering over a divider. + +If a divider can never be dragged because only non-resizable columns exist to that column's left or right, the divider will be hidden. It is possible, however, for a column that is not resizable to have visible dividers if the column divider can be moved in a way such that other columns are resized. #### **Mobile considerations** From 2f1a774700c80a76915532776ef0b40156b9f996 Mon Sep 17 00:00:00 2001 From: rajsite Date: Tue, 5 Mar 2024 14:49:48 +0000 Subject: [PATCH 10/10] applying package updates [skip ci] --- ...ents-0d454896-3633-4eb0-bc2b-991ddac39fb3.json | 7 ------- packages/nimble-components/CHANGELOG.json | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 7 deletions(-) delete mode 100644 change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json diff --git a/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json b/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json deleted file mode 100644 index d01808e667..0000000000 --- a/change/@ni-nimble-components-0d454896-3633-4eb0-bc2b-991ddac39fb3.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Update Table Column Width HLD with details about non-resizable columns", - "packageName": "@ni/nimble-components", - "email": "20542556+mollykreis@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 42258e43f6..9cc4bd9cb6 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Tue, 05 Mar 2024 14:49:48 GMT", + "version": "21.8.2", + "tag": "@ni/nimble-components_v21.8.2", + "comments": { + "none": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "3a75f1cc06b3c8967fa3e28d12a2bd6ddb4adf9c", + "comment": "Update Table Column Width HLD with details about non-resizable columns" + } + ] + } + }, { "date": "Mon, 04 Mar 2024 19:02:52 GMT", "version": "21.8.2",