@atlaskit/section-message 6.1.12 → 6.1.15

package/CHANGELOG.md

@@ -1,5 +1,33 @@
 # @atlaskit/section-message
 
+## 6.1.15
+
+### Patch Changes
+
+- [`8d4228767b0`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8d4228767b0) - Upgrade Typescript from `4.2.4` to `4.3.5`.
+
+## 6.1.14
+
+### Patch Changes
+
+- [`8202e37941b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/8202e37941b) - Internal code change turning on new linting rules.
+
+## 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

package/codemods/internal/{map-actions-prop.ts → map-actions-prop.tsx}

@@ -129,7 +129,7 @@ export const mapActionsProp = (
       const linkComponentAttributeValue = transferLinkComponentProp(j, element);
       actionsAttributes = getJSXAttributesByName(j, element, ACTIONS_PROP_NAME);
 
-      actionsAttributes.forEach((attribute: ASTPath<JSXAttribute>) => {
+      actionsAttributes?.forEach((attribute: ASTPath<JSXAttribute>) => {
         j(attribute)
           .find(j.JSXExpressionContainer)
           .forEach((expressionContainer: ASTPath<JSXExpressionContainer>) => {

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, ")")),
@@ -33,6 +33,16 @@ var actionStyles = (0, _core.css)({
     verticalAlign: 'middle'
   }
 });
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+
 var SectionMessageAction = /*#__PURE__*/(0, _react.memo)(function SectionMessageAction(_ref) {
   var children = _ref.children,
       onClick = _ref.onClick,

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,14 +111,26 @@ 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));
 });
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
+
 var SectionMessage = /*#__PURE__*/(0, _react.forwardRef)(function SectionMessage(props, ref) {
   return (0, _core.jsx)(_components.default.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.1.12",
+	"version": "6.1.15",
 	"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})`}`,
@@ -19,6 +19,16 @@ const actionStyles = css({
     verticalAlign: 'middle'
   }
 });
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+
 const SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction({
   children,
   onClick,

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,14 +82,26 @@ 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));
 });
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
+
 const SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {
   return jsx(GlobalTheme.Consumer, null, ({
     mode

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/section-message",
-	"version": "6.1.12",
+	"version": "6.1.15",
 	"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, ")")),
@@ -19,6 +19,16 @@ var actionStyles = css({
     verticalAlign: 'middle'
   }
 });
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
+
 var SectionMessageAction = /*#__PURE__*/memo(function SectionMessageAction(_ref) {
   var children = _ref.children,
       onClick = _ref.onClick,

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,14 +87,26 @@ 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));
 });
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [Code](https://atlassian.design/components/section-message/code)
+ * - [Usage](https://atlassian.design/components/section-message/usage)
+ */
+
 var SectionMessage = /*#__PURE__*/forwardRef(function SectionMessage(props, ref) {
   return jsx(GlobalTheme.Consumer, null, function (_ref2) {
     var mode = _ref2.mode;

package/dist/esm/version.json

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

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

@@ -1,4 +1,13 @@
 /// <reference types="react" />
 import type { SectionMessageActionProps } from './types';
+/**
+ * __Section message action__
+ *
+ * A section message action is designed to work with the `action` prop from
+ * `SectionMessage`. It renders either a button or a link depending on whether
+ * an `onClick` or `href` prop is supplied, with a dot seperator in between actions.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples#actions)
+ */
 declare const SectionMessageAction: import("react").NamedExoticComponent<SectionMessageActionProps>;
 export default SectionMessageAction;

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

@@ -1,5 +1,14 @@
 /** @jsx jsx */
 import React from 'react';
 import type { SectionMessageProps } from './types';
+/**
+ * __Section message__
+ *
+ * A section message is used to alert users to a particular section of the screen.
+ *
+ * - [Examples](https://atlassian.design/components/section-message/examples)
+ * - [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>>;
 export default SectionMessage;

package/dist/types/types.d.ts

@@ -1,18 +1,57 @@
 import type { ReactElement } from 'react';
 import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-/** Appearance determines the icon and background color pairing indicating the message type */
+/**
+ * Appearance determines the icon and background color pairing indicating the message type
+ */
 export declare type Appearance = 'information' | 'warning' | 'error' | 'success' | 'discovery';
 export interface SectionMessageProps {
-    /** The appearance styling to use for the section message. */
+    /**
+     * The appearance styling to use for the section message.
+     */
     appearance?: Appearance;
+    /**
+     * The main content of the section message. This accepts a react node, although
+     * we recommend that this should be a paragraph.
+     */
     children: React.ReactNode;
+    /**
+     * The heading of the section message.
+     */
     title?: string;
+    /**
+     * Actions for the user to take after reading the section message. Accepts a ReactElement
+     * or an array of one or more SectionMessageAction React elements, which are applied as link buttons.
+     * Middle dots are automatically added between multiple link buttons, so no elements
+     * should be present between multiple actions.
+     *
+     * In general, avoid using more than two actions.
+     */
     actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
+    /**
+     * An Icon component to be rendered instead of the default icon for the component.
+     * This should only be an `@atlaskit/icon` icon. You can check out [this example](/packages/design-system/section-message/example/custom-icon)
+     * to see how to provide this icon.
+     */
     icon?: React.ElementType;
+    /**
+     * 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.
+     */
     testId?: string;
 }
 export interface SectionMessageActionProps {
+    /**
+     * The text that needs to be displayed for section message action.
+     */
     children: React.ReactNode;
+    /**
+     * A custom link component. This prop is designed to allow a custom link
+     * component to be passed to the rendered link button. The
+     * intended use-case is for when a custom router component such as react router
+     * is being used within the application.
+     *
+     * This component will only be used if a href prop is passed.
+     */
     linkComponent?: React.ComponentType<any>;
     /**
      * Click handler which will be attached to the rendered link button. The second argument can be used to
@@ -23,5 +62,9 @@ export interface SectionMessageActionProps {
      * The URL that the rendered link button will point to.
      */
     href?: string;
+    /**
+     * 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.
+     */
     testId?: string;
 }

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/section-message",
-  "version": "6.1.12",
+  "version": "6.1.15",
   "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",
@@ -13,23 +13,24 @@
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
   "sideEffects": false,
-  "atlaskit:src": "src/index.ts",
+  "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
-      "name": "Section message"
+      "name": "Section message",
+      "category": "Components"
     }
   },
   "af:exports": {
-    "./section-message": "./src/entry-points/section-message.ts",
-    "./section-message-action": "./src/entry-points/section-message-action.ts",
-    "./types": "./src/entry-points/types.ts",
-    ".": "./src/index.ts"
+    "./section-message": "./src/entry-points/section-message.tsx",
+    "./section-message-action": "./src/entry-points/section-message-action.tsx",
+    "./types": "./src/entry-points/types.tsx",
+    ".": "./src/index.tsx"
   },
   "dependencies": {
     "@atlaskit/button": "^16.3.0",
-    "@atlaskit/codemod-utils": "^4.0.0",
+    "@atlaskit/codemod-utils": "^4.1.0",
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/theme": "^12.1.0",
     "@atlaskit/tokens": "^0.10.0",
@@ -43,6 +44,7 @@
     "@atlaskit/analytics-next": "^8.1.2",
     "@atlaskit/code": "^14.3.0",
     "@atlaskit/docs": "*",
+    "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/range": "^6.0.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
@@ -55,13 +57,15 @@
     "react-dom": "^16.8.0",
     "react-test-renderer": "^16.8.0",
     "storybook-addon-performance": "^0.16.0",
-    "typescript": "4.2.4"
+    "typescript": "4.3.5"
   },
   "techstack": {
     "@atlassian/frontend": {
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "design-system": "v1",
+      "dom-events": "use-bind-event-listener",
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
       "styling": [

package/report.api.md

@@ -0,0 +1,57 @@
+## API Report File for "@atlaskit/section-message"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+```ts
+/// <reference types="react" />
+
+import { NamedExoticComponent } from 'react';
+import { default as React_2 } from 'react';
+import type { ReactElement } from 'react';
+import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
+
+/** Appearance determines the icon and background color pairing indicating the message type */
+export declare type Appearance =
+  | 'information'
+  | 'warning'
+  | 'error'
+  | 'success'
+  | 'discovery';
+
+declare const SectionMessage: React_2.ForwardRefExoticComponent<
+  SectionMessageProps & React_2.RefAttributes<HTMLElement>
+>;
+export default SectionMessage;
+
+export declare const SectionMessageAction: NamedExoticComponent<SectionMessageActionProps>;
+
+export declare interface SectionMessageActionProps {
+  children: React.ReactNode;
+  linkComponent?: React.ComponentType<any>;
+  /**
+   * Click handler which will be attached to the rendered link button. The second argument can be used to
+   * track analytics data. See the tutorial in the analytics-next package for details.
+   */
+  onClick?: (
+    e: React.MouseEvent<HTMLElement>,
+    analyticsEvent: UIAnalyticsEvent,
+  ) => void;
+  /**
+   * The URL that the rendered link button will point to.
+   */
+  href?: string;
+  testId?: string;
+}
+
+export declare interface SectionMessageProps {
+  /** The appearance styling to use for the section message. */
+  appearance?: Appearance;
+  children: React.ReactNode;
+  title?: string;
+  actions?: ReactElement | ReactElement<SectionMessageActionProps>[];
+  icon?: React.ElementType;
+  testId?: string;
+}
+
+export {};
+```