update auto-size; fixes #860

docs/components/popup.md

@@ -1197,7 +1197,7 @@ const App = () => {
 
 ### Auto-size
 
-Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
+Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
 
 When using auto-size, two read-only custom properties called `--auto-size-available-width` and `--auto-size-available-height` will be applied to the host element. These values determine the available space the popover has before clipping will occur. Since they cascade, you can use them to set a max-width/height on your popup's content and easily control its overflow.
 
@@ -1206,7 +1206,7 @@ Scroll the container to see the popup resize as its available space changes.
 ```html preview
 <div class="popup-auto-size">
   <div class="overflow">
-    <sl-popup placement="top" auto-size auto-size-padding="10" active>
+    <sl-popup placement="top" auto-size="both" auto-size-padding="10" active>
       <span slot="anchor"></span>
       <div class="box"></div>
     </sl-popup>
@@ -1298,7 +1298,7 @@ const App = () => {
     <>
       <div className="popup-auto-size">
         <div className="overflow">
-          <SlPopup placement="top" auto-size={autoSize || null} auto-size-padding="10" active>
+          <SlPopup placement="top" auto-size={autoSize ? 'both' || null} auto-size-padding="10" active>
             <span slot="anchor" />
             <div className="box" />
           </SlPopup>

docs/resources/changelog.md

@@ -11,6 +11,8 @@ _During the beta period, these restrictions may be relaxed in the event of a mis
 ## Next
 
 - Added the `sync` attribute to `<sl-popup>`
+- Changed the `auto-size` attribute of the experimental `<sl-popup>` component so it accepts `horizontal`, `vertical`, and `both` instead of a boolean value
+- Fixed a bug in `<sl-dropdown>` that caused the panel to resize horizontally when the trigger is clipped by the viewport [#860](https://github.com/shoelace-style/shoelace/issues/860)
 - Fixed a bug in `<sl-tree>` where dynamically changing slotted items wouldn't update the tree properly
 - Fixed a bug in `<sl-split-panel>` that caused the panel to stack when clicking on the divider in mobile versions of Chrome [#862](https://github.com/shoelace-style/shoelace/issues/862)
 - Improved single selection in `<sl-tree>` so nodes expand and collapse and receive selection when clicking on the label

src/components/dropdown/dropdown.ts

@@ -397,7 +397,7 @@ export default class SlDropdown extends ShoelaceElement {
         strategy=${this.hoist ? 'fixed' : 'absolute'}
         flip
         shift
-        auto-size
+        auto-size="vertical"
         auto-size-padding="10"
         class=${classMap({
           dropdown: true,

src/components/popup/popup.ts

@@ -158,7 +158,7 @@ export default class SlPopup extends ShoelaceElement {
   @property({ attribute: 'shift-padding', type: Number }) shiftPadding = 0;
 
   /** When set, this will cause the popup to automatically resize itself to prevent it from overflowing. */
-  @property({ attribute: 'auto-size', type: Boolean }) autoSize = false;
+  @property({ attribute: 'auto-size' }) autoSize: 'horizontal' | 'vertical' | 'both';
 
   /** Syncs the popup's width or height to that of the anchor element. */
   @property() sync: 'width' | 'height' | 'both';
@@ -328,8 +328,13 @@ export default class SlPopup extends ShoelaceElement {
           boundary: this.autoSizeBoundary,
           padding: this.autoSizePadding,
           apply: ({ availableWidth, availableHeight }) => {
-            this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
-            this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);
+            if (this.autoSize === 'vertical' || this.autoSize === 'both') {
+              this.style.setProperty('--auto-size-available-height', `${availableHeight}px`);
+            }
+
+            if (this.autoSize === 'horizontal' || this.autoSize === 'both') {
+              this.style.setProperty('--auto-size-available-width', `${availableWidth}px`);
+            }
           }
         })
       );