@keeper-security/keeper-js-ui 0.12.0 → 0.14.0

package/CHANGELOG.md

@@ -1,5 +1,39 @@
 # Changelog
 
+## [0.14.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.13.0...v0.14.0) (2025-09-05)
+
+
+### Features
+
+* add Checkbox component to the library ([#28](https://github.com/Keeper-Security/keeper-js-ui/issues/28)) ([3a8aed5](https://github.com/Keeper-Security/keeper-js-ui/commit/3a8aed5bf6d1dfd8fc67d2613cfe9b232f234ae9))
+* add Label component to the library ([#322](https://github.com/Keeper-Security/keeper-js-ui/issues/322)) ([2697e6a](https://github.com/Keeper-Security/keeper-js-ui/commit/2697e6a837a0c81da311a0d37295f71abf9b07a2))
+* **AvatarStatus:** create active/inactive status component ([#314](https://github.com/Keeper-Security/keeper-js-ui/issues/314)) ([a4565b2](https://github.com/Keeper-Security/keeper-js-ui/commit/a4565b2ceba5948f62c5e3e98187b2746cae7103))
+* **Box:** add position ([#290](https://github.com/Keeper-Security/keeper-js-ui/issues/290)) ([3b830bf](https://github.com/Keeper-Security/keeper-js-ui/commit/3b830bf77578fd11a46c9eba09e4eee1d26f5990)), closes [#286](https://github.com/Keeper-Security/keeper-js-ui/issues/286)
+* **Flex:** add position ([#291](https://github.com/Keeper-Security/keeper-js-ui/issues/291)) ([90b85cf](https://github.com/Keeper-Security/keeper-js-ui/commit/90b85cf09548713c5836875f855afd849c0878f8)), closes [#286](https://github.com/Keeper-Security/keeper-js-ui/issues/286)
+* **Icons:** massive library of icons ([#287](https://github.com/Keeper-Security/keeper-js-ui/issues/287)) ([bc7d528](https://github.com/Keeper-Security/keeper-js-ui/commit/bc7d5282ebacc7e86d41a2cf417d898e7ffdbd26))
+* **Loader:** optimized loading patterns for Button ([#283](https://github.com/Keeper-Security/keeper-js-ui/issues/283)) ([2d76d85](https://github.com/Keeper-Security/keeper-js-ui/commit/2d76d859d73a08c79c5c6babc4a609db1534c6d1))
+* **Popover:** remove arrow temporarily ([#316](https://github.com/Keeper-Security/keeper-js-ui/issues/316)) ([a751518](https://github.com/Keeper-Security/keeper-js-ui/commit/a751518fa521d0066c7f32d1ac57aa78b5a849a9)), closes [#315](https://github.com/Keeper-Security/keeper-js-ui/issues/315)
+* **TooltipContent:** set `side` prop back to `top` ([#312](https://github.com/Keeper-Security/keeper-js-ui/issues/312)) ([5679f74](https://github.com/Keeper-Security/keeper-js-ui/commit/5679f746814cdbd09188ee2a761385868f33583c)), closes [#311](https://github.com/Keeper-Security/keeper-js-ui/issues/311)
+* upgrade to Tailwind v4 ([#266](https://github.com/Keeper-Security/keeper-js-ui/issues/266)) ([023459e](https://github.com/Keeper-Security/keeper-js-ui/commit/023459e67651e6083437d59a5517bfbc9607887b))
+
+
+### Bug Fixes
+
+* **Button:** adjust outline variant secondary colors ([#279](https://github.com/Keeper-Security/keeper-js-ui/issues/279)) ([356926b](https://github.com/Keeper-Security/keeper-js-ui/commit/356926b1585d126b92b55a1215239e0666ff6b7b))
+* **colors:** update destructive color for dark mode  ([#318](https://github.com/Keeper-Security/keeper-js-ui/issues/318)) ([fea967f](https://github.com/Keeper-Security/keeper-js-ui/commit/fea967f963df519386a5eeb5d5846a8841ad70d1))
+
+## [0.13.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.12.0...v0.13.0) (2025-06-23)
+
+
+### Features
+
+* **Icons:** add missing icons to support BE Fill Tool ([#262](https://github.com/Keeper-Security/keeper-js-ui/issues/262)) ([509d9c1](https://github.com/Keeper-Security/keeper-js-ui/commit/509d9c1dbb2ae077b44ee80824a57af0118730b0))
+
+
+### Bug Fixes
+
+* **dark-mode:** tighten up styles to work regardless of inheritance ([#273](https://github.com/Keeper-Security/keeper-js-ui/issues/273)) ([be5e7eb](https://github.com/Keeper-Security/keeper-js-ui/commit/be5e7ebed74328d6d8e30a7a3a4b3f39e6eb8a9a))
+
 ## [0.12.0](https://github.com/Keeper-Security/keeper-js-ui/compare/v0.11.0...v0.12.0) (2025-06-03)
 
 

package/README.md

@@ -260,12 +260,10 @@ When you push a change up to Github, an [action will run](https://github.com/Kee
 You can leverage [Storybook tags](https://storybook.js.org/docs/writing-stories/tags) to skip or exclude stories from the test-runner. Tags can be applied at the file level via the `meta` object or to stories individually.
 
 - `skip-tests` is ideal for in-progress work.
-
   - It will **not** run the story as a test.
   - It will be reported as one of the skipped tests in the test results.
 
 - `no-tests` is ideal for stories that will never have any test value.
-
   - It will **not** run the story as a test.
   - It will **not** report individual stories as a skipped test. [^ignored-test-exception]
 
@@ -288,6 +286,85 @@ const meta = {
 } satisfies Meta<typeof Component>
 ```
 
+## External CSS Workarounds
+
+When an external project introduces CSS that unintentionally affects components—such as a generic `button` selector nested under a cascade of parent selectors—the [src/index.css](./src/index.css) file includes a section of utility classes designed to address specificity issues.
+
+### Goals of This Approach
+
+- Clearly identify which rules are affected.
+- Avoid widespread use of `!important` throughout the codebase.
+- Provide a clear path for removing a workaround when it's no longer needed.
+- Ensure the workaround is not accidentally removed.
+
+### Creating a Workaround
+
+1. Locate or Create a Utility Class
+
+   In [src/index.css](./src/index.css), look for an existing utility class referencing the external project (e.g., `be-fix` for `Browser Extension`). If none exists, create a new one using Tailwind’s `@utility` directive.
+
+2. Add the Overridden Selectors
+
+   Add the selectors and utility classes that are being overridden. Note that `:` must be escaped with a backslash.
+
+   ```diff
+   @utility be-fix {
+     /* ... Existing rules ... */
+
+   + &.ksjsui\:focus-visible\:outline-2 {
+   +   .be-selector-that-is-leaking-css & {
+   +     @apply ksjsui:focus-visible:outline-2!;
+   +   }
+   + }
+   }
+   ```
+
+3. Apply the Utility Class to the Component
+
+   The `be-fix` utility class should appear in IntelliSense like any other Tailwind utility class.
+
+   Group the affected classes together to make it clear what `be-fix` is fixing.
+
+   ```diff
+   <i
+     className={cn([
+       'ksjsui:relative ksjsui:px-3 ksjsui:outline-hidden',
+   -   'ksjsui:focus-visible:outline-2',
+   +   'ksjsui:be-fix ksjsui:focus-visible:outline-2',
+       className,
+     ])}
+   />
+   ```
+
+4. Track the Workaround in GitHub
+
+   [Create a Blank Github Issue](https://github.com/Keeper-Security/keeper-js-ui/issues/new/choose) in this repository to track the workaround.
+
+   Apply the `Task` type/label to it.
+
+   Include as much detail as possible. Think about what information “future you” would need to reproduce the issue (e.g., screenshots, code snippets from the external project, file names, account settings, browser versions, etc.).
+
+   Add a comment in the component referencing the GitHub issue:
+
+   ```diff
+   <i
+     className={cn(
+   +   /**
+   +    * @see https://github.com/Keeper-Security/keeper-js-ui/issues/275
+   +    */
+       'ksjsui:be-fix ksjsui:focus-visible:outline-2',
+     )}
+   />
+   ```
+
+5. Write Tests
+
+   Write tests to verify the workaround and ensure it isn’t accidentally removed in the future.
+
+6. Review Periodically
+
+   Periodically review whether the workaround is still necessary. If the external project no longer causes the issue, remove the workaround and close the GitHub issue.
+
 ## Committing Changes
 
 If you're familiar with [Conventional Commits](https://www.conventionalcommits.org/en/v1.0.0/#summary), feel free to commit using `git commit`.
@@ -442,8 +519,6 @@ This provides 100% customizable opportunities and 100% ownership. It also relies
 - [components.json](./components.json) => [shadcn/ui](https://ui.shadcn.com/docs/components-json)
 - [eslint.config.js](./eslint.config.js) => [ESLint](https://eslint.org/docs/latest/use/configure/)
 - [lint-staged.config.js](./lint-staged.config.js) => [Lint Staged](https://github.com/lint-staged/lint-staged?tab=readme-ov-file#configuration)
-- [postcss.config.js](./postcss.config.js) => [PostCSS](https://github.com/postcss/postcss#readme)
-- [tailwind.config.js](./tailwind.config.js) => [Tailwind CSS](https://tailwindcss.com/docs/configuration)
 - [tsconfig{.app,.node}.json](./tsconfig.json) => [TypeScript](https://www.typescriptlang.org/docs/handbook/tsconfig-json.html)
 - [vite.config.ts](./vite.config.ts) => [Vite](https://vitejs.dev/config/)
 - [vitest.workspace.ts](./vitest.workspace.ts) => [Vitest](https://vitest.dev/)