@keeper-security/keeper-js-ui 0.25.1 → 0.26.0

package/CHANGELOG.md

@@ -1,5 +1,29 @@
 # Changelog
 
+## [0.26.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.2...v0.26.0) (2026-06-09)
+
+
+### Features
+
+* **Box:** accept any element type via `as` ([#588](https://github.com/Keeper-Security/keeper-js-ui/issues/588)) ([72d2881](https://github.com/Keeper-Security/keeper-js-ui/commit/72d2881e44fba7aa517b15154fbe316834ebf928))
+* **Icon:** add AppWindow2XIcon to library ([#587](https://github.com/Keeper-Security/keeper-js-ui/issues/587)) ([7316bc4](https://github.com/Keeper-Security/keeper-js-ui/commit/7316bc4503b1be3a2d94543baea87c50ce25ad47))
+* **Typography:** deprecate "default" size, add "md" alias ([#573](https://github.com/Keeper-Security/keeper-js-ui/issues/573)) ([c760368](https://github.com/Keeper-Security/keeper-js-ui/commit/c760368d7d887bd1ac083d1fb7e87bdbf13a0b7a))
+
+
+### Bug Fixes
+
+* **Button:** apply consistent 8px padding across all sizes ([#590](https://github.com/Keeper-Security/keeper-js-ui/issues/590)) ([c948488](https://github.com/Keeper-Security/keeper-js-ui/commit/c94848827ce24a0b8cd478bc6039de23cf77989f)), closes [#589](https://github.com/Keeper-Security/keeper-js-ui/issues/589)
+* **deps:** move react/react-dom from dependencies to devDependencies ([f5c047b](https://github.com/Keeper-Security/keeper-js-ui/commit/f5c047b8683a18ee0411daded706b55e70d0dc11)), closes [#594](https://github.com/Keeper-Security/keeper-js-ui/issues/594)
+
+## [0.25.2](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.1...v0.25.2) (2026-05-18)
+
+
+### Bug Fixes
+
+* **Icon:** distinguish between brand and logo icons ([#562](https://github.com/Keeper-Security/keeper-js-ui/issues/562)) ([ecf7e75](https://github.com/Keeper-Security/keeper-js-ui/commit/ecf7e75c8e44cef580e95ca1cd03986dc49db3fb))
+* **Icon:** include Typography color mapping ([#557](https://github.com/Keeper-Security/keeper-js-ui/issues/557)) ([7e11965](https://github.com/Keeper-Security/keeper-js-ui/commit/7e11965e71060d9aae5191081fb4ff197d62ac6a))
+* **Input:** adjust IconButton alignments ([#564](https://github.com/Keeper-Security/keeper-js-ui/issues/564)) ([890882a](https://github.com/Keeper-Security/keeper-js-ui/commit/890882a716032a1c4d89df03dc618da9f0dc2730)), closes [#563](https://github.com/Keeper-Security/keeper-js-ui/issues/563)
+
 ## [0.25.1](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.25.0...v0.25.1) (2026-05-13)
 
 

package/README.md

@@ -6,12 +6,10 @@ _React components built for accessibility, consistency, and speed._
 
 - Terminal of your choice.
 - [git](https://github.com/git-guides/install-git) - Type `git -v` into your terminal to verify.
-- [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify.
-
-## Recommendations
-
-- [nvm](https://github.com/nvm-sh/nvm) - Manage multiple versions of node/npm. Type `nvm -v` into your terminal to verify.
-- [VS Code](https://code.visualstudio.com/) - Popular code editor with a healthy ecosystem of [extensions](https://marketplace.visualstudio.com/VSCode)/plugins.
+- [Node.js v24](https://nodejs.org/en/download/package-manager) - Type `node -v` into your terminal to verify. **Recommendation**: use [nvm](https://github.com/nvm-sh/nvm) to install and manage different versions of Node.
+- [pnpm v11.4.0](https://pnpm.io/installation) - Type `pnpm -v` to verify. **Recommendation**: use [Corepack](https://pnpm.io/installation#using-corepack) that comes bundled with Node since `v16.13`:
+  1. `corepack enable pnpm`
+  2. `corepack prepare --activate`
 
 ## Getting Started
 
@@ -20,13 +18,13 @@ Git clone or [download](https://github.com/Keeper-Security/keeper-js-ui/archive/
 Open a terminal from the root of the project and run:
 
 ```sh
-npm ci
+pnpm ci
 ```
 
 Views are rendered via [Storybook](https://storybook.js.org/). To see components in action and start making edits, simply run:
 
 ```sh
-npm run storybook
+pnpm storybook
 ```
 
 `ctrl + c` to stop the server.
@@ -45,7 +43,7 @@ The [src/](./src/) folder holds all component-related code.
 - [src/hooks](./src/hooks/): React-specific [hooks](https://react.dev/reference/react/hooks).
 - [src/lib/](./src/lib/): Internal utility/helper functions.
 
-With [Storybook](https://storybook.js.org/) running (`npm run storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
+With [Storybook](https://storybook.js.org/) running (`pnpm storybook`), most edits are shown immediately upon saving without the need for browser refreshes or server restarts. Exceptions would be changes to infrastructure code like edits to Storybook itself.
 
 ### Creating a Story
 
@@ -218,15 +216,28 @@ and allow enough time for migration before removal.
    export { MyNewExampleIcon } from '@/icons/my-new-example'
    ```
 
+### Icon Naming Conventions
+
+- All files are located in `/src/icons`.
+- All publicly available icons must be added to `/src/icons/index.ts`.
+- A **logo** icon represents a company.
+  - Filename: `*-logo.tsx`.
+  - All logo icons must be be able to inherit the `currentColor` or define a semantic color.
+  - A logo icon should include `logo` in its `alias` array.
+- A **brand** icon represents a company and preserves brand color.
+  - Filename: `*-brand.tsx`.
+  - All brand icons must not change their color in any way. Using `color` should cause a TS error.
+  - A brand icon should include `brand` and `logo` in its `alias` array.
+
 ## Testing
 
-The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `npm test`.
+The [Vitest addon](https://storybook.js.org/docs/writing-tests/integrations/vitest-addon) will run smoke tests and unit tests with the command: `pnpm test`.
 
 ### Smoke Tests
 
 Also known as confidence testing or sanity testing, smoke testing is the practice of testing the most important functionality of a system or feature. In this case, we use them to also check if any code changes have broken components in obvious ways. This automated process would be the equivalent of manually clicking on each story and verifying that it loaded without errors.
 
-There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `npm test` is ran.
+There is no additional code you need to write after creating a new story. Stories will get picked up automatically and tested whenever `pnpm test` is ran.
 
 When you push a change up to Github, an [action will run](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/storybook-tests.yml) these tests and give you feedback to the outcome.
 
@@ -356,7 +367,7 @@ These standards are enforced with the help of [commitlint](https://commitlint.js
 If you're not comfortable with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary) and you're ready to commit your **staged changes**, you can run:
 
 ```sh
-npm run commit
+pnpm commit
 ```
 
 [czhgit](https://github.com/Zhengqbbb/cz-git) will prompt a series of questions and format your answers per the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/#specification):
@@ -415,16 +426,16 @@ Occassionally, a PR might be created when a security patch is available from one
 > It's always a good idea to `git pull` and `git checkout` that branch locally to run some smoke tests before merging.
 
 ```
-npm ci && npm run build && npm start
+pnpm ci && pnpm build && pnpm start
 ```
 
-If you want to take an additional step to smoke test, you can run `npm test` in a new terminal while `npm start` is still running.
+If you want to take an additional step to smoke test, you can run `pnpm test` in a new terminal while `pnpm start` is still running.
 
 ### Release PRs
 
 Whenever a PR is merged into the `main` branch, a [Release Github Action](https://github.com/Keeper-Security/keeper-js-ui/actions/workflows/release-please.yml) is automatically triggered to parse through the git history for certain keywords.
 
-Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `package-lock.json`, and `CHANGELOG.md`.
+Based on the existence of these keywords, a new PR may be created automatically with updates to `package.json`, `pnpm-lock.yaml`, and `CHANGELOG.md`.
 
 Once that PR is merged into `main`, a release tag is created. See [Publishing an NPM Package](#publishing-an-npm-package) for more info.
 
@@ -492,7 +503,6 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
 
 - [.czrc](./.czrc) => [cz-git](https://github.com/Zhengqbbb/cz-git#readme)
 - [.husky/\*](./.husky/) => [Husky](https://typicode.github.io/husky/how-to.html)
-- [.nvmrc](./.nvmrc) => [nvm](https://github.com/nvm-sh/nvm#readme)
 - [prettier.config.js](./prettier.config.js) => [Prettier](https://prettier.io/docs/en/configuration.html)
 - [.storybook/\*](./.storybook/) => [Storybook](https://storybook.js.org/docs/get-started/setup)
 - [commitlint.config.mjs](./commitlint.config.mjs) => [commitlint](https://commitlint.js.org/reference/configuration.html)
@@ -507,7 +517,7 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
 To create a production-ready build, you can run:
 
 ```sh
-npm run build
+pnpm build
 ```
 
 This process inspects the [src/index.ts](./src/index.ts) file and pulls in only the necessary code. Packages listed under [package.json's](./package.json) `peerDependencies` will be ignored and left to the external implementations to install separately. This avoids redundancy and keeps file sizes down.
@@ -523,13 +533,13 @@ A `dist` folder will be created at the root of the project. This folder is ignor
 
 Before publishing, you want to make sure that external projects have access to expected components and intellisense/autocomplete still works.
 
-[npm link](https://docs.npmjs.com/cli/v9/commands/npm-link) can be flakey, so the alternative would be run [npm pack](https://docs.npmjs.com/cli/v9/commands/npm-pack) to create a local \*.tgz file in the library and install that file into the external project importing the library.
+The recommended approach is to run [pnpm pack](https://pnpm.io/cli/pack) to create a local \*.tgz file in the library and install that file into the external project importing the library.
 
 0. (Optional): Update the library's `package.json` version number, **_but don't commit it_**. This step is automated with the correct next version number.
 1. From the library, run:
 
 ```sh
-npm run build && npm pack
+pnpm build && pnpm pack
 ```
 
 2. Copy the name and location of the new `*.tgz` file that was created at the root of the library.
@@ -544,10 +554,10 @@ npm run build && npm pack
 5. From the external project, run:
 
 ```sh
-npm install
+pnpm install
 ```
 
-6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `package-lock.json`. **_Do not commit them into your external project._**
+6. After testing for component behavior and availability, as well as intellisense/autocomplete and TypeScript prop validation, undo your package reference changes to `package.json` & `pnpm-lock.yaml`. **_Do not commit them into your external project._**
 
 ## Publishing an NPM Package