@atlaskit/section-message 6.1.10 → 6.1.13

package/CHANGELOG.md

@@ -1,5 +1,34 @@
 # @atlaskit/section-message
 
+## 6.1.13
+
+### Patch Changes
+
+- [`89a1b9b02d9`](https://bitbucket.org/atlassian/atlassian-frontend/commits/89a1b9b02d9) - [ux] - Actions will now wrap onto new lines rather than overflowing the edges, in cases where the actions are wider than the available width of the Section Message.
+
+  - Added test ID data attribute to actions list for testing purposes, using the existing `testId` prop.
+
+- [`edafa2f6366`](https://bitbucket.org/atlassian/atlassian-frontend/commits/edafa2f6366) - [ux]
+
+  - Prevent long text overflowing the Section Message content box by utilising CSS property `word-break: break-word` to add line breaks. This applies to both the `title` and `children` props.
+  - Allow text truncation to work inside Section Message content area by adding `overflow: hidden` to the flex container. This is due to a quirk with how this property works within CSS flexbox.
+  - Added test ID data attribute to content container for testing purposes, using the existing `testId` prop.
+
+- Updated dependencies
+
+## 6.1.12
+
+### Patch Changes
+
+- Updated dependencies
+
+## 6.1.11
+
+### Patch Changes
+
+- [`cb2392f6d33`](https://bitbucket.org/atlassian/atlassian-frontend/commits/cb2392f6d33) - Upgrade to TypeScript 4.2.4
+- Updated dependencies
+
 ## 6.1.10
 
 ### Patch Changes

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

@@ -24,7 +24,7 @@ var actionStyles = (0, _core.css)({
   margin: 0,
   alignItems: 'center',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& + &::before': {
+  '&:not(:last-child)::after': {
     display: 'inline-block',
     width: "".concat(actionsSeparatorWidth, "px"),
     color: "".concat("var(--ds-text-subtle, ".concat(_colors.N500, ")")),

package/dist/cjs/section-message.js

@@ -45,7 +45,8 @@ var containerStyles = (0, _core.css)({
   borderRadius: "".concat((0, _constants.borderRadius)(), "px")
 });
 var contentContainerStyles = (0, _core.css)({
-  flexGrow: 1
+  flexGrow: 1,
+  wordBreak: 'break-word'
 });
 var titleStyles = (0, _core.css)({
   margin: "0 0 ".concat(titleMarginBottom, "px"),
@@ -59,6 +60,7 @@ var actionsStyles = (0, _core.css)({
   display: 'flex',
   marginTop: "".concat(actionMarginTop, "px"),
   paddingLeft: 0,
+  flexWrap: 'wrap',
   listStyle: 'none'
 }); // If the icon is not wrapped in a div with a width, and we instead use margin or
 // padding, the icon is shrunk by the padding.
@@ -67,9 +69,8 @@ var actionsStyles = (0, _core.css)({
 
 var iconWrapperStyles = (0, _core.css)({
   display: 'flex',
-  width: "".concat(iconWrapperWidth, "px"),
   margin: '-2px 0',
-  flex: '0 0 auto'
+  flex: "0 0 ".concat(iconWrapperWidth, "px")
 });
 var SectionMessageWithMode = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(_ref, ref) {
   var children = _ref.children,
@@ -110,12 +111,14 @@ var SectionMessageWithMode = /*#__PURE__*/(0, _react.forwardRef)(function Sectio
     primaryColor: primaryIconColor,
     secondaryColor: backgroundColor
   })), (0, _core.jsx)("div", {
-    css: contentContainerStyles
+    css: contentContainerStyles,
+    "data-testid": testId && "".concat(testId, "--content")
   }, title ? (0, _core.jsx)("h1", {
     css: titleStyles,
     style: memoizedTitleColor
   }, title) : null, (0, _core.jsx)("div", null, children), actionsArray.length > 0 ? (0, _core.jsx)("ul", {
-    css: actionsStyles
+    css: actionsStyles,
+    "data-testid": testId && "".concat(testId, "--actions")
   }, actionsArray) : null));
 });
 var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(props, ref) {

package/dist/cjs/version.json

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

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

@@ -10,7 +10,7 @@ const actionStyles = css({
   margin: 0,
   alignItems: 'center',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& + &::before': {
+  '&:not(:last-child)::after': {
     display: 'inline-block',
     width: `${actionsSeparatorWidth}px`,
     color: `${`var(--ds-text-subtle, ${N500})`}`,

package/dist/es2019/section-message.js

@@ -23,7 +23,8 @@ const containerStyles = css({
   borderRadius: `${borderRadius()}px`
 });
 const contentContainerStyles = css({
-  flexGrow: 1
+  flexGrow: 1,
+  wordBreak: 'break-word'
 });
 const titleStyles = css({
   margin: `0 0 ${titleMarginBottom}px`,
@@ -37,6 +38,7 @@ const actionsStyles = css({
   display: 'flex',
   marginTop: `${actionMarginTop}px`,
   paddingLeft: 0,
+  flexWrap: 'wrap',
   listStyle: 'none'
 }); // If the icon is not wrapped in a div with a width, and we instead use margin or
 // padding, the icon is shrunk by the padding.
@@ -45,9 +47,8 @@ const actionsStyles = css({
 
 const iconWrapperStyles = css({
   display: 'flex',
-  width: `${iconWrapperWidth}px`,
   margin: '-2px 0',
-  flex: '0 0 auto'
+  flex: `0 0 ${iconWrapperWidth}px`
 });
 const SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage({
   children,
@@ -81,12 +82,14 @@ const SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage({
     primaryColor: primaryIconColor,
     secondaryColor: backgroundColor
   })), jsx("div", {
-    css: contentContainerStyles
+    css: contentContainerStyles,
+    "data-testid": testId && `${testId}--content`
   }, title ? jsx("h1", {
     css: titleStyles,
     style: memoizedTitleColor
   }, title) : null, jsx("div", null, children), actionsArray.length > 0 ? jsx("ul", {
-    css: actionsStyles
+    css: actionsStyles,
+    "data-testid": testId && `${testId}--actions`
   }, actionsArray) : null));
 });
 const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {

package/dist/es2019/version.json

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

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

@@ -10,7 +10,7 @@ var actionStyles = css({
   margin: 0,
   alignItems: 'center',
   // eslint-disable-next-line @repo/internal/styles/no-nested-styles
-  '& + &::before': {
+  '&:not(:last-child)::after': {
     display: 'inline-block',
     width: "".concat(actionsSeparatorWidth, "px"),
     color: "".concat("var(--ds-text-subtle, ".concat(N500, ")")),

package/dist/esm/section-message.js

@@ -23,7 +23,8 @@ var containerStyles = css({
   borderRadius: "".concat(borderRadius(), "px")
 });
 var contentContainerStyles = css({
-  flexGrow: 1
+  flexGrow: 1,
+  wordBreak: 'break-word'
 });
 var titleStyles = css({
   margin: "0 0 ".concat(titleMarginBottom, "px"),
@@ -37,6 +38,7 @@ var actionsStyles = css({
   display: 'flex',
   marginTop: "".concat(actionMarginTop, "px"),
   paddingLeft: 0,
+  flexWrap: 'wrap',
   listStyle: 'none'
 }); // If the icon is not wrapped in a div with a width, and we instead use margin or
 // padding, the icon is shrunk by the padding.
@@ -45,9 +47,8 @@ var actionsStyles = css({
 
 var iconWrapperStyles = css({
   display: 'flex',
-  width: "".concat(iconWrapperWidth, "px"),
   margin: '-2px 0',
-  flex: '0 0 auto'
+  flex: "0 0 ".concat(iconWrapperWidth, "px")
 });
 var SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage(_ref, ref) {
   var children = _ref.children,
@@ -86,12 +87,14 @@ var SectionMessageWithMode = /*#__PURE__*/forwardRef(function SectionMessage(_re
     primaryColor: primaryIconColor,
     secondaryColor: backgroundColor
   })), jsx("div", {
-    css: contentContainerStyles
+    css: contentContainerStyles,
+    "data-testid": testId && "".concat(testId, "--content")
   }, title ? jsx("h1", {
     css: titleStyles,
     style: memoizedTitleColor
   }, title) : null, jsx("div", null, children), actionsArray.length > 0 ? jsx("ul", {
-    css: actionsStyles
+    css: actionsStyles,
+    "data-testid": testId && "".concat(testId, "--actions")
   }, actionsArray) : null));
 });
 var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {

package/dist/esm/version.json

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

package/dist/types/internal/appearance-icon.d.ts

@@ -9,7 +9,7 @@ export declare const appearanceIconSchema: {
     [key in Appearance]: AppearanceIconSchema;
 };
 export declare function getAppearanceIconStyles(appearance: Appearance, icon: SectionMessageProps['icon']): {
-    Icon: import("react").ElementType<any>;
+    Icon: "symbol" | "object" | "a" | "abbr" | "address" | "area" | "article" | "aside" | "audio" | "b" | "base" | "bdi" | "bdo" | "big" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "footer" | "form" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "keygen" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "menu" | "menuitem" | "meta" | "meter" | "nav" | "noindex" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "webview" | "svg" | "animate" | "animateMotion" | "animateTransform" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feDropShadow" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "mpath" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "switch" | "text" | "textPath" | "tspan" | "use" | "view" | import("react").ComponentClass<any, any> | import("react").FunctionComponent<any>;
     backgroundColor: string;
     primaryIconColor: string;
 };

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.1.10",
+  "version": "6.1.13",
   "description": "A section message is used to alert users to a particular section of the screen.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
   },
-  "repository": "https://bitbucket.org/atlassian/atlassian-frontend",
+  "repository": "https://bitbucket.org/atlassian/atlassian-frontend-mirror",
   "author": "Atlassian Pty Ltd",
   "license": "Apache-2.0",
   "main": "dist/cjs/index.js",
@@ -28,11 +28,11 @@
     ".": "./src/index.ts"
   },
   "dependencies": {
-    "@atlaskit/button": "^16.2.0",
-    "@atlaskit/codemod-utils": "^4.0.0",
+    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
-    "@atlaskit/tokens": "^0.9.0",
+    "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -55,7 +55,7 @@
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "3.9.10"
+    "typescript": "4.2.4"
   },
   "techstack": {
     "@atlassian/frontend": {

package/section-message/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/section-message.js",
   "module": "../dist/esm/entry-points/section-message.js",
   "module:es2019": "../dist/es2019/entry-points/section-message.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/section-message.d.ts"
 }

package/section-message-action/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/section-message-action.js",
   "module": "../dist/esm/entry-points/section-message-action.js",
   "module:es2019": "../dist/es2019/entry-points/section-message-action.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/section-message-action.d.ts"
 }

package/types/package.json

@@ -3,5 +3,6 @@
   "main": "../dist/cjs/entry-points/types.js",
   "module": "../dist/esm/entry-points/types.js",
   "module:es2019": "../dist/es2019/entry-points/types.js",
+  "sideEffects": false,
   "types": "../dist/types/entry-points/types.d.ts"
 }