Skip to content

[EuiDataGrid] Add extra left prepend position to the additionalControls API #5394

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 6 commits into from
Nov 23, 2021
Merged

[EuiDataGrid] Add extra left prepend position to the additionalControls API #5394

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
daf5c47
Split up left toolbar positions into leftPrepend and leftAppend
cee-chen Nov 19, 2021
c2794a6
Update documentation
cee-chen Nov 19, 2021
fb8a048
Update changelog entry
cee-chen Nov 19, 2021
d3d9df9
Update API to left with optional object config
cee-chen Nov 22, 2021
12143f7
Update documentation again
cee-chen Nov 22, 2021
e932611
PR feedback
cee-chen Nov 23, 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
1 change: 1 addition & 0 deletions CHANGELOG.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
## [`main`](https://github.com/elastic/eui/tree/main)

- Updated the organization of `EuiDataGrid`'s toolbar/grid controls ([#5334](https://github.com/elastic/eui/pull/5334))
- Added `left.append` and `left.prepend` to `EuiDataGrid`'s `toolbarVisibility.additionalControls` prop [#5394](https://github.com/elastic/eui/pull/5394))

**Bug fixes**

Expand Down
90 changes: 51 additions & 39 deletions src-docs/src/views/datagrid/additional_controls.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -87,9 +87,11 @@ export default () => {
const popoverId = useGeneratedHtmlId({
prefix: 'dataGridAdditionalControlsPopover',
});
const alertAndClosePopover = () => {
const alertAndClosePopover = (position?: string) => {
setPopover(false);
window.alert('This is not a real control.');
window.alert(
`This is not a real control. It was passed into the \`${position}\` position.`
);
};

const [visibleColumns, setVisibleColumns] = useState(() =>
Expand Down Expand Up @@ -128,41 +130,53 @@ export default () => {
}}
toolbarVisibility={{
additionalControls: {
left: (
<EuiPopover
id={popoverId}
button={
<EuiButtonEmpty
size="xs"
iconType="download"
onClick={() => setPopover((open) => !open)}
>
Download
</EuiButtonEmpty>
}
isOpen={isPopoverOpen}
closePopover={() => setPopover(false)}
panelPaddingSize="none"
>
<EuiContextMenuPanel
size="s"
items={[
<EuiContextMenuItem
key="csv"
onClick={alertAndClosePopover}
>
CSV
</EuiContextMenuItem>,
<EuiContextMenuItem
key="jsonedit"
onClick={alertAndClosePopover}
left: {
prepend: (
<EuiButtonEmpty
size="xs"
iconType="document"
color="text"
onClick={() => alertAndClosePopover('left.prepend')}
>
{data.length} results
</EuiButtonEmpty>
),
append: (
<EuiPopover
id={popoverId}
button={
<EuiButtonEmpty
size="xs"
iconType="download"
onClick={() => setPopover((open) => !open)}
>
JSON
</EuiContextMenuItem>,
]}
/>
</EuiPopover>
),
Download
</EuiButtonEmpty>
}
isOpen={isPopoverOpen}
closePopover={() => setPopover(false)}
panelPaddingSize="none"
>
<EuiContextMenuPanel
size="s"
items={[
<EuiContextMenuItem
key="csv"
onClick={() => alertAndClosePopover('left.append')}
>
CSV
</EuiContextMenuItem>,
<EuiContextMenuItem
key="jsonedit"
onClick={() => alertAndClosePopover('left.append')}
>
JSON
</EuiContextMenuItem>,
]}
/>
</EuiPopover>
),
},
right: (
<Fragment>
<EuiToolTip
Expand All @@ -173,9 +187,7 @@ export default () => {
aria-label="Refresh grid data"
size="xs"
iconType="refresh"
onClick={() => {
window.alert('This is not a real control.');
}}
onClick={() => alertAndClosePopover('right')}
/>
</EuiToolTip>
<EuiToolTip content="Inspect grid data">
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/views/datagrid/datagrid_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,6 +28,7 @@ import {
EuiDataGridStyle,
EuiDataGridToolBarVisibilityOptions,
EuiDataGridToolBarAdditionalControlsOptions,
EuiDataGridToolBarAdditionalControlsLeftOptions,
EuiDataGridColumnVisibility,
EuiDataGridColumnActions,
EuiDataGridPopoverContentProps,
Expand Down Expand Up @@ -405,6 +406,7 @@ export const DataGridExample = {
EuiDataGridToolBarVisibilityOptions,
EuiDataGridToolBarVisibilityColumnSelectorOptions,
EuiDataGridToolBarAdditionalControlsOptions,
EuiDataGridToolBarAdditionalControlsLeftOptions,
EuiDataGridPopoverContentProps,
EuiDataGridRowHeightsOptions,
},
Expand Down
73 changes: 50 additions & 23 deletions src-docs/src/views/datagrid/datagrid_styling_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,7 @@ import {
EuiDataGridStyle,
EuiDataGridToolBarVisibilityOptions,
EuiDataGridToolBarAdditionalControlsOptions,
EuiDataGridToolBarAdditionalControlsLeftOptions,
} from '!!prop-loader!../../../../src/components/datagrid/data_grid_types';

const gridSnippet = `<EuiDataGrid
Expand Down Expand Up @@ -98,20 +99,36 @@ const controlsSnippet = `<EuiDataGrid
toolbarVisibility={{
// Use of a fragment for multiple items will insure proper margins
additionalControls: {
left: (
<Fragment>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
New button
</EuiButtonEmpty>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
Another button
</EuiButtonEmpty>
</Fragment>
),
left: {
prepend: (
<Fragment>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
New button
</EuiButtonEmpty>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
Another button
</EuiButtonEmpty>
</Fragment>
),
append: (
<Fragment>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
New button
</EuiButtonEmpty>
<EuiButtonEmpty
size="xs"
onClick={() => {}}>
Another button
</EuiButtonEmpty>
</Fragment>
),
},
right: (
<Fragment>
<EuiToolTip content="Right-side button">
Expand Down Expand Up @@ -261,22 +278,31 @@ export const DataGridStylingExample = {
<>
<p>
Use the <EuiCode>toolbarVisibility.additionalControls</EuiCode> prop
to pass more buttons to the toolbar. It will respect the{' '}
<EuiCode language="js">toolbarVisibility={'{false}'}</EuiCode>{' '}
setting and hide when appropriate.
to pass more buttons to the toolbar.
</p>
<p>
Passing a single node to <EuiCode>additionalControls</EuiCode> will
default to being appended to the left side of the toolbar. To
configure which side of the toolbar your controls display in, pass
an object with either the <EuiCode>left</EuiCode> or{' '}
<EuiCode>right</EuiCode> properties:
default to being placed in the <EuiCode>left.append</EuiCode>{' '}
position of the toolbar. To configure which side of the toolbar your
controls display in, pass an object with the <EuiCode>left</EuiCode>{' '}
or <EuiCode>right</EuiCode> properties:
</p>
<ul>
<li>
<EuiCode>additionalControls.left</EuiCode> appends the passed
custom control into the left side of the toolbar, after the column
& sort controls.
custom control into the left side of the toolbar.
<ul>
<li>
<EuiCode>left.prepend</EuiCode> prepends the passed node into
the left side of the toolbar, before the column & sort
controls.
</li>
<li>
<EuiCode>left.append</EuiCode> appends the passed node into
the left side of the toolbar, after the column & sort
controls.
</li>
</ul>
</li>
<li>
<EuiCode>additionalControls.right</EuiCode> prepends the passed
Expand All @@ -299,6 +325,7 @@ export const DataGridStylingExample = {
EuiDataGrid,
EuiDataGridToolBarVisibilityOptions,
EuiDataGridToolBarAdditionalControlsOptions,
EuiDataGridToolBarAdditionalControlsLeftOptions,
},
demo: <DataGridControls />,
},
Expand Down
Loading