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

Allow a custom title for close button to be provided to Dialogs #1460

Merged
merged 1 commit into from
Feb 13, 2024
Merged

Allow a custom title for close button to be provided to Dialogs #1460

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
11 changes: 7 additions & 4 deletions src/components/CloseableContext.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,10 +1,13 @@
import { createContext } from 'preact';

/**
* Provide a close handler to descendants. This can allow, e.g., button-like
* components to correctly close a parent dialog or panel.
*/
export type CloseableInfo = {
/** The close button title. Defaults to "Close" */
title?: string;

/**
* Provide a close handler to descendants. This can allow, e.g., button-like
* components to correctly close a parent dialog or panel.
*/
onClose: (() => void) | undefined;
};

Expand Down
5 changes: 5 additions & 0 deletions src/components/feedback/Dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -33,6 +33,9 @@ type ComponentProps = {
*/
onClose?: () => void;

/** Accessible title for the close button */
closeTitle?: string;

/**
* Element that should take focus when the Dialog is first rendered. When not
* provided ("auto"), the dialog's outer element will take focus. Setting this
Expand Down Expand Up @@ -89,6 +92,7 @@ export default function Dialog({
classes,
elementRef,
onClose,
closeTitle,

...rest
}: DialogProps) {
Expand Down Expand Up @@ -227,6 +231,7 @@ export default function Dialog({
// Provide a close handler to descendant components
const closeableContext: CloseableInfo = {
onClose: onClose ? closeHandler : undefined,
title: closeTitle,
};

return (
Expand Down
10 changes: 5 additions & 5 deletions src/components/input/CloseButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,22 +22,22 @@ export default function CloseButton({
classes,
elementRef,

title = 'Close',

title,
onClick,
...iconButtonProps
}: CloseButtonProps) {
const closeableContext = useContext(CloseableContext);
// Any provided `onClick` is prioritized, but also check to see if there is a
// close handler provided by a `CloseableContext`
// Provided `title` and `onClick` are prioritized, but fall back to values
// from the `CloseableContext`
const buttonTitle = title ?? closeableContext?.title ?? 'Close';
const closeHandler = onClick ?? closeableContext?.onClose;

return (
<IconButton
data-component="CloseButton"
elementRef={downcastRef(elementRef)}
icon={CancelIcon}
title={title}
title={buttonTitle}
classes={classes}
{...iconButtonProps}
onClick={closeHandler}
Expand Down
57 changes: 27 additions & 30 deletions src/pattern-library/components/patterns/feedback/DialogPage.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -225,7 +225,6 @@ export default function DialogPage() {
buttons={<DialogButtons />}
icon={EditIcon}
initialFocus={inputRef}
onClose={() => {}}
title="Basic dialog"
>
<p>
Expand Down Expand Up @@ -256,11 +255,7 @@ export default function DialogPage() {
used.
</p>
<Library.Demo title="Dialog with custom layout" withSource>
<Dialog_
onClose={() => {}}
variant="custom"
transitionComponent={Slider}
>
<Dialog_ variant="custom" transitionComponent={Slider}>
<div className="flex gap-x-3 items-center border p-3 bg-white">
<div className="grow">Custom dialog content</div>
<CloseButton />
Expand Down Expand Up @@ -327,7 +322,6 @@ export default function DialogPage() {
>
<Dialog_
closeOnClickAway
onClose={() => {}}
title="Dialog that closes when there are external clicks"
>
<p>This dialog will close if you click outside of it</p>
Expand All @@ -354,7 +348,7 @@ export default function DialogPage() {
title="Dialog with close-on-Escape behavior"
withSource
>
<Dialog_ closeOnEscape onClose={() => {}} title="Close on ESC">
<Dialog_ closeOnEscape title="Close on ESC">
<p>
This dialog will close if you press <kbd>Escape</kbd>.
</p>
Expand All @@ -380,11 +374,7 @@ export default function DialogPage() {
title="Dialog that closes on external focus events"
withSource
>
<Dialog_
closeOnFocusAway
onClose={() => {}}
title="Close on Away Focus"
>
<Dialog_ closeOnFocusAway title="Close on Away Focus">
<p>This dialog will close if you focus outside of it</p>
</Dialog_>
</Library.Demo>
Expand Down Expand Up @@ -442,6 +432,29 @@ export default function DialogPage() {
</Library.Demo>
</Library.Example>

<Library.Example title="closeTitle">
<Library.Info>
<Library.InfoItem label="description">
Determine the accessible title to be set on the close button
when <code>onClose</code> has also been provided.
</Library.InfoItem>
<Library.InfoItem label="type">
<code>string</code>
</Library.InfoItem>
<Library.InfoItem label="default">
<code>{`'Close'`}</code>
</Library.InfoItem>
</Library.Info>
<Library.Demo title="Custom close title" withSource>
<Dialog_ title="Custom close title" closeTitle="Custom text here">
<p>
This dialog has a custom title on the close button. Hover over
it to see it.
</p>
</Dialog_>
</Library.Demo>
</Library.Example>

<Library.Example title="restoreFocus">
<Library.Info>
<Library.InfoItem label="description">
Expand All @@ -460,12 +473,7 @@ export default function DialogPage() {
title="Dialog with focus restoration on close"
withSource
>
<Dialog_
_alwaysShowButton
restoreFocus
onClose={() => {}}
title="Restore focus"
>
<Dialog_ _alwaysShowButton restoreFocus title="Restore focus">
<p>
This dialog will restore focus to the previously-focused
element on close.
Expand Down Expand Up @@ -553,7 +561,6 @@ export default function DialogPage() {
buttons={<DialogButtons />}
icon={EditIcon}
initialFocus={inputRef}
onClose={() => {}}
title="Basic dialog"
>
<p>This is a basic ModalDialog.</p>
Expand Down Expand Up @@ -584,7 +591,6 @@ export default function DialogPage() {
<Library.Demo title="Modal with overflowing content" withSource>
<ModalDialog_
buttons={<DialogButtons />}
onClose={() => {}}
title="Modal with long content"
>
<LoremIpsum size="lg" />
Expand All @@ -602,7 +608,6 @@ export default function DialogPage() {
<ModalDialog_
buttons={<DialogButtons />}
classes="h-[25rem]"
onClose={() => {}}
title="Modal with tabs and data table"
scrollable={false}
>
Expand Down Expand Up @@ -684,7 +689,6 @@ export default function DialogPage() {
title="Modal with a fixed height"
buttons={<DialogButtons />}
classes="h-[25rem]"
onClose={() => {}}
>
<p>
This ModalDialog has a height of <code>25rem</code>.
Expand All @@ -700,7 +704,6 @@ export default function DialogPage() {
title="ModalDialog with a fixed height"
buttons={<DialogButtons />}
classes="h-[25rem]"
onClose={() => {}}
>
<p>
This ModalDialog has a height of <code>25rem</code> and long
Expand All @@ -717,7 +720,6 @@ export default function DialogPage() {
<ModalDialog_
title="Modal with minimum height set on content"
buttons={<DialogButtons />}
onClose={() => {}}
>
<div className="min-h-[15rem]">
<p>
Expand All @@ -735,7 +737,6 @@ export default function DialogPage() {
<ModalDialog_
title="Modal with a minimum height and tall content"
buttons={<DialogButtons />}
onClose={() => {}}
>
<div className="min-h-[15rem] space-y-3">
<p>
Expand Down Expand Up @@ -851,7 +852,6 @@ export default function DialogPage() {
<Library.Demo title="size='sm'" withSource>
<ModalDialog_
buttons={<DialogButtons />}
onClose={() => {}}
title="Small modal"
size="sm"
>
Expand All @@ -862,7 +862,6 @@ export default function DialogPage() {
<Library.Demo title="size='md' (default)" withSource>
<ModalDialog_
buttons={<DialogButtons />}
onClose={() => {}}
title="Medium-size modal"
size="md"
>
Expand All @@ -873,7 +872,6 @@ export default function DialogPage() {
<Library.Demo title="size='lg'" withSource>
<ModalDialog_
buttons={<DialogButtons />}
onClose={() => {}}
title="Wide modal"
size="lg"
>
Expand All @@ -885,7 +883,6 @@ export default function DialogPage() {
<ModalDialog_
buttons={<DialogButtons />}
classes="w-[40em] h-[80vh] top-[10vh]"
onClose={() => {}}
title="Custom-size modal"
size="custom"
>
Expand Down
Loading