Merge branch 'main' into tooltip-spec

ni · Jun 14, 2022 · cf73edd · cf73edd
2 parents 15075a5 + 34452e5
commit cf73edd
Show file tree

Hide file tree

Showing 12 changed files with 217 additions and 123 deletions.
diff --git 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, 13 Jun 2022 22:34:57 GMT",
+      "tag": "@ni/nimble-angular_v7.0.2",
+      "version": "7.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "beachball",
+            "package": "@ni/nimble-angular",
+            "comment": "Bump @ni/nimble-components to v11.0.2",
+            "commit": "c930471568477d0b665ce9039cd13a73511b5c8e"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 07 Jun 2022 15:43:41 GMT",
       "tag": "@ni/nimble-angular_v7.0.1",

diff --git 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 Tue, 07 Jun 2022 15:43:41 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Jun 2022 22:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 7.0.2
+
+Mon, 13 Jun 2022 22:34:57 GMT
+
+### Patches
+
+- Bump @ni/nimble-components to v11.0.2
+
 ## 7.0.1
 
 Tue, 07 Jun 2022 15:43:41 GMT

diff --git 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": "7.0.1",
+  "version": "7.0.2",
   "description": "Angular components for the NI Nimble Design System",
   "scripts": {
     "invoke-publish": "cd ../../../ && npm run build:library && cd dist/ni/nimble-angular && npm publish"
@@ -22,7 +22,7 @@
     "@angular/core": "^12.1.0",
     "@angular/forms": "^12.1.0",
     "@angular/router": "^12.1.0",
-    "@ni/nimble-components": "^11.0.1"
+    "@ni/nimble-components": "^11.0.2"
   },
   "dependencies": {
     "tslib": "^2.2.0"

diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/nimble-blazor/package.json b/packages/nimble-blazor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-blazor",
-  "version": "5.0.1",
+  "version": "5.0.2",
   "description": "Blazor components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build:release && npm run build:client",

diff --git a/packages/nimble-components/CHANGELOG.json b/packages/nimble-components/CHANGELOG.json
@@ -1,6 +1,36 @@
 {
   "name": "@ni/nimble-components",
   "entries": [
+    {
+      "date": "Mon, 13 Jun 2022 22:34:57 GMT",
+      "tag": "@ni/nimble-components_v11.0.2",
+      "version": "11.0.2",
+      "comments": {
+        "patch": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "c930471568477d0b665ce9039cd13a73511b5c8e",
+            "comment": "Text/Number fields hover indicator grows from middle"
+          }
+        ]
+      }
+    },
+    {
+      "date": "Wed, 08 Jun 2022 18:11:53 GMT",
+      "tag": "@ni/nimble-components_v11.0.1",
+      "version": "11.0.1",
+      "comments": {
+        "none": [
+          {
+            "author": "[email protected]",
+            "package": "@ni/nimble-components",
+            "commit": "d928589a70a2c14d2845ac81863c6f6f56eade1c",
+            "comment": "Change test to use IntersectionObserver"
+          }
+        ]
+      }
+    },
     {
       "date": "Tue, 07 Jun 2022 15:43:41 GMT",
       "tag": "@ni/nimble-components_v11.0.1",

diff --git 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 Tue, 07 Jun 2022 15:43:41 GMT and should not be manually modified.
+This log was last generated on Mon, 13 Jun 2022 22:34:57 GMT and should not be manually modified.
 
 <!-- Start content -->
 
+## 11.0.2
+
+Mon, 13 Jun 2022 22:34:57 GMT
+
+### Patches
+
+- Text/Number fields hover indicator grows from middle ([ni/nimble@c930471](https://github.com/ni/nimble/commit/c930471568477d0b665ce9039cd13a73511b5c8e))
+
 ## 11.0.1
 
 Tue, 07 Jun 2022 15:43:41 GMT

diff --git a/packages/nimble-components/package.json b/packages/nimble-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@ni/nimble-components",
-  "version": "11.0.1",
+  "version": "11.0.2",
   "description": "Styled web components for the NI Nimble Design System",
   "scripts": {
     "build": "npm run generate-icons && npm run build-components && npm run bundle-components && npm run generate-scss && npm run build-storybook",

diff --git a/packages/nimble-components/src/number-field/styles.ts b/packages/nimble-components/src/number-field/styles.ts
@@ -14,7 +14,9 @@ import {
     controlLabelFontColor,
     labelHeight,
     smallDelay,
-    bodyFont
+    bodyFont,
+    failColor,
+    standardPadding
 } from '../theme-provider/design-tokens';
 
 export const styles = css`
@@ -26,51 +28,90 @@ export const styles = css`
         user-select: none;
         color: ${bodyFontColor};
         height: calc(${labelHeight} + ${controlHeight});
+        --ni-private-hover-indicator-width: calc(${borderWidth} + 1px);
     }
 
     :host([disabled]) {
         color: ${bodyDisabledFontColor};
         cursor: default;
     }
 
+    .label {
+        display: flex;
+        color: ${controlLabelFontColor};
+        font: ${controlLabelFont};
+    }
+
     .root {
         box-sizing: border-box;
         position: relative;
         display: flex;
         flex-direction: row;
+        justify-content: center;
         border-radius: 0px;
         border-bottom: ${borderWidth} solid rgba(${borderRgbPartialColor}, 0.3);
-        padding-bottom: 1px;
-        transition: border-bottom ${smallDelay}, padding-bottom ${smallDelay};
+        gap: calc(${standardPadding} / 2);
+    }
+
+    .root:focus-within {
+        border-bottom-color: ${borderHoverColor};
+    }
+
+    :host([disabled]) .root,
+    :host([disabled]) .root:hover {
+        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
+    }
+
+    .root::before {
+        ${/* Empty string causes alignment issue */ ''}
+        content: ' ';
+        color: transparent;
+        width: 0px;
+        user-select: none;
+    }
+
+    .root::after {
+        content: '';
+        position: absolute;
+        bottom: calc(-1 * ${borderWidth});
+        width: 0px;
+        height: 0px;
+        border-bottom: ${borderHoverColor}
+            var(--ni-private-hover-indicator-width) solid;
+        transition: width ${smallDelay} ease-in;
     }
 
     @media (prefers-reduced-motion) {
-        .root {
+        .root::after {
             transition-duration: 0s;
         }
     }
 
-    .root:hover {
-        border-bottom: 2px solid ${borderHoverColor};
-        padding-bottom: 0px;
+    :host(.invalid) .root::after {
+        border-bottom-color: ${failColor};
     }
 
-    :host([disabled]) .root,
-    :host([disabled]) .root:hover {
-        border-bottom: ${borderWidth} solid ${bodyDisabledFontColor};
-        padding-bottom: 1px;
+    :host(:hover) .root::after {
+        width: 100%;
+    }
+
+    :host([disabled]:hover) .root::after {
+        width: 0px;
+    }
+
+    [part='start'] {
+        display: contents;
     }
 
     .control {
         -webkit-appearance: none;
         font: inherit;
         background: transparent;
         color: inherit;
-        height: 28px;
+        height: calc(${controlHeight} - ${borderWidth});
         width: 100%;
-        margin-top: auto;
-        margin-bottom: auto;
         border: none;
+        padding: 0px;
     }
 
     .control:hover,
@@ -97,12 +138,6 @@ export const styles = css`
         color: ${bodyDisabledFontColor};
     }
 
-    .label {
-        display: flex;
-        color: ${controlLabelFontColor};
-        font: ${controlLabelFont};
-    }
-
     .controls {
         display: flex;
         flex-direction: column;

diff --git a/packages/nimble-components/src/select/tests/select.spec.ts b/packages/nimble-components/src/select/tests/select.spec.ts
@@ -24,6 +24,33 @@ async function setup(
     return fixture<Select>(viewTemplate);
 }
 
+async function clickAndWaitForOpen(select: Select): Promise<void> {
+    select.click();
+    // Takes two updates for listbox to be rendered
+    await DOM.nextUpdate();
+    await DOM.nextUpdate();
+}
+
+async function checkFullyInViewport(element: HTMLElement): Promise<boolean> {
+    return new Promise((resolve, _reject) => {
+        const intersectionObserver = new IntersectionObserver(
+            entries => {
+                intersectionObserver.disconnect();
+                if (
+                    entries[0]?.isIntersecting
+                    && entries[0].intersectionRatio === 1.0
+                ) {
+                    resolve(true);
+                } else {
+                    resolve(false);
+                }
+            },
+            { threshold: 1.0 }
+        );
+        intersectionObserver.observe(element);
+    });
+}
+
 describe('Select', () => {
     it('should respect value set before connect is completed', async () => {
         const { element, connect, disconnect } = await setup();
@@ -86,26 +113,18 @@ describe('Select', () => {
             const { element, connect, disconnect } = await setup500Options();
             await connect();
             const listbox: HTMLElement = element.shadowRoot!.querySelector('.listbox')!;
-
-            element.click();
-            await DOM.nextUpdate();
+            await clickAndWaitForOpen(element);
+            // The test is run in an iframe, and the containing window has a Karma header.
+            // It seems the window is sized without accounting for the header, so a header-height's
+            // worth of content is scrolled out of view. The approach we take with the
+            // IntersectionObserver only works if the full iframe is visible, so we scroll the
+            // containing window to the bottom (i.e. scrolling the Karma header out of view and
+            // the bottom of the iframe into view).
+            window.parent.scrollTo(0, window.parent.document.body.scrollHeight);
+            const fullyVisible = await checkFullyInViewport(listbox);
 
             expect(listbox.scrollHeight).toBeGreaterThan(window.innerHeight);
-
-            // listbox will pop up either above or below the element, depending on which has
-            // more space (the element is placed at a random vertical position within the window)
-            const listboxPadding = 4;
-            const controlPlusGapHeight = element.offsetHeight + listboxPadding;
-            const totalEmptyVerticalSpace = window.innerHeight - controlPlusGapHeight;
-            const largestEmptyVerticalSpan = element.offsetTop < totalEmptyVerticalSpace / 2
-                ? window.innerHeight
-                      - element.offsetTop
-                      - controlPlusGapHeight
-                : element.offsetTop - listboxPadding;
-
-            expect(listbox.offsetHeight).toBeLessThanOrEqual(
-                largestEmptyVerticalSpan
-            );
+            expect(fullyVisible).toBe(true);
 
             await disconnect();
         });