From 58b2a99f4c543a5ccccc7b49e0eac1c6ed07a04e Mon Sep 17 00:00:00 2001 From: CJ Cenizal Date: Mon, 24 Sep 2018 12:37:22 -0700 Subject: [PATCH 1/2] Make EuiBasicTable rows keyboard-accessible when they are clickable. (#1206) --- CHANGELOG.md | 1 + .../__snapshots__/basic_table.test.js.snap | 180 ++++++++++-------- src/components/basic_table/basic_table.js | 28 +-- src/components/flex/_flex_item.scss | 2 +- src/components/table/_table.scss | 10 + src/components/table/_variables.scss | 2 + src/components/table/table_row.js | 3 + 7 files changed, 130 insertions(+), 96 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index c4ac55d76596..a9a765b53e69 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -15,6 +15,7 @@ No public interface changes since `4.2.0`. - 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/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/_flex_item.scss b/src/components/flex/_flex_item.scss index 184e8d5ac120..92ac26c9ce16 100644 --- a/src/components/flex/_flex_item.scss +++ b/src/components/flex/_flex_item.scss @@ -6,7 +6,7 @@ .euiFlexItem { display: flex; /* 1 */ flex-direction: column; /* 1 */ - + @include internetExplorerOnly { min-width: 1px; /* 2 */ } diff --git a/src/components/table/_table.scss b/src/components/table/_table.scss index 0662541c82e4..160310b37917 100644 --- a/src/components/table/_table.scss +++ b/src/components/table/_table.scss @@ -228,3 +228,13 @@ max-height: 1000px; } } + +.euiTableRow-isClickable { + &:hover { + background-color: $euiTableHoverClickableColor; + } + + &:focus { + background-color: $euiTableFocusClickableColor; + } +} diff --git a/src/components/table/_variables.scss b/src/components/table/_variables.scss index 825393d97aa1..39c7e4c50390 100644 --- a/src/components/table/_variables.scss +++ b/src/components/table/_variables.scss @@ -13,3 +13,5 @@ $euiTableHoverColor: tintOrShade($euiColorLightestShade, 50%, 20%); $euiTableSelectedColor: tintOrShade($euiFocusBackgroundColor, 30%, 0%); $euiTableHoverSelectedColor: tintOrShade($euiFocusBackgroundColor, 0, 10%); $euiTableActionsBorderColor: transparentize($euiColorMediumShade, .9); +$euiTableHoverClickableColor: transparentize($euiColorPrimary, .95); +$euiTableFocusClickableColor: transparentize($euiColorPrimary, .9); diff --git a/src/components/table/table_row.js b/src/components/table/table_row.js index 2ef42e05874d..b3500d2e3d3f 100644 --- a/src/components/table/table_row.js +++ b/src/components/table/table_row.js @@ -10,6 +10,7 @@ export const EuiTableRow = ({ hasActions, isExpandedRow, isExpandable, + onClick, ...rest }) => { 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} From cff491563ba30412f340aa9e4c99a619bac60dfc Mon Sep 17 00:00:00 2001 From: "dave.snider@gmail.com" Date: Mon, 24 Sep 2018 14:52:59 -0700 Subject: [PATCH 2/2] FlexGrid now accepts columns={1} (#1210) --- CHANGELOG.md | 2 +- src-docs/src/views/flex/flex_example.js | 2 +- src/components/flex/__snapshots__/flex_grid.test.js.snap | 6 ++++++ src/components/flex/_flex_grid.scss | 1 + src/components/flex/flex_grid.js | 4 ++++ 5 files changed, 13 insertions(+), 2 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index a9a765b53e69..6aa6c8580c47 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,6 +1,6 @@ ## [`master`](https://github.com/elastic/eui/tree/master) -No public interface changes since `4.2.0`. +- 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) 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/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`] = `