diff --git a/CHANGELOG.md b/CHANGELOG.md index 66abc25eb60d..6ffc85fbbb0e 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,7 @@ ## [`master`](https://github.com/elastic/eui/tree/master) - Added a new `colorPalette` service for retrieving and generating color arrays for use in charts ([#1209](https://github.com/elastic/eui/pull/1209)) +- Added `1` as a valid value for the `columns` prop in `EuiFlexGrid` ([#1210](https://github.com/elastic/eui/pull/1210)) ## [`4.2.0`](https://github.com/elastic/eui/tree/v4.2.0) @@ -15,6 +16,7 @@ - Fixed issue with unselected tabs and aria-controls attribute in EuiTabbedContent - Added `tag` icon ([#1188](https://github.com/elastic/eui/pull/1188)) - Replaced `logging` app icon ([#1194](https://github.com/elastic/eui/pull/1194)) +- Made `EuiBasicTable` rows keyboard-accessibile when they are clickable ([#1206](https://github.com/elastic/eui/pull/1206)) **Bug fixes** diff --git a/src-docs/src/views/flex/flex_example.js b/src-docs/src/views/flex/flex_example.js index 4ea7b44a29e2..d3930c5394d6 100644 --- a/src-docs/src/views/flex/flex_example.js +++ b/src-docs/src/views/flex/flex_example.js @@ -294,7 +294,7 @@ export const FlexExample = { text: (

You can set a columns prop to specify - anywhere between 2-4 columns. Any more would likely break on laptop screens. + anywhere between 1-4 columns. Any more would likely break on laptop screens.

), demo:
, diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap index 3a9fbbee5d4c..d016c0be2002 100644 --- a/src/components/basic_table/__snapshots__/basic_table.test.js.snap +++ b/src/components/basic_table/__snapshots__/basic_table.test.js.snap @@ -899,59 +899,65 @@ exports[`EuiBasicTable rowProps renders rows with custom props from a callback 1 - - + - name1 - - + + name1 + + + - - + - name2 - - + + name2 + + + - - + - name3 - - + + name3 + + + @@ -993,59 +999,65 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1` - - + - name1 - - + + name1 + + + - - + - name2 - - + + name2 + + + - - + - name3 - - + + name3 + + + diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js index 5d787ecd7bd4..9d689090f868 100644 --- a/src/components/basic_table/basic_table.js +++ b/src/components/basic_table/basic_table.js @@ -32,7 +32,7 @@ import { LoadingTableBody } from './loading_table_body'; import { EuiTableHeaderMobile } from '../table/mobile/table_header_mobile'; import { EuiTableSortMobile } from '../table/mobile/table_sort_mobile'; import { withRequiredProp } from '../../utils/prop_types/with_required_prop'; -import { EuiScreenReaderOnly } from '../accessibility'; +import { EuiScreenReaderOnly, EuiKeyboardAccessible } from '../accessibility'; const dataTypesProfiles = { auto: { @@ -678,19 +678,25 @@ export class EuiBasicTable extends Component { const { rowProps: rowPropsCallback } = this.props; const rowProps = getRowProps(item, rowPropsCallback); + const row = ( + + {cells} + + ); return ( - - {cells} - + {rowProps.onClick + ? {row} + : row + } {expandedRow} ); diff --git a/src/components/flex/__snapshots__/flex_grid.test.js.snap b/src/components/flex/__snapshots__/flex_grid.test.js.snap index 9e07144d73b8..2cd971c11dac 100644 --- a/src/components/flex/__snapshots__/flex_grid.test.js.snap +++ b/src/components/flex/__snapshots__/flex_grid.test.js.snap @@ -18,6 +18,12 @@ exports[`EuiFlexGrid props columns 0 is rendered 1`] = ` /> `; +exports[`EuiFlexGrid props columns 1 is rendered 1`] = ` +
+`; + exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
{ const classes = classNames('euiTableRow', className, { @@ -18,11 +19,13 @@ export const EuiTableRow = ({ 'euiTableRow-hasActions': hasActions, 'euiTableRow-isExpandedRow': isExpandedRow, 'euiTableRow-isExpandable': isExpandable, + 'euiTableRow-isClickable': onClick, }); return ( {children}