Skip to content

Commit

Permalink
docs: update copy and examples
Browse files Browse the repository at this point in the history
  • Loading branch information
@mgadewoll
mgadewoll committed Oct 1, 2024
1 parent 4828d33 commit f2261ea
Show file tree
Hide file tree
Showing 3 changed files with 143 additions and 131 deletions.
14 changes: 7 additions & 7 deletions packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_example.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -375,13 +375,13 @@ export const DragAndDropExample = {
</p>
<EuiCallOut color="warning" title="Style inheritance">
<p>
If the styling of the <strong>EuiDraggable</strong> content is
relative to an outer scope component, the styling won't be applied
whiled dragging it when using <EuiCode>usePortal</EuiCode>. This
is because due to the changed position in the DOM which changes
previous hierarchical relations to other ancestor elements. To
prevent this from happening, we recommend to apply styling from
within the <strong>EuiDraggable</strong> scope.
If the styling of the your draggable content is scoped to a parent
component, the styling won't be applied while dragging it when
using <EuiCode>usePortal</EuiCode>. This is due to the portalled
position in the DOM, which changes previous hierarchical relations
to other ancestor elements. To prevent this from happening, we
recommend applying styling from within the{' '}
<strong>EuiDraggable</strong> scope without any parent selectors.
</p>
</EuiCallOut>
</>
Expand Down
123 changes: 64 additions & 59 deletions packages/eui/src-docs/src/views/drag_and_drop/drag_and_drop_portal.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import React, { useState } from 'react';
import React, { FunctionComponent, ReactElement, useState } from 'react';
import {
EuiButton,
EuiDragDropContext,
Expand All @@ -17,7 +17,7 @@ import {
euiDragDropReorder,
} from '../../../../src/components';
import { htmlIdGenerator } from '../../../../src/services';
import { OnDragEndResponder } from '@hello-pangea/dnd';
import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd';

const makeId = htmlIdGenerator();

Expand All @@ -29,6 +29,17 @@ const makeList = (number: number, start = 1) =>
};
});

const DragContainer: FunctionComponent<{
children: ReactElement | ReactElement[] | DroppableProps['children'];
onDragEnd: OnDragEndResponder;
}> = ({ children, onDragEnd }) => (
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m">
{children}
</EuiDroppable>
</EuiDragDropContext>
);

export default () => {
const [isFlyoutOpen, setFlyoutOpen] = useState(false);
const [isModalOpen, setModalOpen] = useState(false);
Expand Down Expand Up @@ -63,26 +74,24 @@ export default () => {
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
<DragContainer onDragEnd={onDragEnd}>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiFlyoutBody>
</EuiFlyout>
)}
Expand All @@ -97,26 +106,24 @@ export default () => {
</EuiTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
<DragContainer onDragEnd={onDragEnd}>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiModalBody>
</EuiModal>
)}
Expand All @@ -134,7 +141,7 @@ export default () => {
panelPaddingSize="none"
panelProps={{ css: { inlineSize: 200 } }}
>
<EuiDragDropContext
<DragContainer
onDragEnd={({ source, destination }) => {
if (source && destination) {
const items = euiDragDropReorder(
Expand All @@ -146,22 +153,20 @@ export default () => {
}
}}
>
<EuiDroppable droppableId="droppableInPopover" spacing="m">
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiPopover>
</>
);
Expand Down
137 changes: 72 additions & 65 deletions packages/website/docs/02_components/display/drag_and_drop/overview.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -132,19 +132,19 @@ the visual changes with drop-to-remove interactions.
This positioning logic does not work as expected when used inside of containers that have their own
[stacking context](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_positioned_layout/Understanding_z-index/Stacking_context).

To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal use the prop `usePortal` on **EuiDraggable** components.
To ensure dragging works as expected inside e.g. **EuiFlyout** or **EuiModal** use the prop `usePortal` on **EuiDraggable** components.
This will render the currently dragged element inside a portal appended to the document body (or wherever
**EuiPortal** is configured to `insert` to by default).

:::warning
If the styling of the **EuiDraggable** content is relative to an outer scope component, the styling won't be applied
whiled dragging it when using **usePortal**. This is because due to the changed position in the DOM which changes
previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend to apply
styling from within the **EuiDraggable** scope.
If the styling of the your draggable content is scoped to a parent component, the styling won't be applied
while dragging it when using `usePortal`. This is due to the portalled position in the DOM, which changes
previous hierarchical relations to other ancestor elements. To prevent this from happening, we recommend
applying styling from within the **EuiDraggable** scope without any parent selectors.
:::

```tsx interactive
import React, { useState } from 'react';
import React, { FunctionComponent, ReactElement, useState } from 'react';
import {
EuiButton,
EuiCode,
Expand All @@ -163,6 +163,7 @@ import {
euiDragDropReorder,
htmlIdGenerator
} from '@elastic/eui';
import { DroppableProps, OnDragEndResponder } from '@hello-pangea/dnd';

const makeId = htmlIdGenerator();

Expand All @@ -174,6 +175,17 @@ const makeList = (number, start = 1) =>
};
});

const DragContainer: FunctionComponent<{
children: ReactElement | ReactElement[] | DroppableProps['children'];
onDragEnd: OnDragEndResponder;
}> = ({ children, onDragEnd }) => (
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m">
{children}
</EuiDroppable>
</EuiDragDropContext>
);

export default () => {
const [isFlyoutOpen, setFlyoutOpen] = useState(false);
const [isModalOpen, setModalOpen] = useState(false);
Expand All @@ -197,36 +209,35 @@ export default () => {
<EuiButton onClick={() => setModalOpen(!isModalOpen)}>
Toggle modal
</EuiButton>

{isFlyoutOpen && (
<EuiFlyout onClose={() => setFlyoutOpen(false)}>
<EuiFlyoutHeader>
<EuiTitle size="s">
<h2>
Portalled <EuiCode>EuiDraggable</EuiCode> items
Portalled <strong>EuiDraggable</strong> items
</h2>
</EuiTitle>
</EuiFlyoutHeader>
<EuiFlyoutBody>
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
<DragContainer onDragEnd={onDragEnd}>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiFlyoutBody>
</EuiFlyout>
)}
Expand All @@ -236,31 +247,29 @@ export default () => {
<EuiModalHeader>
<EuiTitle size="s">
<h2>
Portalled <EuiCode>EuiDraggable</EuiCode> items
Portalled <strong>EuiDraggable</strong> items
</h2>
</EuiTitle>
</EuiModalHeader>
<EuiModalBody>
<EuiDragDropContext onDragEnd={onDragEnd}>
<EuiDroppable droppableId="DROPPABLE_AREA" spacing="m" withPanel>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
<DragContainer onDragEnd={onDragEnd}>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>
{content}
{state.isDragging && ' ✨'}
</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiModalBody>
</EuiModal>
)}
Expand All @@ -278,7 +287,7 @@ export default () => {
panelPaddingSize="none"
panelProps={{ css: { inlineSize: 200 } }}
>
<EuiDragDropContext
<DragContainer
onDragEnd={({ source, destination }) => {
if (source && destination) {
const items = euiDragDropReorder(
Expand All @@ -290,22 +299,20 @@ export default () => {
}
}}
>
<EuiDroppable droppableId="droppableInPopover" spacing="m">
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
)}
</EuiDraggable>
))}
</EuiDroppable>
</EuiDragDropContext>
{list.map(({ content, id }, idx) => (
<EuiDraggable
spacing="m"
key={id}
index={idx}
draggableId={id}
usePortal
>
{(provided, state) => (
<EuiPanel hasShadow={state.isDragging}>{content}</EuiPanel>
)}
</EuiDraggable>
))}
</DragContainer>
</EuiPopover>
</>
);
Expand Down

0 comments on commit f2261ea

Please sign in to comment.