@atlaskit/modal-dialog 12.18.4 → 12.19.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.
package/CHANGELOG.md CHANGED
@@ -1,5 +1,19 @@
1
1
  # @atlaskit/modal-dialog
2
2
 
3
+ ## 12.19.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#100038](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/100038)
8
+ [`f4fe1a42a5809`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f4fe1a42a5809) -
9
+ Move the icon in a modal title (when present) out of the H1 tag
10
+
11
+ ## 12.18.5
12
+
13
+ ### Patch Changes
14
+
15
+ - Updated dependencies
16
+
3
17
  ## 12.18.4
4
18
 
5
19
  ### Patch Changes
@@ -30,7 +30,7 @@ var bodyStyles = (0, _react2.css)({
30
30
  * keyline height from header and footer using negative margins.
31
31
  */
32
32
  var bodyScrollStyles = (0, _react2.css)({
33
- // 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
33
+ // 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, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
34
34
  paddingBlock: _constants.keylineHeight,
35
35
  paddingInline: "var(--ds-space-300, 24px)"
36
36
  });
@@ -8,6 +8,8 @@ exports.default = void 0;
8
8
  var _react = require("@emotion/react");
9
9
  var _error = _interopRequireDefault(require("@atlaskit/icon/core/migration/error"));
10
10
  var _warning = _interopRequireDefault(require("@atlaskit/icon/core/migration/warning"));
11
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
12
+ var _primitives = require("@atlaskit/primitives");
11
13
  var _hooks = require("./hooks");
12
14
  var _constants = require("./internal/constants");
13
15
  /**
@@ -40,10 +42,14 @@ var iconStyles = (0, _react.css)({
40
42
  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
41
43
  // When the override is removed, these can be removed.
42
44
  color: 'inherit',
45
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
43
46
  fontSize: 'inherit',
44
47
  fontStyle: 'inherit',
48
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
45
49
  fontWeight: 'inherit',
50
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
46
51
  letterSpacing: 'inherit',
52
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
47
53
  lineHeight: 'inherit'
48
54
  });
49
55
  var truncatedTextStyles = (0, _react.css)({
@@ -81,7 +87,18 @@ var ModalTitle = function ModalTitle(props) {
81
87
  titleId = _useModal.titleId,
82
88
  modalTestId = _useModal.testId;
83
89
  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
84
- return (0, _react.jsx)("h1", {
90
+ return (0, _platformFeatureFlags.fg)('platform_modal-dialog-heading-icon-a11y-fix') ? (0, _react.jsx)(_primitives.Flex, {
91
+ gap: "space.100"
92
+ }, appearance && (0, _react.jsx)(TitleIcon, {
93
+ appearance: appearance
94
+ }), (0, _react.jsx)("h1", {
95
+ css: titleStyles,
96
+ "data-testid": testId
97
+ }, (0, _react.jsx)("span", {
98
+ id: titleId,
99
+ css: [textStyles, !isMultiline && truncatedTextStyles],
100
+ "data-testid": testId && "".concat(testId, "-text")
101
+ }, children))) : (0, _react.jsx)("h1", {
85
102
  css: titleStyles,
86
103
  "data-testid": testId
87
104
  }, appearance && (0, _react.jsx)(TitleIcon, {
@@ -108,7 +108,7 @@ var ModalWrapper = function ModalWrapper(props) {
108
108
  action: 'closed',
109
109
  componentName: 'modalDialog',
110
110
  packageName: "@atlaskit/modal-dialog",
111
- packageVersion: "12.18.4"
111
+ packageVersion: "12.19.0"
112
112
  });
113
113
  var onBlanketClicked = (0, _react.useCallback)(function (e) {
114
114
  if (shouldCloseOnOverlayClick) {
@@ -23,7 +23,7 @@ const bodyStyles = css({
23
23
  * keyline height from header and footer using negative margins.
24
24
  */
25
25
  const bodyScrollStyles = css({
26
- // 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
26
+ // 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, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
27
27
  paddingBlock: keylineHeight,
28
28
  paddingInline: "var(--ds-space-300, 24px)"
29
29
  });
@@ -7,6 +7,8 @@
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import ErrorIcon from '@atlaskit/icon/core/migration/error';
9
9
  import WarningIcon from '@atlaskit/icon/core/migration/warning';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { Flex } from '@atlaskit/primitives';
10
12
  import { useModal } from './hooks';
11
13
  import { iconColor } from './internal/constants';
12
14
  const titleStyles = css({
@@ -32,10 +34,14 @@ const iconStyles = css({
32
34
  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
33
35
  // When the override is removed, these can be removed.
34
36
  color: 'inherit',
37
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
35
38
  fontSize: 'inherit',
36
39
  fontStyle: 'inherit',
40
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
37
41
  fontWeight: 'inherit',
42
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
38
43
  letterSpacing: 'inherit',
44
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
39
45
  lineHeight: 'inherit'
40
46
  });
41
47
  const truncatedTextStyles = css({
@@ -76,7 +82,18 @@ const ModalTitle = props => {
76
82
  testId: modalTestId
77
83
  } = useModal();
78
84
  const testId = userDefinedTestId || modalTestId && `${modalTestId}--title`;
79
- return jsx("h1", {
85
+ return fg('platform_modal-dialog-heading-icon-a11y-fix') ? jsx(Flex, {
86
+ gap: "space.100"
87
+ }, appearance && jsx(TitleIcon, {
88
+ appearance: appearance
89
+ }), jsx("h1", {
90
+ css: titleStyles,
91
+ "data-testid": testId
92
+ }, jsx("span", {
93
+ id: titleId,
94
+ css: [textStyles, !isMultiline && truncatedTextStyles],
95
+ "data-testid": testId && `${testId}-text`
96
+ }, children))) : jsx("h1", {
80
97
  css: titleStyles,
81
98
  "data-testid": testId
82
99
  }, appearance && jsx(TitleIcon, {
@@ -93,7 +93,7 @@ const ModalWrapper = props => {
93
93
  action: 'closed',
94
94
  componentName: 'modalDialog',
95
95
  packageName: "@atlaskit/modal-dialog",
96
- packageVersion: "12.18.4"
96
+ packageVersion: "12.19.0"
97
97
  });
98
98
  const onBlanketClicked = useCallback(e => {
99
99
  if (shouldCloseOnOverlayClick) {
@@ -23,7 +23,7 @@ var bodyStyles = css({
23
23
  * keyline height from header and footer using negative margins.
24
24
  */
25
25
  var bodyScrollStyles = css({
26
- // 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
26
+ // 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, @atlaskit/design-system/use-tokens-typography -- Ignored via go/DSP-18766
27
27
  paddingBlock: keylineHeight,
28
28
  paddingInline: "var(--ds-space-300, 24px)"
29
29
  });
@@ -7,6 +7,8 @@
7
7
  import { css, jsx } from '@emotion/react';
8
8
  import ErrorIcon from '@atlaskit/icon/core/migration/error';
9
9
  import WarningIcon from '@atlaskit/icon/core/migration/warning';
10
+ import { fg } from '@atlaskit/platform-feature-flags';
11
+ import { Flex } from '@atlaskit/primitives';
10
12
  import { useModal } from './hooks';
11
13
  import { iconColor } from './internal/constants';
12
14
  var titleStyles = css({
@@ -32,10 +34,14 @@ var iconStyles = css({
32
34
  // https://stash.atlassian.com/projects/JIRACLOUD/repos/jira/browse/jira-components/jira-legacy-frontend/jira-atlaskit-module/src/main/resources/jira-atlaskit-module/css/adg3-general-overrides.less?at=master#24
33
35
  // When the override is removed, these can be removed.
34
36
  color: 'inherit',
37
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
35
38
  fontSize: 'inherit',
36
39
  fontStyle: 'inherit',
40
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
37
41
  fontWeight: 'inherit',
42
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
38
43
  letterSpacing: 'inherit',
44
+ // eslint-disable-next-line @atlaskit/design-system/use-tokens-typography
39
45
  lineHeight: 'inherit'
40
46
  });
41
47
  var truncatedTextStyles = css({
@@ -73,7 +79,18 @@ var ModalTitle = function ModalTitle(props) {
73
79
  titleId = _useModal.titleId,
74
80
  modalTestId = _useModal.testId;
75
81
  var testId = userDefinedTestId || modalTestId && "".concat(modalTestId, "--title");
76
- return jsx("h1", {
82
+ return fg('platform_modal-dialog-heading-icon-a11y-fix') ? jsx(Flex, {
83
+ gap: "space.100"
84
+ }, appearance && jsx(TitleIcon, {
85
+ appearance: appearance
86
+ }), jsx("h1", {
87
+ css: titleStyles,
88
+ "data-testid": testId
89
+ }, jsx("span", {
90
+ id: titleId,
91
+ css: [textStyles, !isMultiline && truncatedTextStyles],
92
+ "data-testid": testId && "".concat(testId, "-text")
93
+ }, children))) : jsx("h1", {
77
94
  css: titleStyles,
78
95
  "data-testid": testId
79
96
  }, appearance && jsx(TitleIcon, {
@@ -98,7 +98,7 @@ var ModalWrapper = function ModalWrapper(props) {
98
98
  action: 'closed',
99
99
  componentName: 'modalDialog',
100
100
  packageName: "@atlaskit/modal-dialog",
101
- packageVersion: "12.18.4"
101
+ packageVersion: "12.19.0"
102
102
  });
103
103
  var onBlanketClicked = useCallback(function (e) {
104
104
  if (shouldCloseOnOverlayClick) {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/modal-dialog",
3
- "version": "12.18.4",
3
+ "version": "12.19.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/"
@@ -29,7 +29,7 @@
29
29
  },
30
30
  "dependencies": {
31
31
  "@atlaskit/analytics-next": "^10.2.0",
32
- "@atlaskit/blanket": "^13.3.0",
32
+ "@atlaskit/blanket": "^14.0.0",
33
33
  "@atlaskit/codemod-utils": "^4.2.0",
34
34
  "@atlaskit/ds-lib": "^3.3.0",
35
35
  "@atlaskit/focus-ring": "^2.0.0",
@@ -37,11 +37,11 @@
37
37
  "@atlaskit/layering": "^1.0.0",
38
38
  "@atlaskit/motion": "^1.9.0",
39
39
  "@atlaskit/platform-feature-flags": "^0.3.0",
40
- "@atlaskit/portal": "^4.9.0",
40
+ "@atlaskit/portal": "^4.10.0",
41
41
  "@atlaskit/pragmatic-drag-and-drop": "^1.4.0",
42
42
  "@atlaskit/primitives": "^13.3.0",
43
43
  "@atlaskit/theme": "^14.0.0",
44
- "@atlaskit/tokens": "^2.4.0",
44
+ "@atlaskit/tokens": "^2.5.0",
45
45
  "@babel/runtime": "^7.0.0",
46
46
  "@emotion/react": "^11.7.1",
47
47
  "bind-event-listener": "^3.0.0",
@@ -61,7 +61,7 @@
61
61
  "@atlaskit/dropdown-menu": "^12.23.0",
62
62
  "@atlaskit/popup": "^1.30.0",
63
63
  "@atlaskit/radio": "^7.0.0",
64
- "@atlaskit/select": "^18.8.0",
64
+ "@atlaskit/select": "^18.9.0",
65
65
  "@atlaskit/ssr": "*",
66
66
  "@atlaskit/textfield": "^6.7.0",
67
67
  "@atlaskit/tooltip": "^19.0.0",
@@ -131,6 +131,9 @@
131
131
  },
132
132
  "platform_dst_allowlist-aui-dialog-for-ak-modal": {
133
133
  "type": "boolean"
134
+ },
135
+ "platform_modal-dialog-heading-icon-a11y-fix": {
136
+ "type": "boolean"
134
137
  }
135
138
  },
136
139
  "homepage": "https://atlassian.design/components/modal-dialog/"