Skip to content

Commit

Permalink
Add new Docs: OverlayPanel
Browse files Browse the repository at this point in the history 
Add: Typescript language property
  • Loading branch information
@habubey
habubey committed Nov 15, 2022
1 parent 6d1de17 commit 4fc8068
Show file tree
Hide file tree
Showing 6 changed files with 501 additions and 735 deletions.
2 changes: 1 addition & 1 deletion components/doc/common/docsectioncode.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ export function DocSectionCode(props) {
)}
{codeMode !== 'basic' && codeLang === 'typescript' && (
<div>
<CodeHighlight>{props.code.typescript}</CodeHighlight>
<CodeHighlight lang={'tsx'}>{props.code.typescript}</CodeHighlight>
</div>
)}
</div>
Expand Down
253 changes: 253 additions & 0 deletions components/doc/overlaypanel/apidoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,253 @@
import Link from 'next/link';
import { CodeHighlight } from '../common/codehighlight';
import { DevelopmentSection } from '../common/developmentsection';
import { DocSectionText } from '../common/docsectiontext';

export function ApiDoc(props) {
return (
<>
<DocSectionText {...props}></DocSectionText>
<h3>Properties</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Default</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>id</td>
<td>string</td>
<td>null</td>
<td>Unique identifier of the element.</td>
</tr>
<tr>
<td>dismissable</td>
<td>boolean</td>
<td>true</td>
<td>Enables to hide the overlay when outside is clicked.</td>
</tr>
<tr>
<td>showCloseIcon</td>
<td>boolean</td>
<td>false</td>
<td>When enabled, displays a close icon at top right corner.</td>
</tr>
<tr>
<td>style</td>
<td>string</td>
<td>null</td>
<td>Inline style of the element.</td>
</tr>
<tr>
<td>className</td>
<td>string</td>
<td>null</td>
<td>Style class of the element.</td>
</tr>
<tr>
<td>appendTo</td>
<td>DOM element | string</td>
<td>document.body</td>
<td>
DOM element instance where the overlay panel should be mounted. Valid values are any DOM Element and 'self'. The <i>self</i> value is used to render a component where it is located.
</td>
</tr>
<tr>
<td>ariaCloseLabel</td>
<td>string</td>
<td>close</td>
<td>Aria label of the close icon.</td>
</tr>
<tr>
<td>breakpoints</td>
<td>object</td>
<td>null</td>
<td>Object literal to define widths per screen size.</td>
</tr>
<tr>
<td>transitionOptions</td>
<td>object</td>
<td>null</td>
<td>
The properties of{' '}
<a href="https://reactcommunity.org/react-transition-group/css-transition" rel="noopener noreferrer" target="_blank">
CSSTransition
</a>{' '}
can be customized, except for "nodeRef" and "in" properties.
</td>
</tr>
</tbody>
</table>
</div>

<h3>Events</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>onShow</td>
<td>-</td>
<td>Callback to invoke when overlay becomes visible.</td>
</tr>
<tr>
<td>onHide</td>
<td>-</td>
<td>Callback to invoke when overlay becomes hidden.</td>
</tr>
</tbody>
</table>
</div>

<h3>Methods</h3>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Parameters</th>
<th>Description</th>
</tr>
</thead>
<tbody>
<tr>
<td>toggle</td>
<td>event: Browser event</td>
<td>Toggles the visiblity of the overlay.</td>
</tr>
<tr>
<td>show</td>
<td>
event: Browser event <br />
target: Optional target if event.target should not be used
</td>
<td>Shows the overlay.</td>
</tr>
<tr>
<td>hide</td>
<td>-</td>
<td>Hides the overlay.</td>
</tr>
</tbody>
</table>
</div>

<h3>Styling</h3>
<p>
Following is the list of structural style classes, for theming classes visit <Link href="/theming"> theming</Link> page.
</p>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Name</th>
<th>Element</th>
</tr>
</thead>
<tbody>
<tr>
<td>p-overlaypanel</td>
<td>Container element.</td>
</tr>
<tr>
<td>p-overlaypanel-content</td>
<td>Content of the panel.</td>
</tr>
<tr>
<td>p-overlaypanel-close</td>
<td>Close icon.</td>
</tr>
</tbody>
</table>
</div>

<h3>Accessibility</h3>
<DevelopmentSection>
<h4>Screen Reader</h4>
<p>
OverlayPanel component uses <i>dialog</i> role and since any attribute is passed to the root element you may define attributes like <i>aria-label</i> or <i>aria-labelledby</i> to describe the popup contents. In addition{' '}
<i>aria-modal</i> is added since focus is kept within the popup.
</p>
<p>
It is recommended to use a trigger component that can be accessed with keyboard such as a button, if not adding <i>tabIndex</i> would be necessary. OverlayPanel adds <i>aria-expanded</i> state attribute and <i>aria-controls</i> to
the trigger so that the relation between the trigger and the popup is defined.
</p>

<h4>OverlayPanel Keyboard Support</h4>
<p>
When the popup gets opened, the first focusable element receives the focus and this can be customized by adding <i>autofocus</i> to an element within the popup.
</p>

<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>tab</i>
</td>
<td>Moves focus to the next the focusable element within the popup.</td>
</tr>
<tr>
<td>
<i>shift</i> + <i>tab</i>
</td>
<td>Moves focus to the previous the focusable element within the popup.</td>
</tr>
<tr>
<td>
<i>escape</i>
</td>
<td>Closes the popup and moves focus to the trigger.</td>
</tr>
</tbody>
</table>
</div>

<h4>Close Button Keyboard Support</h4>
<div className="doc-tablewrapper">
<table className="doc-table">
<thead>
<tr>
<th>Key</th>
<th>Function</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<i>enter</i>
</td>
<td>Closes the popup and moves focus to the trigger.</td>
</tr>
<tr>
<td>
<i>space</i>
</td>
<td>Closes the popup and moves focus to the trigger.</td>
</tr>
</tbody>
</table>
</div>
</DevelopmentSection>
<h3>Dependencies</h3>
<p>None.</p>
</>
);
}
17 changes: 17 additions & 0 deletions components/doc/overlaypanel/importdoc.js
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,17 @@
import { DocSectionText } from '../common/docsectiontext';
import { DocSectionCode } from '../common/docsectioncode';

export function ImportDoc(props) {
const code = {
basic: `
import { OverlayPanel } from 'primereact/overlaypanel';
`
};

return (
<>
<DocSectionText {...props}></DocSectionText>
<DocSectionCode code={code} hideToggleCode hideCodeSandbox />
</>
);
}
Loading

0 comments on commit 4fc8068

Please sign in to comment.