@atlaskit/section-message 8.3.0 → 8.5.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/section-message
 
+## 8.5.0
+
+### Minor Changes
+
+- [#191290](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/191290)
+  [`65bf86ed3a096`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/65bf86ed3a096) -
+  Adds new prop `isDismissible` that allows messages to be dismissed and removed from the page.
+
+## 8.4.0
+
+### Minor Changes
+
+- [#189812](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/189812)
+  [`1a7ddaeaf04ce`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/1a7ddaeaf04ce) -
+  [ux] We are testing a change behind a feature flag. Section message action link styles will
+  reflect and utilize `@atlaskit/link`, being regular font weight and also now support `target`
+  attributes. If this fix is successful it will be available in a later release.
+
 ## 8.3.0
 
 ### Minor Changes

package/dist/cjs/section-message-action.compiled.css

@@ -1,9 +1,11 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhk1j28{background-color:transparent}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz14q2{color:var(--ds-link,#0c66e4)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}

package/dist/cjs/section-message-action.js

@@ -8,18 +8,25 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./section-message-action.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
 var _css = require("@atlaskit/css");
+var _link = _interopRequireDefault(require("@atlaskit/link"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 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); }
-var styles = {
+var stylesOld = {
   common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
   anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
   pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
 };
+var styles = {
+  common: "_11c82smr",
+  anchor: "_k48pi7a9",
+  pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
 
 /**
  * __Section message action__
@@ -35,35 +42,47 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
     onClick = _ref.onClick,
     href = _ref.href,
     testId = _ref.testId,
-    linkComponent = _ref.linkComponent;
+    linkComponent = _ref.linkComponent,
+    target = _ref.target;
   if (!linkComponent && (0, _platformFeatureFlags.fg)('platform_section_message_action_migration')) {
     if (href) {
-      return /*#__PURE__*/_react.default.createElement(_compiled.Anchor, {
+      if ((0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link')) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: (0, _runtime.ax)([styles.common, styles.anchor])
+        }, /*#__PURE__*/React.createElement(_link.default, {
+          testId: testId,
+          onClick: onClick,
+          href: href,
+          target: target
+        }, children));
+      }
+      return /*#__PURE__*/React.createElement(_compiled.Anchor, {
         testId: testId,
         onClick: onClick,
         href: href,
-        xcss: (0, _css.cx)(styles.common, styles.anchor)
+        xcss: (0, _css.cx)(stylesOld.common, stylesOld.anchor)
       }, children);
     }
     if (onClick) {
-      return /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
+      return /*#__PURE__*/React.createElement(_compiled.Pressable, {
         testId: testId,
         onClick: onClick,
-        xcss: (0, _css.cx)(styles.common, styles.pressable)
+        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)
       }, children);
     }
-    return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    return /*#__PURE__*/React.createElement(_compiled.Box, {
       as: "span",
-      testId: testId
+      testId: testId,
+      xcss: (0, _platformFeatureFlags.fg)('platform_dst_section_message_actions_as_link') && styles.common
     }, children);
   }
-  return onClick || href ? /*#__PURE__*/_react.default.createElement(_standardButton.default, {
+  return onClick || href ? /*#__PURE__*/React.createElement(_standardButton.default, {
     testId: testId,
     appearance: "link",
     spacing: "none",
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
+  }, children) : /*#__PURE__*/React.createElement(_react.Fragment, null, children);
 });
 var _default = exports.default = SectionMessageAction;

package/dist/cjs/section-message.compiled.css

@@ -1,6 +1,15 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
+._16jlkb7n{flex-grow:1}
+._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
 ._1e0c1txw{display:flex}
 ._1nmz1hna{word-break:break-word}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
+._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
+._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
+._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/cjs/section-message.js

@@ -8,18 +8,31 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 require("./section-message.compiled.css");
-var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
+var React = _react;
+var _runtime = require("@compiled/react/runtime");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _new = require("@atlaskit/button/new");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
+var _cross = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _appearanceIcon = require("./internal/appearance-icon");
 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); }
 var sectionMessageStyles = {
-  container: "_2rkoglpi _1nmz1hna",
-  bleed: "_1mou1i6y _1e0c1txw",
+  container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
+  iconContainer: "_1mou1i6y _1e0c1txw",
+  contentContainer: "_16jlkb7n",
   content: "_11c82smr _syaz1fxt",
-  actionsContainer: "_11c82smr"
+  actionsContainer: "_11c82smr",
+  dismissButtonContainer: "_19pk1i6y"
+};
+var appearanceStyles = {
+  information: "_bfhk33gi",
+  warning: "_bfhk1tzq",
+  error: "_bfhk1gly",
+  success: "_bfhkmv6i",
+  discovery: "_bfhk1nvp"
 };
 
 /**
@@ -38,26 +51,31 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     actions = _ref.actions,
     title = _ref.title,
     icon = _ref.icon,
+    isDismissible = _ref.isDismissible,
     testId = _ref.testId;
+  var _useState = (0, _react.useState)(false),
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    dismissed = _useState2[0],
+    setDismissed = _useState2[1];
+  var handleDismiss = (0, _react.useCallback)(function () {
+    setDismissed(true);
+  }, []);
   var _getAppearanceIconSty = (0, _appearanceIcon.getAppearanceIconStyles)(appearance, icon),
     primaryColor = _getAppearanceIconSty.primaryIconColor,
     secondaryColor = _getAppearanceIconSty.backgroundColor,
     Icon = _getAppearanceIconSty.Icon;
-  var actionElements = actions && actions.type === _react.default.Fragment ? actions.props.children : actions;
-  var actionsArray = _react.default.Children.toArray(actionElements);
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    as: "section",
-    backgroundColor: appearanceMap[appearance],
-    padding: "space.200",
-    testId: testId,
+  var actionElements = actions && actions.type === _react.Fragment ? actions.props.children : actions;
+  var actionsArray = _react.Children.toArray(actionElements);
+  return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
+    "data-testid": testId,
     ref: ref,
-    xcss: sectionMessageStyles.container
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    className: (0, _runtime.ax)([sectionMessageStyles.container, appearanceStyles[appearance]])
+  }, /*#__PURE__*/React.createElement(_compiled.Inline, {
     space: "space.200",
     alignBlock: "stretch"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: sectionMessageStyles.bleed
-  }, /*#__PURE__*/_react.default.createElement(Icon, {
+  }, /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([sectionMessageStyles.iconContainer])
+  }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
@@ -66,15 +84,16 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     LEGACY_size: "medium",
     color: primaryColor,
     spacing: "spacious"
-  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  })), /*#__PURE__*/React.createElement(_compiled.Stack, {
     space: "space.100",
-    testId: testId && "".concat(testId, "--content")
-  }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
+    testId: testId && "".concat(testId, "--content"),
+    xcss: sectionMessageStyles.contentContainer
+  }, !!title && /*#__PURE__*/React.createElement(_heading.default, {
     as: "h2",
     size: "small"
-  }, title), /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    xcss: sectionMessageStyles.content
-  }, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([sectionMessageStyles.content])
+  }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(_compiled.Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),
     separator: "\xB7",
@@ -88,19 +107,21 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     return (
       /*#__PURE__*/
       // Only use a listitem role if more than one action is present
-      _react.default.createElement(_compiled.Inline, {
+      React.createElement(_compiled.Inline, {
         role: actionsArray.length > 1 ? 'listitem' : undefined,
         key: id
       }, action)
     );
-  })))));
+  }))), isDismissible && /*#__PURE__*/React.createElement("div", {
+    className: (0, _runtime.ax)([sectionMessageStyles.dismissButtonContainer])
+  }, /*#__PURE__*/React.createElement(_new.IconButton, {
+    testId: testId && "".concat(testId, "--dismiss-button"),
+    label: "Dismiss",
+    icon: _cross.default,
+    appearance: "subtle",
+    onClick: handleDismiss,
+    spacing: "compact"
+  }))));
 });
-var appearanceMap = {
-  information: 'color.background.information',
-  warning: 'color.background.warning',
-  error: 'color.background.danger',
-  success: 'color.background.success',
-  discovery: 'color.background.discovery'
-};
 SectionMessage.displayName = 'SectionMessage';
 var _default = exports.default = SectionMessage;

package/dist/es2019/section-message-action.compiled.css

@@ -1,9 +1,11 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhk1j28{background-color:transparent}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz14q2{color:var(--ds-link,#0c66e4)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}

package/dist/es2019/section-message-action.js

@@ -1,16 +1,23 @@
 /* section-message-action.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./section-message-action.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React, { memo } from 'react';
+import { Fragment, memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
+import Link from '@atlaskit/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
-const styles = {
+const stylesOld = {
   common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
   anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
   pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
 };
+const styles = {
+  common: "_11c82smr",
+  anchor: "_k48pi7a9",
+  pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
 
 /**
  * __Section message action__
@@ -26,27 +33,39 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
   onClick,
   href,
   testId,
-  linkComponent
+  linkComponent,
+  target
 }) {
   if (!linkComponent && fg('platform_section_message_action_migration')) {
     if (href) {
+      if (fg('platform_dst_section_message_actions_as_link')) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: ax([styles.common, styles.anchor])
+        }, /*#__PURE__*/React.createElement(Link, {
+          testId: testId,
+          onClick: onClick,
+          href: href,
+          target: target
+        }, children));
+      }
       return /*#__PURE__*/React.createElement(Anchor, {
         testId: testId,
         onClick: onClick,
         href: href,
-        xcss: cx(styles.common, styles.anchor)
+        xcss: cx(stylesOld.common, stylesOld.anchor)
       }, children);
     }
     if (onClick) {
       return /*#__PURE__*/React.createElement(Pressable, {
         testId: testId,
         onClick: onClick,
-        xcss: cx(styles.common, styles.pressable)
+        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)
       }, children);
     }
     return /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      testId: testId
+      testId: testId,
+      xcss: fg('platform_dst_section_message_actions_as_link') && styles.common
     }, children);
   }
   return onClick || href ? /*#__PURE__*/React.createElement(Button, {
@@ -56,6 +75,6 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
 });
 export default SectionMessageAction;

package/dist/es2019/section-message.compiled.css

@@ -1,6 +1,15 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
+._16jlkb7n{flex-grow:1}
+._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
 ._1e0c1txw{display:flex}
 ._1nmz1hna{word-break:break-word}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
+._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
+._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
+._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/es2019/section-message.js

@@ -1,16 +1,28 @@
 /* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./section-message.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef } from 'react';
+import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
+import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
+import CrossIcon from '@atlaskit/icon/core/migration/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { Inline, Stack } from '@atlaskit/primitives/compiled';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 const sectionMessageStyles = {
-  container: "_2rkoglpi _1nmz1hna",
-  bleed: "_1mou1i6y _1e0c1txw",
+  container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
+  iconContainer: "_1mou1i6y _1e0c1txw",
+  contentContainer: "_16jlkb7n",
   content: "_11c82smr _syaz1fxt",
-  actionsContainer: "_11c82smr"
+  actionsContainer: "_11c82smr",
+  dismissButtonContainer: "_19pk1i6y"
+};
+const appearanceStyles = {
+  information: "_bfhk33gi",
+  warning: "_bfhk1tzq",
+  error: "_bfhk1gly",
+  success: "_bfhkmv6i",
+  discovery: "_bfhk1nvp"
 };
 
 /**
@@ -28,27 +40,29 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   actions,
   title,
   icon,
+  isDismissible,
   testId
 }, ref) {
+  const [dismissed, setDismissed] = useState(false);
+  const handleDismiss = useCallback(() => {
+    setDismissed(true);
+  }, []);
   const {
     primaryIconColor: primaryColor,
     backgroundColor: secondaryColor,
     Icon
   } = getAppearanceIconStyles(appearance, icon);
-  const actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
-  const actionsArray = React.Children.toArray(actionElements);
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "section",
-    backgroundColor: appearanceMap[appearance],
-    padding: "space.200",
-    testId: testId,
+  const actionElements = actions && actions.type === Fragment ? actions.props.children : actions;
+  const actionsArray = Children.toArray(actionElements);
+  return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
+    "data-testid": testId,
     ref: ref,
-    xcss: sectionMessageStyles.container
+    className: ax([sectionMessageStyles.container, appearanceStyles[appearance]])
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: sectionMessageStyles.bleed
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.iconContainer])
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -60,12 +74,13 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     spacing: "spacious"
   })), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
-    testId: testId && `${testId}--content`
+    testId: testId && `${testId}--content`,
+    xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
     as: "h2",
     size: "small"
-  }, title), /*#__PURE__*/React.createElement(Box, {
-    xcss: sectionMessageStyles.content
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.content])
   }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
     shouldWrap: true,
     testId: testId && `${testId}--actions`,
@@ -82,14 +97,16 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   React.createElement(Inline, {
     role: actionsArray.length > 1 ? 'listitem' : undefined,
     key: id
-  }, action))))));
+  }, action)))), isDismissible && /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.dismissButtonContainer])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    testId: testId && `${testId}--dismiss-button`,
+    label: "Dismiss",
+    icon: CrossIcon,
+    appearance: "subtle",
+    onClick: handleDismiss,
+    spacing: "compact"
+  }))));
 });
-const appearanceMap = {
-  information: 'color.background.information',
-  warning: 'color.background.warning',
-  error: 'color.background.danger',
-  success: 'color.background.success',
-  discovery: 'color.background.discovery'
-};
 SectionMessage.displayName = 'SectionMessage';
 export default SectionMessage;

package/dist/esm/section-message-action.compiled.css

@@ -1,9 +1,11 @@
 
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._19bvze3t{padding-left:var(--ds-space-0,0)}
+._bfhk1j28{background-color:transparent}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
 ._ca0qze3t{padding-top:var(--ds-space-0,0)}
 ._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._k48pi7a9{font-weight:var(--ds-font-weight-regular,400)}
 ._n3tdze3t{padding-bottom:var(--ds-space-0,0)}
 ._syaz14q2{color:var(--ds-link,#0c66e4)}
 ._u5f3ze3t{padding-right:var(--ds-space-0,0)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}

package/dist/esm/section-message-action.js

@@ -1,16 +1,23 @@
 /* section-message-action.tsx generated by @compiled/babel-plugin v0.36.1 */
 import "./section-message-action.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React, { memo } from 'react';
+import { Fragment, memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
 import { cx } from '@atlaskit/css';
+import Link from '@atlaskit/link';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Anchor, Box, Pressable } from '@atlaskit/primitives/compiled';
-var styles = {
+var stylesOld = {
   common: "_11c82smr _syaz14q2 _k48p1wq8 _30l314q2 _9h8h16c2",
   anchor: "_1053w7te _9oik1r31 _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
   pressable: "_bfhksm61 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1"
 };
+var styles = {
+  common: "_11c82smr",
+  anchor: "_k48pi7a9",
+  pressable: "_syaz14q2 _k48p1wq8 _bfhk1j28 _ca0qze3t _u5f3ze3t _n3tdze3t _19bvze3t _9oik1r31 _1bnx8stv _jf4cnqa1 _30l314q2 _9h8h16c2"
+};
 
 /**
  * __Section message action__
@@ -26,26 +33,38 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
     onClick = _ref.onClick,
     href = _ref.href,
     testId = _ref.testId,
-    linkComponent = _ref.linkComponent;
+    linkComponent = _ref.linkComponent,
+    target = _ref.target;
   if (!linkComponent && fg('platform_section_message_action_migration')) {
     if (href) {
+      if (fg('platform_dst_section_message_actions_as_link')) {
+        return /*#__PURE__*/React.createElement("span", {
+          className: ax([styles.common, styles.anchor])
+        }, /*#__PURE__*/React.createElement(Link, {
+          testId: testId,
+          onClick: onClick,
+          href: href,
+          target: target
+        }, children));
+      }
       return /*#__PURE__*/React.createElement(Anchor, {
         testId: testId,
         onClick: onClick,
         href: href,
-        xcss: cx(styles.common, styles.anchor)
+        xcss: cx(stylesOld.common, stylesOld.anchor)
       }, children);
     }
     if (onClick) {
       return /*#__PURE__*/React.createElement(Pressable, {
         testId: testId,
         onClick: onClick,
-        xcss: cx(styles.common, styles.pressable)
+        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)
       }, children);
     }
     return /*#__PURE__*/React.createElement(Box, {
       as: "span",
-      testId: testId
+      testId: testId,
+      xcss: fg('platform_dst_section_message_actions_as_link') && styles.common
     }, children);
   }
   return onClick || href ? /*#__PURE__*/React.createElement(Button, {
@@ -55,6 +74,6 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
     onClick: onClick,
     href: href,
     component: href ? linkComponent : undefined
-  }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
+  }, children) : /*#__PURE__*/React.createElement(Fragment, null, children);
 });
 export default SectionMessageAction;

package/dist/esm/section-message.compiled.css

@@ -1,6 +1,15 @@
 ._11c82smr{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,"Helvetica Neue",sans-serif)}
 ._2rkoglpi{border-radius:var(--ds-border-radius,4px)}
+._18zrpxbi{padding-inline:var(--ds-space-200,1pc)}
 ._1mou1i6y{margin-block:var(--ds-space-negative-025,-2px)}
+._1rjcpxbi{padding-block:var(--ds-space-200,1pc)}
+._16jlkb7n{flex-grow:1}
+._19pk1i6y{margin-top:var(--ds-space-negative-025,-2px)}
 ._1e0c1txw{display:flex}
 ._1nmz1hna{word-break:break-word}
+._bfhk1gly{background-color:var(--ds-background-danger,#ffeceb)}
+._bfhk1nvp{background-color:var(--ds-background-discovery,#f3f0ff)}
+._bfhk1tzq{background-color:var(--ds-background-warning,#fff7d6)}
+._bfhk33gi{background-color:var(--ds-background-information,#e9f2ff)}
+._bfhkmv6i{background-color:var(--ds-background-success,#dcfff1)}
 ._syaz1fxt{color:var(--ds-text,#172b4d)}

package/dist/esm/section-message.js

@@ -1,16 +1,29 @@
 /* section-message.tsx generated by @compiled/babel-plugin v0.36.1 */
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import "./section-message.compiled.css";
+import * as React from 'react';
 import { ax, ix } from "@compiled/react/runtime";
-import React, { forwardRef } from 'react';
+import { Children, forwardRef, Fragment, useCallback, useState } from 'react';
+import { IconButton } from '@atlaskit/button/new';
 import Heading from '@atlaskit/heading';
+import CrossIcon from '@atlaskit/icon/core/migration/cross';
 import { fg } from '@atlaskit/platform-feature-flags';
-import { Box, Inline, Stack } from '@atlaskit/primitives/compiled';
+import { Inline, Stack } from '@atlaskit/primitives/compiled';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
 var sectionMessageStyles = {
-  container: "_2rkoglpi _1nmz1hna",
-  bleed: "_1mou1i6y _1e0c1txw",
+  container: "_2rkoglpi _1rjcpxbi _18zrpxbi _1nmz1hna",
+  iconContainer: "_1mou1i6y _1e0c1txw",
+  contentContainer: "_16jlkb7n",
   content: "_11c82smr _syaz1fxt",
-  actionsContainer: "_11c82smr"
+  actionsContainer: "_11c82smr",
+  dismissButtonContainer: "_19pk1i6y"
+};
+var appearanceStyles = {
+  information: "_bfhk33gi",
+  warning: "_bfhk1tzq",
+  error: "_bfhk1gly",
+  success: "_bfhkmv6i",
+  discovery: "_bfhk1nvp"
 };
 
 /**
@@ -29,25 +42,30 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     actions = _ref.actions,
     title = _ref.title,
     icon = _ref.icon,
+    isDismissible = _ref.isDismissible,
     testId = _ref.testId;
+  var _useState = useState(false),
+    _useState2 = _slicedToArray(_useState, 2),
+    dismissed = _useState2[0],
+    setDismissed = _useState2[1];
+  var handleDismiss = useCallback(function () {
+    setDismissed(true);
+  }, []);
   var _getAppearanceIconSty = getAppearanceIconStyles(appearance, icon),
     primaryColor = _getAppearanceIconSty.primaryIconColor,
     secondaryColor = _getAppearanceIconSty.backgroundColor,
     Icon = _getAppearanceIconSty.Icon;
-  var actionElements = actions && actions.type === React.Fragment ? actions.props.children : actions;
-  var actionsArray = React.Children.toArray(actionElements);
-  return /*#__PURE__*/React.createElement(Box, {
-    as: "section",
-    backgroundColor: appearanceMap[appearance],
-    padding: "space.200",
-    testId: testId,
+  var actionElements = actions && actions.type === Fragment ? actions.props.children : actions;
+  var actionsArray = Children.toArray(actionElements);
+  return isDismissible && dismissed ? null : /*#__PURE__*/React.createElement("section", {
+    "data-testid": testId,
     ref: ref,
-    xcss: sectionMessageStyles.container
+    className: ax([sectionMessageStyles.container, appearanceStyles[appearance]])
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
-  }, /*#__PURE__*/React.createElement(Box, {
-    xcss: sectionMessageStyles.bleed
+  }, /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.iconContainer])
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -59,12 +77,13 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     spacing: "spacious"
   })), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
-    testId: testId && "".concat(testId, "--content")
+    testId: testId && "".concat(testId, "--content"),
+    xcss: sectionMessageStyles.contentContainer
   }, !!title && /*#__PURE__*/React.createElement(Heading, {
     as: "h2",
     size: "small"
-  }, title), /*#__PURE__*/React.createElement(Box, {
-    xcss: sectionMessageStyles.content
+  }, title), /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.content])
   }, children), actionsArray.length > 0 && /*#__PURE__*/React.createElement(Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),
@@ -84,14 +103,16 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
         key: id
       }, action)
     );
-  })))));
+  }))), isDismissible && /*#__PURE__*/React.createElement("div", {
+    className: ax([sectionMessageStyles.dismissButtonContainer])
+  }, /*#__PURE__*/React.createElement(IconButton, {
+    testId: testId && "".concat(testId, "--dismiss-button"),
+    label: "Dismiss",
+    icon: CrossIcon,
+    appearance: "subtle",
+    onClick: handleDismiss,
+    spacing: "compact"
+  }))));
 });
-var appearanceMap = {
-  information: 'color.background.information',
-  warning: 'color.background.warning',
-  error: 'color.background.danger',
-  success: 'color.background.success',
-  discovery: 'color.background.discovery'
-};
 SectionMessage.displayName = 'SectionMessage';
 export default SectionMessage;

package/dist/types/section-message-action.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { SectionMessageActionProps } from './types';
 /**
  * __Section message action__
@@ -9,5 +9,5 @@ import type { SectionMessageActionProps } from './types';
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
+declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
 export default SectionMessageAction;

package/dist/types/section-message.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { SectionMessageProps } from './types';
 /**
  * __Section message__
@@ -9,5 +9,5 @@ import type { SectionMessageProps } from './types';
  * - [Code](https://atlassian.design/components/section-message/code)
  * - [Usage](https://atlassian.design/components/section-message/usage)
  */
-declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
+declare const SectionMessage: import("react").ForwardRefExoticComponent<SectionMessageProps & import("react").RefAttributes<HTMLElement>>;
 export default SectionMessage;

package/dist/types/types.d.ts

@@ -33,6 +33,12 @@ export interface SectionMessageProps {
      * to see how to provide this icon.
      */
     icon?: React.ElementType;
+    /**
+     * Displays a dismiss button, that allows the user to dismiss the message.
+     * It will be removed from the DOM immediately and will not be re-rendered.
+     * It does not handle persistence of the dismissed state across page reloads or remounts.
+     */
+    isDismissible?: boolean;
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
      * in the rendered code, serving as a hook for automated tests.
@@ -62,6 +68,10 @@ export interface SectionMessageActionProps {
      * The URL that the rendered link button will point to.
      */
     href?: string;
+    /**
+     * The target attribute of the link. This is only used if the href prop is passed.
+     */
+    target?: HTMLAnchorElement['target'];
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
      * in the rendered code, serving as a hook for automated tests.

package/dist/types-ts4.5/section-message-action.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { SectionMessageActionProps } from './types';
 /**
  * __Section message action__
@@ -9,5 +9,5 @@ import type { SectionMessageActionProps } from './types';
  *
  * - [Examples](https://atlassian.design/components/section-message/examples#actions)
  */
-declare const SectionMessageAction: React.NamedExoticComponent<SectionMessageActionProps>;
+declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
 export default SectionMessageAction;

package/dist/types-ts4.5/section-message.d.ts

@@ -1,4 +1,4 @@
-import React from 'react';
+/// <reference types="react" />
 import type { SectionMessageProps } from './types';
 /**
  * __Section message__
@@ -9,5 +9,5 @@ import type { SectionMessageProps } from './types';
  * - [Code](https://atlassian.design/components/section-message/code)
  * - [Usage](https://atlassian.design/components/section-message/usage)
  */
-declare const SectionMessage: React.ForwardRefExoticComponent<SectionMessageProps & React.RefAttributes<HTMLElement>>;
+declare const SectionMessage: import("react").ForwardRefExoticComponent<SectionMessageProps & import("react").RefAttributes<HTMLElement>>;
 export default SectionMessage;

package/dist/types-ts4.5/types.d.ts

@@ -33,6 +33,12 @@ export interface SectionMessageProps {
      * to see how to provide this icon.
      */
     icon?: React.ElementType;
+    /**
+     * Displays a dismiss button, that allows the user to dismiss the message.
+     * It will be removed from the DOM immediately and will not be re-rendered.
+     * It does not handle persistence of the dismissed state across page reloads or remounts.
+     */
+    isDismissible?: boolean;
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
      * in the rendered code, serving as a hook for automated tests.
@@ -62,6 +68,10 @@ export interface SectionMessageActionProps {
      * The URL that the rendered link button will point to.
      */
     href?: string;
+    /**
+     * The target attribute of the link. This is only used if the href prop is passed.
+     */
+    target?: HTMLAnchorElement['target'];
     /**
      * A `testId` prop is a unique string that appears as a data attribute `data-testid`
      * in the rendered code, serving as a hook for automated tests.

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "8.3.0",
+	"version": "8.5.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -38,11 +38,12 @@
 		".": "./src/index.tsx"
 	},
 	"dependencies": {
-		"@atlaskit/button": "^23.2.0",
+		"@atlaskit/button": "^23.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
 		"@atlaskit/css": "^0.12.0",
 		"@atlaskit/heading": "^5.2.0",
-		"@atlaskit/icon": "^27.6.0",
+		"@atlaskit/icon": "^27.7.0",
+		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.10.0",
 		"@atlaskit/theme": "^19.0.0",
@@ -59,13 +60,13 @@
 		"@atlaskit/analytics-next": "^11.1.0",
 		"@atlaskit/code": "^17.2.0",
 		"@atlaskit/docs": "^11.0.0",
-		"@atlaskit/ds-lib": "^4.1.0",
+		"@atlaskit/ds-lib": "^5.0.0",
 		"@atlaskit/form": "^12.0.0",
-		"@atlaskit/link": "^3.2.0",
 		"@atlaskit/range": "^9.1.0",
 		"@atlassian/feature-flags-test-utils": "^0.3.0",
 		"@atlassian/ssr-tests": "^0.2.0",
 		"@testing-library/react": "^13.4.0",
+		"@testing-library/user-event": "^14.4.3",
 		"react-dom": "^18.2.0",
 		"typescript": "~5.4.2"
 	},
@@ -96,6 +97,9 @@
 		"platform_section_message_action_migration": {
 			"type": "boolean"
 		},
+		"platform_dst_section_message_actions_as_link": {
+			"type": "boolean"
+		},
 		"platform_ads_explicit_font_styles": {
 			"type": "boolean"
 		},