[Emotion] Convert global className utilities (#6124)

* Convert text globals/utilities to Emotion + fix missing CSS logical property on text truncation mixin + convert textLeft/Right to logical CSS - note that we can't use the logicalTextAlign util for this as !important can't be passed to that util * Pass euiTheme to globalStyles and convert euiNumberFormat * Convert display utils to Emotion + convert euiFullHeight Sass mixin to Emotion + move @mixin euiFullHeight to `mixins/_helpers` instead of living in `_utility` * Document euiFullHeight under scroll utils - since that's where the className was documented * Convert scroll globals to Emotion (+ add logical CSS properties) - this requires adding a new `logicalCSSWithFallback` util, since overflow-inline/block is not yet supported on non-FF browsers + fix incorrect overflow mapping - inline should be x and block should be y * Convert .eui-isFocusable global to Emotion + convert mixin to accept the entire euiThemeContext instead of just the euiTheme to match all other mixins * Convert responsive globals to Emotion * Add snapshot test for quick checking of global styles output * Changelog * Remove `.eui-isFocusable` - not being used anywhere + already being handled by global reset
elastic · Aug 16, 2022 · 6d91a09 · 6d91a09
1 parent 4c30345
commit 6d91a09
Show file tree

Hide file tree

Showing 23 changed files with 680 additions and 192 deletions.
diff --git a/.../views/scroll/utility_classes_overflow.js → src-docs/src/views/scroll/full_height.tsx b/.../views/scroll/utility_classes_overflow.js → src-docs/src/views/scroll/full_height.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useContext } from 'react';
 
 import {
   EuiText,
@@ -7,13 +7,18 @@ import {
   EuiFlexItem,
   EuiFlexGroup,
 } from '../../../../src';
-import { UtilityClassesSection } from '../utility_classes/utility_classes_section';
+import { ThemeContext } from '../../components/with_theme';
+import { ThemeExample } from '../theme/_components/_theme_example';
 
 export default () => {
+  const themeContext = useContext(ThemeContext);
+  const currentLanguage = themeContext.themeLanguage;
+  const showSass = currentLanguage.includes('sass');
+
   return (
     <>
-      <UtilityClassesSection
-        code=".eui-fullHeight"
+      <ThemeExample
+        title=".eui-fullHeight"
         type="className"
         description={
           <>
@@ -22,19 +27,7 @@ export default () => {
               parents dimensions. Use it to stretch each nested element until
               the one that applies scroll.
             </p>
-            <p>
-              It applies{' '}
-              <EuiCode language="sass">height: 100%; overflow: hidden;</EuiCode>{' '}
-              but also adds <EuiCode language="sass">flex: 1 1 auto;</EuiCode>{' '}
-              for uses within <EuiCode language="sass">flex</EuiCode>{' '}
-              containers.
-            </p>
-            <dl>
-              <dt>Sass mixins</dt>
-              <dd>
-                <EuiCode language="scss">@include euiFullHeight;</EuiCode>
-              </dd>
-            </dl>
+            <p>Works on both flex and non-flex elements.</p>
           </>
         }
         example={
@@ -48,7 +41,7 @@ export default () => {
                 <EuiPanel
                   className="eui-yScroll"
                   color="warning"
-                  tabIndex="0"
+                  tabIndex={0}
                   role="region"
                   aria-label="Example 1 for full height region"
                 >
@@ -67,7 +60,7 @@ export default () => {
                 <EuiPanel
                   className="eui-yScroll"
                   color="warning"
-                  tabIndex="0"
+                  tabIndex={0}
                   role="region"
                   aria-label="Example 2 for full height region"
                 >
@@ -90,15 +83,66 @@ export default () => {
     className="eui-fullHeight" responsive={false}>
     <EuiFlexItem>
       <BodyScroll
-        className="eui-yScroll" tabIndex="0" role="region" aria-label=""/>
+        className="eui-yScroll" tabIndex={0} role="region" aria-label=""/>
     </EuiFlexItem>
     <EuiFlexItem>
       <BodyScroll
-        className="eui-yScroll" tabIndex="0" role="region" aria-label=""/>
+        className="eui-yScroll" tabIndex={0} role="region" aria-label=""/>
     </EuiFlexItem>
   </EuiFlexGroup>
 </BodyContent>`}
       />
+
+      {!showSass && (
+        <ThemeExample
+          title={<code>{'euiFullHeight()'}</code>}
+          type="function"
+          description={
+            <>
+              <p>
+                Emotion mixin for adding full height scrolling to a container or
+                flex child.
+              </p>
+              <p>
+                It applies{' '}
+                <EuiCode language="css">
+                  height: 100%; overflow: hidden;
+                </EuiCode>{' '}
+                but also adds <EuiCode language="css">flex: 1 1 auto;</EuiCode>{' '}
+                for use within <EuiCode>flex</EuiCode> containers.
+              </p>
+            </>
+          }
+          snippet="${euiFullHeight()}"
+          snippetLanguage="emotion"
+        />
+      )}
+
+      {showSass && (
+        <ThemeExample
+          title={<code>{'@include euiFullHeight'}</code>}
+          type="mixin"
+          description={
+            <>
+              <p>
+                Sass mixin for adding full height scrolling to a container or
+                flex child.
+              </p>
+              <p>
+                It applies{' '}
+                <EuiCode language="sass">
+                  height: 100%; overflow: hidden;
+                </EuiCode>{' '}
+                but also adds <EuiCode language="sass">flex: 1 1 auto;</EuiCode>{' '}
+                for uses within <EuiCode language="sass">flex</EuiCode>{' '}
+                containers.
+              </p>
+            </>
+          }
+          snippet="@include euiFullHeight;"
+          snippetLanguage="sass"
+        />
+      )}
     </>
   );
 };
diff --git a/src-docs/src/views/scroll/scroll_example.js b/src-docs/src/views/scroll/scroll_example.js
@@ -9,9 +9,9 @@ import {
 } from '../../../../src';
 
 import ScrollBar from './scroll';
-import Utilities from './utility_classes_overflow';
 import ScrollX from './scroll_x';
 import ScrollY from './scroll_y';
+import FullHeight from './full_height';
 
 export const ScrollExample = {
   title: 'Scroll',
@@ -101,11 +101,7 @@ export const ScrollExample = {
       title: 'Full height layout',
       color: 'subdued',
       wrapText: false,
-      text: (
-        <>
-          <Utilities />
-        </>
-      ),
+      text: <FullHeight />,
     },
   ],
 };
diff --git a/src-docs/src/views/scroll/scroll_x.tsx b/src-docs/src/views/scroll/scroll_x.tsx
@@ -84,7 +84,7 @@ export default () => {
               <p>
                 To mask the top and bottom of the scrolled content, indicating
                 visually that there is more content below, pass in true to the
-                second paremeter <EuiCode>mask</EuiCode>.
+                second parameter <EuiCode>mask</EuiCode>.
               </p>
               <p>
                 <EuiCode>{"useEuiOverflowScroll('x', true);"}</EuiCode>

diff --git a/src-docs/src/views/scroll/scroll_y.tsx b/src-docs/src/views/scroll/scroll_y.tsx
@@ -60,7 +60,7 @@ export default () => {
               <p>
                 To mask the top and bottom of the scrolled content, indicating
                 visually that there is more content below, pass in true to the
-                second paremeter <EuiCode>mask</EuiCode>.
+                second parameter <EuiCode>mask</EuiCode>.
               </p>
               <p>
                 <EuiCode>{"useEuiOverflowScroll('y', true);"}</EuiCode>

diff --git a/src/components/breadcrumbs/breadcrumb.styles.ts b/src/components/breadcrumbs/breadcrumb.styles.ts
@@ -81,10 +81,10 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
     // Types
     page: css`
       &:is(a):focus {
-        ${euiFocusRing(euiTheme, 'inset')};
+        ${euiFocusRing(euiThemeContext, 'inset')};
       }
       &:is(button):focus {
-        ${euiFocusRing(euiTheme, 'center')};
+        ${euiFocusRing(euiThemeContext, 'center')};
       }
     `,
     application: css`
@@ -109,7 +109,7 @@ export const euiBreadcrumbContentStyles = (euiThemeContext: UseEuiTheme) => {
         color: ${euiTheme.colors.link};
 
         :focus {
-          ${euiFocusRing(euiTheme, 'inset')};
+          ${euiFocusRing(euiThemeContext, 'inset')};
 
           :focus-visible {
             border-radius: ${euiTheme.border.radius.medium};

diff --git a/src/components/image/image_button.styles.ts b/src/components/image/image_button.styles.ts
@@ -51,7 +51,7 @@ export const euiImageButtonStyles = (euiThemeContext: UseEuiTheme) => {
       }
 
       &:focus {
-        ${euiFocusRing(euiTheme, 'outset')}
+        ${euiFocusRing(euiThemeContext, 'outset')}
       }
     `,
     fullWidth: css`

diff --git a/src/components/link/link.styles.ts b/src/components/link/link.styles.ts
@@ -39,7 +39,8 @@ export const euiLinkFocusCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
   `;
 };
 
-export const euiLinkCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
+export const euiLinkCSS = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return `
     font-weight: ${euiTheme.font.weight.medium};
     text-align: left;
@@ -49,16 +50,17 @@ export const euiLinkCSS = (euiTheme: UseEuiTheme['euiTheme']) => {
     }
 
     &:focus {
-      ${euiFocusRing(euiTheme, 'outset')}
+      ${euiFocusRing(euiThemeContext, 'outset')}
       ${euiLinkFocusCSS(euiTheme)}
     }
   `;
 };
 
-export const euiLinkStyles = ({ euiTheme }: UseEuiTheme) => {
+export const euiLinkStyles = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
   return {
     euiLink: css`
-      ${euiLinkCSS(euiTheme)}
+      ${euiLinkCSS(euiThemeContext)}
       user-select: text;
 
       &[target='_blank'] {

diff --git a/src/components/text/text.styles.ts b/src/components/text/text.styles.ts
@@ -226,7 +226,7 @@ export const euiTextStyles = (euiThemeContext: UseEuiTheme) => {
       // Style anchors that don't have a class. This prevents overwriting "buttons"
       // and other stylized elements passed in.
       a:not([class]) {
-        ${euiLinkCSS(euiTheme)}
+        ${euiLinkCSS(euiThemeContext)}
       }
 
       img {

diff --git a/src/components/toast/global_toast_list.styles.ts b/src/components/toast/global_toast_list.styles.ts
@@ -11,6 +11,7 @@ import {
   euiBreakpoint,
   euiScrollBarStyles,
   logicalCSS,
+  logicalCSSWithFallback,
   logicalSizeCSS,
 } from '../../global_styling';
 import { UseEuiTheme } from '../../services';
@@ -34,8 +35,7 @@ export const euiGlobalToastListStyles = (euiThemeContext: UseEuiTheme) => {
       ${logicalCSS('bottom', 0)};
       ${logicalCSS('width', `${euiToastWidth + euiTheme.base * 5}px`)}; /* 2 */
       ${logicalCSS('max-height', '100vh')}; /* 1 */
-      overflow-y: auto; // Fallback for the 'overflow-inline' logical property, which is not yet supported
-      ${logicalCSS('overflow-y', 'auto')};
+      ${logicalCSSWithFallback('overflow-y', 'auto')};
 
       // Hide the scrollbar entirely
       scrollbar-width: none;

diff --git a/src/global_styling/functions/__snapshots__/logicals.test.ts.snap b/src/global_styling/functions/__snapshots__/logicals.test.ts.snap
@@ -86,9 +86,9 @@ exports[`logicalCSS mixin returns a string property for each directional propert
 
 exports[`logicalCSS mixin returns a string property for each directional property: min-width 1`] = `"min-inline-size: 8px;"`;
 
-exports[`logicalCSS mixin returns a string property for each directional property: overflow-x 1`] = `"overflow-block: 8px;"`;
+exports[`logicalCSS mixin returns a string property for each directional property: overflow-x 1`] = `"overflow-inline: 8px;"`;
 
-exports[`logicalCSS mixin returns a string property for each directional property: overflow-y 1`] = `"overflow-inline: 8px;"`;
+exports[`logicalCSS mixin returns a string property for each directional property: overflow-y 1`] = `"overflow-block: 8px;"`;
 
 exports[`logicalCSS mixin returns a string property for each directional property: padding-bottom 1`] = `"padding-block-end: 8px;"`;
 
@@ -110,6 +110,13 @@ exports[`logicalCSS mixin returns a string property for each directional propert
 
 exports[`logicalCSS mixin returns a string property for each directional property: width 1`] = `"inline-size: 8px;"`;
 
+exports[`logicalCSSWithFallback  returns both the original property and the logical property 1`] = `
+"
+  overflow-x: auto;
+  overflow-inline: auto;
+"
+`;
+
 exports[`logicalStyle mixin returns an object property for each directional property: border-bottom 1`] = `
 Object {
   "borderBlockEnd": "8px",
@@ -370,13 +377,13 @@ Object {
 
 exports[`logicalStyle mixin returns an object property for each directional property: overflow-x 1`] = `
 Object {
-  "overflowBlock": "8px",
+  "overflowInline": "8px",
 }
 `;
 
 exports[`logicalStyle mixin returns an object property for each directional property: overflow-y 1`] = `
 Object {
-  "overflowInline": "8px",
+  "overflowBlock": "8px",
 }
 `;
 

diff --git a/src/global_styling/functions/logicals.test.ts b/src/global_styling/functions/logicals.test.ts
@@ -11,6 +11,7 @@ import {
   LOGICAL_PROPERTIES,
   LOGICAL_TEXT_ALIGNMENT,
   logicalCSS,
+  logicalCSSWithFallback,
   logicalStyle,
   logicalTextAlignCSS,
   logicalTextAlignStyle,
@@ -28,6 +29,14 @@ describe('logicalCSS mixin returns a string property', () => {
   });
 });
 
+describe('logicalCSSWithFallback ', () => {
+  it('returns both the original property and the logical property', () => {
+    expect(
+      testCustomHook(() => logicalCSSWithFallback('overflow-x', 'auto')).return
+    ).toMatchSnapshot();
+  });
+});
+
 describe('logicalStyle mixin returns an object property', () => {
   describe('for each directional property:', () => {
     LOGICAL_PROPERTIES.forEach((prop) => {

diff --git a/src/global_styling/functions/logicals.ts b/src/global_styling/functions/logicals.ts
@@ -65,8 +65,8 @@ const logicalSize = {
 };
 
 const logicalOverflow = {
-  'overflow-x': 'overflow-block',
-  'overflow-y': 'overflow-inline',
+  'overflow-x': 'overflow-inline',
+  'overflow-y': 'overflow-block',
 };
 
 const logicalBorders = {
@@ -122,6 +122,24 @@ export const logicalCSS = (property: LogicalProperties, value?: any) => {
   return `${logicals[property]}: ${value};`;
 };
 
+/**
+ * Some logical properties are not yet fully supported by all browsers.
+ * For those cases, we should use the old property as a fallback for
+ * browsers missing support, while allowing supporting browsers to use
+ * the logical properties.
+ *
+ * Examples:
+ * https://caniuse.com/?search=overflow-block
+ * https://caniuse.com/mdn-css_properties_float_flow_relative_values
+ */
+export const logicalCSSWithFallback = (
+  property: LogicalProperties,
+  value?: any
+) => `
+  ${property}: ${value};
+  ${logicalCSS(property, value)}
+`;
+
 /**
  *
  * @param property A string that is a valid CSS logical property

diff --git a/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap b/src/global_styling/mixins/__snapshots__/_typography.test.ts.snap
@@ -205,7 +205,7 @@ exports[`euiTextBreakWord returns a string of CSS text 1`] = `
 
 exports[`euiTextTruncate allows customizing max-width 1`] = `
 "
-  max-width: 150px; // Ensure that the node has a maximum width after which truncation can occur
+  max-inline-size: 150px;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;
@@ -214,7 +214,7 @@ exports[`euiTextTruncate allows customizing max-width 1`] = `
 
 exports[`euiTextTruncate returns a string of CSS text 1`] = `
 "
-  max-width: 100%; // Ensure that the node has a maximum width after which truncation can occur
+  max-inline-size: 100%;
   overflow: hidden !important;
   text-overflow: ellipsis !important;
   white-space: nowrap !important;