Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Binary file not shown.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
2 changes: 1 addition & 1 deletion docs/content/Dialog.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ title: Dialog
status: Alpha
---

import data from '../../src/Dialog/Dialog.docs.json'
import data from '../../src/Dialog.docs.json'

The dialog component is used for all modals. It renders on top of the rest of the app with an overlay.

Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,10 @@
---
title: Dialog v2
componentId: dialog_2
componentId: dialog
status: Draft
a11yReviewed: false
description: Use an underlined nav to allow tab like navigation with overflow behaviour in your UI.
source: https://github.com/primer/react/tree/main/src/Dialog2
storybook: '/react/storybook/?path=/story/drafts-components-dialog--default'
---

import data from '../../../src/Dialog2/Dialog.docs.json'
import data from '../../../src/Dialog/Dialog.docs.json'

```js
import {Dialog} from '@primer/react/drafts'
Expand Down
2 changes: 1 addition & 1 deletion docs/src/@primer/gatsby-theme-doctocat/nav.yml
Original file line number Diff line number Diff line change
Expand Up @@ -159,7 +159,7 @@
- title: Drafts
children:
- title: Dialog v2
url: /drafts/Dialog2
url: /drafts/Dialog
- title: InlineAutocomplete
url: /drafts/InlineAutocomplete
- title: MarkdownEditor
Expand Down
131 changes: 0 additions & 131 deletions e2e/components/DialogV2.test.ts

This file was deleted.

120 changes: 55 additions & 65 deletions generated/components.json
Original file line number Diff line number Diff line change
Expand Up @@ -122,6 +122,60 @@
],
"subcomponents": []
},
"dialog": {
"id": "dialog",
"name": "Dialog",
"status": "alpha",
"a11yReviewed": false,
"stories": [],
"props": [
{
"name": "isOpen",
"type": "boolean",
"description": "Whether or not the dialog is open"
},
{
"name": "onDismiss",
"type": "() => void",
"description": "Function that will be called when the dialog is closed"
},
{
"name": "returnFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "The element to restore focus back to after the `Dialog` is closed"
},
{
"name": "initialFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
},
{
"name": "aria-labelledby",
"type": "string",
"description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "aria-label",
"type": "string",
"description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "Dialog.Header",
"props": [
{
"name": "sx",
"type": "SystemStyleObject"
}
]
}
]
},
"filter_list": {
"id": "filter_list",
"name": "FilterList",
Expand Down Expand Up @@ -2053,76 +2107,12 @@
],
"subcomponents": []
},
"dialog": {
"id": "dialog",
"name": "Dialog",
"status": "alpha",
"a11yReviewed": false,
"stories": [
{
"id": "components-dialog--default",
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const returnFocusRef = React.useRef(null)\n return (\n <>\n <Button ref={returnFocusRef} onClick={() => setIsOpen(true)}>\n Open\n </Button>\n <Dialog\n returnFocusRef={returnFocusRef}\n isOpen={isOpen}\n onDismiss={() => setIsOpen(false)}\n aria-labelledby=\"header-id\"\n >\n <Dialog.Header id=\"header-id\">Title</Dialog.Header>\n some content\n </Dialog>\n </>\n )\n}"
}
],
"props": [
{
"name": "isOpen",
"type": "boolean",
"description": "Whether or not the dialog is open"
},
{
"name": "onDismiss",
"type": "() => void",
"description": "Function that will be called when the dialog is closed"
},
{
"name": "returnFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "The element to restore focus back to after the `Dialog` is closed"
},
{
"name": "initialFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
},
{
"name": "aria-labelledby",
"type": "string",
"description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "aria-label",
"type": "string",
"description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "Dialog.Header",
"props": [
{
"name": "sx",
"type": "SystemStyleObject"
}
]
}
]
},
"drafts_dialog": {
"id": "drafts_dialog",
"name": "Dialog",
"status": "draft",
"a11yReviewed": false,
"stories": [
{
"id": "components-dialog--default",
"code": "() => {\n const [isOpen, setIsOpen] = useState(false)\n const buttonRef = useRef<HTMLButtonElement>(null)\n const onDialogClose = useCallback(() => setIsOpen(false), [])\n return (\n <>\n <Button ref={buttonRef} onClick={() => setIsOpen(!isOpen)}>\n Show dialog\n </Button>\n {isOpen && <Dialog onClose={onDialogClose}>Dialog Content</Dialog>}\n </>\n )\n}"
}
],
"stories": [],
"props": [
{
"name": "title",
Expand Down
19 changes: 0 additions & 19 deletions script/generate-e2e-tests.js
Original file line number Diff line number Diff line change
Expand Up @@ -336,25 +336,6 @@ const components = new Map([
],
},
],
[
'DialogV2',
{
stories: [
{
id: 'drafts-components-dialog--default',
name: 'Default',
},
{
id: 'drafts-components-dialog-features--basic-dialog',
name: 'Basic Dialog',
},
{
id: 'drafts-components-dialog-features--basic-confirmation-dialog',
name: 'Basic Confirmation Dialog',
},
],
},
],
[
'Flash',
{
Expand Down
54 changes: 54 additions & 0 deletions src/Dialog.docs.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,54 @@
{
"id": "dialog",
"name": "Dialog",
"status": "alpha",
"a11yReviewed": false,
"stories": [],
"props": [
{
"name": "isOpen",
"type": "boolean",
"description": "Whether or not the dialog is open"
},
{
"name": "onDismiss",
"type": "() => void",
"description": "Function that will be called when the dialog is closed"
},
{
"name": "returnFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "The element to restore focus back to after the `Dialog` is closed"
},
{
"name": "initialFocusRef",
"type": " React.RefObject<HTMLElement>",
"description": "Element inside of the `Dialog` you'd like to be focused when the Dialog is opened. If nothing is passed to `initialFocusRef` the close button is focused."
},
{
"name": "aria-labelledby",
"type": "string",
"description": "Pass an id to use for the aria-label. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "aria-label",
"type": "string",
"description": "Pass a label to be used to describe the Dialog. Use either a `aria-label` or an `aria-labelledby` but not both."
},
{
"name": "sx",
"type": "SystemStyleObject"
}
],
"subcomponents": [
{
"name": "Dialog.Header",
"props": [
{
"name": "sx",
"type": "SystemStyleObject"
}
]
}
]
}
Loading