Skip to content
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

Jump to bottom

[OUI Docs] Updated the section drag and drop #514

Merged
merged 2 commits into from
Feb 27, 2023
Merged

[OUI Docs] Updated the section drag and drop #514

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
d74828a
Updated the section drag and drop
AbhishekReddy1127 Feb 23, 2023
a2e3622
Merge branch 'main' into OUI_docs_DnD
seanneumann Feb 27, 2023
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
12 changes: 10 additions & 2 deletions src-docs/src/components/guide_page/guide_page.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,7 @@ const GuidePageComponent = ({
title,
intro,
isBeta,
isExperimental,
playground,
guidelines,
location,
Expand All @@ -32,10 +33,16 @@ const GuidePageComponent = ({
}) => {
const betaBadge = isBeta ? (
<OuiBetaBadge
label="Experimental"
label="Beta"
tooltipContent="This component is still under development and may contain breaking changes in the nearby future."
/>
) : undefined;
const experimentalBadge = isExperimental ? (
<OuiBetaBadge
label="Experimental"
tooltipContent="This module is not GA. Please help us by reporting any bugs."
/>
) : undefined;

const tabs = [
{
Expand Down Expand Up @@ -95,7 +102,7 @@ const GuidePageComponent = ({
restrictWidth
pageTitle={
<>
{title} {betaBadge}
{title} {betaBadge || experimentalBadge}
</>
}
tabs={renderTabs()}>
Expand Down Expand Up @@ -131,6 +138,7 @@ GuidePageComponent.propTypes = {
intro: PropTypes.node,
componentLinkTo: PropTypes.string,
isBeta: PropTypes.bool,
isExperimental: PropTypes.bool,
playground: PropTypes.node,
guidelines: PropTypes.node,
location: PropTypes.object,
Expand Down
2 changes: 2 additions & 0 deletions src-docs/src/routes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -257,6 +257,7 @@ const createExample = (example, customTitle) => {
intro,
sections,
beta,
isExperimental,
isNew,
playground,
guidelines,
Expand Down Expand Up @@ -288,6 +289,7 @@ const createExample = (example, customTitle) => {
title={title}
intro={intro}
isBeta={beta}
isExperimental={isExperimental}
playground={playgroundComponent}
guidelines={guidelines}>
{renderedSections}
Expand Down
109 changes: 62 additions & 47 deletions src-docs/src/views/drag_and_drop/drag_and_drop_example.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -57,57 +57,72 @@ const dragAndDropComplexHtml = renderToHtml(DragAndDropComplex);

export const DragAndDropExample = {
title: 'Drag and drop',
beta: true,
intro: (
<React.Fragment>
<OuiText>
<p>
An extension of{' '}
<OuiLink href="https://github.com/atlassian/react-beautiful-dnd">
react-beautiful-dnd
</OuiLink>{' '}
with a compatible API and built-in style opinions. Functionality
results from 3 components working together:
</p>
<ul>
<li>
<OuiCode>{'<OuiDragDropContext />'}</OuiCode>: Section of your
application containing the draggable elements and the drop targets.
</li>
<li>
<OuiCode>{'<OuiDroppable />'}</OuiCode>: Area into which items can
be dropped. Contains one or more{' '}
<OuiCode>{'<OuiDraggable />'}</OuiCode>.
</li>
<li>
<OuiCode>{'<OuiDraggable />'}</OuiCode>: Items that can be dragged.
Must be part of an <OuiCode>{'<OuiDroppable />'}</OuiCode>
</li>
</ul>
</OuiText>
isExperimental: true,
sections: [
{
source: [
{
type: GuideSectionTypes.JS,
code: dragAndDropBareSource,
},
{
type: GuideSectionTypes.HTML,
code: dragAndDropBareHtml,
},
],
text: (
<React.Fragment>
<OuiText>
<p>
An extension of{' '}
<OuiLink href="https://github.com/atlassian/react-beautiful-dnd">
react-beautiful-dnd
</OuiLink>{' '}
with a compatible API and built-in style opinions. Functionality
results from 3 components working together:
</p>
<ul>
<li>
<OuiCode>{'<OuiDragDropContext />'}</OuiCode>: Section of your
application containing the draggable elements and the drop
targets.
</li>
<li>
<OuiCode>{'<OuiDroppable />'}</OuiCode>: Area into which items
can be dropped. Contains one or more{' '}
<OuiCode>{'<OuiDraggable />'}</OuiCode>.
</li>
<li>
<OuiCode>{'<OuiDraggable />'}</OuiCode>: Items that can be
dragged. Must be part of an{' '}
<OuiCode>{'<OuiDroppable />'}</OuiCode>
</li>
</ul>
</OuiText>

<OuiSpacer />
<OuiSpacer />

<OuiCallOut title="Consider your users, use case" color="warning">
<p>
Drag and drop interfaces are not well-adapted to many cases, and may
be less suitable than other form types for data operations. For
instance, drag and drop interaction relies heavily on spatial
orientation that may not be entirelty valid to all users (e.g., screen
readers as the sole source of information). Similarly, users
navigating by keyboard may not be afforded nuanced, dual-axis drag
item manipulation.
</p>
<p>
{`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
<OuiCallOut title="Consider your users, use case" color="warning">
<p>
Drag and drop interfaces are not well-adapted to many cases, and
may be less suitable than other form types for data operations.
For instance, drag and drop interaction relies heavily on spatial
orientation that may not be entirelty valid to all users (e.g.,
screen readers as the sole source of information). Similarly,
users navigating by keyboard may not be afforded nuanced,
dual-axis drag item manipulation.
</p>
<p>
{`OUI (largely due to the great work already in react-beautiful-dnd) has and will continue to ensure accessibility where possible.
With that in mind, keep your users' working context in mind.`}
</p>
</OuiCallOut>
</React.Fragment>
),
sections: [
</p>
</OuiCallOut>
</React.Fragment>
),
props: { OuiDragDropContext, OuiDraggable, OuiDroppable },
demo: <DragAndDropBare />,
},
{
title: 'Just the facts',
source: [
{
type: GuideSectionTypes.JS,
Expand Down