From 738df45f38eaeb9f561eb53b72d618a5479e90c0 Mon Sep 17 00:00:00 2001 From: Oscar Hinton Date: Mon, 5 Jan 2026 11:07:37 +0100 Subject: [PATCH 1/9] Add input for forcing active state on group & disable toggle (#18043) --- .../src/navigation/nav-group.component.html | 1 + .../src/navigation/nav-group.component.ts | 8 +++++++- .../src/navigation/nav-group.stories.ts | 20 +++++++++++++++++++ 3 files changed, 28 insertions(+), 1 deletion(-) diff --git a/libs/components/src/navigation/nav-group.component.html b/libs/components/src/navigation/nav-group.component.html index a5cb1d5a6b9..1790fea179a 100644 --- a/libs/components/src/navigation/nav-group.component.html +++ b/libs/components/src/navigation/nav-group.component.html @@ -14,6 +14,7 @@ [ariaLabel]="ariaLabel()" [hideActiveStyles]="parentHideActiveStyles()" [ariaCurrentWhenActive]="ariaCurrent()" + [forceActiveStyles]="forceActiveStyles()" > - + + + `, imports: [ButtonModule, LayoutComponent], @@ -63,13 +67,29 @@ class StoryDialogComponent { }, }); } + + openSmallDrawer() { + this.dialogService.openDrawer(SmallDrawerContentComponent, { + data: { + animal: "panda", + }, + }); + } + + openLargeDrawer() { + this.dialogService.openDrawer(LargeDrawerContentComponent, { + data: { + animal: "panda", + }, + }); + } } // FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush // eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection @Component({ template: ` - + Dialog body text goes here.
@@ -100,7 +120,6 @@ class StoryDialogContentComponent { template: ` Dialog body text goes here. @@ -125,6 +144,64 @@ class NonDismissableContentComponent { } } +// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush +// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection +@Component({ + template: ` + + + Dialog body text goes here. +
+ Animal: {{ animal }} + + + + + + + `, + imports: [DialogModule, ButtonModule], +}) +class SmallDrawerContentComponent { + dialogRef = inject(DialogRef); + private data = inject(DIALOG_DATA); + + get animal() { + return this.data?.animal; + } +} + +// FIXME(https://bitwarden.atlassian.net/browse/CL-764): Migrate to OnPush +// eslint-disable-next-line @angular-eslint/prefer-on-push-component-change-detection +@Component({ + template: ` + + + Dialog body text goes here. +
+ Animal: {{ animal }} + + + + + + + `, + imports: [DialogModule, ButtonModule], +}) +class LargeDrawerContentComponent { + dialogRef = inject(DialogRef); + private data = inject(DIALOG_DATA); + + get animal() { + return this.data?.animal; + } +} + export default { title: "Component Library/Dialogs/Service", component: StoryDialogComponent, @@ -206,3 +283,21 @@ export const Drawer: Story = { await userEvent.click(button); }, }; + +export const DrawerSmall: Story = { + play: async (context) => { + const canvas = context.canvasElement; + + const button = getAllByRole(canvas, "button")[3]; + await userEvent.click(button); + }, +}; + +export const DrawerLarge: Story = { + play: async (context) => { + const canvas = context.canvasElement; + + const button = getAllByRole(canvas, "button")[4]; + await userEvent.click(button); + }, +}; diff --git a/libs/components/src/dialog/dialog/dialog.component.html b/libs/components/src/dialog/dialog/dialog.component.html index 22aa99c44cb..58364dfd045 100644 --- a/libs/components/src/dialog/dialog/dialog.component.html +++ b/libs/components/src/dialog/dialog/dialog.component.html @@ -2,7 +2,7 @@
("default"); + readonly dialogSize = input("default"); /** * Title to show in the dialog's header @@ -100,21 +114,31 @@ export class DialogComponent { private readonly animationCompleted = signal(false); + protected readonly width = computed(() => { + const size = this.dialogSize() ?? "default"; + const isDrawer = this.dialogRef?.isDrawer; + + if (isDrawer) { + return drawerSizeToWidth[size]; + } + + return dialogSizeToWidth[size]; + }); + protected readonly classes = computed(() => { // `tw-max-h-[90vh]` is needed to prevent dialogs from overlapping the desktop header const baseClasses = ["tw-flex", "tw-flex-col", "tw-w-screen"]; - const sizeClasses = this.dialogRef?.isDrawer - ? ["tw-h-full", "md:tw-w-[23rem]"] - : ["md:tw-p-4", "tw-w-screen", "tw-max-h-[90vh]"]; + const sizeClasses = this.dialogRef?.isDrawer ? ["tw-h-full"] : ["md:tw-p-4", "tw-max-h-[90vh]"]; + const size = this.dialogSize() ?? "default"; const animationClasses = this.disableAnimations() || this.animationCompleted() || this.dialogRef?.isDrawer ? [] - : this.dialogSize() === "small" + : size === "small" ? ["tw-animate-slide-down"] : ["tw-animate-slide-up", "md:tw-animate-slide-down"]; - return [...baseClasses, this.width, ...sizeClasses, ...animationClasses]; + return [...baseClasses, this.width(), ...sizeClasses, ...animationClasses]; }); handleEsc(event: Event) { @@ -124,20 +148,6 @@ export class DialogComponent { } } - get width() { - switch (this.dialogSize()) { - case "small": { - return "md:tw-max-w-sm"; - } - case "large": { - return "md:tw-max-w-3xl"; - } - default: { - return "md:tw-max-w-xl"; - } - } - } - onAnimationEnd() { this.animationCompleted.set(true); } From cf285abd3d2a69229e38e13903e68e14f2d5bffd Mon Sep 17 00:00:00 2001 From: Isaac Ivins Date: Mon, 5 Jan 2026 09:37:24 -0500 Subject: [PATCH 8/9] Feature/pm 25865 migrate send list desktop migration (#18008) This PR moves the Desktop Send list UI into a shared library component and updates the Desktop Send v2 component to use modern Angular patterns (Signals, OnPush, no manual subscriptions) --- .../app/tools/send-v2/send-v2.component.html | 154 +++---- .../tools/send-v2/send-v2.component.spec.ts | 310 +++----------- .../app/tools/send-v2/send-v2.component.ts | 386 +++++++++--------- apps/desktop/src/locales/en/messages.json | 14 + apps/desktop/src/scss/migration.scss | 14 + libs/tools/send/send-ui/src/index.ts | 2 + .../new-send-dropdown-v2.component.html | 19 + .../new-send-dropdown-v2.component.spec.ts | 261 ++++++++++++ .../new-send-dropdown-v2.component.ts | 59 +++ .../src/send-list/send-list.component.html | 31 ++ .../src/send-list/send-list.component.spec.ts | 89 ++++ .../src/send-list/send-list.component.ts | 105 +++++ 12 files changed, 902 insertions(+), 542 deletions(-) create mode 100644 libs/tools/send/send-ui/src/new-send-dropdown-v2/new-send-dropdown-v2.component.html create mode 100644 libs/tools/send/send-ui/src/new-send-dropdown-v2/new-send-dropdown-v2.component.spec.ts create mode 100644 libs/tools/send/send-ui/src/new-send-dropdown-v2/new-send-dropdown-v2.component.ts create mode 100644 libs/tools/send/send-ui/src/send-list/send-list.component.html create mode 100644 libs/tools/send/send-ui/src/send-list/send-list.component.spec.ts create mode 100644 libs/tools/send/send-ui/src/send-list/send-list.component.ts diff --git a/apps/desktop/src/app/tools/send-v2/send-v2.component.html b/apps/desktop/src/app/tools/send-v2/send-v2.component.html index 20cac15138a..659e4be9c5b 100644 --- a/apps/desktop/src/app/tools/send-v2/send-v2.component.html +++ b/apps/desktop/src/app/tools/send-v2/send-v2.component.html @@ -1,110 +1,64 @@
-
+
-
- + +
+

{{ "send" | i18n }}

+ @if (!disableSend()) { + + }
-
- - - -

{{ "noItemsInList" | i18n }}

- -
-
- + +
- -