From 3acf8293c3a8d8c7defd1fcb48f18f0adb5f58b6 Mon Sep 17 00:00:00 2001
From: CJ Cenizal <cj@cenizal.com>
Date: Thu, 30 Nov 2017 14:48:22 -0800
Subject: [PATCH] Add scope prop to EuiTableHeaderCell and
 EuiTableHeaderCellCheckbox. (#171)

* Add scope prop to EuiTableHeaderCell and EuiTableHeaderCellCheckbox.
---
 CHANGELOG.md                                                 | 1 +
 src/components/table/__snapshots__/table.test.js.snap        | 2 ++
 .../table/__snapshots__/table_header_cell.test.js.snap       | 3 +++
 .../__snapshots__/table_header_cell_checkbox.test.js.snap    | 1 +
 src/components/table/table_header_cell.js                    | 5 +++++
 src/components/table/table_header_cell_checkbox.js           | 5 +++++
 6 files changed, 17 insertions(+)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index 07e4cf55621..a73319db888 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -11,6 +11,7 @@
   sprites [(#160)](https://github.com/elastic/eui/pull/160)
 - Add `isReadOnly`, `setOptions`, and `cursorStart` props to  `<EuiCodeEditor>` ([#169](https://github.com/elastic/eui/pull/169))
 - Add `wrap` prop to `<EuiFlexGroup>` ([#170](https://github.com/elastic/eui/pull/170))
+- Add `scope` prop to `<EuiTableHeaderCell>` and `<EuiTableHeaderCellCheckbox>` ([#171](https://github.com/elastic/eui/pull/171))
 
 **Bug fixes**
 
diff --git a/src/components/table/__snapshots__/table.test.js.snap b/src/components/table/__snapshots__/table.test.js.snap
index b77e33b25bb..5d80f7de68e 100644
--- a/src/components/table/__snapshots__/table.test.js.snap
+++ b/src/components/table/__snapshots__/table.test.js.snap
@@ -10,6 +10,7 @@ exports[`renders EuiTable 1`] = `
     <tr>
       <th
         class="euiTableHeaderCell"
+        scope="col"
       >
         <div
           class="euiTableCellContent"
@@ -19,6 +20,7 @@ exports[`renders EuiTable 1`] = `
       </th>
       <th
         class="euiTableHeaderCell"
+        scope="col"
       >
         <div
           class="euiTableCellContent"
diff --git a/src/components/table/__snapshots__/table_header_cell.test.js.snap b/src/components/table/__snapshots__/table_header_cell.test.js.snap
index 1a4eadb38d6..a10c6796854 100644
--- a/src/components/table/__snapshots__/table_header_cell.test.js.snap
+++ b/src/components/table/__snapshots__/table_header_cell.test.js.snap
@@ -3,6 +3,7 @@
 exports[`align defaults to left 1`] = `
 <th
   class="euiTableHeaderCell"
+  scope="col"
 >
   <div
     class="euiTableCellContent"
@@ -13,6 +14,7 @@ exports[`align defaults to left 1`] = `
 exports[`align renders right when specified 1`] = `
 <th
   class="euiTableHeaderCell"
+  scope="col"
 >
   <div
     class="euiTableCellContent euiTableCellContent--alignRight"
@@ -25,6 +27,7 @@ exports[`renders EuiTableHeaderCell 1`] = `
   aria-label="aria-label"
   class="euiTableHeaderCell testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="euiTableCellContent testClass1 testClass2"
diff --git a/src/components/table/__snapshots__/table_header_cell_checkbox.test.js.snap b/src/components/table/__snapshots__/table_header_cell_checkbox.test.js.snap
index c5a5da279c9..14264e0c853 100644
--- a/src/components/table/__snapshots__/table_header_cell_checkbox.test.js.snap
+++ b/src/components/table/__snapshots__/table_header_cell_checkbox.test.js.snap
@@ -5,6 +5,7 @@ exports[`EuiTableHeaderCellCheckbox is rendered 1`] = `
   aria-label="aria-label"
   class="euiTableHeaderCellCheckbox testClass1 testClass2"
   data-test-subj="test subject string"
+  scope="col"
 >
   <div
     class="euiTableCellContent"
diff --git a/src/components/table/table_header_cell.js b/src/components/table/table_header_cell.js
index 5115dc2a9a4..1321a2c07ab 100644
--- a/src/components/table/table_header_cell.js
+++ b/src/components/table/table_header_cell.js
@@ -24,6 +24,7 @@ export const EuiTableHeaderCell = ({
   isSortAscending,
   className,
   ariaLabel,
+  scope,
   ...rest
 }) => {
   const classes = classNames('euiTableHeaderCell', className);
@@ -51,6 +52,7 @@ export const EuiTableHeaderCell = ({
     return (
       <th
         className={classes}
+        scope={scope}
         {...rest}
       >
         <button
@@ -72,6 +74,7 @@ export const EuiTableHeaderCell = ({
     <th
       className={classes}
       aria-label={ariaLabel}
+      scope={scope}
       {...rest}
     >
       <div className={contentClasses}>
@@ -88,8 +91,10 @@ EuiTableHeaderCell.propTypes = {
   onSort: PropTypes.func,
   isSorted: PropTypes.bool,
   isSortAscending: PropTypes.bool,
+  scope: PropTypes.oneOf(['col', 'row', 'colgroup', 'rowgroup']),
 };
 
 EuiTableHeaderCell.defaultProps = {
   align: LEFT_ALIGNMENT,
+  scope: 'col',
 };
diff --git a/src/components/table/table_header_cell_checkbox.js b/src/components/table/table_header_cell_checkbox.js
index c407676eb16..3389b9c237e 100644
--- a/src/components/table/table_header_cell_checkbox.js
+++ b/src/components/table/table_header_cell_checkbox.js
@@ -21,4 +21,9 @@ export const EuiTableHeaderCellCheckbox = ({
 EuiTableHeaderCellCheckbox.propTypes = {
   children: PropTypes.node,
   className: PropTypes.string,
+  scope: PropTypes.oneOf(['col', 'row', 'colgroup', 'rowgroup']),
+};
+
+EuiTableHeaderCellCheckbox.defaultProps = {
+  scope: 'col',
 };