Skip to content

Datagrid toolbar #4

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
cee-chen merged 7 commits into from
Nov 8, 2021
Merged

Datagrid toolbar #4

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7b9109d
Update some props comments and fix popover’s responsiveness
Nov 8, 2021
1c9d899
[Design] Remove a few extraneous style overrides to control buttons
Nov 8, 2021
3a2a221
Fixed add/remove of fullscreen body class
Nov 8, 2021
8745217
Added tooltips around icon buttons with long delay
Nov 8, 2021
10bc8c2
Updated examples and snippets with “real world” examples
Nov 8, 2021
2e43c54
More responsive fixes
Nov 8, 2021
22d85f9
Change class name
Nov 8, 2021
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
224 changes: 128 additions & 96 deletions src/components/datagrid/__snapshots__/data_grid.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -986,34 +986,42 @@ Array [
<div
class="euiPopover__anchor"
>
<button
aria-label="Grid display"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
<button
aria-label="Display options"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
</span>
</div>
</div>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
</span>
</div>
</div>
<div
Expand Down Expand Up @@ -1376,34 +1384,42 @@ Array [
<div
class="euiPopover__anchor"
>
<button
aria-label="Grid display"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
<button
aria-label="Display options"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
</span>
</div>
</div>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
</span>
</div>
</div>
<div
Expand Down Expand Up @@ -2069,34 +2085,42 @@ Array [
<div
class="euiPopover__anchor"
>
<button
aria-label="Grid display"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
<button
aria-label="Display options"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
</span>
</div>
</div>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
</span>
</div>
</div>
<div
Expand Down Expand Up @@ -2458,34 +2482,42 @@ Array [
<div
class="euiPopover__anchor"
>
<button
aria-label="Grid display"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
<button
aria-label="Display options"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridStyleSelectorButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="tableDensityNormal"
/>
</button>
</span>
</div>
</div>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
<span
class="euiToolTipAnchor"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
<button
aria-label="Full screen"
class="euiButtonIcon euiButtonIcon--text euiButtonIcon--empty euiButtonIcon--xSmall euiDataGrid__controlBtn"
data-test-subj="dataGridFullScreenButton"
type="button"
>
<span
aria-hidden="true"
class="euiButtonIcon__icon"
color="inherit"
data-euiicon-type="fullScreen"
/>
</button>
</span>
</div>
</div>
<div
Expand Down
27 changes: 17 additions & 10 deletions src/components/datagrid/controls/__snapshots__/style_selector.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,23 +5,30 @@ exports[`useDataGridStyleSelector styleSelector renders a toolbar button/popover
<EuiPopover
anchorPosition="downRight"
button={
<EuiButtonIcon
aria-label="Grid display"
className="euiDataGrid__controlBtn"
color="text"
data-test-subj="dataGridStyleSelectorButton"
iconType="tableDensityNormal"
onClick={[Function]}
size="xs"
/>
<EuiToolTip
content="Display options"
delay="long"
display="inlineBlock"
position="top"
>
<EuiButtonIcon
aria-label="Display options"
className="euiDataGrid__controlBtn"
color="text"
data-test-subj="dataGridStyleSelectorButton"
iconType="tableDensityNormal"
onClick={[Function]}
size="xs"
/>
</EuiToolTip>
}
closePopover={[Function]}
data-test-subj="dataGridStyleSelectorPopover"
display="inlineBlock"
hasArrow={true}
isOpen={false}
ownFocus={true}
panelClassName="euiDataGrid__controlPopover"
panelClassName="euiDataGrid__stylePopoverPanel"
panelPaddingSize="s"
>
<EuiI18n
Expand Down
4 changes: 2 additions & 2 deletions src/components/datagrid/controls/_data_grid_display.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
.euiDataGrid__displayFormRow {
width: $euiFormMaxWidth;
.euiDataGrid__stylePopoverPanel {
Comment thread
cchaos marked this conversation as resolved.
Outdated
width: $euiFormMaxWidth + $euiSize;
}
11 changes: 1 addition & 10 deletions src/components/datagrid/controls/_data_grid_toolbar.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
position: relative;
z-index: 3; // Needs to sit above the content blow that sits below it
border: $euiBorderThin;
padding: $euiSizeXS;
padding: $euiSizeXS $euiSizeXS $euiSizeXS 0;
display: flex;
justify-content: space-between;
}
Expand All @@ -28,18 +28,9 @@
}
}

.euiDataGrid__controlBtn {

@cee-chen cee-chen Nov 8, 2021

Copy link
Copy Markdown
Owner

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fantastic, thanks for cleaning this up!

border-radius: $euiBorderRadius;

&:focus {
background: shadeOrTint($euiColorLightestShade, 10%, 10%);
}
}

.euiDataGrid__controlBtn--active,
.euiDataGrid__controlBtn--active:focus {
font-weight: $euiFontWeightSemiBold;
color: $euiColorFullShade;
}

@include euiDataGridStyles(bordersNone) {
Expand Down
25 changes: 16 additions & 9 deletions src/components/datagrid/controls/data_grid_toolbar.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,15 +52,22 @@ describe('EuiDataGridToolbar', () => {
<div>
mock style selector
</div>
<EuiButtonIcon
aria-label="Full screen"
className=""
color="text"
data-test-subj="dataGridFullScreenButton"
iconType="fullScreen"
onClick={[Function]}
size="xs"
/>
<EuiToolTip
content="Full screen"
delay="long"
display="inlineBlock"
position="top"
>
<EuiButtonIcon
aria-label="Full screen"
className=""
color="text"
data-test-subj="dataGridFullScreenButton"
iconType="fullScreen"
onClick={[Function]}
size="xs"
/>
</EuiToolTip>
</div>
</div>
`);
Expand Down
Loading