fix(modal & tabs): remove overflow property that causes unnecessary s…

…crollbars and update to Node 22 (#827)

* fix(modal): remove overflow property that causes unnecessary scrollbars

* fix(modal): update supported node version, yarn and docs

* fix(modal): fix node 22 import assertion syntax

* fix(modal): update changelog

* fix(tabs): update readme for node 22

.changeset/fresh-snakes-hope.md

@@ -0,0 +1,5 @@
+---
+'@ithaka/pharos': patch
+---
+
+Remove unnecessary scrollbars from modal and enable Node 22 support

.github/workflows/chromatic.yml

@@ -21,10 +21,10 @@ jobs:
         with:
           fetch-depth: 0
 
-      - name: Setup Node.js 20.x
+      - name: Setup Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path

.github/workflows/release.yml

@@ -18,10 +18,10 @@ jobs:
           # This makes Actions fetch all Git history so that Changesets can generate changelogs with the correct commits
           fetch-depth: 0
 
-      - name: Setup Node.js 20.x
+      - name: Setup Node.js 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
           registry-url: 'https://registry.npmjs.org'
 
       - name: Get yarn cache directory path

.github/workflows/size-limit.yml

@@ -13,10 +13,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Setup Node 20.x
+      - name: Setup Node 2.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.github/workflows/verify.yml

@@ -13,10 +13,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Setup Node 20.x
+      - name: Setup Node 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path
@@ -44,10 +44,10 @@ jobs:
     steps:
       - uses: actions/checkout@v4
 
-      - name: Setup Node 20.x
+      - name: Setup Node 22.x
         uses: actions/setup-node@v4
         with:
-          node-version: 20.x
+          node-version: 22.x
 
       - name: Get yarn cache directory path
         id: yarn-cache-dir-path

.nvmrc

@@ -1 +1 @@
-20
+22

.tool-versions

@@ -1 +1 @@
-nodejs 20.18.0
+nodejs 22.10.0

.yarnrc.yml

@@ -1,3 +1,3 @@
 nodeLinker: node-modules
 
-yarnPath: .yarn/releases/yarn-4.2.2.cjs
+yarnPath: .yarn/releases/yarn-4.5.1.cjs

docs/development/quick-start.md

@@ -18,7 +18,10 @@ Start by cloning the Pharos repository:
 $ git clone [email protected]:ithaka/pharos.git
 ```
 
-Pharos supports the current long-term support (LTS) version of Node.js—currently version 20. Node can be installed from [its website](https://nodejs.org/en/), with [nvm](https://github.com/nvm-sh/nvm#install--update-script), or with [asdf](https://asdf-vm.com/) and its [Node.js plugin](https://github.com/asdf-vm/asdf-nodejs).
+Pharos is committed to supporting the current long-term support (LTS) version of Node.js.
+Refer to [.tool-versions](../../.tool-versions) for the latest node version compatible with Pharos.
+Node can be installed from [its website](https://nodejs.org/en/), with [nvm](https://github.com/nvm-sh/nvm#install--update-script),
+or with [asdf](https://asdf-vm.com/) and its [Node.js plugin](https://github.com/asdf-vm/asdf-nodejs).
 
 If you're using `nvm`, run the following command to switch to a Node version compatible with the project:
 

package.json

@@ -124,5 +124,5 @@
       "path": "packages/pharos/lib/index.js"
     }
   ],
-  "packageManager": "yarn@4.2.2"
+  "packageManager": "yarn@4.5.1"
 }

packages/pharos/scripts/build-react.js

@@ -1,7 +1,7 @@
 import * as fs from 'fs/promises';
 import path from 'path';
 import { globbyStream } from 'globby';
-import customElementsManifest from '../custom-elements.json' assert { type: 'json' };
+import customElementsManifest from '../custom-elements.json' with { type: 'json' };
 import prettier from 'prettier';
 
 const REACT_PROP_TYPE = 'DetailedHTMLProps<HTMLAttributes<HTMLElement>, HTMLElement>';

packages/pharos/src/components/modal/pharos-modal.scss

@@ -95,7 +95,6 @@
   flex-direction: column;
   height: 100%;
   pointer-events: auto;
-  overflow-y: scroll;
   background-color: var(--pharos-modal-color-background-content);
   background-clip: padding-box;
   border-radius: var(--pharos-radius-base-standard);

packages/pharos/src/components/tabs/pharos-tabs.scss

@@ -29,7 +29,7 @@
 
 .tab__list {
   display: flex;
-  overflow-x: scroll;
+  overflow-x: auto;
   scroll-behavior: smooth;
   margin-bottom: var(--pharos-spacing-one-half-x);
   padding: var(--pharos-spacing-one-quarter-x) var(--pharos-spacing-one-quarter-x)

packages/pharos/style-dictionary.config.js

@@ -1,4 +1,4 @@
-import icons from './tokens/assets/icons.json' assert { type: 'json' };
+import icons from './tokens/assets/icons.json' with { type: 'json' };
 
 export default {
   source: ['tokens/**/*.json'],

yarn.lock

@@ -24700,11 +24700,11 @@ __metadata:
 
 "typescript@patch:typescript@npm%3A^5.6.3#optional!builtin<compat/typescript>":
   version: 5.6.3
-  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=b45daf"
+  resolution: "typescript@patch:typescript@npm%3A5.6.3#optional!builtin<compat/typescript>::version=5.6.3&hash=8c6c40"
   bin:
     tsc: bin/tsc
     tsserver: bin/tsserver
-  checksum: 10c0/ac8307bb06bbfd08ae7137da740769b7d8c3ee5943188743bb622c621f8ad61d244767480f90fbd840277fbf152d8932aa20c33f867dea1bb5e79b187ca1a92f
+  checksum: 10c0/7c9d2e07c81226d60435939618c91ec2ff0b75fbfa106eec3430f0fcf93a584bc6c73176676f532d78c3594fe28a54b36eb40b3d75593071a7ec91301533ace7
   languageName: node
   linkType: hard