@atlaskit/modal-dialog 13.2.0 → 13.3.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/modal-body.js +6 -2
  3. package/dist/cjs/modal-wrapper.js +1 -1
  4. package/dist/es2019/modal-body.js +6 -2
  5. package/dist/es2019/modal-wrapper.js +1 -1
  6. package/dist/esm/modal-body.js +6 -2
  7. package/dist/esm/modal-wrapper.js +1 -1
  8. package/package.json +5 -2
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 13.3.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#129312](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/129312)
8
+ [`26ac9f1e06b2e`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/26ac9f1e06b2e) -
9
+ Modal body now explicitly sets the font style to use typography tokens, instead of relying on the
10
+ CSS reset to be present. This change is behind the feature flag
11
+ `platform_ads_explicit_font_styles`.
12
+
3
13
  ## 13.2.0
4
14
 
5
15
  ### Minor Changes
package/dist/cjs/modal-body.js CHANGED
@@ -8,6 +8,7 @@ exports.default = void 0;
8
8
  var _react = _interopRequireDefault(require("react"));
9
9
  var _react2 = require("@emotion/react");
10
10
  var _reactScrolllock = require("react-scrolllock");
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
11
12
  var _hooks = require("./hooks");
12
13
  var _scrollContainer = _interopRequireDefault(require("./internal/components/scroll-container"));
13
14
  var _useScroll = _interopRequireDefault(require("./internal/hooks/use-scroll"));
@@ -22,6 +23,9 @@ var bodyStyles = (0, _react2.css)({
22
23
  /* This ensures the body fills the whole space between header and footer. */
23
24
  flex: '1 1 auto'
24
25
  });
26
+ var fontStyles = (0, _react2.css)({
27
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
28
+ });
25
29
 
26
30
  /**
27
31
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -57,12 +61,12 @@ var ModalBody = function ModalBody(props) {
57
61
  var shouldScrollInViewport = (0, _useScroll.default)();
58
62
  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
59
63
  return shouldScrollInViewport ? (0, _react2.jsx)("div", {
60
- css: [bodyStyles, viewportScrollStyles],
64
+ css: [bodyStyles, viewportScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
61
65
  "data-testid": testId
62
66
  }, children) : (0, _react2.jsx)(_reactScrolllock.TouchScrollable, null, (0, _react2.jsx)(_scrollContainer.default, {
63
67
  testId: userDefinedTestId || modalTestId
64
68
  }, (0, _react2.jsx)("div", {
65
- css: [bodyStyles, bodyScrollStyles],
69
+ css: [bodyStyles, bodyScrollStyles, (0, _platformFeatureFlags.fg)('platform_ads_explicit_font_styles') && fontStyles],
66
70
  "data-testid": testId
67
71
  }, children)));
68
72
  };
package/dist/cjs/modal-wrapper.js CHANGED
@@ -102,7 +102,7 @@ var ModalWrapper = function ModalWrapper(props) {
102
102
  action: 'closed',
103
103
  componentName: 'modalDialog',
104
104
  packageName: "@atlaskit/modal-dialog",
105
- packageVersion: "13.2.0"
105
+ packageVersion: "13.3.0"
106
106
  });
107
107
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
108
108
  if (shouldCloseOnOverlayClick) {
package/dist/es2019/modal-body.js CHANGED
@@ -8,6 +8,7 @@ import React from 'react';
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { TouchScrollable } from 'react-scrolllock';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { useModal } from './hooks';
12
13
  import ScrollContainer from './internal/components/scroll-container';
13
14
  import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ const bodyStyles = css({
15
16
  /* This ensures the body fills the whole space between header and footer. */
16
17
  flex: '1 1 auto'
17
18
  });
19
+ const fontStyles = css({
20
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
21
+ });
18
22
 
19
23
  /**
20
24
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -53,12 +57,12 @@ const ModalBody = props => {
53
57
  const shouldScrollInViewport = useScroll();
54
58
  const testId = userDefinedTestId || modalTestId && `${modalTestId}--body`;
55
59
  return shouldScrollInViewport ? jsx("div", {
56
- css: [bodyStyles, viewportScrollStyles],
60
+ css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
57
61
  "data-testid": testId
58
62
  }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
59
63
  testId: userDefinedTestId || modalTestId
60
64
  }, jsx("div", {
61
- css: [bodyStyles, bodyScrollStyles],
65
+ css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
62
66
  "data-testid": testId
63
67
  }, children)));
64
68
  };
package/dist/es2019/modal-wrapper.js CHANGED
@@ -88,7 +88,7 @@ const ModalWrapper = props => {
88
88
  action: 'closed',
89
89
  componentName: 'modalDialog',
90
90
  packageName: "@atlaskit/modal-dialog",
91
- packageVersion: "13.2.0"
91
+ packageVersion: "13.3.0"
92
92
  });
93
93
  const onBlanketClicked = useCallback(e => {
94
94
  if (shouldCloseOnOverlayClick) {
package/dist/esm/modal-body.js CHANGED
@@ -8,6 +8,7 @@ import React from 'react';
8
8
  // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
9
  import { css, jsx } from '@emotion/react';
10
10
  import { TouchScrollable } from 'react-scrolllock';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { useModal } from './hooks';
12
13
  import ScrollContainer from './internal/components/scroll-container';
13
14
  import useScroll from './internal/hooks/use-scroll';
@@ -15,6 +16,9 @@ var bodyStyles = css({
15
16
  /* This ensures the body fills the whole space between header and footer. */
16
17
  flex: '1 1 auto'
17
18
  });
19
+ var fontStyles = css({
20
+ font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, \"Helvetica Neue\", sans-serif)"
21
+ });
18
22
 
19
23
  /**
20
24
  * Adding the padding here avoids cropping the keyline on its sides.
@@ -50,12 +54,12 @@ var ModalBody = function ModalBody(props) {
50
54
  var shouldScrollInViewport = useScroll();
51
55
  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--body");
52
56
  return shouldScrollInViewport ? jsx("div", {
53
- css: [bodyStyles, viewportScrollStyles],
57
+ css: [bodyStyles, viewportScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
54
58
  "data-testid": testId
55
59
  }, children) : jsx(TouchScrollable, null, jsx(ScrollContainer, {
56
60
  testId: userDefinedTestId || modalTestId
57
61
  }, jsx("div", {
58
- css: [bodyStyles, bodyScrollStyles],
62
+ css: [bodyStyles, bodyScrollStyles, fg('platform_ads_explicit_font_styles') && fontStyles],
59
63
  "data-testid": testId
60
64
  }, children)));
61
65
  };
package/dist/esm/modal-wrapper.js CHANGED
@@ -92,7 +92,7 @@ var ModalWrapper = function ModalWrapper(props) {
92
92
  action: 'closed',
93
93
  componentName: 'modalDialog',
94
94
  packageName: "@atlaskit/modal-dialog",
95
- packageVersion: "13.2.0"
95
+ packageVersion: "13.3.0"
96
96
  });
97
97
  var onBlanketClicked = useCallback(function (e) {
98
98
  if (shouldCloseOnOverlayClick) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "13.2.0",
3
+ "version": "13.3.0",
4
4
  "description": "A modal dialog displays content that requires user interaction, in a layer above the page.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -40,7 +40,7 @@
40
40
  "@atlaskit/platform-feature-flags": "^1.1.0",
41
41
  "@atlaskit/portal": "^5.1.0",
42
42
  "@atlaskit/pragmatic-drag-and-drop": "^1.5.0",
43
- "@atlaskit/primitives": "^14.1.0",
43
+ "@atlaskit/primitives": "^14.2.0",
44
44
  "@atlaskit/theme": "^18.0.0",
45
45
  "@atlaskit/tokens": "^4.5.0",
46
46
  "@babel/runtime": "^7.0.0",
@@ -147,6 +147,9 @@
147
147
  "platform_design_system_motion_on_finish_fix": {
148
148
  "type": "boolean",
149
149
  "referenceOnly": "true"
150
+ },
151
+ "platform_ads_explicit_font_styles": {
152
+ "type": "boolean"
150
153
  }
151
154
  },
152
155
  "homepage": "https://atlassian.design/components/modal-dialog/"