Added support for actions in mobile

- Must add `hasActions` to the BasicTable or Row to properly position the action buttons. - Q: On mobile should the action buttons always be visible?
elastic · Mar 28, 2018 · 4f25c64 · 4f25c64
1 parent e388f2a
commit 4f25c64
Show file tree

Hide file tree

Showing 6 changed files with 50 additions and 8 deletions.
diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -130,11 +130,21 @@ export class Table extends Component {
       field: 'firstName',
       name: 'First Name',
       truncateText: true,
-      sortable: true
+      sortable: true,
+      hideForMobile: true,
     }, {
       field: 'lastName',
       name: 'Last Name',
       truncateText: true,
+      hideForMobile: true,
+    }, {
+      field: 'firstName',
+      name: 'Full Name',
+      truncateText: true,
+      isMobileHeader: true,
+      render: (name, item) => (
+        <span>{item.firstName} {item.lastName}</span>
+      ),
     }, {
       field: 'github',
       name: 'Github',
@@ -229,6 +239,8 @@ export class Table extends Component {
           pagination={pagination}
           sorting={sorting}
           selection={selection}
+          isSelectable={true}
+          hasActions={true}
           onChange={this.onTableChange}
         />
       </Fragment>

diff --git a/src/components/basic_table/__snapshots__/basic_table.test.js.snap b/src/components/basic_table/__snapshots__/basic_table.test.js.snap
@@ -693,6 +693,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_1_1"
             textOnly={false}
           >
@@ -747,6 +748,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_2_1"
             textOnly={false}
           >
@@ -801,6 +803,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and a single record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_3_1"
             textOnly={false}
           >
@@ -1204,6 +1207,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_1_1"
             textOnly={false}
           >
@@ -1256,6 +1260,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_2_1"
             textOnly={false}
           >
@@ -1308,6 +1313,7 @@ exports[`EuiBasicTable with pagination, selection, sorting and multiple record a
           </EuiTableRowCell>
           <EuiTableRowCell
             align="right"
+            hasActions={true}
             key="record_actions_3_1"
             textOnly={false}
           >

diff --git a/src/components/basic_table/basic_table.js b/src/components/basic_table/basic_table.js
@@ -483,7 +483,7 @@ export class EuiBasicTable extends Component {
   }
 
   renderItemRow(item, rowIndex) {
-    const { columns, selection, isSelectable } = this.props;
+    const { columns, selection, isSelectable, hasActions } = this.props;
 
     const cells = [];
 
@@ -513,6 +513,7 @@ export class EuiBasicTable extends Component {
         key={`row_${rowIndex}_${itemId}`}
         isSelectable={isSelectable}
         isSelected={selected}
+        hasActions={hasActions}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}
       >
@@ -599,7 +600,7 @@ export class EuiBasicTable extends Component {
 
     const key = `record_actions_${itemId}_${columnIndex}`;
     return (
-      <EuiTableRowCell key={key} align="right" textOnly={false}>
+      <EuiTableRowCell key={key} align="right" textOnly={false} hasActions={true}>
         {tools}
       </EuiTableRowCell>
     );

diff --git a/src/components/table/_responsive.scss b/src/components/table/_responsive.scss
@@ -47,8 +47,6 @@
       border-bottom: $euiBorderThin;
     }
 
-    overflow: hidden; // hide content that doesn't wrap
-
     &.euiTableRow-isSelectable {
       padding-left: $euiSizeXL;
       position: relative;
@@ -57,12 +55,32 @@
         position: absolute;
         left: 0;
         top: $euiSize; // same as row padding-top
-        bottom: $euiSize;
       }
     }
 
     &.euiTableRow-isSelected {
     }
+
+    &.euiTableRow-hasActions {
+      padding-right: $euiSizeXL;
+      position: relative;
+
+      .euiTableRowCell--hasActions {
+        min-width: 0;
+        width: $euiSizeXXL;
+        position: absolute;
+        right: 0;
+        top: $euiSize;
+
+        &::before {
+          display: none;
+        }
+
+        .euiTableCellContent {
+          padding: 6px;
+        }
+      }
+    }
   }
 
   .euiTableRowCell {
@@ -101,13 +119,14 @@
       }
 
       .euiTableCellContent {
-        padding-top: $euiSizeXS;
+        padding-top: $euiSizex;
       }
     }
   }
 
   .euiTableRowCellCheckbox {
     border: none;
+    padding: 6px;
 
     &::before {
       content: '';

diff --git a/src/components/table/table_row.js b/src/components/table/table_row.js
@@ -2,10 +2,11 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
-export const EuiTableRow = ({ children, className, isSelected, isSelectable, ...rest }) => {
+export const EuiTableRow = ({ children, className, isSelected, isSelectable, hasActions, ...rest }) => {
   const classes = classNames('euiTableRow', className, {
     'euiTableRow-isSelectable': isSelectable,
     'euiTableRow-isSelected': isSelected,
+    'euiTableRow-hasActions': hasActions,
   });
 
   return (
@@ -23,4 +24,5 @@ EuiTableRow.propTypes = {
   className: PropTypes.string,
   isSelectable: PropTypes.bool,
   isSelected: PropTypes.bool,
+  hasActions: PropTypes.bool,
 };
diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js
@@ -24,11 +24,13 @@ export const EuiTableRowCell = ({
   header,
   hideForMobile,
   isMobileHeader,
+  hasActions,
   ...rest
 }) => {
   const cellClasses = classNames('euiTableRowCell', {
     'euiTableRowCell--hideForMobile': hideForMobile,
     'euiTableRowCell--isMobileHeader': isMobileHeader,
+    'euiTableRowCell--hasActions': hasActions,
   });
 
   const contentClasses = classNames('euiTableCellContent', className, {