@atlaskit/inline-message 11.4.6 → 11.4.8

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-message
 
+## 11.4.8
+
+### Patch Changes
+
+- [`18aeca8c199`](https://bitbucket.org/atlassian/atlassian-frontend/commits/18aeca8c199) - Internal change to update token references. There is no expected behaviour or visual change.
+
+## 11.4.7
+
+### Patch Changes
+
+- [`b0f6dd0bc35`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b0f6dd0bc35) - Updated to use typography tokens. There is no expected behaviour or visual change.
+
 ## 11.4.6
 
 ### Patch Changes

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

@@ -1,50 +1,36 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 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 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
+
 var buttonContentsStyles = (0, _react2.css)({
   display: 'flex',
   alignItems: 'center',
   textDecoration: 'none'
 });
 var titleStyles = (0, _react2.css)({
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
-  fontWeight: 500
+  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-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
   color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -104,6 +90,7 @@ var iconColor = (0, _components.themed)('appearance', {
     dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
   }
 });
+
 /**
  * __Inline message__
  *
@@ -126,26 +113,23 @@ var iconColor = (0, _components.themed)('appearance', {
  * );
  * ```
  */
-
 var InlineMessage = function InlineMessage(_ref) {
   var _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      _ref$secondaryText = _ref.secondaryText,
-      secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
-      _ref$title = _ref.title,
-      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;
-
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$secondaryText = _ref.secondaryText,
+    secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
+    _ref$title = _ref.title,
+    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;
   var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var toggleDialog = (0, _react.useCallback)(function () {
     setIsOpen(function (oldState) {
       return !oldState;
@@ -155,11 +139,9 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = (0, _components.useGlobalTheme)();
-
   if (!appearance) {
     appearance = type;
   }
-
   return (0, _react2.jsx)("div", {
     css: rootStyles,
     style: {
@@ -204,6 +186,5 @@ var InlineMessage = function InlineMessage(_ref) {
     "data-testid": testId && "".concat(testId, "--text")
   }, secondaryText)))));
 };
-
 var _default = InlineMessage;
 exports.default = _default;

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

@@ -1,25 +1,18 @@
 "use strict";
 
 var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.default = void 0;
-
 var _react = require("@emotion/react");
-
 var colors = _interopRequireWildcard(require("@atlaskit/theme/colors"));
-
 var _components = require("@atlaskit/theme/components");
-
 var _constants = require("../../constants");
-
 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); }
-
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
-
 /** @jsx jsx */
+
 var iconColor = (0, _components.themed)('appearance', {
   connectivity: {
     light: "var(--ds-icon-brand, ".concat(colors.B400, ")"),
@@ -51,20 +44,20 @@ var iconWrapperStyles = (0, _react.css)({
 var iconColorStyles = (0, _react.css)({
   color: 'var(--icon-accent-color)'
 });
+
 /**
  * __Selected icon__
  *
  * The selected icon is used as the primary interactive element for the dialog.
  * Can be used with or without supporting text.
  */
-
 var SelectedIcon = function SelectedIcon(_ref) {
   var appearance = _ref.appearance,
-      isOpen = _ref.isOpen,
-      label = _ref.label;
+    isOpen = _ref.isOpen,
+    label = _ref.label;
   var _typesMapping$appeara = _constants.typesMapping[appearance],
-      SelectedIcon = _typesMapping$appeara.icon,
-      defaultLabel = _typesMapping$appeara.defaultLabel;
+    SelectedIcon = _typesMapping$appeara.icon,
+    defaultLabel = _typesMapping$appeara.defaultLabel;
   var theme = (0, _components.useGlobalTheme)();
   return (0, _react.jsx)("span", {
     "data-ds--inline-message--icon": true,
@@ -81,6 +74,5 @@ var SelectedIcon = function SelectedIcon(_ref) {
     size: "medium"
   }));
 };
-
 var _default = SelectedIcon;
 exports.default = _default;

package/dist/cjs/constants.js

@@ -1,20 +1,14 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.typesMapping = exports.VAR_SECONDARY_TEXT_COLOR = 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"));
-
 var _warning = _interopRequireDefault(require("@atlaskit/icon/glyph/warning"));
-
 var typesMapping = {
   connectivity: {
     icon: _warning.default,

package/dist/cjs/index.js

@@ -1,7 +1,6 @@
 "use strict";
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -11,5 +10,4 @@ Object.defineProperty(exports, "default", {
     return _inlineMessage.default;
   }
 });
-
 var _inlineMessage = _interopRequireDefault(require("./components/inline-message"));

package/dist/cjs/version.json

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

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

@@ -13,11 +13,11 @@ const buttonContentsStyles = css({
   textDecoration: 'none'
 });
 const titleStyles = css({
-  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
-  fontWeight: 500
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const textStyles = css({
-  padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
+  padding: `${"var(--ds-space-0, 0px)"} ${"var(--ds-space-050, 4px)"}`,
   color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -77,6 +77,7 @@ const iconColor = themed('appearance', {
     dark: `var(--ds-icon-danger, ${colors.R300})`
   }
 });
+
 /**
  * __Inline message__
  *
@@ -99,7 +100,6 @@ const iconColor = themed('appearance', {
  * );
  * ```
  */
-
 const InlineMessage = ({
   placement = 'bottom-start',
   secondaryText = '',
@@ -116,11 +116,9 @@ const InlineMessage = ({
   }, [setIsOpen]);
   const onCloseDialog = useCallback(() => setIsOpen(false), [setIsOpen]);
   const theme = useGlobalTheme();
-
   if (!appearance) {
     appearance = type;
   }
-
   return jsx("div", {
     css: rootStyles,
     style: {
@@ -167,5 +165,4 @@ const InlineMessage = ({
     "data-testid": testId && `${testId}--text`
   }, secondaryText)))));
 };
-
 export default InlineMessage;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
@@ -34,13 +35,13 @@ const iconWrapperStyles = css({
 const iconColorStyles = css({
   color: 'var(--icon-accent-color)'
 });
+
 /**
  * __Selected icon__
  *
  * The selected icon is used as the primary interactive element for the dialog.
  * Can be used with or without supporting text.
  */
-
 const SelectedIcon = ({
   appearance,
   isOpen,
@@ -68,5 +69,4 @@ const SelectedIcon = ({
     size: "medium"
   }));
 };
-
 export default SelectedIcon;

package/dist/es2019/version.json

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

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

@@ -1,6 +1,5 @@
 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';
@@ -16,11 +15,11 @@ var buttonContentsStyles = css({
   textDecoration: 'none'
 });
 var titleStyles = css({
-  padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
-  fontWeight: 500
+  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-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
+  padding: "var(--ds-space-0, 0px)".concat(" ", "var(--ds-space-050, 4px)"),
   color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
@@ -80,6 +79,7 @@ var iconColor = themed('appearance', {
     dark: "var(--ds-icon-danger, ".concat(colors.R300, ")")
   }
 });
+
 /**
  * __Inline message__
  *
@@ -102,26 +102,23 @@ var iconColor = themed('appearance', {
  * );
  * ```
  */
-
 var InlineMessage = function InlineMessage(_ref) {
   var _ref$placement = _ref.placement,
-      placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
-      _ref$secondaryText = _ref.secondaryText,
-      secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
-      _ref$title = _ref.title,
-      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;
-
+    placement = _ref$placement === void 0 ? 'bottom-start' : _ref$placement,
+    _ref$secondaryText = _ref.secondaryText,
+    secondaryText = _ref$secondaryText === void 0 ? '' : _ref$secondaryText,
+    _ref$title = _ref.title,
+    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;
   var _useState = useState(false),
-      _useState2 = _slicedToArray(_useState, 2),
-      isOpen = _useState2[0],
-      setIsOpen = _useState2[1];
-
+    _useState2 = _slicedToArray(_useState, 2),
+    isOpen = _useState2[0],
+    setIsOpen = _useState2[1];
   var toggleDialog = useCallback(function () {
     setIsOpen(function (oldState) {
       return !oldState;
@@ -131,11 +128,9 @@ var InlineMessage = function InlineMessage(_ref) {
     return setIsOpen(false);
   }, [setIsOpen]);
   var theme = useGlobalTheme();
-
   if (!appearance) {
     appearance = type;
   }
-
   return jsx("div", {
     css: rootStyles,
     style: {
@@ -180,5 +175,4 @@ var InlineMessage = function InlineMessage(_ref) {
     "data-testid": testId && "".concat(testId, "--text")
   }, secondaryText)))));
 };
-
 export default InlineMessage;

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

@@ -1,4 +1,5 @@
 /** @jsx jsx */
+
 import { css, jsx } from '@emotion/react';
 import * as colors from '@atlaskit/theme/colors';
 import { themed, useGlobalTheme } from '@atlaskit/theme/components';
@@ -34,20 +35,20 @@ var iconWrapperStyles = css({
 var iconColorStyles = css({
   color: 'var(--icon-accent-color)'
 });
+
 /**
  * __Selected icon__
  *
  * The selected icon is used as the primary interactive element for the dialog.
  * Can be used with or without supporting text.
  */
-
 var SelectedIcon = function SelectedIcon(_ref) {
   var appearance = _ref.appearance,
-      isOpen = _ref.isOpen,
-      label = _ref.label;
+    isOpen = _ref.isOpen,
+    label = _ref.label;
   var _typesMapping$appeara = typesMapping[appearance],
-      SelectedIcon = _typesMapping$appeara.icon,
-      defaultLabel = _typesMapping$appeara.defaultLabel;
+    SelectedIcon = _typesMapping$appeara.icon,
+    defaultLabel = _typesMapping$appeara.defaultLabel;
   var theme = useGlobalTheme();
   return jsx("span", {
     "data-ds--inline-message--icon": true,
@@ -64,5 +65,4 @@ var SelectedIcon = function SelectedIcon(_ref) {
     size: "medium"
   }));
 };
-
 export default SelectedIcon;

package/dist/esm/version.json

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/inline-message",
-  "version": "11.4.6",
+  "version": "11.4.8",
   "description": "An inline message lets users know when important information is available or when an action is required.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"

package/report.api.md

@@ -8,6 +8,7 @@
 ### Table of contents
 
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
 ### Main Entry Types
 
@@ -64,3 +65,15 @@ interface InlineMessageProps {
 ```
 
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->