[DATA GRID] Expand cells (#2418)

Data grid cells now can expand and can render individually based upon their schema.
elastic · Oct 10, 2019 · 09e6a63 · 09e6a63
1 parent ce3db25
commit 09e6a63
Show file tree

Hide file tree

Showing 33 changed files with 1,047 additions and 357 deletions.
diff --git a/src-docs/src/views/datagrid/in_memory.js b/src-docs/src/views/datagrid/in_memory.js
@@ -23,7 +23,7 @@ const columns = [
     id: 'amount',
   },
   {
-    id: 'phone',
+    id: 'boolean',
   },
   {
     id: 'version',
@@ -46,8 +46,8 @@ for (let i = 1; i < 100; i++) {
     ),
     date: fake('{{date.past}}'),
     account: fake('{{finance.account}}'),
-    amount: fake('{{finance.currencySymbol}}{{finance.amount}}'),
-    phone: fake('{{phone.phoneNumber}}'),
+    amount: fake('${{finance.amount}}'),
+    boolean: fake('{{random.boolean}}'),
     version: fake('{{system.semver}}'),
   });
 }

diff --git a/src-docs/src/views/datagrid/schema.js b/src-docs/src/views/datagrid/schema.js
@@ -11,6 +11,7 @@ import { iconTypes } from '../icon/icons';
 const columns = [
   {
     id: 'name',
+    isExpandable: false,
   },
   {
     id: 'email',
@@ -21,16 +22,18 @@ const columns = [
   {
     id: 'account',
     dataType: 'numeric',
+    isExpandable: false,
   },
   {
     id: 'date',
   },
   {
     id: 'amount',
     dataType: 'currency',
+    isExpandable: false,
   },
   {
-    id: 'phone',
+    id: 'json',
   },
   {
     id: 'version',
@@ -54,12 +57,31 @@ for (let i = 1; i < 5; i++) {
     date: fake('{{date.past}}'),
     account: fake('{{finance.account}}'),
     amount: fake('${{finance.amount}}'),
-    phone: fake('{{phone.phoneNumber}}'),
+    json: JSON.stringify([
+      {
+        name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+        email: fake('{{internet.email}}'),
+        date: fake('{{date.past}}'),
+        account: fake('{{finance.account}}'),
+        amount: fake('${{finance.amount}}'),
+        version: fake('{{system.semver}}'),
+        friends: [
+          {
+            name: fake('{{name.lastName}}, {{name.firstName}} {{name.suffix}}'),
+            email: fake('{{internet.email}}'),
+            date: fake('{{date.past}}'),
+            account: fake('{{finance.account}}'),
+            amount: fake('${{finance.amount}}'),
+            version: fake('{{system.semver}}'),
+          },
+        ],
+      },
+    ]),
     version: fake('{{system.semver}}'),
   });
 }
 
-export default class InMemoryDataGrid extends Component {
+export default class DataGridSchema extends Component {
   constructor(props) {
     super(props);
 
@@ -116,6 +138,7 @@ export default class InMemoryDataGrid extends Component {
         aria-label="Top EUI contributors"
         columns={columns}
         rowCount={data.length}
+        inMemory={{ level: 'sorting' }}
         renderCellValue={({ rowIndex, columnId }) => {
           const value = data[rowIndex][columnId];
           return value;

diff --git a/src-docs/src/views/icon/icons.js b/src-docs/src/views/icon/icons.js
@@ -66,6 +66,7 @@ export const iconTypes = [
   'empty',
   'exit',
   'expand',
+  'expandMini',
   'exportAction',
   'eye',
   'eyeClosed',

diff --git a/src-docs/src/views/pagination/customizable_pagination.js b/src-docs/src/views/pagination/customizable_pagination.js
@@ -95,7 +95,6 @@ export default class extends Component {
       <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
         <EuiFlexItem grow={false}>
           <EuiPopover
-            id="customizablePagination"
             button={button}
             isOpen={this.state.isPopoverOpen}
             closePopover={this.closePopover.bind(this)}

diff --git a/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap b/src/components/basic_table/__snapshots__/in_memory_table.test.js.snap
@@ -329,7 +329,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       closePopover={[Function]}
                       display="inlineBlock"
                       hasArrow={true}
-                      id="customizablePagination"
                       isOpen={false}
                       ownFocus={false}
                       panelPaddingSize="none"
@@ -341,7 +340,6 @@ exports[`EuiInMemoryTable behavior pagination 1`] = `
                       >
                         <div
                           className="euiPopover euiPopover--anchorUpRight euiPopover--withTitle"
-                          id="customizablePagination"
                           onKeyDown={[Function]}
                           onMouseDown={[Function]}
                           onMouseUp={[Function]}

diff --git a/src/components/button/button_icon/button_icon.tsx b/src/components/button/button_icon/button_icon.tsx
@@ -84,7 +84,10 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
   buttonRef,
   ...rest
 }) => {
-  if (!rest['aria-label'] && !rest['aria-labelledby']) {
+  const ariaHidden = rest['aria-hidden'];
+  const isAriaHidden = ariaHidden === 'true' || ariaHidden === true;
+
+  if (!rest['aria-label'] && !rest['aria-labelledby'] && !isAriaHidden) {
     console.warn(
       `EuiButtonIcon requires aria-label or aria-labelledby to be specified because icon-only
       buttons are screen-reader-inaccessible without them.`
@@ -117,6 +120,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
 
     return (
       <a
+        tabIndex={isAriaHidden ? -1 : undefined}
         className={classes}
         href={href}
         target={target}
@@ -130,6 +134,7 @@ export const EuiButtonIcon: FunctionComponent<Props> = ({
 
   return (
     <button
+      tabIndex={isAriaHidden ? -1 : undefined}
       disabled={isDisabled}
       className={classes}
       type={type}