@atlaskit/section-message 8.3.0 → 8.4.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 (12) hide show
  1. package/CHANGELOG.md +10 -0
  2. package/dist/cjs/section-message-action.compiled.css +2 -0
  3. package/dist/cjs/section-message-action.js +30 -11
  4. package/dist/es2019/section-message-action.compiled.css +2 -0
  5. package/dist/es2019/section-message-action.js +26 -7
  6. package/dist/esm/section-message-action.compiled.css +2 -0
  7. package/dist/esm/section-message-action.js +26 -7
  8. package/dist/types/section-message-action.d.ts +2 -2
  9. package/dist/types/types.d.ts +4 -0
  10. package/dist/types-ts4.5/section-message-action.d.ts +2 -2
  11. package/dist/types-ts4.5/types.d.ts +4 -0
  12. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,15 @@
1
1
  # @atlaskit/section-message
2
2
 
3
+ ## 8.4.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#189812](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189812)
8
+ [`1a7ddaeaf04ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a7ddaeaf04ce) -
9
+ [ux] We are testing a change behind a feature flag. Section message action link styles will
10
+ reflect and utilize `@atlaskit/link`, being regular font weight and also now support `target`
11
+ attributes. If this fix is successful it will be available in a later release.
12
+
3
13
  ## 8.3.0
4
14
 
5
15
  ### Minor Changes
package/dist/cjs/section-message-action.compiled.css CHANGED
@@ -1,9 +1,11 @@
1
1
 
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._bfhk1j28{background-color:transparent}
4
5
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
5
6
  ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
8
+ ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
7
9
  ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
8
10
  ._syaz14q2{color:var(--ds-link,#0c66e4)}
9
11
  ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
package/dist/cjs/section-message-action.js CHANGED
@@ -8,18 +8,25 @@ Object.defineProperty(exports, "__esModule", {
8
8
  });
9
9
  exports.default = void 0;
10
10
  require("./section-message-action.compiled.css");
11
- var _runtime = require("@compiled/react/runtime");
12
11
  var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
13
14
  var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
14
15
  var _css = require("@atlaskit/css");
16
+ var _link = _interopRequireDefault(require("@atlaskit/link"));
15
17
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
16
18
  var _compiled = require("@atlaskit/primitives/compiled");
17
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
18
- var styles = {
20
+ var stylesOld = {
19
21
  common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
20
22
  anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
21
23
  pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
22
24
  };
25
+ var styles = {
26
+ common: "_11c82smr",
27
+ anchor: "_k48pi7a9",
28
+ pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
29
+ };
23
30
 
24
31
  /**
25
32
  * __Section message action__
@@ -35,35 +42,47 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
35
42
  onClick = _ref.onClick,
36
43
  href = _ref.href,
37
44
  testId = _ref.testId,
38
- linkComponent = _ref.linkComponent;
45
+ linkComponent = _ref.linkComponent,
46
+ target = _ref.target;
39
47
  if (!linkComponent && (0, _platformFeatureFlags.fg)('platform_section_message_action_migration')) {
40
48
  if (href) {
41
- return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
49
+ if ((0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link')) {
50
+ return /*#__PURE__*/React.createElement("span", {
51
+ className: (0, _runtime.ax)([styles.common, styles.anchor])
52
+ }, /*#__PURE__*/React.createElement(_link.default, {
53
+ testId: testId,
54
+ onClick: onClick,
55
+ href: href,
56
+ target: target
57
+ }, children));
58
+ }
59
+ return /*#__PURE__*/React.createElement(_compiled.Anchor, {
42
60
  testId: testId,
43
61
  onClick: onClick,
44
62
  href: href,
45
- xcss: (0, _css.cx)(styles.common, styles.anchor)
63
+ xcss: (0, _css.cx)(stylesOld.common, stylesOld.anchor)
46
64
  }, children);
47
65
  }
48
66
  if (onClick) {
49
- return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
67
+ return /*#__PURE__*/React.createElement(_compiled.Pressable, {
50
68
  testId: testId,
51
69
  onClick: onClick,
52
- xcss: (0, _css.cx)(styles.common, styles.pressable)
70
+ xcss: (0, _css.cx)((0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link') ? styles.common : stylesOld.common, (0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link') ? styles.pressable : stylesOld.pressable)
53
71
  }, children);
54
72
  }
55
- return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
73
+ return /*#__PURE__*/React.createElement(_compiled.Box, {
56
74
  as: "span",
57
- testId: testId
75
+ testId: testId,
76
+ xcss: (0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link') && styles.common
58
77
  }, children);
59
78
  }
60
- return onClick || href ? /*#__PURE__*/_react.default.createElement(_standardButton.default, {
79
+ return onClick || href ? /*#__PURE__*/React.createElement(_standardButton.default, {
61
80
  testId: testId,
62
81
  appearance: "link",
63
82
  spacing: "none",
64
83
  onClick: onClick,
65
84
  href: href,
66
85
  component: href ? linkComponent : undefined
67
- }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
86
+ }, children) : /*#__PURE__*/React.createElement(_react.Fragment, null, children);
68
87
  });
69
88
  var _default = exports.default = SectionMessageAction;
package/dist/es2019/section-message-action.compiled.css CHANGED
@@ -1,9 +1,11 @@
1
1
 
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._bfhk1j28{background-color:transparent}
4
5
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
5
6
  ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
8
+ ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
7
9
  ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
8
10
  ._syaz14q2{color:var(--ds-link,#0c66e4)}
9
11
  ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
package/dist/es2019/section-message-action.js CHANGED
@@ -1,16 +1,23 @@
1
1
  /* section-message-action.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./section-message-action.compiled.css";
3
+ import * as React from 'react';
3
4
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { memo } from 'react';
5
+ import { Fragment, memo } from 'react';
5
6
  import Button from '@atlaskit/button/standard-button';
6
7
  import { cx } from '@atlaskit/css';
8
+ import Link from '@atlaskit/link';
7
9
  import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
9
- const styles = {
11
+ const stylesOld = {
10
12
  common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
11
13
  anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
12
14
  pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
13
15
  };
16
+ const styles = {
17
+ common: "_11c82smr",
18
+ anchor: "_k48pi7a9",
19
+ pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
20
+ };
14
21
 
15
22
  /**
16
23
  * __Section message action__
@@ -26,27 +33,39 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
26
33
  onClick,
27
34
  href,
28
35
  testId,
29
- linkComponent
36
+ linkComponent,
37
+ target
30
38
  }) {
31
39
  if (!linkComponent && fg('platform_section_message_action_migration')) {
32
40
  if (href) {
41
+ if (fg('platform_dst_section_message_actions_as_link')) {
42
+ return /*#__PURE__*/React.createElement("span", {
43
+ className: ax([styles.common, styles.anchor])
44
+ }, /*#__PURE__*/React.createElement(Link, {
45
+ testId: testId,
46
+ onClick: onClick,
47
+ href: href,
48
+ target: target
49
+ }, children));
50
+ }
33
51
  return /*#__PURE__*/React.createElement(Anchor, {
34
52
  testId: testId,
35
53
  onClick: onClick,
36
54
  href: href,
37
- xcss: cx(styles.common, styles.anchor)
55
+ xcss: cx(stylesOld.common, stylesOld.anchor)
38
56
  }, children);
39
57
  }
40
58
  if (onClick) {
41
59
  return /*#__PURE__*/React.createElement(Pressable, {
42
60
  testId: testId,
43
61
  onClick: onClick,
44
- xcss: cx(styles.common, styles.pressable)
62
+ xcss: cx(fg('platform_dst_section_message_actions_as_link') ? styles.common : stylesOld.common, fg('platform_dst_section_message_actions_as_link') ? styles.pressable : stylesOld.pressable)
45
63
  }, children);
46
64
  }
47
65
  return /*#__PURE__*/React.createElement(Box, {
48
66
  as: "span",
49
- testId: testId
67
+ testId: testId,
68
+ xcss: fg('platform_dst_section_message_actions_as_link') && styles.common
50
69
  }, children);
51
70
  }
52
71
  return onClick || href ? /*#__PURE__*/React.createElement(Button, {
@@ -56,6 +75,6 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
56
75
  onClick: onClick,
57
76
  href: href,
58
77
  component: href ? linkComponent : undefined
59
- }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
78
+ }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
60
79
  });
61
80
  export default SectionMessageAction;
package/dist/esm/section-message-action.compiled.css CHANGED
@@ -1,9 +1,11 @@
1
1
 
2
2
  ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
3
3
  ._19bvze3t{padding-left:var(--ds-space-0,0)}
4
+ ._bfhk1j28{background-color:transparent}
4
5
  ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
5
6
  ._ca0qze3t{padding-top:var(--ds-space-0,0)}
6
7
  ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
8
+ ._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
7
9
  ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
8
10
  ._syaz14q2{color:var(--ds-link,#0c66e4)}
9
11
  ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
package/dist/esm/section-message-action.js CHANGED
@@ -1,16 +1,23 @@
1
1
  /* section-message-action.tsx generated by @compiled/babel-plugin v0.36.1 */
2
2
  import "./section-message-action.compiled.css";
3
+ import * as React from 'react';
3
4
  import { ax, ix } from "@compiled/react/runtime";
4
- import React, { memo } from 'react';
5
+ import { Fragment, memo } from 'react';
5
6
  import Button from '@atlaskit/button/standard-button';
6
7
  import { cx } from '@atlaskit/css';
8
+ import Link from '@atlaskit/link';
7
9
  import { fg } from '@atlaskit/platform-feature-flags';
8
10
  import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
9
- var styles = {
11
+ var stylesOld = {
10
12
  common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
11
13
  anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
12
14
  pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
13
15
  };
16
+ var styles = {
17
+ common: "_11c82smr",
18
+ anchor: "_k48pi7a9",
19
+ pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
20
+ };
14
21
 
15
22
  /**
16
23
  * __Section message action__
@@ -26,26 +33,38 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
26
33
  onClick = _ref.onClick,
27
34
  href = _ref.href,
28
35
  testId = _ref.testId,
29
- linkComponent = _ref.linkComponent;
36
+ linkComponent = _ref.linkComponent,
37
+ target = _ref.target;
30
38
  if (!linkComponent && fg('platform_section_message_action_migration')) {
31
39
  if (href) {
40
+ if (fg('platform_dst_section_message_actions_as_link')) {
41
+ return /*#__PURE__*/React.createElement("span", {
42
+ className: ax([styles.common, styles.anchor])
43
+ }, /*#__PURE__*/React.createElement(Link, {
44
+ testId: testId,
45
+ onClick: onClick,
46
+ href: href,
47
+ target: target
48
+ }, children));
49
+ }
32
50
  return /*#__PURE__*/React.createElement(Anchor, {
33
51
  testId: testId,
34
52
  onClick: onClick,
35
53
  href: href,
36
- xcss: cx(styles.common, styles.anchor)
54
+ xcss: cx(stylesOld.common, stylesOld.anchor)
37
55
  }, children);
38
56
  }
39
57
  if (onClick) {
40
58
  return /*#__PURE__*/React.createElement(Pressable, {
41
59
  testId: testId,
42
60
  onClick: onClick,
43
- xcss: cx(styles.common, styles.pressable)
61
+ xcss: cx(fg('platform_dst_section_message_actions_as_link') ? styles.common : stylesOld.common, fg('platform_dst_section_message_actions_as_link') ? styles.pressable : stylesOld.pressable)
44
62
  }, children);
45
63
  }
46
64
  return /*#__PURE__*/React.createElement(Box, {
47
65
  as: "span",
48
- testId: testId
66
+ testId: testId,
67
+ xcss: fg('platform_dst_section_message_actions_as_link') && styles.common
49
68
  }, children);
50
69
  }
51
70
  return onClick || href ? /*#__PURE__*/React.createElement(Button, {
@@ -55,6 +74,6 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
55
74
  onClick: onClick,
56
75
  href: href,
57
76
  component: href ? linkComponent : undefined
58
- }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
77
+ }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
59
78
  });
60
79
  export default SectionMessageAction;
package/dist/types/section-message-action.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { SectionMessageActionProps } from './types';
3
3
  /**
4
4
  * __Section message action__
@@ -9,5 +9,5 @@ import type { SectionMessageActionProps } from './types';
9
9
  *
10
10
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
11
11
  */
12
- declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
12
+ declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
13
13
  export default SectionMessageAction;
package/dist/types/types.d.ts CHANGED
@@ -62,6 +62,10 @@ export interface SectionMessageActionProps {
62
62
  * The URL that the rendered link button will point to.
63
63
  */
64
64
  href?: string;
65
+ /**
66
+ * The target attribute of the link. This is only used if the href prop is passed.
67
+ */
68
+ target?: HTMLAnchorElement['target'];
65
69
  /**
66
70
  * A `testId` prop is a unique string that appears as a data attribute `data-testid`
67
71
  * in the rendered code, serving as a hook for automated tests.
package/dist/types-ts4.5/section-message-action.d.ts CHANGED
@@ -1,4 +1,4 @@
1
- import React from 'react';
1
+ /// <reference types="react" />
2
2
  import type { SectionMessageActionProps } from './types';
3
3
  /**
4
4
  * __Section message action__
@@ -9,5 +9,5 @@ import type { SectionMessageActionProps } from './types';
9
9
  *
10
10
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
11
11
  */
12
- declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
12
+ declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
13
13
  export default SectionMessageAction;
package/dist/types-ts4.5/types.d.ts CHANGED
@@ -62,6 +62,10 @@ export interface SectionMessageActionProps {
62
62
  * The URL that the rendered link button will point to.
63
63
  */
64
64
  href?: string;
65
+ /**
66
+ * The target attribute of the link. This is only used if the href prop is passed.
67
+ */
68
+ target?: HTMLAnchorElement['target'];
65
69
  /**
66
70
  * A `testId` prop is a unique string that appears as a data attribute `data-testid`
67
71
  * in the rendered code, serving as a hook for automated tests.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/section-message",
3
- "version": "8.3.0",
3
+ "version": "8.4.0",
4
4
  "description": "A section message is used to alert users to a particular section of the screen.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -43,6 +43,7 @@
43
43
  "@atlaskit/css": "^0.12.0",
44
44
  "@atlaskit/heading": "^5.2.0",
45
45
  "@atlaskit/icon": "^27.6.0",
46
+ "@atlaskit/link": "^3.2.0",
46
47
  "@atlaskit/platform-feature-flags": "^1.1.0",
47
48
  "@atlaskit/primitives": "^14.10.0",
48
49
  "@atlaskit/theme": "^19.0.0",
@@ -59,9 +60,8 @@
59
60
  "@atlaskit/analytics-next": "^11.1.0",
60
61
  "@atlaskit/code": "^17.2.0",
61
62
  "@atlaskit/docs": "^11.0.0",
62
- "@atlaskit/ds-lib": "^4.1.0",
63
+ "@atlaskit/ds-lib": "^5.0.0",
63
64
  "@atlaskit/form": "^12.0.0",
64
- "@atlaskit/link": "^3.2.0",
65
65
  "@atlaskit/range": "^9.1.0",
66
66
  "@atlassian/feature-flags-test-utils": "^0.3.0",
67
67
  "@atlassian/ssr-tests": "^0.2.0",
@@ -96,6 +96,9 @@
96
96
  "platform_section_message_action_migration": {
97
97
  "type": "boolean"
98
98
  },
99
+ "platform_dst_section_message_actions_as_link": {
100
+ "type": "boolean"
101
+ },
99
102
  "platform_ads_explicit_font_styles": {
100
103
  "type": "boolean"
101
104
  },