From 8aef7dca4337ce034c18688e52ab0f45ce338806 Mon Sep 17 00:00:00 2001 From: Nicholas Ray Date: Fri, 16 Jul 2021 12:11:33 -0600 Subject: [PATCH] Use relative positioning with zero top,left,bottom,right properties in storybook Instead of using static positioning which changes the behavior of absolutely positioned elements inside .mwe-popups (such as the footer and the pseudo-element pokey), use relative positioning but set the top, left, right, and bottom properties to zero. This more accurately simulates how the Popup actually behaves in production. Bug: T271763 Change-Id: I4b588667eaa761286a5381c4b31bee6a2aa427e8 --- .storybook/mocks/custom.less | 28 +++++++++++++--------------- 1 file changed, 13 insertions(+), 15 deletions(-) diff --git a/.storybook/mocks/custom.less b/.storybook/mocks/custom.less index d41d0e5e3..0af1f6e6b 100644 --- a/.storybook/mocks/custom.less +++ b/.storybook/mocks/custom.less @@ -39,20 +39,18 @@ body { .mwe-popups { display: block; // overrides the popups default "position:absolute" styling - // so they align naturally within the flexbox parent. - position: static; -} - -/** - * This rule, combined with the rule above, allows the footer - * to be positioned correctly without the absolute positioning - * that is overridden above. - * NOTE: This causes a slight discrepancy in the positioning of - * of the settings cog in Storybook when compared to production. - * This issue only occurs with previews that have the pokey positioned - * at the bottom. - */ - -.mwe-popups-container { + // so they align naturally within the flexbox parent. Use relative instead of + // static so that absolutely positioned children elements can still accurately + // position themselves. position: relative; + // Override the top, left, bottom, right properties so that the absolute + // positioning doesn't take effect in storybook. + /* stylelint-disable-next-line declaration-no-important */ + top: 0 !important; + /* stylelint-disable-next-line declaration-no-important */ + right: 0 !important; + /* stylelint-disable-next-line declaration-no-important */ + bottom: 0 !important; + /* stylelint-disable-next-line declaration-no-important */ + left: 0 !important; }