Merge branch 'main' into storybook/7480-stories-m-o

.stylelintrc.js

@@ -154,6 +154,9 @@ module.exports = {
         // This is set to deprecate after stylelint v16, but in the meanwhile, is helpful
         // for finding extraneous semicolons after utils that already output semicolons (e.g. logicalCSS())
         'no-extra-semicolons': true,
+
+        // Emotion uses the `label` property to generate the output className string
+        'property-no-unknown': [true, { ignoreProperties: 'label' }],
       },
     },
   ],

changelogs/upcoming/7602.md

@@ -0,0 +1,4 @@
+**Dependency updates**
+
+- Updated `prop-types` to v15.18.1
+- Removed `prop-types` as a peer depedency, per package recommendation

changelogs/upcoming/7603.md

@@ -0,0 +1 @@
+- `EuiHeaderLinks` now accepts a `children` render function that will be passed a `closeMobilePopover` callback, allowing consumers to close the mobile popover by its content

changelogs/upcoming/7606.md

@@ -0,0 +1,7 @@
+**Bug fixes**
+
+- Fixed `EuiIconTip`'s default `aria-label` text to be i18n tokenizable
+
+**Accessibility**
+
+- `EuiIcons` no longer apply `aria-hidden` to empty icons, as long as a valid title or label is provided to the icon. In particular, this is intended to improve the accessibility of loading `EuiIconTip`s.

changelogs/upcoming/7607.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed `EuiTextArea`'s CSS box model to no longer render a few extra pixels of strut height

changelogs/upcoming/7609.md

@@ -0,0 +1 @@
+- Updated `EuiSelectable` to support scrolling list containers when `listProps.isVirtualization` is set to `false`

package.json

@@ -68,7 +68,7 @@
     "lodash": "^4.17.21",
     "mdast-util-to-hast": "^10.2.0",
     "numeral": "^2.0.6",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.8.1",
     "react-dropzone": "^11.7.1",
     "react-element-to-jsx-string": "^15.0.0",
     "react-focus-on": "^3.9.1",
@@ -212,7 +212,6 @@
     "pre-push": "^0.1.4",
     "prettier": "^2.8.8",
     "process": "^0.11.10",
-    "prop-types": "^15.6.0",
     "raw-loader": "^4.0.1",
     "react": "^18.2.0",
     "react-16": "npm:react@^16.14.0",
@@ -257,7 +256,6 @@
     "@types/react": "^16.9 || ^17.0 || ^18.0",
     "@types/react-dom": "^16.9 || ^17.0 || ^18.0",
     "moment": "^2.13.0",
-    "prop-types": "^15.5.0",
     "react": "^16.12 || ^17.0 || ^18.0",
     "react-dom": "^16.12 || ^17.0 || ^18.0",
     "typescript": "~4.5.3"

src-docs/src/views/code/code_example.js

@@ -91,7 +91,7 @@ export const CodeExample = {
           or want to print long code (e.g., printing JSON from an API), we
           recommend installing a version of Monaco. If you are building within
           the Kibana platform, you can use their{' '}
-          <EuiLink href="https://github.com/elastic/kibana/tree/main/src/plugins/kibana_react/public/code_editor">
+          <EuiLink href="https://github.com/elastic/kibana/tree/main/packages/shared-ux/code_editor/impl">
             <strong>CodeEditor</strong>
           </EuiLink>
           .

src-docs/src/views/guidelines/getting_started/getting_started.js

@@ -44,7 +44,7 @@ export const GettingStarted = {
           <EuiSpacer />
           <EuiCodeBlock language="bash" isCopyable fontSize="m">
             {
-              'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment prop-types'
+              'yarn add @elastic/eui @elastic/datemath @emotion/react @emotion/css moment'
             }
           </EuiCodeBlock>
           <EuiSpacer />

src-docs/src/views/header/header_links.tsx

@@ -17,11 +17,19 @@ export default () => {
 
       <EuiHeaderSectionItem>
         <EuiHeaderLinks aria-label="App navigation links example">
-          <EuiHeaderLink isActive>Docs</EuiHeaderLink>
+          {(closeMobilePopover) => (
+            <>
+              <EuiHeaderLink isActive onClick={closeMobilePopover}>
+                Docs
+              </EuiHeaderLink>
 
-          <EuiHeaderLink>Code</EuiHeaderLink>
+              <EuiHeaderLink onClick={closeMobilePopover}>Code</EuiHeaderLink>
 
-          <EuiHeaderLink iconType="help">Help</EuiHeaderLink>
+              <EuiHeaderLink iconType="help" onClick={closeMobilePopover}>
+                Help
+              </EuiHeaderLink>
+            </>
+          )}
         </EuiHeaderLinks>
       </EuiHeaderSectionItem>
     </EuiHeader>

src-docs/src/views/selectable/selectable_example.js

@@ -479,11 +479,14 @@ export const SelectableExample = {
           </p>
           <p>
             If <EuiCode>listProps.isVirtualized</EuiCode> is set to{' '}
-            <EuiCode>false</EuiCode>, each row will fit its contents and removes
-            all scrolling. Therefore, we recommend having a large enough
-            container to accommodate all options. You can also remove truncation
-            by setting <EuiCode>{'textWrap="wrap"'}</EuiCode> when
-            virtualization is off.
+            <EuiCode>false</EuiCode>, each row will fit its content. You can
+            also remove truncation by setting{' '}
+            <EuiCode>{'textWrap="wrap"'}</EuiCode> when virtualization is off.
+            Note that while this is useful for dynamic options, it can also be
+            computationally expensive as <em>all</em> off-screen options will be
+            rendered to the DOM. We do not recommend turning off virtualization
+            for high numbers of options, but if you absolutely must do so, we
+            suggest using methods such as async loading more options.
           </p>
           <h3>Custom content</h3>
           <p>

src/components/form/text_area/_text_area.scss

@@ -2,6 +2,11 @@
   @include euiFormControlStyle;
   line-height: $euiLineHeight; // give more spacing between multiple lines
 
+  // <textarea>s default to `inline-block`, which causes an extra 2-3px of
+  // unnecessary height within its parent `block` form control wrapper.
+  // @see https://stackoverflow.com/a/27536461/4294462
+  display: block;
+
   // Textareas have their own sizing
   &,
   &--compressed {

src/components/header/header_links/__snapshots__/header_links.test.tsx.snap

@@ -56,18 +56,7 @@ exports[`EuiHeaderLinks is rendered 1`] = `
 </nav>
 `;
 
-exports[`EuiHeaderLinks popover props is never rendered with "none" 1`] = `
-<nav
-  aria-label="App menu"
-  class="euiHeaderLinks emotion-euiHeaderLinks"
->
-  <div
-    class="euiHeaderLinks__list emotion-euiHeaderLinks__list-s-EuiHeaderLinks"
-  />
-</nav>
-`;
-
-exports[`EuiHeaderLinks popover props is rendered 1`] = `
+exports[`EuiHeaderLinks mobile menu/popover renders various popover props 1`] = `
 <nav
   aria-label="App menu"
   class="euiHeaderLinks emotion-euiHeaderLinks"

src/components/header/header_links/header_links.test.tsx

@@ -7,9 +7,14 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
+import {
+  render,
+  waitForEuiPopoverOpen,
+  waitForEuiPopoverClose,
+} from '../../../test/rtl';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
-import { render } from '../../../test/rtl';
 
 import { EuiHeaderLinks, GUTTER_SIZES } from './header_links';
 
@@ -36,8 +41,8 @@ describe('EuiHeaderLinks', () => {
     });
   });
 
-  describe('popover props', () => {
-    test('is rendered', () => {
+  describe('mobile menu/popover', () => {
+    it('renders various popover props', () => {
       const { container } = render(
         <EuiHeaderLinks
           popoverBreakpoints={['xs', 's', 'm', 'l', 'xl']}
@@ -52,12 +57,29 @@ describe('EuiHeaderLinks', () => {
       expect(container.firstChild).toMatchSnapshot();
     });
 
-    test('is never rendered with "none"', () => {
+    it('never renders a popover with "none" breakpoint', () => {
       const { container } = render(
-        <EuiHeaderLinks popoverBreakpoints={'none'} />
+        <EuiHeaderLinks popoverBreakpoints="none" />
       );
 
-      expect(container.firstChild).toMatchSnapshot();
+      expect(container.querySelector('.euiPopover')).toBeNull();
+    });
+
+    it('passes a callback that closes the menu/popover to children render props', () => {
+      const { getByLabelText, getByText } = render(
+        <EuiHeaderLinks popoverBreakpoints="all">
+          {(closePopover) => (
+            <a href="#" onClick={closePopover}>
+              This link should close the popover
+            </a>
+          )}
+        </EuiHeaderLinks>
+      );
+
+      fireEvent.click(getByLabelText('Open menu'));
+      waitForEuiPopoverOpen();
+      fireEvent.click(getByText('This link should close the popover'));
+      waitForEuiPopoverClose();
     });
   });
 });

src/components/header/header_links/header_links.tsx

@@ -7,6 +7,7 @@
  */
 
 import React, {
+  ReactNode,
   HTMLAttributes,
   FunctionComponent,
   useState,
@@ -39,7 +40,14 @@ type EuiHeaderLinksPopoverButtonProps =
   };
 
 export type EuiHeaderLinksProps = CommonProps &
-  HTMLAttributes<HTMLElement> & {
+  Omit<HTMLAttributes<HTMLElement>, 'children'> & {
+    /**
+     * Takes any rendered node(s), typically of `EuiHeaderLink`s.
+     *
+     * Optionally takes a render function that will pass a callback allowing you
+     * to close the mobile popover from within your popover content.
+     */
+    children?: ReactNode | ((closeMobilePopover: () => void) => ReactNode);
     /**
      * Spacing between direct children
      */
@@ -116,6 +124,9 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
     </EuiI18n>
   );
 
+  const renderedChildren =
+    typeof children === 'function' ? children(closeMenu) : children;
+
   return (
     <EuiI18n token="euiHeaderLinks.appNavigation" default="App menu">
       {(appNavigation: string) => (
@@ -133,7 +144,7 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
                 styles.gutterSizes[gutterSize],
               ]}
             >
-              {children}
+              {renderedChildren}
             </div>
           </EuiHideFor>
 
@@ -151,7 +162,7 @@ export const EuiHeaderLinks: FunctionComponent<EuiHeaderLinksProps> = ({
                 className="euiHeaderLinks__mobileList"
                 css={styles.euiHeaderLinks__mobileList}
               >
-                {children}
+                {renderedChildren}
               </div>
             </EuiPopover>
           </EuiShowFor>

src/components/i18n/i18n.stories.tsx

@@ -0,0 +1,87 @@
+/*
+ * 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.
+ */
+
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiI18n, EuiI18nProps, I18nTokensShape } from './i18n';
+import { EuiCard } from '../card';
+
+type Props = EuiI18nProps<any, any, string[]>;
+
+const meta: Meta<Props> = {
+  title: 'Utilities/EuiI18n',
+  component: EuiI18n,
+};
+
+export default meta;
+type Story = StoryObj<Props>;
+
+export const SingleToken: Story = {
+  argTypes: {
+    default: { control: { type: 'text' } },
+    ...hideStorybookControls(['children', 'tokens', 'defaults']),
+  },
+  args: {
+    token: 'euiI18nBasic.basicexample',
+    default:
+      'This is the English copy that would be replaced by a translation defined by the euiI18nBasic.basicexample token.',
+  },
+};
+
+export const Interpolation: Story = {
+  argTypes: {
+    ...hideStorybookControls(['children', 'tokens', 'defaults']),
+  },
+  args: {
+    token: 'euiI18nInterpolation.clickedCount',
+    default: 'Clicked on button {count} times.',
+    values: { count: 3 },
+  },
+};
+
+export const MultipleTokens: Story = {
+  argTypes: {
+    ...hideStorybookControls(['token', 'default']),
+  },
+  args: {
+    tokens: ['euiI18n.title', 'euiI18n.description'],
+    defaults: ['Card title', 'Card description'],
+  },
+  render: ({ tokens, defaults }: I18nTokensShape<string[]>) => (
+    // eslint-disable-next-line local/i18n
+    <EuiI18n tokens={tokens} defaults={defaults}>
+      {([title, description]: string[]) => (
+        <EuiCard title={title} description={description} />
+      )}
+    </EuiI18n>
+  ),
+};
+
+export const MultipleTokenInterpolation: Story = {
+  argTypes: {
+    ...hideStorybookControls(['token', 'default']),
+  },
+  args: {
+    tokens: ['euiI18nMulti.title', 'euiI18nMulti.description'],
+    defaults: [
+      'How often was the {name} cuddled?',
+      'The {name} was cuddled {count} times.',
+    ],
+    values: { name: 'cat', count: 3 },
+  },
+  render: ({ tokens, defaults, values }: I18nTokensShape<string[]>) => (
+    // eslint-disable-next-line local/i18n
+    <EuiI18n tokens={tokens} defaults={defaults} values={values}>
+      {([title, description]: string[]) => (
+        <EuiCard title={title} description={description} />
+      )}
+    </EuiI18n>
+  ),
+};

src/components/i18n/i18n.tsx

@@ -90,13 +90,19 @@ type ResolvedType<T> = T extends (...args: any[]) => any ? ReturnType<T> : T;
 interface I18nTokenShape<T, DEFAULT extends Renderable<T>> {
   token: string;
   default: DEFAULT;
+  /**
+   * Render function that returns a ReactElement
+   */
   children?: (x: ResolvedType<DEFAULT>) => ReactChild;
   values?: T;
 }
 
-interface I18nTokensShape<T extends any[]> {
+export interface I18nTokensShape<T extends any[]> {
   tokens: string[];
   defaults: T;
+  /**
+   * Render function that returns a ReactElement
+   */
   children: (x: Array<T[number]>) => ReactChild;
   values?: Record<string, ReactChild>;
 }