fix(data-table): add table scope to form control overrides (#8295)

* fix(data-table): add table scope to form control overrides

* docs(DataTable): remove example form inputs

Author: emyarod

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

@@ -142,15 +142,16 @@
   }
 
   // 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 {
+
+  .#{$prefix}--data-table .#{$prefix}--list-box input[role='combobox'],
+  .#{$prefix}--data-table .#{$prefix}--list-box input[type='text'],
+  .#{$prefix}--data-table .#{$prefix}--dropdown,
+  .#{$prefix}--data-table .#{$prefix}--list-box,
+  .#{$prefix}--data-table .#{$prefix}--number input[type='number'],
+  .#{$prefix}--data-table .#{$prefix}--number__control-btn::before,
+  .#{$prefix}--data-table .#{$prefix}--number__control-btn::after,
+  .#{$prefix}--data-table .#{$prefix}--text-input,
+  .#{$prefix}--data-table .#{$prefix}--select-input {
     background-color: $field-02;
   }
 

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

@@ -7,8 +7,6 @@
 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 = [
   {
@@ -19,12 +17,6 @@ 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',
@@ -34,12 +26,6 @@ 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',
@@ -49,12 +35,6 @@ 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',
@@ -64,12 +44,6 @@ 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',
@@ -79,12 +53,6 @@ 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',
@@ -94,12 +62,6 @@ 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>
-    ),
   },
 ];
 
@@ -128,10 +90,6 @@ export const headers = [
     key: 'status',
     header: 'Status',
   },
-  {
-    key: 'foo',
-    header: 'foo',
-  },
 ];
 
 export const batchActionClick = (selectedRows) => () =>