@atlaskit/onboarding - npm Package Compare versions

Comparing version 11.3.2 to 11.4.0

CHANGELOG.md

 # @atlaskit/onboarding
 
+## 11.4.0
+
+### Minor Changes
+
+- [#94745](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/94745) [`a0e6d0465080`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a0e6d0465080) - [ux] Internal changes to typography + small visual change to background color.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 11.3.2
@@ -4,0 +14,0 @@

dist/cjs/components/spotlight-card.js

@@ -14,4 +14,3 @@ "use strict";
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _colors = require("@atlaskit/theme/colors");
-var _constants = require("@atlaskit/theme/constants");
+var _primitives = require("@atlaskit/primitives");
 var _dialog = require("../styled/dialog");
@@ -55,12 +54,13 @@ var _theme = require("./theme");
 };
-var containerStyles = (0, _react2.css)({
+var containerStyles = (0, _primitives.xcss)({
   height: 'fit-content',
-  zIndex: _constants.layers.spotlight() + 1,
-  background: "var(--ds-background-discovery-bold, ".concat(_colors.P300, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(_colors.N0, ")"),
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-var containerShadowStyles = (0, _react2.css)({
-  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(_colors.N50A, ", 0 0 1px ").concat(_colors.N60A), ")")
+var containerShadowStyles = (0, _primitives.xcss)({
+  boxShadow: 'elevation.shadow.raised'
 });
@@ -100,11 +100,10 @@ /**
     value: _theme.spotlightButtonTheme
-  }, (0, _react2.jsx)("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, (0, _react2.jsx)(_primitives.Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : "".concat(width, "px")
+      width: width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? (0, _react2.jsx)("img", {
@@ -119,5 +118,5 @@ css: imageStyles,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: "h".concat(headingLevel)
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, (0, _react2.jsx)(_primitives.Text, null, children), actions.length > 0 || actionsBeforeElement ? (0, _react2.jsx)(Footer, null, actionsBeforeElement || (0, _react2.jsx)("span", null), (0, _react2.jsx)(_dialog.DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
@@ -124,0 +123,0 @@ key = _ref3.key,

dist/cjs/components/spotlight-dialog.js

@@ -30,3 +30,3 @@ "use strict";
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.3.2";
+var packageVersion = "11.4.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
@@ -33,0 +33,0 @@ (0, _inherits2.default)(SpotlightDialog, _Component);

dist/cjs/components/theme.js

@@ -22,3 +22,3 @@ "use strict";
     background: {
-      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")"),
       hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
@@ -28,3 +28,3 @@ active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")")
     },
@@ -31,0 +31,0 @@ color: {

dist/es2019/components/spotlight-card.js

@@ -6,4 +6,3 @@ /** @jsx jsx */
 import Heading from '@atlaskit/heading';
-import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
@@ -41,12 +40,13 @@ import { spotlightButtonTheme } from './theme';
 }, children);
-const containerStyles = css({
+const containerStyles = xcss({
   height: 'fit-content',
-  zIndex: layers.spotlight() + 1,
-  background: `var(--ds-background-discovery-bold, ${P300})`,
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: `var(--ds-text-inverse, ${N0})`,
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-const containerShadowStyles = css({
-  boxShadow: `var(--ds-shadow-raised, ${`0 4px 8px -2px ${N50A}, 0 0 1px ${N60A}`})`
+const containerShadowStyles = xcss({
+  boxShadow: 'elevation.shadow.raised'
 });
@@ -84,11 +84,10 @@ /**
     value: spotlightButtonTheme
-  }, jsx("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, jsx(Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : `${width}px`
+      width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? jsx("img", {
@@ -103,5 +102,5 @@ css: imageStyles,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: `h${headingLevel}`
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
+  }, heading), headingAfterElement) : null, jsx(Text, null, children), actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(({
     text,
@@ -108,0 +107,0 @@ key,

dist/es2019/components/spotlight-dialog.js

@@ -10,3 +10,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 const packageName = "@atlaskit/onboarding";
-const packageVersion = "11.3.2";
+const packageVersion = "11.4.0";
 class SpotlightDialog extends Component {
@@ -13,0 +13,0 @@ constructor(...args) {

dist/es2019/components/theme.js

@@ -5,3 +5,3 @@ import * as colors from '@atlaskit/theme/colors';
     background: {
-      default: `var(--ds-background-inverse-subtle, ${colors.P400})`,
+      default: `var(--ds-background-inverse-subtle, ${colors.P500})`,
       hover: `var(--ds-background-inverse-subtle-hovered, ${colors.P200})`,
@@ -11,3 +11,3 @@ active: `var(--ds-background-inverse-subtle-pressed, ${colors.P500})`,
       selected: `var(--ds-background-inverse-subtle-pressed, ${colors.R500})`,
-      focus: `var(--ds-background-inverse-subtle, ${colors.P400})`
+      focus: `var(--ds-background-inverse-subtle, ${colors.P500})`
     },
@@ -14,0 +14,0 @@ color: {

dist/esm/components/spotlight-card.js

@@ -8,4 +8,3 @@ import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
 import Heading from '@atlaskit/heading';
-import { N0, N50A, N60A, P300 } from '@atlaskit/theme/colors';
-import { layers } from '@atlaskit/theme/constants';
+import { Box, Text, xcss } from '@atlaskit/primitives';
 import { DialogActionItem, DialogActionItemContainer } from '../styled/dialog';
@@ -45,12 +44,13 @@ import { spotlightButtonTheme } from './theme';
 };
-var containerStyles = css({
+var containerStyles = xcss({
   height: 'fit-content',
-  zIndex: layers.spotlight() + 1,
-  background: "var(--ds-background-discovery-bold, ".concat(P300, ")"),
-  borderRadius: "var(--ds-border-radius, 3px)",
-  color: "var(--ds-text-inverse, ".concat(N0, ")"),
-  overflow: 'auto'
+  zIndex: 'spotlight',
+  borderRadius: 'border.radius',
+  color: 'color.text.inverse',
+  overflow: 'auto',
+  minWidth: '160px',
+  maxWidth: '600px'
 });
-var containerShadowStyles = css({
-  boxShadow: "var(--ds-shadow-raised, ".concat("0 4px 8px -2px ".concat(N50A, ", 0 0 1px ").concat(N60A), ")")
+var containerShadowStyles = xcss({
+  boxShadow: 'elevation.shadow.raised'
 });
@@ -90,11 +90,10 @@ /**
     value: spotlightButtonTheme
-  }, jsx("div", {
-    css: [containerStyles, !isFlat && containerShadowStyles],
+  }, jsx(Box, {
+    backgroundColor: "color.background.discovery.bold",
+    xcss: [containerStyles, !isFlat && containerShadowStyles],
     style: {
-      minWidth: '160px',
-      maxWidth: '600px',
-      width: typeof width === 'string' ? width : "".concat(width, "px")
+      width: width
     },
     ref: ref || innerRef,
-    "data-testid": testId
+    testId: testId
   }, typeof image === 'string' ? jsx("img", {
@@ -109,5 +108,5 @@ css: imageStyles,
     color: "inverse",
-    level: "h600",
+    size: "medium",
     as: "h".concat(headingLevel)
-  }, heading), headingAfterElement) : null, children, actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
+  }, heading), headingAfterElement) : null, jsx(Text, null, children), actions.length > 0 || actionsBeforeElement ? jsx(Footer, null, actionsBeforeElement || jsx("span", null), jsx(DialogActionItemContainer, null, actions.map(function (_ref3, idx) {
     var text = _ref3.text,
@@ -114,0 +113,0 @@ key = _ref3.key,

dist/esm/components/spotlight-dialog.js

@@ -20,3 +20,3 @@ import _classCallCheck from "@babel/runtime/helpers/classCallCheck";
 var packageName = "@atlaskit/onboarding";
-var packageVersion = "11.3.2";
+var packageVersion = "11.4.0";
 var SpotlightDialog = /*#__PURE__*/function (_Component) {
@@ -23,0 +23,0 @@ _inherits(SpotlightDialog, _Component);

dist/esm/components/theme.js

@@ -12,3 +12,3 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
     background: {
-      default: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")"),
+      default: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")"),
       hover: "var(--ds-background-inverse-subtle-hovered, ".concat(colors.P200, ")"),
@@ -18,3 +18,3 @@ active: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.P500, ")"),
       selected: "var(--ds-background-inverse-subtle-pressed, ".concat(colors.R500, ")"),
-      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P400, ")")
+      focus: "var(--ds-background-inverse-subtle, ".concat(colors.P500, ")")
     },
@@ -21,0 +21,0 @@ color: {

package.json

 {
   "name": "@atlaskit/onboarding",
-  "version": "11.3.2",
+  "version": "11.4.0",
   "description": "An onboarding spotlight introduces new features to users through focused messages or multi-step tours.",
@@ -46,8 +46,9 @@ "publishConfig": {
     "@atlaskit/heading": "^2.2.0",
-    "@atlaskit/modal-dialog": "^12.11.0",
+    "@atlaskit/modal-dialog": "^12.13.0",
     "@atlaskit/motion": "^1.5.0",
     "@atlaskit/popper": "^5.5.0",
     "@atlaskit/portal": "^4.4.0",
+    "@atlaskit/primitives": "^5.7.0",
     "@atlaskit/theme": "^12.7.0",
-    "@atlaskit/tokens": "^1.43.0",
+    "@atlaskit/tokens": "^1.44.0",
     "@babel/runtime": "^7.0.0",
@@ -54,0 +55,0 @@ "@emotion/react": "^11.7.1",

No alert changes

Worsened metrics

Total package byte prevSize

303243

decreased by-0.09%

Dependency count

23

increased by4.55%

Lines of code

6083

decreased by-0.03%

Dependency changes

• + Added@atlaskit/primitives@^5.7.0

• + Added@atlaskit/primitives@5.7.0(transitive)

• Updated@atlaskit/modal-dialog@^12.13.0

• Updated@atlaskit/tokens@^1.44.0