bitwarden/browser
1
0
Fork 0
mirror of https://github.com/bitwarden/browser synced 2025-12-20 02:03:39 +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

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

@@ -10,7 +10,7 @@ import { Translation } from "../dialog";
import { Icon } from "../icon";
import { AnonLayoutWrapperDataService } from "./anon-layout-wrapper-data.service";
import { AnonLayoutComponent } from "./anon-layout.component";
import { AnonLayoutComponent, AnonLayoutMaxWidth } from "./anon-layout.component";
export interface AnonLayoutWrapperData {
/**
@@ -36,11 +36,7 @@ export interface AnonLayoutWrapperData {
/**
* Optional flag to set the max-width of the page. Defaults to 'md' if not provided.
*/
maxWidth?: "md" | "3xl";
/**
* Optional flag to set the max-width of the title area. Defaults to null if not provided.
*/
titleAreaMaxWidth?: "md";
maxWidth?: AnonLayoutMaxWidth;
/**
* Hide the card that wraps the default content. Defaults to false.
*/
@@ -58,8 +54,7 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
protected pageSubtitle: string;
protected pageIcon: Icon;
protected showReadonlyHostname: boolean;
protected maxWidth: "md" | "3xl";
protected titleAreaMaxWidth: "md";
protected maxWidth: AnonLayoutMaxWidth;
protected hideCardWrapper: boolean;
constructor(
@@ -111,7 +106,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
this.showReadonlyHostname = Boolean(firstChildRouteData["showReadonlyHostname"]);
this.maxWidth = firstChildRouteData["maxWidth"];
this.titleAreaMaxWidth = firstChildRouteData["titleAreaMaxWidth"];
this.hideCardWrapper = Boolean(firstChildRouteData["hideCardWrapper"]);
}
@@ -174,7 +168,6 @@ export class AnonLayoutWrapperComponent implements OnInit, OnDestroy {
this.pageIcon = null;
this.showReadonlyHostname = null;
this.maxWidth = null;
this.titleAreaMaxWidth = null;
this.hideCardWrapper = null;
}