Merge branch 'master' into rk/eui-color-palettes

elastic · Sep 25, 2018 · 4e2fb2a · 4e2fb2a
2 parents 3748c9f + cff4915
commit 4e2fb2a
Show file tree

Hide file tree

Showing 11 changed files with 143 additions and 97 deletions.
diff --git 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
@@ -294,7 +294,7 @@ export const FlexExample = {
     text: (
       <p>
         You can set a <EuiCode>columns</EuiCode> 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.
       </p>
     ),
     demo: <div className="guideDemo__highlightGridWrap"><FlexGridColumns /></div>,

diff --git 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
         <React.Fragment
           key="row_0"
         >
-          <EuiTableRow
-            className="customRowClass"
-            data-test-subj="row-1"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_0_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customRowClass"
+              data-test-subj="row-1"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name1
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_0_0"
+                textOnly={true}
+              >
+                name1
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
         <React.Fragment
           key="row_1"
         >
-          <EuiTableRow
-            className="customRowClass"
-            data-test-subj="row-2"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_1_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customRowClass"
+              data-test-subj="row-2"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name2
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_1_0"
+                textOnly={true}
+              >
+                name2
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
         <React.Fragment
           key="row_2"
         >
-          <EuiTableRow
-            className="customRowClass"
-            data-test-subj="row-3"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_2_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customRowClass"
+              data-test-subj="row-3"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name3
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_2_0"
+                textOnly={true}
+              >
+                name3
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
       </EuiTableBody>
     </EuiTable>
@@ -993,59 +999,65 @@ exports[`EuiBasicTable rowProps renders rows with custom props from an object 1`
         <React.Fragment
           key="row_0"
         >
-          <EuiTableRow
-            className="customClass"
-            data-test-subj="row"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_0_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customClass"
+              data-test-subj="row"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name1
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_0_0"
+                textOnly={true}
+              >
+                name1
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
         <React.Fragment
           key="row_1"
         >
-          <EuiTableRow
-            className="customClass"
-            data-test-subj="row"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_1_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customClass"
+              data-test-subj="row"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name2
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_1_0"
+                textOnly={true}
+              >
+                name2
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
         <React.Fragment
           key="row_2"
         >
-          <EuiTableRow
-            className="customClass"
-            data-test-subj="row"
-            isSelected={false}
-            onClick={[Function]}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_2_0"
-              textOnly={true}
+          <EuiKeyboardAccessible>
+            <EuiTableRow
+              className="customClass"
+              data-test-subj="row"
+              isSelected={false}
+              onClick={[Function]}
             >
-              name3
-            </EuiTableRowCell>
-          </EuiTableRow>
+              <EuiTableRowCell
+                align="left"
+                header="Name"
+                key="_data_column_name_2_0"
+                textOnly={true}
+              >
+                name3
+              </EuiTableRowCell>
+            </EuiTableRow>
+          </EuiKeyboardAccessible>
         </React.Fragment>
       </EuiTableBody>
     </EuiTable>

diff --git 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 = (
+      <EuiTableRow
+        aria-owns={expandedRowId}
+        isSelectable={isSelectable == null ? calculatedHasSelection : isSelectable}
+        isSelected={selected}
+        hasActions={hasActions == null ? calculatedHasActions : hasActions}
+        isExpandable={isExpandable}
+        {...rowProps}
+      >
+        {cells}
+      </EuiTableRow>
+    );
 
     return (
       <Fragment key={`row_${itemId}`}>
-        <EuiTableRow
-          aria-owns={expandedRowId}
-          isSelectable={isSelectable == null ? calculatedHasSelection : isSelectable}
-          isSelected={selected}
-          hasActions={hasActions == null ? calculatedHasActions : hasActions}
-          isExpandable={isExpandable}
-          {...rowProps}
-        >
-          {cells}
-        </EuiTableRow>
+        {rowProps.onClick
+          ? <EuiKeyboardAccessible>{row}</EuiKeyboardAccessible>
+          : row
+        }
         {expandedRow}
       </Fragment>
     );

diff --git 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`] = `
+<div
+  class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--single euiFlexGrid--responsive"
+/>
+`;
+
 exports[`EuiFlexGrid props columns 2 is rendered 1`] = `
 <div
   class="euiFlexGrid euiFlexGrid--gutterLarge euiFlexGrid--halves euiFlexGrid--responsive"

diff --git a/src/components/flex/_flex_grid.scss b/src/components/flex/_flex_grid.scss
@@ -24,6 +24,7 @@ $fractions: (
   fourths: 25%,
   thirds: 33.3%,
   halves: 50%,
+  single: 100%,
 );
 
 @each $gutterName, $gutterSize in $gutterTypes {

diff --git 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/flex/flex_grid.js b/src/components/flex/flex_grid.js
@@ -14,6 +14,7 @@ export const GUTTER_SIZES = Object.keys(gutterSizeToClassNameMap);
 
 const columnsToClassNameMap = {
   0: 'euiFlexGrid--wrap',
+  1: 'euiFlexGrid--single',
   2: 'euiFlexGrid--halves',
   3: 'euiFlexGrid--thirds',
   4: 'euiFlexGrid--fourths',
@@ -46,6 +47,9 @@ EuiFlexGrid.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
   gutterSize: PropTypes.oneOf(GUTTER_SIZES),
+  /**
+   * Number of columns to show in the grid. Up to 4.
+   */
   columns: PropTypes.oneOf(COLUMNS).isRequired,
   /**
    * Allow grid items display at block level on small screens

diff --git 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
@@ -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
@@ -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 (
     <tr
       className={classes}
+      onClick={onClick}
       {...rest}
     >
       {children}