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

fix(overlays): add inheritsReferenceObjectWidth parameter

Browse source
This commit is contained in:
gerjanvangeest 2019-07-12 11:03:21 +02:00 committed by Thomas Allmer
parent 9412d6a44f
commit 229d282a8e
2 changed files with 35 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

14
packages/overlays/src/LocalOverlayController.js
View file

@ -11,6 +11,7 @@ export class LocalOverlayController {
this.constructor.popperModule = __preloadPopper();
this.__mergePopperConfigs(params.popperConfig || {});
this.inheritsReferenceObjectWidth = params.inheritsReferenceObjectWidth;
this.hidesOnEsc = params.hidesOnEsc;
this.hidesOnOutsideClick = params.hidesOnOutsideClick;
this.trapsKeyboardFocus = params.trapsKeyboardFocus;
@ -148,6 +149,19 @@ export class LocalOverlayController {
this.contentNode.style.zIndex = 1;
this.invokerNode.setAttribute('aria-expanded', true);
if (this.inheritsReferenceObjectWidth) {
const referenceObjectWidth = `${this.invokerNode.clientWidth}px`;
switch (this.inheritsReferenceObjectWidth) {
case 'max':
this.contentNode.style.maxWidth = referenceObjectWidth;
break;
case 'full':
this.contentNode.style.width = referenceObjectWidth;
break;
default:
this.contentNode.style.minWidth = referenceObjectWidth;
}
}
if (this.trapsKeyboardFocus) this._setupTrapsKeyboardFocus();
if (this.hidesOnOutsideClick) this._setupHidesOnOutsideClick();
if (this.hidesOnEsc) this._setupHidesOnEsc();

21
packages/overlays/test/LocalOverlayController.test.js
View file

@ -499,6 +499,27 @@ describe('LocalOverlayController', () => {
'Popper positioning Y value should be 32 less than previous, due to the added 32px offset',
);
});
it('can set the contentNode minWidth as the invokerNode width', () => {
const controller = new LocalOverlayController({
inheritsReferenceObjectWidth: 'min',
});
expect(controller.contentNode.style.minWidth).to.equal(controller.invokerNode.style.width);
});
it('can set the contentNode maxWidth as the invokerNode width', () => {
const controller = new LocalOverlayController({
inheritsReferenceObjectWidth: 'max',
});
expect(controller.contentNode.style.maxWidth).to.equal(controller.invokerNode.style.width);
});
it('can set the contentNode width as the invokerNode width', () => {
const controller = new LocalOverlayController({
inheritsReferenceObjectWidth: 'full',
});
expect(controller.contentNode.style.width).to.equal(controller.invokerNode.style.width);
});
});
describe('a11y', () => {