Merge branch 'main' into resizable-button-showIndicator

changelogs/upcoming/7456.md

@@ -0,0 +1 @@
+- Enhanced `EuiResizableContainer` to preserve the drag/resize event when the user's mouse leaves the parent container and re-enters

packages/eslint-plugin/package.json

@@ -1,10 +1,10 @@
 {
   "name": "@elastic/eslint-plugin-eui",
-  "version": "0.0.2",
+  "version": "0.0.3",
   "license": "Apache-2.0",
   "repository": {
-    "type" : "git",
-    "url" : "https://github.com/elastic/eui.git"
+    "type": "git",
+    "url": "https://github.com/elastic/eui.git"
   },
   "homepage": "https://github.com/elastic/eui/blob/main/packages/eslint-plugin",
   "peerDependencies": {

src/components/accessibility/screen_reader_live/screen_reader_live.stories.tsx

@@ -0,0 +1,34 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+
+import {
+  EuiScreenReaderLive,
+  EuiScreenReaderLiveProps,
+} from './screen_reader_live';
+
+const meta: Meta<EuiScreenReaderLiveProps> = {
+  title: 'EuiScreenReaderLive',
+  component: EuiScreenReaderLive,
+  args: {
+    // Component defaults
+    role: 'status',
+    isActive: true,
+    focusRegionOnTextChange: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiScreenReaderLiveProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'You have new notifications',
+  },
+};

src/components/accessibility/screen_reader_only/screen-reader_only.stories.tsx

@@ -0,0 +1,39 @@
+/*
+ * 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 {
+  EuiScreenReaderOnly,
+  EuiScreenReaderOnlyProps,
+} from './screen_reader_only';
+
+const meta: Meta<EuiScreenReaderOnlyProps> = {
+  title: 'EuiScreenReaderOnly',
+  component: EuiScreenReaderOnly,
+  args: {
+    // Component defaults
+    showOnFocus: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiScreenReaderOnlyProps>;
+
+export const Playground: Story = {
+  args: {
+    // @ts-ignore - Normally wants a JSX/DOM node, but we're handling that below in <render>
+    children: 'Hello world',
+  },
+  render: ({ showOnFocus, children, ...args }) => (
+    <EuiScreenReaderOnly showOnFocus={showOnFocus} {...args}>
+      {showOnFocus ? <button>{children}</button> : <span>{children}</span>}
+    </EuiScreenReaderOnly>
+  ),
+};

src/components/accessibility/skip_link/skip_link.stories.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+import { hideStorybookControls } from '../../../../.storybook/utils';
+
+import { EuiSkipLink, EuiSkipLinkProps } from './skip_link';
+
+const meta: Meta<EuiSkipLinkProps> = {
+  title: 'EuiSkipLink',
+  component: EuiSkipLink,
+  args: {
+    // Component defaults
+    position: 'static',
+    destinationId: 'storybook-root',
+    fallbackDestination: 'main',
+    // Override default to true for clearer Storybook behavior
+    overrideLinkBehavior: true,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiSkipLinkProps>;
+
+export const Playground: Story = {
+  args: {
+    children: 'Skip to content',
+  },
+  // Hide certain irrelevent EuiButton props for better DX
+  argTypes: hideStorybookControls([
+    'aria-label',
+    'buttonRef',
+    'isDisabled',
+    'onClick',
+    'href',
+  ]),
+};

src/components/accordion/accordion.stories.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiAccordion, EuiAccordionProps } from './accordion';
+
+const meta: Meta<EuiAccordionProps> = {
+  title: 'EuiAccordion',
+  component: EuiAccordion,
+  argTypes: {
+    forceState: {
+      options: [undefined, 'closed', 'open'],
+    },
+  },
+  args: {
+    // Component defaults
+    role: 'group',
+    element: 'div',
+    buttonElement: 'button',
+    arrowDisplay: 'left',
+    borders: 'none',
+    initialIsOpen: false,
+    isDisabled: false,
+    isLoading: false,
+    isLoadingMessage: '',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiAccordionProps>;
+
+export const Playground: Story = {
+  args: {
+    buttonContent: 'Accordion toggle content',
+    children: 'Accordion content',
+  },
+};

src/components/aspect_ratio/aspect_ratio.stories.tsx

@@ -0,0 +1,42 @@
+/*
+ * 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 { disableStorybookControls } from '../../../.storybook/utils';
+
+import { EuiAspectRatio, EuiAspectRatioProps } from './aspect_ratio';
+
+const meta: Meta<EuiAspectRatioProps> = {
+  title: 'EuiAspectRatio',
+  component: EuiAspectRatio,
+};
+
+export default meta;
+type Story = StoryObj<EuiAspectRatioProps>;
+
+export const Playground: Story = {
+  args: {
+    height: 9,
+    width: 16,
+    maxWidth: '100%',
+    children: (
+      <div
+        style={{
+          backgroundColor: 'gray',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+        }}
+      >
+        Resize the demo window
+      </div>
+    ),
+  },
+  argTypes: disableStorybookControls(['children']),
+};

src/components/aspect_ratio/aspect_ratio.test.tsx

@@ -53,6 +53,19 @@ describe('EuiAspectRatio', () => {
     expect(container.firstChild).toMatchSnapshot();
   });
 
+  test('inherits child styles', () => {
+    const { getByTestSubject } = render(
+      <EuiAspectRatio height={4} width={9} style={{ color: 'gray' }}>
+        <div data-test-subj="child" style={{ backgroundColor: 'salmon' }} />
+      </EuiAspectRatio>
+    );
+
+    expect(getByTestSubject('child')).toHaveStyle({
+      'background-color': 'salmon',
+      color: 'gray',
+    });
+  });
+
   describe('props', () => {
     describe('maxWidth', () => {
       test('is rendered', () => {

src/components/aspect_ratio/aspect_ratio.tsx

@@ -44,6 +44,7 @@ export const EuiAspectRatio: FunctionComponent<EuiAspectRatioProps> = ({
   const classes = classNames('euiAspectRatio', className);
 
   const euiAspectRatioStyle = {
+    ...children.props.style,
     aspectRatio: `${width} / ${height}`,
     height: 'auto',
     width: '100%',

src/components/auto_sizer/auto_sizer.stories.tsx

@@ -0,0 +1,48 @@
+/*
+ * 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 { disableStorybookControls } from '../../../.storybook/utils';
+
+import { EuiPanel } from '../panel';
+
+import { EuiAutoSizer, EuiAutoSizerProps, EuiAutoSize } from './auto_sizer';
+
+const meta: Meta<EuiAutoSizerProps> = {
+  title: 'EuiAutoSizer',
+  component: EuiAutoSizer,
+  args: {
+    // Component defaults
+    tagName: 'div',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiAutoSizerProps>;
+
+export const Playground: Story = {
+  render: ({ ...args }) => (
+    <div
+      // Inherit Storybook demo viewport if no other height/width specified
+      style={{
+        blockSize: args.defaultHeight || 'calc(100vh - 2rem)',
+        inlineSize: args.defaultWidth || '100%',
+      }}
+    >
+      <EuiAutoSizer {...args}>
+        {({ height, width }: EuiAutoSize) => (
+          <EuiPanel style={{ height, width, display: 'inline-block' }}>
+            height: {height}, width: {width}
+          </EuiPanel>
+        )}
+      </EuiAutoSizer>
+    </div>
+  ),
+  argTypes: disableStorybookControls(['children']),
+};

src/components/avatar/avatar.stories.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 type { Meta, StoryObj } from '@storybook/react';
+
+import { EuiAvatar, EuiAvatarProps } from './avatar';
+
+const meta: Meta<EuiAvatarProps> = {
+  title: 'EuiAvatar',
+  component: EuiAvatar,
+  argTypes: {
+    initialsLength: {
+      options: [undefined, 1, 2],
+    },
+    color: { control: 'text' },
+    iconType: { control: 'text' },
+    iconColor: { control: 'text' },
+  },
+  args: {
+    // Component defaults
+    casing: 'uppercase',
+    size: 'm',
+    type: 'user',
+    isDisabled: false,
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiAvatarProps>;
+
+export const Playground: Story = {
+  args: {
+    name: 'Hello World',
+  },
+};