@atlaskit/modal-dialog 12.8.1 → 12.8.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/modal-dialog
 
+## 12.8.3
+
+### Patch Changes
+
+- [#41628](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41628) [`b05664f7aba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b05664f7aba) - Use feature flag to toggle if we enable UNSAFE_LAYERING
+
+## 12.8.2
+
+### Patch Changes
+
+- [#40650](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/40650) [`07aa588c8a4`](https://bitbucket.org/atlassian/atlassian-frontend/commits/07aa588c8a4) - Reverts the fix to text descender cut-off, due to incompatibilities with Firefox and Safari.
+
 ## 12.8.1
 
 ### Patch Changes

package/dist/cjs/modal-title.js

@@ -50,27 +50,19 @@ 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, @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,
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  },
-  '@supports not (overflow-x: clip)': {
-    // 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,
-    overflow: 'hidden'
-  }
+  whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = (0, _react.css)({
-  '@supports not (overflow-x: clip)': {
-    // 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
-  }
+  // 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
 });
 var TitleIcon = function TitleIcon(_ref) {
   var appearance = _ref.appearance,

package/dist/cjs/modal-wrapper.js

@@ -16,6 +16,7 @@ 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"));
@@ -86,7 +87,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.8.1"
+    packageVersion: "12.8.3"
   });
   var onBlanketClicked = (0, _react.useCallback)(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -111,7 +112,9 @@ var ModalWrapper = function ModalWrapper(props) {
     onCloseComplete: onCloseComplete,
     onOpenComplete: onOpenComplete
   }, children));
-  return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, null, (0, _react2.jsx)(_portal.default, {
+  return (0, _react2.jsx)(_layering.UNSAFE_LAYERING, {
+    isDisabled: (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.layering_qmiw3') ? false : true
+  }, (0, _react2.jsx)(_portal.default, {
     zIndex: _constants.layers.modal()
   }, (0, _react2.jsx)(_fadeIn.default, null, function (fadeInProps) {
     return (0, _react2.jsx)("div", (0, _extends2.default)({}, fadeInProps, {

package/dist/es2019/modal-title.js

@@ -43,27 +43,19 @@ const iconStyles = css({
  */
 const lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 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,
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  },
-  '@supports not (overflow-x: clip)': {
-    // 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,
-    overflow: 'hidden'
-  }
+  whiteSpace: 'nowrap'
 });
 const truncatedTextIconStyles = css({
-  '@supports not (overflow-x: clip)': {
-    // 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
-  }
+  // 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
 });
 const TitleIcon = ({
   appearance,

package/dist/es2019/modal-wrapper.js

@@ -10,6 +10,7 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -71,7 +72,7 @@ const ModalWrapper = props => {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.8.1"
+    packageVersion: "12.8.3"
   });
   const onBlanketClicked = useCallback(e => {
     if (shouldCloseOnOverlayClick) {
@@ -96,7 +97,9 @@ const ModalWrapper = props => {
     onCloseComplete: onCloseComplete,
     onOpenComplete: onOpenComplete
   }, children));
-  return jsx(UNSAFE_LAYERING, null, jsx(Portal, {
+  return jsx(UNSAFE_LAYERING, {
+    isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+  }, jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, fadeInProps => jsx("div", _extends({}, fadeInProps, {
     css: fillScreenStyles,

package/dist/esm/modal-title.js

@@ -43,27 +43,19 @@ var iconStyles = css({
  */
 var lineHeightOffset = fontSize - fontSize * adjustedLineHeight;
 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,
+  overflow: 'hidden',
   textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap',
-  // Use "clip" overflow to allow ellipses on x-axis without clipping descenders
-  '@supports (overflow-x: clip)': {
-    overflowX: 'clip'
-  },
-  '@supports not (overflow-x: clip)': {
-    // 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,
-    overflow: 'hidden'
-  }
+  whiteSpace: 'nowrap'
 });
 var truncatedTextIconStyles = css({
-  '@supports not (overflow-x: clip)': {
-    // 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
-  }
+  // 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
 });
 var TitleIcon = function TitleIcon(_ref) {
   var appearance = _ref.appearance,

package/dist/esm/modal-wrapper.js

@@ -10,6 +10,7 @@ import Blanket from '@atlaskit/blanket';
 import noop from '@atlaskit/ds-lib/noop';
 import { UNSAFE_LAYERING } from '@atlaskit/layering';
 import FadeIn from '@atlaskit/motion/fade-in';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import Portal from '@atlaskit/portal';
 import { layers } from '@atlaskit/theme/constants';
 import ModalDialog from './internal/components/modal-dialog';
@@ -76,7 +77,7 @@ var ModalWrapper = function ModalWrapper(props) {
     action: 'closed',
     componentName: 'modalDialog',
     packageName: "@atlaskit/modal-dialog",
-    packageVersion: "12.8.1"
+    packageVersion: "12.8.3"
   });
   var onBlanketClicked = useCallback(function (e) {
     if (shouldCloseOnOverlayClick) {
@@ -101,7 +102,9 @@ var ModalWrapper = function ModalWrapper(props) {
     onCloseComplete: onCloseComplete,
     onOpenComplete: onOpenComplete
   }, children));
-  return jsx(UNSAFE_LAYERING, null, jsx(Portal, {
+  return jsx(UNSAFE_LAYERING, {
+    isDisabled: getBooleanFF('platform.design-system-team.layering_qmiw3') ? false : true
+  }, jsx(Portal, {
     zIndex: layers.modal()
   }, jsx(FadeIn, null, function (fadeInProps) {
     return jsx("div", _extends({}, fadeInProps, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/modal-dialog",
-  "version": "12.8.1",
+  "version": "12.8.3",
   "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -34,10 +34,11 @@
     "@atlaskit/icon": "^21.12.0",
     "@atlaskit/layering": "^0.2.0",
     "@atlaskit/motion": "^1.5.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/portal": "^4.3.0",
     "@atlaskit/primitives": "^1.6.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.25.0",
+    "@atlaskit/tokens": "^1.27.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1",
@@ -54,10 +55,14 @@
     "@af/integration-testing": "*",
     "@af/visual-regression": "*",
     "@atlaskit/button": "*",
+    "@atlaskit/dropdown-menu": "^12.0.0",
+    "@atlaskit/popup": "^1.10.0",
+    "@atlaskit/select": "^16.7.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/dom": "^8.17.1",
     "@testing-library/react": "^12.1.5",
     "@testing-library/react-hooks": "^8.0.1",
@@ -116,6 +121,15 @@
     "./modal-footer": "./src/modal-footer.tsx",
     "./modal-transition": "./src/modal-transition.tsx"
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.layering_qmiw3": {
+      "type": "boolean"
+    },
+    "platform.design-system-team.popup-select-close_8h15h": {
+      "type": "boolean",
+      "referenceOnly": "true"
+    }
+  },
   "homepage": "https://atlassian.design/components/modal-dialog/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }