bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-15 15:53:27 +00:00
Code Issues Releases Wiki Activity

feat(anon-layout): [Auth/PM-17737] AnonLayout - Consolidate and extend max width control (#15362)

Browse Source 
* PM-17737 - feat(anon-layout-width) - consolidate width setting to control title, subtitle, and content together for a unified UX. Removes all titleAreaMaxWidth usages and the titleAreaMaxWidth property entirely.

* PM-17737 - AnonLayout - consolidate stories into playground (w/ the exception of default icon story b/c I can't figure how to omit the icon conditionally).

* PM-17737 - AnonLayoutStories - show secondary content by default

* PM-17737 - Per PR feedback, adjust maxWidthClass logic to remove string concatenation as it can result in tailwind classes not being compiled and available at run time.

* PM-17737 - Per PR feedback, refactor stories to use configuration to generate all the scenarios so we can still track them via snapshots

* PM-17737 - Fix anon layout mdx reference

* PM-17737 - Make AnonLayoutMaxWidths singular

* PM-17737 - When inside of a max width container, the icon container needs explicit width to be able to scale viewbox icons that don't have defined heights / widths
This commit is contained in:
Jared Snider
2025-06-30 13:47:31 -04:00
committed by GitHub
parent ea5224da25
commit 64eb9b56d7
7 changed files with 198 additions and 202 deletions
Download Patch File Download Diff File Expand all files Collapse all files

31
libs/components/src/anon-layout/anon-layout.component.ts
View File

@@ -14,6 +14,8 @@ import { BitwardenLogo, BitwardenShield } from "../icon/icons";
import { SharedModule } from "../shared";
import { TypographyModule } from "../typography";
export type AnonLayoutMaxWidth = "md" | "lg" | "xl" | "2xl" | "3xl";
@Component({
selector: "auth-anon-layout",
templateUrl: "./anon-layout.component.html",
@@ -36,27 +38,35 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
@Input() hideCardWrapper: boolean = false;
/**
* Max width of the title area content
*
* @default null
*/
@Input() titleAreaMaxWidth?: "md";
/**
* Max width of the layout content
* Max width of the anon layout title, subtitle, and content areas.
*
* @default 'md'
*/
@Input() maxWidth: "md" | "3xl" = "md";
@Input() maxWidth: AnonLayoutMaxWidth = "md";
protected logo = BitwardenLogo;
protected year = "2024";
protected year: string;
protected clientType: ClientType;
protected hostname: string;
protected version: string;
protected hideYearAndVersion = false;
get maxWidthClass(): string {
switch (this.maxWidth) {
case "md":
return "tw-max-w-md";
case "lg":
return "tw-max-w-lg";
case "xl":
return "tw-max-w-xl";
case "2xl":
return "tw-max-w-2xl";
case "3xl":
return "tw-max-w-3xl";
}
}
constructor(
private environmentService: EnvironmentService,
private platformUtilsService: PlatformUtilsService,
@@ -68,7 +78,6 @@ export class AnonLayoutComponent implements OnInit, OnChanges {
async ngOnInit() {
this.maxWidth = this.maxWidth ?? "md";
this.titleAreaMaxWidth = this.titleAreaMaxWidth ?? null;
this.hostname = (await firstValueFrom(this.environmentService.environment$)).getHostname();
this.version = await this.platformUtilsService.getApplicationVersion();