From b24ff33fe0d70596d017451415edd8b4576bd103 Mon Sep 17 00:00:00 2001
From: Buni48 <37407974+Buni48@users.noreply.github.com>
Date: Mon, 21 Feb 2022 15:04:21 +0100
Subject: [PATCH] Added `placement` property to `sl-select` (#687)

* added placement to sl-select

* sl-select placement: just allow top and bottom
---
 docs/components/select.md       | 27 +++++++++++++++++++++++++++
 src/components/select/select.ts |  7 +++++++
 2 files changed, 34 insertions(+)

diff --git a/docs/components/select.md b/docs/components/select.md
index df203a4c7..9eec72f37 100644
--- a/docs/components/select.md
+++ b/docs/components/select.md
@@ -394,6 +394,33 @@ const App = () => (
 );
 ```
 
+### Placement
+
+The preferred placement of the dropdown can be set with the `placement` attribute. Note that the actual position may vary to ensure the panel remains in the viewport.
+
+```html preview
+<sl-select placement="top">
+  <sl-menu-item value="option-1">Option 1</sl-menu-item>
+  <sl-menu-item value="option-2">Option 2</sl-menu-item>
+  <sl-menu-item value="option-3">Option 3</sl-menu-item>
+</sl-select>
+```
+
+```jsx react
+import { 
+  SlMenuItem,
+  SlSelect
+} from '@shoelace-style/shoelace/dist/react';
+
+const App = () => (
+  <SlSelect placement="top">
+    <SlMenuItem value="option-1">Option 1</SlMenuItem>
+    <SlMenuItem value="option-2">Option 2</SlMenuItem>
+    <SlMenuItem value="option-3">Option 3</SlMenuItem>
+  </SlDropdown> 
+);
+```
+
 ### Prefix & Suffix Icons
 
 Use the `prefix` and `suffix` slots to add icons.
diff --git a/src/components/select/select.ts b/src/components/select/select.ts
index 203d9b660..b4374a6bf 100644
--- a/src/components/select/select.ts
+++ b/src/components/select/select.ts
@@ -121,6 +121,12 @@ export default class SlSelect extends LitElement {
   /** The select's label. Alternatively, you can use the label slot. */
   @property() label = '';
 
+  /**
+   * The preferred placement of the dropdown panel. Note that the actual placement may vary as needed to keep the panel
+   * inside of the viewport.
+   */
+  @property() placement: 'top' | 'bottom' = 'bottom';
+
   /** The select's help text. Alternatively, you can use the help-text slot. */
   @property({ attribute: 'help-text' }) helpText = '';
 
@@ -451,6 +457,7 @@ export default class SlSelect extends LitElement {
         <sl-dropdown
           part="base"
           .hoist=${this.hoist}
+          .placement=${this.placement}
           .stayOpenOnSelect=${this.multiple}
           .containingElement=${this as HTMLElement}
           ?disabled=${this.disabled}