[EuiPopover and parts] Converted to Emotion (#5977)

* Move Amsterdam Sass overrides to src/ * [EuiPopoverFooter] Converted except for… Inherited panel padding/margin * [EuiPopoverTitle] Converted except for… Inherited panel padding/margin * Removed Sass mixin `euiPopoverTitle` * Added [EuiPopoverArrow] and simplified styles * [EuiPopover] BREAKING Changed `display` type to accept real CSS `display` values * Fix grid tests * WIP: Converted base EuiPaopover and panel styles * New EuiPopoverPanel for internal use * Skip test & fix props * Fixed EuiTour’s styles * Undo HOC by moving panel styles to it’s own folder * Created a EuiPopoverPanelContext for passing through `paddingSize` * [EuiInputPopover] Converted by applying max-width directly in component * Converted to logical properties * Convert some docs files to TS * Increase opacity of shadows in DARK mode * Cleanup * cl * Mostly fix class name output * Fix TS and rename internal files with `_` * Attempting to fix props table * EuiPopoverPanel extends _EuiPanelDivlike and better prop table * snapshot updates Co-authored-by: Constance Chen <[email protected]> Co-authored-by: Greg Thompson <[email protected]>
elastic · Jul 20, 2022 · b86ee8c · b86ee8c
1 parent 4abbb81
commit b86ee8c
Show file tree

Hide file tree

Showing 92 changed files with 1,484 additions and 1,010 deletions.
diff --git a/src-docs/src/views/popover/initial_focus.js → src-docs/src/views/popover/initial_focus.tsx b/src-docs/src/views/popover/initial_focus.js → src-docs/src/views/popover/initial_focus.tsx
@@ -6,7 +6,7 @@ import {
   EuiPopover,
   EuiSpacer,
   EuiFieldText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);
@@ -34,7 +34,9 @@ export default () => {
 
       <EuiSpacer />
 
-      <EuiButton fill>Submit</EuiButton>
+      <EuiButton size="s" fill>
+        Submit
+      </EuiButton>
     </EuiPopover>
   );
 };
diff --git a/src-docs/src/views/popover/input_popover.js → src-docs/src/views/popover/input_popover.tsx b/src-docs/src/views/popover/input_popover.js → src-docs/src/views/popover/input_popover.tsx
@@ -1,10 +1,6 @@
 import React, { useState } from 'react';
 
-import {
-  EuiInputPopover,
-  EuiFieldText,
-  EuiSpacer,
-} from '../../../../src/components';
+import { EuiInputPopover, EuiFieldText, EuiSpacer } from '../../../../src';
 
 export default () => {
   const [inputWidth, setInputWidth] = useState(200);
@@ -27,10 +23,9 @@ export default () => {
   const inputTwo = (
     <EuiFieldText
       onFocus={() => {
-        setInputWidth(400);
+        setInputWidth(300);
         toggleIsPopoverOpenTwo();
       }}
-      style={{ width: inputWidth }}
       aria-label="Popover attached to an adjustable sized input element"
     />
   );
@@ -52,6 +47,7 @@ export default () => {
       <EuiInputPopover
         input={inputTwo}
         isOpen={isPopoverOpenTwo}
+        style={{ width: inputWidth }}
         closePopover={() => {
           toggleIsPopoverOpenTwo(false);
           setInputWidth(200);

diff --git a/src-docs/src/views/popover/popover.js → src-docs/src/views/popover/popover.tsx b/src-docs/src/views/popover/popover.js → src-docs/src/views/popover/popover.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiPopover, EuiButton, EuiText } from '../../../../src/components';
+import { EuiPopover, EuiButton, EuiText } from '../../../../src';
 
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);

diff --git a/.../views/popover/popover_anchor_position.js → ...views/popover/popover_anchor_position.tsx b/.../views/popover/popover_anchor_position.js → ...views/popover/popover_anchor_position.tsx
@@ -7,7 +7,7 @@ import {
   EuiFlexItem,
   EuiSpacer,
   EuiText,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isPopoverOpen1, setIsPopoverOpen1] = useState(false);

diff --git a/src-docs/src/views/popover/popover_block.js → src-docs/src/views/popover/popover_block.tsx b/src-docs/src/views/popover/popover_block.js → src-docs/src/views/popover/popover_block.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiButton, EuiPopover } from '../../../../src/components';
+import { EuiButton, EuiPopover } from '../../../../src';
 
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);

diff --git a/src-docs/src/views/popover/popover_example.js b/src-docs/src/views/popover/popover_example.js
@@ -12,6 +12,8 @@ import {
   EuiCallOut,
 } from '../../../../src/components';
 
+import { EuiPopoverPanelProps } from './props';
+
 import Popover from './popover';
 const popoverSource = require('!!raw-loader!./popover');
 
@@ -171,7 +173,7 @@ export const PopoverExample = {
           </p>
         </>
       ),
-      props: { EuiPopover },
+      props: { EuiPopover, EuiPopoverPanelProps },
       snippet: popOverSnippet,
       demo: <Popover />,
     },

diff --git a/src-docs/src/views/popover/popover_fixed.js → src-docs/src/views/popover/popover_fixed.tsx b/src-docs/src/views/popover/popover_fixed.js → src-docs/src/views/popover/popover_fixed.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiButton, EuiPopover } from '../../../../src/components';
+import { EuiButton, EuiPopover } from '../../../../src';
 
 export default () => {
   const [isExampleShown, setIsExampleShown] = useState(false);

diff --git a/...views/popover/popover_panel_class_name.js → ...iews/popover/popover_panel_class_name.tsx b/...views/popover/popover_panel_class_name.js → ...iews/popover/popover_panel_class_name.tsx
@@ -1,6 +1,6 @@
 import React, { useState } from 'react';
 
-import { EuiPopover, EuiButton, EuiText } from '../../../../src/components';
+import { EuiPopover, EuiButton, EuiText } from '../../../../src';
 
 export default () => {
   const [isPopoverOpen, setIsPopoverOpen] = useState(false);

diff --git a/...s/src/views/popover/popover_with_title.js → .../src/views/popover/popover_with_title.tsx b/...s/src/views/popover/popover_with_title.js → .../src/views/popover/popover_with_title.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexItem,
   EuiText,
   EuiTextColor,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isPopoverOpen1, setIsPopoverOpen1] = useState(false);

diff --git a/...ews/popover/popover_with_title_padding.js → ...ws/popover/popover_with_title_padding.tsx b/...ews/popover/popover_with_title_padding.js → ...ws/popover/popover_with_title_padding.tsx
@@ -9,7 +9,7 @@ import {
   EuiFlexItem,
   EuiText,
   EuiCode,
-} from '../../../../src/components';
+} from '../../../../src';
 
 export default () => {
   const [isPopoverOpen1, setIsPopoverOpen1] = useState(false);

diff --git a/src-docs/src/views/popover/props.tsx b/src-docs/src/views/popover/props.tsx
@@ -0,0 +1,7 @@
+import React, { FunctionComponent } from 'react';
+
+import { EuiPopoverPanelProps as _EuiPopoverPanelProps } from '../../../../src/components/popover/popover_panel/_popover_panel';
+
+export const EuiPopoverPanelProps: FunctionComponent<_EuiPopoverPanelProps> = () => (
+  <div />
+);
diff --git a/src-docs/src/views/popover/trap_focus.js → src-docs/src/views/popover/trap_focus.tsx b/src-docs/src/views/popover/trap_focus.js → src-docs/src/views/popover/trap_focus.tsx
@@ -27,7 +27,7 @@ export default () => {
   const focusId = useGeneratedHtmlId();
   useEffect(() => {
     if (isPopoverOpen) {
-      document.getElementById(focusId).focus({ preventScroll: true });
+      document.getElementById(focusId)!.focus({ preventScroll: true });
     }
   }, [isPopoverOpen, focusId]);
 

diff --git a/src-docs/src/views/theme/sizing/_sizing_js.tsx b/src-docs/src/views/theme/sizing/_sizing_js.tsx
@@ -18,6 +18,9 @@ import {
   PADDING_SIZES,
   LOGICAL_SIDES,
   EuiPanel,
+  EuiSpacer,
+  logicalSizeCSS,
+  logicalSizeStyle,
 } from '../../../../../src';
 
 import { ThemeExample } from '../_components/_theme_example';
@@ -258,6 +261,56 @@ export const UtilsJS = () => {
           </EuiText>
         </EuiAccordion>
       </EuiPanel>
+
+      <EuiSpacer size="xl" />
+
+      <ThemeExample
+        title={<code>{'logicalSizeCSS(width, height)'}</code>}
+        type="function"
+        description={
+          <p>
+            Returns the <strong>string version</strong> of the logical CSS size
+            properties given <EuiCode language="css">width</EuiCode> and{' '}
+            <EuiCode language="css">height</EuiCode>. Best used when providing
+            styles via Emotion&apos;s <EuiCode>{'css``'}</EuiCode> method.
+          </p>
+        }
+        example={
+          <p
+            css={[
+              useEuiBackgroundColorCSS().warning,
+              logicalSizeCSS('200px', '100px'),
+            ]}
+          >
+            <code>{logicalSizeCSS('200px', '100px')}</code>
+          </p>
+        }
+        snippetLanguage="emotion"
+        snippet={"${logicalSizeCSS('200px', '100px')};"}
+      />
+
+      <ThemeExample
+        title={<code>{'logicalStyle(property, value)'}</code>}
+        type="function"
+        description={
+          <p>
+            Returns the <strong>object version</strong> of the logical CSS size
+            properties given <EuiCode language="css">width</EuiCode> and{' '}
+            <EuiCode language="css">height</EuiCode>. Best used when providing
+            styles via React&apos;s <EuiCode>style</EuiCode> property.
+          </p>
+        }
+        example={
+          <p
+            css={css(useEuiBackgroundColorCSS().warning)}
+            style={logicalSizeStyle('200px', '100px')}
+          >
+            <code>{JSON.stringify(logicalSizeStyle('200px', '100px'))}</code>
+          </p>
+        }
+        snippetLanguage="tsx"
+        snippet={"<p style={logicalSizeStyle('200px', '100px')} />"}
+      />
     </>
   );
 };

diff --git a/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap b/src/components/basic_table/__snapshots__/collapsed_item_actions.test.tsx.snap
@@ -2,11 +2,11 @@
 
 exports[`CollapsedItemActions render 1`] = `
 <div
-  class="euiPopover euiPopover--anchorLeftCenter"
+  class="euiPopover emotion-euiPopover"
   id="id-actions"
 >
   <div
-    class="euiPopover__anchor"
+    class="euiPopover__anchor css-16vtueo-render"
   >
     <span
       class="euiToolTipAnchor"
@@ -41,7 +41,7 @@ exports[`CollapsedItemActions render with href and _target provided 1`] = `
     </EuiI18n>
   }
   closePopover={[Function]}
-  display="inlineBlock"
+  display="inline-block"
   hasArrow={true}
   id="id-actions"
   isOpen={true}

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.tsx.snap
@@ -114,10 +114,10 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          class="euiPopover euiPopover--anchorUpRight"
+          class="euiPopover emotion-euiPopover"
         >
           <div
-            class="euiPopover__anchor"
+            class="euiPopover__anchor css-16vtueo-render"
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"
@@ -765,10 +765,10 @@ exports[`EuiInMemoryTable with pagination and "show all" page size 1`] = `
         class="euiFlexItem euiFlexItem--flexGrowZero"
       >
         <div
-          class="euiPopover euiPopover--anchorUpRight"
+          class="euiPopover emotion-euiPopover"
         >
           <div
-            class="euiPopover__anchor"
+            class="euiPopover__anchor css-16vtueo-render"
           >
             <button
               class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--xSmall"

diff --git a/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap b/src/components/breadcrumbs/__snapshots__/breadcrumbs.test.tsx.snap
@@ -34,10 +34,10 @@ exports[`EuiBreadcrumbs is rendered 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -123,10 +123,10 @@ exports[`EuiBreadcrumbs is rendered with final item as link 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -286,10 +286,10 @@ exports[`EuiBreadcrumbs props max renders 1 item 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -447,10 +447,10 @@ exports[`EuiBreadcrumbs props responsive is rendered 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -536,10 +536,10 @@ exports[`EuiBreadcrumbs props responsive is rendered as false 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -604,10 +604,10 @@ exports[`EuiBreadcrumbs props responsive is rendered with custom breakpoints 1`]
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"
@@ -670,10 +670,10 @@ exports[`EuiBreadcrumbs props truncate as false is rendered 1`] = `
       class="euiBreadcrumb euiBreadcrumb--collapsed"
     >
       <div
-        class="euiPopover euiPopover--anchorDownCenter"
+        class="euiPopover emotion-euiPopover"
       >
         <div
-          class="euiPopover__anchor"
+          class="euiPopover__anchor css-16vtueo-render"
         >
           <button
             aria-label="See collapsed breadcrumbs"