Make the space between search bar and table rows match the compressed…

… state of the search box (#1391)

Signed-off-by: Miki <miki@amazon.com>

CHANGELOG.md

@@ -13,6 +13,7 @@
 - Add `compressed` to OuiDatePicker ([#1380](https://github.com/opensearch-project/oui/pull/1380))
 - Expand the definitions of `$ouiBreakpoints` to include `xxl` and `xxxl` ([#1387](https://github.com/opensearch-project/oui/pull/1387))
 - Remove scaling of heading elements ([#1389](https://github.com/opensearch-project/oui/pull/1389))
+- Make the space between search bar and table rows match the compressed state of the search box ([#1391](https://github.com/opensearch-project/oui/pull/1391))
 
 ### 🐛 Bug Fixes
 

src-docs/src/views/tables/in_memory/in_memory_search.js

@@ -50,6 +50,8 @@ export const Table = () => {
   const [incremental, setIncremental] = useState(false);
   const [filters, setFilters] = useState(false);
   const [contentBetween, setContentBetween] = useState(false);
+  const [compressed, setCompressed] = useState(false);
+  const [compressedSearch, setCompressedSearch] = useState(false);
 
   const columns = [
     {
@@ -95,6 +97,7 @@ export const Table = () => {
       incremental: incremental,
       schema: true,
     },
+    compressed: compressedSearch,
     filters: !filters
       ? undefined
       : [
@@ -142,12 +145,27 @@ export const Table = () => {
             onChange={() => setContentBetween(!contentBetween)}
           />
         </OuiFlexItem>
+        <OuiFlexItem grow={false}>
+          <OuiSwitch
+            label="Compressed table"
+            checked={compressed}
+            onChange={() => setCompressed(!compressed)}
+          />
+        </OuiFlexItem>
+        <OuiFlexItem grow={false}>
+          <OuiSwitch
+            label="Compressed search"
+            checked={compressedSearch}
+            onChange={() => setCompressedSearch(!compressedSearch)}
+          />
+        </OuiFlexItem>
       </OuiFlexGroup>
       <OuiSpacer size="l" />
       <OuiInMemoryTable
         items={store.users}
         columns={columns}
         search={search}
+        compressed={compressed}
         pagination={true}
         sorting={true}
         childrenBetween={

src/components/basic_table/in_memory_table.tsx

@@ -520,7 +520,7 @@ export class OuiInMemoryTable<T> extends Component<
       return (
         <>
           <OuiSearchBar onChange={this.onQueryChange} {...searchBarProps} />
-          <OuiSpacer size="l" />
+          <OuiSpacer size={searchBarProps.compressed ? 'm' : 'l'} />
         </>
       );
     }