Merge branch 'main' into users/fvisser/body-plus-1-font-token

packages/nimble-components/CHANGELOG.json

@@ -1,6 +1,36 @@
 {
   "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": "[email protected]",
+            "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",
+      "tag": "@ni/nimble-components_v22.1.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[email protected]",
+            "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",

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
 

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();
         });