Skip to content

Commit

Permalink
[design feedback] Anchor column actions popover to icon instead of en…
Browse files Browse the repository at this point in the history 
…tire cell
  • Loading branch information
@cee-chen
cee-chen committed Nov 22, 2023
1 parent d04aabc commit e1c802c
Show file tree
Hide file tree
Showing 5 changed files with 237 additions and 223 deletions.
242 changes: 121 additions & 121 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -610,21 +610,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -634,8 +634,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -663,21 +663,21 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -687,8 +687,8 @@ exports[`EuiDataGrid rendering renders additional toolbar controls 1`] = `
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -1056,21 +1056,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -1080,8 +1080,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -1109,21 +1109,21 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -1133,8 +1133,8 @@ exports[`EuiDataGrid rendering renders control columns 1`] = `
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -1739,21 +1739,21 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="A"
>
Column A
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="A"
>
Column A
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -1763,8 +1763,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -1792,23 +1792,23 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="B"
>
<div
class="euiDataGridHeaderCell__content"
title="B"
>
<div>
More Elements
</div>
<div>
More Elements
</div>
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -1818,8 +1818,8 @@ exports[`EuiDataGrid rendering renders custom column headers 1`] = `
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -2165,21 +2165,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="A"
>
A
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -2189,8 +2189,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridHeaderCellActionButton-A"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down Expand Up @@ -2218,21 +2218,21 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridColumnResizer"
style="margin-right: 0px;"
/>
<div
class="euiPopover eui-fullWidth emotion-euiPopover-block"
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
>
<button
aria-describedby="euiDataGridCellHeader_generated-id_sorting euiDataGridCellHeader_generated-id_actions"
class="euiDataGridHeaderCell__button"
data-euigrid-tab-managed="true"
tabindex="-1"
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiPopover emotion-euiPopover-block-EuiDataGridHeaderCell"
>
<div
class="euiDataGridHeaderCell__content"
title="B"
>
B
</div>
<div
class="euiDataGridHeaderCell__icon"
>
Expand All @@ -2242,8 +2242,8 @@ exports[`EuiDataGrid rendering renders with common and div attributes 1`] = `
data-test-subj="dataGridHeaderCellActionButton-B"
/>
</div>
</button>
</div>
</div>
</button>
<p
hidden=""
id="euiDataGridCellHeader_generated-id_sorting"
Expand Down
Loading

0 comments on commit e1c802c

Please sign in to comment.