feat(popover) - update popover component for SHINE (#2030)

* Remove arrow from popovers

* add new tag

* add changeset

* remove arrow references

* remove unused imports

* update migration guide

* changes based on comments

Author: ttaylor-stack

.changeset/thin-days-leave.md

@@ -0,0 +1,8 @@
+---
+"@stackoverflow/stacks": minor
+---
+
+Update popover component to match SHINE styles
+
+BREAKING CHANGES:
+- `s-popover--arrow` css class has been removed

MIGRATION_GUIDE.md

@@ -16,6 +16,11 @@
 - `.blr-sm` removed
 - `.blr-lg` removed
 
+### Components
+
+#### Popover
+- The new popovers no longer include an arrow element. The `s-popover--arrow` css class has been removed, and any markup using it (e.g. `<div class="s-popover--arrow"></div>`) should be deleted from the codebases as part of the migration.
+
 # Migrating from Stacks Svelte v0 to v1
 
 Coming soon…

packages/stacks-classic/lib/components/popover/popover.less

@@ -5,18 +5,6 @@
     --_po-d: none;
     --_po-wmn: 12rem;
     --_po-w: 100%;
-    // arrow
-    --_po-arrow-fc: var(--white);
-    --_po-arrow-b: unset;
-    --_po-arrow-l: unset;
-    --_po-arrow-r: unset;
-    --_po-arrow-t: unset;
-    --_po-arrow-ps: calc(var(--su6) * -1); // ps suffix used for placement, not positioning value
-    --_po-arrow-after-b: unset;
-    --_po-arrow-after-l: unset;
-    --_po-arrow-after-r: unset;
-    --_po-arrow-after-t: unset;
-    --_po-arrow-after-bs: unset;
     // content
     // --_po-topbar-height assumes the topbar height based on topbar styles
     --_po-topbar-height: var(--theme-topbar-height, calc(var(--su-static48) + var(--su-static8)));
@@ -27,7 +15,6 @@
         --_po-bg: var(--black-200);
         --_po-bc: var(--bc-light);
         --_po-bs: var(--bs-lg);
-        --_po-arrow-fc: var(--black-200);
     });
 
     // MODIFIERS
@@ -41,91 +28,6 @@
     }
 
     // CHILD ELEMENTS
-    // Arrow
-    &[data-popper-placement^="top"] > &--arrow,
-    & &--arrow__bc,
-    & &--arrow__bl,
-    & &--arrow__br {
-        --_po-arrow-b: var(--_po-arrow-ps);
-        --_po-arrow-after-b: var(--su-static1);
-        --_po-arrow-after-bs: 2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px 1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="bottom"] > &--arrow,
-    & &--arrow__tc,
-    & &--arrow__tl,
-    & &--arrow__tr {
-        --_po-arrow-t: var(--_po-arrow-ps);
-        --_po-arrow-after-t: var(--su-static1);
-        --_po-arrow-after-bs: -1px -1px 1px 0 hsla(0, 0%, 0%, 0.12);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="left"] > &--arrow,
-    & &--arrow__rc,
-    & &--arrow__rt,
-    & &--arrow__rb {
-        --_po-arrow-r: var(--_po-arrow-ps);
-        --_po-arrow-after-r: var(--su-static1);
-        --_po-arrow-after-bs: 2px -2px 5px 0 hsla(0, 0%, 0%, 0.07), 2px -2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: 1px -1px 0 0 var(--bc-medium); });
-    }
-    &[data-popper-placement^="right"] > &--arrow,
-    & &--arrow__lc,
-    & &--arrow__lt,
-    & &--arrow__lb {
-        --_po-arrow-l: var(--_po-arrow-ps);
-        --_po-arrow-after-l: var(--su-static1);
-        --_po-arrow-after-bs: -2px 2px 5px 0 hsla(0, 0%, 0%, 0.07), -2px 2px 2px -1px hsla(0, 0%, 0%, 0.1);
-        .highcontrast-mode({ --_po-arrow-after-bs: -1px 1px 0 0 var(--bc-medium); });
-    }
-    & &--arrow__tc,
-    & &--arrow__bc {
-        --_po-arrow-l: calc(50% - var(--su6));
-    }
-    & &--arrow__lc,
-    & &--arrow__rc {
-        --_po-arrow-t: calc(50% - var(--su6));
-    }
-    & &--arrow__tr,
-    .s-popover--arrow__br {
-        --_po-arrow-r: var(--su12);
-    }
-    & &--arrow__rb,
-    & &--arrow__lb {
-        --_po-arrow-b: var(--su12);
-    }
-    & &--arrow {
-        &,
-        &:before,
-        &:after {
-            display: block;
-            height: var(--su12);
-            position: absolute;
-            width: var(--su12);
-            z-index: -1;
-        }
-        &:before, // This renders our border
-        &:after {
-            content: '';
-            transform: rotate(45deg);
-        }
-        &:after { // This renders our foreground color
-            bottom: var(--_po-arrow-after-b);
-            box-shadow: var(--_po-arrow-after-bs);
-            left: var(--_po-arrow-after-l);
-            right: var(--_po-arrow-after-r);
-            top: var(--_po-arrow-after-t);
-
-            background: currentColor;
-            border-radius: calc(var(--su-static1) * 1.5);
-        }
-
-        bottom: var(--_po-arrow-b);
-        color: var(--_po-arrow-fc);
-        left: var(--_po-arrow-l);
-        right: var(--_po-arrow-r);
-        top: var(--_po-arrow-t);
-    }
     // Close btn
     & &--close {
         float: right; // Use floats for title wrapping

packages/stacks-classic/lib/components/popover/popover.ts

@@ -231,12 +231,6 @@ export abstract class BasePopoverController extends Stacks.StacksController {
                         offset: [0, 10], // The entire popover should be 10px away from the element
                     },
                 },
-                {
-                    name: "arrow",
-                    options: {
-                        element: ".s-popover--arrow",
-                    },
-                },
             ],
         });
     }

packages/stacks-classic/lib/components/popover/tooltip.test.ts

@@ -80,7 +80,6 @@ describe("tooltip", () => {
                 role="tooltip"
                 data-testid="tooltip"
             >
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <a href="#" data-testid="link">View more</a>
                 </div>
@@ -113,7 +112,6 @@ describe("tooltip", () => {
                 role="tooltip"
                 data-testid="tooltip"
             >
-                <div class="s-popover--arrow"></div>
                 <div class="s-popover--content">
                     <a href="#">View more</a>
                 </div>

packages/stacks-classic/lib/components/popover/tooltip.ts

@@ -137,22 +137,10 @@ export class TooltipController extends BasePopoverController {
             }
         }
 
-        const arrow = popover.querySelector(".s-popover--arrow");
-
         // clear and set the content of the popover
         popover.innerHTML = "";
         popover.appendChild(content);
 
-        // create the arrow if necessary
-        if (arrow) {
-            popover.appendChild(arrow);
-        } else {
-            popover.insertAdjacentHTML(
-                "beforeend",
-                `<div class="s-popover--arrow"></div>`
-            );
-        }
-
         this.scheduleUpdate();
 
         return popover;

packages/stacks-docs/_data/popovers.json

@@ -20,77 +20,10 @@
       "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
       "description": "Used to dismiss a popover"
     },
-    {
-      "class": ".s-popover--arrow",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "When combined with JavaScript data attributes, this arrow element will be positioned automatically"
-    },
     {
         "class": ".s-popover--content",
         "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
         "description": "Wrapper around the popover content to apply appropriate overflow styles"
     }
-  ],
-  "manual": [
-    {
-      "class": ".s-popover--arrow__tc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top center"
-    },
-    {
-      "class": ".s-popover--arrow__tl",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top left"
-    },
-    {
-      "class": ".s-popover--arrow__tr",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears top right"
-    },
-    {
-      "class": ".s-popover--arrow__bc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom center"
-    },
-    {
-      "class": ".s-popover--arrow__bl",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom left"
-    },
-    {
-      "class": ".s-popover--arrow__br",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears bottom right"
-    },
-    {
-      "class": ".s-popover--arrow__rc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right center"
-    },
-    {
-      "class": ".s-popover--arrow__rt",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right top"
-    },
-    {
-      "class": ".s-popover--arrow__rb",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears right bottom"
-    },
-    {
-      "class": ".s-popover--arrow__lc",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left center"
-    },
-    {
-      "class": ".s-popover--arrow__lt",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left top"
-    },
-    {
-      "class": ".s-popover--arrow__lb",
-      "applies": "Child of <code class=\"stacks-code\">.s-popover</code>",
-      "description": "Popover arrow appears left bottom"
-    }
   ]
 }

packages/stacks-docs/_data/site-navigation.json

@@ -286,7 +286,8 @@
             },
             {
               "title": "Popovers",
-              "url": "/product/components/popovers/"
+              "url": "/product/components/popovers/",
+              "new": true
             },
             {
               "title": "Post summary",

packages/stacks-docs/_includes/header.html

@@ -75,7 +75,6 @@
         <div class="s-popover w-auto wmn-initial wmx-initial"
              id="theming-popover"
              role="menu">
-            <div class="s-popover--arrow"></div>
             <div class="s-popover--content">
                 <div class="d-flex fd-column g12">
                     <div class="d-flex ai-center jc-space-between g8">

packages/stacks-docs/_includes/layouts/home.html

@@ -167,7 +167,6 @@
                 <div class="s-popover w-auto wmn-initial wmx-initial"
                      id="theming-popover"
                      role="menu">
-                    <div class="s-popover--arrow"></div>
                     <div class="d-flex fd-column g12">
                         <div class="d-flex ai-center jc-space-between g8">
                             <label class="s-label fs-body1 fw-normal" for="toggle-theme-dark">Dark mode</label>