@atlaskit/section-message 6.6.9 → 6.8.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/section-message
 
+## 6.8.0
+
+### Minor Changes
+
+- [#170738](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/170738)
+  [`ee3ce64bb7f38`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/ee3ce64bb7f38) -
+  We are testing changes behind a feature gate. Section message actions have been updated to use
+  automatic router link configuration (from App provider), as well as default link underlines. If
+  this change is successful it will be available in a later release.
+
+## 6.7.0
+
+### Minor Changes
+
+- [#165245](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165245)
+  [`6935d35339437`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6935d35339437) -
+  Updates internal behaviour to support new icon components
+
 ## 6.6.9
 
 ### Patch Changes

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

@@ -0,0 +1,13 @@
+
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._n0fxw7te:visited:hover{color:var(--ds-link-visited,#5e4db2)}
+._1vhvg3x0:visited:active{color:var(--ds-link-visited-pressed,#352c63)}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

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

@@ -1,3 +1,4 @@
+/* section-message-action.tsx generated by @compiled/babel-plugin v0.32.2 */
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
@@ -6,10 +7,21 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
+require("./section-message-action.compiled.css");
+var _runtime = require("@compiled/react/runtime");
 var _react = _interopRequireWildcard(require("react"));
 var _standardButton = _interopRequireDefault(require("@atlaskit/button/standard-button"));
+var _css = require("@atlaskit/css");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
+var styles = {
+  common: "_syaz14q2 _11c81oud _k48p1wq8 _30l314q2 _9h8h16c2",
+  anchor: "_1053w7te _9oik18uv _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
+  pressable: "_bfhksm61 _1yt4ze3t _9oik18uv _1bnx8stv _jf4cnqa1"
+};
+
 /**
  * __Section message action__
  *
@@ -25,9 +37,27 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
     href = _ref.href,
     testId = _ref.testId,
     linkComponent = _ref.linkComponent;
-  // FIXME: This path doesn't make sense
-  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
-  // makes the use case invalid. This should be addressed.
+  if (!linkComponent && (0, _platformFeatureFlags.fg)('platform_section_message_action_migration')) {
+    if (href) {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Anchor, {
+        testId: testId,
+        onClick: onClick,
+        href: href,
+        xcss: (0, _css.cx)(styles.common, styles.anchor)
+      }, children);
+    }
+    if (onClick) {
+      return /*#__PURE__*/_react.default.createElement(_primitives.Pressable, {
+        testId: testId,
+        onClick: onClick,
+        xcss: (0, _css.cx)(styles.common, styles.pressable)
+      }, children);
+    }
+    return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+      as: "span",
+      testId: testId
+    }, children);
+  }
   return onClick || href ? /*#__PURE__*/_react.default.createElement(_standardButton.default, {
     testId: testId,
     appearance: "link",
@@ -37,5 +67,4 @@ var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessage
     component: href ? linkComponent : undefined
   }, children) : /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, children);
 });
-SectionMessageAction.displayName = 'SectionMessageAction';
 var _default = exports.default = SectionMessageAction;

package/dist/cjs/section-message.js

@@ -22,7 +22,7 @@ var bleedStyles = (0, _primitives.xcss)({
 });
 var contentStyles = (0, _primitives.xcss)({
   color: 'color.text',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: 'font.body'
 });
 
 /**
@@ -64,6 +64,11 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     size: "medium",
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
+    // props for new icon
+    ,
+    LEGACY_size: "medium",
+    color: primaryColor,
+    spacing: "spacious"
   })), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.100",
     testId: testId && "".concat(testId, "--content")

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

@@ -0,0 +1,13 @@
+
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._n0fxw7te:visited:hover{color:var(--ds-link-visited,#5e4db2)}
+._1vhvg3x0:visited:active{color:var(--ds-link-visited-pressed,#352c63)}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

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

@@ -1,5 +1,17 @@
+/* section-message-action.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./section-message-action.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives';
+const styles = {
+  common: "_syaz14q2 _11c81oud _k48p1wq8 _30l314q2 _9h8h16c2",
+  anchor: "_1053w7te _9oik18uv _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
+  pressable: "_bfhksm61 _1yt4ze3t _9oik18uv _1bnx8stv _jf4cnqa1"
+};
+
 /**
  * __Section message action__
  *
@@ -16,9 +28,27 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
   testId,
   linkComponent
 }) {
-  // FIXME: This path doesn't make sense
-  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
-  // makes the use case invalid. This should be addressed.
+  if (!linkComponent && fg('platform_section_message_action_migration')) {
+    if (href) {
+      return /*#__PURE__*/React.createElement(Anchor, {
+        testId: testId,
+        onClick: onClick,
+        href: href,
+        xcss: cx(styles.common, styles.anchor)
+      }, children);
+    }
+    if (onClick) {
+      return /*#__PURE__*/React.createElement(Pressable, {
+        testId: testId,
+        onClick: onClick,
+        xcss: cx(styles.common, styles.pressable)
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      testId: testId
+    }, children);
+  }
   return onClick || href ? /*#__PURE__*/React.createElement(Button, {
     testId: testId,
     appearance: "link",
@@ -28,5 +58,4 @@ const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
     component: href ? linkComponent : undefined
   }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
-SectionMessageAction.displayName = 'SectionMessageAction';
 export default SectionMessageAction;

package/dist/es2019/section-message.js

@@ -12,7 +12,7 @@ const bleedStyles = xcss({
 });
 const contentStyles = xcss({
   color: 'color.text',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: 'font.body'
 });
 
 /**
@@ -55,6 +55,11 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     size: "medium",
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
+    // props for new icon
+    ,
+    LEGACY_size: "medium",
+    color: primaryColor,
+    spacing: "spacious"
   })), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     testId: testId && `${testId}--content`

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

@@ -0,0 +1,13 @@
+
+._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
+._1yt4ze3t{padding:var(--ds-space-0,0)}
+._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
+._k48p1wq8{font-weight:var(--ds-font-weight-medium,500)}
+._syaz14q2{color:var(--ds-link,#0c66e4)}._1053w7te:visited{color:var(--ds-link-visited,#5e4db2)}
+._1bnx8stv:hover{text-decoration-line:underline}
+._30l314q2:hover{color:var(--ds-link,#0c66e4)}
+._9oik18uv:hover{text-decoration-color:initial}
+._jf4cnqa1:hover{text-decoration-style:solid}
+._n0fxw7te:visited:hover{color:var(--ds-link-visited,#5e4db2)}
+._1vhvg3x0:visited:active{color:var(--ds-link-visited-pressed,#352c63)}
+._9h8h16c2:active{color:var(--ds-link-pressed,#05c)}

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

@@ -1,5 +1,17 @@
+/* section-message-action.tsx generated by @compiled/babel-plugin v0.32.2 */
+import "./section-message-action.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
 import React, { memo } from 'react';
 import Button from '@atlaskit/button/standard-button';
+import { cx } from '@atlaskit/css';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { Anchor, Box, Pressable } from '@atlaskit/primitives';
+var styles = {
+  common: "_syaz14q2 _11c81oud _k48p1wq8 _30l314q2 _9h8h16c2",
+  anchor: "_1053w7te _9oik18uv _1bnx8stv _jf4cnqa1 _n0fxw7te _1vhvg3x0",
+  pressable: "_bfhksm61 _1yt4ze3t _9oik18uv _1bnx8stv _jf4cnqa1"
+};
+
 /**
  * __Section message action__
  *
@@ -15,9 +27,27 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
     href = _ref.href,
     testId = _ref.testId,
     linkComponent = _ref.linkComponent;
-  // FIXME: This path doesn't make sense
-  // If the intent of the design for this component is to use an action, not providing `href` or `onClick`
-  // makes the use case invalid. This should be addressed.
+  if (!linkComponent && fg('platform_section_message_action_migration')) {
+    if (href) {
+      return /*#__PURE__*/React.createElement(Anchor, {
+        testId: testId,
+        onClick: onClick,
+        href: href,
+        xcss: cx(styles.common, styles.anchor)
+      }, children);
+    }
+    if (onClick) {
+      return /*#__PURE__*/React.createElement(Pressable, {
+        testId: testId,
+        onClick: onClick,
+        xcss: cx(styles.common, styles.pressable)
+      }, children);
+    }
+    return /*#__PURE__*/React.createElement(Box, {
+      as: "span",
+      testId: testId
+    }, children);
+  }
   return onClick || href ? /*#__PURE__*/React.createElement(Button, {
     testId: testId,
     appearance: "link",
@@ -27,5 +57,4 @@ var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref)
     component: href ? linkComponent : undefined
   }, children) : /*#__PURE__*/React.createElement(React.Fragment, null, children);
 });
-SectionMessageAction.displayName = 'SectionMessageAction';
 export default SectionMessageAction;

package/dist/esm/section-message.js

@@ -12,7 +12,7 @@ var bleedStyles = xcss({
 });
 var contentStyles = xcss({
   color: 'color.text',
-  font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)"
+  font: 'font.body'
 });
 
 /**
@@ -54,6 +54,11 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     size: "medium",
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
+    // props for new icon
+    ,
+    LEGACY_size: "medium",
+    color: primaryColor,
+    spacing: "spacious"
   })), /*#__PURE__*/React.createElement(Stack, {
     space: "space.100",
     testId: testId && "".concat(testId, "--content")

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.6.9",
+	"version": "6.8.0",
 	"description": "A section message is used to alert users to a particular section of the screen.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -28,7 +28,7 @@
 		"team": "Design System Team",
 		"website": {
 			"name": "Section message",
-			"category": "Components"
+			"category": "Messaging"
 		},
 		"runReact18": true
 	},
@@ -41,11 +41,13 @@
 	"dependencies": {
 		"@atlaskit/button": "^20.3.0",
 		"@atlaskit/codemod-utils": "^4.2.0",
+		"@atlaskit/css": "^0.6.0",
 		"@atlaskit/heading": "^3.1.0",
-		"@atlaskit/icon": "^22.24.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/icon": "^22.28.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.2.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0"
 	},
 	"peerDependencies": {
@@ -55,9 +57,10 @@
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
+		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^12.1.5",
 		"exenv": "^1.2.2",
 		"jest-in-case": "^1.0.2",
@@ -88,5 +91,11 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"homepage": "https://atlassian.design/components/section-message/"
+	"homepage": "https://atlassian.design/components/section-message/",
+	"platform-feature-flags": {
+		"platform_section_message_action_migration": {
+			"type": "boolean",
+			"showOnWebsiteForTransitiveDependencies": true
+		}
+	}
 }