From 83bb0c32c525e7f47d469b7fbb3ad438b18c8885 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 16 Jul 2021 16:13:05 +0300 Subject: [PATCH 01/57] Add auto height possibility to row --- .../src/views/datagrid/row_height_options.js | 4 +- src/components/datagrid/data_grid.tsx | 11 +- src/components/datagrid/data_grid_body.tsx | 27 +++- src/components/datagrid/data_grid_cell.tsx | 15 +- src/components/datagrid/data_grid_types.ts | 1 + src/components/datagrid/row_height_utils.ts | 141 +++++++++++++----- 6 files changed, 149 insertions(+), 50 deletions(-) diff --git a/src-docs/src/views/datagrid/row_height_options.js b/src-docs/src/views/datagrid/row_height_options.js index f69ab70515a..1438a096f09 100644 --- a/src-docs/src/views/datagrid/row_height_options.js +++ b/src-docs/src/views/datagrid/row_height_options.js @@ -74,9 +74,7 @@ export default () => { const rowHeightsOptions = useMemo( () => ({ - defaultHeight: { - lineCount: 2, - }, + defaultHeight: 'auto', rowHeights: { 1: { lineCount: 5, diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 4fbc397e3ae..f5034b95fcd 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -70,6 +70,8 @@ import { import { useDataGridColumnSorting } from './column_sorting'; import { RowHeightUtils } from './row_height_utils'; +const rowHeightUtils = new RowHeightUtils(); + // Used to short-circuit some async browser behaviour that is difficult to account for in tests const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest'); @@ -886,11 +888,12 @@ export const EuiDataGrid: FunctionComponent = (props) => { } }, [focusedCell, contentRef]); - const [rowHeightUtils] = useState(new RowHeightUtils()); - useEffect(() => { - rowHeightUtils.computeStylesForGridCell(gridStyles); - }, [gridStyles, rowHeightUtils]); + rowHeightUtils.computeStylesForGridCell({ + cellPadding: gridStyles.cellPadding, + fontSize: gridStyles.fontSize, + }); + }, [gridStyles.cellPadding, gridStyles.fontSize, rowHeightUtils]); const classes = classNames( 'euiDataGrid', diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 259ff36a563..7a04d18f784 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -56,7 +56,7 @@ import { DataGridWrapperRowsContext, } from './data_grid_context'; import { useResizeObserver } from '../observer/resize_observer'; -import { RowHeightUtils } from './row_height_utils'; +import { RowHeightUtils, AUTO_HEIGHT } from './row_height_utils'; export interface EuiDataGridBodyProps { isFullScreen: boolean; @@ -143,6 +143,7 @@ const Cell: FunctionComponent = ({ schemaDetectors, rowHeightsOptions, getRowHeight, + rowHeightUtils, } = data; const { headerRowHeight } = useContext(DataGridWrapperRowsContext); @@ -209,6 +210,7 @@ const Cell: FunctionComponent = ({ setRowHeight={setRowHeight} getRowHeight={getRowHeight} rowHeightsOptions={rowHeightsOptions} + rowHeightUtils={rowHeightUtils} style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, @@ -235,6 +237,7 @@ const Cell: FunctionComponent = ({ className={classes} rowHeightsOptions={rowHeightsOptions} getRowHeight={getRowHeight} + rowHeightUtils={rowHeightUtils} style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, @@ -271,6 +274,7 @@ const Cell: FunctionComponent = ({ className={classes} rowHeightsOptions={rowHeightsOptions} getRowHeight={getRowHeight} + rowHeightUtils={rowHeightUtils} style={{ ...style, top: `${parseFloat(style.top as string) + headerRowHeight}px`, @@ -506,7 +510,7 @@ export const EuiDataGridBody: FunctionComponent = ( (rowIndex: number) => { let rowIndexWithOffset = rowIndex; - if (rowIndex - paginationOffset <= 0) { + if (rowIndex - paginationOffset < 0) { rowIndexWithOffset = rowIndex + paginationOffset; } @@ -554,6 +558,13 @@ export const EuiDataGridBody: FunctionComponent = ( ); const [minRowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT); + + useEffect(() => { + if (gridRef.current) { + rowHeightUtils.setGrid(gridRef.current); + } + }, [gridRef.current]); + const defaultHeight = useMemo( () => rowHeightsOptions?.defaultHeight @@ -568,7 +579,7 @@ export const EuiDataGridBody: FunctionComponent = ( const getRowHeight = useCallback( (rowIndex) => { const correctRowIndex = getCorrectRowIndex(rowIndex); - let height = defaultHeight; + let height; if (rowHeightsOptions) { if (rowHeightsOptions.rowHeights) { @@ -577,13 +588,18 @@ export const EuiDataGridBody: FunctionComponent = ( if (initialHeight) { height = rowHeightUtils.getCalculatedHeight( initialHeight, - minRowHeight + minRowHeight, + correctRowIndex ); } } + + if (!height && rowHeightsOptions.defaultHeight === AUTO_HEIGHT) { + return rowHeightUtils.getRowHeight(correctRowIndex); + } } - return height; + return height || defaultHeight; }, [ minRowHeight, @@ -711,6 +727,7 @@ export const EuiDataGridBody: FunctionComponent = ( renderCellValue, interactiveCellId, rowHeightsOptions, + rowHeightUtils, }} rowCount={ IS_JEST_ENVIRONMENT || headerRowHeight > 0 diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 3d63e0644a4..56984157172 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -34,7 +34,7 @@ import { EuiFocusTrap } from '../focus_trap'; import { keys } from '../../services'; import { EuiDataGridCellButtons } from './data_grid_cell_buttons'; import { EuiDataGridCellPopover } from './data_grid_cell_popover'; -import { getStylesForCell } from './row_height_utils'; +import { RowHeightUtils } from './row_height_utils'; export interface EuiDataGridCellValueElementProps { /** @@ -85,6 +85,7 @@ export interface EuiDataGridCellProps { getRowHeight?: (rowIndex: number) => number; style?: React.CSSProperties; rowHeightsOptions?: EuiDataGridRowHeightsOptions; + rowHeightUtils?: RowHeightUtils; } interface EuiDataGridCellState { @@ -115,6 +116,7 @@ const EuiDataGridCellContent: FunctionComponent< rowHeightsOptions, rowIndex, colIndex, + rowHeightUtils, ...rest } = props; @@ -143,7 +145,9 @@ const EuiDataGridCellContent: FunctionComponent<
{ @@ -481,6 +491,7 @@ export class EuiDataGridCell extends Component< isDetails: false, setCellContentsRef: this.setCellContentsRef, rowHeightsOptions: this.props.rowHeightsOptions, + rowHeightUtils: this.props.rowHeightUtils, }; let anchorContent = ( diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index e539712bef9..15a6948a57f 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -321,6 +321,7 @@ export type EuiDataGridOnColumnResizeHandler = ( export type EuiDataGridRowHeightOption = | number + | string | ExclusiveUnion<{ lineCount: number }, { height: number }>; export interface EuiDataGridRowHeightsOptions { diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 7ed002386c9..ee98d8d64cd 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -7,6 +7,7 @@ */ import { CSSProperties } from 'react'; +import type { VariableSizeGrid as Grid } from 'react-window'; import { isObject, isNumber } from '../../services/predicate'; import { EuiDataGridStyleCellPaddings, @@ -32,15 +33,69 @@ function getNumberFromPx(style?: string) { return style ? parseInt(style.replace('px', ''), 10) : 0; } +export const AUTO_HEIGHT = 'auto'; + // So that we use lineCount options we should know exactly row height which allow to show defined line count. // For this we should know paddings and line height. Because of this we should compute styles for cell with grid styles export class RowHeightUtils { private styles: { - paddingTop?: string; - paddingBottom?: string; - lineHeight?: string; - } = {}; + paddingTop: number; + paddingBottom: number; + lineHeight: number; + } = { + paddingTop: 0, + paddingBottom: 0, + lineHeight: 1, + }; private fakeCell = document.createElement('div'); + private heightsCache = new Map(); + private timerId: any; + private grid?: Grid; + + setRowHeight(rowIndex: number, height: number) { + clearTimeout(this.timerId); + const cachedHeight = this.heightsCache.get(rowIndex) || 0; + const adaptedHeight = + height + this.styles.paddingTop + this.styles.paddingBottom; + if (cachedHeight < adaptedHeight) { + this.heightsCache.set(rowIndex, adaptedHeight); + } + this.timerId = setTimeout(() => this.resetGrid(), 100); + } + + getRowHeight(rowIndex: number) { + return this.heightsCache.get(rowIndex) || 0; + } + + resetGrid() { + this.grid?.resetAfterRowIndex(0); + } + + setGrid(grid: Grid) { + this.grid = grid; + } + + clearHeightsCache() { + this.heightsCache.clear(); + } + + isAutoHeight( + rowIndex: number, + rowHeightsOptions: EuiDataGridRowHeightsOptions + ) { + if ( + rowHeightsOptions.rowHeights && + rowHeightsOptions.rowHeights[rowIndex] + ) { + return rowHeightsOptions.rowHeights[rowIndex] === AUTO_HEIGHT; + } + + if (rowHeightsOptions.defaultHeight) { + return rowHeightsOptions.defaultHeight === AUTO_HEIGHT; + } + + return false; + } computeStylesForGridCell(gridStyles: EuiDataGridStyle) { this.fakeCell.className = ` @@ -51,23 +106,27 @@ export class RowHeightUtils { document.body.appendChild(this.fakeCell); const allStyles = getComputedStyle(this.fakeCell); this.styles = { - paddingTop: allStyles.paddingTop, - paddingBottom: allStyles.paddingBottom, - lineHeight: allStyles.lineHeight, + paddingTop: getNumberFromPx(allStyles.paddingTop), + paddingBottom: getNumberFromPx(allStyles.paddingBottom), + lineHeight: getNumberFromPx(allStyles.lineHeight), }; document.body.removeChild(this.fakeCell); + // we need clear height cache so that recalculate heigths for new styles. + this.clearHeightsCache(); } calculateHeightForLineCount(lineCount: number) { - const paddingTop = getNumberFromPx(this.styles.paddingTop); - const paddingBottom = getNumberFromPx(this.styles.paddingBottom); - const lineHeight = getNumberFromPx(this.styles.lineHeight); - return Math.ceil(lineCount * lineHeight + paddingTop + paddingBottom); + return Math.ceil( + lineCount * this.styles.lineHeight + + this.styles.paddingTop + + this.styles.paddingBottom + ); } getCalculatedHeight( heightOption: EuiDataGridRowHeightOption, - defaultHeight: number + defaultHeight: number, + rowIndex?: number ) { if (isObject(heightOption)) { if (heightOption.lineCount) { @@ -83,37 +142,47 @@ export class RowHeightUtils { return Math.max(heightOption, defaultHeight); } + if (heightOption && heightOption === AUTO_HEIGHT && rowIndex) { + return this.getRowHeight(rowIndex); + } + return defaultHeight; } -} -export const getStylesForCell = ( - rowHeightsOptions: EuiDataGridRowHeightsOptions, - rowIndex: number -): CSSProperties => { - let initialHeight = - rowHeightsOptions.rowHeights && rowHeightsOptions.rowHeights[rowIndex]; + getStylesForCell = ( + rowHeightsOptions: EuiDataGridRowHeightsOptions, + rowIndex: number + ): CSSProperties => { + const styles: CSSProperties = { + wordBreak: 'break-all', + flexGrow: 1, + }; + let initialHeight = + rowHeightsOptions.rowHeights && rowHeightsOptions.rowHeights[rowIndex]; - if (!initialHeight) { - initialHeight = rowHeightsOptions.defaultHeight; - } + if (this.isAutoHeight(rowIndex, rowHeightsOptions)) { + return styles; + } + + if (!initialHeight) { + initialHeight = rowHeightsOptions.defaultHeight; + } + + if (isObject(initialHeight) && initialHeight.lineCount) { + return { + WebkitLineClamp: initialHeight.lineCount, + display: '-webkit-box', + WebkitBoxOrient: 'vertical', + height: '100%', + overflow: 'hidden', + ...styles, + }; + } - if (isObject(initialHeight) && initialHeight.lineCount) { return { - WebkitLineClamp: initialHeight.lineCount, - display: '-webkit-box', - WebkitBoxOrient: 'vertical', height: '100%', overflow: 'hidden', - flexGrow: 1, - wordBreak: 'break-all', + ...styles, }; - } - - return { - height: '100%', - overflow: 'hidden', - flexGrow: 1, - wordBreak: 'break-all', }; -}; +} From 39bfc86a6898051dfab36d9314230b2e5a39239e Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 16 Jul 2021 17:18:12 +0300 Subject: [PATCH 02/57] Fix eslint --- src/components/datagrid/data_grid.tsx | 2 +- src/components/datagrid/data_grid_body.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index f5034b95fcd..d7c15ae97e3 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -893,7 +893,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { cellPadding: gridStyles.cellPadding, fontSize: gridStyles.fontSize, }); - }, [gridStyles.cellPadding, gridStyles.fontSize, rowHeightUtils]); + }, [gridStyles.cellPadding, gridStyles.fontSize]); const classes = classNames( 'euiDataGrid', diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 7a04d18f784..f97a1744934 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -563,7 +563,7 @@ export const EuiDataGridBody: FunctionComponent = ( if (gridRef.current) { rowHeightUtils.setGrid(gridRef.current); } - }, [gridRef.current]); + }, [gridRef.current, rowHeightUtils]); const defaultHeight = useMemo( () => From 40c2cf036718955d0282d8257831ad969376c23d Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Mon, 19 Jul 2021 17:59:45 +0300 Subject: [PATCH 03/57] Fix some problems with hiding column --- src/components/datagrid/data_grid.tsx | 4 ++++ 1 file changed, 4 insertions(+) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index d7c15ae97e3..80ef23f5006 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -865,6 +865,10 @@ export const EuiDataGrid: FunctionComponent = (props) => { orderedVisibleColumns ); + useEffect(() => { + rowHeightUtils.clearHeightsCache(); + }, [orderedVisibleColumns]); + const [contentRef, setContentRef] = useState(null); useEffect(() => { From e76129d1585563490b60dcb54627c0c507a98f44 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Mon, 19 Jul 2021 18:29:13 +0300 Subject: [PATCH 04/57] Fix example --- .../datagrid_height_options_example.js | 101 ++++++++++---- .../src/views/datagrid/row_auto_height.js | 125 ++++++++++++++++++ src/components/datagrid/data_grid.tsx | 4 +- 3 files changed, 203 insertions(+), 27 deletions(-) create mode 100644 src-docs/src/views/datagrid/row_auto_height.js diff --git a/src-docs/src/views/datagrid/datagrid_height_options_example.js b/src-docs/src/views/datagrid/datagrid_height_options_example.js index a6b288a87f9..861d95138a3 100644 --- a/src-docs/src/views/datagrid/datagrid_height_options_example.js +++ b/src-docs/src/views/datagrid/datagrid_height_options_example.js @@ -7,11 +7,15 @@ import { EuiCode, EuiCodeBlock, EuiSpacer, + EuiText, } from '../../../../src/components'; import DataGridRowHeightOptions from './row_height_options'; const dataGridRowHeightOptionsSource = require('!!raw-loader!./row_height_options'); const dataGridRowHeightOptionsHtml = renderToHtml(DataGridRowHeightOptions); +import DataGridRowAutoHeight from './row_auto_height'; +const dataGridRowAutoHeightSource = require('!!raw-loader!./row_auto_height'); +const dataGridRowAutoHeightHtml = renderToHtml(DataGridRowAutoHeight); const rowHeightsSnippet = ` { @@ -28,8 +32,50 @@ const rowHeightsSnippet = ` } `; +const autoRowHeightsSnippet = ` + { + defaultHeight: 'auto', // each row auto fit to content except rows which was defined in 'rowHeights' + rowHeights: { + 1: { + lineCount: 5, // for row which have index 1 we allow to show 5 lines after that we truncate + }, + 4: 140, // for row which have index 4 we set 140 pixel + }, + } +`; + export const DataGridRowHeightOptionsExample = { title: 'Data grid row height options', + intro: ( + + +

+ Row height options can be passed down to the grid through the{' '} + rowHeightsOptions prop. It accepts an object + configuring the default height and/or specific row heights: +

+
    +
  • + defaultHeight - defines the default size for all + rows +
    • +
  • + rowHeights - overrides the height for a specific + row +
    • +
+ + + +

+ Rows must be at least 34 pixels tall so they can + render at least one line of text. If you provide a smaller height the + row will default to 34 pixels. +

+ + + + ), sections: [ { source: [ @@ -42,33 +88,9 @@ export const DataGridRowHeightOptionsExample = { code: dataGridRowHeightOptionsHtml, }, ], + title: 'Fixed heights for rows', text: ( -

- Row height options can be passed down to the grid through the{' '} - rowHeightsOptions prop. It accepts an object - configuring the default height and/or specific row heights: -

-
    -
  • - defaultHeight - defines the default size for - all rows -
    • -
  • - rowHeights - overrides the height for a - specific row -
    • -
- -

- Rows must be at least 34 pixels tall so they can - render at least one line of text. If you provide a smaller height - the row will default to 34 pixels. -

- - {rowHeightsSnippet} @@ -77,5 +99,34 @@ export const DataGridRowHeightOptionsExample = { components: { DataGridRowHeightOptions }, demo: , }, + { + source: [ + { + type: GuideSectionTypes.JS, + code: dataGridRowAutoHeightSource, + }, + { + type: GuideSectionTypes.HTML, + code: dataGridRowAutoHeightHtml, + }, + ], + title: 'Auto-fit row to content', + text: ( + +

+ Row height options also supports to set value so that rows auto fit + to content. Just provide auto as value for{' '} + defaultHeight or for one of the rows in{' '} + rowHeights +

+ + + {autoRowHeightsSnippet} + + + ), + components: { DataGridRowAutoHeight }, + demo: , + }, ], }; diff --git a/src-docs/src/views/datagrid/row_auto_height.js b/src-docs/src/views/datagrid/row_auto_height.js new file mode 100644 index 00000000000..13a23e9655d --- /dev/null +++ b/src-docs/src/views/datagrid/row_auto_height.js @@ -0,0 +1,125 @@ +import React, { + useCallback, + useState, + createContext, + useContext, + useMemo, + useEffect, +} from 'react'; +import { fake } from 'faker'; + +import { EuiDataGrid, EuiText } from '../../../../src/components/'; + +const DataContext = createContext(); + +const columns = [ + { + id: 'name', + displayAsText: 'Name', + defaultSortDirection: 'asc', + }, + { + id: 'text', + }, +]; + +// it is expensive to compute 10000 rows of fake data +// instead of loading up front, generate entries on the fly +const raw_data = []; + +function RenderCellValue({ rowIndex, columnId }) { + const { data, adjustMountedCellCount } = useContext(DataContext); + + useEffect(() => { + adjustMountedCellCount(1); + return () => adjustMountedCellCount(-1); + }, [adjustMountedCellCount]); + + if (data[rowIndex] == null) { + data[rowIndex] = { + name: fake('{{lorem.text}}'), + text: fake('{{lorem.text}}'), + }; + } + + return data[rowIndex][columnId]; +} + +export default () => { + // ** Pagination config + const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); + + const onChangeItemsPerPage = useCallback( + (pageSize) => + setPagination((pagination) => ({ + ...pagination, + pageSize, + pageIndex: 0, + })), + [setPagination] + ); + + const onChangePage = useCallback( + (pageIndex) => + setPagination((pagination) => ({ ...pagination, pageIndex })), + [setPagination] + ); + + // Column visibility + const [visibleColumns, setVisibleColumns] = useState(() => + columns.map(({ id }) => id) + ); // initialize to the full set of columns + + const [mountedCellCount, setMountedCellCount] = useState(0); + + const rowHeightsOptions = useMemo( + () => ({ + defaultHeight: 'auto', + rowHeights: { + 1: { + lineCount: 5, + }, + 4: 140, + }, + }), + [] + ); + + const dataContext = useMemo( + () => ({ + data: raw_data, + adjustMountedCellCount: (adjustment) => + setMountedCellCount( + (mountedCellCount) => mountedCellCount + adjustment + ), + }), + [] + ); + + const grid = ( + + ); + + return ( + + +

There are {mountedCellCount} rendered cells

+ + {grid} + + ); +}; diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 80ef23f5006..cbe217a3d71 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -70,8 +70,6 @@ import { import { useDataGridColumnSorting } from './column_sorting'; import { RowHeightUtils } from './row_height_utils'; -const rowHeightUtils = new RowHeightUtils(); - // Used to short-circuit some async browser behaviour that is difficult to account for in tests const IS_JEST_ENVIRONMENT = global.hasOwnProperty('_isJest'); @@ -865,6 +863,8 @@ export const EuiDataGrid: FunctionComponent = (props) => { orderedVisibleColumns ); + const [rowHeightUtils] = useState(new RowHeightUtils()); + useEffect(() => { rowHeightUtils.clearHeightsCache(); }, [orderedVisibleColumns]); From c2de61144be1eacc88f06dde3d63a39c4c74c631 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Mon, 19 Jul 2021 18:30:06 +0300 Subject: [PATCH 05/57] Fix example --- src-docs/src/views/datagrid/row_height_options.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/src-docs/src/views/datagrid/row_height_options.js b/src-docs/src/views/datagrid/row_height_options.js index 1438a096f09..f69ab70515a 100644 --- a/src-docs/src/views/datagrid/row_height_options.js +++ b/src-docs/src/views/datagrid/row_height_options.js @@ -74,7 +74,9 @@ export default () => { const rowHeightsOptions = useMemo( () => ({ - defaultHeight: 'auto', + defaultHeight: { + lineCount: 2, + }, rowHeights: { 1: { lineCount: 5, From 428860f459c5c48dbb474cd530c628ab0754612d Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Thu, 22 Jul 2021 18:11:24 +0300 Subject: [PATCH 06/57] fix calculation height so that work for images and fix problems with font --- .../src/views/datagrid/row_auto_height.js | 63 +++++++++++++++++-- src/components/datagrid/data_grid.tsx | 2 +- src/components/datagrid/data_grid_cell.tsx | 49 +++++++++++++-- src/components/datagrid/row_height_utils.ts | 15 ++++- 4 files changed, 116 insertions(+), 13 deletions(-) diff --git a/src-docs/src/views/datagrid/row_auto_height.js b/src-docs/src/views/datagrid/row_auto_height.js index 13a23e9655d..b47ce95924f 100644 --- a/src-docs/src/views/datagrid/row_auto_height.js +++ b/src-docs/src/views/datagrid/row_auto_height.js @@ -8,7 +8,13 @@ import React, { } from 'react'; import { fake } from 'faker'; -import { EuiDataGrid, EuiText } from '../../../../src/components/'; +import { + EuiDataGrid, + EuiText, + EuiImage, + EuiButtonGroup, + EuiSpacer, +} from '../../../../src/components/'; const DataContext = createContext(); @@ -27,8 +33,10 @@ const columns = [ // instead of loading up front, generate entries on the fly const raw_data = []; -function RenderCellValue({ rowIndex, columnId }) { - const { data, adjustMountedCellCount } = useContext(DataContext); +function RenderCellValue({ rowIndex, columnId, onCellLoaded }) { + const { data, adjustMountedCellCount, contentTypeSelected } = useContext( + DataContext + ); useEffect(() => { adjustMountedCellCount(1); @@ -42,12 +50,35 @@ function RenderCellValue({ rowIndex, columnId }) { }; } - return data[rowIndex][columnId]; + const firstNumberSize = rowIndex < 7 && rowIndex > 0 ? rowIndex : 5; + + return contentTypeSelected === 'images' ? ( + + ) : ( + data[rowIndex][columnId] + ); } +const contentTypeOptions = [ + { + id: 'text', + label: 'Text', + }, + { + id: 'images', + label: 'Images', + }, +]; + export default () => { // ** Pagination config const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); + const [contentTypeSelected, setContentTypeSelected] = useState('text'); const onChangeItemsPerPage = useCallback( (pageSize) => @@ -59,6 +90,11 @@ export default () => { [setPagination] ); + const onContentTypeChange = useCallback( + (optionId) => setContentTypeSelected(optionId), + [setContentTypeSelected] + ); + const onChangePage = useCallback( (pageIndex) => setPagination((pagination) => ({ ...pagination, pageIndex })), @@ -82,18 +118,19 @@ export default () => { 4: 140, }, }), - [] + [contentTypeSelected] ); const dataContext = useMemo( () => ({ data: raw_data, + contentTypeSelected, adjustMountedCellCount: (adjustment) => setMountedCellCount( (mountedCellCount) => mountedCellCount + adjustment ), }), - [] + [contentTypeSelected] ); const grid = ( @@ -119,6 +156,20 @@ export default () => {

There are {mountedCellCount} rendered cells

 + + +

Type of content

+ + + + {grid} ); diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index cbe217a3d71..7aa054aa4ac 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -867,7 +867,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { useEffect(() => { rowHeightUtils.clearHeightsCache(); - }, [orderedVisibleColumns]); + }, [orderedVisibleColumns, rowHeightsOptions]); const [contentRef, setContentRef] = useState(null); diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index a442f8003a8..33b1d16db27 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -252,11 +252,30 @@ export class EuiDataGridCell extends Component< [this.props.colIndex, this.props.visibleRowIndex], this.onFocusUpdate ); - if (this.cellContentsRef?.offsetHeight) { + + if (this.cellContentsRef?.offsetHeight && this.props.rowHeightsOptions) { this.props.rowHeightUtils?.setRowHeight( this.props.rowIndex, this.cellContentsRef?.offsetHeight ); + + const font = this.props.rowHeightUtils?.getFont(); + + if (this.cellContentsRef.innerText && font) { + // we should download needed fonts so that we can get a right height of text + if ( + !(document as any).fonts.check(font, this.cellContentsRef.innerText) + ) { + (document as any).fonts + .load(font, this.cellContentsRef.innerText) + .then(() => { + this.props.rowHeightUtils?.setRowHeight( + this.props.rowIndex, + this.cellContentsRef?.offsetHeight + ); + }); + } + } } } @@ -311,12 +330,22 @@ export class EuiDataGridCell extends Component< return true; // check if we should update cell because height was changed - if (this.cellRef.current && nextProps.getRowHeight) { + if ( + this.cellRef.current && + nextProps.getRowHeight && + nextProps.rowHeightUtils + ) { if ( - this.cellRef.current.offsetHeight && - this.cellRef.current.offsetHeight !== + !nextProps.rowHeightUtils?.compareHeights( + this.cellRef.current.offsetHeight, nextProps.getRowHeight(nextProps.rowIndex) + ) ) { + // we cann't use it in componentDidUpdate because we should set new height only in this case + nextProps.rowHeightUtils?.setRowHeight( + nextProps.rowIndex, + this.cellContentsRef?.offsetHeight + ); return true; } } @@ -324,6 +353,17 @@ export class EuiDataGridCell extends Component< return false; } + // needed so that we calculate right height for cell if content is image + // because we can get right height only after image will loaded + onCellLoaded = () => { + if (this.props.rowHeightUtils) { + this.props.rowHeightUtils?.setRowHeight( + this.props.rowIndex, + this.cellContentsRef?.offsetHeight + ); + } + }; + setCellProps = (cellProps: HTMLAttributes) => { this.setState({ cellProps }); }; @@ -492,6 +532,7 @@ export class EuiDataGridCell extends Component< setCellContentsRef: this.setCellContentsRef, rowHeightsOptions: this.props.rowHeightsOptions, rowHeightUtils: this.props.rowHeightUtils, + onCellLoaded: this.onCellLoaded, }; const anchorClass = classNames('euiDataGridRowCell__expandFlex', { diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 2dc6d61544f..11607570685 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -42,17 +42,23 @@ export class RowHeightUtils { paddingTop: number; paddingBottom: number; lineHeight: number; + font: string; } = { paddingTop: 0, paddingBottom: 0, lineHeight: 1, + font: '', }; private fakeCell = document.createElement('div'); private heightsCache = new Map(); private timerId: any; private grid?: Grid; - setRowHeight(rowIndex: number, height: number) { + getFont() { + return this.styles.font; + } + + setRowHeight(rowIndex: number, height: number = 32) { clearTimeout(this.timerId); const cachedHeight = this.heightsCache.get(rowIndex) || 0; const adaptedHeight = @@ -60,13 +66,17 @@ export class RowHeightUtils { if (cachedHeight < adaptedHeight) { this.heightsCache.set(rowIndex, adaptedHeight); } - this.timerId = setTimeout(() => this.resetGrid(), 100); + this.timerId = setTimeout(() => this.resetGrid(), 0); } getRowHeight(rowIndex: number) { return this.heightsCache.get(rowIndex) || 0; } + compareHeights(currentRowHeight: number, cachedRowHeight: number) { + return currentRowHeight === cachedRowHeight; + } + resetGrid() { this.grid?.resetAfterRowIndex(0); } @@ -109,6 +119,7 @@ export class RowHeightUtils { paddingTop: getNumberFromPx(allStyles.paddingTop), paddingBottom: getNumberFromPx(allStyles.paddingBottom), lineHeight: getNumberFromPx(allStyles.lineHeight), + font: allStyles.font, }; document.body.removeChild(this.fakeCell); // we need clear height cache so that recalculate heigths for new styles. From 05c52a85af80265fd3e57a4a790f38dbb1913769 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 23 Jul 2021 14:53:11 +0300 Subject: [PATCH 07/57] Fix tests --- src/components/datagrid/data_grid.test.tsx | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index 3aa781434cb..a1ad4a423d1 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -24,6 +24,18 @@ jest.mock('./row_height_utils', () => { RowHeightUtils: jest.fn().mockImplementation(() => { return { computeStylesForGridCell: () => {}, + clearHeightsCache: () => {}, + setGrid: () => {}, + getStylesForCell: () => ({ + wordWrap: 'break-word', + wordBreak: 'break-word', + flexGrow: 1, + }), + setRowHeight: () => {}, + getRowHeight: () => 32, + getFont: () => null, + compareHeights: (currentRowHeight: number, cachedRowHeight: number) => + currentRowHeight === cachedRowHeight, getCalculatedHeight: ( heightOption: EuiDataGridRowHeightOption, defaultHeight: number @@ -46,7 +58,6 @@ jest.mock('./row_height_utils', () => { }, }; }), - getStylesForCell: () => ({}), }; }); From eca4c2bb5cdec74bab3d45fc3ae7d57ec87246da Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 23 Jul 2021 15:38:31 +0300 Subject: [PATCH 08/57] fix eslint --- src-docs/src/views/datagrid/row_auto_height.js | 2 +- src/components/datagrid/data_grid.tsx | 4 ++-- src/components/datagrid/data_grid_body.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src-docs/src/views/datagrid/row_auto_height.js b/src-docs/src/views/datagrid/row_auto_height.js index b47ce95924f..a2c815c86c5 100644 --- a/src-docs/src/views/datagrid/row_auto_height.js +++ b/src-docs/src/views/datagrid/row_auto_height.js @@ -115,7 +115,7 @@ export default () => { 1: { lineCount: 5, }, - 4: 140, + 4: contentTypeSelected === 'images' ? 240 : 140, }, }), [contentTypeSelected] diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index 7aa054aa4ac..ebedabf0689 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -867,7 +867,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { useEffect(() => { rowHeightUtils.clearHeightsCache(); - }, [orderedVisibleColumns, rowHeightsOptions]); + }, [orderedVisibleColumns, rowHeightsOptions, rowHeightUtils]); const [contentRef, setContentRef] = useState(null); @@ -897,7 +897,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { cellPadding: gridStyles.cellPadding, fontSize: gridStyles.fontSize, }); - }, [gridStyles.cellPadding, gridStyles.fontSize]); + }, [gridStyles.cellPadding, gridStyles.fontSize, rowHeightUtils]); const classes = classNames( 'euiDataGrid', diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index f97a1744934..f1ce27236b0 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -563,7 +563,7 @@ export const EuiDataGridBody: FunctionComponent = ( if (gridRef.current) { rowHeightUtils.setGrid(gridRef.current); } - }, [gridRef.current, rowHeightUtils]); + }, [gridRef, rowHeightUtils]); const defaultHeight = useMemo( () => From 82f698a9b9c3d56f6938e3031ab4ab66396e6021 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 27 Jul 2021 00:56:36 +0300 Subject: [PATCH 09/57] fix some problems --- src/components/datagrid/data_grid_body.tsx | 2 +- src/components/datagrid/data_grid_cell.tsx | 6 +++--- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index f1ce27236b0..e34ec3b8942 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -563,7 +563,7 @@ export const EuiDataGridBody: FunctionComponent = ( if (gridRef.current) { rowHeightUtils.setGrid(gridRef.current); } - }, [gridRef, rowHeightUtils]); + }); const defaultHeight = useMemo( () => diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 33b1d16db27..2dab8fe0cd1 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -261,13 +261,13 @@ export class EuiDataGridCell extends Component< const font = this.props.rowHeightUtils?.getFont(); - if (this.cellContentsRef.innerText && font) { + if (this.cellContentsRef.textContent && font) { // we should download needed fonts so that we can get a right height of text if ( - !(document as any).fonts.check(font, this.cellContentsRef.innerText) + !(document as any).fonts.check(font, this.cellContentsRef.textContent) ) { (document as any).fonts - .load(font, this.cellContentsRef.innerText) + .load(font, this.cellContentsRef.textContent) .then(() => { this.props.rowHeightUtils?.setRowHeight( this.props.rowIndex, From 253f16a46bb3828d52c82f108615210aef5b1940 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Tue, 27 Jul 2021 16:52:17 +0300 Subject: [PATCH 10/57] use resizeObserver instead of handling height in didMount method --- .../src/views/datagrid/row_auto_height.js | 3 +- src/components/datagrid/data_grid_cell.tsx | 75 ++++++++----------- 2 files changed, 34 insertions(+), 44 deletions(-) diff --git a/src-docs/src/views/datagrid/row_auto_height.js b/src-docs/src/views/datagrid/row_auto_height.js index a2c815c86c5..ffbe265dc2b 100644 --- a/src-docs/src/views/datagrid/row_auto_height.js +++ b/src-docs/src/views/datagrid/row_auto_height.js @@ -33,7 +33,7 @@ const columns = [ // instead of loading up front, generate entries on the fly const raw_data = []; -function RenderCellValue({ rowIndex, columnId, onCellLoaded }) { +function RenderCellValue({ rowIndex, columnId }) { const { data, adjustMountedCellCount, contentTypeSelected } = useContext( DataContext ); @@ -57,7 +57,6 @@ function RenderCellValue({ rowIndex, columnId, onCellLoaded }) { size={'original'} alt="Fake img" url={`https://source.unsplash.com/${firstNumberSize}00x${firstNumberSize}00/?starwars`} - onLoad={onCellLoaded} /> ) : ( data[rowIndex][columnId] diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 2dab8fe0cd1..bc8cb2ff74d 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -252,31 +252,6 @@ export class EuiDataGridCell extends Component< [this.props.colIndex, this.props.visibleRowIndex], this.onFocusUpdate ); - - if (this.cellContentsRef?.offsetHeight && this.props.rowHeightsOptions) { - this.props.rowHeightUtils?.setRowHeight( - this.props.rowIndex, - this.cellContentsRef?.offsetHeight - ); - - const font = this.props.rowHeightUtils?.getFont(); - - if (this.cellContentsRef.textContent && font) { - // we should download needed fonts so that we can get a right height of text - if ( - !(document as any).fonts.check(font, this.cellContentsRef.textContent) - ) { - (document as any).fonts - .load(font, this.cellContentsRef.textContent) - .then(() => { - this.props.rowHeightUtils?.setRowHeight( - this.props.rowIndex, - this.cellContentsRef?.offsetHeight - ); - }); - } - } - } } onFocusUpdate = (isFocused: boolean) => { @@ -294,6 +269,23 @@ export class EuiDataGridCell extends Component< } } + componentDidUpdate() { + if ( + this.cellRef.current && + this.props.getRowHeight && + this.props.rowHeightUtils && + !this.props.rowHeightUtils?.compareHeights( + this.cellRef.current.offsetHeight, + this.props.getRowHeight(this.props.rowIndex) + ) + ) { + this.props.rowHeightUtils?.setRowHeight( + this.props.rowIndex, + this.cellContentsRef?.offsetHeight + ); + } + } + shouldComponentUpdate( nextProps: EuiDataGridCellProps, nextState: EuiDataGridCellState @@ -341,11 +333,6 @@ export class EuiDataGridCell extends Component< nextProps.getRowHeight(nextProps.rowIndex) ) ) { - // we cann't use it in componentDidUpdate because we should set new height only in this case - nextProps.rowHeightUtils?.setRowHeight( - nextProps.rowIndex, - this.cellContentsRef?.offsetHeight - ); return true; } } @@ -353,23 +340,28 @@ export class EuiDataGridCell extends Component< return false; } - // needed so that we calculate right height for cell if content is image - // because we can get right height only after image will loaded - onCellLoaded = () => { - if (this.props.rowHeightUtils) { - this.props.rowHeightUtils?.setRowHeight( - this.props.rowIndex, - this.cellContentsRef?.offsetHeight - ); - } - }; - setCellProps = (cellProps: HTMLAttributes) => { this.setState({ cellProps }); }; setCellContentsRef = (ref: HTMLDivElement | null) => { this.cellContentsRef = ref; + if (this.props.rowHeightUtils) { + if (ref && hasResizeObserver) { + this.observer = new (window as any).ResizeObserver(() => { + const rowHeight = this.cellContentsRef?.getBoundingClientRect() + .height; + + this.props.rowHeightUtils?.setRowHeight( + this.props.rowIndex, + rowHeight + ); + }); + this.observer.observe(ref); + } else if (this.observer) { + this.observer.disconnect(); + } + } this.preventTabbing(); }; @@ -532,7 +524,6 @@ export class EuiDataGridCell extends Component< setCellContentsRef: this.setCellContentsRef, rowHeightsOptions: this.props.rowHeightsOptions, rowHeightUtils: this.props.rowHeightUtils, - onCellLoaded: this.onCellLoaded, }; const anchorClass = classNames('euiDataGridRowCell__expandFlex', { From 9fe02702497a96d0bd5f8364f34dbbd931442e7d Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Wed, 28 Jul 2021 18:21:45 +0300 Subject: [PATCH 11/57] Fix some remarks --- src/components/datagrid/data_grid.tsx | 2 +- src/components/datagrid/data_grid_cell.tsx | 38 ++++++++++++---------- 2 files changed, 22 insertions(+), 18 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index ebedabf0689..b1fdf16e204 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -863,7 +863,7 @@ export const EuiDataGrid: FunctionComponent = (props) => { orderedVisibleColumns ); - const [rowHeightUtils] = useState(new RowHeightUtils()); + const rowHeightUtils = useMemo(() => new RowHeightUtils(), []); useEffect(() => { rowHeightUtils.clearHeightsCache(); diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index bc8cb2ff74d..35ac2d4c13f 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -170,12 +170,27 @@ const hasResizeObserver = typeof window !== 'undefined' && typeof (window as any).ResizeObserver !== 'undefined'; +function observeHeight( + component: HTMLDivElement | null, + setRowHeight?: (rowHeight: number) => void +) { + const observer = new (window as any).ResizeObserver(() => { + const rowHeight = component!.getBoundingClientRect().height; + if (setRowHeight) { + setRowHeight(rowHeight); + } + }); + observer.observe(component); + return observer; +} + export class EuiDataGridCell extends Component< EuiDataGridCellProps, EuiDataGridCellState > { cellRef = createRef() as MutableRefObject; - observer!: any; // ResizeObserver + observer!: any; // Cell ResizeObserver + contentObserver!: any; // Cell Content ResizeObserver popoverPanelRef: MutableRefObject = createRef(); cellContentsRef: HTMLDivElement | null = null; state: EuiDataGridCellState = { @@ -196,14 +211,7 @@ export class EuiDataGridCell extends Component< // watch the first cell for size changes and use that to re-compute row heights if (this.props.colIndex === 0 && this.props.visibleRowIndex === 0) { if (ref && hasResizeObserver) { - this.observer = new (window as any).ResizeObserver(() => { - const rowHeight = this.cellRef.current!.getBoundingClientRect() - .height; - if (this.props.setRowHeight) { - this.props.setRowHeight(rowHeight); - } - }); - this.observer.observe(ref); + this.observer = observeHeight(ref, this.props.setRowHeight); } else if (this.observer) { this.observer.disconnect(); } @@ -348,18 +356,14 @@ export class EuiDataGridCell extends Component< this.cellContentsRef = ref; if (this.props.rowHeightUtils) { if (ref && hasResizeObserver) { - this.observer = new (window as any).ResizeObserver(() => { - const rowHeight = this.cellContentsRef?.getBoundingClientRect() - .height; - + const setRowHeight = (rowHeight: number) => this.props.rowHeightUtils?.setRowHeight( this.props.rowIndex, rowHeight ); - }); - this.observer.observe(ref); - } else if (this.observer) { - this.observer.disconnect(); + this.contentObserver = observeHeight(ref, setRowHeight); + } else if (this.contentObserver) { + this.contentObserver.disconnect(); } } this.preventTabbing(); From 266408064d8c824b5ee9b466f52e7fd072617797 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 30 Jul 2021 16:40:54 +0300 Subject: [PATCH 12/57] fix some problems with shrinking --- src/components/datagrid/data_grid_body.tsx | 7 ++++-- src/components/datagrid/data_grid_cell.tsx | 2 ++ src/components/datagrid/row_height_utils.ts | 27 ++++++++++++--------- 3 files changed, 22 insertions(+), 14 deletions(-) diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index e34ec3b8942..22b186d09df 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -625,8 +625,11 @@ export const EuiDataGridBody: FunctionComponent = ( const rowCountToAffordFor = pagination ? pagination.pageSize : visibleRowIndices.length; - const unconstrainedHeight = - defaultHeight * rowCountToAffordFor + headerRowHeight + footerRowHeight; + const unconstrainedHeight = useMemo( + () => + defaultHeight * rowCountToAffordFor + headerRowHeight + footerRowHeight, + [defaultHeight, rowCountToAffordFor, headerRowHeight, footerRowHeight] + ); // unable to determine this until the container's size is known anyway const unconstrainedWidth = 0; diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 1863dddd8e0..181f38ea4cc 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -300,6 +300,7 @@ export class EuiDataGridCell extends Component< ) { this.props.rowHeightUtils?.setRowHeight( this.props.rowIndex, + this.props.colIndex, this.cellContentsRef?.offsetHeight ); } @@ -370,6 +371,7 @@ export class EuiDataGridCell extends Component< const setRowHeight = (rowHeight: number) => this.props.rowHeightUtils?.setRowHeight( this.props.rowIndex, + this.props.colIndex, rowHeight ); this.contentObserver = observeHeight(ref, setRowHeight); diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 11607570685..3d4b3175af3 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -50,27 +50,29 @@ export class RowHeightUtils { font: '', }; private fakeCell = document.createElement('div'); - private heightsCache = new Map(); + private heightsCache = new Map>(); private timerId: any; private grid?: Grid; - getFont() { - return this.styles.font; - } - - setRowHeight(rowIndex: number, height: number = 32) { + setRowHeight(rowIndex: number, colIndex: number, height: number = 32) { clearTimeout(this.timerId); - const cachedHeight = this.heightsCache.get(rowIndex) || 0; + const rowHeights = this.heightsCache.get(rowIndex) || {}; const adaptedHeight = height + this.styles.paddingTop + this.styles.paddingBottom; - if (cachedHeight < adaptedHeight) { - this.heightsCache.set(rowIndex, adaptedHeight); - } - this.timerId = setTimeout(() => this.resetGrid(), 0); + rowHeights[colIndex] = adaptedHeight; + this.heightsCache.set(rowIndex, rowHeights); + this.timerId = setTimeout(() => this.resetGrid(), 1); } getRowHeight(rowIndex: number) { - return this.heightsCache.get(rowIndex) || 0; + const rowHeights = this.heightsCache.get(rowIndex) || {}; + const rowHeightValues = Object.values(rowHeights); + + if (rowHeightValues.length) { + return Math.max(...rowHeightValues); + } + + return 0; } compareHeights(currentRowHeight: number, cachedRowHeight: number) { @@ -78,6 +80,7 @@ export class RowHeightUtils { } resetGrid() { + console.log('resetGrid'); this.grid?.resetAfterRowIndex(0); } From 517ebcb95c06efd6d41cc096e81ce83980e62779 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Fri, 30 Jul 2021 18:49:55 +0300 Subject: [PATCH 13/57] Fix scrolling --- src/components/datagrid/row_height_utils.ts | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/row_height_utils.ts b/src/components/datagrid/row_height_utils.ts index 3d4b3175af3..b816733a11c 100644 --- a/src/components/datagrid/row_height_utils.ts +++ b/src/components/datagrid/row_height_utils.ts @@ -55,10 +55,15 @@ export class RowHeightUtils { private grid?: Grid; setRowHeight(rowIndex: number, colIndex: number, height: number = 32) { - clearTimeout(this.timerId); const rowHeights = this.heightsCache.get(rowIndex) || {}; const adaptedHeight = height + this.styles.paddingTop + this.styles.paddingBottom; + + if (rowHeights[colIndex] === adaptedHeight) { + return; + } + + clearTimeout(this.timerId); rowHeights[colIndex] = adaptedHeight; this.heightsCache.set(rowIndex, rowHeights); this.timerId = setTimeout(() => this.resetGrid(), 1); From 752b354e1ccb5f143595be020df616a675e62acb Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Wed, 4 Aug 2021 12:34:17 +0300 Subject: [PATCH 14/57] Some performance improvements --- src/components/datagrid/data_grid.test.tsx | 1 + src/components/datagrid/data_grid_cell.tsx | 14 +++++++++++++- 2 files changed, 14 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/data_grid.test.tsx b/src/components/datagrid/data_grid.test.tsx index a1ad4a423d1..adcb9e2f2e0 100644 --- a/src/components/datagrid/data_grid.test.tsx +++ b/src/components/datagrid/data_grid.test.tsx @@ -31,6 +31,7 @@ jest.mock('./row_height_utils', () => { wordBreak: 'break-word', flexGrow: 1, }), + isAutoHeight: () => false, setRowHeight: () => {}, getRowHeight: () => 32, getFont: () => null, diff --git a/src/components/datagrid/data_grid_cell.tsx b/src/components/datagrid/data_grid_cell.tsx index 181f38ea4cc..9154f5a1542 100644 --- a/src/components/datagrid/data_grid_cell.tsx +++ b/src/components/datagrid/data_grid_cell.tsx @@ -293,6 +293,11 @@ export class EuiDataGridCell extends Component< this.cellRef.current && this.props.getRowHeight && this.props.rowHeightUtils && + this.props.rowHeightsOptions && + this.props.rowHeightUtils.isAutoHeight( + this.props.rowIndex, + this.props.rowHeightsOptions + ) && !this.props.rowHeightUtils?.compareHeights( this.cellRef.current.offsetHeight, this.props.getRowHeight(this.props.rowIndex) @@ -366,7 +371,14 @@ export class EuiDataGridCell extends Component< setCellContentsRef = (ref: HTMLDivElement | null) => { this.cellContentsRef = ref; - if (this.props.rowHeightUtils) { + if ( + this.props.rowHeightUtils && + this.props.rowHeightsOptions && + this.props.rowHeightUtils.isAutoHeight( + this.props.rowIndex, + this.props.rowHeightsOptions + ) + ) { if (ref && hasResizeObserver) { const setRowHeight = (rowHeight: number) => this.props.rowHeightUtils?.setRowHeight( From ce4ffa4896b2fd43a7765e0047b619c24e201e06 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Thu, 5 Aug 2021 16:07:32 +0300 Subject: [PATCH 15/57] use callback ref for setting grid in rowHeigthsUtils instead of useEffect --- src/components/datagrid/data_grid_body.tsx | 28 +++++++++++++++------- 1 file changed, 19 insertions(+), 9 deletions(-) diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 22b186d09df..2ba29894349 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -523,7 +523,8 @@ export const EuiDataGridBody: FunctionComponent = ( [paginationOffset, rowMap] ); - const gridRef = useRef(null); + const gridRef = useRef(null); + useEffect(() => { if (gridRef.current) { gridRef.current.resetAfterColumnIndex(0); @@ -557,13 +558,17 @@ export const EuiDataGridBody: FunctionComponent = ( ] ); - const [minRowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT); + const setGridRef = useCallback( + (ref: Grid | null) => { + gridRef.current = ref; + if (ref) { + rowHeightUtils.setGrid(ref); + } + }, + [rowHeightUtils] + ); - useEffect(() => { - if (gridRef.current) { - rowHeightUtils.setGrid(gridRef.current); - } - }); + const [minRowHeight, setRowHeight] = useState(INITIAL_ROW_HEIGHT); const defaultHeight = useMemo( () => @@ -614,7 +619,12 @@ export const EuiDataGridBody: FunctionComponent = ( if (gridRef.current && rowHeightsOptions) { gridRef.current.resetAfterRowIndex(0); } - }, [pagination?.pageIndex, rowHeightsOptions, gridStyles]); + }, [ + pagination?.pageIndex, + rowHeightsOptions, + gridStyles?.cellPadding, + gridStyles?.fontSize, + ]); useEffect(() => { if (gridRef.current) { @@ -699,7 +709,7 @@ export const EuiDataGridBody: FunctionComponent = ( Date: Mon, 9 Aug 2021 16:38:44 +0300 Subject: [PATCH 16/57] Add new properties --- src/components/datagrid/data_grid.tsx | 12 ++++++++++++ src/components/datagrid/data_grid_body.tsx | 7 +++++++ src/components/datagrid/data_grid_types.ts | 6 +++++- 3 files changed, 24 insertions(+), 1 deletion(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index b1fdf16e204..ec041ca47f1 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -154,6 +154,14 @@ type CommonGridProps = CommonProps & * Sets the grid's width, forcing it to overflow in a scrollable container with cell virtualization */ width?: CSSProperties['width']; + /** + * The number of rows to render outside of the visible area. + */ + overscanRowCount?: number; + /** + * The number of columns to render outside of the visible area. + */ + overscanColumnCount?: number; /** * A #EuiDataGridRowHeightsOptions object that provides row heights options */ @@ -690,6 +698,8 @@ export const EuiDataGrid: FunctionComponent = (props) => { height, width, rowHeightsOptions, + overscanColumnCount, + overscanRowCount, ...rest } = props; @@ -1141,6 +1151,8 @@ export const EuiDataGrid: FunctionComponent = (props) => { interactiveCellId={interactiveCellId} rowHeightsOptions={rowHeightsOptions} rowHeightUtils={rowHeightUtils} + overscanColumnCount={overscanColumnCount} + overscanRowCount={overscanRowCount} gridStyles={gridStyles} />
diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index 2ba29894349..cb0f8da9d8e 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -83,6 +83,8 @@ export interface EuiDataGridBodyProps { toolbarHeight: number; rowHeightsOptions?: EuiDataGridRowHeightsOptions; rowHeightUtils: RowHeightUtils; + overscanColumnCount?: number; + overscanRowCount?: number; gridStyles?: EuiDataGridStyle; } @@ -342,6 +344,8 @@ export const EuiDataGridBody: FunctionComponent = ( toolbarHeight, rowHeightsOptions, rowHeightUtils, + overscanRowCount, + overscanColumnCount, gridStyles, } = props; @@ -719,6 +723,9 @@ export const EuiDataGridBody: FunctionComponent = ( } width={finalWidth} columnWidth={getWidth} + overscanRowCount={overscanRowCount || 1} + overscanColumnCount={overscanColumnCount || 1} + estimatedRowHeight={rowHeightsOptions?.estimatedRowHeight || defaultHeight} height={finalHeight} rowHeight={getRowHeight} itemData={{ diff --git a/src/components/datagrid/data_grid_types.ts b/src/components/datagrid/data_grid_types.ts index 15a6948a57f..fcde757e751 100644 --- a/src/components/datagrid/data_grid_types.ts +++ b/src/components/datagrid/data_grid_types.ts @@ -321,7 +321,7 @@ export type EuiDataGridOnColumnResizeHandler = ( export type EuiDataGridRowHeightOption = | number - | string + | 'auto' | ExclusiveUnion<{ lineCount: number }, { height: number }>; export interface EuiDataGridRowHeightsOptions { @@ -333,4 +333,8 @@ export interface EuiDataGridRowHeightsOptions { * Defines the height for a specific row. It can be line count or just height. */ rowHeights?: Record; + /** + * Average (or estimated) row height for unrendered rows. + */ + estimatedRowHeight?: number; } From e949d6bd3a99e3a8ed51958854053d9c93304e62 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Mon, 9 Aug 2021 16:41:58 +0300 Subject: [PATCH 17/57] add changelog --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index e25d23f29d9..095043ed8ee 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added `isDisabled` prop to `EuiFormRow` that disables the child field element ([#4908](https://github.com/elastic/eui/pull/4908)) +- Added `auto` as value for `defaultHeight` in prop `rowHeightsOptions` in `EuiDataGrid` that allows to content auto-fit to row ([#4958](https://github.com/elastic/eui/pull/4958)) ## [`37.0.0`](https://github.com/elastic/eui/tree/v37.0.0) From ffa0926563c79748a9bcac6f88e3df1acd7aeef3 Mon Sep 17 00:00:00 2001 From: Uladzislau Lasitsa Date: Mon, 9 Aug 2021 17:00:26 +0300 Subject: [PATCH 18/57] Fix lint --- src/components/datagrid/data_grid.tsx | 4 ++-- src/components/datagrid/data_grid_body.tsx | 4 +++- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/src/components/datagrid/data_grid.tsx b/src/components/datagrid/data_grid.tsx index ec041ca47f1..8ed97bc3a70 100644 --- a/src/components/datagrid/data_grid.tsx +++ b/src/components/datagrid/data_grid.tsx @@ -155,13 +155,13 @@ type CommonGridProps = CommonProps & */ width?: CSSProperties['width']; /** - * The number of rows to render outside of the visible area. + * The number of rows to render outside of the visible area. */ overscanRowCount?: number; /** * The number of columns to render outside of the visible area. */ - overscanColumnCount?: number; + overscanColumnCount?: number; /** * A #EuiDataGridRowHeightsOptions object that provides row heights options */ diff --git a/src/components/datagrid/data_grid_body.tsx b/src/components/datagrid/data_grid_body.tsx index cb0f8da9d8e..ca737b1e945 100644 --- a/src/components/datagrid/data_grid_body.tsx +++ b/src/components/datagrid/data_grid_body.tsx @@ -725,7 +725,9 @@ export const EuiDataGridBody: FunctionComponent = ( columnWidth={getWidth} overscanRowCount={overscanRowCount || 1} overscanColumnCount={overscanColumnCount || 1} - estimatedRowHeight={rowHeightsOptions?.estimatedRowHeight || defaultHeight} + estimatedRowHeight={ + rowHeightsOptions?.estimatedRowHeight || defaultHeight + } height={finalHeight} rowHeight={getRowHeight} itemData={{ From 4a7fddad57fe9d0ccbc4d8e0ff77aa212dd1fbaf Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Fri, 13 Aug 2021 12:34:12 -0600 Subject: [PATCH 19/57] convert autoheight example to TS --- package.json | 1 + ...row_auto_height.js => row_auto_height.tsx} | 50 +++++++++++++------ yarn.lock | 5 ++ 3 files changed, 40 insertions(+), 16 deletions(-) rename src-docs/src/views/datagrid/{row_auto_height.js => row_auto_height.tsx} (77%) diff --git a/package.json b/package.json index fce80195a4f..b1f2dc630d4 100644 --- a/package.json +++ b/package.json @@ -107,6 +107,7 @@ "@svgr/plugin-svgo": "^4.0.3", "@types/classnames": "^2.2.10", "@types/enzyme": "^3.10.5", + "@types/faker": "^5.5.8", "@types/jest": "^24.0.6", "@types/node": "^10.17.5", "@types/react": "^16.9.34", diff --git a/src-docs/src/views/datagrid/row_auto_height.js b/src-docs/src/views/datagrid/row_auto_height.tsx similarity index 77% rename from src-docs/src/views/datagrid/row_auto_height.js rename to src-docs/src/views/datagrid/row_auto_height.tsx index ffbe265dc2b..8797eeb6313 100644 --- a/src-docs/src/views/datagrid/row_auto_height.js +++ b/src-docs/src/views/datagrid/row_auto_height.tsx @@ -10,13 +10,26 @@ import { fake } from 'faker'; import { EuiDataGrid, - EuiText, - EuiImage, - EuiButtonGroup, - EuiSpacer, -} from '../../../../src/components/'; + EuiDataGridProps, +} from '../../../../src/components/datagrid'; +import { EuiText } from '../../../../src/components/text'; +import { EuiImage } from '../../../../src/components/image'; +import { EuiButtonGroup } from '../../../../src/components/button'; +import { EuiSpacer } from '../../../../src/components/spacer'; + +interface DataShape { + name: string; + text: string; +} -const DataContext = createContext(); +type DataContextShape = + | undefined + | { + data: DataShape[]; + contentTypeSelected: 'text' | 'images'; + adjustMountedCellCount: (adjustment: number) => void; + }; +const DataContext = createContext(undefined); const columns = [ { @@ -27,16 +40,19 @@ const columns = [ { id: 'text', }, -]; +] as EuiDataGridProps['columns']; // it is expensive to compute 10000 rows of fake data // instead of loading up front, generate entries on the fly -const raw_data = []; +const raw_data: DataShape[] = []; -function RenderCellValue({ rowIndex, columnId }) { +const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({ + rowIndex, + columnId, +}) => { const { data, adjustMountedCellCount, contentTypeSelected } = useContext( DataContext - ); + )!; useEffect(() => { adjustMountedCellCount(1); @@ -59,9 +75,9 @@ function RenderCellValue({ rowIndex, columnId }) { url={`https://source.unsplash.com/${firstNumberSize}00x${firstNumberSize}00/?starwars`} /> ) : ( - data[rowIndex][columnId] + data[rowIndex][columnId as 'text' | 'name'] ); -} +}; const contentTypeOptions = [ { @@ -77,7 +93,9 @@ const contentTypeOptions = [ export default () => { // ** Pagination config const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); - const [contentTypeSelected, setContentTypeSelected] = useState('text'); + const [contentTypeSelected, setContentTypeSelected] = useState< + 'text' | 'images' + >('text'); const onChangeItemsPerPage = useCallback( (pageSize) => @@ -109,7 +127,7 @@ export default () => { const rowHeightsOptions = useMemo( () => ({ - defaultHeight: 'auto', + defaultHeight: 'auto' as const, rowHeights: { 1: { lineCount: 5, @@ -120,11 +138,11 @@ export default () => { [contentTypeSelected] ); - const dataContext = useMemo( + const dataContext = useMemo( () => ({ data: raw_data, contentTypeSelected, - adjustMountedCellCount: (adjustment) => + adjustMountedCellCount: (adjustment: number) => setMountedCellCount( (mountedCellCount) => mountedCellCount + adjustment ), diff --git a/yarn.lock b/yarn.lock index 570c292e4a2..d6115b86315 100755 --- a/yarn.lock +++ b/yarn.lock @@ -1615,6 +1615,11 @@ resolved "https://registry.yarnpkg.com/@types/events/-/events-3.0.0.tgz#2862f3f58a9a7f7c3e78d79f130dd4d71c25c2a7" integrity sha512-EaObqwIvayI5a8dCzhFrjKzVwKLxjoG9T6Ppd5CEo07LRKfQ8Yokw54r5+Wq7FaBQ+yXRvQAYPrHwya1/UFt9g== +"@types/faker@^5.5.8": + version "5.5.8" + resolved "https://registry.yarnpkg.com/@types/faker/-/faker-5.5.8.tgz#6649adfdfdbb0acf95361fc48f2d0ca6e88bd1cf" + integrity sha512-bsl0rYsaZVHlZkynL5O04q6YXDmVjcid6MbOHWqvtE2WWs/EKhp0qchDDhVWlWyQXUffX1G83X9LnMxRl8S/Mw== + "@types/glob@^7.1.1": version "7.1.1" resolved "https://registry.yarnpkg.com/@types/glob/-/glob-7.1.1.tgz#aa59a1c6e3fbc421e07ccd31a944c30eba521575" From 145754410220fdfa272037ee171d34bebc58a750 Mon Sep 17 00:00:00 2001 From: Chandler Prall Date: Wed, 18 Aug 2021 22:21:53 -0600 Subject: [PATCH 20/57] With data --- .../src/views/datagrid/row_auto_height.tsx | 185 +- .../views/datagrid/row_auto_height_data.json | 13054 ++++++++++++++++ 2 files changed, 13166 insertions(+), 73 deletions(-) create mode 100644 src-docs/src/views/datagrid/row_auto_height_data.json diff --git a/src-docs/src/views/datagrid/row_auto_height.tsx b/src-docs/src/views/datagrid/row_auto_height.tsx index 8797eeb6313..c6fde0d1cfc 100644 --- a/src-docs/src/views/datagrid/row_auto_height.tsx +++ b/src-docs/src/views/datagrid/row_auto_height.tsx @@ -5,97 +5,159 @@ import React, { useContext, useMemo, useEffect, + ReactNode, } from 'react'; -import { fake } from 'faker'; +// @ts-ignore not configured to import json +import githubData from './row_auto_height_data.json'; import { EuiDataGrid, EuiDataGridProps, } from '../../../../src/components/datagrid'; import { EuiText } from '../../../../src/components/text'; -import { EuiImage } from '../../../../src/components/image'; -import { EuiButtonGroup } from '../../../../src/components/button'; import { EuiSpacer } from '../../../../src/components/spacer'; +import { EuiLink } from '../../../../src/components/link'; +import { EuiIcon } from '../../../../src/components/icon'; +import { EuiToolTip } from '../../../../src/components/tool_tip'; +import { EuiAvatar } from '../../../../src/components/avatar'; +import { EuiBadge } from '../../../../src/components/badge'; +import { EuiMarkdownFormat } from '../../../../src/components/markdown_editor'; interface DataShape { - name: string; - text: string; + html_url: string; + title: string; + user: { + login: string; + avatar_url: string; + }; + labels: Array<{ + name: string; + color: string; + }>; + comments: number; + created_at: string; + body?: string; +} + +// convert strings to Date objects +for (let i = 0; i < githubData.length; i++) { + githubData[i].created_at = new Date(githubData[i].created_at); } type DataContextShape = | undefined | { data: DataShape[]; - contentTypeSelected: 'text' | 'images'; adjustMountedCellCount: (adjustment: number) => void; }; const DataContext = createContext(undefined); const columns = [ { - id: 'name', - displayAsText: 'Name', - defaultSortDirection: 'asc', + id: 'created', + displayAsText: 'Created', + schema: 'datetime', + isExpandable: false, + }, + { + id: 'title', + displayAsText: 'Title', + isExpandable: false, }, { - id: 'text', + id: 'user', + displayAsText: 'User', + isExpandable: false, }, -] as EuiDataGridProps['columns']; + { + id: 'body', + displayAsText: 'Description', + }, + { + id: 'labels', + displayAsText: 'Labels', + isExpandable: false, + }, +]; // it is expensive to compute 10000 rows of fake data // instead of loading up front, generate entries on the fly -const raw_data: DataShape[] = []; +const raw_data: DataShape[] = githubData; const RenderCellValue: EuiDataGridProps['renderCellValue'] = ({ rowIndex, columnId, + isDetails, }) => { - const { data, adjustMountedCellCount, contentTypeSelected } = useContext( - DataContext - )!; + const { data, adjustMountedCellCount } = useContext(DataContext)!; useEffect(() => { adjustMountedCellCount(1); return () => adjustMountedCellCount(-1); }, [adjustMountedCellCount]); - if (data[rowIndex] == null) { - data[rowIndex] = { - name: fake('{{lorem.text}}'), - text: fake('{{lorem.text}}'), - }; + const item = data[rowIndex]; + let content: ReactNode = ''; + + if (columnId === 'title') { + content = ( + <> + {item.comments >= 1 && ( + + + + )} + + {item.title} + + + ); + } else if (columnId === 'user') { + content = ( + <> + +  {item.user.login} + + ); + } else if (columnId === 'labels') { + content = ( + <> + {item.labels.map(({ name, color }) => ( + {name} + ))} + + ); + } else if (columnId === 'created') { + content = item.created_at.toString(); + } else if (columnId === 'body') { + if (isDetails) { + // expanded in a popover + content = {item.body ?? ''}; + } else { + // a full issue description is a *lot* to shove into a cell + content = (item.body ?? '').slice(0, 300); + } } - const firstNumberSize = rowIndex < 7 && rowIndex > 0 ? rowIndex : 5; - - return contentTypeSelected === 'images' ? ( - - ) : ( - data[rowIndex][columnId as 'text' | 'name'] - ); + return content; }; -const contentTypeOptions = [ - { - id: 'text', - label: 'Text', - }, - { - id: 'images', - label: 'Images', - }, -]; - export default () => { // ** Pagination config const [pagination, setPagination] = useState({ pageIndex: 0, pageSize: 50 }); - const [contentTypeSelected, setContentTypeSelected] = useState< - 'text' | 'images' - >('text'); + + // ** Sorting config + const [sortingColumns, setSortingColumns] = useState([]); + const onSort = useCallback( + (sortingColumns) => { + setSortingColumns(sortingColumns); + }, + [setSortingColumns] + ); const onChangeItemsPerPage = useCallback( (pageSize) => @@ -107,11 +169,6 @@ export default () => { [setPagination] ); - const onContentTypeChange = useCallback( - (optionId) => setContentTypeSelected(optionId), - [setContentTypeSelected] - ); - const onChangePage = useCallback( (pageIndex) => setPagination((pagination) => ({ ...pagination, pageIndex })), @@ -128,26 +185,19 @@ export default () => { const rowHeightsOptions = useMemo( () => ({ defaultHeight: 'auto' as const, - rowHeights: { - 1: { - lineCount: 5, - }, - 4: contentTypeSelected === 'images' ? 240 : 140, - }, }), - [contentTypeSelected] + [] ); const dataContext = useMemo( () => ({ data: raw_data, - contentTypeSelected, adjustMountedCellCount: (adjustment: number) => setMountedCellCount( (mountedCellCount) => mountedCellCount + adjustment ), }), - [contentTypeSelected] + [] ); const grid = ( @@ -155,9 +205,11 @@ export default () => { aria-label="Row height options with auto demo" columns={columns} columnVisibility={{ visibleColumns, setVisibleColumns }} - rowCount={10000} + rowCount={raw_data.length} height={400} renderCellValue={RenderCellValue} + inMemory={{ level: 'sorting' }} + sorting={{ columns: sortingColumns, onSort }} rowHeightsOptions={rowHeightsOptions} pagination={{ ...pagination, @@ -174,19 +226,6 @@ export default () => {

There are {mountedCellCount} rendered cells

- -

Type of content

- - - - {grid} ); diff --git a/src-docs/src/views/datagrid/row_auto_height_data.json b/src-docs/src/views/datagrid/row_auto_height_data.json new file mode 100644 index 00000000000..c905eb01e22 --- /dev/null +++ b/src-docs/src/views/datagrid/row_auto_height_data.json @@ -0,0 +1,13054 @@ +[ + { + "html_url": "https://github.com/elastic/eui/pull/5049", + "title": "[Tech debt] Remove Prettier `jsxBracketSameLine` rule", + "user": { + "login": "constancecchen", + "avatar_url": "https://avatars.githubusercontent.com/u/549407?v=4", + "html_url": "https://github.com/constancecchen" + }, + "labels": [ + { + "id": 2767044132, + "node_id": "MDU6TGFiZWwyNzY3MDQ0MTMy", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-changelog", + "name": "skip-changelog", + "color": "FC0E3C", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-08-18T18:34:24Z", + "author_association": "MEMBER", + "body": "### Summary\r\n\r\nSee https://prettier.io/docs/en/options.html#jsx-brackets for documentation on the rule.\r\n\r\nWhy change it?\r\n\r\n- Consistency with Kibana (and baseline Prettier defaults, which means the majority of most codebases)\r\n- Per @snide's context, it's an old rule (3yr+) that likely came along with other projects at the time\r\n- (My 2c) It's visually easier to distinguish between a component's props and its child content with the `>` on a newline\r\n\r\n> ⚠️ This is a draft PR, per @snide's recommendation, to reduce merge conflicts/thrash with other in-flight PRs.\r\n> On Friday I'll un-draft it, pull latest master, re-run `yarn prettier --write \"{src,src-docs}/**/*.{tsx,js}`, and then (hopefully) merge.\r\n\r\n### Checklist\r\n\r\n- [x] Smoke test docs & ensure no console errors\r\n\r\nNo CHANGELOG was included, per the documentation wiki:\r\n\r\n> Avoid documenting internal implementation changes that don't affect the public interface" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5048", + "title": "[EuiPagination] Extract `PaginationButton` creation", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [], + "comments": 4, + "created_at": "2021-08-18T15:06:36Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nFixes #5046, in which EuiPagination failed to update state in EuiResizableContainer. The problem was not with EuiResizableContainer specifically, but could occur anytime a pagination change resulted in a parent rerender. Because the internal `PaginationButton` component was created _inside_ another component, it was recreated with old state on every rerender.\r\n\r\nThe solution here is to extract `PaginationButton` creation, eliminating rerender recreation.\r\n\r\nSee the to-be-reverted change in the [first EuiResizableContainer example](https://eui.elastic.co/pr_5048/#/layout/resizable-container#horizontal-resizing) for verification.\r\n\r\n### Checklist\r\n\r\n~- [ ] Check against **all themes** for compatibility in both light and dark modes~\r\n~- [ ] Checked in **mobile**~\r\n\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n\r\n~- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n~- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n- [x] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n\r\n~- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**~\r\n\r\n- [x] Checked for **breaking changes** and labeled appropriately\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n- [x] Reverted `revert me` docs commit\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5047", + "title": "[EuiDataGrid] Should not lose focus when scrolling ", + "user": { + "login": "timroes", + "avatar_url": "https://avatars.githubusercontent.com/u/877229?v=4", + "html_url": "https://github.com/timroes" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-08-18T14:04:07Z", + "author_association": "CONTRIBUTOR", + "body": "When you focus a cell in data grid than scroll it out of view and back an, the focus on that cell is lost.\r\n\r\n**Expected behavior:** focused cells should be focused still when scrolled back into view.\r\n\r\n![Peek 2021-08-18 16-02](https://user-images.githubusercontent.com/877229/129912436-bc942f19-b312-4643-9b6d-1708d39c14a7.gif)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5046", + "title": "[EuiResizableContainer] EuiPagination doesn't work inside EuiResizableContainer", + "user": { + "login": "crux153", + "avatar_url": "https://avatars.githubusercontent.com/u/10908841?v=4", + "html_url": "https://github.com/crux153" + }, + "labels": [], + "comments": 1, + "created_at": "2021-08-18T09:21:13Z", + "author_association": "CONTRIBUTOR", + "body": "![2021-08-18 18-15-02 2021-08-18 18_16_33](https://user-images.githubusercontent.com/10908841/129872730-b765c7ae-4b96-4256-a7a8-502ac0d5919a.gif)\r\n\r\n`EuiPagination` component doesn't work inside `EuiResizableContainer`.\r\n\r\n![2021-08-18 18-17-36 2021-08-18 18_18_07](https://user-images.githubusercontent.com/10908841/129872795-e5ded2ce-8b60-434f-a097-d31b51734dff.gif)\r\n\r\nThe arrow buttons work fine even inside `EuiResizableContainer`.\r\n\r\nCodeSandbox: [https://codesandbox.io/s/tender-swartz-7o5l2](https://codesandbox.io/s/tender-swartz-7o5l2)" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5045", + "title": "[Tech debt] Update various linter ignore files", + "user": { + "login": "constancecchen", + "avatar_url": "https://avatars.githubusercontent.com/u/549407?v=4", + "html_url": "https://github.com/constancecchen" + }, + "labels": [ + { + "id": 2767044132, + "node_id": "MDU6TGFiZWwyNzY3MDQ0MTMy", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-changelog", + "name": "skip-changelog", + "color": "FC0E3C", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-17T23:41:21Z", + "author_association": "MEMBER", + "body": "### Summary\r\n\r\nThis PR updates various linter ignore files to more accurately reflect what our CI/precommit checks require.\r\n\r\nI recommend following along by commit for granular diffs/commit messages, but I'll additionally add code comments below with screenshots of the errors I was seeing.\r\n\r\n#### Extra context \r\n\r\nI opened this PR primarily from the perspective of VSCode, which does a lot more live-checking of issues than other IDEs do OOTB (I could be totally wrong about this, but in-IDE catches of Typescript issues it's definitely one of the reasons why I switched over from Sublime when I started working in Kibana).\r\n\r\nFor repro: the 3 VSCode extensions I have installed are [ESLint](https://github.com/Microsoft/vscode-eslint), [Prettier](https://github.com/prettier/prettier-vscode), and [stylelint](https://github.com/stylelint/vscode-stylelint).\r\n\r\n### Checklist\r\n\r\nN/A, dev-only change" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5044", + "title": "Convert remaining `.js` files in `src/` to `.ts`", + "user": { + "login": "constancecchen", + "avatar_url": "https://avatars.githubusercontent.com/u/549407?v=4", + "html_url": "https://github.com/constancecchen" + }, + "labels": [], + "comments": 9, + "created_at": "2021-08-17T22:17:36Z", + "author_association": "MEMBER", + "body": "## Summary\r\n\r\ncloses #5034\r\n\r\n### What this PR does:\r\n\r\n- Converts `src/components/index.js` to `.ts` (9ce7d2b)\r\n- Converts `src/index.js` to `.ts` (98542a6)\r\n- Fixes the 2 typescript errors that arose from `yarn build`/`tsc --noEmit -p tsconfig-builttypes.json` (d8733a7)\r\n- Converts all index.ts exports from specific component exports to `*` wildcard exports (373e92c)\r\n\r\nI leaned hard on Greg's previous PR #4695 for this work - thanks for doing the heavy lifting @thompsongl!\r\n\r\n### What this PR does not do:\r\n\r\n- Address https://github.com/elastic/eui/blob/master/scripts/dtsgenerator.js#L95-L99\r\n\r\n## QA\r\n\r\n- [x] `yarn build` in EUI passed with no typescript errors\r\n- [x] `yarn kbn boostrap --no-validate` in Kibana passed with no errors when pointed at the built tgz\r\n- [x] `yarn start` in Kibana started with no errors, and styles/components loaded normally at a quick glance (including dark mode)\r\n- [x] `node scripts/type_check` passed in Kibana with no errors \r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n~- [ ] Checked in **mobile**~\r\n~- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**~\r\n~- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n~- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n~- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples~\r\n~- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**~\r\n~- [ ] Checked for **breaking changes** and labeled appropriately~\r\n~- [ ] Checked for **accessibility** including keyboard-only and screenreader modes~\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5043", + "title": "[Data Grid] Pluralization of sort button", + "user": { + "login": "babs20", + "avatar_url": "https://avatars.githubusercontent.com/u/63428137?v=4", + "html_url": "https://github.com/babs20" + }, + "labels": [], + "comments": 5, + "created_at": "2021-08-17T19:16:44Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\nFixes #5037 \r\n\r\nUpdated the `EuiDataGrid` sort button text to include pluralization of the text when fields are sorted.\r\n\r\nBefore:\r\n\"Before\r\n\"Before\r\n\r\nAfter:\r\n\"Before\r\n\"Before\r\n \r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n- [x] Checked in **mobile**\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n~- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n~- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n- [x] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [x] Checked for **breaking changes** and labeled appropriately\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5042", + "title": "[WIP] Adding Cypress for e2e & browser-based testing", + "user": { + "login": "chandlerprall", + "avatar_url": "https://avatars.githubusercontent.com/u/313125?v=4", + "html_url": "https://github.com/chandlerprall" + }, + "labels": [], + "comments": 2, + "created_at": "2021-08-17T19:15:18Z", + "author_association": "CONTRIBUTOR", + "body": "### Why\r\n\r\nSome things are incredibly hard to write jest tests for, especially focus management or other low-level browser things. `.innerText` vs `.innerContent` is another good example, which we deal with in _inner_text.tsx_ and account for via interesting ways in that component's unit tests.\r\n\r\n### Questions/Explorations\r\n\r\n* [ ] Visual regression testing (do we want this?)\r\n* [ ] Establish/document when to use cypress vs jest\r\n* [ ] Do we want integration testing? (tests against any docs pages, instead of specifically against a component)\r\n* [x] ~Weren't you opening this as a discussion?~ Yes but then I opted for a PR so it includes the diff\r\n\r\n### Cypress links\r\n[Support landing page](https://www.cypress.io/support)\r\n[Overview, guides](https://docs.cypress.io/guides/overview/why-cypress)\r\n[API docs](https://docs.cypress.io/api/table-of-contents)\r\n[FAQ](https://docs.cypress.io/faq/questions/using-cypress-faq)\r\n\r\n### Use, how to run\r\n\r\n#### e2e/integration test\r\n`yarn cypress open` to launch the cypress app and run the focus_trap.js integration test. This needs a dev server running, right now the test points at port `:9999` and the easiest way to make that work is running `yarn start-test-server` before starting cypress\r\n\r\n#### component test\r\n`yarn cypress open-ct` launches a chrome window controlled by cypress, which lists out the discovered tests (only _focus_test.spec.js_ at the moment) and allows executing/interacting from that window.\r\n\r\n### Changes\r\n\r\n* adds cypress & related packages\r\n* includes a sample integration test (_cypress/integration/focus_trap.js_) against the focus trap's docs page\r\n* includes a sample component test (_src/components/focus_trap/focus_trap.spec.js_) which re-implements the [skipped jest](https://github.com/elastic/eui/blob/master/src/components/focus_trap/focus_trap.test.tsx#L112) test\r\n* new _cypress.json_ file added for basic configuration\r\n* _cypress/plugins/index.js_ modified to use our webpack config\r\n* _src/webpack.config.js_ modified to not exclude `externals`, which are only useful for the `dist` bundle/build anyway (a quick stop-gap to get this running)\r\n\r\n### Checklist\r\n\r\n- [ ] Check against **all themes** for compatibility in both light and dark modes\r\n- [ ] Checked in **mobile**\r\n- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**\r\n- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**\r\n- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [ ] Checked for **breaking changes** and labeled appropriately\r\n- [ ] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [ ] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5040", + "title": "[EuiSuperDatePicker] `data-test-subj` doesn't show up as an attribute in rendered DOM", + "user": { + "login": "ashokaditya", + "avatar_url": "https://avatars.githubusercontent.com/u/1849116?v=4", + "html_url": "https://github.com/ashokaditya" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-08-17T15:43:35Z", + "author_association": "MEMBER", + "body": null + }, + { + "html_url": "https://github.com/elastic/eui/issues/5038", + "title": "[Data Grid] Columns list needs to be virtualized / allow for categorization", + "user": { + "login": "snide", + "avatar_url": "https://avatars.githubusercontent.com/u/324519?v=4", + "html_url": "https://github.com/snide" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-08-17T14:57:31Z", + "author_association": "MEMBER", + "body": "The columns list needs to be virtualized and allow for a top level category. Right now the Security product has 100s of fields, and relizes on a weird passdown solution where you select the fields in a model first, then pass them down to the data grid separate in the columns list.\r\n\r\nLikely adding categorization and virtualization to the columns list natively in EUI would negate the need for their extra (confusing) interface\r\n\r\n![image](https://user-images.githubusercontent.com/324519/129749263-5205fd89-413a-434a-af15-19a71a189793.png)\r\n\r\nExample of the separate selector they use to manage the fields.\r\n\r\n![image](https://user-images.githubusercontent.com/324519/129749721-671c4fd7-ce93-4666-8995-5781d9665403.png)\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5037", + "title": "[Data Grid] Pluralization of sort button", + "user": { + "login": "snide", + "avatar_url": "https://avatars.githubusercontent.com/u/324519?v=4", + "html_url": "https://github.com/snide" + }, + "labels": [ + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-17T14:40:09Z", + "author_association": "MEMBER", + "body": "We likely need to pluralize this button.\r\n\r\n![image](https://user-images.githubusercontent.com/324519/129746623-c8421646-c14c-4d8e-be6d-2ded6230a2d0.png)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5034", + "title": "Finish `src` conversion to typescript", + "user": { + "login": "chandlerprall", + "avatar_url": "https://avatars.githubusercontent.com/u/313125?v=4", + "html_url": "https://github.com/chandlerprall" + }, + "labels": [ + { + "id": 735495843, + "node_id": "MDU6TGFiZWw3MzU0OTU4NDM=", + "url": "https://api.github.com/repos/elastic/eui/labels/chore", + "name": "chore", + "color": "d319bd", + "default": false, + "description": null + }, + { + "id": 735509412, + "node_id": "MDU6TGFiZWw3MzU1MDk0MTI=", + "url": "https://api.github.com/repos/elastic/eui/labels/platform", + "name": "platform", + "color": "38f79e", + "default": false, + "description": null + }, + { + "id": 903880265, + "node_id": "MDU6TGFiZWw5MDM4ODAyNjU=", + "url": "https://api.github.com/repos/elastic/eui/labels/typescript", + "name": "typescript", + "color": "41bf07", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-08-16T19:02:46Z", + "author_association": "CONTRIBUTOR", + "body": "This was previously blocked because it ran Kibana's build out of memory. Kibana has since increased its allocated memory and also restructured a lot of the build process, so we should be good to go:\r\n\r\nTask: convert _src/index.js_ to typescript; will need to account for the existing definitions in _src/index.d.ts_ as well.\r\n\r\nTesting:\r\n\r\n* `node ./scripts/compile-eui.js` (which is a part of `yarn build`) will create the build artifacts, including _eui.d.ts_ through [dtsgenerator](https://www.npmjs.com/package/dtsgenerator) + [customizations](https://github.com/elastic/eui/blob/master/scripts/dtsgenerator.js#L95-L99) (the follow-ups mentioned in the comment on line 95 are out of scope for this issue)\r\n* when the above successfully generates the intended `eui.d.ts` file, we'll need to test in Kibana\r\n * steps are documented in https://github.com/elastic/eui/blob/master/wiki/component-development.md#testing-the-component-with-kibana\r\n * after building with `yarn kbn boostrap --no-validate`, test the typescript changes with `node scripts/type_check`" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5031", + "title": "[Backport] 7.15", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [], + "comments": 0, + "created_at": "2021-08-16T14:06:10Z", + "author_association": "CONTRIBUTOR", + "body": "Commits to backport to `eui@37.1.2` and upgrade the Kibana 7.15 branch\r\n\r\n- [ ] #5021 (also requesting backport to 7.14.1)" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5030", + "title": "DataGrid height doesn't update when `rowCount` does", + "user": { + "login": "machadoum", + "avatar_url": "https://avatars.githubusercontent.com/u/1490444?v=4", + "html_url": "https://github.com/machadoum" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 2, + "created_at": "2021-08-16T08:36:26Z", + "author_association": "MEMBER", + "body": "I am having issues with DataGrid and vertical scroll. Ideally, I would like my grid never to scroll vertically. Instead, it should expand to the full height based on its content. And I am not using data grid pagination.\r\n\r\nWhen I change `rowCount` dynamically, the height doesn't get re-calculated.\r\n\r\n![Screenshot 2021-08-13 at 18 14 49](https://user-images.githubusercontent.com/1490444/129533636-df808319-fa8b-427b-b989-0619d0318627.png)\r\n\r\nI was able to isolate the issue on [codesandbox](https://codesandbox.io/s/datagrid-header-b8ejc?file=/index.js:1936-1944)\r\n\r\n\r\nThere is a second bug related to calculated height present in this sandbox that might be related. The computed height is too small when the grid has a horizontal scroll. \r\n![Screenshot 2021-08-16 at 10 28 26](https://user-images.githubusercontent.com/1490444/129534641-6f9e4b5f-c528-4176-95bf-efcf370b6700.png)\r\n\r\n\r\n\r\n " + }, + { + "html_url": "https://github.com/elastic/eui/issues/5026", + "title": "[EuiDataGrid] Need to handle better \"no data\" scenarios", + "user": { + "login": "miukimiu", + "avatar_url": "https://avatars.githubusercontent.com/u/2750668?v=4", + "html_url": "https://github.com/miukimiu" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-13T14:09:24Z", + "author_association": "MEMBER", + "body": "\"Screenshot\r\n\r\nAs we can see from the screenshot (https://codesandbox.io/s/datagrid-header-forked-svk7y?file=/index.js:2560-2571) when no data is available the **EuiDataGrid** only show the header cells, toolbar and pagination.\r\n\r\nThis behavior can look like a bug. Users don't know why is the header cells showing, why is the pagination clickable but they can't see any data.\r\n\r\nSo, we should fix the design to better handle \"no data\" scenarios. \r\n\r\n### Design improvement \r\n\r\n- We should provide a default empty state (just a text?) and probably a way to customize the text. If there's pagination and **no data**, the pagination should get disabled.\r\n- Do we need an `isLoading` state?\r\n\r\n### Bug to fix\r\n\r\nAs we can see from the [CodeSandbox](https://codesandbox.io/s/datagrid-header-forked-svk7y?file=/index.js:2560-2571) example 4, when we pass a custom `className` to **EuiDataGrid** the **Full screen** button gets the class. It shouldn't.\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5025", + "title": "Add ability to append any element on a EuiSideNav", + "user": { + "login": "cauemarcondes", + "avatar_url": "https://avatars.githubusercontent.com/u/55978943?v=4", + "html_url": "https://github.com/cauemarcondes" + }, + "labels": [ + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1399999948, + "node_id": "MDU6TGFiZWwxMzk5OTk5OTQ4", + "url": "https://api.github.com/repos/elastic/eui/labels/prop%20request", + "name": "prop request", + "color": "3d4d9e", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-12T20:16:07Z", + "author_association": "NONE", + "body": "On APM we needed to add a new badge beside the label on the observability nav. More details here: https://github.com/elastic/kibana/issues/107718\r\n\r\n\"Screen\r\n\r\nCurrently, there's no way to automatically add such a badge on `EuiSideNav`. I would like to have a new property called `append` where it would be rendered beside the label, and it should also automatically truncate the label if it is bigger than the container.\r\n\r\nI did a workaround to have it for `7.15` here https://github.com/elastic/kibana/pull/108397/files#diff-4d1ad7a610ef7e1d1282f54948f8331f0fe9effeedd43ce5ce70370501e87549R52" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5024", + "title": "Remove EuiComboBox down arrow button from tab order", + "user": { + "login": "cjcenizal", + "avatar_url": "https://avatars.githubusercontent.com/u/1238659?v=4", + "html_url": "https://github.com/cjcenizal" + }, + "labels": [ + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 1, + "created_at": "2021-08-12T19:39:22Z", + "author_association": "CONTRIBUTOR", + "body": "I don't think the accessibility of this component is improved by making this arrow button focusable, since you can tab into the component and use the down arrow and Esc to open and close the suggestions list, respectively. Keeping it in the tab order means that users need to hit Tab an extra time to exit the component. I'd consider it an accessibility improvement if we remove it from tab order.\r\n\r\n![image](https://user-images.githubusercontent.com/1238659/129258194-773a6780-2933-4154-a0dd-8cbea5a915dd.png)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5019", + "title": "[Docs] Anchor link affordance for page sections.", + "user": { + "login": "dborodyansky", + "avatar_url": "https://avatars.githubusercontent.com/u/3674406?v=4", + "html_url": "https://github.com/dborodyansky" + }, + "labels": [], + "comments": 0, + "created_at": "2021-08-12T01:11:48Z", + "author_association": "NONE", + "body": "It is common to reference sections of EUI docs pages in communication. Section anchor URLs are accessible via side-nav sub-menus, although not immediately discoverable and not comprehensive to include Guidelines sections. On-hover affordance for anchor URLs as seen in elasic.co or docs.elastic may be worth consideration.\r\n\r\nThanks for all that you do!\r\n\r\n![image](https://user-images.githubusercontent.com/3674406/129122820-cc4e8efc-8094-4de6-9966-444d58bc0f6b.png)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5016", + "title": "Add `kbd` styling and/or component", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 1, + "created_at": "2021-08-11T11:38:18Z", + "author_association": "CONTRIBUTOR", + "body": "I would like there to be styling for the `kbd` tag so I can indicate shortcuts like: \r\nAlt + A\r\n\r\nLooking at the Figma (`code` page) there is also a note that says this needs to be done \r\n![image](https://user-images.githubusercontent.com/15386491/129019896-711cc78d-b599-495c-9b6c-88abd7c0ff15.png)\r\n(also kinda briefly mentioned in #1573)\r\n\r\nCurrently the only styling is \r\n```css\r\ncode, pre, kbd, samp {\r\n font-family: \"Roboto Mono\", Consolas, Menlo, Courier, monospace;\r\n}\r\n```\r\n\r\nThe linked code \r\n```css\r\n kbd {\r\n padding: 0.2em;\r\n border: $euiBorderThin;\r\n border-bottom-color: shadeOrTint($euiColorLightShade, 10%, 10%);\r\n border-radius: $euiBorderRadius;\r\n box-shadow: inset 0 -1px 0 $euiColorLightShade;\r\n }\r\n```\r\nis not in EUI (or at least in the non-Amsterdam theme)\r\n\r\nI thought I'd raise an issue as I couldn't find one.\r\n\r\nIt might be good if we could create a new component to limit what combinations we can use - I doubt it's good for people to use `` for non-shortcuts e.g.\r\n```jsx\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5015", + "title": "EuiWrappingPopover does not return focus to anchor", + "user": { + "login": "rshen91", + "avatar_url": "https://avatars.githubusercontent.com/u/20343860?v=4", + "html_url": "https://github.com/rshen91" + }, + "labels": [ + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 1, + "created_at": "2021-08-10T21:40:52Z", + "author_association": "CONTRIBUTOR", + "body": "Please refer to the code sandbox example [here ](https://codesandbox.io/s/strange-black-kq8qx?file=/src/App.tsx) \r\n\r\nIn https://github.com/elastic/elastic-charts/pull/1272, I'm trying to restore focus back to the legend icon after closing the color picker with the keyboard exclusively. So hitting enter on the legend dot icon opens the color picker, and then I can tab through the various parts of the color picker and interact with it using keys. If I hit the escape key, the color picker closes, and focus is correctly returned to the legend icon. \r\nHowever, when I hit enter on the Done button in the example code below, focus does not return to the legend icon. This does work as expected when using EuiPopover instead of EuiWrappingPopover.\r\n\r\n``` js\r\nconst CustomColorPicker: LegendColorPicker = useMemo(\r\n () => ({ anchor, color, onClose, seriesIdentifiers, onChange }) => {\r\n const handleClose = () => {\r\n onClose();\r\n anchor.focus();\r\n setColors((prevColors) => ({\r\n ...prevColors,\r\n ...toEntries(seriesIdentifiers, 'key', color),\r\n }));\r\n };\r\n const handleChange = (c: Color | null) => {\r\n setColors((prevColors) => ({\r\n ...prevColors,\r\n ...toEntries(seriesIdentifiers, 'key', c),\r\n }));\r\n onChange(c);\r\n onChangeAction(c);\r\n };\r\n\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n handleChange(null)}>\r\n Clear color\r\n \r\n \r\n \r\n Done\r\n \r\n \r\n \r\n );\r\n },\r\n [setColors],\r\n );\r\n```\r\n\r\nThe above example color picker does not properly return focus after hitting enter on the done button. However, if we switch the component `EuiWrappingPopover` to `EuiPopover`, the focus is returned. " + }, + { + "html_url": "https://github.com/elastic/eui/issues/5014", + "title": "EuiBasicTable blocks any action while isLoading is true", + "user": { + "login": "cauemarcondes", + "avatar_url": "https://avatars.githubusercontent.com/u/55978943?v=4", + "html_url": "https://github.com/cauemarcondes" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-08-10T17:50:48Z", + "author_association": "NONE", + "body": "on APM we’re lazy loading part of the data that we show on a EuiBasicTable . The problem is that I cannot click on anything while `isLoading = true.`\r\n\r\nhttps://user-images.githubusercontent.com/55978943/128909658-b9ac5f6d-a1d6-452f-b820-85dc6d44b1af.mov\r\n\r\nExpected behavior:\r\nThe table would allow the user to click on any link in the table even when the loading spinner is running.\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5013", + "title": "[EuiTooltip] Add an \"alwaysVisible\" prop", + "user": { + "login": "sebelga", + "avatar_url": "https://avatars.githubusercontent.com/u/2854616?v=4", + "html_url": "https://github.com/sebelga" + }, + "labels": [ + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + }, + { + "id": 1399999948, + "node_id": "MDU6TGFiZWwxMzk5OTk5OTQ4", + "url": "https://api.github.com/repos/elastic/eui/labels/prop%20request", + "name": "prop request", + "color": "3d4d9e", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-08-10T07:34:24Z", + "author_association": "CONTRIBUTOR", + "body": "In https://github.com/elastic/kibana/pull/107292 @cchaos suggested to use a tooltip to give instruction on how to interact with the keyboard on a component. This works well except that, when the tooltip is shown if we mouse out it disappears.\r\n\r\nI suggest that we add a new `alwaysVisible` optional prop to the `` component which will always display the tooltip and not react to mouse events. The consumer would then be responsible to hide it if needed." + }, + { + "html_url": "https://github.com/elastic/eui/pull/5011", + "title": "[EuiFlyout] Fix prop table; refactor", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [ + { + "id": 2767044132, + "node_id": "MDU6TGFiZWwyNzY3MDQ0MTMy", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-changelog", + "name": "skip-changelog", + "color": "FC0E3C", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-09T22:08:00Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nFixes #4980. Changes include exporting `EuiFlyout` from the definition location, and some clean up work to standardize React type imports.\r\n\r\n~### Checklist~\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/pull/5007", + "title": "[EuiResizableContainer] EuiResizableButton fix z-index", + "user": { + "login": "Patil2099", + "avatar_url": "https://avatars.githubusercontent.com/u/35653876?v=4", + "html_url": "https://github.com/Patil2099" + }, + "labels": [], + "comments": 2, + "created_at": "2021-08-05T16:36:31Z", + "author_association": "NONE", + "body": "Fixes #5003" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5003", + "title": "[EuiResizableContainer] EuiResizableButton high z-index", + "user": { + "login": "0x557269656C", + "avatar_url": "https://avatars.githubusercontent.com/u/42144091?v=4", + "html_url": "https://github.com/0x557269656C" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-08-03T19:25:21Z", + "author_association": "NONE", + "body": "When selected the `.euiResizableButton ` draggable element has a default `z-index` that is higher or equal to `EuiHeader` leading to this element being superimposed on top of any `EuiHeader` element. \r\n\r\nSee the following screenshot from the docs:\r\n\r\n\"Screenshot\r\n\r\nIs this the expected behaviour? \r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/5002", + "title": "EuiCodeBlocks - new wrapper component for tabbed code blocks", + "user": { + "login": "snide", + "avatar_url": "https://avatars.githubusercontent.com/u/324519?v=4", + "html_url": "https://github.com/snide" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-08-03T13:10:15Z", + "author_association": "MEMBER", + "body": "We have several needs across our products to display a tabbed code block list. An easy example is in the EUI docs itself:\r\n\r\n![image](https://user-images.githubusercontent.com/324519/128019722-f4bd8b0a-fa9e-4755-8ddb-310fe363f767.png)\r\n\r\nIn the elastic.co docs we have times where we need to display the same type of code, but show different snippets based upon the OS the user is using. The typical example is showing Linux, OSX and Windows examples for any block.\r\n\r\nIt'd be nice to have a wrapper component to handle this easily without having to setup separate tabs and separate code blocks." + }, + { + "html_url": "https://github.com/elastic/eui/pull/5000", + "title": "[EuiDatePicker] Update styles for Amsterdam", + "user": { + "login": "cchaos", + "avatar_url": "https://avatars.githubusercontent.com/u/549577?v=4", + "html_url": "https://github.com/cchaos" + }, + "labels": [ + { + "id": 735487266, + "node_id": "MDU6TGFiZWw3MzU0ODcyNjY=", + "url": "https://api.github.com/repos/elastic/eui/labels/style%20only", + "name": "style only", + "color": "9fdb67", + "default": false, + "description": null + }, + { + "id": 1858600108, + "node_id": "MDU6TGFiZWwxODU4NjAwMTA4", + "url": "https://api.github.com/repos/elastic/eui/labels/Amsterdam", + "name": "Amsterdam", + "color": "006DE4", + "default": false, + "description": "" + } + ], + "comments": 8, + "created_at": "2021-07-30T19:49:01Z", + "author_association": "CONTRIBUTOR", + "body": "This PR only affects the Amsterdam theme by separating out the date-picker imports completely and kinda hacky. But I wanted to start clean and not try to \"override\" the default theme because it's soo many selectors.\r\n\r\nThe updated version:\r\n\"Screen\r\n\r\n\r\n### The main differences are:\r\n\r\n- Month/Year selectors act like dropdowns instead of the grid selector\r\n- The Month/Year header expands the whole width, even over the time selection\r\n- Using sort arrows for cycling through months\r\n- Updates to the styling of the selected days including hover/focus states and especially when in a range\r\n\r\n\"Screen\r\n\r\n- Stacks time below calendar on mobile (I know it's awkward, but its the best I could do for now).\r\n\r\n\"Screen\r\n\r\n\r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n- [x] Checked in **mobile**\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- ~[ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n- ~[ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n- ~[ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples~\r\n- [x] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- ~[ ] Checked for **breaking changes** and labeled appropriately~\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4997", + "title": "[EuiDataGrid] Selection columns are not aligned", + "user": { + "login": "cchaos", + "avatar_url": "https://avatars.githubusercontent.com/u/549577?v=4", + "html_url": "https://github.com/cchaos" + }, + "labels": [], + "comments": 3, + "created_at": "2021-07-30T15:02:04Z", + "author_association": "CONTRIBUTOR", + "body": "I have tested the feature locally, Everything works as expected 👍 \r\nThe only thing is that I found a misalignment between the header and the row checkboxes:\r\n\r\n![misalignment](https://user-images.githubusercontent.com/17747913/127658990-18fbb0dd-acd0-441e-9e58-561e388a8e37.png)\r\n\r\n@elastic/eui-design This is caused by the EuiDataGrid using `gridStyle={{border: 'none'}}`. \r\nThe `border: none;` rule is applied to the header:\r\n![header](https://user-images.githubusercontent.com/17747913/127659796-0d9198e9-0b51-4c29-bb69-0064cb63504b.png)\r\n\r\nbut the row divs only have `border-color: transparent !important;`:\r\n![cell](https://user-images.githubusercontent.com/17747913/127660334-9dcbe4c1-0953-4509-8a61-caddc54baf70.png)\r\n\r\n_Originally posted by @semd in https://github.com/elastic/kibana/issues/107144#issuecomment-889896823_" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4994", + "title": "Add automated a1yy tests that interact with components", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-07-29T21:32:14Z", + "author_association": "CONTRIBUTOR", + "body": "The current axe setup automatically tests every page but doesn't interact with any component. This isn't a big deal for simple components like individual buttons but for components that meaningfully change the DOM when they're interacted with, this is a huge gap." + }, + { + "html_url": "https://github.com/elastic/eui/pull/4993", + "title": "[EuiCodeBlock] Add line numbers", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [], + "comments": 9, + "created_at": "2021-07-29T17:09:52Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nCloses #3140 by adding an option to render line numbers in EuiCodeBlock. Works with virtualization and fullscreen, and does not impact copy functionality.\r\n\r\n\"image\"\r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n- [x] Checked in **mobile**\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- [x] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**\r\n- [x] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**\r\n- [x] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [x] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [x] Checked for **breaking changes** and labeled appropriately\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4992", + "title": "[EuiNotificationBadge] The number inside badge looks not centred, corner radius value is different than in the design component", + "user": { + "login": "yiyangliu9286", + "avatar_url": "https://avatars.githubusercontent.com/u/81987435?v=4", + "html_url": "https://github.com/yiyangliu9286" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + } + ], + "comments": 3, + "created_at": "2021-07-29T14:43:23Z", + "author_association": "NONE", + "body": "For `EuiNotificationBadge`, we have noticed that there are slightly differences between the component in the design system in [Figma](https://www.figma.com/file/RzfYLj2xmH9K7gQtbSKygn/Elastic-UI?node-id=12804%3A44450) vs. how it looks after implementing it. See screenshots below:\r\n\r\n- In the design system, the radius value is 3. And number looks centred.\r\n\r\n\"Screen\r\n\r\n- In what has been implemented, the radius value looks bigger. The number looks slightly not centred.\r\n\r\n\"Screen\r\n\r\nJust wondering if the team could take a look at it when there's a chance? Thanks.\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4980", + "title": "[EuiFlyout] Documentation broken for EuiFlyout \"props\" tab", + "user": { + "login": "muhammadtalhas", + "avatar_url": "https://avatars.githubusercontent.com/u/13083448?v=4", + "html_url": "https://github.com/muhammadtalhas" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + } + ], + "comments": 6, + "created_at": "2021-07-26T23:32:57Z", + "author_association": "NONE", + "body": "Seeing an error boundary instead.\r\n\r\n![image](https://user-images.githubusercontent.com/13083448/127072204-26c596a0-1c62-461b-94f2-5dc94b47af87.png)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4978", + "title": "[EUISearchBar] toESQuery does not allow AND operation ", + "user": { + "login": "PhaedrusTheGreek", + "avatar_url": "https://avatars.githubusercontent.com/u/4387023?v=4", + "html_url": "https://github.com/PhaedrusTheGreek" + }, + "labels": [], + "comments": 2, + "created_at": "2021-07-26T21:12:23Z", + "author_association": "NONE", + "body": "By default in ES, simple query string query will run in `OR` mode by default, but we should be able to change that with the `+` [syntax](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-simple-query-string-query.html#simple-query-string-syntax).\r\n\r\nWhen I enter a query like this and run it through the `Query.toESQuery`, I get the following error:\r\n\r\n```\r\nExpected \"(\", \"-\", \"is:\", end of input, field, term, or whitespace but \"+\" found.\r\n```\r\n\r\nAlso I noticed the [default operator parameter](https://www.elastic.co/guide/en/elasticsearch/reference/current/query-dsl-simple-query-string-query.html#simple-query-string-top-level-params) is not set in the query output." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4974", + "title": "[ColorPalettes] Monochromatic palettes that start from \"no color\"", + "user": { + "login": "ghudgins", + "avatar_url": "https://avatars.githubusercontent.com/u/5465514?v=4", + "html_url": "https://github.com/ghudgins" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-07-21T14:07:48Z", + "author_association": "NONE", + "body": "**Description**\r\nMonochromatic color palettes could start from a color stop that has \"no color\" to better emphasize values. This could be in the form of new color stops \r\n\r\n**Use case**\r\n**When** I am using a monochromatic color palette to emphasize data values\r\n**I need** palette options that start from no color and gradually work the way to the darkest single color\r\n**So I can** highlight larger / smaller values with color while leaving the lowest 10% (or values of 0) without color\r\n\r\n**Today's palette colors the 0 values**\r\n![image](https://user-images.githubusercontent.com/5465514/126501990-d04bbbfb-ca4e-4f0e-a340-020a33f81bb9.png)\r\n\r\n**Proposed palettes could start with a fully transparent stop for \"no color\"**\r\n![image](https://user-images.githubusercontent.com/5465514/126502031-7a21aa7d-0aeb-43fa-97f9-d62305bc4502.png)\r\n\r\nCC @dej611 & @MichaelMarcialis " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4973", + "title": "[EuiContextMenu] Hover/active state shenanigans within EuiContextMenu items", + "user": { + "login": "afgomez", + "avatar_url": "https://avatars.githubusercontent.com/u/57448?v=4", + "html_url": "https://github.com/afgomez" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + } + ], + "comments": 3, + "created_at": "2021-07-21T12:59:34Z", + "author_association": "MEMBER", + "body": "When opening a `EuiContextMenu`, there are some inconsistencies regarding the hover/active state.\r\n\r\nTested on macOS Big Sur, Firefox 91.\r\n\r\n### When hovering over the menu elements\r\n\r\n- The first element keeps the blue background, no matter where the user hovers.\r\n- In some cases the hovered element doesn't get an underline (see \"Go to a link\" in the attached video.)\r\n- When going to a nested panel, the default active element (the one with the blue background) is the second, no the first.\r\n- When going back, no element is marked as active element\r\n\r\n\r\n### When navigating menu elements with the arrow keys.\r\n\r\n- When the menu first opens, it takes two presses of the `down` arrow key to move down.\r\n- When the first menu element is selected, it takes two presses of the `up` arrow key to cycle to the last menu element.\r\n- When the last menu element is selected, it takes two presses of the `down` arrow key to cycle to the first menu element.\r\n\r\n\r\nhttps://user-images.githubusercontent.com/57448/126492255-017aa468-47cf-4c7d-9dfc-cf45af080d79.mov\r\n\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4972", + "title": "[EuiFormControlLayout] Support for more layouts", + "user": { + "login": "andreadelrio", + "avatar_url": "https://avatars.githubusercontent.com/u/4016496?v=4", + "html_url": "https://github.com/andreadelrio" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-07-20T16:50:08Z", + "author_association": "CONTRIBUTOR", + "body": "The Dashboard team is currently working on allowing users to add input controls to dashboards. They've built their first version [here](https://ci-artifacts.kibana.dev/storybooks/pr-103512/dc18fee1c9059c5147215f55f431869aec3830eb/presentation/index.html?path=/story/input-controls--options-list-story) (you can go to the `Controls` tab to see the props). Screen captures here:\r\n\r\n![gif1_600](https://user-images.githubusercontent.com/4016496/126363317-1d12020a-ed89-4366-8622-11c37d3b3546.gif)\r\n![gif2_600](https://user-images.githubusercontent.com/4016496/126363424-c11a2f48-e35e-49d7-8312-7053a49e866b.gif)\r\n\r\n### More layouts\r\n\r\nOne of the layouts they are considering can be handled well by **EuiFormControlLayout** (the single line one). However, they're exploring a `twoLine` display which wouldn't be supported by **EuiFormControlLayout**. My question is, is this something **EuiFormControlLayout** could support in the future? \r\n\r\ncc @ThomThomson " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4960", + "title": "[EuiDataGrid] Hovering over a highlightet cell starts button animation again", + "user": { + "login": "timroes", + "avatar_url": "https://avatars.githubusercontent.com/u/877229?v=4", + "html_url": "https://github.com/timroes" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-07-16T15:55:41Z", + "author_association": "CONTRIBUTOR", + "body": "When you focus a cell the buttons inside it are all visible, when you now hover over that cell again it starts the animation again for those buttons looking very jumpy and buggy:\r\n\r\n![Peek 2021-07-16 17-51](https://user-images.githubusercontent.com/877229/125975387-c5212109-c28f-4bf9-9c11-719fd38485d8.gif)\r\n\r\nYou can reproduce the same in the first example in the [data grid doc](https://elastic.github.io/eui/#/tabular-content/data-grid)" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4959", + "title": "[EuiDataGrid] Overflow hidden on cells", + "user": { + "login": "timroes", + "avatar_url": "https://avatars.githubusercontent.com/u/877229?v=4", + "html_url": "https://github.com/timroes" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-07-16T15:18:49Z", + "author_association": "CONTRIBUTOR", + "body": "Currently the data grid cells don't have an `overflow: hidden` on it, causing the data grid to potentially look a bit weird if there's e.g. images in the cells:\r\n\r\n![screenshot-20210716-171538](https://user-images.githubusercontent.com/877229/125970409-e49cb737-770a-4940-94cf-ec048416f8c2.png)\r\n\r\nI wonder if we should by default set `overflow: hidden` on cells to make it look (imho) better:\r\n\r\n![screenshot-20210716-171745](https://user-images.githubusercontent.com/877229/125970574-0bd3b282-06ff-49af-9f6a-fcf420054431.png)\r\n\r\nBut I am not sure if there might be other side-effects why we're considering having overflow visible." + }, + { + "html_url": "https://github.com/elastic/eui/pull/4958", + "title": "[EuiDataGrid] Auto-fit rows to content", + "user": { + "login": "VladLasitsa", + "avatar_url": "https://avatars.githubusercontent.com/u/16915480?v=4", + "html_url": "https://github.com/VladLasitsa" + }, + "labels": [], + "comments": 31, + "created_at": "2021-07-16T13:16:34Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nAdds 'auto' as value for `defaultHeight` from `rowHeightsOptions` which allow to rows auto fit to content.\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4957", + "title": "[EuiDataGrid] regression in displaying Arrays and Objects in expand behavior", + "user": { + "login": "mouradmourafiq", + "avatar_url": "https://avatars.githubusercontent.com/u/1261626?v=4", + "html_url": "https://github.com/mouradmourafiq" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-07-16T08:07:50Z", + "author_association": "CONTRIBUTOR", + "body": "It seems like a regression was introduced to the datagrid expand behavior, it adds `Row: 3, Column: 6:` which was not the case before.\r\n\r\n * Json objects can be tested on this [docs page](https://elastic.github.io/eui/#/tabular-content/data-grid-schemas-and-popovers):\r\n\r\n![Screenshot 2021-07-16 at 10 01 23](https://user-images.githubusercontent.com/1261626/125914115-90eaf152-dd8d-4ef7-92a5-3a17adb1858d.png)\r\n\r\n * Arrays before regression:\r\n\r\n![Screenshot 2021-07-16 at 10 04 38](https://user-images.githubusercontent.com/1261626/125914478-325155f5-e80d-467d-8d8e-c7e9626eded2.png)\r\n\r\n\r\n * Arrays after regression:\r\n\r\n\"Screenshot\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4956", + "title": "[EuiMarkdownEditor] Support for a uiPlugin to have a custom click handler", + "user": { + "login": "seeruk", + "avatar_url": "https://avatars.githubusercontent.com/u/2083033?v=4", + "html_url": "https://github.com/seeruk" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-07-15T21:09:16Z", + "author_association": "CONTRIBUTOR", + "body": "Right now a uiPlugin is limited to either instantly place content into the editor, or show a modal to configure some text that goes into the editor. It'd be great if this functionality could be expanded upon so that completely custom click handlers could be added.\r\n\r\nOne use-case I have in mind for this is something like a full-screen button. This doesn't affect the editor content itself, just how the editor is presented, and it probably makes more sense for the parent component to handle how the editor itself is rendered." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4951", + "title": "[EuiComboBox] Regression in singleSelection scrolling behavior", + "user": { + "login": "wenchonglee", + "avatar_url": "https://avatars.githubusercontent.com/u/18256786?v=4", + "html_url": "https://github.com/wenchonglee" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + } + ], + "comments": 0, + "created_at": "2021-07-14T03:45:07Z", + "author_association": "CONTRIBUTOR", + "body": "Hey,\r\n\r\nI noticed that after #4879, an `EuiComboBox` with `singleSelection` will no longer scroll to the selected option on open.\r\nYou can verify this behavior by going to the [sandbox](https://codesandbox.io/s/eui-issue-ulk5f?file=/index.js) found in #4072, and alternating between versions 34.4.0 and 34.5.0. (open the first combobox in the sandbox)\r\n\r\nI think this is because of line 158 added in `componentDidUpdate`, as this condition will never be true on mount.\r\n\r\nhttps://github.com/elastic/eui/blob/efad82b13106474c83f19eeb535e037b5af13e44/src/components/combo_box/combo_box_options_list/combo_box_options_list.tsx#L155-L161\r\n\r\nI haven't sat down to think of a solution yet, maybe we could add a similar `scrollToItem` call in `componentDidMount`? (without this condition)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4949", + "title": "[EuiSearchBar] Document defaultFields option on toESQuery", + "user": { + "login": "PhaedrusTheGreek", + "avatar_url": "https://avatars.githubusercontent.com/u/4387023?v=4", + "html_url": "https://github.com/PhaedrusTheGreek" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + } + ], + "comments": 0, + "created_at": "2021-07-13T17:35:17Z", + "author_association": "NONE", + "body": "It seems that toESQuery options accepts a `defaultFields` array, but the docs to not indicate that, as well as a few other options available." + }, + { + "html_url": "https://github.com/elastic/eui/pull/4942", + "title": "[EuiSuperDatePicker] Now Supports onFocus", + "user": { + "login": "ConaGo", + "avatar_url": "https://avatars.githubusercontent.com/u/18573703?v=4", + "html_url": "https://github.com/ConaGo" + }, + "labels": [], + "comments": 8, + "created_at": "2021-07-08T15:56:24Z", + "author_association": "NONE", + "body": "Added onFocus-prop to superdatepicker and added a test\r\n~The test will make an unrelated test fail though so this is just a draft~\r\n\r\nCloses #4924\r\n\r\n### Checklist\r\n\r\n- [ ] Check against **all themes** for compatibility in both light and dark modes\r\n- [ ] Checked in **mobile**\r\n- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**\r\n- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**\r\n- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [ ] Checked for **breaking changes** and labeled appropriately\r\n- [ ] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [ ] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4938", + "title": "[Feature Request][EuiRange] - Range should be able to be positioned vertically", + "user": { + "login": "michaelolo24", + "avatar_url": "https://avatars.githubusercontent.com/u/17211684?v=4", + "html_url": "https://github.com/michaelolo24" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + } + ], + "comments": 1, + "created_at": "2021-07-06T14:05:12Z", + "author_association": "NONE", + "body": "The EuiRange should support a vertical orientation in addition to the current horizontal orientation. Ideally, this would be just a toggle-able prop. It may be more convenient to have an `angle` prop that takes some x degree and orients the range that way. \r\n\r\nUse case: The range is currently being styled to be vertical in the security solution application within kibana\r\n\r\n https://github.com/elastic/kibana/blob/57fdadbbec2cdd4681d1210a788405ac2a947a21/x-pack/plugins/security_solution/public/resolver/view/graph_controls.tsx#L278" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4931", + "title": "[EuiResizableContainer] Resizing mouse loses dragging if move out of panels", + "user": { + "login": "shahzad31", + "avatar_url": "https://avatars.githubusercontent.com/u/3505601?v=4", + "html_url": "https://github.com/shahzad31" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + } + ], + "comments": 1, + "created_at": "2021-06-30T09:12:51Z", + "author_association": "CONTRIBUTOR", + "body": "EuiResizableContainer when dragging, if mouse leaves the main container event handler is unattched. User have to click again on resizeable button to resize. \r\n\r\nI think event handler attachment should be adjusted to make sure even if it leaves container , event handler remains attched.\r\n\r\nWe can also allow user passing the container element to which we want to attach the mouse event." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4926", + "title": "[EuiMarkdownEditor] Support for a customizable editing experience", + "user": { + "login": "legrego", + "avatar_url": "https://avatars.githubusercontent.com/u/3493255?v=4", + "html_url": "https://github.com/legrego" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 2061370008, + "node_id": "MDU6TGFiZWwyMDYxMzcwMDA4", + "url": "https://api.github.com/repos/elastic/eui/labels/markdown%20editor", + "name": "markdown editor", + "color": "f2dc93", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-06-29T13:01:37Z", + "author_association": "MEMBER", + "body": "Currently, the `EuiMarkdownEditor` renders the \"edit\" mode using a plain `textarea`. This works well for simple Markdown, but it's possible that plugins will want to customize the editing experience by changing the display of the raw Markdown.\r\n\r\nFor a concrete example, we are looking to support user mentions. The raw markdown might look something like this:\r\n\r\n```\r\nHey !{user{\"id\": \"abc123dfera\"}}, can you check this out?\r\n```\r\n\r\nThis is not very friendly to look at, so we would prefer to have the editor show something similar to the following:\r\n\r\n```\r\nHey larry.gregory, can you check this out?\r\n```\r\n\r\nThe replacement text would be treated as a single element, where we could backspace into it to delete the entire reference.\r\n\r\nNeeded for: elastic/kibana#80334 (8.x timeframe)\r\n(we can make an alternative UX without support for this in EUI, but it will be ugly)" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4925", + "title": "Collapsable nav should not allow keyboard support for items when collapsed", + "user": { + "login": "snide", + "avatar_url": "https://avatars.githubusercontent.com/u/324519?v=4", + "html_url": "https://github.com/snide" + }, + "labels": [ + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-06-28T20:49:50Z", + "author_association": "MEMBER", + "body": "In instances where the nav is collapsed we don't want the items in the nav to be tabblable. This is currently shimmed at the kibana level, but should be native in the EUI component." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4924", + "title": "[EuiSuperDatePicker] Support `onFocus`", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [ + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-06-28T14:18:08Z", + "author_association": "CONTRIBUTOR", + "body": "EuiSuperDatePicker should support `onFocus`. Given that there are multiple focusbale elements, the provided callback should likely only be called once on the initial element focus and not for each subcomponent focus event." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4923", + "title": "[EuiDataGrid] Keep focus on grid if column gets removed", + "user": { + "login": "flash1293", + "avatar_url": "https://avatars.githubusercontent.com/u/1508364?v=4", + "html_url": "https://github.com/flash1293" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-06-28T08:33:36Z", + "author_association": "CONTRIBUTOR", + "body": "If a currently focused column gets removed from data grid, the focus isn't captured anymore and returns to the document body.\r\n\r\nData grid should recognize and handle this case by moving the focus to the grid root element." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4922", + "title": "[EuiText] does not support raw html, only JSX", + "user": { + "login": "hidesminimally", + "avatar_url": "https://avatars.githubusercontent.com/u/5432430?v=4", + "html_url": "https://github.com/hidesminimally" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + } + ], + "comments": 1, + "created_at": "2021-06-25T22:55:08Z", + "author_association": "NONE", + "body": "Expected: \r\n- Given the documentation (see screenshot) I expected to be able to use raw HTML in the EuiText component.\r\n\r\n![image](https://user-images.githubusercontent.com/5432430/123492138-82899a00-d5cd-11eb-96ef-c43aa58c4e23.png)\r\n\r\nActual:\r\nUpon testing it with a
tag (note that it is left open) in a jsfiddle, it breaks: https://codesandbox.io/s/muddy-meadow-k876x?file=/index.js:647-658 \r\n\r\n![image](https://user-images.githubusercontent.com/5432430/123492179-a816a380-d5cd-11eb-89cc-8b0d7d80ece0.png)\r\n\r\n\r\nIs this a known issue? I expected the raw HTML to be supported, not requiring JSX as the documentation specified. " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4918", + "title": "[EUI][Maps] Change the behavior of clicking on a tick mark on the range slider", + "user": { + "login": "kmartastic", + "avatar_url": "https://avatars.githubusercontent.com/u/65553677?v=4", + "html_url": "https://github.com/kmartastic" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 2, + "created_at": "2021-06-23T23:02:40Z", + "author_association": "NONE", + "body": "This request is based on Usability testing feedback for the Timeslider (only available in Maps at the moment). I'm not sure if this is desirable in all uses of the EUIDualRange component. Timeslider will be released in 7.14.\r\n\r\nActual: Clicking on the axis tick labels will move one of the start/end points of the time slice (selected range) to the clicked value.\r\n\r\nExpected: Clicking on the axis tick labels will move the existing time slice (selected range) to start at the clicked value. So the same range is moved; it is not extended or contracted.\r\n\r\nPer issue: https://github.com/elastic/kibana/issues/103143\r\n\r\ncc: @miukimiu \r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4915", + "title": "Changing default values should bump major", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [], + "comments": 3, + "created_at": "2021-06-23T20:43:00Z", + "author_association": "CONTRIBUTOR", + "body": "Given #4882 was included in a minor release, I'd like to point out that changing default/implicit behaviour is a breaking change. \r\n\r\nThe `color` prop for Badge, Expression, and Progress all previously defaulted to \"secondary\" and now default to \"success\". AFAIK, \"secondary\" and \"success\" are the same, so there should be no problems this time, but changing other default values will likely cause problems for consumers. \r\nThe PR should have kept the defaults the same so that consumers can see the deprecation (otherwise a consumer may unknowingly adopt the changes) and only change the defaults when `secondary` is actually removed." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4913", + "title": "[EuiDatePicker] opening via customInput has blue highlighted dates on first open, not on second open", + "user": { + "login": "jeroenbrouwer", + "avatar_url": "https://avatars.githubusercontent.com/u/13677331?v=4", + "html_url": "https://github.com/jeroenbrouwer" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + } + ], + "comments": 4, + "created_at": "2021-06-23T14:48:40Z", + "author_association": "NONE", + "body": "Reproducible via the docs at https://elastic.github.io/eui/#/forms/date-picker\r\n\r\nClicking the button the first time:\r\n![image](https://user-images.githubusercontent.com/13677331/123118051-9785f200-d442-11eb-99b8-1fc20735fa00.png)\r\n\r\nClicking the button the second time:\r\n![image](https://user-images.githubusercontent.com/13677331/123118210-b71d1a80-d442-11eb-82ad-f6d0644ef7dc.png)\r\n\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4912", + "title": "Remove deprecated `/` sass syntax", + "user": { + "login": "nickofthyme", + "avatar_url": "https://avatars.githubusercontent.com/u/19007109?v=4", + "html_url": "https://github.com/nickofthyme" + }, + "labels": [], + "comments": 0, + "created_at": "2021-06-23T13:49:21Z", + "author_association": "CONTRIBUTOR", + "body": "Remove deprecated division syntax (i.e. `/`) with the new syntax of `math.div`.\r\n\r\nSee https://sass-lang.com/documentation/breaking-changes/slash-div\r\n\r\nLooks like there is an easy migration...\r\n\r\n```bash\r\n$ npm install -g sass-migrator\r\n$ sass-migrator division **/*.scss\r\n```" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4910", + "title": "[EuiIcon] Early setState yields a console error", + "user": { + "login": "Phizzard", + "avatar_url": "https://avatars.githubusercontent.com/u/14220463?v=4", + "html_url": "https://github.com/Phizzard" + }, + "labels": [], + "comments": 5, + "created_at": "2021-06-23T01:35:32Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nFixes #4783 \r\n\r\nUsing `````` with React.StrictMode would yield the following react warning ```Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to 'this.state' directly or define a 'state = {};' class property with the desired state in the EuiIcon component.```\r\n\r\nThis would happen because the ```loadIconComponent()``` function calls ```this.setState()``` and is used in the constructor.\r\n\r\nMoving the the ```loadIconComponent()``` and logic around it in the constructor to ```componentDidMount()``` resolves this warning.\r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n- [x] Checked in **mobile**\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n~~- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~~\r\n~~- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~~\r\n- [x] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n~~- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**~~\r\n- [x] Checked for **breaking changes** and labeled appropriately\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4897", + "title": "Add ability to provide custom types for props", + "user": { + "login": "chandlerprall", + "avatar_url": "https://avatars.githubusercontent.com/u/313125?v=4", + "html_url": "https://github.com/chandlerprall" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + }, + { + "id": 735509412, + "node_id": "MDU6TGFiZWw3MzU1MDk0MTI=", + "url": "https://api.github.com/repos/elastic/eui/labels/platform", + "name": "platform", + "color": "38f79e", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-06-17T19:25:02Z", + "author_association": "CONTRIBUTOR", + "body": "Seems like we could use some pattern for providing a custom entry for a given prop's `type` field in the documentation.\r\n\r\n_Originally posted by @cchaos in https://github.com/elastic/eui/pull/4895#discussion_r653785959 :_\r\n\r\nSuper nit here, but because `EuiSuperUpdateButtonProps` is not documented anywhere as a props table or anything and isn't obvious that it is just an EuiButton, I wonder if we just want to extend EuiButtonProps here. So that instead of the table rendering like this for `updateButtonProps`:\r\n\r\n\"Screen\r\n\r\nIt would say `Partial` which is easy to then go look up all the props available?" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4893", + "title": "[EuiResizableContainer] Initial panel size calculation improvements", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [], + "comments": 8, + "created_at": "2021-06-16T21:06:36Z", + "author_association": "CONTRIBUTOR", + "body": "### Summary\r\n\r\nCloses #4453. Helps #4737.\r\n\r\n* Added `maxSize` prop that accepts px or % values (just like `minSize)\r\n* Updated initial size calculation to respect `minSize` and `maxSize` full-stop:\r\n * Overflow will scroll if there is not enough width/height to accommodate `minSize`s\r\n * Empty space will exist if the container width/height is larger than combined `maxSize`\r\n* Added `grow` as an accepted value for `initialSize`\r\n * Panel will occupy all remaining space in the container\r\n * Panel can still set `minSize` but `maxSize` seems counterintuitive\r\n* Updated `initialSize` to accept px values (\"30%\", \"30px\", or `30` (30%))\r\n* Updated `size` to accept px values (\"30%\", \"30px\", or `30` (30%))\r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n\r\n~- [ ] Checked in **mobile**~\r\n\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- [x] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**\r\n- [x] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**\r\n- [x] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [x] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [x] Checked for **breaking changes** and labeled appropriately\r\n- [x] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4891", + "title": "[EuiPopover] Multiple Open When Clicking Quickly", + "user": { + "login": "ThomThomson", + "avatar_url": "https://avatars.githubusercontent.com/u/14276393?v=4", + "html_url": "https://github.com/ThomThomson" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + } + ], + "comments": 2, + "created_at": "2021-06-16T16:08:25Z", + "author_association": "CONTRIBUTOR", + "body": "#### Issue\r\n\r\nIf a user clicks two popover buttons in quick succession, so that they click on the second popover before the first is finished animating open, two popovers will appear. Clicking outside either popover twice will close them both.\r\n\r\nhttps://user-images.githubusercontent.com/14276393/122254824-81ed5700-ce9b-11eb-85d4-a45357e80c26.mp4\r\n\r\n#### Expected Behaviour\r\n\r\nIdeally, there should be a limit of one open popover at a time.\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4889", + "title": "Exported typeToPathMap from EuiIcons", + "user": { + "login": "nancy2681", + "avatar_url": "https://avatars.githubusercontent.com/u/74231481?v=4", + "html_url": "https://github.com/nancy2681" + }, + "labels": [], + "comments": 2, + "created_at": "2021-06-16T10:33:33Z", + "author_association": "CONTRIBUTOR", + "body": "\r\nExported `typeToPathMap` from EuiIcons\r\n\r\n### Checklist\r\n\r\n- [ ] ~Check against **all themes** for compatibility in both light and dark modes~\r\n- [ ] ~Checked in **mobile**~\r\n- [ ] ~Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**~\r\n- [ ] ~Props have proper **autodocs** and **[playground toggles]~(https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n- [ ] ~Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n- [ ] ~Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples~\r\n- [ ] ~Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**~\r\n- [ ] ~Checked for **breaking changes** and labeled appropriately~\r\n- [ ] ~Checked for **accessibility** including keyboard-only and screenreader modes~\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4884", + "title": "[EuiContextMenu] Should render `EuiPopover` for you?", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-06-15T18:07:55Z", + "author_association": "CONTRIBUTOR", + "body": "**EuiContextMenu** right now is designed to render inside of a popover (but doesn't strictly need to be). With this, it relies on the consuming developer to put it in **EuiPopover** which can provide some flexibility in styling but also can provide some headache as demonstrated when we were [improving our focus states](https://github.com/elastic/eui/pull/4876#discussion_r651814253).\r\n\r\nIt's not immediately apperent which props should go on the **ContextMenu** and which should go on the **Popover**. I think we can get the same flexibility we currently have just by allowing **EuiContextMenu** to take a `popoverProps` prop which will pass everything through while setting up a sensible default for consumers while also relieving some boilerplate from every usage." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4878", + "title": "[EuiFlexGrid] Add `justifyContent` and `alignItems` like `EuiFlexGroup`", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + }, + { + "id": 1399999948, + "node_id": "MDU6TGFiZWwxMzk5OTk5OTQ4", + "url": "https://api.github.com/repos/elastic/eui/labels/prop%20request", + "name": "prop request", + "color": "3d4d9e", + "default": false, + "description": "" + } + ], + "comments": 7, + "created_at": "2021-06-14T15:50:18Z", + "author_association": "CONTRIBUTOR", + "body": "`EuiFlexGroup` has `justifyContent` and `alignItems` props, but `EuiFlexGrid` surprisingly doesn't." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4877", + "title": "[Icons] Export icon constants", + "user": { + "login": "sqren", + "avatar_url": "https://avatars.githubusercontent.com/u/209966?v=4", + "html_url": "https://github.com/sqren" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 885030943, + "node_id": "MDU6TGFiZWw4ODUwMzA5NDM=", + "url": "https://api.github.com/repos/elastic/eui/labels/icons", + "name": "icons", + "color": "2d0470", + "default": false, + "description": "" + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + } + ], + "comments": 0, + "created_at": "2021-06-14T14:10:13Z", + "author_association": "MEMBER", + "body": "Currently to use a (third party) icon it is only possible to use a string as the logo identifier:\r\n\r\n```tsx\r\n\r\n```\r\n\r\nThis is error prone since the there's nothing preventing the dev making a spelling mistakes, or renaming an icon on the EUI side without updating the consumers. \r\nTo prevent these mistakes, catch changes and improve intellisense I suggest icons are consumed as constants:\r\n\r\n```tsx\r\n\r\n```\r\n\r\nAfaict all that's needed is to export `typeToPathMap`:\r\n\r\nhttps://github.com/elastic/eui/blob/e475ce5bedf9f2dd5a76fd6cc69168aaa1d12e99/src/components/icon/icon.tsx#L39-L56" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4872", + "title": "[EuiComboBox] Combobox popover can be hidden behind EuiBottomBar", + "user": { + "login": "jloleysens", + "avatar_url": "https://avatars.githubusercontent.com/u/8155004?v=4", + "html_url": "https://github.com/jloleysens" + }, + "labels": [], + "comments": 3, + "created_at": "2021-06-10T15:08:45Z", + "author_association": "NONE", + "body": "On EUI v33.0.0 it is possible to have the combobox popover appear under the EuiBottomBar.\r\n\r\n\r\n## Screenshot\r\nThere are 3 items in the this popover but only 2 are visible\r\n\r\n![Screenshot 2021-06-10 at 15 04 55](https://user-images.githubusercontent.com/8155004/121549766-6fdc6600-ca0e-11eb-8daf-6a25d2c58169.png)\r\n\r\n\r\n## Example\r\n\r\nhttps://codesandbox.io/s/heuristic-waterfall-1ntg0?file=/src/index.tsx" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4867", + "title": "[EuiMarkdownEditor] Enhancement request: auto-inserting list items", + "user": { + "login": "i-a-n", + "avatar_url": "https://avatars.githubusercontent.com/u/1937355?v=4", + "html_url": "https://github.com/i-a-n" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 0, + "created_at": "2021-06-08T21:50:43Z", + "author_association": "CONTRIBUTOR", + "body": "Hello valued team members, a support user has left us [a bug report ](https://github.com/elastic/dream-machine/issues/1340)which we determined is actually a feature request:\r\n\r\n> Ordered List not working properly, after push enter key it doesn't add the next number at the new line.\r\n\r\nIt appears the user expects the GitHub textarea behavior of:\r\n\r\n1. type `1.`\r\n2. hit enter\r\n3. the next line auto-inserts `2. `\r\n\r\nSince I don't see this functionality in `MarkdownEditor`, I thought I'd raise an issue in case this is a feature we think is important enough to develop. Thanks for your time!" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4866", + "title": "[EuiComboBox] Performance issue on rerender", + "user": { + "login": "dej611", + "avatar_url": "https://avatars.githubusercontent.com/u/924948?v=4", + "html_url": "https://github.com/dej611" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + } + ], + "comments": 0, + "created_at": "2021-06-08T09:49:06Z", + "author_association": "NONE", + "body": "The `AutosizeInput` internal component within the `EuiComboBox` is causing noticeable performance issue in a UI on component rerender.\r\n\r\nThe code around the `EuiComboBox` had to be optimized to strongly minimize rerenders of the component due to an internal UI reflow triggered by the internal `AutosizeInput` component.\r\n\r\nTo give an idea of the performance impact, this is a profile read of a single state update operation in Lens:\r\n\r\n\"Screenshot\r\n\r\nSame chart with the timings popup:\r\n\r\n\"Screenshot\r\n\r\nThis is the line that triggers the performance issue: https://github.com/JedWatson/react-input-autosize/blob/8a68b453ca1dec723e255c40eab7f2928228fe22/src/AutosizeInput.js#L103\r\nThat single read operation of the `scrollWidth` property [triggers a full reflow](gist.github.com/paulirish/5d52fb081b3570c81e3a) which takes more than 100ms in our case.\r\nThe situation is even worse with slower CPUs that seems to be hit even worse by this specific problem, here's a profile recording with regular CPU and \"slower CPU\" (simulated 4x slowdown CPU):\r\n\r\n\"Fast CPU\":\r\n\"Screenshot\r\n\r\n\"4x slowdown CPU\":\r\n\"Screenshot\r\n\r\n**Some ideas**\r\n\r\nNot sure there's a specific solution for this problem, but it may help to add some documentation on the EuiComboBox page in a way to make the user aware of the problem - suggesting how to minimize re-renders." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4861", + "title": "[EuiDataGrid] Support double-click action on columns", + "user": { + "login": "ghudgins", + "avatar_url": "https://avatars.githubusercontent.com/u/5465514?v=4", + "html_url": "https://github.com/ghudgins" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-06-04T20:34:53Z", + "author_association": "NONE", + "body": "**Describe the feature:**\r\nSupport a double click action in EuiDataGrid that allow auto expansion/collapsing to the width of the data. There probably should be some maximum expansion allowed 😅 \r\n\r\n**Describe a specific use case for the feature:**\r\nThere is data within a table cell that is more than the cell can show, by double clicking on the column width separator it would auto expand the column to the width of the cell with the most data in it.\r\n\r\n![image](https://user-images.githubusercontent.com/5465514/121020083-063e2c80-c76e-11eb-9886-3670d0d76fa2.png)\r\n\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4859", + "title": "Import in header_elastic_pattern breaks CodeSandbox link", + "user": { + "login": "chandlerprall", + "avatar_url": "https://avatars.githubusercontent.com/u/313125?v=4", + "html_url": "https://github.com/chandlerprall" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + } + ], + "comments": 0, + "created_at": "2021-06-04T19:37:25Z", + "author_association": "CONTRIBUTOR", + "body": "😢 This import still breaks the CodeSandbox link (won't render it because the import isn't from `components`). But we can circle back to how to get these full screen demos working with those links after.\r\n\r\n_Originally posted by @cchaos in https://github.com/elastic/eui/pull/4674#discussion_r630419162_" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4856", + "title": "[EuiPageHeader] PageTitle missing truncation or word-wrap ", + "user": { + "login": "formgeist", + "avatar_url": "https://avatars.githubusercontent.com/u/4104278?v=4", + "html_url": "https://github.com/formgeist" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-06-04T07:55:27Z", + "author_association": "CONTRIBUTOR", + "body": "# Summary\r\n\r\nI noticed when page titles are very long, the `rightSideItems` are pushed out of the way, but perhaps there should be some maxWidth or character truncation for the PageTitle for these cases. Should we handle this case by case or implement something general in the component?\r\n\r\n\"Screenshot\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4848", + "title": "[EuiDataGrid] Horizontal scroll appears for datagrid when it should not", + "user": { + "login": "mbondyra", + "avatar_url": "https://avatars.githubusercontent.com/u/4283304?v=4", + "html_url": "https://github.com/mbondyra" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-06-02T13:26:50Z", + "author_association": "CONTRIBUTOR", + "body": "Apologies for not reproducing this in Codesandbox - I couldn't exactly catch the root cause for an isolated case but I think that the bug lies in Eui, and not in Kibana.\r\n\r\n## Steps to reproduce on Kibana Dashboard:\r\n1. Create a dashboard with one Lens visualization:\r\n\"Screenshot\r\n\r\n2. Refresh the page. The horizontal scroll appears. \r\n\"Screenshot\r\n3. After hitting a 'refresh' button or resizing the visualization, the horizontal scroll disappears and the grid is stretched properly.\r\n\r\n## Other details:\r\nIt's not reproducible for a small grid, and that is why I think the problem is with some async logic being run not at the right time. The example below works fine, I could never observe a horizontal scroll to appear.\r\n\"Screenshot\r\n\r\nI suspect [this](https://github.com/elastic/eui/blob/ee5d18e11d6cf371e221d261b561d8283c615abb/src/components/datagrid/data_grid.tsx#L329-L335) not being run slow enough to be the cause.\r\n\r\nhttps://github.com/elastic/eui/blob/ee5d18e11d6cf371e221d261b561d8283c615abb/src/components/datagrid/data_grid.tsx#L329-L336" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4845", + "title": "[Elastic Charts] Added value labels styles for bar charts", + "user": { + "login": "miukimiu", + "avatar_url": "https://avatars.githubusercontent.com/u/2750668?v=4", + "html_url": "https://github.com/miukimiu" + }, + "labels": [], + "comments": 10, + "created_at": "2021-06-01T10:33:22Z", + "author_association": "MEMBER", + "body": "### Summary\r\n\r\nCloses #4267.\r\n\r\nThis PR adds better value labels default styles for bar charts.\r\n\r\nBy default the value labels once enabled are going to: \r\n\r\n* Be vertical and horizontal centered. The ideal positions would be based on the rotation of the bars. But this can't be achieved because we can't pass to the theme object what is the current rotation. So vertical and horizontal centered labels seem a good compromise. \r\n* The color will adapt to black or white according to the background (`textInvertible`)\r\n \r\n\"Frame\r\n\r\nThe following demo `#/elastic-charts/categorical` was updated and a \"Show value labels\" switch was added. In this example, we can also see how to align the labels and an offset according to the rotation of the bars. \r\n\r\n\"Screenshot\r\n\r\n### Checklist\r\n\r\n- [x] Check against **all themes** for compatibility in both light and dark modes\r\n- ~[ ] Checked in **mobile**~\r\n- [x] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- ~[ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**~\r\n- ~[ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**~\r\n- ~[ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples~\r\n- ~[ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**~\r\n- ~[ ] Checked for **breaking changes** and labeled appropriately~\r\n- ~[ ] Checked for **accessibility** including keyboard-only and screenreader modes~\r\n- [x] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4843", + "title": "[EuiTourStep] Subtitle shouldn't be a h1", + "user": { + "login": "miukimiu", + "avatar_url": "https://avatars.githubusercontent.com/u/2750668?v=4", + "html_url": "https://github.com/miukimiu" + }, + "labels": [ + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 1, + "created_at": "2021-05-31T16:22:51Z", + "author_association": "MEMBER", + "body": "The subtitle of the **EuiTourStep** shouldn't be a `

`.\r\n\r\nhttps://github.com/elastic/eui/blob/92cc223b5b10ae664e751dadc09e383c3069b5cd/src/components/tour/tour_step.tsx#L226-L233\r\n\r\nAlso, are there better HTML semantics to improve this title/subtitle section? CC @myasonik " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4842", + "title": "[ EuiFilePicker] must provide option to `remove` selected file(s)", + "user": { + "login": "loneWarrior581", + "avatar_url": "https://avatars.githubusercontent.com/u/67538935?v=4", + "html_url": "https://github.com/loneWarrior581" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + } + ], + "comments": 2, + "created_at": "2021-05-29T09:44:10Z", + "author_association": "NONE", + "body": "The current version dose not provide way to selectively remove some file/files from multiple files selected. The `remove` button empty the whole bucket. \r\n\r\n![Form controls - Elastic UI Framework - Google Chrome 2021-05-29 15-01-50](https://user-images.githubusercontent.com/67538935/120065691-46c3e900-c090-11eb-82a1-928d7af184c6.gif)\r\n\r\n\r\n_Proposed change/Feature_ expects way to selectively remove file/files among the picked files.\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4838", + "title": "[EuiCollapsibleNav]: Fix for document is not defined when using CollapsibleNav", + "user": { + "login": "Patil2099", + "avatar_url": "https://avatars.githubusercontent.com/u/35653876?v=4", + "html_url": "https://github.com/Patil2099" + }, + "labels": [], + "comments": 3, + "created_at": "2021-05-28T16:07:09Z", + "author_association": "NONE", + "body": "Fixes #4807 \r\nWhat do you think of this solution? @thompsongl. Please let me know if you want any changes, " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4832", + "title": "[Random] Replace with faker.js and remove", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-05-27T18:35:14Z", + "author_association": "CONTRIBUTOR", + "body": "EUI currently contains a service and some utilities related to generating random data: `Random` (src/services/random.ts) and\r\nfunctions in src/services/utils.ts.\r\n\r\n`Random` is exported as part of EUI's top-level API, but it is only used in `src-docs/` in 3 files. I believe it predates our use of faker.js for docs data. Each use looks like it could be replaced by faker.js and would allow us to remove the class from the codebase.\r\n\r\nThe utils (`times`, `memoize`, and `browserTick`) are not part of EUI's top-level API and 2 have 0 uses in the codebase; `times` is only used by `Random`.\r\n\r\nI propose refactoring the docs examples that use `Random` and remove all the code mentioned above from the codebase." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4831", + "title": "[EuiTour] Support for previous, next and go to step", + "user": { + "login": "andreadelrio", + "avatar_url": "https://avatars.githubusercontent.com/u/4016496?v=4", + "html_url": "https://github.com/andreadelrio" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 7, + "created_at": "2021-05-27T18:24:58Z", + "author_association": "CONTRIBUTOR", + "body": "I wanted to check with the team and ask if we would consider adding \"go to next\", \"go to previous\", \"go to nth step\" support to **EuiTour**. Or if this was considered during the development of the component but not implemented for some reason. \r\n\r\nWe plan to start using [EuiTour for Discover](https://github.com/elastic/kibana/issues/80514#issuecomment-848247562) and the steps we have are not dependant on each other. In this scenario, being able to skip steps (and go back if needed) could be beneficial for the user. Right now the requirement is to have a `Next` button which I could fit in the step \"body\" but wanted to see what we think about doing something like this too.\r\n\r\n![tour_next_previous](https://user-images.githubusercontent.com/4016496/119877174-8b5b5300-bedd-11eb-900c-f2a1917e3332.gif)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4826", + "title": "[EuiDataGrid] Change behavior of header cell sorting", + "user": { + "login": "kertal", + "avatar_url": "https://avatars.githubusercontent.com/u/463851?v=4", + "html_url": "https://github.com/kertal" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 8, + "created_at": "2021-05-26T10:14:16Z", + "author_association": "CONTRIBUTOR", + "body": "When you currently click on a column header sorting link, the selected new sorting is added to the actual sorting. \r\n\r\n\"Discover_-_Elastic\"\r\n\r\nIt can be assumed that most of the times users do not need multi sorting, so it would remove potential confusion (that we encountered in our user testing and while watching live demos). Users would need less actions to sort by a single field, while multi sort would still be possible using to sorting popover:\r\n![image](https://user-images.githubusercontent.com/463851/119642899-7ddd9480-be1b-11eb-818a-4cdeea8b1a3d.png)\r\n\r\nWhen a users removes a sorting by the column header, and has multiple sorting fields configured, just the specific field should be removed\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4825", + "title": "Initials icon", + "user": { + "login": "thomheymann", + "avatar_url": "https://avatars.githubusercontent.com/u/190132?v=4", + "html_url": "https://github.com/thomheymann" + }, + "labels": [ + { + "id": 885030943, + "node_id": "MDU6TGFiZWw4ODUwMzA5NDM=", + "url": "https://api.github.com/repos/elastic/eui/labels/icons", + "name": "icons", + "color": "2d0470", + "default": false, + "description": "" + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 4, + "created_at": "2021-05-26T09:02:34Z", + "author_association": "NONE", + "body": "We require a new icon in Kibana when selecting initials. Is it possible to get this added to EUI as a first-class icon? \r\n\r\n![chrome-capture (13)](https://user-images.githubusercontent.com/190132/119633018-00655480-be1a-11eb-883e-a6ad3e49b5a4.jpg)\r\n\r\nDesign: https://www.figma.com/file/dBta1q3JgFe3Cfhw5h76Oq/Mockups-%2F-Version-1-%5BAwaiting-Dev%5D?node-id=20%3A2087\r\n\r\nSVG:\r\n```\r\n \r\n \r\n \r\n \r\n```" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4814", + "title": "[EuiLoading] Accessibility props", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 6, + "created_at": "2021-05-20T14:08:32Z", + "author_association": "CONTRIBUTOR", + "body": "# Summary\r\n\r\n**EuiLoading** needs to better communicate it's state to assistive tech. We can improve the component in two ways:\r\n\r\n 1. First, add `role=\"progressbar\"` and a default `aria-label` value to the loading state\r\n 2. Also, accept a child to handle properly setting `aria-busy`\r\n\r\n\r\n## Details \r\nDoing the first, improves the existing usage of the component. Doing the second, is a non-breaking API change that should better handle a more ideal UX.\r\n\r\nFor existing implementations, or for those that can't/don't want to upgrade to the new pattern, we should provide better documentation around `aria-label` and `aria-busy`\r\n\r\nDocumentation on `aria-label` should largely ask that something better than \"loading content\" be passed in.\r\n\r\nDocumentation on `aria-busy` should talk about where to put it (around the loading content) and give warnings on how it works (that it treats all children as `aria-hidden`) so devs don't overuse it.\r\n\r\nIn addition to accepting children to handle the `aria-busy` attribute setting, it'll need to also accept an `isLoading` prop (which is required if `children` are passed in). " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4812", + "title": "[EuiDualRange] Should only fire change events when user lets go of endpoint", + "user": { + "login": "thomasneirynck", + "avatar_url": "https://avatars.githubusercontent.com/u/1833023?v=4", + "html_url": "https://github.com/thomasneirynck" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + } + ], + "comments": 4, + "created_at": "2021-05-18T18:54:21Z", + "author_association": "NONE", + "body": "Raised here https://github.com/elastic/kibana/pull/99661\r\n\r\nThe `EuiDualRange` component fires change-events, while the user is still holding on to the end-points. This causes unnecessary updates." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4809", + "title": "[EuiInMemoryTable, EuiSearchBar] Query and filter discrepancies", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [ + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 0, + "created_at": "2021-05-18T16:20:27Z", + "author_association": "CONTRIBUTOR", + "body": "It seems like the fix for this would be to wrap our search filter values in double-quotes (which I think @jen-huang mentioned here: https://github.com/elastic/kibana/issues/95900#issuecomment-812177522), but that's demonstrating some odd behavior for me with the EUI `InMemoryTable` component:\r\n\r\n![Kapture 2021-05-14 at 13 15 05](https://user-images.githubusercontent.com/6766512/118305819-83032100-b4b6-11eb-9537-eee16cdfae1b.gif)\r\n\r\nI added logic to wrap the value for each filter in `\"\"`, but selecting the filter from the dropdown causes no results to be found. Manually typing (or cut/pasting as in the above GIF) produces the correct results. \r\n\r\nMaybe someone with more experience working with this EUI component can offer some insight here? I tracked down this issue that seems to explain the special character escaping logic with double quotes: https://github.com/elastic/eui/pull/3432\r\n\r\n_Originally posted by @kpollich in https://github.com/elastic/kibana/issues/87036#issuecomment-841388505_" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4807", + "title": "[EuiCollapsibleNav] document is not defined when using CollapsibleNav", + "user": { + "login": "Paku580", + "avatar_url": "https://avatars.githubusercontent.com/u/33893557?v=4", + "html_url": "https://github.com/Paku580" + }, + "labels": [ + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-05-18T10:31:20Z", + "author_association": "NONE", + "body": "I tried to add a `EuiCollapsibleNav` to your nextjs eui example here https://elastic.github.io/next-eui-starter/. This worked until i decided to restart the server. Then i got this weird error \"document is not defined\". \r\n\r\nStackTrace:\r\n\r\n```\r\nReferenceError: document is not defined\r\n at EuiOverlayMask (webpack-internal:///./node_modules/@elastic/eui/es/components/overlay_mask/overlay_mask.js:64:78)\r\n at processChild (.../next-eui-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3353:14)\r\n at resolve (.../next-eui-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3270:5)\r\n at ReactDOMServerRenderer.render (.../next-eui-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3753:22)\r\n at ReactDOMServerRenderer.read (.../next-eui-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:3690:29)\r\n at renderToString (.../next-eui-starter/node_modules/react-dom/cjs/react-dom-server.node.development.js:4298:27)\r\n at Object.renderPage (.../next-eui-starter/node_modules/next/dist/next-server/server/render.js:54:854)\r\n at Function.getInitialProps (webpack-internal:///./node_modules/next/dist/pages/_document.js:141:19)\r\n at loadGetInitialProps (.../next-eui-starter/node_modules/next/dist/next-server/lib/utils.js:5:101)\r\n at renderToHTML (.../next-eui-starter/node_modules/next/dist/next-server/server/render.js:54:1145)\r\n at runMicrotasks ()\r\n at processTicksAndRejections (internal/process/task_queues.js:93:5)\r\n at async .../next-eui-starter/node_modules/next/dist/next-server/server/next-server.js:112:97\r\n at async .../next-eui-starter/node_modules/next/dist/next-server/server/next-server.js:105:142\r\n at async DevServer.renderToHTMLWithComponents (.../next-eui-starter/node_modules/next/dist/next-server/server/next-server.js:137:387)\r\n at async DevServer.renderToHTML (.../next-eui-starter/node_modules/next/dist/next-server/server/next-server.js:138:522)\r\n```\r\nI then found out that this starter example doesn't use babel/polyfill so I thought this might be causing the problem.\r\nSo I added babel and the .babelrc file at the root of the project with following configuration:\r\n\r\n```json\r\n{\r\n \"comments\": true,\r\n \"presets\": [\r\n [\"@babel/env\", {\r\n \"useBuiltIns\": \"usage\",\r\n \"corejs\": 3,\r\n \"modules\": \"commonjs\"\r\n }],\r\n [\"@babel/typescript\", { \"isTSX\": true, \"allExtensions\": true }],\r\n \"@babel/react\"\r\n ],\r\n \"plugins\": [\r\n \"@babel/plugin-syntax-dynamic-import\",\r\n \"pegjs-inline-precompile\",\r\n \"add-module-exports\",\r\n \"@babel/proposal-object-rest-spread\",\r\n \"@babel/proposal-class-properties\"\r\n ]\r\n}\r\n```\r\n\r\nThis is the code i modified in the _app.tsx while trying to add the CollapsibleNav:\r\n\r\n```tsx\r\nimport { AppProps } from 'next/app';\r\nimport React, { FunctionComponent, useState } from 'react';\r\nimport {\r\n EuiCollapsibleNav,\r\n EuiCollapsibleNavGroup,\r\n EuiFlexGroup,\r\n EuiFlexItem,\r\n EuiHeader,\r\n EuiHeaderLogo,\r\n EuiHeaderSectionItemButton,\r\n EuiIcon,\r\n EuiListGroup,\r\n EuiPage,\r\n} from '@elastic/eui';\r\n\r\nimport './app.scss';\r\n\r\nimport { EuiListGroupItemProps } from '@elastic/eui/src/components/list_group/list_group_item';\r\n\r\nconst EuiApp: FunctionComponent = ({ Component, pageProps }) => {\r\n const [navIsopen, setNavIsOpen] = useState(true);\r\n const LearnLinks: EuiListGroupItemProps[] = [\r\n { label: 'Docs', href: '#/navigation/collapsible-nav' },\r\n { label: 'Blogs', href: '#/navigation/collapsible-nav' },\r\n { label: 'Webinars', href: '#/navigation/collapsible-nav' },\r\n { label: 'Elastic.co', href: 'https://elastic.co' },\r\n ];\r\n const collapsibleNav = (\r\n setNavIsOpen(!navIsopen)}>\r\n \r\n \r\n }\r\n onClose={() => setNavIsOpen(false)}>\r\n \r\n \r\n \r\n \r\n \r\n \r\n );\r\n const leftSectionItems = [\r\n collapsibleNav,\r\n // eslint-disable-next-line react/jsx-key\r\n Elastic,\r\n ];\r\n return (\r\n <>\r\n \r\n \r\n \r\n \r\n \r\n );\r\n};\r\n\r\nexport default EuiApp;\r\n\r\n```\r\n\r\nI tried several things to solve this none of it worked yet.\r\nSince the starter example uses an older version I tried upgrading it but that didn't solve it either.\r\n\r\nI am out of ideas and don't know if this is an actual issue in elastic ui or I am just missing any specific configuration.\r\nFollowing this doc https://elastic.github.io/eui/#/layout/header#the-elastic-navigation-pattern the code seems right so I guess I am missing some configuration but couldn't find anything about it. " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4806", + "title": "[EuiComboBox] Popover position not rendering properly", + "user": { + "login": "Praveer-Nair", + "avatar_url": "https://avatars.githubusercontent.com/u/66199264?v=4", + "html_url": "https://github.com/Praveer-Nair" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 7, + "created_at": "2021-05-18T05:38:11Z", + "author_association": "NONE", + "body": "Hi Team,\r\n\r\nIn my application I am using elastic UI.\r\nI have used EuiComboBox. When i click on combo box it shows options but there is a gap in between as shown below.\r\n\r\n![comboUI](https://user-images.githubusercontent.com/66199264/118594739-8a347280-b7c7-11eb-8dcb-0a2e2a8b5927.png)\r\n\r\nWhen I inspected I found that 'top' css is getting applied by default on the element as shown below.\r\n\r\n![comboCss](https://user-images.githubusercontent.com/66199264/118594904-c667d300-b7c7-11eb-9d5e-8de14f282e37.png)\r\n\r\nBelow metioned is the code.\r\n\r\n```\r\n \r\n```\r\nCan you please help me out in fixing this.\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4800", + "title": "React 17", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 735509412, + "node_id": "MDU6TGFiZWw3MzU1MDk0MTI=", + "url": "https://api.github.com/repos/elastic/eui/labels/platform", + "name": "platform", + "color": "38f79e", + "default": false, + "description": null + } + ], + "comments": 1, + "created_at": "2021-05-14T14:13:14Z", + "author_association": "CONTRIBUTOR", + "body": "We will be upgrading to React 17 in the near future\r\n\r\n_Originally posted by @thompsongl in https://github.com/elastic/eui/issues/4250#issuecomment-725518671_\r\n\r\nAny chance for an ETA on this? I know you're incredibly busy atm, but this would be greatly appreciated; EUI is the only dependency I have which has not yet upgraded. \r\n\r\nI'm also now using npm 7, which is far stricter in versioning, which means I can no longer get away with depending on React 17; I have to use `--force` which disables all safety measures, not just version overrides. " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4797", + "title": "[EuiButton] Better communicate `isLoading` to assistive tech", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + } + ], + "comments": 7, + "created_at": "2021-05-13T22:43:22Z", + "author_association": "CONTRIBUTOR", + "body": "## Issue\r\nLoading states aren't communicated to screen readers\r\n\r\n## Fix\r\n1. **Include `` with buttons**\r\n\tWhy `role=\"status\"`? This role acts as a live region that will allow us to notify assistive tech that something changed without a user having to do anything, even if they've navigated away from the button.\r\n\tWhy `aria-atomic=\"true\"`? This will tell the assistive tech to read the whole message instead of just the word that changed. (Because we don't know what content will be in the button, this is the safer option.)\r\n\r\n2. **If/When `isLoading` changes, pipe the new button text into the `` we setup**\r\n\tIf the text didn't change, make some up by appending \"is loading\" to the button text when `isLoading=true`\r\n\r\n3. **Clear the `` text after 2 seconds**\r\n\tEven though we set `aria-atomic=\"true\"` above, support is mixed so it's good practice to clear the text if you want to help ensure you're reading the whole string. \r\n\tWhy 2 seconds? Because there's no way to know when the assistive tech might have finished reading it so it's a good guess at \"this should have finished by now...\"\r\n\r\n## Example DOM\r\n### Initial render\r\n```tsx\r\n\r\n\r\n```\r\n### Button is loading\r\n```tsx\r\nLoading data...\r\n\r\n```\r\n### Button is done loading\r\n```tsx\r\nYour data is ready\r\n\r\n```\r\n\r\n### More details\r\nhttps://adrianroselli.com/2021/01/multi-function-button.html" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4795", + "title": "[EuiDataGrid] Expose prop to control number of prefetched rows for virtualized scrolling", + "user": { + "login": "flash1293", + "avatar_url": "https://avatars.githubusercontent.com/u/1508364?v=4", + "html_url": "https://github.com/flash1293" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-05-12T15:18:37Z", + "author_association": "CONTRIBUTOR", + "body": "Right now it's not possible to control how many rows of the virtualized table body get preloaded and the current settings are pretty conservative in pre-rendering rows.\r\n\r\nAs it depends on the certain context whether more pre-rendering makes sense, we should allow the consumer to control this setting by setting a prop on the data grid." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4786", + "title": "[i18n] `core.euiFilterButton.filterBadge` is setting hardcoded values", + "user": { + "login": "afharo", + "avatar_url": "https://avatars.githubusercontent.com/u/5469006?v=4", + "html_url": "https://github.com/afharo" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-05-10T14:35:18Z", + "author_association": "MEMBER", + "body": "The i18n label `core.euiFilterButton.filterBadge` receives a value `filterCountLabel` that is calculated depending on other value:\r\n\r\nhttps://github.com/elastic/kibana/blob/5f618da802228025b8225ff36222d02c95708230/src/core/public/i18n/i18n_eui_mapping.tsx#L503-L507\r\n\r\nThe problem is that the hardcoded values are not localized.\r\n\r\nI think we can fix that by referencing a new `i18n.translate('core.euiFilterButton.filterBadgeActive', { defaultValue: 'active' })` and `i18n.translate('core.euiFilterButton.filterBadgeAvailable', { defaultValue: 'available' })`" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4783", + "title": "[EuiIcon] Early setState yields a console error", + "user": { + "login": "closingin", + "avatar_url": "https://avatars.githubusercontent.com/u/2735603?v=4", + "html_url": "https://github.com/closingin" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + } + ], + "comments": 7, + "created_at": "2021-05-06T12:20:11Z", + "author_association": "CONTRIBUTOR", + "body": "Hello guys!\r\n\r\nI just noticed that there's a little bug on the `EuiIcon` component, as a `this.setState` is called too early in the process, yielding the following console error : `Warning: Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to 'this.state' directly or define a 'state = {};' class property with the desired state in the EuiIcon component.`\r\n\r\nLooking at the codebase, the problem lies in the component constructor on [l.594](https://github.com/elastic/eui/blob/master/src/components/icon/icon.tsx#L594) where `loadIconComponent` is called, triggering the `setState` on [l.635](https://github.com/elastic/eui/blob/master/src/components/icon/icon.tsx#L635)\r\n\r\nI don't have much background in this library, but from what I see you're building an icon cache for every `EuiIcon` that gets spawned, to improve rendering performance of other `EuiIcon`s with the same `iconType`? If that is so, I think moving the problematic code to `componentDidMount` would fix the problem without breaking much things.\r\n\r\nI'm sorry that I don't have the time to open a PR :pensive: " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4777", + "title": "[EuiSuperDatePicker] Crashes and throws `Invalid time value` for edge case values", + "user": { + "login": "jloleysens", + "avatar_url": "https://avatars.githubusercontent.com/u/8155004?v=4", + "html_url": "https://github.com/jloleysens" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 4, + "created_at": "2021-05-04T12:44:31Z", + "author_association": "NONE", + "body": "## Summary\r\n\r\nUsing the super time picker in Kibana can lead to UI crashing for edge case values (see https://github.com/elastic/kibana/issues/91138).\r\n\r\n## How to reproduce\r\n\r\n1. Navigate here https://eui.elastic.co/#/forms/super-date-picker#configurations\r\n2. Select “days ago” and entering a value of 9 9s\r\n3. See error\r\n\r\nIs there a recommended way to handle this outside of the elastic/eui lib such that we can not crash and guide users to the erroneous input?\r\n\r\n## Gif\r\n\r\n![supertimepickerbug](https://user-images.githubusercontent.com/8155004/117005090-21d59380-ace7-11eb-87ec-af7897b879f9.gif)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4774", + "title": "[Docs] Use `htmlIdGenerator()()` in EuiFlyout examples for `aria-labelledby`", + "user": { + "login": "cchaos", + "avatar_url": "https://avatars.githubusercontent.com/u/549577?v=4", + "html_url": "https://github.com/cchaos" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-04-30T20:07:43Z", + "author_association": "CONTRIBUTOR", + "body": "It's a bit of a chore, but might it be worth it:\r\n\r\nI've found that folks will sometimes copy our static ids from docs into their apps and then will run into multiple duplicate id issues.\r\n\r\nThis one is unlikely to cause that issue... But thought I'd bring it up anyways just for consistently having the same example of always using unique ids.\r\n\r\n_Originally posted by @myasonik in https://github.com/elastic/eui/pull/4713#discussion_r624039147_" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4769", + "title": "Should we extend `.npmignore`?", + "user": { + "login": "afharo", + "avatar_url": "https://avatars.githubusercontent.com/u/5469006?v=4", + "html_url": "https://github.com/afharo" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 2, + "created_at": "2021-04-29T16:44:55Z", + "author_association": "MEMBER", + "body": "I've noticed that we are shipping to NPM `src/`, `test-env/`, and many of the dot-files and dot-folders. Should we review what we're publishing to, hopefully, reduce the NPM bundle size (62.6MB right now, according to [NPMJS](https://www.npmjs.com/package/@elastic/eui))\r\n\"image\"\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4766", + "title": "Rename positive/negative palettes to be culturally inclusive", + "user": { + "login": "markov00", + "avatar_url": "https://avatars.githubusercontent.com/u/1421091?v=4", + "html_url": "https://github.com/markov00" + }, + "labels": [ + { + "id": 735485963, + "node_id": "MDU6TGFiZWw3MzU0ODU5NjM=", + "url": "https://api.github.com/repos/elastic/eui/labels/design%20decision", + "name": "design decision", + "color": "006b75", + "default": false, + "description": null + }, + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2021-04-29T13:15:06Z", + "author_association": "MEMBER", + "body": "We have two single hues, sequential, color palettes named `Positive` and `Negative` \r\n\r\n\"Screenshot\r\n\r\nThe same naming is also reused within Kibana, in the color palette dropdown menu for visualization (lens/visualize)\r\n\r\n\"Screenshot\r\n\r\nThe reason is that the association of `green = Positive` and `red = Negative` are mostly a western region type of association, where some eastern regions use the opposite association, where `green = Negative` and `red = Positive`.\r\n\r\nJust take a look at the Japanese stock market:\r\n\r\n![image](https://user-images.githubusercontent.com/1421091/116554771-dc3a5480-a8fb-11eb-884b-7ce29c536ebb.png)\r\n\r\n![image](https://user-images.githubusercontent.com/1421091/116556523-d3e31900-a8fd-11eb-830e-a23f78e00a7e.png)\r\n\r\n\r\nI'd like to propose a name change, toward culturally neural names, like `Greens` and `Reds` or something similar.\r\n\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4762", + "title": "[Docs] arrow key triggers navigation UX", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + }, + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 2, + "created_at": "2021-04-27T23:01:25Z", + "author_association": "CONTRIBUTOR", + "body": "## Question\r\n\r\nEUI docs have a hidden way to navigate where left/right arrows will move you to the next/previous page (per the sidebar order).\r\n\r\nWhat do folks think of it? Do you use it?\r\n\r\n------\r\n\r\n## My experience\r\n\r\nA cursory look at `git blame` (https://github.com/elastic/eui/blob/master/src-docs/src/views/app_view.js#L121-L149) makes it look like it's been around for a long while so I guess it's not a big deal but in the past couple of days I've run into it a few times and always by accident so it's been quite frustrating recently.\r\n\r\n- I was looking at some of our DataGrid docs and _kept_ accidentally triggering it. It's a pretty keyboard heavy area and a misclick when you're going quick can send you to a different page.\r\n- I'm looking at some bugs (in a local branch) that cause the whole page to scroll horizontally so troubleshooting is tricky because I can't scroll left/right with my arrows keys which is my instinct to do.\r\n\r\nBetween it being not very discoverable, and my negative experience, I'm curious to know if others like it." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4761", + "title": "[EuiColorStops] Step value must be greater or equal to 1", + "user": { + "login": "dej611", + "avatar_url": "https://avatars.githubusercontent.com/u/924948?v=4", + "html_url": "https://github.com/dej611" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-04-27T13:49:38Z", + "author_association": "NONE", + "body": "While testing the EuiColorStops for the Lens editor we found out that the minimum step allowed by the component must be greather or equal to 1.\r\nWhile there are workarounds to this, it would be useful to handle this internally within the component.\r\n\r\nThe user case that showed the bug was relative to percentage values, where `min` and `max` where set based on the data (for instance 0 - 0.92), and stops where mapped within that range. This triggered the bug:\r\n\r\n```\r\nUncaught Error: The value of 0.9391536673440342 is not included in the possible sequence provided by the step of 1.\r\n at EuiRangeTrack.validateValueIsInStep (range_track.js:84)\r\n at EuiRangeTrack.render (range_track.js:149)\r\n at finishClassComponent (react-dom.development.js:18470)\r\n at updateClassComponent (react-dom.development.js:18423)\r\n at beginWork$1 (react-dom.development.js:20186)\r\n at HTMLUnknownElement.callCallback (react-dom.development.js:336)\r\n at Object.invokeGuardedCallbackDev (react-dom.development.js:385)\r\n at invokeGuardedCallback (react-dom.development.js:440)\r\n at beginWork$$1 (react-dom.development.js:25780)\r\n at performUnitOfWork (react-dom.development.js:24695)\r\n```" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4758", + "title": "[EuiColorStops] Component is too difficult for a user to interact with, can we use a form?", + "user": { + "login": "wylieconlon", + "avatar_url": "https://avatars.githubusercontent.com/u/666475?v=4", + "html_url": "https://github.com/wylieconlon" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-04-26T22:59:23Z", + "author_association": "CONTRIBUTOR", + "body": "Hi folks, we have been trying to use the EuiColorStops component in Lens as part of [dynamic coloring](https://github.com/elastic/kibana/pull/95217), and earlier today we had a meeting where we decided that we would prefer a simpler overall flow, more in line with what other Kibana apps are choosing to do. For example, more like what Maps has:\r\n\r\n\"Screen\r\n\r\nWe are wondering if the color stop component can be modified so that it uses a form input instead of the complex sliders that it has today. If not, we will plan to implement our own similar to what other teams have chosen in the past. The main reasons for this request are:\r\n\r\n* This pattern is what is already used in Kibana, it's familiar\r\n* Optimizes well for simple color rules like \"yellow if above 75, red if above 90\".\r\n* The popover/thumb component of the color stops jumps around a lot, especially when trying to enter an exact value, and this is not a problem for a form-based UI\r\n* We observed performance issues in the Lens integration that made the color stops harder to interact with\r\n\r\nHere is a video of me interacting with the component in a screen width similar to what Lens has available. The first 30 seconds of the video are focused on the mouse interactions that I found confusing, and the last 30 seconds are focused on the keyboard interactions that I found confusing.\r\n\r\nhttps://user-images.githubusercontent.com/666475/116160042-49ad7180-a6bf-11eb-8272-b7981ecfa43d.mov\r\n\r\nDoes this feedback make sense, and if so, what is next?" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4756", + "title": "[EuiPopover] Popover is placed above header (z-index)", + "user": { + "login": "akaRem", + "avatar_url": "https://avatars.githubusercontent.com/u/1472728?v=4", + "html_url": "https://github.com/akaRem" + }, + "labels": [ + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-04-26T14:56:56Z", + "author_association": "NONE", + "body": "![image](https://user-images.githubusercontent.com/1472728/116103481-ea943080-a6af-11eb-8a1c-483d0990c346.png)\r\n![image](https://user-images.githubusercontent.com/1472728/116103713-262efa80-a6b0-11eb-84b3-bb1ec2b91f38.png)\r\n\r\nto reproduce: \r\n\r\n- go to https://elastic.github.io/eui/#/display/tour \r\n- scroll down to example\r\n\r\nor \r\n\r\n- go to https://elastic.github.io/eui/#/layout/popover\r\n- in first example click show popover, scroll down a little bit\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4749", + "title": "[EuiColorStop] Would provide event for color thumb click, and way to customize the specific popup editor", + "user": { + "login": "dej611", + "avatar_url": "https://avatars.githubusercontent.com/u/924948?v=4", + "html_url": "https://github.com/dej611" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + } + ], + "comments": 1, + "created_at": "2021-04-23T09:34:03Z", + "author_association": "NONE", + "body": "In [our use case](https://github.com/elastic/kibana/pull/95217) the `EuiColorStop` component provides 2 mandatory stops at the beginning and end of the range.\r\nIn particular the user:\r\n* should not be able to drag the stops from their ends position - but still add new stops in between\r\n* should not be able to modify the stop value in some configurations\r\n* should not be able to delete the extremities stops\r\n\r\nAt the moment we could cover some of these requirements with some workaround, but some of the workaround do not provide the right user experience - for instance override after a user action.\r\nIt would be nice to have a first level support for some of these features via EUI directly.\r\nIn particular having the availability of an handler to be called when the user clicks on a color stop thumb would be useful on this scenario, with the ability to specify specific overrides to the editor component.\r\n\r\nIdeally the handler should provide the stop id/index/some type of identification information.\r\nOn the same event the specific configuration override for the popup editor would be provided and it would be merged with the default + `editor props forwarded` + `valueInputProps`.\r\n\r\nWith this type of solution we would be able, for instance, to disable the delete button when the user clicks on one stop at the extremity of the range, or show the value input as disabled in other contexts.\r\n\r\nOne solution I thought would be something like `onStopClicked: (...stop identifier) => { ...editor configuration override }`. Maybe there are other patterns/design I didn't think of yet." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4741", + "title": "[Infra] Add `noindex` tag to PR preview builds", + "user": { + "login": "thompsongl", + "avatar_url": "https://avatars.githubusercontent.com/u/2728212?v=4", + "html_url": "https://github.com/thompsongl" + }, + "labels": [ + { + "id": 735509412, + "node_id": "MDU6TGFiZWw3MzU1MDk0MTI=", + "url": "https://api.github.com/repos/elastic/eui/labels/platform", + "name": "platform", + "color": "38f79e", + "default": false, + "description": null + } + ], + "comments": 0, + "created_at": "2021-04-21T15:54:58Z", + "author_association": "CONTRIBUTOR", + "body": "As seen in https://github.com/elastic/eui/pull/4727#pullrequestreview-641262281, we should prevent search indexing of the PR preview builds." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4736", + "title": "[EuiResizableContainer] Needs `isCollapsed` option", + "user": { + "login": "KishorBudhathoki10", + "avatar_url": "https://avatars.githubusercontent.com/u/45034282?v=4", + "html_url": "https://github.com/KishorBudhathoki10" + }, + "labels": [ + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 3, + "created_at": "2021-04-20T10:58:07Z", + "author_association": "NONE", + "body": "It will be nice to have a props like **isCollapsed** for **Resizeable Panel**. I have a page where I have a resizable component. But when I go from one page to another the resizeable panel goes back to its previous state. I can manage the size of the panels but not collapsible state." + }, + { + "html_url": "https://github.com/elastic/eui/issues/4730", + "title": "Add toolbar button styles", + "user": { + "login": "ryankeairns", + "avatar_url": "https://avatars.githubusercontent.com/u/446285?v=4", + "html_url": "https://github.com/ryankeairns" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 2, + "created_at": "2021-04-19T13:30:27Z", + "author_association": "CONTRIBUTOR", + "body": "Perhaps this could instead be a discussion topic, but Lens and the presentation toolbar (Dashboard, Canvas) are using the same toolbar button styles which smells like a possible EUI addition (e.g. new button group variation?).\r\n\r\nThey've been operating with separate sets of styles and, as of this writing, are having to make [simultaneous](https://github.com/elastic/kibana/pull/97237) [adjustments](https://github.com/elastic/kibana/issues/97454) due to the Amsterdam switch in order to gain more contrast with the underlying background color. \r\n\r\nThe latest design proposal is here (adding a border):\r\n\r\n\"Screenshot" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4726", + "title": "[EuiBasicTable] External checkbox selection", + "user": { + "login": "tosbaha", + "avatar_url": "https://avatars.githubusercontent.com/u/971530?v=4", + "html_url": "https://github.com/tosbaha" + }, + "labels": [ + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + } + ], + "comments": 2, + "created_at": "2021-04-17T08:46:49Z", + "author_association": "NONE", + "body": "If I select items by using the `selection` property and then clear that array, checkboxes don't update. Here is the minimal demo. Select any item and then hit the button. You'll see that, even though the `setSelectedItems` function clears the array which also removes the button, but checkboxes still remain in a checked state.\r\n\r\n```javascript\r\nimport ReactDOM from 'react-dom';\r\nimport '@elastic/eui/dist/eui_theme_light.css';\r\nimport React,{useState} from 'react';\r\n\r\nimport {\r\n EuiButton,\r\n EuiBasicTable,\r\n EuiFlexItem,\r\n} from '@elastic/eui';\r\n\r\n\r\nfunction DemoTable() {\r\n const docs = [\r\n {\r\n _id:1,\r\n \"name\":\"John\",\r\n \"email\":\"john@email.com\",\r\n \"online\":true\r\n },\r\n {\r\n _id:2,\r\n \"name\":\"Jane\",\r\n \"email\":\"jane@email.com\",\r\n \"online\":true\r\n }\r\n \r\n ]\r\n \r\n const [selectedItems, setSelectedItems] = useState([]);\r\n const onClickDoSomething = () => {\r\n console.log('Did something, removing selection');\r\n setSelectedItems([]); //Doesn't remove checkboxes\r\n\r\n }\r\n const onSelectionChange = (selectedItems) =>{\r\n setSelectedItems(selectedItems);\r\n\r\n }\r\n const renderSelectAllButton = () => {\r\n if (selectedItems.length === 0) {\r\n return;\r\n }\r\n\r\n return (\r\n \r\n \r\n Do Something with {selectedItems.length} Users\r\n \r\n \r\n );\r\n };\r\n\r\n const selection = {\r\n selectable: (user) => user.online,\r\n selectableMessage: (selectable) =>\r\n !selectable ? 'User is currently offline' : undefined,\r\n onSelectionChange: onSelectionChange,\r\n };\r\n const columns = [\r\n {\r\n field: \"_id\",\r\n name: \"ID\",\r\n sortable: true\r\n },\r\n {\r\n field: \"name\",\r\n name: \"Name\",\r\n sortable: true\r\n },\r\n {\r\n field: \"email\",\r\n name: \"Email\",\r\n sortable: true\r\n },\r\n ]\r\n\r\n\r\n return (\r\n <>\r\n {renderSelectAllButton()}\r\n \r\n \r\n )\r\n\r\n}\r\n\r\nReactDOM.render(\r\n ,\r\n document.getElementById('root')\r\n);\r\n```" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4724", + "title": "[EuiDataGrid] Sort using hidden column ", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2021-04-16T13:19:41Z", + "author_association": "CONTRIBUTOR", + "body": "Let's say the user wants to order a table by date of creation. \r\nThey don't necessarily care when exactly the item was created, or its id(s), they just want want to see them in the \"most recent\" order. As such, it is likely they will want to hide these columns or these columns were hidden by default.\r\n\r\nCurrently, if you sort the date/id column and then hide it, the sort is not applied - and the column is missing from the \"Sort\" \r\ndropdown header. And, if you show the column again, the sort has been lost. \r\n\r\nAnother use case for this is for when the table is displaying data from a query that the user cannot customise*** and the UI instead sorts the data so that the least relevant rows are shown last.\r\n\r\n (*** I know querying and filtering is important and should be implemented where possible but, in this instance, I cannot yet send a custom query to the backend and had feedback that excluding the rows was misleading as first-time users were unsure why a row was missing; it's a case of \"just display everything\", disgusting I know)\r\n \r\n Is this something EUI would be willing to adopt, or is this by design?" + }, + { + "html_url": "https://github.com/elastic/eui/pull/4720", + "title": "[Docs] Writing guidelines with examples tab", + "user": { + "login": "miukimiu", + "avatar_url": "https://avatars.githubusercontent.com/u/2750668?v=4", + "html_url": "https://github.com/miukimiu" + }, + "labels": [ + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + }, + { + "id": 2767044132, + "node_id": "MDU6TGFiZWwyNzY3MDQ0MTMy", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-changelog", + "name": "skip-changelog", + "color": "FC0E3C", + "default": false, + "description": "" + } + ], + "comments": 2, + "created_at": "2021-04-15T17:30:23Z", + "author_association": "MEMBER", + "body": "### Summary\r\n\r\nThis draft PR is for @gchaps add some examples.\r\n\r\nI need to make this more generic in a way that works with multiple tabs not only \"guidelines\" and\"examples\". Maybe instead of calling the method `createGuidelines()` maybe call it `createTabbedPage()`.\r\n\r\nTo keep the scroll to functionality I had to nest the submenu. **Is it a good idea to have 3 levels?** 🤔\r\n\r\nSome features:\r\n- Each `h2` with an `id` creates a submenu\r\n\r\nTo do:\r\n\r\n- [ ] Allow searching the 3rd level items \r\n\r\n![Writing-Elastic-UI-Framework (1)](https://user-images.githubusercontent.com/2750668/114913327-fd3d7880-9e18-11eb-820c-076886f4b59a.png)\r\n \r\n\r\n### Checklist\r\n\r\n- [ ] Check against **all themes** for compatibility in both light and dark modes\r\n- [ ] Checked in **mobile**\r\n- [ ] Checked in **Chrome**, **Safari**, **Edge**, and **Firefox**\r\n- [ ] Props have proper **autodocs** and **[playground toggles](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#adding-playground-toggles)**\r\n- [ ] Added **[documentation](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md)**\r\n- [ ] Checked **[Code Sandbox](https://codesandbox.io/)** works for the any docs examples\r\n- [ ] Added or updated **[jest tests](https://github.com/elastic/eui/blob/master/wiki/testing.md)**\r\n- [ ] Checked for **breaking changes** and labeled appropriately\r\n- [ ] Checked for **accessibility** including keyboard-only and screenreader modes\r\n- [ ] A **[changelog](https://github.com/elastic/eui/blob/master/wiki/documentation-guidelines.md#changelog)** entry exists and is marked appropriately\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4716", + "title": "Importing any component from elastic/eui to codesandbox in Safari throws maximum call stack size exceeded", + "user": { + "login": "mbondyra", + "avatar_url": "https://avatars.githubusercontent.com/u/4283304?v=4", + "html_url": "https://github.com/mbondyra" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + } + ], + "comments": 2, + "created_at": "2021-04-15T09:50:25Z", + "author_association": "CONTRIBUTOR", + "body": "Steps to reproduce:\r\n1. Open Safari browser (my version is 14.0 (15610.1.28.1.9, 15610)\r\n2. Go to https://codesandbox.io/s/romantic-ardinghelli-wr9j1?file=/index.js\r\n3. Uncomment the line 4: `import { EuiText } from \"@elastic/eui\";`\r\n\r\nThe moment it gets uncommented, codesandbox throws an error: \r\n\"Screenshot\r\n\r\nIt works well with Chrome.\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/4705", + "title": "[EuiDataGrid] `stripes` in `gridStyle` alternates bewteen pages", + "user": { + "login": "j-m", + "avatar_url": "https://avatars.githubusercontent.com/u/15386491?v=4", + "html_url": "https://github.com/j-m" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2021-04-13T14:36:23Z", + "author_association": "CONTRIBUTOR", + "body": "Prior to virtualisation, the config\r\n```\r\ngridStyle={{\r\n stripes : true\r\n}}\r\n```\r\nalways started the first row of a page with a white background.\r\nNow, the first row will alternate white/grey on odd/even pages respectively, as if the pattern were continuing across pages.\r\n\r\nSee also #4483 " + }, + { + "html_url": "https://github.com/elastic/eui/issues/4702", + "title": "[EuiFormRow] Don't wire up `htmlFor` for `\r\n```\r\n\r\n- The button is rendered with an `undefined` value for `aria-labelledby`. This looks like it is because `src/components/form/super_select/super_select_control.js` is using the `id` property which is `undefined`.\r\n\r\n- Focus order is lost when exiting the options. After tabbing into the options in the control, and then pressing ESC to close the control or ENTER to select a value, the next TAB should navigate to the next control on the page, but focus returns to the first element on the page (can be reproduced on the EUI Examples page, or see https://github.com/elastic/kibana/issues/50181).\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2705", + "title": "[EuiBasicTable] Should allow visual grouping of cells, especially columns", + "user": { + "login": "wylieconlon", + "avatar_url": "https://avatars.githubusercontent.com/u/666475?v=4", + "html_url": "https://github.com/wylieconlon" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 3, + "created_at": "2019-12-19T22:01:03Z", + "author_association": "CONTRIBUTOR", + "body": "This is not a request for full grouping support like the data grid will support, but for a simpler form of this: https://github.com/elastic/eui/issues/1689\r\n\r\nThe default way that Kibana flattens aggregated data is to repeat all the values in a column, which results in a table with redundancy:\r\n\r\n\"Screenshot\r\n\r\nIs there a way to hide duplicate row values and present a more condensed version of the table? Maybe something like this?\r\n\r\n\"Screenshot\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2684", + "title": "[EuiDataGrid] Align schemas with Kibana", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 2, + "created_at": "2019-12-17T20:04:36Z", + "author_association": "CONTRIBUTOR", + "body": "It'd be way convenient if DataGrid's default schema's aligned with Kibana's `KBN_FIELD_TYPES`\r\n\r\nhttps://github.com/elastic/kibana/blob/master/src/plugins/data/common/kbn_field_types/types.ts" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2679", + "title": "[Docs] Add automated tests for all pages", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 738909016, + "node_id": "MDU6TGFiZWw3Mzg5MDkwMTY=", + "url": "https://api.github.com/repos/elastic/eui/labels/meta", + "name": "meta", + "color": "0e8a16", + "default": false, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + }, + { + "id": 873872737, + "node_id": "MDU6TGFiZWw4NzM4NzI3Mzc=", + "url": "https://api.github.com/repos/elastic/eui/labels/test", + "name": "test", + "color": "74bfe8", + "default": false, + "description": "" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + }, + { + "id": 2809429546, + "node_id": "MDU6TGFiZWwyODA5NDI5NTQ2", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-stale-check", + "name": "skip-stale-check", + "color": "8089A1", + "default": false, + "description": "" + } + ], + "comments": 8, + "created_at": "2019-12-17T18:34:04Z", + "author_association": "CONTRIBUTOR", + "body": "After #2569, the guideline pages could manually be added to run through axe to check for accessibility issues. After #3502, all guidelines pages were tested by default unless they were disabled.\r\n\r\n**Implementation note:** To see the currently skipped pages, go to `scripts/a11y-testing.js`.\r\n\r\nPages left to enable:\r\n- [ ] Resizable Container\r\n- [ ] Button\r\n- [ ] Tree View\r\n- [ ] Side Nav\r\n- [ ] Tables\r\n- [ ] In Memory Tables\r\n- [ ] Aspect Ratio\r\n- [ ] Code\r\n- [ ] Drag And Drop\r\n- [ ] Compressed Forms\r\n- [ ] Combo Box\r\n- [ ] Color Selection\r\n- [ ] Code Editor\r\n- [ ] Date Picker\r\n- [x] Selectable (#3570)\r\n- [ ] Suggest\r\n- [ ] Super Date Picker\r\n- [ ] Creating Charts\r\n- [ ] Part to Whole Comparisons\r\n- [ ] CSS Utility Classes\r\n- [ ] Focus Trap\r\n\r\nPRs so far:\r\n- #2569\r\n- #2995\r\n- #3004\r\n- #3035\r\n- #3036\r\n- #3077\r\n- #3096\r\n- #3097\r\n- #3502" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2677", + "title": "EUI pattern for in product help", + "user": { + "login": "gchaps", + "avatar_url": "https://avatars.githubusercontent.com/u/33642766?v=4", + "html_url": "https://github.com/gchaps" + }, + "labels": [ + { + "id": 735485963, + "node_id": "MDU6TGFiZWw3MzU0ODU5NjM=", + "url": "https://api.github.com/repos/elastic/eui/labels/design%20decision", + "name": "design decision", + "color": "006b75", + "default": false, + "description": null + }, + { + "id": 735494787, + "node_id": "MDU6TGFiZWw3MzU0OTQ3ODc=", + "url": "https://api.github.com/repos/elastic/eui/labels/documentation", + "name": "documentation", + "color": "5462bc", + "default": true, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 4, + "created_at": "2019-12-17T17:51:10Z", + "author_association": "CONTRIBUTOR", + "body": "Sometimes users need more help than can be provided in the UI copy and tooltips. It would be nice to have a pattern for in product help. \r\n\r\nI've seen some apps use the [flyout](https://elastic.github.io/eui/#/layout/flyout) on the right. If this is the pattern we want, can we get some guidelines on how to use it, such as width size? " + }, + { + "html_url": "https://github.com/elastic/eui/issues/2636", + "title": "[EuiDataGrid] Allow overriding individual aspects of default schemas", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 735494060, + "node_id": "MDU6TGFiZWw3MzU0OTQwNjA=", + "url": "https://api.github.com/repos/elastic/eui/labels/feature%20request", + "name": "feature request", + "color": "fef2c0", + "default": false, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1325439805, + "node_id": "MDU6TGFiZWwxMzI1NDM5ODA1", + "url": "https://api.github.com/repos/elastic/eui/labels/discussion", + "name": "discussion", + "color": "79e081", + "default": false, + "description": "" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + }, + { + "id": 2809429546, + "node_id": "MDU6TGFiZWwyODA5NDI5NTQ2", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-stale-check", + "name": "skip-stale-check", + "color": "8089A1", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2019-12-12T00:45:00Z", + "author_association": "CONTRIBUTOR", + "body": "Chiefly, I want to be able to override how default schemas render their cells.\r\n\r\nUsing DataGrid within Kibana, nearly always we will want to provide our own render function for known types (because of field formatters) but it would be nice to be able to use the other built-in bits for schemas (such as sorting, iconography, detection for unknown types, etc.)\r\n\r\nMarking this as up for `discussion` though because I'm not really sure what the best way to expose this would be though...\r\n\r\nFor reference, current default types in Kibana are: \r\n```ts\r\nexport enum FIELD_FORMAT_IDS {\r\n _SOURCE = '_source',\r\n BOOLEAN = 'boolean',\r\n BYTES = 'bytes',\r\n COLOR = 'color',\r\n CUSTOM = 'custom',\r\n DATE = 'date',\r\n DATE_NANOS = 'date_nanos',\r\n DURATION = 'duration',\r\n IP = 'ip',\r\n NUMBER = 'number',\r\n PERCENT = 'percent',\r\n RELATIVE_DATE = 'relative_date',\r\n STATIC_LOOKUP = 'static_lookup',\r\n STRING = 'string',\r\n TRUNCATE = 'truncate',\r\n URL = 'url',\r\n}\r\n```\r\n\r\n(though users can create their own as well)\r\n\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2625", + "title": "[EuiDataGrid] Removing a row while a popover is open, opens a popover for another row", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1630413413, + "node_id": "MDU6TGFiZWwxNjMwNDEzNDEz", + "url": "https://api.github.com/repos/elastic/eui/labels/data%20grid", + "name": "data grid", + "color": "b7420c", + "default": false, + "description": "" + } + ], + "comments": 3, + "created_at": "2019-12-10T22:12:00Z", + "author_association": "CONTRIBUTOR", + "body": "If I remove a row from an action in a details popover of a cell, I expect that popover to close and not reopen for the new row at that spot.\r\n\r\nExample:\r\n![Kapture 2019-12-10 at 16 05 05](https://user-images.githubusercontent.com/4188087/70573411-8aa6f380-1b67-11ea-8d71-41866b00fe86.gif)\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2609", + "title": "[EuiFlexGrid] Allow number of columns based on viewport size", + "user": { + "login": "flaviolivolsi", + "avatar_url": "https://avatars.githubusercontent.com/u/5151628?v=4", + "html_url": "https://github.com/flaviolivolsi" + }, + "labels": [ + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 2358914164, + "node_id": "MDU6TGFiZWwyMzU4OTE0MTY0", + "url": "https://api.github.com/repos/elastic/eui/labels/long-term%20goal", + "name": "long-term goal", + "color": "8bede6", + "default": false, + "description": "" + } + ], + "comments": 5, + "created_at": "2019-12-09T15:26:12Z", + "author_association": "NONE", + "body": "Is there any easy way I can set a certain value for the number of columns of a grid for the desktop viewport size and another one, for example, for tablets viewport size? If not, would a pull request be welcome to implement such a feature? I find it something very important for certain layouts.\r\n\r\nA practical example of what I mean (just to give the idea):\r\n\r\n```\r\n\r\n ...\r\n\r\n```\r\n\r\nAn idea could even be to have a helper to facilitate these operations, hence a function that extracts the values from `$euiBreakpoints` from SASS and compares the current viewport size against the breakpoints, returning the current one. This way the code would look something like this:\r\n\r\n```\r\n\r\n ...\r\n\r\n```" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2579", + "title": "[EuiContextMenu] Popover has to close before changes made to items are reflected", + "user": { + "login": "lou00011", + "avatar_url": "https://avatars.githubusercontent.com/u/33159214?v=4", + "html_url": "https://github.com/lou00011" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903826641, + "node_id": "MDU6TGFiZWw5MDM4MjY2NDE=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:engineer", + "name": "assign:engineer", + "color": "f2af85", + "default": false, + "description": "Task that should go to an engineer" + }, + { + "id": 1167062650, + "node_id": "MDU6TGFiZWwxMTY3MDYyNjUw", + "url": "https://api.github.com/repos/elastic/eui/labels/good%20first%20issue", + "name": "good first issue", + "color": "fca4c0", + "default": true, + "description": "" + } + ], + "comments": 9, + "created_at": "2019-12-02T00:00:38Z", + "author_association": "NONE", + "body": "I wanted to make a context menu where each individual menu element can be toggled. I am doing this by changing the icon from `empty` to `check`.\r\n\r\n```\r\n setState(!state))\r\n >Entry A\r\n```\r\nHowever, I found that the context menu doesn't reflect the changes on the fly, but the popover must close and reopen for the change to be reflected.\r\n\r\nIs intentional? Is there anyway I can make this element reactive like everything else?\r\n" + }, + { + "html_url": "https://github.com/elastic/eui/issues/2544", + "title": "Look into using Use @media (prefers-reduced-motion) in EUI", + "user": { + "login": "snide", + "avatar_url": "https://avatars.githubusercontent.com/u/324519?v=4", + "html_url": "https://github.com/snide" + }, + "labels": [ + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + } + ], + "comments": 1, + "created_at": "2019-11-18T17:40:47Z", + "author_association": "MEMBER", + "body": "Although Kibana has an accessibility mode for turning off animation, it is pretty heavy handed. Likely we could do something more elegant in EUI." + }, + { + "html_url": "https://github.com/elastic/eui/issues/2540", + "title": "[EuiDescribedFormGroup] Allow custom widths to be set", + "user": { + "login": "gjones", + "avatar_url": "https://avatars.githubusercontent.com/u/305167?v=4", + "html_url": "https://github.com/gjones" + }, + "labels": [ + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + }, + { + "id": 1399999948, + "node_id": "MDU6TGFiZWwxMzk5OTk5OTQ4", + "url": "https://api.github.com/repos/elastic/eui/labels/prop%20request", + "name": "prop request", + "color": "3d4d9e", + "default": false, + "description": "" + } + ], + "comments": 4, + "created_at": "2019-11-15T16:33:37Z", + "author_association": "CONTRIBUTOR", + "body": "**Summary** \r\nCurrently `EuiDescribedFormGroup` is a 50/50 split between the label (left) and the form/action area (right). I'd like to suggest that we allow a more specific breakdowns to be set.\r\n\r\n![Screenshot 2019-11-15 at 11 24 27](https://user-images.githubusercontent.com/305167/68958649-8242df00-079a-11ea-8d35-601fe160b6ba.png)\r\n\r\n**Our problem** \r\nIn it's default state, there's not enough space in the right side for more complex actions to be taken. When `maxWidth:full` is set, there's enough space on the right but now there's too much space on the left and the label is often isolated.\r\n\r\n**Proposed solution** \r\nHandle the label width with a prop that takes percentage, an example might be `labelWidth: 35`. This would give the label width 35% and automatically assign the right side the remaining 65%.\r\n\r\nThis would allow us in Cloud to do something like this: \r\n![Screenshot 2019-11-15 at 11 30 16](https://user-images.githubusercontent.com/305167/68959080-625feb00-079b-11ea-84c5-48cb6d85543b.png)\r\n\r\nThoughts? \r\n\r\ncc @cchaos @snide " + }, + { + "html_url": "https://github.com/elastic/eui/issues/2528", + "title": "[EuiSuggest] Status changes width of text field", + "user": { + "login": "i-a-n", + "avatar_url": "https://avatars.githubusercontent.com/u/1937355?v=4", + "html_url": "https://github.com/i-a-n" + }, + "labels": [ + { + "id": 723745422, + "node_id": "MDU6TGFiZWw3MjM3NDU0MjI=", + "url": "https://api.github.com/repos/elastic/eui/labels/bug", + "name": "bug", + "color": "ee0701", + "default": true, + "description": null + }, + { + "id": 903848780, + "node_id": "MDU6TGFiZWw5MDM4NDg3ODA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:anyone", + "name": "assign:anyone", + "color": "e0c679", + "default": false, + "description": "Tasks that anyone should be OK fixing" + }, + { + "id": 1559297000, + "node_id": "MDU6TGFiZWwxNTU5Mjk3MDAw", + "url": "https://api.github.com/repos/elastic/eui/labels/needs%20triage", + "name": "needs triage", + "color": "f47fe5", + "default": false, + "description": "For tickets that need some manner of validation / help and should be checked on later." + } + ], + "comments": 1, + "created_at": "2019-11-14T02:28:38Z", + "author_association": "CONTRIBUTOR", + "body": "Hi team. I noticed that when changing the status on an `` element, typically from \"unchanged\" to \"loading\", that the width can change by a fair amount, up to 20 pixels. This causes a serious amount of jank on layouts that are dynamic and not full-width.\r\n\r\nHere's a pared-down example where a two-column flexbox layout is disrupted by toggling the loading state on/off. Just type slowly in the text field to toggle the status: https://codesandbox.io/s/optimistic-shadow-rlvq1\r\n\r\nThis isn't a blocker or anything for me, but I thought I'd bring it up for discussion and further tracking if it's something we want to fix." + }, + { + "html_url": "https://github.com/elastic/eui/issues/2511", + "title": "[EuiSuperDatePicker] Design discussion", + "user": { + "login": "timroes", + "avatar_url": "https://avatars.githubusercontent.com/u/877229?v=4", + "html_url": "https://github.com/timroes" + }, + "labels": [ + { + "id": 735485963, + "node_id": "MDU6TGFiZWw3MzU0ODU5NjM=", + "url": "https://api.github.com/repos/elastic/eui/labels/design%20decision", + "name": "design decision", + "color": "006b75", + "default": false, + "description": null + }, + { + "id": 903825990, + "node_id": "MDU6TGFiZWw5MDM4MjU5OTA=", + "url": "https://api.github.com/repos/elastic/eui/labels/assign:designer", + "name": "assign:designer", + "color": "9688f7", + "default": false, + "description": "Task that should go to a designer" + }, + { + "id": 2809429546, + "node_id": "MDU6TGFiZWwyODA5NDI5NTQ2", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-stale-check", + "name": "skip-stale-check", + "color": "8089A1", + "default": false, + "description": "" + } + ], + "comments": 1, + "created_at": "2019-11-04T16:02:49Z", + "author_association": "CONTRIBUTOR", + "body": "I would like to open a discussion issue around the current design and functionality of the SuperDatePicker. I’ve finished giving a Kibana training and saw around 50% of the users struggle with doing basic tasks like selecting a “from/to”time range in it. I wonder if we did already do some usability tests on the component—and if not, if you think we could potentially do some usability tests on the design/functionality of the component?\r\n\r\nI would be interested in seeing how different users perceive and are able to work with the time picker, especially also checking users not worked with the pre 7.0 time picker but also users who did. Having results of some usability tests might make it easier to objectively evaluate it’s current design again, and maybe see if there are improvements we could still do.\r\n\r\ncc @cchaos @snide " + }, + { + "html_url": "https://github.com/elastic/eui/issues/2493", + "title": "[EuiFormRow] API and a11y cleanup", + "user": { + "login": "myasonik", + "avatar_url": "https://avatars.githubusercontent.com/u/4188087?v=4", + "html_url": "https://github.com/myasonik" + }, + "labels": [ + { + "id": 738909016, + "node_id": "MDU6TGFiZWw3Mzg5MDkwMTY=", + "url": "https://api.github.com/repos/elastic/eui/labels/meta", + "name": "meta", + "color": "0e8a16", + "default": false, + "description": null + }, + { + "id": 813180454, + "node_id": "MDU6TGFiZWw4MTMxODA0NTQ=", + "url": "https://api.github.com/repos/elastic/eui/labels/accessibility", + "name": "accessibility", + "color": "b7f41a", + "default": false, + "description": null + }, + { + "id": 2809429546, + "node_id": "MDU6TGFiZWwyODA5NDI5NTQ2", + "url": "https://api.github.com/repos/elastic/eui/labels/skip-stale-check", + "name": "skip-stale-check", + "color": "8089A1", + "default": false, + "description": "" + } + ], + "comments": 10, + "created_at": "2019-10-28T15:28:18Z", + "author_association": "CONTRIBUTOR", + "body": "# Proposal\r\nDeprecate `labelType` and `hasChildLabel` on `` and, instead, programmatically detect what the correct element should be. \r\n\r\nOur current solution requires the developer to know ahead of time what's going to render and how the child elements effect what you have to pass into `EuiFormRow`. \r\n\r\n# Details\r\nIn general, it should be `