fix(datatable): Adjusts styling to account for edited and error cells…

… when row selected (#3167) * fix(datatable): Adjusts styling to account fro edited and error cells when row is selected * fix(datatable): Increase specificity of edited cells
salesforce-ux · Mar 22, 2018 · 9ed087a · 9ed087a
1 parent cd98ab6
commit 9ed087a
Show file tree

Hide file tree

Showing 2 changed files with 61 additions and 1 deletion.
diff --git a/ui/components/data-tables/inline-edit/_index.scss b/ui/components/data-tables/inline-edit/_index.scss
@@ -156,7 +156,7 @@
  * @selector .slds-cell-edit
  * @restrict .slds-table_edit th, .slds-table_edit td
  */
-.slds-cell-edit {
+.slds-table .slds-cell-edit {
   outline: 0; // @TODO: This came from `has-focus` (watch for overreaching)
 
   &.slds-has-focus { // This is the focused state

diff --git a/ui/components/data-tables/inline-edit/example.jsx b/ui/components/data-tables/inline-edit/example.jsx
@@ -321,6 +321,35 @@ export let states = [
       </Container>
     )
   },
+  {
+    id: 'row-selected-with-edited-cell',
+    label: 'Row Selected with an Edited Cell',
+    element: (
+      <Container>
+        <Table isEditable style={{ width: '66.75rem' }}>
+          <Thead
+            actionableMode
+            columns={columns}
+            hasErrorColumn
+            mainColumnWidth="8.75rem"
+          />
+          <tbody>
+            {_.times(rows.length, i => (
+              <InlineEditTr
+                key={i}
+                index={i + 1}
+                className={i === 0 ? 'slds-is-selected' : null}
+                {...rows[i]}
+                rowSelected={i === 0 ? true : null}
+                actionableMode
+                showEditedCell
+              />
+            ))}
+          </tbody>
+        </Table>
+      </Container>
+    )
+  },
   {
     id: 'row-error',
     label: 'Error - Row level on save (Actionable mode)',
@@ -354,6 +383,37 @@ export let states = [
       document.getElementById('button-01').focus()
     `
   },
+  {
+    id: 'row-error-and-selected',
+    label:
+      'Error - Row level on save (Actionable mode) with entire row selected',
+    element: (
+      <Container>
+        <Table isEditable style={{ width: '66.75rem' }}>
+          <Thead
+            actionableMode
+            columns={columns}
+            hasErrorColumn
+            mainColumnWidth="8.75rem"
+          />
+          <tbody>
+            {_.times(rows.length, i => (
+              <InlineEditTr
+                key={i}
+                index={i + 1}
+                className={i === 0 ? 'slds-is-selected' : null}
+                {...rows[i]}
+                rowSelected={i === 0 ? true : null}
+                actionableMode
+                showCellError
+                showRowError
+              />
+            ))}
+          </tbody>
+        </Table>
+      </Container>
+    )
+  },
   {
     id: 'row-error-focused',
     label: 'Error indicator - Focused (Actionable mode)',