From 8ac10806f25f58aa84f3996a3d53fcb055b66c42 Mon Sep 17 00:00:00 2001 From: ty-v1 Date: Thu, 19 May 2022 20:41:19 +0900 Subject: [PATCH 1/7] import Dialog v2 instead of old Dialog --- docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 991f401f1fd..545500b8146 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -3,6 +3,7 @@ import * as octicons from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' import * as deprecated from '@primer/react/deprecated' +import {Dialog} from '@primer/react/Dialog/Dialog' import {Placeholder} from '@primer/react/Placeholder' import React from 'react' import State from '../../../components/State' @@ -24,6 +25,7 @@ export default function resolveScope(metastring) { ...(metastring.includes('deprecated') ? deprecated : {}), ReactRouterLink, State, - Placeholder + Placeholder, + Dialog } } From c83d047fa718aa24db1ae15484d2768eda3e710d Mon Sep 17 00:00:00 2001 From: ty-v1 Date: Sun, 22 May 2022 12:52:21 +0900 Subject: [PATCH 2/7] Revert "import Dialog v1 instead of old Dialog" This reverts commit 8ac10806f25f58aa84f3996a3d53fcb055b66c42. --- docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js index 545500b8146..991f401f1fd 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js +++ b/docs/src/@primer/gatsby-theme-doctocat/live-code-scope.js @@ -3,7 +3,6 @@ import * as octicons from '@primer/octicons-react' import * as primerComponents from '@primer/react' import * as drafts from '@primer/react/drafts' import * as deprecated from '@primer/react/deprecated' -import {Dialog} from '@primer/react/Dialog/Dialog' import {Placeholder} from '@primer/react/Placeholder' import React from 'react' import State from '../../../components/State' @@ -25,7 +24,6 @@ export default function resolveScope(metastring) { ...(metastring.includes('deprecated') ? deprecated : {}), ReactRouterLink, State, - Placeholder, - Dialog + Placeholder } } From a32e35aa7c7af6a5252bd4bee95b11a6b465e7c8 Mon Sep 17 00:00:00 2001 From: ty-v1 Date: Sun, 22 May 2022 13:12:28 +0900 Subject: [PATCH 3/7] move the new Dialog to drafts --- docs/content/{ => drafts}/Dialog.mdx | 10 +++++++--- src/drafts/index.ts | 1 + 2 files changed, 8 insertions(+), 3 deletions(-) rename docs/content/{ => drafts}/Dialog.mdx (99%) diff --git a/docs/content/Dialog.mdx b/docs/content/drafts/Dialog.mdx similarity index 99% rename from docs/content/Dialog.mdx rename to docs/content/drafts/Dialog.mdx index 3a6ad2eee77..b3cf1dba47c 100644 --- a/docs/content/Dialog.mdx +++ b/docs/content/drafts/Dialog.mdx @@ -1,10 +1,14 @@ --- title: Dialog componentId: dialog -status: Alpha +status: Draft --- -import State from '../components/State' +```js +import {Dialog} from '@primer/react/drafts' +``` + +import State from '../../components/State' The dialog component the Primer implementation of the ARIA design pattern [Dialog](https://www.w3.org/TR/wai-aria-practices-1.1/#dialog_modal). A dialog is a type of overlay that can be used for confirming actions, asking for disambiguation, and presenting small forms. They generally allow the user to focus on a quick task without having to navigate to a different page. @@ -45,7 +49,7 @@ By default, the Dialog component implements the design and interactions defined ### Example -```jsx live +```jsx live drafts {([isOpen, setIsOpen]) => { const openDialog = React.useCallback(() => setIsOpen(true), [setIsOpen]) diff --git a/src/drafts/index.ts b/src/drafts/index.ts index 3cc6034face..7fa1963ac00 100644 --- a/src/drafts/index.ts +++ b/src/drafts/index.ts @@ -5,3 +5,4 @@ * example: import {ActionList} from '@primer/react/drafts */ export * from '../NavList' +export * from '../Dialog/Dialog' From fab99d88334ca4a663987bfb1e86ced065370caa Mon Sep 17 00:00:00 2001 From: ty-v1 Date: Sun, 22 May 2022 13:24:57 +0900 Subject: [PATCH 4/7] undeprecate the legacy dialog --- docs/content/{deprecated => }/Dialog.md | 44 +++---------------------- 1 file changed, 4 insertions(+), 40 deletions(-) rename docs/content/{deprecated => }/Dialog.md (86%) diff --git a/docs/content/deprecated/Dialog.md b/docs/content/Dialog.md similarity index 86% rename from docs/content/deprecated/Dialog.md rename to docs/content/Dialog.md index feabc4ac1f9..92a847c587c 100644 --- a/docs/content/deprecated/Dialog.md +++ b/docs/content/Dialog.md @@ -1,44 +1,8 @@ --- -title: Dialog (legacy) -status: Deprecated +title: Dialog +status: Alpha --- -## Deprecation - -Use the [new version of Dialog](/Dialog) instead. - -**Before** - -```jsx deprecated - setOpen(false)} aria-labelledby="header-id"> - Title - - Some content - - -``` - -**After** - -```jsx deprecated -{ - open && ( - - This is a description of the dialog. - - } - footerButtons={[{content: 'Ok', onClick: () => setOpen(false)}]} - onClose={() => setOpen(false)} - > - Some content - - ) -} -``` - The dialog component is used for all modals. It renders on top of the rest of the app with an overlay. You'll need to manage the `isOpen` state in a wrapper component of your own and pass in a function to be used to close the Dialog. For documentation purposes only we've created a mock `State` to handle this, but you should handle the state in the component you consume `Dialog` in or in a wrapper component. @@ -57,7 +21,7 @@ If you're running into z-index issues or are rendering the component inside of a ### Examples -```jsx deprecated live +```jsx live {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) @@ -85,7 +49,7 @@ If you're running into z-index issues or are rendering the component inside of a You can also pass any non-text content into the header: -```jsx deprecated live +```jsx live {([isOpen, setIsOpen]) => { const returnFocusRef = React.useRef(null) From c602d526542bf2c9ac215a248b87192870a929b2 Mon Sep 17 00:00:00 2001 From: y-tomida Date: Tue, 24 May 2022 21:18:10 +0900 Subject: [PATCH 5/7] Update docs/content/drafts/Dialog.mdx Co-authored-by: Cole Bemis --- docs/content/drafts/Dialog.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/content/drafts/Dialog.mdx b/docs/content/drafts/Dialog.mdx index b3cf1dba47c..c27726b4ec8 100644 --- a/docs/content/drafts/Dialog.mdx +++ b/docs/content/drafts/Dialog.mdx @@ -1,5 +1,5 @@ --- -title: Dialog +title: Dialog v2 componentId: dialog status: Draft --- From 484cd4b86e44453245c38bb37ff94c80429e5484 Mon Sep 17 00:00:00 2001 From: ty-v1 Date: Tue, 24 May 2022 21:30:57 +0900 Subject: [PATCH 6/7] update navigation menu --- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index d9a9d094afb..4ac6317e26b 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -147,8 +147,10 @@ url: /Truncate - title: UnderlineNav url: /UnderlineNav -# - title: Drafts -# children: +- title: Drafts + children: + - title: Dialog v2 + url: /drafts/Dialog - title: Deprecated children: - title: ActionList (legacy) @@ -163,8 +165,6 @@ url: /deprecated/ChoiceFieldset - title: ChoiceInputField url: /deprecated/ChoiceInputField - - title: Dialog (legacy) - url: /deprecated/Dialog - title: Dropdown url: /deprecated/Dropdown - title: DropdownMenu From 00d7fd4dd64b61a0e2704cc1902da66e5d5a49af Mon Sep 17 00:00:00 2001 From: Cole Bemis Date: Tue, 24 May 2022 08:57:52 -0700 Subject: [PATCH 7/7] Create funny-hats-sing.md --- .changeset/funny-hats-sing.md | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 .changeset/funny-hats-sing.md diff --git a/.changeset/funny-hats-sing.md b/.changeset/funny-hats-sing.md new file mode 100644 index 00000000000..8d14afdcba5 --- /dev/null +++ b/.changeset/funny-hats-sing.md @@ -0,0 +1,10 @@ +--- +"@primer/react": patch +--- + +Export new Dialog component from the `@primer/react/drafts` bundle: + +```diff +- import {Dialog} from '@primer/react/lib-esm/Dialog/Dialog' ++ import {Dialog} from '@primer/react/drafts' +```