Skip to content

Commit 6fe3c58

Browse files
nickofthymenickofthyme
authored
Merge branch 'main' into rm-eui-chart-theme
2 parents 48faa5d + 75d5b5a commit 6fe3c58

149 files changed

Lines changed: 2884 additions & 2883 deletions

File tree

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎.storybook/preview.tsx‎

Lines changed: 22 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -18,6 +18,7 @@ import { MINIMAL_VIEWPORTS } from '@storybook/addon-viewport';
1818
*/
1919
import { typeToPathMap } from '../src/components/icon/icon_map';
2020
import { appendIconComponentCache } from '../src/components/icon/icon';
21+
2122
const iconCache: Record<string, React.FC> = {};
2223

2324
Object.entries(typeToPathMap).forEach(async ([iconType, iconFileName]) => {
@@ -96,7 +97,27 @@ const preview: Preview = {
9697
parameters: {
9798
actions: { argTypesRegex: '^on[A-Z].*' },
9899
backgrounds: { disable: true }, // Use colorMode instead
99-
options: { showPanel: true }, // default to showing the controls panel
100+
options: {
101+
showPanel: true, // default to showing the controls panel
102+
storySort: {
103+
method: 'alphabetical',
104+
order: [
105+
// order option as well as story titles require static content (dynamic values or references don't work)
106+
// https://storybook.js.org/docs/api/parameters#optionsstorysort
107+
// https://storybook.js.org/docs/writing-stories#default-export
108+
'Theming',
109+
'Templates',
110+
'Layout',
111+
'Navigation',
112+
'Display',
113+
'Forms',
114+
'Tabular Content',
115+
'Editors & Syntax',
116+
'Utilities',
117+
'*',
118+
],
119+
},
120+
},
100121
controls: {
101122
expanded: true,
102123
sort: 'requiredFirst',

‎changelogs/upcoming/7564.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
**Accessibility**
2+
3+
- Updated `EuiModal` to set an `aria-modal` attribute and a default `dialog` role
4+
- Updated `EuiConfirmModal` to set a default `alertdialog` role
5+
- Fixed `EuiModal` and `EuiConfirmModal` to properly trap Safari+VoiceOver's virtual cursor

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -109,7 +109,7 @@
109109
"@cypress/react": "^7.0.3",
110110
"@cypress/react18": "^2.0.0",
111111
"@cypress/webpack-dev-server": "^1.7.0",
112-
"@elastic/charts": "^64.0.1",
112+
"@elastic/charts": "^64.0.2",
113113
"@elastic/datemath": "^5.0.3",
114114
"@emotion/babel-preset-css-prop": "^11.11.0",
115115
"@emotion/cache": "^11.11.0",

‎src-docs/src/views/datagrid/advanced/custom_renderer.tsx‎

Lines changed: 32 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ import {
1919
EuiDataGridPaginationProps,
2020
EuiDataGridSorting,
2121
EuiDataGridColumnSortingConfig,
22+
RenderCellValue,
2223
} from '../../../../../src';
2324

2425
const raw_data: Array<{ [key: string]: string }> = [];
@@ -67,6 +68,14 @@ const columns = [
6768
},
6869
];
6970

71+
const checkboxRowCellRender: RenderCellValue = ({ rowIndex }) => (
72+
<EuiCheckbox
73+
id={`select-row-${rowIndex}`}
74+
aria-label="Select row"
75+
onChange={() => {}}
76+
/>
77+
);
78+
7079
const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
7180
{
7281
id: 'selection',
@@ -78,13 +87,7 @@ const leadingControlColumns: EuiDataGridProps['leadingControlColumns'] = [
7887
onChange={() => {}}
7988
/>
8089
),
81-
rowCellRender: ({ rowIndex }) => (
82-
<EuiCheckbox
83-
id={`select-row-${rowIndex}`}
84-
aria-label="Select row"
85-
onChange={() => {}}
86-
/>
87-
),
90+
rowCellRender: checkboxRowCellRender,
8891
},
8992
];
9093

@@ -103,6 +106,22 @@ const trailingControlColumns: EuiDataGridProps['trailingControlColumns'] = [
103106
},
104107
];
105108

109+
const RowCellRender: RenderCellValue = ({ setCellProps, rowIndex }) => {
110+
setCellProps({ style: { width: '100%', height: 'auto' } });
111+
112+
const firstName = raw_data[rowIndex].name.split(', ')[1];
113+
const isGood = faker.datatype.boolean();
114+
return (
115+
<>
116+
{firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
117+
<EuiIcon
118+
type={isGood ? 'checkInCircleFilled' : 'error'}
119+
color={isGood ? 'success' : 'danger'}
120+
/>
121+
</>
122+
);
123+
};
124+
106125
// The custom row details is actually a trailing control column cell with
107126
// a hidden header. This is important for accessibility and markup reasons
108127
// @see https://fuschia-stretch.glitch.me/ for more
@@ -120,21 +139,7 @@ const rowDetails: EuiDataGridProps['trailingControlColumns'] = [
120139

121140
// When rendering this custom cell, we'll want to override
122141
// the automatic width/heights calculated by EuiDataGrid
123-
rowCellRender: ({ setCellProps, rowIndex }) => {
124-
setCellProps({ style: { width: '100%', height: 'auto' } });
125-
126-
const firstName = raw_data[rowIndex].name.split(', ')[1];
127-
const isGood = faker.datatype.boolean();
128-
return (
129-
<>
130-
{firstName}&apos;s account has {isGood ? 'no' : ''} outstanding fees.{' '}
131-
<EuiIcon
132-
type={isGood ? 'checkInCircleFilled' : 'error'}
133-
color={isGood ? 'success' : 'danger'}
134-
/>
135-
</>
136-
);
137-
},
142+
rowCellRender: RowCellRender,
138143
},
139144
];
140145

@@ -144,10 +149,10 @@ const footerCellValues: { [key: string]: string } = {
144149
.toLocaleString('en-US', { style: 'currency', currency: 'USD' })}`,
145150
};
146151

147-
const RenderFooterCellValue: EuiDataGridProps['renderFooterCellValue'] = ({
148-
columnId,
149-
setCellProps,
150-
}) => {
152+
const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
153+
raw_data[rowIndex][columnId];
154+
155+
const RenderFooterCellValue: RenderCellValue = ({ columnId, setCellProps }) => {
151156
const value = footerCellValues[columnId];
152157

153158
useEffect(() => {
@@ -298,9 +303,7 @@ export default () => {
298303
onChangeItemsPerPage: onChangePageSize,
299304
}}
300305
rowCount={raw_data.length}
301-
renderCellValue={({ rowIndex, columnId }) =>
302-
raw_data[rowIndex][columnId]
303-
}
306+
renderCellValue={renderCellValue}
304307
renderFooterCellValue={RenderFooterCellValue}
305308
renderCustomGridBody={RenderCustomGridBody}
306309
height={autoHeight ? undefined : 400}

‎src-docs/src/views/datagrid/advanced/ref.tsx‎

Lines changed: 5 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ import {
2020
EuiDataGridColumnSortingConfig,
2121
EuiDataGridPaginationProps,
2222
EuiDataGridSorting,
23+
RenderCellValue,
2324
} from '../../../../../src';
2425

2526
const raw_data: Array<{ [key: string]: string }> = [];
@@ -33,6 +34,9 @@ for (let i = 1; i < 100; i++) {
3334
});
3435
}
3536

37+
const renderCellValue: RenderCellValue = ({ rowIndex, columnId }) =>
38+
raw_data[rowIndex][columnId];
39+
3640
export default () => {
3741
const dataGridRef = useRef<EuiDataGridRefProps | null>(null);
3842

@@ -219,9 +223,7 @@ export default () => {
219223
sorting={{ columns: sortingColumns, onSort }}
220224
inMemory={{ level: 'sorting' }}
221225
rowCount={raw_data.length}
222-
renderCellValue={({ rowIndex, columnId }) =>
223-
raw_data[rowIndex][columnId]
224-
}
226+
renderCellValue={renderCellValue}
225227
pagination={{
226228
...pagination,
227229
onChangePage: onChangePage,

‎src-docs/src/views/datagrid/cells_popovers/cell_popover_is_expandable.tsx‎

Lines changed: 18 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
EuiDataGrid,
66
EuiDataGridColumnCellAction,
77
EuiDataGridColumn,
8+
RenderCellValue as RenderCellValueType,
89
} from '../../../../../src';
910

1011
const cellActions: EuiDataGridColumnCellAction[] = [
@@ -50,6 +51,22 @@ for (let i = 1; i < 5; i++) {
5051
});
5152
}
5253

54+
const RenderCellValue: RenderCellValueType = ({
55+
rowIndex,
56+
columnId,
57+
setCellProps,
58+
}) => {
59+
const value = data[rowIndex][columnId];
60+
61+
useEffect(() => {
62+
if (columnId === 'boolean' && value === 'false') {
63+
setCellProps({ isExpandable: false });
64+
}
65+
}, [columnId, value, setCellProps]);
66+
67+
return value;
68+
};
69+
5370
export default () => {
5471
const [visibleColumns, setVisibleColumns] = useState(
5572
columns.map(({ id }) => id)
@@ -61,17 +78,7 @@ export default () => {
6178
columns={columns}
6279
columnVisibility={{ visibleColumns, setVisibleColumns }}
6380
rowCount={data.length}
64-
renderCellValue={({ rowIndex, columnId, setCellProps }) => {
65-
const value = data[rowIndex][columnId];
66-
67-
useEffect(() => {
68-
if (columnId === 'boolean' && value === 'false') {
69-
setCellProps({ isExpandable: false });
70-
}
71-
}, [columnId, value, setCellProps]);
72-
73-
return value;
74-
}}
81+
renderCellValue={RenderCellValue}
7582
/>
7683
);
7784
};

‎src-docs/src/views/datagrid/cells_popovers/cell_popover_rendercellpopover.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import {
1414
EuiCopy,
1515
EuiText,
1616
EuiImage,
17+
RenderCellValue as RenderCellValueType,
1718
} from '../../../../../src';
1819

1920
const cellActions: EuiDataGridColumnCellAction[] = [
@@ -163,6 +164,9 @@ const RenderCellPopover = (props: EuiDataGridCellPopoverElementProps) => {
163164
);
164165
};
165166

167+
const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
168+
data[rowIndex][columnId];
169+
166170
export default () => {
167171
const [visibleColumns, setVisibleColumns] = useState(
168172
columns.map(({ id }) => id)
@@ -174,7 +178,7 @@ export default () => {
174178
columns={columns}
175179
columnVisibility={{ visibleColumns, setVisibleColumns }}
176180
rowCount={data.length}
177-
renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
181+
renderCellValue={renderCellValue}
178182
renderCellPopover={RenderCellPopover}
179183
/>
180184
);

‎src-docs/src/views/datagrid/cells_popovers/visible_cell_actions.tsx‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
EuiDataGrid,
66
EuiDataGridColumnCellAction,
77
EuiDataGridColumn,
8+
RenderCellValue as RenderCellValueType,
89
} from '../../../../../src/components';
910

1011
const cellActions1: EuiDataGridColumnCellAction[] = [
@@ -79,6 +80,9 @@ for (let i = 1; i < 5; i++) {
7980
});
8081
}
8182

83+
const renderCellValue: RenderCellValueType = ({ rowIndex, columnId }) =>
84+
data[rowIndex][columnId];
85+
8286
export default () => {
8387
const [visibleColumns, setVisibleColumns] = useState(
8488
columns.map(({ id }) => id)
@@ -90,7 +94,7 @@ export default () => {
9094
columns={columns}
9195
columnVisibility={{ visibleColumns, setVisibleColumns }}
9296
rowCount={data.length}
93-
renderCellValue={({ rowIndex, columnId }) => data[rowIndex][columnId]}
97+
renderCellValue={renderCellValue}
9498
/>
9599
);
96100
};

‎src-docs/src/views/datagrid/styling/row_height_auto.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
1010

1111
import {
1212
EuiDataGrid,
13-
EuiDataGridProps,
13+
RenderCellValue as RenderCellValueType,
1414
EuiLink,
1515
EuiAvatar,
1616
EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
6868
// instead of loading up front, generate entries on the fly
6969
const raw_data: DataShape[] = githubData;
7070

71-
const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
71+
const RenderCellValue: RenderCellValueType = ({
7272
rowIndex,
7373
columnId,
7474
isDetails,

‎src-docs/src/views/datagrid/styling/row_height_fixed.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import githubData from '../_row_auto_height_data.json';
1010

1111
import {
1212
EuiDataGrid,
13-
EuiDataGridProps,
13+
RenderCellValue as RenderCellValueType,
1414
EuiLink,
1515
EuiAvatar,
1616
EuiBadge,
@@ -68,7 +68,7 @@ const columns = [
6868
// instead of loading up front, generate entries on the fly
6969
const raw_data: DataShape[] = githubData;
7070

71-
const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({
71+
const RenderCellValue: RenderCellValueType = ({
7272
rowIndex,
7373
columnId,
7474
isDetails,

0 commit comments

Comments
 (0)