@atlaskit/modal-dialog 12.17.4 → 12.17.6

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/modal-dialog
 
+## 12.17.6
+
+### Patch Changes
+
+- Updated dependencies
+
+## 12.17.5
+
+### Patch Changes
+
+- [#146685](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/146685)
+  [`1cb9d5ae0361d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1cb9d5ae0361d) -
+  [ux] Reduce spacing between body header, body and footer content.
+
 ## 12.17.4
 
 ### Patch Changes

package/dist/cjs/internal/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.width = exports.verticalOffset = exports.textColor = exports.padding = exports.keylineHeight = exports.keylineColor = exports.iconColor = exports.gutter = exports.borderRadius = void 0;
+exports.width = exports.verticalOffset = exports.textColor = 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 = exports.width = {
@@ -20,7 +20,6 @@ var gutter = exports.gutter = 60;
 var gridSize = (0, _constants.gridSize)();
 var borderRadius = exports.borderRadius = (0, _constants.borderRadius)();
 var verticalOffset = exports.verticalOffset = gridSize * 2;
-var padding = exports.padding = gridSize * 3;
 var keylineHeight = exports.keylineHeight = 2;
 var keylineColor = exports.keylineColor = "var(--ds-border, ".concat(_colors.N30, ")");
 var textColor = exports.textColor = "var(--ds-text, ".concat(_colors.N900, ")");

package/dist/cjs/modal-body.js

@@ -27,11 +27,12 @@ var bodyStyles = (0, _react2.css)({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer.
+ * keyline height from header and footer using negative margins.
  */
 var bodyScrollStyles = (0, _react2.css)({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "".concat(_constants.keylineHeight, "px ").concat(_constants.padding, "px")
+  paddingBlock: _constants.keylineHeight,
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 
 /**
@@ -39,8 +40,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, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "0px ".concat(_constants.padding, "px")
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal body__

package/dist/cjs/modal-footer.js

@@ -16,14 +16,15 @@ var _constants = require("./internal/constants");
 
 var footerStyles = (0, _react.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: _constants.padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockStart: "".concat(_constants.padding - _constants.keylineHeight, "px")
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBlockStart: -_constants.keylineHeight,
+  paddingBlockEnd: "var(--ds-space-300, 24px)",
+  paddingBlockStart: "var(--ds-space-200, 16px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal footer__

package/dist/cjs/modal-header.js

@@ -18,13 +18,14 @@ var _constants = require("./internal/constants");
 
 var headerStyles = (0, _react2.css)({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: _constants.padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockEnd: "".concat(_constants.padding - _constants.keylineHeight, "px")
+  marginBlockEnd: -_constants.keylineHeight,
+  paddingBlockEnd: "var(--ds-space-200, 16px)",
+  paddingBlockStart: "var(--ds-space-300, 24px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal header__

package/dist/cjs/modal-wrapper.js

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

package/dist/es2019/internal/constants.js

@@ -16,7 +16,6 @@ export const gutter = 60;
 const gridSize = getGridSize();
 export const borderRadius = getBorderRadius();
 export const verticalOffset = gridSize * 2;
-export const padding = gridSize * 3;
 export const keylineHeight = 2;
 export const keylineColor = `var(--ds-border, ${N30})`;
 export const textColor = `var(--ds-text, ${N900})`;

package/dist/es2019/modal-body.js

@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 import useScroll from './internal/hooks/use-scroll';
 const bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
@@ -20,11 +20,12 @@ const bodyStyles = css({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer.
+ * keyline height from header and footer using negative margins.
  */
 const bodyScrollStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: `${keylineHeight}px ${padding}px`
+  paddingBlock: keylineHeight,
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 
 /**
@@ -32,8 +33,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, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: `0px ${padding}px`
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal body__

package/dist/es2019/modal-footer.js

@@ -6,17 +6,18 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 const footerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockStart: `${padding - keylineHeight}px`
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBlockStart: -keylineHeight,
+  paddingBlockEnd: "var(--ds-space-300, 24px)",
+  paddingBlockStart: "var(--ds-space-200, 16px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal footer__

package/dist/es2019/modal-header.js

@@ -7,16 +7,17 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 const headerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockEnd: `${padding - keylineHeight}px`
+  marginBlockEnd: -keylineHeight,
+  paddingBlockEnd: "var(--ds-space-200, 16px)",
+  paddingBlockStart: "var(--ds-space-300, 24px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal header__

package/dist/es2019/modal-wrapper.js

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

package/dist/esm/internal/constants.js

@@ -16,7 +16,6 @@ export var gutter = 60;
 var gridSize = getGridSize();
 export var borderRadius = getBorderRadius();
 export var verticalOffset = gridSize * 2;
-export var padding = gridSize * 3;
 export var keylineHeight = 2;
 export var keylineColor = "var(--ds-border, ".concat(N30, ")");
 export var textColor = "var(--ds-text, ".concat(N900, ")");

package/dist/esm/modal-body.js

@@ -10,7 +10,7 @@ import { css, jsx } from '@emotion/react';
 import { TouchScrollable } from 'react-scrolllock';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 import useScroll from './internal/hooks/use-scroll';
 var bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
@@ -20,11 +20,12 @@ var bodyStyles = css({
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
  * The combined vertical spacing is maintained by subtracting the
- * keyline height from header and footer.
+ * keyline height from header and footer using negative margins.
  */
 var bodyScrollStyles = css({
   // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "".concat(keylineHeight, "px ").concat(padding, "px")
+  paddingBlock: keylineHeight,
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 
 /**
@@ -32,8 +33,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, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: "0px ".concat(padding, "px")
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal body__

package/dist/esm/modal-footer.js

@@ -6,17 +6,18 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 var footerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
   gap: "var(--ds-space-100, 8px)",
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockStart: "".concat(padding - keylineHeight, "px")
+  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
+  marginBlockStart: -keylineHeight,
+  paddingBlockEnd: "var(--ds-space-300, 24px)",
+  paddingBlockStart: "var(--ds-space-200, 16px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal footer__

package/dist/esm/modal-header.js

@@ -7,16 +7,17 @@ import React from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { useModal } from './hooks';
-import { keylineHeight, padding } from './internal/constants';
+import { keylineHeight } from './internal/constants';
 var headerStyles = css({
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'space-between',
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
-  paddingBlockEnd: "".concat(padding - keylineHeight, "px")
+  marginBlockEnd: -keylineHeight,
+  paddingBlockEnd: "var(--ds-space-200, 16px)",
+  paddingBlockStart: "var(--ds-space-300, 24px)",
+  paddingInline: "var(--ds-space-300, 24px)"
 });
 /**
  * __Modal header__

package/dist/esm/modal-wrapper.js

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

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

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

package/dist/types-ts4.5/internal/constants.d.ts

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

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "12.17.4",
+	"version": "12.17.6",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -29,14 +29,14 @@
 		"@atlaskit/analytics-next": "^10.1.0",
 		"@atlaskit/blanket": "^13.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
-		"@atlaskit/ds-lib": "^3.0.0",
+		"@atlaskit/ds-lib": "^3.1.0",
 		"@atlaskit/focus-ring": "^1.6.0",
-		"@atlaskit/icon": "^22.20.0",
-		"@atlaskit/layering": "^0.5.0",
+		"@atlaskit/icon": "^22.22.0",
+		"@atlaskit/layering": "^0.6.0",
 		"@atlaskit/motion": "^1.9.0",
 		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/portal": "^4.9.0",
-		"@atlaskit/pragmatic-drag-and-drop": "^1.3.0",
+		"@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
 		"@atlaskit/primitives": "^12.2.0",
 		"@atlaskit/theme": "^13.0.0",
 		"@atlaskit/tokens": "^2.0.0",
@@ -57,10 +57,10 @@
 		"@af/visual-regression": "*",
 		"@atlaskit/button": "*",
 		"@atlaskit/checkbox": "^14.0.0",
-		"@atlaskit/dropdown-menu": "^12.18.0",
+		"@atlaskit/dropdown-menu": "^12.20.0",
 		"@atlaskit/popup": "^1.28.0",
 		"@atlaskit/radio": "^6.5.0",
-		"@atlaskit/select": "^17.19.0",
+		"@atlaskit/select": "^18.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.5.0",
 		"@atlaskit/tooltip": "^18.8.0",