Merge branch 'main' into rk/launchlaunch

.storybook/utils.test.ts

@@ -6,11 +6,14 @@
  * Side Public License, v 1.
  */
 
-import {
+import * as utils from './utils';
+
+const {
   hideStorybookControls,
   disableStorybookControls,
   moveStorybookControlsToCategory,
-} from './utils';
+  enableFunctionToggleControls,
+} = utils;
 
 describe('hideStorybookControls', () => {
   it('updates the provided config with the expected `argTypes` object when passed prop name strings', () => {
@@ -198,3 +201,67 @@ describe('moveStorybookControlsToCategory', () => {
     ]);
   });
 });
+
+describe('enableFunctionToggleControls', () => {
+  it('updates the provided config with the expected `argTypes` object when passed function prop name strings', () => {
+    expect(enableFunctionToggleControls({ argTypes: {} }, ['onClick'])).toEqual(
+      {
+        args: {
+          onClick: true,
+        },
+        argTypes: {
+          onClick: {
+            control: 'boolean',
+            mapping: { false: undefined, true: expect.any(Function) },
+          },
+        },
+        parameters: { actions: { argTypesRegex: null } },
+      }
+    );
+  });
+
+  it('merges existing and new `argTypes` objects correctly', () => {
+    type TestProps = { hello: boolean; onHello: () => {} };
+
+    expect(
+      enableFunctionToggleControls<TestProps>(
+        {
+          args: { hello: true },
+          argTypes: {
+            isDisabled: { control: { type: 'boolean' } },
+          },
+        },
+        ['onHello']
+      )
+    ).toEqual({
+      args: {
+        hello: true,
+        onHello: true,
+      },
+      argTypes: {
+        isDisabled: { control: { type: 'boolean' } },
+        onHello: {
+          control: 'boolean',
+          mapping: { false: undefined, true: expect.any(Function) },
+        },
+      },
+      parameters: { actions: { argTypesRegex: null } },
+    });
+  });
+
+  it('throws a typescript error if a generic is passed and the prop names do not match', () => {
+    type TestProps = { hello: boolean; onHello: () => {} };
+
+    // No typescript error
+    enableFunctionToggleControls<TestProps>({ argTypes: {} }, [
+      'hello',
+      'onHello',
+    ]);
+    enableFunctionToggleControls<TestProps>({ argTypes: {} }, [
+      'hello',
+      'onHello',
+      // @ts-expect-error - will fail `yarn lint` if a TS error is *not* produced
+      'error',
+    ]);
+  });
+});

.storybook/utils.ts

@@ -11,6 +11,7 @@
  */
 
 import type { Args, ArgTypes, Meta, Preview, StoryObj } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
 
 type StorybookConfig<T> = Meta<T> | StoryObj<T> | Preview;
 
@@ -27,10 +28,12 @@ export const hideStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { disable: true },
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { disable: true },
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -49,10 +52,12 @@ export const disableStorybookControls = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'control',
-    value: false,
-  });
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'control',
+      value: false,
+    },
+  ]);
 
   return updatedConfig;
 };
@@ -72,11 +77,70 @@ export const moveStorybookControlsToCategory = <Props>(
   propNames: Array<keyof Props>,
   category = 'Additional'
 ): StorybookConfig<Props> => {
-  const updatedConfig = _updateArgTypes(config, propNames, {
-    key: 'table',
-    value: { category },
+  const updatedConfig = _updateArgTypes(config, propNames, [
+    {
+      key: 'table',
+      value: { category },
+    },
+  ]);
+
+  return updatedConfig;
+};
+
+/**
+ * Configures passed argTypes to be setup as toggle control
+ * which fires a Storybook action when enabled.
+ * Should be used for function props only.
+ *
+ * Can be used for preview (Preview), component (Meta) or story (Story)
+ * context by passing the config object for either. Use after defining
+ * the specific config to be able to pass the config to this util.
+ *
+ * @returns the mutated config
+ */
+export const enableFunctionToggleControls = <Props>(
+  config: StorybookConfig<Props>,
+  propNames: Array<keyof Props>
+) => {
+  const setAction = (propName: string | number) => ({
+    true: action(propName.toString()),
+    false: undefined,
   });
 
+  /* Sets the default value for the passed function prop.
+  This is needed to ensure the coolean control is set and
+  to prevent additional clicks.
+  NOTE: This has to happen before the argTypes are updated */
+  config.args = propNames.reduce(
+    (acc, propName) => ({
+      ...acc,
+      [propName]: true,
+    }),
+    config.args
+  );
+
+  let updatedConfig = _updateArgTypes(config, propNames, [
+    { key: 'control', value: 'boolean' },
+    {
+      key: 'mapping',
+      value: setAction,
+    },
+  ]);
+
+  updatedConfig = {
+    ...updatedConfig,
+    /* Overwrites global parameters.actions setting in preview.tsx which enables
+    actions on function props starting with "on[Name]" by default. This is needed
+    to ensure the default "false" state is actually false. */
+    parameters: {
+      ...updatedConfig.parameters,
+      actions: {
+        ...updatedConfig.parameters?.actions,
+        argTypesRegex: null,
+      },
+    },
+  };
+
   return updatedConfig;
 };
 
@@ -112,29 +176,43 @@ export const hidePanel = {
 const _updateArgTypes = <Props>(
   config: StorybookConfig<Props>,
   propNames: Array<keyof Props>,
-  {
-    key,
-    value,
-  }: { key: string; value: Record<string, string | boolean> | boolean }
+  controls: Array<{
+    key: string;
+    value:
+      | Record<string, any>
+      | boolean
+      | string
+      | ((propName: any) => Record<string, any>);
+  }>
 ): StorybookConfig<Props> => {
   const currentArgTypes = config.argTypes as Partial<ArgTypes<Props>>;
   const newArgTypes = { ...currentArgTypes };
 
   for (const propName of propNames) {
-    const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
-    const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
-      ? currentArgTypeValue[key]
-      : ({} as Record<string, any>);
-
-    const newValue =
-      typeof value === 'object' && typeof currentArgTypeValue[key] === 'object'
-        ? { ...currentControlValue, ...value }
-        : value;
-
-    newArgTypes[propName] = {
-      ...currentArgTypeValue,
-      [key]: newValue,
-    };
+    for (const { key, value } of controls) {
+      const currentArgTypeValue = newArgTypes?.[propName] ?? ({} as Args);
+      const currentControlValue = currentArgTypeValue.hasOwnProperty(key)
+        ? currentArgTypeValue[key]
+        : ({} as Record<string, any>);
+
+      let newValue = value;
+
+      if (typeof value === 'function') {
+        newValue = value(propName);
+      }
+
+      if (
+        typeof value === 'object' &&
+        typeof currentArgTypeValue[key] === 'object'
+      ) {
+        newValue = { ...currentControlValue, ...value };
+      }
+
+      newArgTypes[propName] = {
+        ...currentArgTypeValue,
+        [key]: newValue,
+      };
+    }
   }
 
   config.argTypes = newArgTypes;

changelogs/upcoming/7599.md

@@ -0,0 +1,3 @@
+**Dependency updates**
+
+- Updated `@hello-pangea/dnd` to v16.6.0

changelogs/upcoming/7648.md

@@ -0,0 +1,4 @@
+**Bug fixes**
+
+- Fixed an `EuiPageTemplate` bug where prop updates would not cascade down to child sections
+  - To cascade props down to the sidebar, `EuiPageTemplate` now explicitly requires using the `EuiPageTemplate.Sidebar` rather than `EuiPageSidebar`

changelogs/upcoming/7666.md

@@ -0,0 +1,6 @@
+**Bug fixes**
+
+- Fixed `EuiFieldNumber`'s typing to accept an icon configuration shape
+- Fixed `EuiFieldText` and `EuiFieldNumber` to render the correct paddings for icon shapes set to `side: 'right'`
+- Fixed `EuiFieldText` and `EuiFieldNumber` to fully ignore `icon`/`prepend`/`append` when `controlOnly` is set to true
+- Fixed `EuiColorPicker`'s input not setting the correct right padding for the number of icons displayed

changelogs/upcoming/7672.md

@@ -0,0 +1,3 @@
+**Accessibility**
+
+- Improved `EuiBasicTable` and `EuiInMemoryTable`'s selection checkboxes to have unique aria-labels per row

changelogs/upcoming/7681.md

@@ -0,0 +1,3 @@
+**Bug fixes**
+
+- Fixed a visual text alignment regression in `EuiTableRowCell`s with the `row` header scope

i18ntokens.json

@@ -127,18 +127,18 @@
   },
   {
     "token": "euiBasicTable.selectThisRow",
-    "defString": "Select this row",
+    "defString": "Select row {index}",
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1103,
+        "line": 1109,
         "column": 8,
-        "index": 30673
+        "index": 30781
       },
       "end": {
-        "line": 1103,
-        "column": 79,
-        "index": 30744
+        "line": 1113,
+        "column": 9,
+        "index": 30936
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"
@@ -149,14 +149,14 @@
     "highlighting": "string",
     "loc": {
       "start": {
-        "line": 1329,
+        "line": 1339,
         "column": 8,
-        "index": 37489
+        "index": 37663
       },
       "end": {
-        "line": 1333,
+        "line": 1343,
         "column": 9,
-        "index": 37648
+        "index": 37822
       }
     },
     "filepath": "src/components/basic_table/basic_table.tsx"

package.json

@@ -58,7 +58,7 @@
     "test-staged"
   ],
   "dependencies": {
-    "@hello-pangea/dnd": "^16.3.0",
+    "@hello-pangea/dnd": "^16.6.0",
     "@types/lodash": "^4.14.202",
     "@types/numeral": "^2.0.5",
     "@types/react-window": "^1.8.8",
@@ -151,7 +151,7 @@
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.6",
     "assert": "^2.0.0",
     "autoprefixer": "^9.8.6",
-    "axe-core": "^4.8.2",
+    "axe-core": "^4.9.0",
     "babel-jest": "^24.1.0",
     "babel-loader": "^9.1.2",
     "babel-plugin-add-module-exports": "^1.0.4",

src-docs/src/views/tables/auto/auto.tsx

@@ -217,6 +217,7 @@ export default () => {
         tableCaption="Demo of EuiBasicTable's table layout options"
         items={users}
         columns={columns}
+        rowHeader="firstName"
         tableLayout={tableLayout === 'tableLayoutAuto' ? 'auto' : 'fixed'}
       />
     </>

src/components/basic_table/__snapshots__/basic_table.test.tsx.snap

@@ -271,11 +271,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 1"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-1"
                 id="__table_generated-id_selection_column_1-checkbox"
-                title="Select this row"
+                title="Select row 1"
                 type="checkbox"
               />
               <div
@@ -377,11 +377,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 2"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-2"
                 id="__table_generated-id_selection_column_2-checkbox"
-                title="Select this row"
+                title="Select row 2"
                 type="checkbox"
               />
               <div
@@ -483,11 +483,11 @@ exports[`EuiBasicTable renders (kitchen sink) with pagination, selection, sortin
               class="euiCheckbox euiCheckbox--inList euiCheckbox--noLabel emotion-euiCheckbox"
             >
               <input
-                aria-label="Select this row"
+                aria-label="Select row 3"
                 class="euiCheckbox__input"
                 data-test-subj="checkboxSelectRow-3"
                 id="__table_generated-id_selection_column_3-checkbox"
-                title="Select this row"
+                title="Select row 3"
                 type="checkbox"
               />
               <div