Add tiny margin to input so that the focus highlight is visible by default (#96)

* Add tiny margin to input so that the focus highlight is visible by default

* Fix CI

* Fix missing playwright deps

* Update snapshots

---------

Co-authored-by: Frédéric Collonval <[email protected]>

Author: fcollonval

.github/workflows/build.yml

@@ -17,17 +17,17 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install node
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
       - name: Install Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: 'x64'
 
       - name: Setup pip cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: ~/.cache/pip
           key: pip-3.10-${{ hashFiles('package.json') }}
@@ -39,7 +39,7 @@ jobs:
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -56,7 +56,9 @@ jobs:
           jlpm run lint:check
           python -m pip install .
 
-          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*OK"
+          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*enabled"
+
+          npx playwright install-deps
           python -m jupyterlab.browser_check
 
           pip install build
@@ -65,7 +67,7 @@ jobs:
           pip uninstall -y jupyter_ui_demo jupyterlab
           rm -rf myextension
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         with:
           name: myextension-sdist
           path: myextension.tar.gz
@@ -78,11 +80,11 @@ jobs:
       - name: Checkout
         uses: actions/checkout@v4
       - name: Install Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: '3.10'
           architecture: 'x64'
-      - uses: actions/download-artifact@v3
+      - uses: actions/download-artifact@v4
         with:
           name: myextension-sdist
       - name: Install and Test
@@ -93,5 +95,5 @@ jobs:
           sudo rm -rf $(which node)
           pip install myextension.tar.gz
           pip install jupyterlab
-          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*OK"
+          jupyter labextension list 2>&1 | grep -ie "jupyter-ui-demo.*enabled"
           python -m jupyterlab.browser_check --no-browser-test

.github/workflows/check-release.yml

@@ -27,7 +27,7 @@ jobs:
           token: ${{ secrets.GITHUB_TOKEN }}
 
       - name: Upload Distributions
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         with:
           name: jupyter_ui_demo-releaser-dist-${{ github.run_number }}
           path: .jupyter_releaser_checkout/dist

.github/workflows/ci.yml

@@ -19,15 +19,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v2
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -50,15 +50,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -83,15 +83,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -113,15 +113,15 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node 💾
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "::set-output name=dir::$(yarn cache dir)"
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}

.github/workflows/docs-cd.yml

@@ -33,7 +33,7 @@ jobs:
         working-directory: packages/components
 
       - name: Setup Pages
-        uses: actions/configure-pages@v4
+        uses: actions/configure-pages@v5
 
       - name: Upload artifact
         uses: actions/upload-pages-artifact@v3

.github/workflows/visual-test.yml

@@ -24,14 +24,14 @@ jobs:
       - name: Setup Node 💾
         uses: actions/setup-node@v3
         with:
-          node-version: '18'
+          node-version: '20'
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
         run: echo "dir=$(yarn config get cacheFolder)" >> $GITHUB_OUTPUT
 
       - name: Setup yarn cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         id: yarn-cache # use this to check for `cache-hit` (`steps.yarn-cache.outputs.cache-hit != 'true'`)
         with:
           path: ${{ steps.yarn-cache-dir-path.outputs.dir }}
@@ -45,7 +45,7 @@ jobs:
         run: yarn install
 
       - name: Set up browser cache
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             ${{ github.workspace }}/pw-browsers
@@ -66,7 +66,7 @@ jobs:
           yarn run test:visual -u
         working-directory: packages/components
 
-      - uses: actions/upload-artifact@v3
+      - uses: actions/upload-artifact@v4
         if: ${{ failure() }}
         with:
           name: jupyter-ui-test

packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-chromium-linux.png

@@ -41,6 +41,8 @@ export const BaseFieldStyles = css`
     font-family: ${bodyFont};
     outline: none;
     user-select: none;
+    /* Ensure to display focus highlight */
+    margin: calc((${focusStrokeWidth} - ${strokeWidth}) * 1px);
   }
 
   .root {
@@ -75,6 +77,10 @@ export const BaseFieldStyles = css`
     line-height: ${typeRampBaseLineHeight};
   }
 
+  .control:placeholder-shown {
+    text-overflow: ellipsis;
+  }
+
   .control:hover,
   .control:${focusVisible},
   .control:disabled,

packages/components/src/number-field/number-field.test.ts-snapshots/number-field-with-max-length-firefox-linux.png

@@ -80,14 +80,6 @@
   "styleModule": "style/index.js",
   "jupyterlab": {
     "extension": true,
-    "outputDir": "../../jupyter_ui_demo/labextension",
-    "sharedPackages": {
-      "@jupyter/react-components": {
-        "singleton": true
-      },
-      "@jupyter/web-components": {
-        "singleton": true
-      }
-    }
+    "outputDir": "../../jupyter_ui_demo/labextension"
   }
 }