From 45fa07c89b43e27abb4a7077ae8c1745dc85bd37 Mon Sep 17 00:00:00 2001
From: Daniel Riera <driera@livefront.com>
Date: Fri, 28 Feb 2025 14:21:27 -0500
Subject: [PATCH] PM-18522 Adjust Confirmation UI text to accommodate
 truncating (#13639)

* PM-18522 adjust styling

* add text to action button

* address type errors and fix storybook
---
 .../lit-stories/notification/footer.lit-stories.ts        | 6 ++++++
 .../components/lit-stories/rows/button-row.lit-stories.ts | 3 +++
 .../components/notification/confirmation-message.ts       | 1 -
 .../content/components/notification/confirmation.ts       | 1 -
 .../autofill/content/components/notification/container.ts | 1 +
 .../autofill/content/components/notification/footer.ts    | 8 +++++---
 .../src/autofill/content/components/rows/button-row.ts    | 4 +++-
 7 files changed, 18 insertions(+), 6 deletions(-)

diff --git a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts
index b03aeeae311..5ad0a5a2aca 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/notification/footer.lit-stories.ts
@@ -9,6 +9,7 @@ type Args = {
   notificationType: NotificationType;
   theme: Theme;
   handleSaveAction: (e: Event) => void;
+  i18n: { [key: string]: string };
 };
 
 export default {
@@ -23,6 +24,11 @@ export default {
   args: {
     theme: ThemeTypes.Light,
     notificationType: "add",
+    i18n: {
+      saveAsNewLoginAction: "Save as New Login",
+      saveAction: "Save",
+    },
+    handleSaveAction: () => alert("Save action triggered"),
   },
   parameters: {
     design: {
diff --git a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts
index ffef4751627..7f833f2a1f6 100644
--- a/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts
+++ b/apps/browser/src/autofill/content/components/lit-stories/rows/button-row.lit-stories.ts
@@ -7,15 +7,18 @@ import { ButtonRow } from "../../rows/button-row";
 type Args = {
   theme: Theme;
   buttonAction: (e: Event) => void;
+  buttonText: string;
 };
 
 export default {
   title: "Components/Rows/Button Row",
   argTypes: {
     theme: { control: "select", options: [...Object.values(ThemeTypes)] },
+    buttonText: { control: "text" },
   },
   args: {
     theme: ThemeTypes.Light,
+    buttonText: "Action",
   },
 } as Meta<Args>;
 
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation-message.ts b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts
index 745899481dd..d6f7ba3024d 100644
--- a/apps/browser/src/autofill/content/components/notification/confirmation-message.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation-message.ts
@@ -35,7 +35,6 @@ const baseTextStyles = css`
   text-align: left;
   text-overflow: ellipsis;
   line-height: 24px;
-  white-space: nowrap;
   font-family: "DM Sans", sans-serif;
   font-size: 16px;
 `;
diff --git a/apps/browser/src/autofill/content/components/notification/confirmation.ts b/apps/browser/src/autofill/content/components/notification/confirmation.ts
index 13d6c970731..8c213a7663f 100644
--- a/apps/browser/src/autofill/content/components/notification/confirmation.ts
+++ b/apps/browser/src/autofill/content/components/notification/confirmation.ts
@@ -56,5 +56,4 @@ const notificationConfirmationBodyStyles = ({ theme }: { theme: Theme }) => css`
   justify-content: flex-start;
   background-color: ${themes[theme].background.alt};
   padding: 12px;
-  white-space: nowrap;
 `;
diff --git a/apps/browser/src/autofill/content/components/notification/container.ts b/apps/browser/src/autofill/content/components/notification/container.ts
index 1cdde3ec3ed..f98ef795749 100644
--- a/apps/browser/src/autofill/content/components/notification/container.ts
+++ b/apps/browser/src/autofill/content/components/notification/container.ts
@@ -58,6 +58,7 @@ export function NotificationContainer({
         handleSaveAction,
         theme,
         notificationType: type,
+        i18n,
       })}
     </div>
   `;
diff --git a/apps/browser/src/autofill/content/components/notification/footer.ts b/apps/browser/src/autofill/content/components/notification/footer.ts
index edc6d6f6e00..6de4a333dfe 100644
--- a/apps/browser/src/autofill/content/components/notification/footer.ts
+++ b/apps/browser/src/autofill/content/components/notification/footer.ts
@@ -15,14 +15,16 @@ export function NotificationFooter({
   handleSaveAction,
   notificationType,
   theme,
+  i18n,
 }: {
   handleSaveAction: (e: Event) => void;
+  i18n: { [key: string]: string };
   notificationType?: NotificationType;
   theme: Theme;
 }) {
   const isChangeNotification = notificationType === NotificationTypes.Change;
-  // @TODO localize
-  const saveNewItemText = "Save as new login";
+  const saveNewItemText = i18n.saveAsNewLoginAction;
+  const buttonText = i18n.saveAction;
 
   return html`
     <div class=${notificationFooterStyles({ theme })}>
@@ -32,7 +34,7 @@ export function NotificationFooter({
             handleAction: handleSaveAction,
             theme,
           })
-        : ButtonRow({ theme, buttonAction: handleSaveAction })}
+        : ButtonRow({ theme, buttonAction: handleSaveAction, buttonText })}
     </div>
   `;
 }
diff --git a/apps/browser/src/autofill/content/components/rows/button-row.ts b/apps/browser/src/autofill/content/components/rows/button-row.ts
index 942c8dd55fe..1feef016a81 100644
--- a/apps/browser/src/autofill/content/components/rows/button-row.ts
+++ b/apps/browser/src/autofill/content/components/rows/button-row.ts
@@ -11,16 +11,18 @@ import { DropdownMenu } from "../dropdown-menu";
 export function ButtonRow({
   theme,
   buttonAction,
+  buttonText,
 }: {
   theme: Theme;
   buttonAction: (e: Event) => void;
+  buttonText: string;
 }) {
   return html`
     <div class=${buttonRowStyles}>
       ${[
         ActionButton({
           buttonAction: buttonAction,
-          buttonText: "Action Button",
+          buttonText,
           theme,
         }),
         DropdownContainer({