Skip to content

Commit

Permalink
[7835] Simplify row height selector UI to a single line
Browse files Browse the repository at this point in the history
  • Loading branch information
@cee-chen
cee-chen committed Oct 16, 2024
1 parent 693dae7 commit 493e2e0
Show file tree
Hide file tree
Showing 8 changed files with 239 additions and 359 deletions.
Binary file modified ...desktop_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ..._mobile_Tabular_Content_EuiDataGrid_toolbarVisibility_prop_Display_Selector.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
2 changes: 1 addition & 1 deletion packages/eui/src/components/datagrid/body/data_grid_body_custom.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -203,7 +203,7 @@ describe('EuiDataGridBodyCustomRender', () => {
cy.get('[role="gridcell"]').first().invoke('outerHeight').should('eq', 36);

cy.get('[data-test-subj="dataGridDisplaySelectorButton"]').click();
cy.contains('Auto fit').click();
cy.contains('Auto').click();

cy.get('[role="gridcell"]')
.first()
Expand Down
232 changes: 120 additions & 112 deletions packages/eui/src/components/datagrid/controls/__snapshots__/display_selector.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -111,81 +111,85 @@ exports[`useDataGridDisplaySelector displaySelector allows consumers to customiz
for="generated-id"
id="generated-id-label"
>
Row height
Lines per row
</label>
</div>
<div
class="euiFormRow__fieldWrapper"
>
<fieldset
class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
data-test-subj="rowHeightButtonGroup"
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
id="generated-id"
>
<legend
class="emotion-euiScreenReaderOnly"
>
Row height
</legend>
<div
class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
<fieldset
class="euiButtonGroup emotion-euiButtonGroup-fullWidth-RowHeightControl"
data-test-subj="rowHeightButtonGroup"
>
<button
aria-pressed="true"
class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
data-test-subj="undefined"
title="Single"
type="button"
<legend
class="emotion-euiScreenReaderOnly"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Single"
>
Single
</span>
</span>
</button>
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="auto"
title="Auto fit"
type="button"
Lines per row
</legend>
<div
class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="auto"
title="Auto"
type="button"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Auto fit"
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
Auto fit
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Auto"
>
Auto
</span>
</span>
</span>
</button>
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="lineCount"
title="Custom"
type="button"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
</button>
<button
aria-pressed="true"
class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
data-test-subj="static"
title="Static"
type="button"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Custom"
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
Custom
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Static"
>
Static
</span>
</span>
</span>
</button>
</button>
</div>
</fieldset>
<div
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Lines per row"
class="euiFieldNumber emotion-euiFieldNumber-compressed"
data-test-subj="lineCountNumber"
max="20"
min="1"
step="any"
type="number"
value="1"
/>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -352,81 +356,85 @@ exports[`useDataGridDisplaySelector displaySelector renders a toolbar button/pop
for="generated-id"
id="generated-id-label"
>
Row height
Lines per row
</label>
</div>
<div
class="euiFormRow__fieldWrapper"
>
<fieldset
class="euiButtonGroup emotion-euiButtonGroup-fullWidth"
data-test-subj="rowHeightButtonGroup"
<div
class="euiFlexGroup emotion-euiFlexGroup-s-flexStart-stretch-row"
id="generated-id"
>
<legend
class="emotion-euiScreenReaderOnly"
>
Row height
</legend>
<div
class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
<fieldset
class="euiButtonGroup emotion-euiButtonGroup-fullWidth-RowHeightControl"
data-test-subj="rowHeightButtonGroup"
>
<button
aria-pressed="true"
class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
data-test-subj="undefined"
title="Single"
type="button"
<legend
class="emotion-euiScreenReaderOnly"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Single"
>
Single
</span>
</span>
</button>
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="auto"
title="Auto fit"
type="button"
Lines per row
</legend>
<div
class="euiButtonGroup__buttons emotion-euiButtonGroup__buttons-fullWidth-compressed"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="auto"
title="Auto"
type="button"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Auto fit"
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
Auto fit
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Auto"
>
Auto
</span>
</span>
</span>
</button>
<button
aria-pressed="false"
class="euiButtonGroupButton emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-empty-text"
data-test-subj="lineCount"
title="Custom"
type="button"
>
<span
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
</button>
<button
aria-pressed="true"
class="euiButtonGroupButton euiButtonGroupButton-isSelected emotion-euiButtonDisplay-s-defaultMinWidth-euiButtonGroupButton-compressed-fill-text"
data-test-subj="static"
title="Static"
type="button"
>
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Custom"
class="emotion-euiButtonDisplayContent-euiButtonGroupButton__content-compressed"
>
Custom
<span
class="eui-textTruncate emotion-euiButtonGroupButton__text"
data-text="Static"
>
Static
</span>
</span>
</span>
</button>
</button>
</div>
</fieldset>
<div
class="euiFormControlLayout emotion-euiFormControlLayout-compressed"
>
<div
class="euiFormControlLayout__childrenWrapper emotion-euiFormControlLayout__childrenWrapper"
>
<input
aria-label="Lines per row"
class="euiFieldNumber emotion-euiFieldNumber-compressed"
data-test-subj="lineCountNumber"
max="20"
min="1"
step="any"
type="number"
value="1"
/>
</div>
</div>
</fieldset>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/eui/src/components/datagrid/controls/data_grid_toolbar.stories.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -334,7 +334,7 @@ export const DisplaySelector: Story = {
});
await step('Toggle density and row height settings', async () => {
await fireEvent.click(canvas.getByTestSubject('compact'));
await fireEvent.click(canvas.getByTestSubject('lineCount'));
await fireEvent.click(canvas.getByTestSubject('auto'));
});
},
};
Expand Down
Loading

0 comments on commit 493e2e0

Please sign in to comment.