@atlaskit/modal-dialog 12.4.8 → 12.4.10

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.4.10
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.4.9
+
+### Patch Changes
+
+- [`63c2f0b3f96`](https://bitbucket.org/atlassian/atlassian-frontend/commits/63c2f0b3f96) - Internal changes to use spacing tokens. There is no expected behaviour or visual change.
+
 ## 12.4.8
 
 ### Patch Changes

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

@@ -39,7 +39,9 @@ var dialogStyles = (0, _react2.css)({
   '@media (min-width: 480px)': {
     width: 'var(--modal-dialog-width)',
     maxWidth: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: 'inherit',
     borderRadius: _constants.borderRadius,
     boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(_colors.N30A, ", 0 2px 1px ").concat(_colors.N30A, ", 0 0 20px -6px ").concat(_colors.N60A), ")")

package/dist/cjs/internal/components/positioner.js

@@ -9,6 +9,7 @@ var _curves = require("@atlaskit/motion/curves");
 var _durations = require("@atlaskit/motion/durations");
 var _constants = require("@atlaskit/theme/constants");
 var _constants2 = require("../constants");
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 
 var maxWidthDimensions = "calc(100vw - ".concat(_constants2.gutter * 2, "px)");

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.width = exports.verticalOffset = exports.titleIconMargin = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.footerItemGap = exports.borderRadius = void 0;
+exports.width = exports.verticalOffset = exports.titleIconMargin = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
 var _colors = require("@atlaskit/theme/colors");
 var _constants = require("@atlaskit/theme/constants");
 var width = {
@@ -26,8 +26,6 @@ var verticalOffset = gridSize * 2;
 exports.verticalOffset = verticalOffset;
 var padding = gridSize * 3;
 exports.padding = padding;
-var footerItemGap = gridSize;
-exports.footerItemGap = footerItemGap;
 var titleIconMargin = gridSize;
 exports.titleIconMargin = titleIconMargin;
 var keylineHeight = 2;

package/dist/cjs/modal-body.js

@@ -25,6 +25,7 @@ var bodyStyles = (0, _react2.css)({
  * keyline height from header and footer.
  */
 var bodyScrollStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: "".concat(_constants.keylineHeight, "px ").concat(_constants.padding, "px")
 });
 
@@ -33,6 +34,7 @@ var bodyScrollStyles = (0, _react2.css)({
  * not account for them in this case.
  */
 var viewportScrollStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: "0px ".concat(_constants.padding, "px")
 });
 /**

package/dist/cjs/modal-footer.js

@@ -11,12 +11,14 @@ var _constants = require("./internal/constants");
 
 var footerStyles = (0, _react.css)({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: _constants.padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "".concat(_constants.footerItemGap, "px")
+  gap: "var(--ds-space-100, 8px)"
 });
 /**
  * __Modal footer__

package/dist/cjs/modal-header.js

@@ -13,7 +13,9 @@ var _constants = require("./internal/constants");
 
 var headerStyles = (0, _react2.css)({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: _constants.padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingBottom: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',

package/dist/cjs/modal-title.js

@@ -37,6 +37,7 @@ var textStyles = (0, _react.css)({
   wordWrap: 'break-word'
 });
 var iconStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: "".concat(_constants.titleIconMargin, "px"),
   flex: '0 0 auto',
   alignSelf: 'start'
@@ -49,7 +50,9 @@ var iconStyles = (0, _react.css)({
  */
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginTop: "".concat(lineHeightOffset / 2, "px"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
   overflow: 'hidden',
@@ -57,6 +60,7 @@ var truncatedTextStyles = (0, _react.css)({
   whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = (0, _react.css)({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: 1.2
 });

package/dist/cjs/modal-wrapper.js

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

package/dist/cjs/version.json

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

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

@@ -29,7 +29,9 @@ const dialogStyles = css({
   '@media (min-width: 480px)': {
     width: 'var(--modal-dialog-width)',
     maxWidth: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: 'inherit',
     borderRadius,
     boxShadow: `var(--ds-shadow-overlay, ${`0 0 0 1px ${N30A}, 0 2px 1px ${N30A}, 0 0 20px -6px ${N60A}`})`

package/dist/es2019/internal/components/positioner.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';

package/dist/es2019/internal/constants.js

@@ -15,7 +15,6 @@ const gridSize = getGridSize();
 export const borderRadius = getBorderRadius();
 export const verticalOffset = gridSize * 2;
 export const padding = gridSize * 3;
-export const footerItemGap = gridSize;
 export const titleIconMargin = gridSize;
 export const keylineHeight = 2;
 export const keylineColor = `var(--ds-border, ${N30})`;

package/dist/es2019/modal-body.js

@@ -18,6 +18,7 @@ const bodyStyles = css({
  * keyline height from header and footer.
  */
 const bodyScrollStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: `${keylineHeight}px ${padding}px`
 });
 
@@ -26,6 +27,7 @@ const bodyScrollStyles = css({
  * not account for them in this case.
  */
 const viewportScrollStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: `0px ${padding}px`
 });
 /**

package/dist/es2019/modal-footer.js

@@ -2,15 +2,17 @@
 
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { footerItemGap, keylineHeight, padding } from './internal/constants';
+import { keylineHeight, padding } from './internal/constants';
 const footerStyles = css({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: `${padding - keylineHeight}px`,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: `${footerItemGap}px`
+  gap: "var(--ds-space-100, 8px)"
 });
 /**
  * __Modal footer__

package/dist/es2019/modal-header.js

@@ -5,7 +5,9 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 const headerStyles = css({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingBottom: `${padding - keylineHeight}px`,
   position: 'relative',
   alignItems: 'center',

package/dist/es2019/modal-title.js

@@ -30,6 +30,7 @@ const textStyles = css({
   wordWrap: 'break-word'
 });
 const iconStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: `${titleIconMargin}px`,
   flex: '0 0 auto',
   alignSelf: 'start'
@@ -42,7 +43,9 @@ const iconStyles = css({
  */
 const lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 const truncatedTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginTop: `${lineHeightOffset / 2}px`,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: `${lineHeightOffset / 2}px`,
   lineHeight: adjustedLineHeight,
   overflow: 'hidden',
@@ -50,6 +53,7 @@ const truncatedTextStyles = css({
   whiteSpace: 'nowrap'
 });
 const truncatedTextIconStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: `${lineHeightOffset / 2}px`,
   lineHeight: 1.2
 });

package/dist/es2019/modal-wrapper.js

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

package/dist/es2019/version.json

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

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

@@ -31,7 +31,9 @@ var dialogStyles = css({
   '@media (min-width: 480px)': {
     width: 'var(--modal-dialog-width)',
     maxWidth: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginRight: 'inherit',
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
     marginLeft: 'inherit',
     borderRadius: borderRadius,
     boxShadow: "var(--ds-shadow-overlay, ".concat("0 0 0 1px ".concat(N30A, ", 0 2px 1px ").concat(N30A, ", 0 0 20px -6px ").concat(N60A), ")")

package/dist/esm/internal/components/positioner.js

@@ -1,3 +1,4 @@
+/* eslint-disable @atlaskit/design-system/ensure-design-token-usage-spacing */
 /** @jsx jsx */
 
 import { css, jsx } from '@emotion/react';

package/dist/esm/internal/constants.js

@@ -15,7 +15,6 @@ var gridSize = getGridSize();
 export var borderRadius = getBorderRadius();
 export var verticalOffset = gridSize * 2;
 export var padding = gridSize * 3;
-export var footerItemGap = gridSize;
 export var titleIconMargin = gridSize;
 export var keylineHeight = 2;
 export var keylineColor = "var(--ds-border, ".concat(N30, ")");

package/dist/esm/modal-body.js

@@ -18,6 +18,7 @@ var bodyStyles = css({
  * keyline height from header and footer.
  */
 var bodyScrollStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: "".concat(keylineHeight, "px ").concat(padding, "px")
 });
 
@@ -26,6 +27,7 @@ var bodyScrollStyles = css({
  * not account for them in this case.
  */
 var viewportScrollStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: "0px ".concat(padding, "px")
 });
 /**

package/dist/esm/modal-footer.js

@@ -2,15 +2,17 @@
 
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { footerItemGap, keylineHeight, padding } from './internal/constants';
+import { keylineHeight, padding } from './internal/constants';
 var footerStyles = css({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingTop: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "".concat(footerItemGap, "px")
+  gap: "var(--ds-space-100, 8px)"
 });
 /**
  * __Modal footer__

package/dist/esm/modal-header.js

@@ -5,7 +5,9 @@ import { useModal } from './hooks';
 import { keylineHeight, padding } from './internal/constants';
 var headerStyles = css({
   display: 'flex',
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   padding: padding,
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   paddingBottom: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',

package/dist/esm/modal-title.js

@@ -30,6 +30,7 @@ var textStyles = css({
   wordWrap: 'break-word'
 });
 var iconStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginRight: "".concat(titleIconMargin, "px"),
   flex: '0 0 auto',
   alignSelf: 'start'
@@ -42,7 +43,9 @@ var iconStyles = css({
  */
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 var truncatedTextStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginTop: "".concat(lineHeightOffset / 2, "px"),
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
   overflow: 'hidden',
@@ -50,6 +53,7 @@ var truncatedTextStyles = css({
   whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage-spacing
   marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: 1.2
 });

package/dist/esm/modal-wrapper.js

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

package/dist/esm/version.json

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

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

@@ -12,7 +12,6 @@ export declare const gutter = 60;
 export declare const borderRadius: number;
 export declare const verticalOffset: number;
 export declare const padding: number;
-export declare const footerItemGap: number;
 export declare const titleIconMargin: number;
 export declare const keylineHeight = 2;
 export declare const keylineColor: "var(--ds-border)";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.4.8",
+  "version": "12.4.10",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -38,7 +38,7 @@
     "watch": "tsc --watch --noEmit --project './tsconfig.json'"
   },
   "dependencies": {
-    "@atlaskit/analytics-next": "^8.2.0",
+    "@atlaskit/analytics-next": "^9.0.0",
     "@atlaskit/blanket": "^12.3.0",
     "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/ds-lib": "^2.1.0",
@@ -47,7 +47,7 @@
     "@atlaskit/motion": "^1.3.0",
     "@atlaskit/portal": "^4.1.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^1.0.0",
+    "@atlaskit/tokens": "^1.2.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -84,6 +84,7 @@
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
+    "@testing-library/user-event": "^14.4.3",
     "@types/raf-schd": "^4.0.1",
     "@types/react-beautiful-dnd": "^11.0.1",
     "jscodeshift": "^0.13.0",
@@ -108,8 +109,10 @@
       "design-system": "v1",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
-      "design-tokens": "spacing",
-      "theming": "tokens",
+      "design-tokens": [
+        "color",
+        "spacing"
+      ],
       "deprecation": "no-deprecated-imports",
       "styling": [
         "static",