Table actions visibility (#1103)

elastic · Sep 12, 2018 · 08f2d45 · 08f2d45
1 parent e964599
commit 08f2d45
Show file tree

Hide file tree

Showing 16 changed files with 294 additions and 103 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,12 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `3.11.0`.
+- Added `delay` prop to `EuiToolTip` ([#1103](https://github.com/elastic/eui/pull/1103))
+
+**Breaking changes**
+
+- `EuiBasicTable` now shows up to 2 actions before condensing to all popover, but still displaying the top/primary 2 actions as well ([#1103](https://github.com/elastic/eui/pull/1103))
+- `EuiBasicTable` will automatically add `hasActions` and `isSelectable` to allow proper responsive style handling, but are still overridable ([#1103](https://github.com/elastic/eui/pull/1103))
+
 
 ## [`3.11.0`](https://github.com/elastic/eui/tree/v3.11.0)
 

diff --git a/src-docs/src/views/tables/actions/actions.js b/src-docs/src/views/tables/actions/actions.js
@@ -11,7 +11,6 @@ import {
   EuiFlexItem,
   EuiSwitch,
   EuiSpacer,
-  EuiText,
 } from '../../../../../src/components';
 
 /*
@@ -93,13 +92,15 @@ export class Table extends Component {
     }
 
     return (
-      <EuiButton
-        color="danger"
-        iconType="trash"
-        onClick={this.onClickDelete}
-      >
-        Delete {selectedItems.length} Users
-      </EuiButton>
+      <EuiFlexItem grow={false}>
+        <EuiButton
+          color="danger"
+          iconType="trash"
+          onClick={this.onClickDelete}
+        >
+          Delete {selectedItems.length} Users
+        </EuiButton>
+      </EuiFlexItem>
     );
   }
 
@@ -145,31 +146,47 @@ export class Table extends Component {
         ? [{
           render: (item) => {
             return (
-              <EuiText color="secondary" onClick={() => this.cloneUser(item)}>
+              <EuiLink color="secondary" onClick={() => this.cloneUser(item)}>
                 Clone
-              </EuiText>
+              </EuiLink>
             );
           }
         }, {
           render: (item) => {
             return (
-              <EuiText color="danger" onClick={() => this.deleteUser(item)}>
+              <EuiLink color="danger" onClick={() => this.deleteUser(item)}>
                 Delete
-              </EuiText>
+              </EuiLink>
             );
           }
         }]
         : [{
           name: 'Clone',
-          description: 'Clone this person',
+          description: 'Clone this user',
           icon: 'copy',
           onClick: this.cloneUser
         }, {
           name: 'Delete',
-          description: 'Delete this person',
+          description: 'Delete this user',
           icon: 'trash',
           color: 'danger',
-          onClick: this.deleteUser
+          type: 'icon',
+          onClick: this.deleteUser,
+          isPrimary: true,
+        }, {
+          name: 'Edit',
+          isPrimary: true,
+          description: 'Edit this user',
+          icon: 'pencil',
+          type: 'icon',
+          onClick: () => {},
+        }, {
+          name: 'Share',
+          isPrimary: true,
+          description: 'Share this user',
+          icon: 'share',
+          type: 'icon',
+          onClick: () => {},
         }];
     } else {
       actions = customAction
@@ -187,7 +204,7 @@ export class Table extends Component {
         }]
         : [{
           name: 'Delete',
-          description: 'Delete this person',
+          description: 'Delete this user',
           icon: 'trash',
           color: 'danger',
           type: 'icon',
@@ -270,7 +287,6 @@ export class Table extends Component {
     return (
       <Fragment>
         <EuiFlexGroup alignItems="center">
-          {deleteButton}
           <EuiFlexItem grow={false}>
             <EuiSwitch
               label="Multiple Actions"
@@ -285,6 +301,8 @@ export class Table extends Component {
               onChange={this.toggleCustomAction}
             />
           </EuiFlexItem>
+          <EuiFlexItem />
+          {deleteButton}
         </EuiFlexGroup>
 
         <EuiSpacer size="l" />
@@ -296,8 +314,7 @@ export class Table extends Component {
           pagination={pagination}
           sorting={sorting}
           selection={selection}
-          isSelectable={true}
-          hasActions={true}
+          hasActions={customAction ? false : true}
           onChange={this.onTableChange}
         />
       </Fragment>

diff --git a/src-docs/src/views/tables/actions/actions_section.js b/src-docs/src/views/tables/actions/actions_section.js
@@ -32,11 +32,13 @@ export const section = {
       </p>
       <ul>
         <li>
-          There can only be a single action tool visible per row. When more than one action is defined,
-          they will collapse under a single popover represented by the gear icon.
+          There can only be up to 2 actions visible per row. When more than two actions are defined,
+          the first 2 <code>isPrimary</code> actions will stay visible, an ellipses icon button will hold all actions
+          in a single popover.
         </li>
         <li>
-          Actions are only visible when the user hovers over the row with the mouse.
+          Actions are change opacity when user hovers over the row with the mouse. When more than 2 actions are supplied,
+          only the ellipses icon button stays visible at all times.
         </li>
       </ul>
     </div>

diff --git a/src-docs/src/views/tool_tip/tool_tip.js b/src-docs/src/views/tool_tip/tool_tip.js
@@ -45,6 +45,16 @@ export default () => (
         </EuiToolTip>
       </p>
 
+      <p>
+        This tooltip has a long delay because it might be in a repeatable component{' '}
+        <EuiToolTip
+          delay="long"
+          content="Here is some tooltip text"
+        >
+          <EuiLink href="#">wink</EuiLink>
+        </EuiToolTip>
+      </p>
+
       <p>
         This tooltip appears on the bottom of this icon:{' '}
         <EuiToolTip