@atlaskit/modal-dialog 12.0.2 → 12.2.0

package/CHANGELOG.md

@@ -1,5 +1,40 @@
 # @atlaskit/modal-dialog
 
+## 12.2.0
+
+### Minor Changes
+
+- [`2d60dd3116d`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2d60dd3116d) - [ux] Modal dialogs which contain no focusable children will now lock focus to the modal container. The container will have a focus ring, so some VR tests may need to be regenerated.
+
+### Patch Changes
+
+- [`3fced6aa641`](https://bitbucket.org/atlassian/atlassian-frontend/commits/3fced6aa641) - Bumped `react-focus-lock` to version `^2.2.1`.
+- [`a8c55e479e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a8c55e479e8) - Removes unused dependency on emotion-styled
+- [`f460cc7c411`](https://bitbucket.org/atlassian/atlassian-frontend/commits/f460cc7c411) - Builds for this package now pass through a tokens babel plugin, removing runtime invocations of the tokens() function and improving bundle size.
+- Updated dependencies
+
+## 12.1.1
+
+### Patch Changes
+
+- [`2b2290121eb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/2b2290121eb) - Raised the minimum version carat range of focus ring to latest.
+
+## 12.1.0
+
+### Minor Changes
+
+- [`993eb469fcb`](https://bitbucket.org/atlassian/atlassian-frontend/commits/993eb469fcb) - Instrumented `@atlaskit/modal-dialog` with the new theming package, `@atlaskit/tokens`. Tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.0.3
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 12.0.2
 
 ### Patch Changes

package/dist/cjs/internal/components/modal-dialog.js

@@ -23,6 +23,8 @@ var _mergeRefs = _interopRequireDefault(require("@atlaskit/ds-lib/merge-refs"));
 
 var _useAutoFocus = _interopRequireDefault(require("@atlaskit/ds-lib/use-auto-focus"));
 
+var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
+
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
 
 var _colors = require("@atlaskit/theme/colors");
@@ -47,7 +49,7 @@ var dialogStyles = (0, _core.css)({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: _colors.N0,
+  backgroundColor: "var(--ds-background-overlay, ".concat(_colors.N0, ")"),
   color: _constants.textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -56,7 +58,7 @@ var dialogStyles = (0, _core.css)({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: _constants.borderRadius,
-    boxShadow: "0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A)
+    boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")
   },
 
   /**
@@ -134,7 +136,7 @@ var ModalDialog = function ModalDialog(props) {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
-    return (0, _core.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
+    return (0, _core.jsx)(_focusRing.default, null, (0, _core.jsx)("section", (0, _extends2.default)({}, bottomFadeInProps, {
       ref: (0, _mergeRefs.default)([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': (0, _utils.dialogWidth)(width),
@@ -147,7 +149,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children);
+    }), children));
   }))));
 };
 

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.iconColor = exports.focusOutlineColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
+exports.iconColor = exports.textColor = exports.keylineColor = exports.keylineHeight = exports.titleIconMargin = exports.footerItemGap = exports.padding = exports.verticalOffset = exports.borderRadius = exports.gutter = exports.width = void 0;
 
 var _colors = require("@atlaskit/theme/colors");
 
@@ -35,14 +35,12 @@ var titleIconMargin = gridSize;
 exports.titleIconMargin = titleIconMargin;
 var keylineHeight = 2;
 exports.keylineHeight = keylineHeight;
-var keylineColor = _colors.N30;
+var keylineColor = "var(--ds-border-neutral, ".concat(_colors.N30, ")");
 exports.keylineColor = keylineColor;
-var textColor = (0, _colors.text)();
+var textColor = "var(--ds-text-highEmphasis, ".concat((0, _colors.text)(), ")");
 exports.textColor = textColor;
-var focusOutlineColor = _colors.N800;
-exports.focusOutlineColor = focusOutlineColor;
 var iconColor = {
-  danger: _colors.R400,
-  warning: _colors.Y400
+  danger: "var(--ds-iconBorder-danger, ".concat(_colors.R400, ")"),
+  warning: "var(--ds-iconBorder-warning, ".concat(_colors.Y400, ")")
 };
 exports.iconColor = iconColor;

package/dist/cjs/modal-wrapper.js

@@ -85,7 +85,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.2"
+    packageVersion: "12.2.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.2",
+	"version": "12.2.0",
 	"sideEffects": false
 }

package/dist/es2019/internal/components/modal-dialog.js

@@ -6,6 +6,7 @@ import { css, jsx } from '@emotion/core';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, textColor } from '../constants';
@@ -22,7 +23,7 @@ const dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: `var(--ds-background-overlay, ${N0})`,
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -31,7 +32,7 @@ const dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius,
-    boxShadow: `0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`
+    boxShadow: `var(--ds-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`
   },
 
   /**
@@ -101,7 +102,7 @@ const ModalDialog = props => {
   }, jsx(FadeIn, {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
-  }, bottomFadeInProps => jsx("section", _extends({}, bottomFadeInProps, {
+  }, bottomFadeInProps => jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
     ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
     style: {
       '--modal-dialog-width': dialogWidth(width),
@@ -114,7 +115,7 @@ const ModalDialog = props => {
     "data-modal-stack": stackIndex,
     tabIndex: -1,
     "aria-modal": true
-  }), children)))));
+  }), children))))));
 };
 
 export default ModalDialog;

package/dist/es2019/internal/constants.js

@@ -1,4 +1,4 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 export const width = {
   values: ['small', 'medium', 'large', 'x-large'],
@@ -18,10 +18,9 @@ export const padding = gridSize * 3;
 export const footerItemGap = gridSize;
 export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
-export const keylineColor = N30;
-export const textColor = getTextColor();
-export const focusOutlineColor = N800;
+export const keylineColor = `var(--ds-border-neutral, ${N30})`;
+export const textColor = `var(--ds-text-highEmphasis, ${text()})`;
 export const iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: `var(--ds-iconBorder-danger, ${R400})`,
+  warning: `var(--ds-iconBorder-warning, ${Y400})`
 };

package/dist/es2019/modal-wrapper.js

@@ -50,7 +50,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.2"
+    packageVersion: "12.2.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.2",
+	"version": "12.2.0",
 	"sideEffects": false
 }

package/dist/esm/internal/components/modal-dialog.js

@@ -8,6 +8,7 @@ import { css, jsx } from '@emotion/core';
 import { useUID } from 'react-uid';
 import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import useAutoFocus from '@atlaskit/ds-lib/use-auto-focus';
+import FocusRing from '@atlaskit/focus-ring';
 import FadeIn from '@atlaskit/motion/fade-in';
 import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import { borderRadius, textColor } from '../constants';
@@ -24,7 +25,7 @@ var dialogStyles = css({
   maxHeight: '100vh',
   flex: '1 1 auto',
   flexDirection: 'column',
-  backgroundColor: N0,
+  backgroundColor: "var(--ds-background-overlay, ".concat(N0, ")"),
   color: textColor,
   pointerEvents: 'auto',
   '@media (min-width: 480px)': {
@@ -33,7 +34,7 @@ var dialogStyles = css({
     marginRight: 'inherit',
     marginLeft: 'inherit',
     borderRadius: borderRadius,
-    boxShadow: "0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A)
+    boxShadow: "var(--ds-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")
   },
 
   /**
@@ -111,7 +112,7 @@ var ModalDialog = function ModalDialog(props) {
     entranceDirection: "bottom",
     onFinish: onMotionFinish
   }, function (bottomFadeInProps) {
-    return jsx("section", _extends({}, bottomFadeInProps, {
+    return jsx(FocusRing, null, jsx("section", _extends({}, bottomFadeInProps, {
       ref: mergeRefs([bottomFadeInProps.ref, motionRef]),
       style: {
         '--modal-dialog-width': dialogWidth(width),
@@ -124,7 +125,7 @@ var ModalDialog = function ModalDialog(props) {
       "data-modal-stack": stackIndex,
       tabIndex: -1,
       "aria-modal": true
-    }), children);
+    }), children));
   }))));
 };
 

package/dist/esm/internal/constants.js

@@ -1,4 +1,4 @@
-import { text as getTextColor, N30, N800, R400, Y400 } from '@atlaskit/theme/colors';
+import { N30, R400, text, Y400 } from '@atlaskit/theme/colors';
 import { borderRadius as getBorderRadius, gridSize as getGridSize } from '@atlaskit/theme/constants';
 export var width = {
   values: ['small', 'medium', 'large', 'x-large'],
@@ -18,10 +18,9 @@ export var padding = gridSize * 3;
 export var footerItemGap = gridSize;
 export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
-export var keylineColor = N30;
-export var textColor = getTextColor();
-export var focusOutlineColor = N800;
+export var keylineColor = "var(--ds-border-neutral, ".concat(N30, ")");
+export var textColor = "var(--ds-text-highEmphasis, ".concat(text(), ")");
 export var iconColor = {
-  danger: R400,
-  warning: Y400
+  danger: "var(--ds-iconBorder-danger, ".concat(R400, ")"),
+  warning: "var(--ds-iconBorder-warning, ".concat(Y400, ")")
 };

package/dist/esm/modal-wrapper.js

@@ -56,7 +56,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.0.2"
+    packageVersion: "12.2.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.0.2",
+	"version": "12.2.0",
 	"sideEffects": false
 }

package/dist/types/internal/constants.d.ts

@@ -15,11 +15,9 @@ export declare const padding: number;
 export declare const footerItemGap: number;
 export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
-export declare const keylineColor = "#EBECF0";
-export declare const textColor: string;
-export declare const focusOutlineColor = "#172B4D";
-declare type IconColor = {
+export declare const keylineColor: "var(--ds-border-neutral)";
+export declare const textColor: "var(--ds-text-highEmphasis)";
+export declare const iconColor: {
     [key in Appearance]: string;
 };
-export declare const iconColor: IconColor;
 export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.0.2",
+  "version": "12.2.0",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -41,15 +41,16 @@
     "@atlaskit/blanket": "^12.2.0",
     "@atlaskit/codemod-utils": "^3.4.0",
     "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/focus-ring": "0.2.2",
+    "@atlaskit/focus-ring": "^0.2.4",
     "@atlaskit/icon": "^21.9.0",
     "@atlaskit/motion": "^1.0.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/tokens": "^0.4.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9",
     "raf-schd": "^2.1.0",
-    "react-focus-lock": "^1.19.1",
+    "react-focus-lock": "^2.5.2",
     "react-scrolllock": "^5.0.1",
     "react-uid": "^2.2.0"
   },
@@ -103,9 +104,12 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "theming": "new-theming-api",
+      "theming": "tokens",
       "deprecation": "no-deprecated-imports",
-      "styling": "emotion"
+      "styling": [
+        "static",
+        "emotion"
+      ]
     }
   },
   "homepage": "https://atlassian.design/components/modal-dialog/",