@primer/react 38.7.1 → 38.8.0-rc.83bca077c

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Potentially problematic release.

This version of @primer/react might be problematic. Click here for more details.

Files changed (7) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map +1 -1
  3. package/dist/ConfirmationDialog/ConfirmationDialog.js +1 -58
  4. package/package.json +1 -1
  5. package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css +0 -2
  6. package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css.map +0 -1
  7. package/dist/ConfirmationDialog/ConfirmationDialog.module.css.js +0 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @primer/react
2
2
 
3
+ ## 38.8.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#7455](https://github.com/primer/react/pull/7455) [`a86c183`](https://github.com/primer/react/commit/a86c183f5ea7add7584f895cff3027a7db35675e) Thanks [@HiroAgustin](https://github.com/HiroAgustin)! - Remove ConfirmationDialog custom renders to ensure visual parity with Dialog
8
+
3
9
  ## 38.7.1
4
10
 
5
11
  ### Patch Changes
package/dist/ConfirmationDialog/ConfirmationDialog.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAI9B,OAAO,KAAK,EAAoD,WAAW,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAOlH;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAmCD;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAuDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAyBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
1
+ {"version":3,"file":"ConfirmationDialog.d.ts","sourceRoot":"","sources":["../../src/ConfirmationDialog/ConfirmationDialog.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAA;AAG9B,OAAO,KAAK,EAAoB,WAAW,EAAE,YAAY,EAAC,MAAM,kBAAkB,CAAA;AAIlF;;GAEG;AACH,MAAM,WAAW,uBAAuB;IACtC;;;OAGG;IACH,OAAO,EAAE,CAAC,OAAO,EAAE,SAAS,GAAG,cAAc,GAAG,QAAQ,GAAG,QAAQ,KAAK,IAAI,CAAA;IAE5E;;;OAGG;IACH,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtB;;OAEG;IACH,mBAAmB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAErC;;OAEG;IACH,oBAAoB,CAAC,EAAE,KAAK,CAAC,SAAS,CAAA;IAEtC;;OAEG;IACH,iBAAiB,CAAC,EAAE,QAAQ,GAAG,SAAS,GAAG,QAAQ,CAAA;IAEnD;;OAEG;IACH,mBAAmB,CAAC,EAAE,OAAO,CAAA;IAE7B;;OAEG;IACH,oBAAoB,CAAC,EAAE,OAAO,CAAA;IAE9B;;;;OAIG;IACH,mBAAmB,CAAC,EAAE,QAAQ,GAAG,SAAS,CAAA;IAE1C;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAA;IAElB;;;;;;;OAOG;IACH,KAAK,CAAC,EAAE,WAAW,CAAA;IAEnB;;;;;OAKG;IACH,MAAM,CAAC,EAAE,YAAY,CAAA;CACtB;AAED;;;;;GAKG;AACH,eAAO,MAAM,kBAAkB,EAAE,KAAK,CAAC,EAAE,CAAC,KAAK,CAAC,iBAAiB,CAAC,uBAAuB,CAAC,CAoDzF,CAAA;AAGD,MAAM,MAAM,cAAc,GAAG,IAAI,CAAC,uBAAuB,EAAE,SAAS,CAAC,GAAG;IAAC,OAAO,EAAE,KAAK,CAAC,SAAS,CAAA;CAAC,CAAA;AAyBlG;;;;GAIG;AACH,wBAAgB,UAAU,cACa,cAAc,sBAIpD"}
package/dist/ConfirmationDialog/ConfirmationDialog.js CHANGED
@@ -1,63 +1,9 @@
1
1
  import { useCallback } from 'react';
2
2
  import { createRoot } from 'react-dom/client';
3
- import { FocusKeys } from '@primer/behaviors';
4
3
  import { Dialog } from '../Dialog/Dialog.js';
5
- import { useFocusZone } from '../hooks/useFocusZone.js';
6
4
  import BaseStyles from '../BaseStyles.js';
7
- import classes from './ConfirmationDialog.module.css.js';
8
- import { jsx, jsxs } from 'react/jsx-runtime';
9
- import Heading from '../Heading/Heading.js';
5
+ import { jsx } from 'react/jsx-runtime';
10
6
 
11
- const ConfirmationHeader = ({
12
- title,
13
- onClose,
14
- dialogLabelId
15
- }) => {
16
- const onCloseClick = useCallback(() => {
17
- onClose('close-button');
18
- }, [onClose]);
19
- return /*#__PURE__*/jsxs("div", {
20
- className: classes.ConfirmationHeader,
21
- children: [/*#__PURE__*/jsx(Heading, {
22
- id: dialogLabelId,
23
- as: "h1",
24
- variant: "small",
25
- children: title
26
- }), /*#__PURE__*/jsx(Dialog.CloseButton, {
27
- onClose: onCloseClick
28
- })]
29
- });
30
- };
31
- ConfirmationHeader.displayName = "ConfirmationHeader";
32
- const ConfirmationBody = ({
33
- children
34
- }) => {
35
- return /*#__PURE__*/jsx("div", {
36
- className: classes.ConfirmationBody,
37
- children: children
38
- });
39
- };
40
- ConfirmationBody.displayName = "ConfirmationBody";
41
- const ConfirmationFooter = ({
42
- footerButtons
43
- }) => {
44
- const {
45
- containerRef: footerRef
46
- } = useFocusZone({
47
- bindKeys: FocusKeys.ArrowHorizontal | FocusKeys.Tab,
48
- focusInStrategy: 'closest'
49
- });
50
-
51
- // Must have exactly 2 buttons!
52
- return /*#__PURE__*/jsx("div", {
53
- ref: footerRef,
54
- className: classes.ConfirmationFooter,
55
- children: /*#__PURE__*/jsx(Dialog.Buttons, {
56
- buttons: footerButtons !== null && footerButtons !== void 0 ? footerButtons : []
57
- })
58
- });
59
- };
60
- ConfirmationFooter.displayName = "ConfirmationFooter";
61
7
  /**
62
8
  * A ConfirmationDialog is a special kind of dialog with more rigid behavior. It
63
9
  * is used to confirm a user action. ConfirmationDialogs always have exactly
@@ -109,9 +55,6 @@ const ConfirmationDialog = props => {
109
55
  width: width,
110
56
  height: height,
111
57
  className: className,
112
- renderHeader: ConfirmationHeader,
113
- renderBody: ConfirmationBody,
114
- renderFooter: ConfirmationFooter,
115
58
  children: children
116
59
  });
117
60
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@primer/react",
3
3
  "type": "module",
4
- "version": "38.7.1",
4
+ "version": "38.8.0-rc.83bca077c",
5
5
  "description": "An implementation of GitHub's Primer Design System using React",
6
6
  "main": "./dist/index.js",
7
7
  "module": "./dist/index.js",
package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css DELETED
@@ -1,2 +0,0 @@
1
- .prc-ConfirmationDialog-ConfirmationHeader-O9n-1{display:flex;flex-direction:row;padding:var(--base-size-8,.5rem)}.prc-ConfirmationDialog-ConfirmationHeader-O9n-1>h1{flex-grow:1;padding:var(--base-size-6,.375rem) var(--base-size-8,.5rem)}.prc-ConfirmationDialog-ConfirmationBody--0CDE{flex-grow:1;font-size:var(--text-body-size-medium,.875rem);padding:0 var(--base-size-16,1rem) var(--base-size-16,1rem) var(--base-size-16,1rem)}.prc-ConfirmationDialog-ConfirmationFooter-6q0Nn{display:grid;grid-auto-columns:max-content;grid-auto-flow:column;grid-gap:var(--base-size-8,.5rem);align-items:end;justify-content:end;padding:var(--base-size-4,.25rem) var(--base-size-16,1rem) var(--base-size-16,1rem)}
2
- /*# sourceMappingURL=ConfirmationDialog-87ccf595.css.map */
package/dist/ConfirmationDialog/ConfirmationDialog-87ccf595.css.map DELETED
@@ -1 +0,0 @@
1
- {"version":3,"sources":["../src/ConfirmationDialog/ConfirmationDialog.module.css.js"],"names":[],"mappings":"AAAA,iDACE,YAAa,CAEb,kBAAmB,CADnB,gCAOF,CAJE,oDAEE,WAAY,CADZ,2DAEF,CAGF,+CAGE,WAAY,CADZ,8CAAuC,CADvC,oFAGF,CAEA,iDACE,YAAa,CAEb,6BAA8B,CAD9B,qBAAsB,CAEtB,iCAA4B,CAC5B,eAAgB,CAChB,mBAAoB,CACpB,mFACF","file":"ConfirmationDialog-87ccf595.css","sourcesContent":[".ConfirmationHeader {\n display: flex;\n padding: var(--base-size-8);\n flex-direction: row;\n\n > h1 {\n padding: var(--base-size-6) var(--base-size-8);\n flex-grow: 1;\n }\n}\n\n.ConfirmationBody {\n padding: 0 var(--base-size-16) var(--base-size-16) var(--base-size-16);\n font-size: var(--text-body-size-medium);\n flex-grow: 1;\n}\n\n.ConfirmationFooter {\n display: grid;\n grid-auto-flow: column;\n grid-auto-columns: max-content;\n grid-gap: var(--base-size-8);\n align-items: end;\n justify-content: end;\n padding: var(--base-size-4) var(--base-size-16) var(--base-size-16);\n}\n"]}
package/dist/ConfirmationDialog/ConfirmationDialog.module.css.js DELETED
@@ -1,5 +0,0 @@
1
- import './ConfirmationDialog-87ccf595.css';
2
-
3
- var classes = {"ConfirmationHeader":"prc-ConfirmationDialog-ConfirmationHeader-O9n-1","ConfirmationBody":"prc-ConfirmationDialog-ConfirmationBody--0CDE","ConfirmationFooter":"prc-ConfirmationDialog-ConfirmationFooter-6q0Nn"};
4
-
5
- export { classes as default };