Merge remote-tracking branch 'origin/main' into storybook/7583-suppor…

…t-merged-story-control-configs

.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/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`

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/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/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>;
 }

src/components/i18n/i18n_number.stories.tsx

@@ -0,0 +1,50 @@
+/*
+ * 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, { ReactChild } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { hideStorybookControls } from '../../../.storybook/utils';
+import { EuiI18nNumber, EuiI18nNumberProps } from './i18n_number';
+import { EuiText } from '../text';
+
+const meta: Meta<EuiI18nNumberProps> = {
+  title: 'Utilities/EuiI18nNumber',
+  component: EuiI18nNumber,
+};
+
+export default meta;
+type Story = StoryObj<EuiI18nNumberProps>;
+
+export const SingleValue: Story = {
+  argTypes: hideStorybookControls(['children', 'values']),
+  args: {
+    value: 99,
+  },
+  render: (args: EuiI18nNumberProps) => (
+    <EuiText>
+      <span>Formatted number:</span> <EuiI18nNumber {...args} />
+    </EuiText>
+  ),
+};
+
+export const MultipleValues: Story = {
+  argTypes: hideStorybookControls(['value']),
+  args: {
+    values: [0, 1, 2],
+    children: (values: ReactChild[]) => (
+      <>
+        {values.map((value) => (
+          <EuiText>
+            <span>Formatted number: {value}</span>
+          </EuiText>
+        ))}
+      </>
+    ),
+  },
+};

src/components/icon/icon.stories.tsx

@@ -0,0 +1,29 @@
+/*
+ * 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 { EuiIcon, EuiIconProps } from './icon';
+
+const meta: Meta<EuiIconProps> = {
+  title: 'Display/EuiIcon',
+  component: EuiIcon,
+  argTypes: {
+    color: { control: { type: 'text' } },
+  },
+  // Component defaults
+  args: {
+    type: 'accessibility',
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiIconProps>;
+
+export const Playground: Story = {};

src/components/image/image.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 { EuiImage } from './image';
+import { EuiImageProps } from './image_types';
+
+const meta: Meta<EuiImageProps> = {
+  title: 'Display/EuiImage',
+  component: EuiImage,
+  argTypes: {
+    size: { control: { type: 'text' } },
+    caption: { control: { type: 'text' } },
+  },
+  // Component defaults
+  args: {
+    size: 'original',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiImageProps>;
+
+export const Playground: Story = {
+  args: {
+    src: 'https://images.unsplash.com/photo-1650253618249-fb0d32d3865c?w=900&h=400&fit=crop&q=60',
+  },
+};

src/components/inline_edit/inline_edit_text.stories.tsx

@@ -0,0 +1,38 @@
+/*
+ * 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 { EuiInlineEditText, EuiInlineEditTextProps } from './inline_edit_text';
+
+const meta: Meta<EuiInlineEditTextProps> = {
+  title: 'Forms/EuiInlineEditText',
+  component: EuiInlineEditText,
+  // Component defaults
+  args: {
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiInlineEditTextProps>;
+
+export const Playground: Story = {
+  args: {
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit text inline',
+  },
+};
+
+export const EditMode: Story = {
+  args: {
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit text inline',
+    startWithEditOpen: true,
+  },
+};

src/components/inline_edit/inline_edit_title.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 {
+  EuiInlineEditTitle,
+  EuiInlineEditTitleProps,
+} from './inline_edit_title';
+
+const meta: Meta<EuiInlineEditTitleProps> = {
+  title: 'Forms/EuiInlineEditTitle',
+  component: EuiInlineEditTitle,
+  // Component defaults
+  args: {
+    size: 'm',
+  },
+};
+
+export default meta;
+type Story = StoryObj<EuiInlineEditTitleProps>;
+
+export const Playground: Story = {
+  args: {
+    heading: 'h1',
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit title inline',
+  },
+};
+
+export const EditMode: Story = {
+  args: {
+    heading: 'h1',
+    defaultValue: 'Hello World!',
+    inputAriaLabel: 'Edit title inline',
+    startWithEditOpen: true,
+  },
+};