Merge pull request #1155 from ing-bank/fix/select-rich-inside-overlay

Fix/select rich inside overlay

.changeset/angry-snails-repeat.md

@@ -0,0 +1,5 @@
+---
+'@lion/select-rich': patch
+---
+
+add workarround and todo for align select-rich invoker width with options if its inside an overlay

.changeset/tiny-eyes-burn.md

@@ -0,0 +1,5 @@
+---
+'@lion/button': patch
+---
+
+Set user-select to none on button, so that the inner text is not selectable.

packages/button/src/LionButton.js

@@ -61,6 +61,7 @@ export class LionButton extends DisabledWithTabIndexMixin(SlotMixin(LitElement))
           padding: 8px; /* padding to fix with min-height */
           outline: none; /* focus style handled below */
           cursor: default; /* /* we should always see the default arrow, never a caret */
+          user-select: none;
         }
 
         :host::before {

packages/form-integrations/docs/60-dialog-integration.md

@@ -5,8 +5,8 @@
 ```js script
 import { html } from '@lion/core';
 import '@lion/dialog/lion-dialog.js';
+import '@lion/input-datepicker';
 import '@lion/select-rich/lion-select-rich.js';
-import '@lion/listbox/lion-options.js';
 import '@lion/listbox/lion-option.js';
 
 export default {
@@ -14,19 +14,19 @@ export default {
 };
 ```
 
+## Select Rich
+
 Opening a Rich Select inside a dialog
 
 ```js story
-export const main = () => html`
+export const selectRich = () => html`
   <lion-dialog>
     <button slot="invoker">Open Dialog</button>
     <div slot="content">
       <lion-select-rich name="favoriteColor" label="Favorite color">
-        <lion-options slot="input">
-          <lion-option .choiceValue=${'red'}>Red</lion-option>
-          <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
-          <lion-option .choiceValue=${'teal'}>Teal</lion-option>
-        </lion-options>
+        <lion-option .choiceValue=${'red'}>Red</lion-option>
+        <lion-option .choiceValue=${'hotpink'} checked>Hotpink</lion-option>
+        <lion-option .choiceValue=${'teal'}>Teal</lion-option>
       </lion-select-rich>
       <button
         class="close-button"
@@ -38,3 +38,24 @@ export const main = () => html`
   </lion-dialog>
 `;
 ```
+
+## Input Datepicker
+
+Opening a Input Datepicker inside a dialog
+
+```js story
+export const inputDatepicker = () => html`
+  <lion-dialog>
+    <button slot="invoker">Open Dialog</button>
+    <div slot="content">
+      <lion-input-datepicker></lion-input-datepicker>
+      <button
+        class="close-button"
+        @click=${e => e.target.dispatchEvent(new Event('close-overlay', { bubbles: true }))}
+      >
+        ⨯
+      </button>
+    </div>
+  </lion-dialog>
+`;
+```

packages/select-rich/src/LionSelectInvoker.js

@@ -17,6 +17,7 @@ export class LionSelectInvoker extends LionButton {
       css`
         :host {
           justify-content: space-between;
+          align-items: center;
         }
 
         #content-wrapper {

packages/select-rich/src/LionSelectRich.js

@@ -388,7 +388,14 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
       this._overlayCtrl.content.style.minWidth = 'auto';
       this._overlayCtrl.content.style.width = 'auto';
       const contentWidth = this._overlayCtrl.content.getBoundingClientRect().width;
-      this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
+      /**
+       * TODO when inside an overlay the current solution doesn't work.
+       * Since that dialog is still hidden, open and close the select-rich
+       * doesn't have any effect so the contentWidth returns 0
+       */
+      if (contentWidth > 0) {
+        this._invokerNode.style.width = `${contentWidth + this._arrowWidth}px`;
+      }
       this._overlayCtrl.content.style.display = initContentDisplay;
       this._overlayCtrl.content.style.minWidth = initContentMinWidth;
       this._overlayCtrl.content.style.width = initContentWidth;