@atlaskit/inline-message 11.2.6 → 11.3.0

package/CHANGELOG.md

@@ -1,5 +1,23 @@
 # @atlaskit/inline-message
 
+## 11.3.0
+
+### Minor Changes
+
+- [`38469010a1c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/38469010a1c) - Replaces usage of the `type` prop with `appearance`.
+
+## 11.2.8
+
+### Patch Changes
+
+- [`efa50ac72ba`](https://bitbucket.org/atlassian/atlassian-frontend/commits/efa50ac72ba) - Adjusts jsdoc strings to improve prop documentation
+
+## 11.2.7
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.2.6
 
 ### Patch Changes

package/constants/package.json

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

package/dist/cjs/components/inline-message/index.js

@@ -126,6 +126,7 @@ var InlineMessage = function InlineMessage(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'connectivity' : _ref$type,
+      appearance = _ref.appearance,
       children = _ref.children,
       testId = _ref.testId,
       iconLabel = _ref.iconLabel;
@@ -144,11 +145,16 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = (0, _components.useGlobalTheme)();
+
+  if (!appearance) {
+    appearance = type;
+  }
+
   return (0, _core.jsx)("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme: theme
       })
     },
@@ -169,7 +175,7 @@ var InlineMessage = function InlineMessage(_ref) {
     css: buttonContentsStyles
   }, (0, _core.jsx)(_messageIcon.default, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
   }), title && (0, _core.jsx)("span", {
     style: {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.6",
+	"version": "11.3.0",
 	"sideEffects": false
 }

package/dist/es2019/components/inline-message/index.js

@@ -97,6 +97,7 @@ const InlineMessage = ({
   secondaryText = '',
   title = '',
   type = 'connectivity',
+  appearance,
   children,
   testId,
   iconLabel
@@ -107,11 +108,16 @@ const InlineMessage = ({
   }, [setIsOpen]);
   const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
   const theme = useGlobalTheme();
+
+  if (!appearance) {
+    appearance = type;
+  }
+
   return jsx("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme
       })
     },
@@ -132,7 +138,7 @@ const InlineMessage = ({
     css: buttonContentsStyles
   }, jsx(MessageIcon, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
   }), title && jsx("span", {
     style: {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.6",
+	"version": "11.3.0",
 	"sideEffects": false
 }

package/dist/esm/components/inline-message/index.js

@@ -103,6 +103,7 @@ var InlineMessage = function InlineMessage(_ref) {
       title = _ref$title === void 0 ? '' : _ref$title,
       _ref$type = _ref.type,
       type = _ref$type === void 0 ? 'connectivity' : _ref$type,
+      appearance = _ref.appearance,
       children = _ref.children,
       testId = _ref.testId,
       iconLabel = _ref.iconLabel;
@@ -121,11 +122,16 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = useGlobalTheme();
+
+  if (!appearance) {
+    appearance = type;
+  }
+
   return jsx("div", {
     css: rootStyles,
     style: {
       '--icon-accent-color': iconColor({
-        appearance: type,
+        appearance: appearance,
         theme: theme
       })
     },
@@ -146,7 +152,7 @@ var InlineMessage = function InlineMessage(_ref) {
     css: buttonContentsStyles
   }, jsx(MessageIcon, {
     isOpen: isOpen,
-    appearance: type,
+    appearance: appearance,
     label: iconLabel
   }), title && jsx("span", {
     style: {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/inline-message",
-	"version": "11.2.6",
+	"version": "11.3.0",
 	"sideEffects": false
 }

package/dist/types/components/inline-message/index.d.ts

@@ -23,18 +23,23 @@ interface InlineMessageProps {
      * Set the icon to be used before the title. Options are: connectivity,
      * confirmation, info, warning, and error.
      */
+    appearance?: IconAppearance;
+    /**
+     * @deprecated Please avoid using this prop as we intend to remove the prop completely in a future release. See DSP-5207 for more information.
+     * Instead use the 'appearance' prop.
+     * Set the icon to be used before the title.
+     */
     type?: IconAppearance;
     /**
-     * A `testId` prop is provided for specified elements, which is a unique
-     * string that appears as a data attribute `data-testid` in the rendered code,
-     * serving as a hook for automated tests.
-     *
-     * As inline message is composed of different components, we passed down the testId to the sub component you want to test:
-     * - testId to identify the inline message component.
-     * - testId--inline-dialog to get the content of the actual component.
-     * - testId--button to click on the actual component.
-     * - testId--title to get the title of the actual component.
-     * - testId--text to get the text of the actual component.
+      A unique string that appears as a data attribute, `data-testid`,
+      in the rendered code. It is provided to serve as a hook for automated tests.
+  
+      The value of `testId` is attached to the different sub-components in Inline Message:
+      - `testId`: the top-level inline message component
+      - `testId--inline-dialog`: the content of the message
+      - `testId--button`: the button element that opens the dialog on press
+      - `testId--title`: the title of the message
+      - `testId--text`: the text of the message
      */
     testId?: string;
     /**

package/package.json

@@ -1,11 +1,11 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "11.2.6",
+  "version": "11.3.0",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "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",
@@ -19,7 +19,8 @@
     "deprecatedAutoEntryPoints": true,
     "releaseModel": "scheduled",
     "website": {
-      "name": "Inline message"
+      "name": "Inline message",
+      "category": "Components"
     }
   },
   "dependencies": {
@@ -27,7 +28,7 @@
     "@atlaskit/icon": "^21.10.0",
     "@atlaskit/inline-dialog": "^13.3.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"
   },
@@ -56,6 +57,7 @@
       "import-structure": "atlassian-conventions"
     },
     "@repo/internal": {
+      "dom-events": "use-bind-event-listener",
       "design-system": "v1",
       "styling": [
         "static",

package/report.api.md

@@ -0,0 +1,100 @@
+## API Report File for "@atlaskit/inline-message"
+
+> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
+
+````ts
+import { FC } from 'react';
+import { ReactNode } from 'react';
+
+declare type IconAppearance =
+  | 'connectivity'
+  | 'confirmation'
+  | 'info'
+  | 'warning'
+  | 'error';
+
+declare type InlineDialogPlacement =
+  | 'auto-start'
+  | 'auto'
+  | 'auto-end'
+  | 'top-start'
+  | 'top'
+  | 'top-end'
+  | 'right-start'
+  | 'right'
+  | 'right-end'
+  | 'bottom-end'
+  | 'bottom'
+  | 'bottom-start'
+  | 'left-end'
+  | 'left'
+  | 'left-start';
+
+/**
+ * __Inline message__
+ *
+ * An inline message lets users know when important information is available or when an action is required.
+ *
+ * - [Examples](https://atlassian.design/components/inline-message/examples)
+ * - [Code](https://atlassian.design/components/inline-message/code)
+ * - [Usage](https://atlassian.design/components/inline-message/usage)
+ *
+ * @example
+ *
+ * ```jsx
+ * const Component = () => (
+ *   <InlineMessage
+ *    title="Inline Message Title Example"
+ *    secondaryText="Secondary Text"
+ *   >
+ *    <p>Some text that would be inside the open dialog and otherwise hidden.</p>
+ *   </InlineMessage>
+ * );
+ * ```
+ */
+declare const InlineMessage: FC<InlineMessageProps>;
+export default InlineMessage;
+
+declare interface InlineMessageProps {
+  /**
+   * The elements to be displayed by the inline dialog.
+   */
+  children?: ReactNode;
+  /**
+   * The placement to be passed to the inline dialog. Determines where around
+   * the text the dialog is displayed.
+   */
+  placement?: InlineDialogPlacement;
+  /**
+   * Text to display second.
+   */
+  secondaryText?: ReactNode;
+  /**
+   * Text to display first, bolded for emphasis.
+   */
+  title?: ReactNode;
+  /**
+   * Set the icon to be used before the title. Options are: connectivity,
+   * confirmation, info, warning, and error.
+   */
+  type?: IconAppearance;
+  /**
+     A unique string that appears as a data attribute, `data-testid`,
+     in the rendered code. It is provided to serve as a hook for automated tests.
+
+     The value of `testId` is attached to the different sub-components in Inline Message:
+     - `testId`: the top-level inline message component
+     - `testId--inline-dialog`: the content of the message
+     - `testId--button`: the button element that opens the dialog on press
+     - `testId--title`: the title of the message
+     - `testId--text`: the text of the message
+     */
+  testId?: string;
+  /**
+   * Text to be used as label for the button icon. Can be used to provide useful information for users with screen readers when there is no title and/or secondaryText
+   */
+  iconLabel?: string;
+}
+
+export {};
+````

package/types/package.json

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