fix(signpost): vertical overflow and long content pointer position (#…

…1503)

## PR Checklist

Please check if your PR fulfills the following requirements:

- [x] Tests for the changes have been added (for bug fixes / features)
- [ ] Docs have been added / updated (for bug fixes / features)
- [ ] If applicable, have a visual design approval

## PR Type

What kind of change does this PR introduce?

- [x] Bugfix
- [ ] Feature
- [ ] Code style update (formatting, local variables)
- [ ] Refactoring (no functional changes, no api changes)
- [ ] Build related changes
- [ ] CI related changes
- [ ] Documentation content changes
- [ ] Other... Please describe:

## What is the current behavior?

- Vertical overflow is seen when it shouldn't be.
- Pointer position in vertical plane is wrong when long content is
loaded.

Issue Number: CDE-2225, CDE-2226

## What is the new behavior?

- Vertical overflow is seen only when max height is reached.
- Pointer position in vertical plane point to the trigger every time.

## Does this PR introduce a breaking change?

- [ ] Yes
- [x] No

## Other information

---------

Co-authored-by: GitHub <[email protected]>

.storybook/stories/signpost/signpost.stories.ts

@@ -50,7 +50,7 @@ export default {
 };
 
 const template = `
-  <div style="margin-top: 100px; text-align: center">
+  <div style="padding: 250px; text-align: center">
     <clr-signpost>
       <clr-signpost-content [clrPosition]="clrPosition">
         {{ content }}
@@ -70,7 +70,18 @@ export const Initial: StoryObj = {
 
 export const Opened = {
   render: SignpostTemplate,
-  async play({ canvasElement }) {
+  play({ canvasElement }) {
     canvasElement.querySelector('button').click();
   },
 };
+
+// visual regression test for CDE-2226
+export const OpenedLongContent = {
+  render: SignpostTemplate,
+  play({ canvasElement }) {
+    canvasElement.querySelector('button').click();
+  },
+  args: {
+    content: 'Hello World! '.repeat(110),
+  },
+};

projects/angular/src/popover/signpost/_signposts.clarity.scss

@@ -1,6 +1,6 @@
 /*
  * Copyright (c) 2016-2024 Broadcom. All Rights Reserved.
- * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.   
+ * The term "Broadcom" refers to Broadcom Inc. and/or its subsidiaries.
  * This software is released under MIT license.
  * The full license information can be found in LICENSE in the root directory of this project.
  */
@@ -375,7 +375,7 @@
 
   .signpost-wrap {
     gap: tokens.$cds-global-space-5;
-    padding: tokens.$cds-global-space-7;
+    padding: tokens.$cds-global-space-7 tokens.$cds-global-space-7 mixins.baselinePx(15);
     border: tokens.$cds-alias-object-border-width-100 solid signpost-variables.$clr-signpost-content-border-color;
     border-radius: signpost-variables.$clr-signpost-border-radius;
     background-color: signpost-variables.$clr-signpost-content-bg-color;
@@ -386,10 +386,10 @@
   }
 
   .signpost-content-body {
-    padding: 0;
+    padding-bottom: tokens.$cds-global-space-1;
     color: signpost-variables.$clr-signpost-content-color;
     text-align: left;
-    max-height: mixins.baselinePx(480);
+    max-height: mixins.baselinePx(450);
     overflow-y: auto;
 
     @include mixins.generate-typography-token('BODY-14-RG-CPT');

projects/demo/src/app/signpost/signpost.demo.html

@@ -29,7 +29,7 @@ <h4>{{ position.description }}</h4>
               </button>
               <clr-signpost-content *clrIfOpen [clrPosition]="position.position">
                 <div>{{ position.position }}</div>
-                <div>Lorem Ipsum versions of Lorem Ipsum</div>
+                <div>Lorem Ipsum versions of Lorem Ipsum {{ position['content'] }}</div>
               </clr-signpost-content>
             </clr-signpost>
           </div>

projects/demo/src/app/signpost/signpost.demo.ts

@@ -78,6 +78,7 @@ export class SignpostDemo {
       description: 'Right middle',
       position: 'right-middle',
       id: 'rightMiddleTrigger',
+      content: 'Lorem Ipsum versions of Lorem Ipsum '.repeat(35),
     },
     {
       useCustomTrigger: false,