ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

fix(select-rich): set invoker width same as content width

Browse source
This commit is contained in:
qa46hx 2020-12-07 16:18:08 +01:00
parent c61be3a844
commit ad2f90f43d
5 changed files with 67 additions and 5 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
.changeset/brave-beans-hang.md Normal file
View file

@ -0,0 +1,5 @@
---
'@lion/select-rich': patch
---
set invoker width same as content width

6
packages/select-rich/README.md
View file

@ -343,7 +343,7 @@ class SingleOptionRemoveAdd extends LitElement {
constructor() {
super();
this.options = ['Option 1'];
this.options = ['Option 1', 'Option 2'];
}
render() {
@ -361,16 +361,18 @@ class SingleOptionRemoveAdd extends LitElement {
}
addOption() {
this.options.push(`Option ${this.options.length + 1}`);
this.options.push(`Option ${this.options.length + 1} with a long title`);
this.options = [...this.options];
this.requestUpdate();
}
removeOption() {
if (this.options.length >= 2) {
this.options.pop();
this.options = [...this.options];
this.requestUpdate();
}
}
}
customElements.define('single-option-remove-add', SingleOptionRemoveAdd);

4
packages/select-rich/src/LionSelectInvoker.js
View file

@ -15,6 +15,10 @@ export class LionSelectInvoker extends LionButton {
return [
super.styles,
css`
:host {
justify-content: space-between;
}
#content-wrapper {
position: relative;
}

26
packages/select-rich/src/LionSelectRich.js
View file

@ -112,6 +112,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
this.interactionMode = 'auto';
this.singleOption = false;
this._arrowWidth = 28;
this.__onKeyUp = this.__onKeyUp.bind(this);
this.__invokerOnBlur = this.__invokerOnBlur.bind(this);
@ -217,6 +218,8 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
/* eslint-enable no-param-reassign */
this.__hasInitialSelectedFormElement = true;
}
this._alignInvokerWidth();
this._onFormElementsChanged();
}
@ -226,6 +229,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
*/
removeFormElement(child) {
super.removeFormElement(child);
this._alignInvokerWidth();
this._onFormElementsChanged();
}
@ -352,6 +356,7 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
_setupOverlayCtrl() {
super._setupOverlayCtrl();
this._initialInheritsReferenceWidth = this._overlayCtrl.inheritsReferenceWidth;
this._alignInvokerWidth();
this._overlayCtrl.addEventListener('before-show', this.__overlayBeforeShow);
this._overlayCtrl.addEventListener('show', this.__overlayOnShow);
@ -369,6 +374,27 @@ export class LionSelectRich extends SlotMixin(ScopedElementsMixin(OverlayMixin(L
this._overlayCtrl.removeEventListener('hide', this.__overlayOnHide);
}
/**
* Align invoker width with content width
* Make sure display is not set to "none" while calculating the content width
*/
async _alignInvokerWidth() {
if (this._overlayCtrl && this._overlayCtrl.content) {
await this.updateComplete;
const initContentDisplay = this._overlayCtrl.content.style.display;
const initContentMinWidth = this._overlayCtrl.content.style.minWidth;
const initContentWidth = this._overlayCtrl.content.style.width;
this._overlayCtrl.content.style.display = '';
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`;
this._overlayCtrl.content.style.display = initContentDisplay;
this._overlayCtrl.content.style.minWidth = initContentMinWidth;
this._overlayCtrl.content.style.width = initContentWidth;
}
}
/**
* @configure FormControlMixin
*/

25
packages/select-rich/test/lion-select-rich.test.js
View file

@ -189,6 +189,31 @@ describe('lion-select-rich', () => {
// @ts-ignore allow protected access in tests
expect(el._invokerNode.shadowRoot.firstElementChild.textContent).to.equal('30');
});
it('inherits the content width including arrow width', async () => {
const el = /** @type {LionSelectRich} */ (await fixture(html`
<lion-select-rich>
<lion-option .choiceValue=${10}>Item 1</lion-option>
<lion-option .choiceValue=${10}>Item 2 with long label</lion-option>
</lion-select-rich>
`));
el.opened = true;
const options = el.formElements;
await el.updateComplete;
expect(el._invokerNode.clientWidth).to.equal(options[1].clientWidth);
const newOption = /** @type {LionOption} */ (document.createElement('lion-option'));
newOption.choiceValue = 30;
newOption.textContent = '30 with longer label';
el._inputNode.appendChild(newOption);
await el.updateComplete;
expect(el._invokerNode.clientWidth).to.equal(options[2].clientWidth);
el._inputNode.removeChild(newOption);
await el.updateComplete;
expect(el._invokerNode.clientWidth).to.equal(options[1].clientWidth);
});
});
describe('overlay', () => {