@atlaskit/progress-indicator 9.1.2 → 9.2.0

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/progress-indicator
 
+## 9.2.0
+
+### Minor Changes
+
+- [`303e4bf4aa5`](https://bitbucket.org/atlassian/atlassian-frontend/commits/303e4bf4aa5) - [ux] Instrumented progress-indicator with the new theming package, `@atlaskit/tokens`.
+
+  New tokens will be visible only in applications configured to use the new Tokens API (currently in alpha).
+  These changes are intended to be interoperable with the legacy theme implementation. Legacy dark mode users should expect no visual or breaking changes.
+
+### Patch Changes
+
+- [`58884c2f6c1`](https://bitbucket.org/atlassian/atlassian-frontend/commits/58884c2f6c1) - Internal code change turning on a new linting rule.
+- Updated dependencies
+
 ## 9.1.2
 
 ### Patch Changes

package/dist/cjs/components/appearances.js

@@ -9,41 +9,41 @@ var _colors = require("@atlaskit/theme/colors");
 
 var _components = require("@atlaskit/theme/components");
 
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
 var colorMap = {
   default: (0, _components.themed)({
-    light: _colors.N50,
-    dark: _colors.DN70
+    light: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
   }),
   help: (0, _components.themed)({
-    light: _colors.P75,
-    dark: _colors.DN70
+    light: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
   }),
   inverted: (0, _components.themed)({
-    light: 'rgba(255, 255, 255, 0.4)',
-    dark: _colors.DN300A
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: "var(--ds-icon-subtle, ".concat(_colors.DN300A, ")")
   }),
   primary: (0, _components.themed)({
-    light: _colors.B75,
-    dark: _colors.DN70
+    light: "var(--ds-background-neutral, ".concat(_colors.B75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
   })
 };
 var selectedColorMap = {
   default: (0, _components.themed)({
-    light: _colors.N900,
-    dark: _colors.DN600
+    light: "var(--ds-icon, ".concat(_colors.N900, ")"),
+    dark: "var(--ds-icon, ".concat(_colors.DN600, ")")
   }),
   help: (0, _components.themed)({
-    light: _colors.P400,
-    dark: _colors.P300
+    light: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
   }),
   inverted: (0, _components.themed)({
-    light: _colors.N0,
-    dark: _colors.DN30
+    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+    dark: "var(--ds-icon-inverse, ".concat(_colors.DN30, ")")
   }),
   primary: (0, _components.themed)({
-    light: _colors.B400,
-    dark: _colors.B100
+    light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
+    dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
   })
 };
 

package/dist/cjs/components/constants.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.varDotsMargin = exports.varDotsSize = exports.spacingDivision = exports.sizes = void 0;
+exports.varDotsSize = exports.varDotsMargin = exports.spacingDivision = exports.sizes = void 0;
 var sizes = {
   small: 4,
   default: 8,

package/dist/cjs/components/indicator.js

@@ -5,7 +5,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.ButtonIndicator = exports.PresentationalIndicator = void 0;
+exports.PresentationalIndicator = exports.ButtonIndicator = void 0;
 
 var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
@@ -43,7 +43,8 @@ var buttonStyles = (0, _core.css)({
  * A presentational indicator with no interactivity
  */
 
-var PresentationalIndicator = function PresentationalIndicator(props) {
+var PresentationalIndicator = function PresentationalIndicator(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) {
   return (0, _core.jsx)("div", (0, _extends2.default)({}, props, {
     css: commonStyles,
     role: "presentation"

package/dist/cjs/components/progress-dots.js

@@ -33,7 +33,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.1.2";
+var packageVersion = "9.2.0";
 var containerStyles = (0, _core.css)({
   display: 'flex',
   justifyContent: 'center',

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.1.2",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/es2019/components/appearances.js

@@ -1,40 +1,40 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
 const colorMap = {
   default: themed({
-    light: N50,
-    dark: DN70
+    light: `var(--ds-background-neutral, ${N50})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
   }),
   help: themed({
-    light: P75,
-    dark: DN70
+    light: `var(--ds-background-neutral, ${P75})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
   }),
   inverted: themed({
-    light: 'rgba(255, 255, 255, 0.4)',
-    dark: DN300A
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: `var(--ds-icon-subtle, ${DN300A})`
   }),
   primary: themed({
-    light: B75,
-    dark: DN70
+    light: `var(--ds-background-neutral, ${B75})`,
+    dark: `var(--ds-background-neutral, ${DN70})`
   })
 };
 const selectedColorMap = {
   default: themed({
-    light: N900,
-    dark: DN600
+    light: `var(--ds-icon, ${N900})`,
+    dark: `var(--ds-icon, ${DN600})`
   }),
   help: themed({
-    light: P400,
-    dark: P300
+    light: `var(--ds-icon-discovery, ${P400})`,
+    dark: `var(--ds-icon-discovery, ${P300})`
   }),
   inverted: themed({
-    light: N0,
-    dark: DN30
+    light: `var(--ds-icon-inverse, ${N0})`,
+    dark: `var(--ds-icon-inverse, ${DN30})`
   }),
   primary: themed({
-    light: B400,
-    dark: B100
+    light: `var(--ds-icon-brand, ${B400})`,
+    dark: `var(--ds-icon-brand, ${B100})`
   })
 };
 export const getBgColor = (appearance, isSelected) => isSelected ? selectedColorMap[appearance] : colorMap[appearance];

package/dist/es2019/components/indicator.js

@@ -31,7 +31,8 @@ const buttonStyles = css({
  * A presentational indicator with no interactivity
  */
 
-export const PresentationalIndicator = props => jsx("div", _extends({}, props, {
+export const PresentationalIndicator = (props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) => jsx("div", _extends({}, props, {
   css: commonStyles,
   role: "presentation"
 }));

package/dist/es2019/components/progress-dots.js

@@ -8,7 +8,7 @@ import { getBgColor } from './appearances';
 import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.1.2";
+const packageVersion = "9.2.0";
 const containerStyles = css({
   display: 'flex',
   justifyContent: 'center',

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.1.2",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/esm/components/appearances.js

@@ -1,40 +1,40 @@
-/* eslint-disable @atlaskit/design-system/ensure-design-token-usage */
 import { B100, B400, B75, DN30, DN300A, DN600, DN70, N0, N50, N900, P300, P400, P75 } from '@atlaskit/theme/colors';
 import { themed } from '@atlaskit/theme/components';
+// TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
 var colorMap = {
   default: themed({
-    light: N50,
-    dark: DN70
+    light: "var(--ds-background-neutral, ".concat(N50, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
   }),
   help: themed({
-    light: P75,
-    dark: DN70
+    light: "var(--ds-background-neutral, ".concat(P75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
   }),
   inverted: themed({
-    light: 'rgba(255, 255, 255, 0.4)',
-    dark: DN300A
+    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+    dark: "var(--ds-icon-subtle, ".concat(DN300A, ")")
   }),
   primary: themed({
-    light: B75,
-    dark: DN70
+    light: "var(--ds-background-neutral, ".concat(B75, ")"),
+    dark: "var(--ds-background-neutral, ".concat(DN70, ")")
   })
 };
 var selectedColorMap = {
   default: themed({
-    light: N900,
-    dark: DN600
+    light: "var(--ds-icon, ".concat(N900, ")"),
+    dark: "var(--ds-icon, ".concat(DN600, ")")
   }),
   help: themed({
-    light: P400,
-    dark: P300
+    light: "var(--ds-icon-discovery, ".concat(P400, ")"),
+    dark: "var(--ds-icon-discovery, ".concat(P300, ")")
   }),
   inverted: themed({
-    light: N0,
-    dark: DN30
+    light: "var(--ds-icon-inverse, ".concat(N0, ")"),
+    dark: "var(--ds-icon-inverse, ".concat(DN30, ")")
   }),
   primary: themed({
-    light: B400,
-    dark: B100
+    light: "var(--ds-icon-brand, ".concat(B400, ")"),
+    dark: "var(--ds-icon-brand, ".concat(B100, ")")
   })
 };
 export var getBgColor = function getBgColor(appearance, isSelected) {

package/dist/esm/components/indicator.js

@@ -31,7 +31,8 @@ var buttonStyles = css({
  * A presentational indicator with no interactivity
  */
 
-export var PresentationalIndicator = function PresentationalIndicator(props) {
+export var PresentationalIndicator = function PresentationalIndicator(props // eslint-disable-next-line @repo/internal/react/no-unsafe-spread-props
+) {
   return jsx("div", _extends({}, props, {
     css: commonStyles,
     role: "presentation"

package/dist/esm/components/progress-dots.js

@@ -10,7 +10,7 @@ import { getBgColor } from './appearances';
 import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.1.2";
+var packageVersion = "9.2.0";
 var containerStyles = css({
   display: 'flex',
   justifyContent: 'center',

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/progress-indicator",
-	"version": "9.1.2",
+	"version": "9.2.0",
 	"sideEffects": false
 }

package/dist/types/components/appearances.d.ts

@@ -1,2 +1,2 @@
 import type { DotsAppearance } from './types';
-export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<string>;
+export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => import("@atlaskit/theme").ThemedValue<"var(--ds-background-neutral)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-subtle)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-discovery)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-inverse)"> | import("@atlaskit/theme").ThemedValue<"var(--ds-icon-brand)">;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.1.2",
+  "version": "9.2.0",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -16,7 +16,6 @@
   "atlaskit:src": "src/index.tsx",
   "atlassian": {
     "team": "Design System Team",
-    "inPublicMirror": true,
     "releaseModel": "scheduled",
     "website": {
       "name": "Progress indicator"
@@ -24,9 +23,10 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
-    "@atlaskit/ds-lib": "^1.3.0",
-    "@atlaskit/focus-ring": "^0.2.4",
-    "@atlaskit/theme": "^12.0.0",
+    "@atlaskit/ds-lib": "^1.4.0",
+    "@atlaskit/focus-ring": "^1.0.0",
+    "@atlaskit/theme": "^12.1.0",
+    "@atlaskit/tokens": "^0.6.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/core": "^10.0.9"
   },
@@ -34,7 +34,6 @@
     "react": "^16.8.0"
   },
   "devDependencies": {
-    "@atlaskit/build-utils": "*",
     "@atlaskit/button": "^16.0.0",
     "@atlaskit/docs": "*",
     "@atlaskit/section-message": "^6.0.0",
@@ -57,7 +56,10 @@
     "@repo/internal": {
       "ui-components": "lite-mode",
       "design-system": "v1",
-      "styling": "emotion",
+      "styling": [
+        "static",
+        "emotion"
+      ],
       "analytics": "analytics-next",
       "theming": "tokens",
       "deprecation": "no-deprecated-imports"