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

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: {

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>;
 

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;
 `;

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;
 `;

apps/browser/src/autofill/content/components/notification/container.ts

@@ -58,6 +58,7 @@ export function NotificationContainer({
         handleSaveAction,
         theme,
         notificationType: type,
+        i18n,
       })}
     </div>
   `;

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 = i18n.saveAsNewLoginAction;
-  const saveNewItemText = "Save as new login";
+  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>
   `;
 }

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({