@atlaskit/inline-message 11.4.1 → 11.4.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-message
 
+## 11.4.3
+
+### Patch Changes
+
+- Updated dependencies
+
+## 11.4.2
+
+### Patch Changes
+
+- [`9de88fa1e1e`](https://bitbucket.org/atlassian/atlassian-frontend/commits/9de88fa1e1e) - Internal changes to include spacing tokens in component implementations.
+
 ## 11.4.1
 
 ### Patch Changes

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

@@ -23,8 +23,6 @@ var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
 
 var _components = require("@atlaskit/theme/components");
 
-var _constants = require("../../constants");
-
 var _messageIcon = _interopRequireDefault(require("../message-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); }
@@ -38,11 +36,11 @@ var buttonContentsStyles = (0, _react2.css)({
   textDecoration: 'none'
 });
 var titleStyles = (0, _react2.css)({
-  padding: "0 ".concat(_constants.itemSpacing, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
   fontWeight: 500
 });
 var textStyles = (0, _react2.css)({
-  padding: "0 ".concat(_constants.itemSpacing, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/cjs/constants.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typesMapping = exports.itemSpacing = void 0;
+exports.typesMapping = void 0;
 
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 
@@ -15,10 +15,6 @@ var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
 
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
 
-var _constants = require("@atlaskit/theme/constants");
-
-var itemSpacing = (0, _constants.gridSize)() / 2;
-exports.itemSpacing = itemSpacing;
 var typesMapping = {
   connectivity: {
     icon: _warning.default,

package/dist/cjs/version.json

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

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

@@ -5,7 +5,6 @@ import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { itemSpacing } from '../../constants';
 import MessageIcon from '../message-icon';
 const buttonContentsStyles = css({
   display: 'flex',
@@ -13,11 +12,11 @@ const buttonContentsStyles = css({
   textDecoration: 'none'
 });
 const titleStyles = css({
-  padding: `0 ${itemSpacing}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
   fontWeight: 500
 });
 const textStyles = css({
-  padding: `0 ${itemSpacing}px`,
+  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/es2019/constants.js

@@ -2,8 +2,6 @@ import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InfoIcon from '@atlaskit/icon/glyph/info';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { gridSize } from '@atlaskit/theme/constants';
-export const itemSpacing = gridSize() / 2;
 export const typesMapping = {
   connectivity: {
     icon: WarningIcon,

package/dist/es2019/version.json

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

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

@@ -7,7 +7,6 @@ import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
-import { itemSpacing } from '../../constants';
 import MessageIcon from '../message-icon';
 var buttonContentsStyles = css({
   display: 'flex',
@@ -15,11 +14,11 @@ var buttonContentsStyles = css({
   textDecoration: 'none'
 });
 var titleStyles = css({
-  padding: "0 ".concat(itemSpacing, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
   fontWeight: 500
 });
 var textStyles = css({
-  padding: "0 ".concat(itemSpacing, "px"),
+  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'

package/dist/esm/constants.js

@@ -2,8 +2,6 @@ import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
 import ErrorIcon from '@atlaskit/icon/glyph/error';
 import InfoIcon from '@atlaskit/icon/glyph/info';
 import WarningIcon from '@atlaskit/icon/glyph/warning';
-import { gridSize } from '@atlaskit/theme/constants';
-export var itemSpacing = gridSize() / 2;
 export var typesMapping = {
   connectivity: {
     icon: WarningIcon,

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -1,3 +1,2 @@
 import type { IconAppearanceMap } from './types';
-export declare const itemSpacing: number;
 export declare const typesMapping: IconAppearanceMap;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "11.4.1",
+  "version": "11.4.3",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,13 +12,6 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
@@ -31,11 +24,11 @@
     }
   },
   "dependencies": {
-    "@atlaskit/button": "^16.3.0",
-    "@atlaskit/icon": "^21.10.0",
+    "@atlaskit/button": "^16.4.0",
+    "@atlaskit/icon": "^21.11.0",
     "@atlaskit/inline-dialog": "^13.4.0",
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -45,7 +38,7 @@
   "devDependencies": {
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.0.1",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlaskit/webdriver-runner": "*",
@@ -73,6 +66,7 @@
       ],
       "ui-components": "lite-mode",
       "analytics": "analytics-next",
+      "design-tokens": "spacing",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"
     }

package/report.api.md

@@ -2,18 +2,26 @@
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
-````ts
+<!--
+	Generated API Report version: 2.0
+-->
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
+```ts
 import { FC } from 'react';
 import { ReactNode } from 'react';
 
-declare type IconAppearance =
+// @public (undocumented)
+type IconAppearance =
   | 'connectivity'
   | 'confirmation'
   | 'info'
   | 'warning'
   | 'error';
 
-declare type InlineDialogPlacement =
+// @public (undocumented)
+type InlineDialogPlacement =
   | 'auto-start'
   | 'auto'
   | 'auto-end'
@@ -30,71 +38,22 @@ declare type InlineDialogPlacement =
   | '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>;
+// @public
+const InlineMessage: FC<InlineMessageProps>;
 export default InlineMessage;
 
-declare interface InlineMessageProps {
-  /**
-   * The elements to be displayed by the inline dialog.
-   */
+// @public (undocumented)
+interface InlineMessageProps {
+  appearance?: IconAppearance;
   children?: ReactNode;
-  /**
-   * The placement to be passed to the inline dialog. Determines where around
-   * the text the dialog is displayed.
-   */
+  iconLabel?: string;
   placement?: InlineDialogPlacement;
-  /**
-   * Text to display second.
-   */
   secondaryText?: ReactNode;
-  /**
-   * Text to display first, bolded for emphasis.
-   */
+  testId?: string;
   title?: ReactNode;
-  /**
-   * Set the icon to be used before the title. Options are: connectivity,
-   * confirmation, info, warning, and error.
-   */
+  // @deprecated (undocumented)
   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 {};
-````
+// (No @packageDocumentation comment for this package)
+```

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

@@ -1,73 +0,0 @@
-/** @jsx jsx */
-import { FC, ReactNode } from 'react';
-import type { IconAppearance, InlineDialogPlacement } from '../../types';
-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.
-     */
-    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 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;
-}
-/**
- * __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;

package/dist/types-ts4.0/components/message-icon/index.d.ts

@@ -1,16 +0,0 @@
-/** @jsx jsx */
-import type { FC } from 'react';
-import type { IconAppearance } from '../../types';
-interface MessageIconProps {
-    appearance: IconAppearance;
-    isOpen: boolean;
-    label?: string;
-}
-/**
- * __Selected icon__
- *
- * The selected icon is used as the primary interactive element for the dialog.
- * Can be used with or without supporting text.
- */
-declare const SelectedIcon: FC<MessageIconProps>;
-export default SelectedIcon;

package/dist/types-ts4.0/constants.d.ts

@@ -1,3 +0,0 @@
-import type { IconAppearanceMap } from './types';
-export declare const itemSpacing: number;
-export declare const typesMapping: IconAppearanceMap;

package/dist/types-ts4.0/index.d.ts

@@ -1 +0,0 @@
-export { default } from './components/inline-message';

package/dist/types-ts4.0/types.d.ts

@@ -1,9 +0,0 @@
-import { ComponentType } from 'react';
-import type { GlyphProps } from '@atlaskit/icon';
-export interface Icon {
-    defaultLabel: string;
-    icon: ComponentType<GlyphProps>;
-}
-export declare type IconAppearanceMap = Record<IconAppearance, Icon>;
-export declare type IconAppearance = 'connectivity' | 'confirmation' | 'info' | 'warning' | 'error';
-export 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';