@atlaskit/inline-message 11.4.5 → 11.4.7

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/inline-message
 
+## 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
+
+- [`25902de2d93`](https://bitbucket.org/atlassian/atlassian-frontend/commits/25902de2d93) - [ux] Added pressed (active) state styles for the secondary text.
+
 ## 11.4.5
 
 ### Patch Changes

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

@@ -9,6 +9,8 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 
 var _react = require("react");
@@ -23,6 +25,8 @@ 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); }
@@ -37,10 +41,11 @@ var buttonContentsStyles = (0, _react2.css)({
 });
 var titleStyles = (0, _react2.css)({
   padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
-  fontWeight: 500
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var textStyles = (0, _react2.css)({
   padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
+  color: "var(".concat(_constants.VAR_SECONDARY_TEXT_COLOR, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -54,12 +59,19 @@ var rootStyles = (0, _react2.css)({
   '&:hover': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--icon]': {
+      // Legacy style
       color: 'var(--icon-accent-color)'
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
+  },
+  // eslint-disable-next-line @repo/internal/styles/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 titleColor = (0, _components.themed)({
@@ -184,11 +196,10 @@ var InlineMessage = function InlineMessage(_ref) {
     css: titleStyles,
     "data-testid": testId && "".concat(testId, "--title")
   }, title), secondaryText && (0, _react2.jsx)("span", {
-    style: {
-      color: textColor({
-        theme: theme
-      })
-    },
+    "data-ds--inline-message--secondary-text": true,
+    style: (0, _defineProperty2.default)({}, _constants.VAR_SECONDARY_TEXT_COLOR, textColor({
+      theme: theme
+    })),
     css: textStyles,
     "data-testid": testId && "".concat(testId, "--text")
   }, secondaryText)))));

package/dist/cjs/constants.js

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

package/dist/cjs/version.json

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

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

@@ -5,6 +5,7 @@ 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 { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
 import MessageIcon from '../message-icon';
 const buttonContentsStyles = css({
   display: 'flex',
@@ -13,10 +14,11 @@ const buttonContentsStyles = css({
 });
 const titleStyles = css({
   padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
-  fontWeight: 500
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 const textStyles = css({
   padding: `${"var(--ds-scale-0, 0px)"} ${"var(--ds-scale-050, 4px)"}`,
+  color: `var(${VAR_SECONDARY_TEXT_COLOR})`,
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -30,12 +32,19 @@ const rootStyles = css({
   '&:hover': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--icon]': {
+      // Legacy style
       color: 'var(--icon-accent-color)'
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
+  },
+  // eslint-disable-next-line @repo/internal/styles/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 titleColor = themed({
@@ -148,8 +157,9 @@ const InlineMessage = ({
     css: titleStyles,
     "data-testid": testId && `${testId}--title`
   }, title), secondaryText && jsx("span", {
+    "data-ds--inline-message--secondary-text": true,
     style: {
-      color: textColor({
+      [VAR_SECONDARY_TEXT_COLOR]: textColor({
         theme
       })
     },

package/dist/es2019/constants.js

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

package/dist/es2019/version.json

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

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

@@ -1,3 +1,4 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
@@ -7,6 +8,7 @@ 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 { VAR_SECONDARY_TEXT_COLOR } from '../../constants';
 import MessageIcon from '../message-icon';
 var buttonContentsStyles = css({
   display: 'flex',
@@ -15,10 +17,11 @@ var buttonContentsStyles = css({
 });
 var titleStyles = css({
   padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
-  fontWeight: 500
+  fontWeight: "var(--ds-font-weight-medium, 500)"
 });
 var textStyles = css({
   padding: "var(--ds-scale-0, 0px)".concat(" ", "var(--ds-scale-050, 4px)"),
+  color: "var(".concat(VAR_SECONDARY_TEXT_COLOR, ")"),
   overflow: 'hidden',
   textOverflow: 'ellipsis',
   whiteSpace: 'nowrap'
@@ -32,12 +35,19 @@ var rootStyles = css({
   '&:hover': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--icon]': {
+      // Legacy style
       color: 'var(--icon-accent-color)'
     },
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '[data-ds--inline-message--button]': {
       textDecoration: 'underline'
     }
+  },
+  // eslint-disable-next-line @repo/internal/styles/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 titleColor = themed({
@@ -162,11 +172,10 @@ var InlineMessage = function InlineMessage(_ref) {
     css: titleStyles,
     "data-testid": testId && "".concat(testId, "--title")
   }, title), secondaryText && jsx("span", {
-    style: {
-      color: textColor({
-        theme: theme
-      })
-    },
+    "data-ds--inline-message--secondary-text": true,
+    style: _defineProperty({}, VAR_SECONDARY_TEXT_COLOR, textColor({
+      theme: theme
+    })),
     css: textStyles,
     "data-testid": testId && "".concat(testId, "--text")
   }, secondaryText)))));

package/dist/esm/constants.js

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

package/dist/esm/version.json

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

package/dist/types/constants.d.ts

@@ -1,2 +1,3 @@
 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": "11.4.5",
+  "version": "11.4.7",
   "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

@@ -1,4 +1,4 @@
-<!-- API Report Version: 2.2 -->
+<!-- API Report Version: 2.3 -->
 
 ## API Report File for "@atlaskit/inline-message"
 
@@ -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-->