@atlaskit/progress-indicator 9.5.18 → 10.0.1

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/progress-indicator
 
+## 10.0.1
+
+### Patch Changes
+
+- Updated dependencies
+
+## 10.0.0
+
+### Major Changes
+
+- [#41812](https://bitbucket.org/atlassian/atlassian-frontend/pull-requests/41812) [`48b3b440f51`](https://bitbucket.org/atlassian/atlassian-frontend/commits/48b3b440f51) - Removed all remaining legacy theming logic from the Icon and ProgressIndicator components.
+
 ## 9.5.18
 
 ### Patch Changes

package/dist/cjs/components/appearances.js

@@ -5,43 +5,18 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.getBgColor = void 0;
 var _colors = require("@atlaskit/theme/colors");
-var _components = require("@atlaskit/theme/components");
 // TODO Token usages are not consistent for dots https://product-fabric.atlassian.net/browse/DSP-3180
 var colorMap = {
-  default: (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
-  }),
-  help: (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
-  }),
-  inverted: (0, _components.themed)({
-    light: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
-    dark: "var(--ds-icon-subtle, ".concat(_colors.DN300A, ")")
-  }),
-  primary: (0, _components.themed)({
-    light: "var(--ds-background-neutral, ".concat(_colors.B75, ")"),
-    dark: "var(--ds-background-neutral, ".concat(_colors.DN70, ")")
-  })
+  default: "var(--ds-background-neutral, ".concat(_colors.N50, ")"),
+  help: "var(--ds-background-neutral, ".concat(_colors.P75, ")"),
+  inverted: "var(--ds-icon-subtle, rgba(255, 255, 255, 0.4))",
+  primary: "var(--ds-background-neutral, ".concat(_colors.B75, ")")
 };
 var selectedColorMap = {
-  default: (0, _components.themed)({
-    light: "var(--ds-icon, ".concat(_colors.N900, ")"),
-    dark: "var(--ds-icon, ".concat(_colors.DN600, ")")
-  }),
-  help: (0, _components.themed)({
-    light: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
-    dark: "var(--ds-icon-discovery, ".concat(_colors.P300, ")")
-  }),
-  inverted: (0, _components.themed)({
-    light: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
-    dark: "var(--ds-icon-inverse, ".concat(_colors.DN30, ")")
-  }),
-  primary: (0, _components.themed)({
-    light: "var(--ds-icon-brand, ".concat(_colors.B400, ")"),
-    dark: "var(--ds-icon-brand, ".concat(_colors.B100, ")")
-  })
+  default: "var(--ds-icon, ".concat(_colors.N900, ")"),
+  help: "var(--ds-icon-discovery, ".concat(_colors.P400, ")"),
+  inverted: "var(--ds-icon-inverse, ".concat(_colors.N0, ")"),
+  primary: "var(--ds-icon-brand, ".concat(_colors.B400, ")")
 };
 var getBgColor = exports.getBgColor = function getBgColor(appearance, isSelected) {
   return isSelected ? selectedColorMap[appearance] : colorMap[appearance];

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

@@ -14,7 +14,6 @@ var _bindEventListener = require("bind-event-listener");
 var _analyticsNext = require("@atlaskit/analytics-next");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 var _primitives = require("@atlaskit/primitives");
-var _components = require("@atlaskit/theme/components");
 var _appearances = require("./appearances");
 var _constants = require("./constants");
 var _indicator = require("./indicator");
@@ -23,7 +22,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 /** @jsx jsx */
 
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.5.18";
+var packageVersion = "10.0.1";
 
 /**
  * __ProgressDots__
@@ -103,7 +102,6 @@ var ProgressDots = function ProgressDots(_ref) {
       }
     });
   }, [onSelect, handleKeyDown]);
-  var theme = (0, _components.useGlobalTheme)();
   return (0, _react2.jsx)(_primitives.Box, {
     style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
     role: onSelect && 'tablist'
@@ -118,9 +116,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
-    var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected)({
-      theme: theme
-    });
+    var backgroundColor = (0, _appearances.getBgColor)(appearance, isSelected);
     return onSelect ? (0, _react2.jsx)(_indicator.ButtonIndicator, {
       key: index,
       style: {

package/dist/es2019/components/appearances.js

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

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

@@ -5,12 +5,11 @@ import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Inline } from '@atlaskit/primitives';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
 import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.5.18";
+const packageVersion = "10.0.1";
 
 /**
  * __ProgressDots__
@@ -85,7 +84,6 @@ const ProgressDots = ({
       }
     });
   }, [onSelect, handleKeyDown]);
-  const theme = useGlobalTheme();
   return jsx(Box, {
     style: {
       [varDotsSize]: `${sizes[size]}px`,
@@ -103,9 +101,7 @@ const ProgressDots = ({
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
     const panelId = `${ariaControls}${index}`;
-    const backgroundColor = getBgColor(appearance, isSelected)({
-      theme
-    });
+    const backgroundColor = getBgColor(appearance, isSelected);
     return onSelect ? jsx(ButtonIndicator, {
       key: index,
       style: {

package/dist/esm/components/appearances.js

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

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

@@ -7,12 +7,11 @@ import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
 import noop from '@atlaskit/ds-lib/noop';
 import { Box, Inline } from '@atlaskit/primitives';
-import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
 import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.5.18";
+var packageVersion = "10.0.1";
 
 /**
  * __ProgressDots__
@@ -92,7 +91,6 @@ var ProgressDots = function ProgressDots(_ref) {
       }
     });
   }, [onSelect, handleKeyDown]);
-  var theme = useGlobalTheme();
   return jsx(Box, {
     style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
     role: onSelect && 'tablist'
@@ -107,9 +105,7 @@ var ProgressDots = function ProgressDots(_ref) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
     var panelId = "".concat(ariaControls).concat(index);
-    var backgroundColor = getBgColor(appearance, isSelected)({
-      theme: theme
-    });
+    var backgroundColor = getBgColor(appearance, isSelected);
     return onSelect ? jsx(ButtonIndicator, {
       key: index,
       style: {

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<"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)">;
+export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => "var(--ds-background-neutral)" | "var(--ds-icon-subtle)" | "var(--ds-icon)" | "var(--ds-icon-discovery)" | "var(--ds-icon-inverse)" | "var(--ds-icon-brand)";

package/dist/types/types.d.ts

@@ -3,34 +3,34 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { DotsAppearance, Size, Spacing } from './components/types';
 export interface ProgressDotsProps {
     /**
-     * The color of the indicators
+     * Sets the color of the indicators.
      */
     appearance?: DotsAppearance;
     /**
-     * The aria-controls text applied to each indicator, appended by the index
+     * If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.
      */
     ariaControls?: string;
     /**
-     * The aria-label text applied to each indicator, appended by the index
+     * Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.
      */
     ariaLabel?: string;
     /**
-     * Function called when an indicator is selected
+     * Function called when an indicator is selected.
      */
     onSelect?: (eventData: {
         event: React.MouseEvent<HTMLButtonElement>;
         index: number;
     }, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Which indicator is currently selected
+     * Which indicator is currently selected.
      */
     selectedIndex: number;
     /**
-     * Corresponds to the width & height of each indicator
+     * Sets the width and height of each indicator.
      */
     size?: Size;
     /**
-     * How much of a gutter is desired between indicators
+     * Specifies how much of a gutter there is between indicators.
      */
     spacing?: Spacing;
     /**
@@ -38,7 +38,7 @@ export interface ProgressDotsProps {
      */
     testId?: string;
     /**
-     * An array of values mapped over to create the indicators
+     * An array of values mapped over to create the indicators.
      */
     values: any[];
 }

package/dist/types-ts4.5/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<"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)">;
+export declare const getBgColor: (appearance: DotsAppearance, isSelected: boolean) => "var(--ds-background-neutral)" | "var(--ds-icon-subtle)" | "var(--ds-icon)" | "var(--ds-icon-discovery)" | "var(--ds-icon-inverse)" | "var(--ds-icon-brand)";

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

@@ -3,34 +3,34 @@ import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
 import type { DotsAppearance, Size, Spacing } from './components/types';
 export interface ProgressDotsProps {
     /**
-     * The color of the indicators
+     * Sets the color of the indicators.
      */
     appearance?: DotsAppearance;
     /**
-     * The aria-controls text applied to each indicator, appended by the index
+     * If interaction is enabled, use `ariaControls` to tell assistive technology what elements are controlled by the progress indicator.
      */
     ariaControls?: string;
     /**
-     * The aria-label text applied to each indicator, appended by the index
+     * Describes what the indicator represents to assistive technology. The selected index number will be appended to the label.
      */
     ariaLabel?: string;
     /**
-     * Function called when an indicator is selected
+     * Function called when an indicator is selected.
      */
     onSelect?: (eventData: {
         event: React.MouseEvent<HTMLButtonElement>;
         index: number;
     }, analyticsEvent: UIAnalyticsEvent) => void;
     /**
-     * Which indicator is currently selected
+     * Which indicator is currently selected.
      */
     selectedIndex: number;
     /**
-     * Corresponds to the width & height of each indicator
+     * Sets the width and height of each indicator.
      */
     size?: Size;
     /**
-     * How much of a gutter is desired between indicators
+     * Specifies how much of a gutter there is between indicators.
      */
     spacing?: Spacing;
     /**
@@ -38,7 +38,7 @@ export interface ProgressDotsProps {
      */
     testId?: string;
     /**
-     * An array of values mapped over to create the indicators
+     * An array of values mapped over to create the indicators.
      */
     values: any[];
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.5.18",
+  "version": "10.0.1",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -29,9 +29,9 @@
     "@atlaskit/analytics-next": "^9.1.0",
     "@atlaskit/ds-lib": "^2.2.0",
     "@atlaskit/focus-ring": "^1.3.0",
-    "@atlaskit/primitives": "^1.9.0",
+    "@atlaskit/primitives": "^2.0.0",
     "@atlaskit/theme": "^12.6.0",
-    "@atlaskit/tokens": "^1.28.0",
+    "@atlaskit/tokens": "^1.35.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1",
     "bind-event-listener": "^2.1.1"
@@ -42,7 +42,7 @@
   "devDependencies": {
     "@af/accessibility-testing": "*",
     "@af/visual-regression": "*",
-    "@atlaskit/ds-explorations": "^3.0.0",
+    "@atlaskit/ds-explorations": "^3.2.0",
     "@atlaskit/ssr": "*",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",

package/tmp/api-report-tmp.d.ts

@@ -1,42 +0,0 @@
-## API Report File for "@atlaskit/progress-indicator"
-
-> Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
-
-```ts
-
-/// <reference types="react" />
-
-import { FC } from 'react';
-import type { UIAnalyticsEvent } from '@atlaskit/analytics-next';
-
-// @public (undocumented)
-type DotsAppearance = 'default' | 'help' | 'inverted' | 'primary';
-
-// @public (undocumented)
-export interface ProgressDotsProps {
-    appearance?: DotsAppearance;
-    ariaControls?: string;
-    ariaLabel?: string;
-    onSelect?: (eventData: {
-        event: React.MouseEvent<HTMLButtonElement>;
-        index: number;
-    }, analyticsEvent: UIAnalyticsEvent) => void;
-    selectedIndex: number;
-    size?: Size;
-    spacing?: Spacing;
-    testId?: string;
-    values: any[];
-}
-
-// @public
-export const ProgressIndicator: FC<ProgressDotsProps>;
-
-// @public (undocumented)
-type Size = 'default' | 'large' | 'small';
-
-// @public (undocumented)
-type Spacing = 'comfortable' | 'compact' | 'cozy';
-
-// (No @packageDocumentation comment for this package)
-
-```