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

[core] feat(Dialog): add containerRef prop #5314

Merged
merged 9 commits into from
May 27, 2022
Merged

[core] feat(Dialog): add containerRef prop #5314

Show file tree
Hide file tree
Changes from 8 commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
9593fb4
added a ref prop to Dialog
dlichen May 23, 2022
eb5cf57
fixed comment
dlichen May 23, 2022
7ecc68e
Update packages/core/src/components/dialog/dialog.tsx
dlichen May 24, 2022
ea49086
Merge pull request #1 from palantir/develop
dlichen May 24, 2022
99c2498
Merge branch 'develop' into dlichen/addRefToDialog
dlichen May 24, 2022
cb17689
fixing something
dlichen May 24, 2022
897e71b
just pushing the test for the pr's sake... cannot figure out yarn tes…
dlichen May 24, 2022
fb004b1
added timeout for lifecycle
dlichen May 25, 2022
9fd5ae0
Fix dialog tests
adidahiya May 27, 2022
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
9 changes: 7 additions & 2 deletions packages/core/src/components/dialog/dialog.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@
import classNames from "classnames";
import * as React from "react";

import { AbstractPureComponent2, Classes } from "../../common";
import { AbstractPureComponent2, Classes, IRef } from "../../common";
import * as Errors from "../../common/errors";
import { DISPLAYNAME_PREFIX, MaybeElement, Props } from "../../common/props";
import { uniqueId } from "../../common/utils";
Expand Down Expand Up @@ -80,6 +80,11 @@ export interface IDialogProps extends OverlayableProps, IBackdropProps, Props {
*/
transitionName?: string;

/**
* Ref supplied to the `Classes.DIALOG_CONTAINER` element.
*/
containerRef?: IRef<HTMLDivElement>;

/**
* ID of the element that contains title or label text for this dialog.
*
Expand Down Expand Up @@ -114,7 +119,7 @@ export class Dialog extends AbstractPureComponent2<DialogProps> {
public render() {
return (
<Overlay {...this.props} className={Classes.OVERLAY_SCROLL_CONTAINER} hasBackdrop={true}>
<div className={Classes.DIALOG_CONTAINER}>
<div className={Classes.DIALOG_CONTAINER} ref={this.props.containerRef}>
<div
className={classNames(Classes.DIALOG, this.props.className)}
role="dialog"
Expand Down
12 changes: 12 additions & 0 deletions packages/core/test/dialog/dialogTests.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -192,6 +192,18 @@ describe("<Dialog>", () => {
// test existence here because id is generated
assert.notExists(dialog.find(".no-default-if-no-title").hostNodes().prop("aria-labelledby"));
});

it("supports ref objects attached to container", () => {
adidahiya marked this conversation as resolved.
Show resolved Hide resolved
const containerRef = React.createRef<HTMLDivElement>();
mount(
<Dialog containerRef={containerRef} usePortal={false}>
adidahiya marked this conversation as resolved.
Show resolved Hide resolved
{createDialogContents()}
</Dialog>,
);

// wait for the whole lifecycle to run
setTimeout(() => assert.isTrue(containerRef.current?.classList.contains(Classes.DIALOG_CONTAINER)), 0);
});
});

// everything else about Dialog is tested by Overlay
Expand Down