Allowing cells in mobile view to be explicitly 100% wide

- Added `isMobileFullWidth` as a prop to `EuiTableRowCell`
elastic · Mar 28, 2018 · cf3ceb5 · cf3ceb5
1 parent cc681ec
commit cf3ceb5
Show file tree

Hide file tree

Showing 3 changed files with 9 additions and 2 deletions.
diff --git a/src-docs/src/components/guide_section/guide_section.js b/src-docs/src/components/guide_section/guide_section.js
@@ -186,7 +186,7 @@ export class GuideSection extends Component {
       }
       const cells = [
         (
-          <EuiTableRowCell key="name" header="Prop">
+          <EuiTableRowCell key="name" header="Prop" isMobileHeader={true}>
             {humanizedName}
           </EuiTableRowCell>
         ), (
@@ -198,7 +198,7 @@ export class GuideSection extends Component {
             {defaultValueMarkup}
           </EuiTableRowCell>
         ), (
-          <EuiTableRowCell key="description" header="Note">
+          <EuiTableRowCell key="description" header="Note" isMobileFullWidth={true}>
             {descriptionMarkup}
           </EuiTableRowCell>
         )

diff --git a/src/components/table/mobile/_index.scss b/src/components/table/mobile/_index.scss
@@ -127,6 +127,10 @@
         padding-top: $euiSizeXS;
       }
     }
+
+    &.euiTableRowCell--isMobileFullWidth {
+      width: 100%;
+    }
   }
 
   .euiTableRowCellCheckbox {

diff --git a/src/components/table/table_row_cell.js b/src/components/table/table_row_cell.js
@@ -24,13 +24,15 @@ export const EuiTableRowCell = ({
   header,
   hideForMobile,
   isMobileHeader,
+  isMobileFullWidth,
   hasActions,
   ...rest
 }) => {
   const cellClasses = classNames('euiTableRowCell', {
     'euiTableRowCell--hideForMobile': hideForMobile,
     'euiTableRowCell--isMobileHeader': isMobileHeader,
     'euiTableRowCell--hasActions': hasActions,
+    'euiTableRowCell--isMobileFullWidth': isMobileFullWidth,
   });
 
   const contentClasses = classNames('euiTableCellContent', className, {
@@ -65,6 +67,7 @@ EuiTableRowCell.propTypes = {
   header: PropTypes.string,
   hideForMobile: PropTypes.bool,
   isMobileHeader: PropTypes.bool,
+  isMobileFullWidth: PropTypes.bool,
 };
 
 EuiTableRowCell.defaultProps = {