Move EuiBasicTable's itemId prop out of selection into a top-level prop

CHANGELOG.md

@@ -1,6 +1,9 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
-No public interface changes since `0.0.46`.
+**Breaking changes**
+
+- Move `EuiBasicTable`'s `itemId` prop from `selection` to a top-level property ([#830](https://github.com/elastic/eui/pull/830))
+- Renamed/refactored `requiresAriaLabel` prop validator to a more general `withRequiredProp` ([#830](https://github.com/elastic/eui/pull/830))
 
 ## [`0.0.47`](https://github.com/elastic/eui/tree/v0.0.47)
 
@@ -20,7 +23,7 @@ No public interface changes since `0.0.46`.
 - Made boolean matching in `EuiSearchBar` more exact so it doesn't match words starting with booleans, like "truest" or "offer" ([#776](https://github.com/elastic/eui/pull/776))
 - `EuiComboBox` do not setState or call refs once component is unmounted ([807](https://github.com/elastic/eui/pull/807) and [#813](https://github.com/elastic/eui/pull/813))
 - Added better accessibility labeling to `EuiPagination`, `EuiSideNav`, `EuiPopover`, `EuiBottomBar` and `EuiBasicTable`.  ([#821](https://github.com/elastic/eui/pull/821))
-- Added `isDisabled` to `EuiComboBox`  ([#829](https://github.com/elastic/eui/pull/829))
+- Added `isDisabled` to `EuiComboBox`  ([#829](https://github.com/elastic/eui/pull/829)) 
 
 ## [`0.0.46`](https://github.com/elastic/eui/tree/v0.0.46)
 

src-docs/src/views/tables/actions/actions.js

@@ -262,7 +262,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -292,6 +291,7 @@ export class Table extends Component {
 
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src-docs/src/views/tables/basic/props_info.js

@@ -8,6 +8,11 @@ export const propsInfo = {
           required: true,
           type: { name: 'object[]' }
         },
+        itemId: {
+          description: 'describes how to extract a unique ID from each item, used for selections & expanded rows',
+          required: false,
+          type: { name: 'string | (item) => string' }
+        },
         compressed: {
           description: 'Makes the font and padding smaller for the entire table',
           type: { name: 'bool' }
@@ -88,11 +93,6 @@ export const propsInfo = {
     __docgenInfo: {
       _euiObjectType: 'type',
       props: {
-        itemId: {
-          description: 'describes how to extract a unique ID from each item',
-          required: true,
-          type: { name: 'string | (item) => string' }
-        },
         onSelectionChanged: {
           description: 'A callback that will be called whenever the item selection changes',
           required: false,

src-docs/src/views/tables/expanding_rows/expanding_rows.js

@@ -208,7 +208,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -219,6 +218,7 @@ export class Table extends Component {
         {deleteButton}
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           itemIdToExpandedRowMap={this.state.itemIdToExpandedRowMap}
           isExpandable={true}
           hasActions={true}

src-docs/src/views/tables/in_memory/in_memory_selection.js

@@ -217,7 +217,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: (selection) => this.setState({ selection })
@@ -227,6 +226,7 @@ export class Table extends Component {
       <div>
         <EuiInMemoryTable
           items={this.state.users}
+          itemId="id"
           error={this.state.error}
           loading={this.state.loading}
           message={this.state.message}

src-docs/src/views/tables/mobile/mobile.js

@@ -189,7 +189,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -219,6 +218,7 @@ export class Table extends Component {
 
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src-docs/src/views/tables/selection/selection.js

@@ -192,7 +192,6 @@ export class Table extends Component {
     };
 
     const selection = {
-      itemId: 'id',
       selectable: (user) => user.online,
       selectableMessage: (selectable) => !selectable ? 'User is currently offline' : undefined,
       onSelectionChange: this.onSelectionChange
@@ -203,6 +202,7 @@ export class Table extends Component {
         {deleteButton}
         <EuiBasicTable
           items={pageOfItems}
+          itemId="id"
           columns={columns}
           pagination={pagination}
           sorting={sorting}

src/components/badge/badge.js

@@ -155,22 +155,30 @@ EuiBadge.propTypes = {
   /**
    * Will apply an onclick to icon within the badge
    */
-  iconOnClick: PropTypes.func,
+  iconOnClick: EuiPropTypes.withRequiredProp(
+    PropTypes.func,
+    'iconOnClickAriaLabel',
+    'Please provide an aria label to complement your iconOnClick'
+  ),
 
   /**
    * Aria label applied to the iconOnClick button
    */
-  iconOnClickAriaLabel: EuiPropTypes.requiresAriaLabel('iconOnClick'),
+  iconOnClickAriaLabel: PropTypes.string,
 
   /**
    * Will apply an onclick to the badge itself
    */
-  onClick: PropTypes.func,
+  onClick: EuiPropTypes.withRequiredProp(
+    PropTypes.func,
+    'onClickAriaLabel',
+    'Please provide an aria label to complement your onClick'
+  ),
 
   /**
    * Aria label applied to the onClick button
    */
-  onClickAriaLabel: EuiPropTypes.requiresAriaLabel('onClick'),
+  onClickAriaLabel: PropTypes.string,
 
   /**
    * Accepts either our palette colors (primary, secondary ..etc) or a hex value `#FFFFFF`, `#000`.

src/components/basic_table/__snapshots__/basic_table.test.js.snap

@@ -205,22 +205,6 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
         </EuiTableHeaderCell>
       </EuiTableHeader>
       <EuiTableBody>
-        <React.Fragment
-          key="row_0"
-        >
-          <EuiTableRow
-            isSelected={false}
-          >
-            <EuiTableRowCell
-              align="left"
-              header="Name"
-              key="_data_column_name_0_0"
-              textOnly={true}
-            >
-              name1
-            </EuiTableRowCell>
-          </EuiTableRow>
-        </React.Fragment>
         <React.Fragment
           key="row_1"
         >
@@ -234,7 +218,7 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
               key="_data_column_name_1_0"
               textOnly={true}
             >
-              name2
+              name1
             </EuiTableRowCell>
           </EuiTableRow>
           <EuiTableRow
@@ -263,6 +247,22 @@ exports[`EuiBasicTable itemIdToExpandedRowMap renders an expanded row 1`] = `
               header="Name"
               key="_data_column_name_2_0"
               textOnly={true}
+            >
+              name2
+            </EuiTableRowCell>
+          </EuiTableRow>
+        </React.Fragment>
+        <React.Fragment
+          key="row_3"
+        >
+          <EuiTableRow
+            isSelected={false}
+          >
+            <EuiTableRowCell
+              align="left"
+              header="Name"
+              key="_data_column_name_3_0"
+              textOnly={true}
             >
               name3
             </EuiTableRowCell>