@atlaskit/section-message 6.4.10 → 6.4.11

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/section-message
 
+## 6.4.11
+
+### Patch Changes
+
+- [`1ed303de3e8`](https://bitbucket.org/atlassian/atlassian-frontend/commits/1ed303de3e8) - Updated dependencies
+- [`95401cac781`](https://bitbucket.org/atlassian/atlassian-frontend/commits/95401cac781) - Internal change to component composition. There is no expected change.
+
 ## 6.4.10
 
 ### Patch Changes

package/dist/cjs/section-message.js

@@ -9,12 +9,18 @@ exports.default = void 0;
 var _react = _interopRequireWildcard(require("react"));
 var _dsExplorations = require("@atlaskit/ds-explorations");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _inline = _interopRequireDefault(require("@atlaskit/primitives/inline"));
-var _stack = _interopRequireDefault(require("@atlaskit/primitives/stack"));
+var _primitives = require("@atlaskit/primitives");
 var _appearanceIcon = require("./internal/appearance-icon");
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+var sectionMessageStyles = (0, _primitives.xcss)({
+  wordBreak: 'break-word',
+  borderRadius: 'border.radius'
+});
+var bleedStyles = (0, _primitives.xcss)({
+  display: 'flex',
+  marginBlock: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
+});
 
 /**
  * __Section message__
@@ -39,34 +45,29 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
     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(_dsExplorations.UNSAFE_Box, {
+  return /*#__PURE__*/_react.default.createElement(_primitives.Box, {
     as: "section",
     backgroundColor: appearanceMap[appearance],
     padding: "space.200",
-    borderRadius: "normal",
     testId: testId,
     ref: ref,
-    UNSAFE_style: {
-      wordBreak: 'break-word'
-    }
-  }, /*#__PURE__*/_react.default.createElement(_inline.default, {
+    xcss: sectionMessageStyles
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     space: "space.200",
     alignBlock: "stretch"
-  }, /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Box, {
-    UNSAFE_style: {
-      margin: '-2px 0'
-    }
+  }, /*#__PURE__*/_react.default.createElement(_primitives.Box, {
+    xcss: bleedStyles
   }, /*#__PURE__*/_react.default.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
     secondaryColor: secondaryColor
-  })), /*#__PURE__*/_react.default.createElement(_stack.default, {
+  })), /*#__PURE__*/_react.default.createElement(_primitives.Stack, {
     space: "space.100",
     testId: testId && "".concat(testId, "--content")
   }, !!title && /*#__PURE__*/_react.default.createElement(_heading.default, {
     as: "h2",
     level: "h500"
-  }, title), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, null, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_inline.default, {
+  }, title), /*#__PURE__*/_react.default.createElement(_dsExplorations.UNSAFE_Text, null, children), actionsArray.length > 0 && /*#__PURE__*/_react.default.createElement(_primitives.Inline, {
     shouldWrap: true,
     testId: testId && "".concat(testId, "--actions"),
     separator: "\xB7",
@@ -75,11 +76,11 @@ var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage
   }, actionsArray))));
 });
 var appearanceMap = {
-  information: 'information',
-  warning: 'warning',
-  error: 'danger',
-  success: 'success',
-  discovery: 'discovery'
+  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 = SectionMessage;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.10",
+	"version": "6.4.11",
 	"sideEffects": false
 }

package/dist/es2019/section-message.js

@@ -1,10 +1,17 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { forwardRef } from 'react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import Heading from '@atlaskit/heading';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
+const sectionMessageStyles = xcss({
+  wordBreak: 'break-word',
+  borderRadius: 'border.radius'
+});
+const bleedStyles = xcss({
+  display: 'flex',
+  marginBlock: `calc(-1 * ${"var(--ds-space-025, 2px)"})`
+});
+
 /**
  * __Section message__
  *
@@ -33,19 +40,14 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
     as: "section",
     backgroundColor: appearanceMap[appearance],
     padding: "space.200",
-    borderRadius: "normal",
     testId: testId,
     ref: ref,
-    UNSAFE_style: {
-      wordBreak: 'break-word'
-    }
+    xcss: sectionMessageStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
   }, /*#__PURE__*/React.createElement(Box, {
-    UNSAFE_style: {
-      margin: '-2px 0'
-    }
+    xcss: bleedStyles
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -65,11 +67,11 @@ const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage({
   }, actionsArray))));
 });
 const appearanceMap = {
-  information: 'information',
-  warning: 'warning',
-  error: 'danger',
-  success: 'success',
-  discovery: 'discovery'
+  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/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.10",
+	"version": "6.4.11",
 	"sideEffects": false
 }

package/dist/esm/section-message.js

@@ -1,10 +1,17 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import React, { forwardRef } from 'react';
-import { UNSAFE_Box as Box, UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
+import { UNSAFE_Text as Text } from '@atlaskit/ds-explorations';
 import Heading from '@atlaskit/heading';
-import Inline from '@atlaskit/primitives/inline';
-import Stack from '@atlaskit/primitives/stack';
+import { Box, Inline, Stack, xcss } from '@atlaskit/primitives';
 import { getAppearanceIconStyles } from './internal/appearance-icon';
+var sectionMessageStyles = xcss({
+  wordBreak: 'break-word',
+  borderRadius: 'border.radius'
+});
+var bleedStyles = xcss({
+  display: 'flex',
+  marginBlock: "calc(-1 * ".concat("var(--ds-space-025, 2px)", ")")
+});
+
 /**
  * __Section message__
  *
@@ -32,19 +39,14 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
     as: "section",
     backgroundColor: appearanceMap[appearance],
     padding: "space.200",
-    borderRadius: "normal",
     testId: testId,
     ref: ref,
-    UNSAFE_style: {
-      wordBreak: 'break-word'
-    }
+    xcss: sectionMessageStyles
   }, /*#__PURE__*/React.createElement(Inline, {
     space: "space.200",
     alignBlock: "stretch"
   }, /*#__PURE__*/React.createElement(Box, {
-    UNSAFE_style: {
-      margin: '-2px 0'
-    }
+    xcss: bleedStyles
   }, /*#__PURE__*/React.createElement(Icon, {
     size: "medium",
     primaryColor: primaryColor,
@@ -64,11 +66,11 @@ var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref)
   }, actionsArray))));
 });
 var appearanceMap = {
-  information: 'information',
-  warning: 'warning',
-  error: 'danger',
-  success: 'success',
-  discovery: 'discovery'
+  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/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.4.10",
+	"version": "6.4.11",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.4.10",
+  "version": "6.4.11",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -23,7 +23,7 @@
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
-    "team": "Design System Team",
+    "team": "Design System Fundamentals",
     "releaseModel": "continuous",
     "website": {
       "name": "Section message",
@@ -42,9 +42,9 @@
     "@atlaskit/ds-explorations": "^2.2.0",
     "@atlaskit/heading": "^1.3.0",
     "@atlaskit/icon": "^21.12.0",
-    "@atlaskit/primitives": "^1.0.0",
+    "@atlaskit/primitives": "^1.0.6",
     "@atlaskit/theme": "^12.5.0",
-    "@atlaskit/tokens": "^1.11.0",
+    "@atlaskit/tokens": "^1.13.0",
     "@babel/runtime": "^7.0.0"
   },
   "peerDependencies": {
@@ -52,7 +52,6 @@
   },
   "devDependencies": {
     "@atlaskit/analytics-next": "^9.1.0",
-    "@atlaskit/code": "^14.6.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -91,4 +90,4 @@
   },
   "homepage": "https://atlassian.design/components/section-message/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
-}
+}