fix(data-table): remove inline edit short table styles (#8212)

* fix(data-table): remove inline edit short table styles

* docs(DataTable): add test column for inline select

* fix(data-table): add form input bgc overrides

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

Author: emyarod

packages/components/src/components/data-table/_data-table-core.scss

@@ -141,6 +141,19 @@
     }
   }
 
+  // Form Control Overrides
+  .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--list-box input[type='text'],
+  .#{$prefix}--dropdown,
+  .#{$prefix}--list-box,
+  .#{$prefix}--number input[type='number'],
+  .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--text-input,
+  .#{$prefix}--select-input {
+    background-color: $field-02;
+  }
+
   // Overflow Menu Overrides
   .#{$prefix}--data-table
     td.#{$prefix}--table-column-menu

packages/components/src/components/data-table/_data-table-inline-edit.scss

@@ -62,18 +62,4 @@
       padding-left: $spacing-04;
     }
   }
-
-  .#{$prefix}--data-table--short {
-    input {
-      height: rem(32px);
-    }
-
-    select {
-      padding: 0.45rem 2.75rem 0.45rem $spacing-05;
-    }
-
-    .#{$prefix}--select__arrow {
-      top: 0.875rem;
-    }
-  }
 }

packages/react/src/components/DataTable/stories/shared.js

@@ -7,6 +7,8 @@
 import React from 'react';
 import { action } from '@storybook/addon-actions';
 import Link from '../../Link';
+import Select from '../../Select';
+import SelectItem from '../../SelectItem';
 
 export const rows = [
   {
@@ -17,6 +19,12 @@ export const rows = [
     rule: 'Round robin',
     attached_groups: 'Kevin’s VM Groups',
     status: <Link>Disabled</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
   {
     id: 'b',
@@ -26,6 +34,12 @@ export const rows = [
     rule: 'Round robin',
     attached_groups: 'Maureen’s VM Groups',
     status: <Link>Starting</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
   {
     id: 'c',
@@ -35,6 +49,12 @@ export const rows = [
     rule: 'DNS delegation',
     attached_groups: 'Andrew’s VM Groups',
     status: <Link>Active</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
   {
     id: 'd',
@@ -44,6 +64,12 @@ export const rows = [
     rule: 'Round robin',
     attached_groups: 'Marc’s VM Groups',
     status: <Link>Disabled</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
   {
     id: 'e',
@@ -53,6 +79,12 @@ export const rows = [
     rule: 'Round robin',
     attached_groups: 'Mel’s VM Groups',
     status: <Link>Starting</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
   {
     id: 'f',
@@ -62,6 +94,12 @@ export const rows = [
     rule: 'DNS delegation',
     attached_groups: 'Ronja’s VM Groups',
     status: <Link>Active</Link>,
+    foo: (
+      <Select id="bar" noLabel size="sm">
+        <SelectItem value={1} text="1" />
+        <SelectItem value={2} text="2" />
+      </Select>
+    ),
   },
 ];
 
@@ -90,6 +128,10 @@ export const headers = [
     key: 'status',
     header: 'Status',
   },
+  {
+    key: 'foo',
+    header: 'foo',
+  },
 ];
 
 export const batchActionClick = (selectedRows) => () =>