Fix popup arrow overlapping text

packages/webawesome/docs/docs/components/popup.md

@@ -333,7 +333,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
 
 ### Arrows
 
-Add an arrow to your popup with the `arrow` attribute. It's usually a good idea to set a `distance` to make room for the arrow. To adjust the arrow's color and size, use the `--arrow-color` and `--arrow-size` custom properties, respectively. You can also target the `arrow` part to add additional styles such as shadows and borders.
+Add an arrow to your popup with the `arrow` attribute. It's usually a good idea to set a `distance` to make room for the arrow. To adjust the arrow's color and size, use the `--arrow-color` and `--arrow-size` custom properties, respectively. You can also target the `arrow` part to add additional styles such as shadows and borders to match styles applied to rest of the popup element. 
 
 By default, the arrow will be aligned as close to the center of the _anchor_ as possible, considering available space and `arrow-padding`. You can use the `arrow-placement` attribute to force the arrow to align to the start, end, or center of the _popup_ instead.
 
@@ -426,6 +426,90 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
 </div>
 ```
 
+### Adding a border
+
+Borders can also be added to the popup element by targetting the contents of the `wa-popup` element. This styling can also be extended to the arrow itself by targetting `.arrow` class in the popup.
+
+When adding borders to the popup element which has an arrow, make sure to set the `--popup-border-width` custom property to match the width of the border of the popup. Setting this will allow the arrow to overlap the border of the popup so that they visually appear connected.
+
+```html {.example}
+<div class="popup-border">
+  <wa-popup placement="top" arrow arrow-placement="anchor" distance="8" active>
+    <span slot="anchor"></span>
+    <div class="box"></div>
+  </wa-popup>
+
+  <div class="popup-border-options">
+    <wa-combobox label="Placement" name="placement" placeholder="Select placement..." class="popup-overview-select"></wa-combobox>
+  </div>
+
+  <style>
+
+    .popup-border span[slot='anchor'] {
+      display: inline-block;
+      width: 150px;
+      height: 150px;
+      border: dashed 2px var(--wa-color-neutral-fill-loud);
+      margin: 50px;
+    }
+
+    .popup-border .box {
+      width: 100px;
+      height: 50px;
+      background: var(--wa-color-brand-on-loud);
+      border-radius: var(--wa-border-radius-m);
+      border: var(--wa-panel-border-width) solid var(--wa-color-brand-border-loud);
+      border-style: var(--wa-panel-border-style);
+      box-shadow: var(--wa-shadow-l);
+    }
+
+    .popup-border wa-popup {
+      --arrow-color: var(--wa-color-brand-on-loud);
+      --popup-border-width: var(--wa-panel-border-width);
+
+      &::part(arrow) {
+        border-bottom: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-brand-border-loud);
+        border-right: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-brand-border-loud);
+      }
+    }
+
+    .popup-border-options {
+      display: flex;
+      flex-wrap: wrap;
+      align-items: end;
+      gap: 1rem;
+    }
+
+    .popup-border-options wa-combobox {
+      width: 160px;
+    }
+  </style>
+
+  <script type="module">
+    await customElements.whenDefined('wa-combobox');
+
+    const container = document.querySelector('.popup-border');
+    const popup = container.querySelector('wa-popup');
+    const placement = container.querySelector('wa-combobox[name="placement"]');
+
+    const placements = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'right', 'right-start', 'right-end', 'left', 'left-start', 'left-end'];
+
+    placements.forEach(value => {
+      const option = document.createElement('wa-option');
+      option.value = value;
+      option.textContent = value;
+      placement.append(option);
+    });
+
+    await placement.updateComplete;
+
+    placement.value = 'top';
+
+    placement.addEventListener('change', () => (popup.placement = placement.value));
+  </script>
+</div>
+```
+
 {# TODO: this example totally destroys browsers. Needs investigation.
 
 ### Syncing with the Anchor's Dimensions

packages/webawesome/docs/docs/resources/changelog.md

@@ -18,6 +18,8 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
 - Fixed a bug that caused 0ms animations to not fire correctly in the internal `animateWithClass()` function [pr#2068]
 - Fixed a bug that caused `<wa-dropdown>` elements to scroll the document in Chrome 145
 - Updated `<wa-icon>` to use [Font Awesome 7.2.0](https://fontawesome.com/changelog#v7-2-0) [pr:2059]
+- Updated `<wa-popup>` arrow styling to prevent larger sized arrow from overlapping the contents of the popup [pr:2070]
+- Added `--popup-border-width` parameter to `<wa-popup>`. This must be set to match the width of any border added to the popup element [pr:2070]
 - Modified native styles so that `border-radius` does not apply to `svg` elements by default [pr:2078]
 
 ## 3.2.1

packages/webawesome/src/components/popover/popover.styles.ts

@@ -7,9 +7,6 @@ export default css`
     --show-duration: 100ms;
     --hide-duration: 100ms;
 
-    /* Internal calculated properties */
-    --arrow-diagonal-size: calc((var(--arrow-size) * sin(45deg)));
-
     display: contents;
 
     /** Defaults for inherited CSS properties */
@@ -45,6 +42,7 @@ export default css`
   /* The <wa-popup> element */
   .popover {
     --arrow-size: inherit;
+    --popup-border-width: var(--wa-panel-border-width);
     --show-duration: inherit;
     --hide-duration: inherit;
 

packages/webawesome/src/components/popup/popup.styles.ts

@@ -4,14 +4,21 @@ export default css`
   :host {
     --arrow-color: black;
     --arrow-size: var(--wa-tooltip-arrow-size);
+    --popup-border-width: 0px;
     --show-duration: 100ms;
     --hide-duration: 100ms;
 
     /*
      * These properties are computed to account for the arrow's dimensions after being rotated 45º. The constant
      * 0.7071 is derived from sin(45), which is the diagonal size of the arrow's container after rotating.
+     *
+     * The diamond will be translated inward by the border thickness to ensure crop point is on the inner edge of
+     * the border. This also means we need to increase the size of the diamond by sin(45) times the border width
+     * to keep it central.
      */
-    --arrow-size-diagonal: calc(var(--arrow-size) * 0.7071);
+
+    --arrow-base-offset: calc(var(--popup-border-width) + 0.5px);
+    --arrow-size-diagonal: calc((var(--arrow-size) + var(--popup-border-width)) * 0.7071);
     --arrow-padding-offset: calc(var(--arrow-size-diagonal) - var(--arrow-size));
 
     display: contents;
@@ -49,20 +56,21 @@ export default css`
     position: absolute;
     width: calc(var(--arrow-size-diagonal) * 2);
     height: calc(var(--arrow-size-diagonal) * 2);
-    rotate: 45deg;
     background: var(--arrow-color);
     z-index: 3;
+    clip-path: polygon(0px 100%, 100% 0px, 100% 100%);
+    rotate: 45deg;
   }
 
-  :host([data-current-placement~='left']) .arrow {
+  :host([data-current-placement^='left']) .arrow {
     rotate: -45deg;
   }
 
-  :host([data-current-placement~='right']) .arrow {
+  :host([data-current-placement^='right']) .arrow {
     rotate: 135deg;
   }
 
-  :host([data-current-placement~='bottom']) .arrow {
+  :host([data-current-placement^='bottom']) .arrow {
     rotate: 225deg;
   }
 

packages/webawesome/src/components/popup/popup.ts

@@ -56,6 +56,8 @@ const SUPPORTS_POPOVER = globalThis?.HTMLElement?.prototype.hasOwnProperty('popo
  *
  * @cssproperty [--arrow-size=6px] - The size of the arrow. Note that an arrow won't be shown unless the `arrow`
  *  attribute is used.
+ * @cssproperty [--popup-border-width] - The width of any custom border applied to the popup. This is used to reposition
+ *  the arrow to overlap to the inside edge of the popup border.
  * @cssproperty [--arrow-color=black] - The color of the arrow.
  * @cssproperty [--auto-size-available-width] - A read-only custom property that determines the amount of width the
  *  popup can be before overflowing. Useful for positioning child elements that need to overflow. This property is only
@@ -486,7 +488,7 @@ export default class WaPopup extends WebAwesomeElement {
           right,
           bottom,
           left,
-          [staticSide]: 'calc(var(--arrow-size-diagonal) * -1)',
+          [staticSide]: 'calc(var(--arrow-base-offset) - var(--arrow-size-diagonal))',
         });
       }
     });

packages/webawesome/src/components/tooltip/tooltip.styles.ts

@@ -53,8 +53,12 @@ export default css`
     -webkit-user-select: none;
   }
 
-  .tooltip::part(arrow) {
-    border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
-    border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+  .tooltip {
+    --popup-border-width: var(--wa-tooltip-border-width);
+
+    &::part(arrow) {
+      border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+      border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
+    }
   }
 `;