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

… state of the search box (#1391) (#1393)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit 82f35af)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

# Conflicts:
#	CHANGELOG.md

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

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'} />
  </>
  );
  }