Merge branch 'main' into rm-eui-chart-theme

elastic · Mar 12, 2024 · 6fe3c58 · 6fe3c58
2 parents 48faa5d + 75d5b5a
commit 6fe3c58
Show file tree

Hide file tree

Showing 149 changed files with 2,884 additions and 2,883 deletions.
diff --git a/.storybook/preview.tsx b/.storybook/preview.tsx
@@ -18,6 +18,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
  */
 import { typeToPathMap } from '../src/components/icon/icon_map';
 import { appendIconComponentCache } from '../src/components/icon/icon';
+
 const iconCache: Record<string, React.FC> = {};
 
 Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
@@ -96,7 +97,27 @@ const preview: Preview = {
   parameters: {
     actions: { argTypesRegex: '^on[A-Z].*' },
     backgrounds: { disable: true }, // Use colorMode instead
-    options: { showPanel: true }, // default to showing the controls panel
+    options: {
+      showPanel: true, // default to showing the controls panel
+      storySort: {
+        method: 'alphabetical',
+        order: [
+          // order option as well as story titles require static content (dynamic values or references don't work)
+          // https://storybook.js.org/docs/api/parameters#optionsstorysort
+          // https://storybook.js.org/docs/writing-stories#default-export
+          'Theming',
+          'Templates',
+          'Layout',
+          'Navigation',
+          'Display',
+          'Forms',
+          'Tabular Content',
+          'Editors & Syntax',
+          'Utilities',
+          '*',
+        ],
+      },
+    },
     controls: {
       expanded: true,
       sort: 'requiredFirst',

diff --git a/changelogs/upcoming/7564.md b/changelogs/upcoming/7564.md
@@ -0,0 +1,5 @@
+**Accessibility**
+
+- Updated `EuiModal` to set an `aria-modal` attribute and a default `dialog` role
+- Updated `EuiConfirmModal` to set a default `alertdialog` role
+- Fixed `EuiModal` and `EuiConfirmModal` to properly trap Safari+VoiceOver's virtual cursor
diff --git a/package.json b/package.json
@@ -109,7 +109,7 @@
     "@cypress/react": "^7.0.3",
     "@cypress/react18": "^2.0.0",
     "@cypress/webpack-dev-server": "^1.7.0",
-    "@elastic/charts": "^64.0.1",
+    "@elastic/charts": "^64.0.2",
     "@elastic/datemath": "^5.0.3",
     "@emotion/babel-preset-css-prop": "^11.11.0",
     "@emotion/cache": "^11.11.0",

diff --git a/src-docs/src/views/datagrid/advanced/custom_renderer.tsx b/src-docs/src/views/datagrid/advanced/custom_renderer.tsx
@@ -19,6 +19,7 @@ import {
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
   EuiDataGridColumnSortingConfig,
+  RenderCellValue,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -67,6 +68,14 @@ const columns = [
   },
 ];
 
+const checkboxRowCellRender: RenderCellValue = ({ rowIndex }) => (
+  <EuiCheckbox
+    id={`select-row-${rowIndex}`}
+    aria-label="Select row"
+    onChange={() => {}}
+  />
+);
+
 const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
   {
     id: 'selection',
@@ -78,13 +87,7 @@ const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
         onChange={() => {}}
       />
     ),
-    rowCellRender: ({ rowIndex }) => (
-      <EuiCheckbox
-        id={`select-row-${rowIndex}`}
-        aria-label="Select row"
-        onChange={() => {}}
-      />
-    ),
+    rowCellRender: checkboxRowCellRender,
   },
 ];
 
@@ -103,6 +106,22 @@ const trailingControlColumns: EuiDataGridProps['trailingControlColumns'] = [
   },
 ];
 
+const RowCellRender: RenderCellValue = ({ setCellProps, rowIndex }) => {
+  setCellProps({ style: { width: '100%', height: 'auto' } });
+
+  const firstName = raw_data[rowIndex].name.split(', ')[1];
+  const isGood = faker.datatype.boolean();
+  return (
+    <>
+      {firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
+      <EuiIcon
+        type={isGood ? 'checkInCircleFilled' : 'error'}
+        color={isGood ? 'success' : 'danger'}
+      />
+    </>
+  );
+};
+
 // The custom row details is actually a trailing control column cell with
 // a hidden header. This is important for accessibility and markup reasons
 // @see https://fuschia-stretch.glitch.me/ for more
@@ -120,21 +139,7 @@ const rowDetails: EuiDataGridProps['trailingControlColumns'] = [
 
     // When rendering this custom cell, we'll want to override
     // the automatic width/heights calculated by EuiDataGrid
-    rowCellRender: ({ setCellProps, rowIndex }) => {
-      setCellProps({ style: { width: '100%', height: 'auto' } });
-
-      const firstName = raw_data[rowIndex].name.split(', ')[1];
-      const isGood = faker.datatype.boolean();
-      return (
-        <>
-          {firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
-          <EuiIcon
-            type={isGood ? 'checkInCircleFilled' : 'error'}
-            color={isGood ? 'success' : 'danger'}
-          />
-        </>
-      );
-    },
+    rowCellRender: RowCellRender,
   },
 ];
 
@@ -144,10 +149,10 @@ const footerCellValues: { [key: string]: string } = {
     .toLocaleString('en-US', { style: 'currency', currency: 'USD' })}`,
 };
 
-const RenderFooterCellValue: EuiDataGridProps['renderFooterCellValue'] = ({
-  columnId,
-  setCellProps,
-}) => {
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  raw_data[rowIndex][columnId];
+
+const RenderFooterCellValue: RenderCellValue = ({ columnId, setCellProps }) => {
   const value = footerCellValues[columnId];
 
   useEffect(() => {
@@ -298,9 +303,7 @@ export default () => {
           onChangeItemsPerPage: onChangePageSize,
         }}
         rowCount={raw_data.length}
-        renderCellValue={({ rowIndex, columnId }) =>
-          raw_data[rowIndex][columnId]
-        }
+        renderCellValue={renderCellValue}
         renderFooterCellValue={RenderFooterCellValue}
         renderCustomGridBody={RenderCustomGridBody}
         height={autoHeight ? undefined : 400}

diff --git a/src-docs/src/views/datagrid/advanced/ref.tsx b/src-docs/src/views/datagrid/advanced/ref.tsx
@@ -20,6 +20,7 @@ import {
   EuiDataGridColumnSortingConfig,
   EuiDataGridPaginationProps,
   EuiDataGridSorting,
+  RenderCellValue,
 } from '../../../../../src';
 
 const raw_data: Array<{ [key: string]: string }> = [];
@@ -33,6 +34,9 @@ for (let i = 1; i < 100; i++) {
   });
 }
 
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  raw_data[rowIndex][columnId];
+
 export default () => {
   const dataGridRef = useRef<EuiDataGridRefProps | null>(null);
 
@@ -219,9 +223,7 @@ export default () => {
         sorting={{ columns: sortingColumns, onSort }}
         inMemory={{ level: 'sorting' }}
         rowCount={raw_data.length}
-        renderCellValue={({ rowIndex, columnId }) =>
-          raw_data[rowIndex][columnId]
-        }
+        renderCellValue={renderCellValue}
         pagination={{
           ...pagination,
           onChangePage: onChangePage,

diff --git a/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx b/src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx
@@ -5,6 +5,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnCellAction,
   EuiDataGridColumn,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src';
 
 const cellActions: EuiDataGridColumnCellAction[] = [
@@ -50,6 +51,22 @@ for (let i = 1; i < 5; i++) {
   });
 }
 
+const RenderCellValue: RenderCellValueType = ({
+  rowIndex,
+  columnId,
+  setCellProps,
+}) => {
+  const value = data[rowIndex][columnId];
+
+  useEffect(() => {
+    if (columnId === 'boolean' && value === 'false') {
+      setCellProps({ isExpandable: false });
+    }
+  }, [columnId, value, setCellProps]);
+
+  return value;
+};
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -61,17 +78,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId, setCellProps }) => {
-        const value = data[rowIndex][columnId];
-
-        useEffect(() => {
-          if (columnId === 'boolean' && value === 'false') {
-            setCellProps({ isExpandable: false });
-          }
-        }, [columnId, value, setCellProps]);
-
-        return value;
-      }}
+      renderCellValue={RenderCellValue}
     />
   );
 };
diff --git a/src-docs/src/views/datagrid/cells_popovers/cell_popover_rendercellpopover.tsx b/src-docs/src/views/datagrid/cells_popovers/cell_popover_rendercellpopover.tsx
@@ -14,6 +14,7 @@ import {
   EuiCopy,
   EuiText,
   EuiImage,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src';
 
 const cellActions: EuiDataGridColumnCellAction[] = [
@@ -163,6 +164,9 @@ const RenderCellPopover = (props: EuiDataGridCellPopoverElementProps) => {
   );
 };
 
+const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -174,7 +178,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      renderCellValue={renderCellValue}
       renderCellPopover={RenderCellPopover}
     />
   );

diff --git a/src-docs/src/views/datagrid/cells_popovers/visible_cell_actions.tsx b/src-docs/src/views/datagrid/cells_popovers/visible_cell_actions.tsx
@@ -5,6 +5,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnCellAction,
   EuiDataGridColumn,
+  RenderCellValue as RenderCellValueType,
 } from '../../../../../src/components';
 
 const cellActions1: EuiDataGridColumnCellAction[] = [
@@ -79,6 +80,9 @@ for (let i = 1; i < 5; i++) {
   });
 }
 
+const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [visibleColumns, setVisibleColumns] = useState(
     columns.map(({ id }) => id)
@@ -90,7 +94,7 @@ export default () => {
       columns={columns}
       columnVisibility={{ visibleColumns, setVisibleColumns }}
       rowCount={data.length}
-      renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+      renderCellValue={renderCellValue}
     />
   );
 };
diff --git a/src-docs/src/views/datagrid/styling/row_height_auto.tsx b/src-docs/src/views/datagrid/styling/row_height_auto.tsx
@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
 
 import {
   EuiDataGrid,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiLink,
   EuiAvatar,
   EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

diff --git a/src-docs/src/views/datagrid/styling/row_height_fixed.tsx b/src-docs/src/views/datagrid/styling/row_height_fixed.tsx
@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
 
 import {
   EuiDataGrid,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiLink,
   EuiAvatar,
   EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

diff --git a/src-docs/src/views/datagrid/styling/row_line_height.tsx b/src-docs/src/views/datagrid/styling/row_line_height.tsx
@@ -12,7 +12,7 @@ import {
   EuiDataGrid,
   EuiDataGridColumnSortingConfig,
   EuiDataGridPaginationProps,
-  EuiDataGridProps,
+  RenderCellValue as RenderCellValueType,
   EuiDataGridSorting,
   formatDate,
 } from '../../../../../src';
@@ -62,7 +62,7 @@ const columns = [
 // instead of loading up front, generate entries on the fly
 const raw_data: DataShape[] = githubData;
 
-const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
+const RenderCellValue: RenderCellValueType = ({
   rowIndex,
   columnId,
   isDetails,

diff --git a/src-docs/src/views/datagrid/toolbar/additional_controls.tsx b/src-docs/src/views/datagrid/toolbar/additional_controls.tsx
@@ -18,6 +18,7 @@ import {
   EuiContextMenuPanel,
   EuiPopover,
   EuiDataGridPaginationProps,
+  RenderCellValue,
 } from '../../../../../src';
 
 const columns = [
@@ -50,6 +51,9 @@ for (let i = 1; i < 20; i++) {
   });
 }
 
+const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
+  data[rowIndex][columnId];
+
 export default () => {
   const [pagination, setPagination] = useState({ pageIndex: 0 });
   const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);
@@ -127,7 +131,7 @@ export default () => {
           border: 'horizontal',
           header: 'underline',
         }}
-        renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
+        renderCellValue={renderCellValue}
         pagination={{
           ...pagination,
           onChangeItemsPerPage: setPageSize,