@atlaskit/modal-dialog - npm Package Compare versions

Comparing version 12.10.3 to 12.10.4

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

@@ -20,2 +20,3 @@ "use strict";
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
@@ -31,2 +32,9 @@ var _colors = require("@atlaskit/theme/colors");
 /** @jsx jsx */
+// reset pointer-events on iframe inside modal
+var resetPointerEventsOnIframeStyles = (0, _react2.css)({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 var dialogStyles = (0, _react2.css)((_css = {
@@ -135,3 +143,5 @@ display: 'flex',
       "aria-modal": true
-    }), children));
+    }), children, (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.iframe_gojiv') && (0, _react2.jsx)(_react2.Global, {
+      styles: resetPointerEventsOnIframeStyles
+    })));
   }))));
@@ -138,0 +148,0 @@ };

dist/cjs/internal/components/positioner.js

@@ -29,5 +29,5 @@ "use strict";
   zIndex: _constants.layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
@@ -44,8 +44,8 @@ var viewportScrollStyles = (0, _react.css)((0, _defineProperty2.default)({
   maxHeight: maxHeightDimensions,
-  marginRight: 'auto',
-  marginLeft: 'auto',
   position: 'absolute',
-  top: "".concat(_constants2.gutter, "px"),
-  right: 0,
-  left: 0,
+  insetBlockStart: "".concat(_constants2.gutter, "px"),
+  insetInlineEnd: 0,
+  insetInlineStart: 0,
+  marginInlineEnd: 'auto',
+  marginInlineStart: 'auto',
   pointerEvents: 'none'
@@ -52,0 +52,0 @@ }));

dist/cjs/internal/components/scroll-container.js

@@ -39,6 +39,6 @@ "use strict";
 var topKeylineStyles = (0, _react2.css)({
-  borderTop: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockStart: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
 });
 var bottomKeylineStyles = (0, _react2.css)({
-  borderBottom: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
+  borderBlockEnd: "".concat(_constants.keylineHeight, "px solid ").concat(_constants.keylineColor)
 });
@@ -45,0 +45,0 @@ /**

dist/cjs/modal-footer.js

@@ -14,10 +14,8 @@ "use strict";
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: _constants.padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: "".concat(_constants.padding - _constants.keylineHeight, "px")
 });
@@ -24,0 +22,0 @@ /**

dist/cjs/modal-header.js

@@ -16,9 +16,7 @@ "use strict";
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: _constants.padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: "".concat(_constants.padding - _constants.keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "".concat(_constants.padding - _constants.keylineHeight, "px")
 });
@@ -25,0 +23,0 @@ /**

dist/cjs/modal-title.js

@@ -40,6 +40,5 @@ "use strict";
 var iconStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: "".concat(_constants.titleIconMargin, "px"),
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: "".concat(_constants.titleIconMargin, "px")
 });
@@ -54,7 +53,5 @@
 var truncatedTextStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: "".concat(lineHeightOffset / 2, "px"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
+  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
@@ -65,5 +62,4 @@ textOverflow: 'ellipsis',
 var truncatedTextIconStyles = (0, _react.css)({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
 });
@@ -70,0 +66,0 @@ var TitleIcon = function TitleIcon(_ref) {

dist/cjs/modal-wrapper.js

@@ -90,3 +90,3 @@ "use strict";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.3"
+    packageVersion: "12.10.4"
   });
@@ -93,0 +93,0 @@ var onBlanketClicked = (0, _react.useCallback)(function (e) {

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

 import _extends from "@babel/runtime/helpers/extends";
 /** @jsx jsx */
 import { useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
@@ -11,2 +11,3 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives';
@@ -20,2 +21,10 @@ import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Positioner from './positioner';
+
+// reset pointer-events on iframe inside modal
+const resetPointerEventsOnIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 const dialogStyles = css({
@@ -130,3 +139,5 @@ display: 'flex',
     "aria-modal": true
-  }), children))))));
+  }), children, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+    styles: resetPointerEventsOnIframeStyles
+  })))))));
 };
@@ -133,0 +144,0 @@

dist/es2019/internal/components/positioner.js

@@ -21,5 +21,5 @@ /* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
   zIndex: layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
@@ -38,8 +38,8 @@ const viewportScrollStyles = css({
     maxHeight: maxHeightDimensions,
-    marginRight: 'auto',
-    marginLeft: 'auto',
     position: 'absolute',
-    top: `${gutter}px`,
-    right: 0,
-    left: 0,
+    insetBlockStart: `${gutter}px`,
+    insetInlineEnd: 0,
+    insetInlineStart: 0,
+    marginInlineEnd: 'auto',
+    marginInlineStart: 'auto',
     pointerEvents: 'none'
@@ -46,0 +46,0 @@ }

dist/es2019/internal/components/scroll-container.js

@@ -28,6 +28,6 @@ /** @jsx jsx */
 const topKeylineStyles = css({
-  borderTop: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockStart: `${keylineHeight}px solid ${keylineColor}`
 });
 const bottomKeylineStyles = css({
-  borderBottom: `${keylineHeight}px solid ${keylineColor}`
+  borderBlockEnd: `${keylineHeight}px solid ${keylineColor}`
 });
@@ -34,0 +34,0 @@ /**

dist/es2019/modal-footer.js

@@ -8,10 +8,8 @@ /** @jsx jsx */
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: `${padding - keylineHeight}px`,
+  padding: padding,
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: `${padding - keylineHeight}px`
 });
@@ -18,0 +16,0 @@ /**

dist/es2019/modal-header.js

@@ -8,9 +8,7 @@ /** @jsx jsx */
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: `${padding - keylineHeight}px`,
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: `${padding - keylineHeight}px`
 });
@@ -17,0 +15,0 @@ /**

dist/es2019/modal-title.js

@@ -33,6 +33,5 @@ /** @jsx jsx */
 const iconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: `${titleIconMargin}px`,
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: `${titleIconMargin}px`
 });
@@ -47,7 +46,5 @@
 const truncatedTextStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: `${lineHeightOffset / 2}px`,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: `${lineHeightOffset / 2}px`,
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: `${lineHeightOffset / 2}px`,
+  marginBlockStart: `${lineHeightOffset / 2}px`,
   overflow: 'hidden',
@@ -58,5 +55,4 @@ textOverflow: 'ellipsis',
 const truncatedTextIconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: `${lineHeightOffset / 2}px`,
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: `${lineHeightOffset / 2}px`
 });
@@ -63,0 +59,0 @@ const TitleIcon = ({

dist/es2019/modal-wrapper.js

@@ -75,3 +75,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.3"
+    packageVersion: "12.10.4"
   });
@@ -78,0 +78,0 @@ const onBlanketClicked = useCallback(e => {

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

@@ -8,3 +8,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import { useMemo } from 'react';
-import { css, jsx } from '@emotion/react';
+import { css, Global, jsx } from '@emotion/react';
 import { useUID } from 'react-uid';
@@ -16,2 +16,3 @@ import mergeRefs from '@atlaskit/ds-lib/merge-refs';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { media } from '@atlaskit/primitives';
@@ -25,2 +26,10 @@ import { N0, N30A, N60A } from '@atlaskit/theme/colors';
 import Positioner from './positioner';
+
+// reset pointer-events on iframe inside modal
+var resetPointerEventsOnIframeStyles = css({
+  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
+  'iframe:is([aria-modal] iframe)': {
+    pointerEvents: 'auto'
+  }
+});
 var dialogStyles = css((_css = {
@@ -129,3 +138,5 @@ display: 'flex',
       "aria-modal": true
-    }), children));
+    }), children, getBooleanFF('platform.design-system-team.iframe_gojiv') && jsx(Global, {
+      styles: resetPointerEventsOnIframeStyles
+    })));
   }))));
@@ -132,0 +143,0 @@ };

dist/esm/internal/components/positioner.js

@@ -22,5 +22,5 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
   zIndex: layers.modal(),
-  top: 0,
-  left: 0,
-  flexDirection: 'column'
+  flexDirection: 'column',
+  insetBlockStart: 0,
+  insetInlineStart: 0
 });
@@ -37,8 +37,8 @@ var viewportScrollStyles = css(_defineProperty({
   maxHeight: maxHeightDimensions,
-  marginRight: 'auto',
-  marginLeft: 'auto',
   position: 'absolute',
-  top: "".concat(gutter, "px"),
-  right: 0,
-  left: 0,
+  insetBlockStart: "".concat(gutter, "px"),
+  insetInlineEnd: 0,
+  insetInlineStart: 0,
+  marginInlineEnd: 'auto',
+  marginInlineStart: 'auto',
   pointerEvents: 'none'
@@ -45,0 +45,0 @@ }));

dist/esm/internal/components/scroll-container.js

@@ -29,6 +29,6 @@ import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 var topKeylineStyles = css({
-  borderTop: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockStart: "".concat(keylineHeight, "px solid ").concat(keylineColor)
 });
 var bottomKeylineStyles = css({
-  borderBottom: "".concat(keylineHeight, "px solid ").concat(keylineColor)
+  borderBlockEnd: "".concat(keylineHeight, "px solid ").concat(keylineColor)
 });
@@ -35,0 +35,0 @@ /**

dist/esm/modal-footer.js

@@ -8,10 +8,8 @@ /** @jsx jsx */
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingTop: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
   justifyContent: 'flex-end',
-  gap: "var(--ds-space-100, 8px)"
+  gap: "var(--ds-space-100, 8px)",
+  paddingBlockStart: "".concat(padding - keylineHeight, "px")
 });
@@ -18,0 +16,0 @@ /**

dist/esm/modal-header.js

@@ -8,9 +8,7 @@ /** @jsx jsx */
   display: 'flex',
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
   padding: padding,
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  paddingBottom: "".concat(padding - keylineHeight, "px"),
   position: 'relative',
   alignItems: 'center',
-  justifyContent: 'space-between'
+  justifyContent: 'space-between',
+  paddingBlockEnd: "".concat(padding - keylineHeight, "px")
 });
@@ -17,0 +15,0 @@ /**

dist/esm/modal-title.js

@@ -33,6 +33,5 @@ /** @jsx jsx */
 var iconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-  marginRight: "".concat(titleIconMargin, "px"),
   flex: '0 0 auto',
-  alignSelf: 'start'
+  alignSelf: 'start',
+  marginInlineEnd: "".concat(titleIconMargin, "px")
 });
@@ -47,7 +46,5 @@
 var truncatedTextStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginTop: "".concat(lineHeightOffset / 2, "px"),
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
   lineHeight: adjustedLineHeight,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px"),
+  marginBlockStart: "".concat(lineHeightOffset / 2, "px"),
   overflow: 'hidden',
@@ -58,5 +55,4 @@ textOverflow: 'ellipsis',
 var truncatedTextIconStyles = css({
-  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage, @atlaskit/design-system/ensure-design-token-usage/preview
-  marginBottom: "".concat(lineHeightOffset / 2, "px"),
-  lineHeight: 1.2
+  lineHeight: 1.2,
+  marginBlockEnd: "".concat(lineHeightOffset / 2, "px")
 });
@@ -63,0 +59,0 @@ var TitleIcon = function TitleIcon(_ref) {

dist/esm/modal-wrapper.js

@@ -80,3 +80,3 @@ import _extends from "@babel/runtime/helpers/extends";
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.10.3"
+    packageVersion: "12.10.4"
   });
@@ -83,0 +83,0 @@ var onBlanketClicked = useCallback(function (e) {

package.json

 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.10.3",
+  "version": "12.10.4",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
@@ -42,5 +42,5 @@ "publishConfig": {
     "@atlaskit/portal": "^4.4.0",
-    "@atlaskit/primitives": "^1.15.0",
+    "@atlaskit/primitives": "^1.18.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.30.0",
+    "@atlaskit/tokens": "^1.34.0",
     "@babel/runtime": "^7.0.0",
@@ -67,3 +67,2 @@ "@emotion/react": "^11.7.1",
     "@atlaskit/visual-regression": "*",
-    "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
@@ -139,2 +138,5 @@ "@atlassian/feature-flags-test-utils": "*",
       "type": "boolean"
+    },
+    "platform.design-system-team.iframe_gojiv": {
+      "type": "boolean"
     }
@@ -141,0 +143,0 @@ },

No alert changes

Improved metrics

Dev dependency count

24

decreased by-4%

Lines of code

9584

increased by0.06%

Worsened metrics

Total package byte prevSize

449054

decreased by-0.1%

Dependency changes

• Updated@atlaskit/primitives@^1.18.0

• Updated@atlaskit/tokens@^1.34.0