[EuiFlyout] Expose css variables for the offset required by push flyout

packages/eui/changelogs/upcoming/8872.md

@@ -0,0 +1 @@
+- Added `--euiPushFlyoutOffsetInlineStart`, `--euiPushFlyoutOffsetInlineEnd` for push `EuiFlyout`

packages/eui/cypress/support/component.tsx

@@ -23,6 +23,7 @@ import './keyboard/repeatRealPress';
 import './copy/select_and_copy';
 import './setup/mount';
 import './setup/realMount';
+import './css/cssVar';
 
 // @see https://github.com/quasarframework/quasar/issues/2233#issuecomment-492975745
 // @see also https://github.com/cypress-io/cypress/issues/20341

packages/eui/cypress/support/css/cssVar.ts

@@ -0,0 +1,12 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+Cypress.Commands.add('cssVar', { prevSubject: true }, (subject, name) => {
+  const value = getComputedStyle(subject[0]).getPropertyValue(name).trim();
+  return cy.wrap(value === '' ? null : value);
+});

packages/eui/cypress/support/index.d.ts

@@ -56,6 +56,12 @@ declare global {
        * @returns a chainable .then((string) => { doSomethingWith(string); })
        */
       selectAndCopy(selectorToCopy: string): Chainable<string>;
+
+      /*
+       * Get the value of a CSS variable from the element's computed styles.
+       * Params: variableName - the name of the CSS variable (e.g. '--euiColorPrimary')
+       */
+      cssVar(variableName: string): Chainable<string | null>;
     }
   }
 }

packages/eui/src/components/flyout/flyout.spec.tsx

@@ -399,4 +399,58 @@ describe('EuiFlyout', () => {
       cy.focused().should('have.class', 'euiFlyout');
     });
   });
+
+  describe('css variables', () => {
+    const euiPushFlyoutOffsetInlineEnd = '--euiPushFlyoutOffsetInlineEnd';
+    const euiPushFlyoutOffsetInlineStart = '--euiPushFlyoutOffsetInlineStart';
+
+    it('sets the correct css variables for the flyout', () => {
+      cy.mount(
+        <Flyout
+          type="push"
+          hasTrigger={true}
+          pushMinBreakpoint={'xs'}
+          size={'100px'}
+        />
+      );
+
+      cy.get(':root').cssVar(euiPushFlyoutOffsetInlineEnd).should('not.exist');
+      cy.get(':root')
+        .cssVar(euiPushFlyoutOffsetInlineStart)
+        .should('not.exist');
+
+      cy.get('[data-test-subj="flyoutSpecTrigger"]').click();
+
+      cy.get(':root')
+        .cssVar(euiPushFlyoutOffsetInlineStart)
+        .should('not.exist');
+      cy.get(':root')
+        .cssVar(euiPushFlyoutOffsetInlineEnd)
+        .should('eq', '100px');
+
+      cy.get('[data-test-subj="euiFlyoutCloseButton"]').click();
+
+      cy.get(':root').cssVar(euiPushFlyoutOffsetInlineEnd).should('not.exist');
+      cy.get(':root')
+        .cssVar(euiPushFlyoutOffsetInlineStart)
+        .should('not.exist');
+
+      cy.mount(
+        <Flyout
+          type="push"
+          hasTrigger={true}
+          pushMinBreakpoint={'xs'}
+          size={'100px'}
+          side={'left'}
+        />
+      );
+
+      cy.get('[data-test-subj="flyoutSpecTrigger"]').click();
+
+      cy.get(':root')
+        .cssVar(euiPushFlyoutOffsetInlineStart)
+        .should('eq', '100px');
+      cy.get(':root').cssVar(euiPushFlyoutOffsetInlineEnd).should('not.exist');
+    });
+  });
 });

packages/eui/src/components/flyout/flyout.tsx

@@ -32,6 +32,7 @@ import {
   useIsWithinMinBreakpoint,
   useEuiMemoizedStyles,
   useGeneratedHtmlId,
+  useEuiThemeCSSVariables,
 } from '../../services';
 import { logicalStyle } from '../../global_styling';
 
@@ -208,6 +209,7 @@ export const EuiFlyout = forwardRef(
       | MutableRefObject<ComponentPropsWithRef<T> | null>
       | null
   ) => {
+    const { setGlobalCSSVariables } = useEuiThemeCSSVariables();
     const Element = as || defaultElement;
     const maskRef = useRef<HTMLDivElement>(null);
 
@@ -284,13 +286,24 @@ export const EuiFlyout = forwardRef(
       if (isPushed) {
         const paddingSide =
           side === 'left' ? 'paddingInlineStart' : 'paddingInlineEnd';
+        const cssVarName = `--euiPushFlyoutOffset${
+          side === 'left' ? 'InlineStart' : 'InlineEnd'
+        }`;
 
         document.body.style[paddingSide] = `${width}px`;
+
+        // EUI doesn't use this css variable, but it is useful for consumers
+        setGlobalCSSVariables({
+          [cssVarName]: `${width}px`,
+        });
         return () => {
           document.body.style[paddingSide] = '';
+          setGlobalCSSVariables({
+            [cssVarName]: null,
+          });
         };
       }
-    }, [isPushed, side, width]);
+    }, [isPushed, setGlobalCSSVariables, side, width]);
 
     /**
      * This class doesn't actually do anything by EUI, but is nice to add for consumers (JIC)

packages/eui/src/services/theme/provider.tsx

@@ -272,7 +272,15 @@ export const EuiThemeProvider = <T extends {} = {}>({
   const [themeCSSVariables, _setThemeCSSVariables] = useState<CSSObject>();
   const setThemeCSSVariables = useCallback(
     (variables: CSSObject) =>
-      _setThemeCSSVariables((previous) => ({ ...previous, ...variables })),
+      _setThemeCSSVariables((previous) => {
+        const merged = { ...previous, ...variables };
+        Object.keys(merged).forEach((key) => {
+          if (merged[key] === null) {
+            delete merged[key];
+          }
+        });
+        return merged;
+      }),
     []
   );