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

[TrapFocus] Add documentation #22062

Merged
merged 6 commits into from
Aug 8, 2020
Merged

[TrapFocus] Add documentation #22062

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
070deb1
[TrapFocus] Add documentation
oliviertassinari Aug 3, 2020
f19b53b
Matt code review
oliviertassinari Aug 6, 2020
4229f34
Matt code review 2
oliviertassinari Aug 6, 2020
f74375f
lower case aria
oliviertassinari Aug 6, 2020
c6db23d
sebastian's review
oliviertassinari Aug 6, 2020
646f0a5
sebastian's review
oliviertassinari Aug 7, 2020
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
4 changes: 4 additions & 0 deletions docs/pages/api-docs/unstable-trap-focus.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,3 +37,7 @@ Utility component that locks focus inside the component.
The component cannot hold a ref.


## Demos

- [Trap Focus](/components/trap-focus/)

20 changes: 20 additions & 0 deletions docs/pages/components/trap-focus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
import { prepareMarkdown } from 'docs/src/modules/utils/parseMarkdown';

const pageFilename = 'components/trap-focus';
const requireDemo = require.context('docs/src/pages/components/trap-focus', false, /\.(js|tsx)$/);
const requireRaw = require.context(
'!raw-loader!../../src/pages/components/trap-focus',
false,
/\.(js|md|tsx)$/,
);

export default function Page({ demos, docs }) {
return <MarkdownDocs demos={demos} docs={docs} requireDemo={requireDemo} />;
}

Page.getInitialProps = () => {
const { demos, docs } = prepareMarkdown({ pageFilename, requireRaw });
return { demos, docs };
};
1 change: 1 addition & 0 deletions docs/src/pages.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -124,6 +124,7 @@ const pages = [
{ pathname: '/components/speed-dial' },
{ pathname: '/components/timeline' },
{ pathname: '/components/toggle-button' },
{ pathname: '/components/trap-focus' },
{ pathname: '/components/tree-view' },
],
},
Expand Down
26 changes: 26 additions & 0 deletions docs/src/pages/components/trap-focus/BasicTrapFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function BasicTrapFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus open isEnabled={() => true} getDoc={() => document}>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
oliviertassinari marked this conversation as resolved.
Show resolved Hide resolved
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
26 changes: 26 additions & 0 deletions docs/src/pages/components/trap-focus/BasicTrapFocus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function BasicTrapFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus open isEnabled={() => true} getDoc={() => document}>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/DisableEnforceFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function DisableEnforceFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
disableEnforceFocus
open
isEnabled={() => true}
getDoc={() => document}
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/DisableEnforceFocus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function DisableEnforceFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
disableEnforceFocus
open
isEnabled={() => true}
getDoc={() => document}
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/DisableRestoreFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function DisableRestoreFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
disableRestoreFocus
open
isEnabled={() => true}
getDoc={() => document}
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/DisableRestoreFocus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function DisableRestoreFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
disableRestoreFocus
open
isEnabled={() => true}
getDoc={() => document}
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/LazyTrapFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function LazyTrapFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
open
isEnabled={() => true}
getDoc={() => document}
disableAutoFocus
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
31 changes: 31 additions & 0 deletions docs/src/pages/components/trap-focus/LazyTrapFocus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,31 @@
import * as React from 'react';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function LazyTrapFocus() {
const [open, setOpen] = React.useState(false);
return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus
open
isEnabled={() => true}
getDoc={() => document}
disableAutoFocus
>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<input aria-label="last name" placeholder="Last name" />
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
</div>
);
}
33 changes: 33 additions & 0 deletions docs/src/pages/components/trap-focus/PortalTrapFocus.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
import React from 'react';
import Portal from '@material-ui/core/Portal';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function PortalTrapFocus() {
const [open, setOpen] = React.useState(false);
const [container, setContainer] = React.useState(null);

return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus open isEnabled={() => true} getDoc={() => document}>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<Portal container={container}>
<input aria-label="last name" placeholder="Last name" />
</Portal>
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}

<div ref={setContainer} />
</div>
);
}
32 changes: 32 additions & 0 deletions docs/src/pages/components/trap-focus/PortalTrapFocus.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,32 @@
import React from 'react';
import Portal from '@material-ui/core/Portal';
import TrapFocus from '@material-ui/core/Unstable_TrapFocus';

export default function PortalTrapFocus() {
const [open, setOpen] = React.useState(false);
const [container, setContainer] = React.useState<HTMLElement | null>(null);

return (
<div>
<button type="button" onClick={() => setOpen(true)}>
Open
</button>
<br />
{open && (
<TrapFocus open isEnabled={() => true} getDoc={() => document}>
<div tabIndex={-1}>
<h3>Quick form</h3>
<input aria-label="first name" placeholder="First name" />
<Portal container={container}>
<input aria-label="last name" placeholder="Last name" />
</Portal>
<button type="button" onClick={() => setOpen(false)}>
Close
</button>
</div>
</TrapFocus>
)}
<div ref={setContainer} />
</div>
);
}
Loading