Dropdown fix (#1122)

* _blank

* fix dropdown flip/shift/ behavior when the viewport doesn't have space

Author: claviska

packages/webawesome/docs/.eleventy.js

@@ -188,17 +188,17 @@ export default async function (eleventyConfig) {
       // Replace [issue:1234] with a link to the issue on GitHub
       {
         replace: /\[pr:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1" target="_blank">#$1</a>',
       },
       // Replace [pr:1234] with a link to the pull request on GitHub
       {
         replace: /\[issue:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1" target="_blank">#$1</a>',
       },
       // Replace [discuss:1234] with a link to the discussion on GitHub
       {
         replace: /\[discuss:([0-9]+)\]/gs,
-        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
+        replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1" target="_blank">#$1</a>',
       },
     ]),
   );

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

@@ -8,12 +8,16 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
 
 Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
 
-## next
+## Next
 
 ### New Features {data-no-outline}
 
 - Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
 
+### Bug Fixes and Improvements {data-no-outline}
+
+- Fixed a bug in `<wa-dropdown>` that prevented the menu from flipping/shifting to keep the menu in the viewport [discuss:1106]
+
 ## 3.0.0-beta.1
 
 We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!
@@ -34,8 +38,10 @@ Many of these changes and improvements were the direct result of feedback from u
 - Renamed the `classic` theme to `shoelace`
 - Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
 - Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
+  <<<<<<< HEAD
 - `<wa-dropdown>` was reworked and simplified to not use menu, menu item, menu label; use `<wa-dropdown-item>` instead
-- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
+- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:940]
+  > > > > > > > next
 - Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
 - Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
   - `<wa-button caret>` => `<wa-button with-caret>`

packages/webawesome/src/components/dropdown/dropdown.css

@@ -6,9 +6,6 @@
 
 #menu {
   display: flex;
-  position: absolute;
-  top: 0;
-  left: 0;
   flex-direction: column;
   width: max-content;
   margin: 0;

packages/webawesome/src/components/dropdown/dropdown.ts

@@ -698,7 +698,16 @@ export default class WaDropdown extends WebAwesomeElement {
     let active = this.hasUpdated ? this.popup.active : this.open;
 
     return html`
-      <wa-popup placement=${this.placement} distance=${this.distance} skidding=${this.skidding} ?active=${active}>
+      <wa-popup
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        ?active=${active}
+        flip
+        flip-fallback-strategy="best-fit"
+        shift
+        shift-padding="8"
+      >
         <slot
           name="trigger"
           slot="anchor"