From e6e6058f9e6ec0488dffeff80eec715b725febb5 Mon Sep 17 00:00:00 2001
From: Danielle Flinn <43477473+danielleflinn@users.noreply.github.com>
Date: Tue, 25 Feb 2025 13:55:21 -0800
Subject: [PATCH] CL-261: update popover styles and fix stories (#13547)

* updated popover styles and fix stories

* fixed alignment of icon button title and added long title story
---
 .../src/popover/popover.component.html        |  8 +--
 .../src/popover/popover.component.ts          |  3 +-
 .../components/src/popover/popover.stories.ts | 50 +++++++++++++------
 3 files changed, 43 insertions(+), 18 deletions(-)

diff --git a/libs/components/src/popover/popover.component.html b/libs/components/src/popover/popover.component.html
index 8da3b002031..cb0681822d0 100644
--- a/libs/components/src/popover/popover.component.html
+++ b/libs/components/src/popover/popover.component.html
@@ -1,11 +1,11 @@
 <ng-template>
   <section cdkTrapFocus cdkTrapFocusAutoCapture class="tw-relative" role="dialog" aria-modal="true">
-    <div class="tw-overflow-hidden tw-rounded-md tw-border tw-border-solid tw-border-secondary-300">
+    <div class="tw-overflow-hidden tw-rounded-xl tw-border tw-border-solid tw-border-secondary-300">
       <div
         class="tw-relative tw-z-20 tw-w-72 tw-break-words tw-bg-background tw-pb-4 tw-pt-2 tw-text-main"
       >
         <div class="tw-mb-1 tw-mr-2 tw-flex tw-items-start tw-justify-between tw-gap-4 tw-pl-4">
-          <h2 class="tw-mb-0 tw-mt-1 tw-text-base tw-font-semibold">
+          <h2 bitTypography="h5" class="tw-mt-1 tw-font-semibold">
             {{ title }}
           </h2>
           <button
@@ -14,9 +14,11 @@
             [attr.title]="'close' | i18n"
             [attr.aria-label]="'close' | i18n"
             (click)="closed.emit()"
+            size="small"
+            class="tw-mt-0.5"
           ></button>
         </div>
-        <div class="tw-px-4">
+        <div bitTypography="body2" class="tw-px-4">
           <ng-content></ng-content>
         </div>
       </div>
diff --git a/libs/components/src/popover/popover.component.ts b/libs/components/src/popover/popover.component.ts
index 6ef81858f2f..e0ff4cf33d4 100644
--- a/libs/components/src/popover/popover.component.ts
+++ b/libs/components/src/popover/popover.component.ts
@@ -5,11 +5,12 @@ import { Component, EventEmitter, Input, Output, TemplateRef, ViewChild } from "
 
 import { IconButtonModule } from "../icon-button/icon-button.module";
 import { SharedModule } from "../shared/shared.module";
+import { TypographyModule } from "../typography";
 
 @Component({
   standalone: true,
   selector: "bit-popover",
-  imports: [A11yModule, IconButtonModule, SharedModule],
+  imports: [A11yModule, IconButtonModule, SharedModule, TypographyModule],
   templateUrl: "./popover.component.html",
   exportAs: "popoverComponent",
 })
diff --git a/libs/components/src/popover/popover.stories.ts b/libs/components/src/popover/popover.stories.ts
index fca4d659607..8e276afa0c4 100644
--- a/libs/components/src/popover/popover.stories.ts
+++ b/libs/components/src/popover/popover.stories.ts
@@ -75,7 +75,7 @@ export const Default: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32">
+      <div class="tw-mt-56">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -112,11 +112,33 @@ export const Open: Story = {
   }),
 };
 
+export const OpenLongTitle: Story = {
+  render: (args) => ({
+    props: args,
+    template: `
+      <bit-popover [title]="'Example Title that is really long it wraps 2 lines'" #myPopover="popoverComponent">
+        <div>Lorem ipsum dolor <a href="#">adipisicing elit</a>.</div>
+        <ul class="tw-mt-2 tw-mb-0 tw-pl-4">
+          <li>Dolor sit amet consectetur</li>
+          <li>Esse labore veniam tempora</li>
+          <li>Adipisicing elit ipsum <a href="#">iustolaborum</a></li>
+        </ul>
+      </bit-popover>
+
+      <div class="tw-h-40">
+        <div class="cdk-overlay-pane bit-popover-right bit-popover-right-start">
+          <ng-container *ngTemplateOutlet="myPopover.templateRef"></ng-container>
+        </div>
+      </div>
+      `,
+  }),
+};
+
 export const InitiallyOpen: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32">
+      <div class="tw-mt-56">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -142,7 +164,7 @@ export const RightStart: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32">
+      <div class="tw-mt-56">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -165,7 +187,7 @@ export const RightCenter: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32">
+      <div class="tw-mt-56">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -188,7 +210,7 @@ export const RightEnd: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32">
+      <div class="tw-mt-56">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -211,7 +233,7 @@ export const LeftStart: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-end">
+      <div class="tw-mt-56 tw-flex tw-justify-end">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -234,7 +256,7 @@ export const LeftCenter: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-end">
+      <div class="tw-mt-56 tw-flex tw-justify-end">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -256,7 +278,7 @@ export const LeftEnd: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-end">
+      <div class="tw-mt-56 tw-flex tw-justify-end">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -279,7 +301,7 @@ export const BelowStart: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -302,7 +324,7 @@ export const BelowCenter: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -325,7 +347,7 @@ export const BelowEnd: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -348,7 +370,7 @@ export const AboveStart: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -371,7 +393,7 @@ export const AboveCenter: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"
@@ -394,7 +416,7 @@ export const AboveEnd: Story = {
   render: (args) => ({
     props: args,
     template: `
-      <div class="tw-mt-32 tw-flex tw-justify-center">
+      <div class="tw-mt-56 tw-flex tw-justify-center">
         <button
           type="button"
           class="tw-border-none tw-bg-transparent tw-text-primary-600"