@atlaskit/inline-message 12.1.0 → 12.1.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/inline-message
 
+## 12.1.1
+
+### Patch Changes
+
+-   [#101830](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/101830)
+    [`3ae5d8dba986`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ae5d8dba986) -
+    Internal change only; update to use primitive components and tokenised typography.
+-   Updated dependencies
+
 ## 12.1.0
 
 ### Minor Changes

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

@@ -5,33 +5,16 @@ Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
 var _inlineDialog = _interopRequireDefault(require("@atlaskit/inline-dialog"));
+var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
-var _constants = require("../../constants");
 var _messageIcon = _interopRequireDefault(require("../message-icon"));
 /** @jsx jsx */
 
-var buttonContentsStyles = (0, _react2.css)({
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-var titleStyles = (0, _react2.css)({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var textStyles = (0, _react2.css)({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
-  color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
 var rootStyles = (0, _react2.css)({
   display: 'inline-block',
   maxWidth: '100%',
@@ -48,12 +31,6 @@ var rootStyles = (0, _react2.css)({
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '[data-ds--inline-message--button]': {
-    '&:active [data-ds--inline-message--secondary-text]': {
-      color: "var(--ds-text-subtle, ".concat("var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"), ")")
-    }
   }
 });
 var iconColor = function iconColor(appearance) {
@@ -140,23 +117,23 @@ var InlineMessage = function InlineMessage(_ref) {
     spacing: "none",
     testId: testId && "".concat(testId, "--button"),
     "aria-expanded": isOpen
-  }, (0, _react2.jsx)("div", {
-    css: buttonContentsStyles
+  }, (0, _react2.jsx)(_primitives.Inline, {
+    space: "space.050",
+    alignBlock: "center"
   }, (0, _react2.jsx)(_messageIcon.default, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), title && (0, _react2.jsx)("span", {
-    style: {
-      color: "var(--ds-text, ".concat(_colors.N600, ")")
-    },
-    css: titleStyles,
-    "data-testid": testId && "".concat(testId, "--title")
-  }, title), secondaryText && (0, _react2.jsx)("span", {
-    "data-ds--inline-message--secondary-text": true,
-    style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(_colors.N300, ")")),
-    css: textStyles,
-    "data-testid": testId && "".concat(testId, "--text")
-  }, secondaryText)))));
+  }), (0, _react2.jsx)(_primitives.Inline, {
+    space: "space.100"
+  }, title && (0, _react2.jsx)(_primitives.Text, {
+    weight: "medium",
+    testId: testId && "".concat(testId, "--title")
+  }, title), secondaryText && (0, _react2.jsx)(_primitives.Text, {
+    weight: "medium",
+    color: "color.text.subtlest",
+    maxLines: 1,
+    testId: testId && "".concat(testId, "--text")
+  }, secondaryText))))));
 };
 var _default = exports.default = InlineMessage;

package/dist/cjs/constants.js

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.typesMapping = exports.VAR_SECONDARY_TEXT_COLOR = void 0;
+exports.typesMapping = void 0;
 var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
 var _error = _interopRequireDefault(require("@atlaskit/icon/glyph/error"));
 var _info = _interopRequireDefault(require("@atlaskit/icon/glyph/info"));
@@ -30,5 +30,4 @@ var typesMapping = exports.typesMapping = {
     icon: _error.default,
     defaultLabel: 'error inline message'
   }
-};
-var VAR_SECONDARY_TEXT_COLOR = exports.VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
+};

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

@@ -3,25 +3,9 @@ import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
-import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
+import { Inline, Text } from '@atlaskit/primitives';
+import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
 import MessageIcon from '../message-icon';
-const buttonContentsStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-const titleStyles = css({
-  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-const textStyles = css({
-  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
-  color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
 const rootStyles = css({
   display: 'inline-block',
   maxWidth: '100%',
@@ -38,12 +22,6 @@ const rootStyles = css({
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '[data-ds--inline-message--button]': {
-    '&:active [data-ds--inline-message--secondary-text]': {
-      color: `var(--ds-text-subtle, ${`var(${VAR_SECONDARY_TEXT_COLOR})`})`
-    }
   }
 });
 const iconColor = appearance => {
@@ -120,25 +98,23 @@ const InlineMessage = ({
     spacing: "none",
     testId: testId && `${testId}--button`,
     "aria-expanded": isOpen
-  }, jsx("div", {
-    css: buttonContentsStyles
+  }, jsx(Inline, {
+    space: "space.050",
+    alignBlock: "center"
   }, jsx(MessageIcon, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), title && jsx("span", {
-    style: {
-      color: `var(--ds-text, ${N600})`
-    },
-    css: titleStyles,
-    "data-testid": testId && `${testId}--title`
-  }, title), secondaryText && jsx("span", {
-    "data-ds--inline-message--secondary-text": true,
-    style: {
-      [VAR_SECONDARY_TEXT_COLOR]: `var(--ds-text-subtlest, ${N300})`
-    },
-    css: textStyles,
-    "data-testid": testId && `${testId}--text`
-  }, secondaryText)))));
+  }), jsx(Inline, {
+    space: "space.100"
+  }, title && jsx(Text, {
+    weight: "medium",
+    testId: testId && `${testId}--title`
+  }, title), secondaryText && jsx(Text, {
+    weight: "medium",
+    color: "color.text.subtlest",
+    maxLines: 1,
+    testId: testId && `${testId}--text`
+  }, secondaryText))))));
 };
 export default InlineMessage;

package/dist/es2019/constants.js

@@ -23,5 +23,4 @@ export const typesMapping = {
     icon: ErrorIcon,
     defaultLabel: 'error inline message'
   }
-};
-export const VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
+};

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

@@ -1,29 +1,12 @@
-import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 /** @jsx jsx */
 import { useCallback, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import Button from '@atlaskit/button/custom-theme-button';
 import InlineDialog from '@atlaskit/inline-dialog';
-import { B300, G200, N300, N600, P200, R300, Y200 } from '@atlaskit/theme/colors';
-import { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
+import { Inline, Text } from '@atlaskit/primitives';
+import { B300, G200, P200, R300, Y200 } from '@atlaskit/theme/colors';
 import MessageIcon from '../message-icon';
-var buttonContentsStyles = css({
-  display: 'flex',
-  alignItems: 'center',
-  textDecoration: 'none'
-});
-var titleStyles = css({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
-  fontWeight: "var(--ds-font-weight-medium, 500)"
-});
-var textStyles = css({
-  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
-  color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-  whiteSpace: 'nowrap'
-});
 var rootStyles = css({
   display: 'inline-block',
   maxWidth: '100%',
@@ -40,12 +23,6 @@ var rootStyles = css({
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
-  },
-  // eslint-disable-next-line @atlaskit/design-system/no-nested-styles
-  '[data-ds--inline-message--button]': {
-    '&:active [data-ds--inline-message--secondary-text]': {
-      color: "var(--ds-text-subtle, ".concat("var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"), ")")
-    }
   }
 });
 var iconColor = function iconColor(appearance) {
@@ -132,23 +109,23 @@ var InlineMessage = function InlineMessage(_ref) {
     spacing: "none",
     testId: testId && "".concat(testId, "--button"),
     "aria-expanded": isOpen
-  }, jsx("div", {
-    css: buttonContentsStyles
+  }, jsx(Inline, {
+    space: "space.050",
+    alignBlock: "center"
   }, jsx(MessageIcon, {
     isOpen: isOpen,
     appearance: appearance,
     label: iconLabel
-  }), title && jsx("span", {
-    style: {
-      color: "var(--ds-text, ".concat(N600, ")")
-    },
-    css: titleStyles,
-    "data-testid": testId && "".concat(testId, "--title")
-  }, title), secondaryText && jsx("span", {
-    "data-ds--inline-message--secondary-text": true,
-    style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, "var(--ds-text-subtlest, ".concat(N300, ")")),
-    css: textStyles,
-    "data-testid": testId && "".concat(testId, "--text")
-  }, secondaryText)))));
+  }), jsx(Inline, {
+    space: "space.100"
+  }, title && jsx(Text, {
+    weight: "medium",
+    testId: testId && "".concat(testId, "--title")
+  }, title), secondaryText && jsx(Text, {
+    weight: "medium",
+    color: "color.text.subtlest",
+    maxLines: 1,
+    testId: testId && "".concat(testId, "--text")
+  }, secondaryText))))));
 };
 export default InlineMessage;

package/dist/esm/constants.js

@@ -23,5 +23,4 @@ export var typesMapping = {
     icon: ErrorIcon,
     defaultLabel: 'error inline message'
   }
-};
-export var VAR_SECONDARY_TEXT_COLOR = '--secondary-text-color';
+};

package/dist/types/constants.d.ts

@@ -1,3 +1,2 @@
 import type { IconAppearanceMap } from './types';
 export declare const typesMapping: IconAppearanceMap;
-export declare const VAR_SECONDARY_TEXT_COLOR = "--secondary-text-color";

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

@@ -1,3 +1,2 @@
 import type { IconAppearanceMap } from './types';
 export declare const typesMapping: IconAppearanceMap;
-export declare const VAR_SECONDARY_TEXT_COLOR = "--secondary-text-color";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "12.1.0",
+  "version": "12.1.1",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -32,11 +32,12 @@
     "runReact18": true
   },
   "dependencies": {
-    "@atlaskit/button": "^17.14.0",
-    "@atlaskit/icon": "^22.1.0",
+    "@atlaskit/button": "^17.15.0",
+    "@atlaskit/icon": "^22.3.0",
     "@atlaskit/inline-dialog": "^14.0.0",
-    "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.45.0",
+    "@atlaskit/primitives": "^6.1.0",
+    "@atlaskit/theme": "^12.8.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },