From 755823b11215aa2a2c48f296546d0cb8acf6f64c Mon Sep 17 00:00:00 2001 From: m-akinc <7282195+m-akinc@users.noreply.github.com> Date: Wed, 20 Mar 2024 19:13:17 -0500 Subject: [PATCH 1/4] Small change to design token naming scheme (#1947) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ## ๐Ÿคจ Rationale I encountered a couple design tokens with names that felt inconsistent: `buttonFillActivePrimaryColor` `buttonFillAccentActiveColor` It seemed like the appearance variant ("accent" or "primary") should be in the same relative position within the name, but our naming convention dictated these names instead. ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation Treat common state descriptors ("active", "disabled", "hover", and "selected") as a separate category of name segment than other distinguishing descriptors (like "accent" and "primary"). So instead of our old structure: `[element]-[part]-[state]-[token_type]` we now have: `[element]-[part]-[state]-[variant]-[token_type]` Luckily, the only existing token that violates this updated naming scheme is `buttonFillAccentActiveColor` (which should instead be `buttonFillActiveAccentColor`) and that token is being removed in [another PR](https://github.com/ni/nimble/pull/1934). ## ๐Ÿงช Testing N/A ## โœ… Checklist - [x] I have updated the project documentation to reflect my changes or determined no changes are needed. --------- Co-authored-by: Milan Raj --- ...le-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json | 7 +++++++ packages/nimble-components/CONTRIBUTING.md | 7 ++++--- 2 files changed, 11 insertions(+), 3 deletions(-) create mode 100644 change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json diff --git a/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json b/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json new file mode 100644 index 0000000000..1a72346f40 --- /dev/null +++ b/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Small change to design token naming scheme", + "packageName": "@ni/nimble-components", + "email": "7282195+m-akinc@users.noreply.github.com", + "dependentChangeType": "none" +} diff --git a/packages/nimble-components/CONTRIBUTING.md b/packages/nimble-components/CONTRIBUTING.md index 607712adff..8366356817 100644 --- a/packages/nimble-components/CONTRIBUTING.md +++ b/packages/nimble-components/CONTRIBUTING.md @@ -490,12 +490,13 @@ To modify the generated tokens, complete these steps: Public names for theme-aware tokens are specified in `src/theme-provider/design-token-names.ts`. Use the following structure when creating new tokens. -`[element]-[part]-[state]-[token_type]` +`[element]-[part]-[interaction_states]-[remaining_states]-[token_type]` 1. Where **element** is the type to which the token applies (e.g. 'application', 'body', or 'title-plus-1'). 2. Where **part** is the specific part of the element to which the token applies (e.g. 'border', 'background', or shadow). -3. Where **state** is the more specific state descriptor (e.g. 'selected' or 'disabled'). Multiple states should be sorted alphabetically. -4. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size'). +3. Where **interaction_states** is one or more interaction states (e.g. 'active', 'disabled', 'hover', or 'selected'). Multiple values should be sorted alphabetically. +4. Where **remaining_states** the remaining, non-interaction states (e.g. 'accent', 'primary, or 'large'). Multiple values should be sorted alphabetically. +5. Where **token_type** is the token category (e.g. 'color', 'font', 'font-color', 'height', 'width', or 'size'). ### Size ramp From 9c16eb3e4337d67898ef7cc7c5ec745a1dd696f6 Mon Sep 17 00:00:00 2001 From: rajsite Date: Thu, 21 Mar 2024 00:31:13 +0000 Subject: [PATCH 2/4] applying package updates [skip ci] --- ...ents-6a977921-7b82-4c0c-936b-fb4e855c103e.json | 7 ------- packages/nimble-components/CHANGELOG.json | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 7 deletions(-) delete mode 100644 change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json diff --git a/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json b/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json deleted file mode 100644 index 1a72346f40..0000000000 --- a/change/@ni-nimble-components-6a977921-7b82-4c0c-936b-fb4e855c103e.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Small change to design token naming scheme", - "packageName": "@ni/nimble-components", - "email": "7282195+m-akinc@users.noreply.github.com", - "dependentChangeType": "none" -} diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json index 8b2a7bfc67..7c3c87ef3a 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Thu, 21 Mar 2024 00:31:13 GMT", + "version": "22.1.1", + "tag": "@ni/nimble-components_v22.1.1", + "comments": { + "none": [ + { + "author": "7282195+m-akinc@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "755823b11215aa2a2c48f296546d0cb8acf6f64c", + "comment": "Small change to design token naming scheme" + } + ] + } + }, { "date": "Wed, 20 Mar 2024 16:45:59 GMT", "version": "22.1.1", From 7e52ce24569e94af5282b4b77f34608211cf74c9 Mon Sep 17 00:00:00 2001 From: mollykreis <20542556+mollykreis@users.noreply.github.com> Date: Thu, 21 Mar 2024 11:08:18 -0500 Subject: [PATCH 3/4] Fix sizing test in WebKit (#1954) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit # Pull Request ## ๐Ÿคจ Rationale Resolves #1939 ## ๐Ÿ‘ฉโ€๐Ÿ’ป Implementation I updated the test to use sizes that cause the columns to be whole numbers to avoid rounding precision issues as was previously seen. Additionally, the fractional widths now compute to values without repeating decimals, which contributes to the final widths being more consistent across browsers. ## ๐Ÿงช Testing Ran `npm run test-chrome && npm run test-firefox && npm run test-webkit` with the test at hand focused and verified that the test passes in all three browsers ## โœ… Checklist - [ ] I have updated the project documentation to reflect my changes or determined no changes are needed. --- ...nts-f0730b00-2a69-4d06-8241-d97c34bf98b1.json | 7 +++++++ .../src/table/tests/table-column-sizing.spec.ts | 16 +++++++++------- 2 files changed, 16 insertions(+), 7 deletions(-) create mode 100644 change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json diff --git a/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json b/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json new file mode 100644 index 0000000000..177079b66d --- /dev/null +++ b/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json @@ -0,0 +1,7 @@ +{ + "type": "none", + "comment": "Fix column sizing test to pass in webkit", + "packageName": "@ni/nimble-components", + "email": "20542556+mollykreis@users.noreply.github.com", + "dependentChangeType": "none" +} 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 56012c72c5..3b32cfa666 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 @@ -495,16 +495,18 @@ describe('Table Interactive Column Sizing', () => { expect(pageObject.isHorizontalScrollbarVisible()).toBeTrue(); }); - // WebKit skipped, see https://github.com/ni/nimble/issues/1939 - it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths #SkipWebkit', async () => { - // create horizontal scrollbar with total column width of 450 - pageObject.dragSizeColumnByRightDivider(2, [100]); + it('sizing table with a horizontal scrollbar does not change column widths until sized beyond current column pixel widths', async () => { + // Create a horizontal scrollbar with a total column width of 500. This updates the columns' + // current fractional widths to 0.8, 0.8, 2, and 0.4, which keeps the columns widths as + // integers when the table is resized later in the test. Otherwise, different browsers + // may have slightly different rounding behaviors. + pageObject.dragSizeColumnByRightDivider(2, [150]); // size table below threshhold of total column widths await pageObject.sizeTableToGivenRowWidth(425, element); - expect(pageObject.getTotalCellRenderedWidth()).toBe(450); - // size table 50 pixels beyond total column widths - await pageObject.sizeTableToGivenRowWidth(500, element); expect(pageObject.getTotalCellRenderedWidth()).toBe(500); + // size table 100 pixels beyond total column widths + await pageObject.sizeTableToGivenRowWidth(600, element); + expect(pageObject.getTotalCellRenderedWidth()).toBe(600); expect(pageObject.isHorizontalScrollbarVisible()).toBeFalse(); }); From ab05b69d516175867402d8399015e38cfe078209 Mon Sep 17 00:00:00 2001 From: rajsite Date: Thu, 21 Mar 2024 16:25:39 +0000 Subject: [PATCH 4/4] applying package updates [skip ci] --- ...ents-f0730b00-2a69-4d06-8241-d97c34bf98b1.json | 7 ------- packages/nimble-components/CHANGELOG.json | 15 +++++++++++++++ 2 files changed, 15 insertions(+), 7 deletions(-) delete mode 100644 change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json diff --git a/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json b/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json deleted file mode 100644 index 177079b66d..0000000000 --- a/change/@ni-nimble-components-f0730b00-2a69-4d06-8241-d97c34bf98b1.json +++ /dev/null @@ -1,7 +0,0 @@ -{ - "type": "none", - "comment": "Fix column sizing test to pass in webkit", - "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 7c3c87ef3a..bfdac4cd9d 100644 --- a/packages/nimble-components/CHANGELOG.json +++ b/packages/nimble-components/CHANGELOG.json @@ -1,6 +1,21 @@ { "name": "@ni/nimble-components", "entries": [ + { + "date": "Thu, 21 Mar 2024 16:25:39 GMT", + "version": "22.1.1", + "tag": "@ni/nimble-components_v22.1.1", + "comments": { + "none": [ + { + "author": "20542556+mollykreis@users.noreply.github.com", + "package": "@ni/nimble-components", + "commit": "7e52ce24569e94af5282b4b77f34608211cf74c9", + "comment": "Fix column sizing test to pass in webkit" + } + ] + } + }, { "date": "Thu, 21 Mar 2024 00:31:13 GMT", "version": "22.1.1",