Merge branch 'main' into emotion/form-layout-3

packages/eui/changelogs/upcoming/7957.md

@@ -0,0 +1,9 @@
+**Bug fixes**
+
+- Fixed a visual bug with `<EuiDualRange showInput="inputWithPopover" />` form controls
+
+**CSS-in-JS conversions**
+
+- Converted `EuiFormLayoutDelimited` to Emotion
+- Fixed `cloneElementWithCss` throwing an error when used multiple times without a `key` prop
+- Updated `cloneElementWithCss` utility to support a third argument that allows prepending vs. appending the cloned Emotion css className

packages/eui/changelogs/upcoming/7961.md

@@ -0,0 +1,3 @@
+- Updated `EuiHeaderLinks`'s mobile menu to set a slight popover padding by default
+  - This can be overridden via `popoverProps.panelPaddingSize` if needed.
+- Updated `EuiHeaderLink` to default to a size of `s` (down from `m`)

packages/eui/src-docs/src/components/guide_page/guide_page_header.tsx

@@ -1,15 +1,13 @@
-import React, { useState, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import {
   EuiBadge,
-  EuiButtonEmpty,
-  EuiFlexGroup,
-  EuiFlexItem,
   EuiHeader,
+  EuiHeaderLink,
+  EuiHeaderLinks,
   EuiHeaderLogo,
   EuiHeaderSectionItemButton,
   EuiIcon,
-  EuiPopover,
   EuiToolTip,
 } from '../../../../src/components';
 import { useIsWithinBreakpoints } from '../../../../src/services';
@@ -69,14 +67,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
   const github = useMemo(() => {
     const label = 'EUI GitHub repo';
     return isMobileSize ? (
-      <EuiButtonEmpty
-        size="s"
-        flush="both"
-        iconType="logoGithub"
-        href={GITHUB_URL}
-      >
+      <EuiHeaderLink color="primary" iconType="logoGithub" href={GITHUB_URL}>
         {label}
-      </EuiButtonEmpty>
+      </EuiHeaderLink>
     ) : (
       <EuiToolTip content="Github">
         <EuiHeaderSectionItemButton aria-label={label} href={GITHUB_URL}>
@@ -90,9 +83,9 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     const label = 'Codesandbox';
     return isMobileSize ? (
       <CodeSandboxLink type="tsx">
-        <EuiButtonEmpty size="s" flush="both" iconType="logoCodesandbox">
+        <EuiHeaderLink color="primary" iconType="logoCodesandbox">
           {label}
-        </EuiButtonEmpty>
+        </EuiHeaderLink>
       </CodeSandboxLink>
     ) : (
       <EuiToolTip content="Codesandbox" key="codesandbox">
@@ -105,39 +98,18 @@ export const GuidePageHeader: React.FunctionComponent<GuidePageHeaderProps> = ({
     );
   }, [isMobileSize]);
 
-  const [mobilePopoverIsOpen, setMobilePopoverIsOpen] = useState(false);
-
   const mobileMenu = useMemo(() => {
-    const button = (
-      <EuiHeaderSectionItemButton
-        aria-label="Open EUI options menu"
-        onClick={() => setMobilePopoverIsOpen((isOpen) => !isOpen)}
-      >
-        <EuiIcon type="apps" aria-hidden="true" />
-      </EuiHeaderSectionItemButton>
-    );
-
     return (
-      <EuiPopover
-        button={button}
-        isOpen={mobilePopoverIsOpen}
-        closePopover={() => setMobilePopoverIsOpen(false)}
+      <EuiHeaderLinks
+        popoverButtonProps={{ 'aria-label': 'Open EUI options menu' }}
+        popoverBreakpoints="all"
       >
-        <EuiFlexGroup
-          direction="column"
-          alignItems="flexStart"
-          gutterSize="none"
-          responsive={false}
-        >
-          <EuiFlexItem>{github}</EuiFlexItem>
-          <EuiFlexItem>
-            <GuideFigmaLink />
-          </EuiFlexItem>
-          <EuiFlexItem>{codesandbox}</EuiFlexItem>
-        </EuiFlexGroup>
-      </EuiPopover>
+        {github}
+        <GuideFigmaLink />
+        {codesandbox}
+      </EuiHeaderLinks>
     );
-  }, [mobilePopoverIsOpen, codesandbox, github]);
+  }, [codesandbox, github]);
 
   const rightSideItems = isMobileSize
     ? [

packages/eui/src-docs/src/components/guide_theme_selector/guide_figma_link.tsx

@@ -1,15 +1,17 @@
 /* eslint-disable no-restricted-globals */
 import React from 'react';
 
-import { EuiButtonEmpty } from '../../../../src/components/button';
 import { useIsWithinBreakpoints } from '../../../../src/services';
-
-import { ThemeContext } from '../with_theme';
-import { EuiHeaderSectionItemButton } from '../../../../src/components/header';
+import {
+  EuiHeaderLink,
+  EuiHeaderSectionItemButton,
+} from '../../../../src/components/header';
 import { EuiToolTip } from '../../../../src/components/tool_tip';
 import { EuiIcon } from '../../../../src/components/icon';
 import logoFigma from '../../images/logo-figma.svg';
 
+import { ThemeContext } from '../with_theme';
+
 type GuideFigmaLinkProps = {
   context?: any;
 };
@@ -34,9 +36,9 @@ const GuideFigmaLinkComponent: React.FunctionComponent<
   const label = 'EUI Figma Design Library';
 
   return isMobileSize ? (
-    <EuiButtonEmpty size="s" flush="both" iconType={logoFigma} href={href}>
+    <EuiHeaderLink color="primary" iconType={logoFigma} href={href}>
       {label}
-    </EuiButtonEmpty>
+    </EuiHeaderLink>
   ) : (
     <EuiToolTip
       title={label}

packages/eui/src-docs/src/views/form_controls/form_control_layout_range.tsx

@@ -19,15 +19,15 @@ export default () => (
       fullWidth
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -36,15 +36,15 @@ export default () => (
     <EuiFormControlLayoutDelimited
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -54,15 +54,15 @@ export default () => (
       append={<EuiFormLabel>px</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -73,14 +73,14 @@ export default () => (
       startControl={
         <EuiFieldNumber
           placeholder="0"
-          className="euiFieldNumber"
+          controlOnly
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -91,15 +91,15 @@ export default () => (
       isLoading
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -109,15 +109,15 @@ export default () => (
       isLoading
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -127,15 +127,15 @@ export default () => (
       compressed
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -145,16 +145,16 @@ export default () => (
       prepend={<EuiFormLabel>Add</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter="+"
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -164,16 +164,16 @@ export default () => (
       prepend={<EuiFormLabel>Merge</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       delimiter={<EuiIcon type="merge" />}
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           aria-label="Use aria labels when no actual label is in use"
         />
       }
@@ -184,16 +184,16 @@ export default () => (
       prepend={<EuiFormLabel>Read only</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           readOnly
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           readOnly
           aria-label="Use aria labels when no actual label is in use"
         />
@@ -205,16 +205,16 @@ export default () => (
       prepend={<EuiFormLabel>Disabled</EuiFormLabel>}
       startControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="0"
-          className="euiFieldNumber"
           disabled
           aria-label="Use aria labels when no actual label is in use"
         />
       }
       endControl={
         <EuiFieldNumber
+          controlOnly
           placeholder="100"
-          className="euiFieldNumber"
           disabled
           aria-label="Use aria labels when no actual label is in use"
         />

packages/eui/src/components/date_picker/__snapshots__/date_picker.test.tsx.snap

@@ -5,10 +5,10 @@ exports[`EuiDatePicker localization accepts the locale prop 1`] = `
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"
@@ -484,10 +484,10 @@ exports[`EuiDatePicker localization inherits locale from context 1`] = `
   class="euiDatePicker testClass1 testClass2 emotion-euiDatePicker-inline-shadow-euiTestCss"
 >
   <div
-    class="euiFormControlLayout euiFormControlLayoutDelimited emotion-euiFormControlLayout"
+    class="euiFormControlLayout emotion-euiFormControlLayout-group"
   >
     <div
-      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
+      class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper-inGroup-prependOnly-appendOnly"
     >
       <div
         class="react-datepicker emotion-euiReactDatePicker"