@atlaskit/modal-dialog 13.2.0 → 13.4.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/modal-dialog
 
+## 13.4.0
+
+### Minor Changes
+
+- [#129320](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129320)
+  [`1993bb92c16b6`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1993bb92c16b6) -
+  [ux] Add legacy AUI modal to focus lock allowlist by default
+
+## 13.3.0
+
+### Minor Changes
+
+- [#129312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129312)
+  [`26ac9f1e06b2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26ac9f1e06b2e) -
+  Modal body now explicitly sets the font style to use typography tokens, instead of relying on the
+  CSS reset to be present. This change is behind the feature flag
+  `platform_ads_explicit_font_styles`.
+
 ## 13.2.0
 
 ### Minor Changes

package/dist/cjs/modal-body.js

@@ -8,6 +8,7 @@ exports.default = void 0;
 var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactScrolllock = require("react-scrolllock");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _hooks = require("./hooks");
 var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
 var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
@@ -22,6 +23,9 @@ var bodyStyles = (0, _react2.css)({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+var fontStyles = (0, _react2.css)({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -57,12 +61,12 @@ var ModalBody = function ModalBody(props) {
   var shouldScrollInViewport = (0, _useScroll.default)();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
   return shouldScrollInViewport ? (0, _react2.jsx)("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react2.jsx)(_scrollContainer.default, {
     testId: userDefinedTestId || modalTestId
   }, (0, _react2.jsx)("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/cjs/modal-wrapper.js

@@ -16,7 +16,6 @@ var _blanket = _interopRequireDefault(require("@atlaskit/blanket"));
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _layering = require("@atlaskit/layering");
 var _fadeIn = _interopRequireDefault(require("@atlaskit/motion/fade-in"));
-var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _portal = _interopRequireDefault(require("@atlaskit/portal"));
 var _constants = require("@atlaskit/theme/constants");
 var _modalDialog = _interopRequireDefault(require("./internal/components/modal-dialog"));
@@ -41,11 +40,9 @@ var fillScreenStyles = (0, _react2.css)({
   WebkitOverflowScrolling: 'touch'
 });
 var allowlistElements = function allowlistElements(element, callback) {
-  var isAuiDialogAllowlisted = (0, _platformFeatureFlags.fg)('platform_dst_allowlist-aui-dialog-for-ak-modal');
   // Allow focus to reach elements outside the modal:
-
   // if AUI dialog is allowListed and visible
-  if (isAuiDialogAllowlisted && !!document.querySelector('.aui-blanket:not([hidden])')) {
+  if (!!document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // allows to pass a callback function to allow elements be ignored by focus lock
@@ -102,7 +99,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {

package/dist/es2019/modal-body.js

@@ -8,6 +8,7 @@ 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 { TouchScrollable } from 'react-scrolllock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
 import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ const bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+const fontStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -53,12 +57,12 @@ const ModalBody = props => {
   const shouldScrollInViewport = useScroll();
   const testId = userDefinedTestId || modalTestId && `${modalTestId}--body`;
   return shouldScrollInViewport ? jsx("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
     testId: userDefinedTestId || modalTestId
   }, jsx("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/es2019/modal-wrapper.js

@@ -15,7 +15,6 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -31,11 +30,9 @@ const fillScreenStyles = css({
   WebkitOverflowScrolling: 'touch'
 });
 const allowlistElements = (element, callback) => {
-  const isAuiDialogAllowlisted = fg('platform_dst_allowlist-aui-dialog-for-ak-modal');
   // Allow focus to reach elements outside the modal:
-
   // if AUI dialog is allowListed and visible
-  if (isAuiDialogAllowlisted && !!document.querySelector('.aui-blanket:not([hidden])')) {
+  if (!!document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // allows to pass a callback function to allow elements be ignored by focus lock
@@ -88,7 +85,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {

package/dist/esm/modal-body.js

@@ -8,6 +8,7 @@ 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 { TouchScrollable } from 'react-scrolllock';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { useModal } from './hooks';
 import ScrollContainer from './internal/components/scroll-container';
 import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ var bodyStyles = css({
   /* This ensures the body fills the whole space between header and footer. */
   flex: '1 1 auto'
 });
+var fontStyles = css({
+  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
+});
 
 /**
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -50,12 +54,12 @@ var ModalBody = function ModalBody(props) {
   var shouldScrollInViewport = useScroll();
   var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
   return shouldScrollInViewport ? jsx("div", {
-    css: [bodyStyles, viewportScrollStyles],
+    css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
     testId: userDefinedTestId || modalTestId
   }, jsx("div", {
-    css: [bodyStyles, bodyScrollStyles],
+    css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
     "data-testid": testId
   }, children)));
 };

package/dist/esm/modal-wrapper.js

@@ -15,7 +15,6 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { Layering } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
-import { fg } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -31,11 +30,9 @@ var fillScreenStyles = css({
   WebkitOverflowScrolling: 'touch'
 });
 var allowlistElements = function allowlistElements(element, callback) {
-  var isAuiDialogAllowlisted = fg('platform_dst_allowlist-aui-dialog-for-ak-modal');
   // Allow focus to reach elements outside the modal:
-
   // if AUI dialog is allowListed and visible
-  if (isAuiDialogAllowlisted && !!document.querySelector('.aui-blanket:not([hidden])')) {
+  if (!!document.querySelector('.aui-blanket:not([hidden])')) {
     return false;
   }
   // allows to pass a callback function to allow elements be ignored by focus lock
@@ -92,7 +89,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "13.2.0"
+    packageVersion: "13.4.0"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/modal-dialog",
-	"version": "13.2.0",
+	"version": "13.4.0",
 	"description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/portal": "^5.1.0",
 		"@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
-		"@atlaskit/primitives": "^14.1.0",
+		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
 		"@babel/runtime": "^7.0.0",
@@ -138,15 +138,15 @@
 			"type": "boolean",
 			"referenceOnly": true
 		},
-		"platform_dst_allowlist-aui-dialog-for-ak-modal": {
-			"type": "boolean"
-		},
 		"platform_modal-dialog-heading-icon-a11y-fix": {
 			"type": "boolean"
 		},
 		"platform_design_system_motion_on_finish_fix": {
 			"type": "boolean",
 			"referenceOnly": "true"
+		},
+		"platform_ads_explicit_font_styles": {
+			"type": "boolean"
 		}
 	},
 	"homepage": "https://atlassian.design/components/modal-dialog/"