bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2026-02-24 08:33:29 +00:00
Code Issues Releases Wiki Activity

use client abstraction pattern; add settings toggle; use observable instead of signal due to state provider

Browse Source
This commit is contained in:
William Martin
2024-11-13 12:53:40 -05:00
parent ac4c12e077
commit 4840288640
13 changed files with 106 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
libs/components/src/index.ts
View File

@@ -30,7 +30,7 @@ export * from "./radio-button";
export * from "./search";
export * from "./section";
export * from "./select";
export * from "./shared/design-system.service";
export * from "./shared/compact-mode.service";
export * from "./table";
export * from "./tabs";
export * from "./toast";

11
libs/components/src/shared/compact-mode.service.ts Normal file
View File

@@ -0,0 +1,11 @@
import { Observable } from "rxjs";
/** Global config for the Bitwarden Design System */
export abstract class CompactModeService {
/**
* When true, enables "compact mode".
*
* Component authors can also hook into compact mode with the `bit-compact:` Tailwind variant.
**/
enabled$: Observable<boolean>;
}

20
libs/components/src/shared/design-system.service.ts
View File

@@ -1,20 +0,0 @@
import { effect, Injectable, signal, WritableSignal } from "@angular/core";
/** Global config for the Bitwarden Design System */
@Injectable({ providedIn: "root" })
export class DesignSystemService {
/**
* When true, enables "compact mode".
*
* Component authors can hook into compact mode with the `bit-compact:` Tailwind variant.
**/
compactMode: WritableSignal<boolean> = signal(false);
constructor() {
effect(() => {
this.compactMode()
? document.body.classList.add("tw-bit-compact")
: document.body.classList.remove("tw-bit-compact");
});
}
}

4
libs/components/src/stories/compact-mode.mdx
View File

@@ -31,8 +31,8 @@ following example, the paragraph's padding is reduced when compact mode is enabl
## Service
To get/set compact mode in TypeScript, the `DesignSystemService` exposes a `compactMode` signal.
However, using the Tailwind variant should be preferred as it is more performant.
To get/set compact mode in TypeScript, the `CompactModeService` exposes a `enabled$` observable.
However, styling with the Tailwind variant should be used when possible as it is more performant.
## Examples