feat(react-dialog): Dialog initial implementation
#23933
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,8 @@ | ||
| import { Dialog } from '@fluentui/react-dialog'; | ||
|
|
||
| // eslint-disable-next-line no-console | ||
| console.log(Dialog); | ||
|
|
||
| export default { | ||
| name: 'Dialog', | ||
| }; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1 +1,3 @@ | ||
| /** Jest test setup file. */ | ||
|
|
||
| require('@testing-library/jest-dom'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| import baseConfig from '@fluentui/scripts/cypress.config'; | ||
|
|
||
| export default baseConfig; |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| import * as React from 'react'; | ||
| import { mount as mountBase } from '@cypress/react'; | ||
|
|
||
| import { FluentProvider } from '@fluentui/react-provider'; | ||
| import { teamsLightTheme } from '@fluentui/react-theme'; | ||
|
|
||
| import { Dialog } from '@fluentui/react-dialog'; | ||
|
|
||
| const mount = (element: JSX.Element) => mountBase(<FluentProvider theme={teamsLightTheme}>{element}</FluentProvider>); | ||
|
|
||
| describe('Dialog', () => { | ||
| it('should be closed by default', () => { | ||
| mount( | ||
| <Dialog> | ||
| <div> | ||
| <button id="close-btn">close</button> | ||
| </div> | ||
| </Dialog>, | ||
| ); | ||
| cy.get('#close-btn').should('not.exist'); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export const dialogSelector = ''; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| { | ||
| "extends": "../tsconfig.json", | ||
| "compilerOptions": { | ||
| "isolatedModules": false, | ||
| "types": ["node", "cypress", "cypress-storybook/cypress", "cypress-real-events"], | ||
| "lib": ["ES2019", "dom"] | ||
| }, | ||
| "include": ["**/*.ts", "**/*.tsx"] | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,19 +1,37 @@ | ||
| import * as React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
| import { Dialog } from './Dialog'; | ||
| import { DialogProps } from './Dialog.types'; | ||
| import { isConformant } from '../../common/isConformant'; | ||
|
|
||
| describe('Dialog', () => { | ||
| isConformant<DialogProps>({ | ||
| Component: Dialog, | ||
| displayName: 'Dialog', | ||
| disabledTests: [ | ||
| // Dialog does not render DOM elements | ||
| 'component-handles-ref', | ||
| 'component-has-root-ref', | ||
| 'component-handles-classname', | ||
| 'component-has-static-classname', | ||
| 'component-has-static-classnames-object', | ||
| 'component-has-static-classname-exported', | ||
| // TODO: | ||
| // onOpenChange: A second (data) argument cannot be a union | ||
| 'consistent-callback-args', | ||
| // Dialog does not have own styles | ||
| 'make-styles-overrides-win', | ||
| ], | ||
| }); | ||
|
|
||
| // TODO add more tests here, and create visual regression tests in /apps/vr-tests | ||
|
|
||
| it('renders a default state', () => { | ||
| const result = render( | ||
| <Dialog> | ||
| <div>Default Dialog</div> | ||
| </Dialog>, | ||
| ); | ||
| expect(result.container).toMatchSnapshot(); | ||
| }); | ||
| }); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,17 +1,80 @@ | ||
| import type * as React from 'react'; | ||
| import type { ComponentProps, ComponentState, Slot } from '@fluentui/react-utilities'; | ||
| import type { DialogContextValue } from '../../contexts/dialogContext'; | ||
|
|
||
| export type DialogSlots = { | ||
| /** | ||
| * Dimmed background of dialog. | ||
| * The default overlay is rendered as a `<div>` with styling. | ||
| * This slot expects a `<div>` element which will replace the default overlay. | ||
| * The overlay should have `aria-hidden="true"`. | ||
| */ | ||
| overlay?: Slot<'div'>; | ||
| }; | ||
|
|
||
| export type DialogOpenChangeEvent = React.KeyboardEvent | React.MouseEvent | KeyboardEvent; | ||
|
|
||
| export type DialogOpenChangeData = | ||
| | { type: 'escapeKeyDown'; open: boolean; event: React.KeyboardEvent } | ||
| /** | ||
| * document escape keydown defers from internal escape keydown events because of the synthetic event API | ||
| */ | ||
| | { type: 'documentEscapeKeyDown'; open: boolean; event: KeyboardEvent } | ||
| | { type: 'overlayClick'; open: boolean; event: React.MouseEvent } | ||
| | { type: 'triggerClick'; open: boolean; event: React.MouseEvent }; | ||
|
Comment on lines
+18
to
+24
Member
There was a problem hiding this comment. Can you please clarify why <Dialog onOpenChange={(event, data) => {
// What `event` should I use?
console.log(event, data.event)
}} />IMO this looks redundant and confusing... |
||
|
|
||
| export type DialogModalType = 'modal' | 'non-modal' | 'alert'; | ||
|
|
||
| export type DialogContextValues = { | ||
| dialog: DialogContextValue; | ||
| }; | ||
|
|
||
| export type DialogProps = ComponentProps<Partial<DialogSlots>> & { | ||
| /** | ||
| * Dialog variations. | ||
| * | ||
| * `modal`: When this type of dialog is open, the rest of the page is dimmed out and cannot be interacted with. | ||
| * The tab sequence is kept within the dialog and moving the focus outside | ||
| * the dialog will imply closing it. This is the default type of the component. | ||
| * | ||
| * `non-modal`: When a non-modal dialog is open, the rest of the page is not dimmed out | ||
| * and users can interact with the rest of the page. | ||
| * This also implies that the tab focus can move outside the dialog when it reaches the last focusable element. | ||
| * | ||
| * `alert`: is a special type of modal dialogs that interrupts the user's workflow | ||
ling1726 marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| * to communicate an important message or ask for a decision. | ||
| * Unlike a typical modal dialog, the user must take an action through the options given to dismiss the dialog, | ||
| * and it cannot be dismissed through the dimmed background or escape key. | ||
| * | ||
| * @default modal | ||
| */ | ||
| modalType?: DialogModalType; | ||
| /** | ||
| * Controls the open state of the dialog | ||
| * @default false | ||
| */ | ||
| open?: boolean; | ||
| /** | ||
| * Default value for the uncontrolled open state of the dialog. | ||
| * @default false | ||
| */ | ||
| defaultOpen?: boolean; | ||
bsunderhus marked this conversation as resolved.
Show resolved
Hide resolved
|
||
| /** | ||
| * Callback fired when the component changes value from open state. | ||
| * | ||
| * @param event - a React's Synthetic event or a KeyboardEvent in case of `documentEscapeKeyDown` | ||
| * @param data - A data object with relevant information, such as open value and type | ||
| */ | ||
| onOpenChange?: (event: DialogOpenChangeEvent, data: DialogOpenChangeData) => void; | ||
| /** | ||
| * Can contain two children including {@link DialogTrigger} and {@link DialogContent}. | ||
| * Alternatively can only contain {@link DialogContent} if using trigger outside dialog, or controlling state. | ||
| */ | ||
| children: [JSX.Element, JSX.Element] | JSX.Element; | ||
| }; | ||
|
|
||
| export type DialogState = ComponentState<DialogSlots> & | ||
| DialogContextValue & { | ||
| content: React.ReactNode; | ||
| trigger: React.ReactNode; | ||
| }; | ||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,3 @@ | ||
| // Jest Snapshot v1, https://goo.gl/fbAQLP | ||
|
|
||
| exports[`Dialog renders a default state 1`] = `<div />`; |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.