@atlaskit/progress-indicator 9.3.3 → 9.4.0

package/CHANGELOG.md

@@ -1,5 +1,15 @@
 # @atlaskit/progress-indicator
 
+## 9.4.0
+
+### Minor Changes
+
+- [`c146611a18c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/c146611a18c) - [ux] Migrate progress-indicator package to use spacing primitives to control spacing in both component and examples. Spacing values have been slightly updated depending on indicator size and spacing properties
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 9.3.3
 
 ### Patch Changes

package/dist/cjs/components/constants.js

@@ -3,19 +3,31 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.varDotsSize = exports.varDotsMargin = exports.spacingDivision = exports.sizes = void 0;
+exports.varDotsSize = exports.varDotsMargin = exports.sizes = exports.progressIndicatorGapMap = void 0;
+var progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
+exports.progressIndicatorGapMap = progressIndicatorGapMap;
 var sizes = {
   small: 4,
   default: 8,
   large: 12
 };
 exports.sizes = sizes;
-var spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
-exports.spacingDivision = spacingDivision;
 var varDotsSize = '--ds-dots-size';
 exports.varDotsSize = varDotsSize;
 var varDotsMargin = '--ds-dots-margin';

package/dist/cjs/components/indicator.js

@@ -15,6 +15,8 @@ var _focusRing = _interopRequireDefault(require("@atlaskit/focus-ring"));
 
 var _constants = require("./constants");
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 var commonStyles = (0, _react.css)({
   width: "var(".concat(_constants.varDotsSize, ")"),
@@ -32,7 +34,6 @@ var commonStyles = (0, _react.css)({
   }
 });
 var buttonStyles = (0, _react.css)({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

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

@@ -11,6 +11,8 @@ exports.default = void 0;
 
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
 var _react = _interopRequireWildcard(require("react"));
 
 var _react2 = require("@emotion/react");
@@ -19,6 +21,10 @@ var _bindEventListener = require("bind-event-listener");
 
 var _analyticsNext = require("@atlaskit/analytics-next");
 
+var _box = _interopRequireDefault(require("@atlaskit/ds-explorations/box"));
+
+var _inline = _interopRequireDefault(require("@atlaskit/ds-explorations/inline"));
+
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
 
 var _components = require("@atlaskit/theme/components");
@@ -35,12 +41,7 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 /** @jsx jsx */
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.3.3";
-var containerStyles = (0, _react2.css)({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: "var(".concat(_constants.varDotsMargin, ")")
-});
+var packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -72,6 +73,11 @@ var ProgressDots = function ProgressDots(_ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
+
+  var _progressIndicatorGap = (0, _slicedToArray2.default)(_constants.progressIndicatorGapMap[gutter][size], 2),
+      inlineGapValue = _progressIndicatorGap[0],
+      rawGapValue = _progressIndicatorGap[1];
+
   var handleKeyDown = (0, _react.useCallback)(function (event) {
     var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -122,14 +128,16 @@ var ProgressDots = function ProgressDots(_ref) {
     });
   }, [onSelect, handleKeyDown]);
   var theme = (0, _components.useGlobalTheme)();
-  return (0, _react2.jsx)("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, "".concat(_constants.sizes[size] / _constants.spacingDivision[gutter], "px")), _ref2),
+  return (0, _react2.jsx)(_box.default, {
+    UNSAFE_style: (_ref2 = {}, (0, _defineProperty2.default)(_ref2, _constants.varDotsSize, "".concat(_constants.sizes[size], "px")), (0, _defineProperty2.default)(_ref2, _constants.varDotsMargin, rawGapValue), _ref2),
+    role: "tablist"
+  }, (0, _react2.jsx)(_inline.default, {
+    testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
@@ -161,7 +169,7 @@ var ProgressDots = function ProgressDots(_ref) {
         backgroundColor: backgroundColor
       }
     });
-  }));
+  })));
 };
 
 var _default = ProgressDots;

package/dist/cjs/version.json

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

package/dist/es2019/components/constants.js

@@ -1,12 +1,24 @@
+export const progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
 export const sizes = {
   small: 4,
   default: 8,
   large: 12
 };
-export const spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
 export const varDotsSize = '--ds-dots-size';
 export const varDotsMargin = '--ds-dots-margin';

package/dist/es2019/components/indicator.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
@@ -20,7 +22,6 @@ const commonStyles = css({
   }
 });
 const buttonStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

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

@@ -1,20 +1,17 @@
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
-import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 const packageName = "@atlaskit/progress-indicator";
-const packageVersion = "9.3.3";
-const containerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: `var(${varDotsMargin})`
-});
+const packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -42,6 +39,7 @@ const ProgressDots = ({
     packageName,
     packageVersion
   });
+  const [inlineGapValue, rawGapValue] = progressIndicatorGapMap[gutter][size];
   const handleKeyDown = useCallback(event => {
     const indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -92,17 +90,19 @@ const ProgressDots = ({
     });
   }, [onSelect, handleKeyDown]);
   const theme = useGlobalTheme();
-  return jsx("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: {
+  return jsx(Box, {
+    UNSAFE_style: {
       [varDotsSize]: `${sizes[size]}px`,
-      [varDotsMargin]: `${sizes[size] / spacingDivision[gutter]}px`
+      [varDotsMargin]: rawGapValue
     },
+    role: "tablist"
+  }, jsx(Inline, {
+    testId: testId,
     ref: r => {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map((_, index) => {
     const isSelected = selectedIndex === index;
     const tabId = `${ariaLabel}${index}`;
@@ -132,7 +132,7 @@ const ProgressDots = ({
         backgroundColor
       }
     });
-  }));
+  })));
 };
 
 export default ProgressDots;

package/dist/es2019/version.json

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

package/dist/esm/components/constants.js

@@ -1,12 +1,24 @@
+export var progressIndicatorGapMap = {
+  comfortable: {
+    small: ['scale.075', "var(--ds-space-075, 6px)"],
+    default: ['scale.100', "var(--ds-space-100, 8px)"],
+    large: ['scale.150', "var(--ds-space-150, 12px)"]
+  },
+  cozy: {
+    small: ['scale.050', "var(--ds-space-050, 4px)"],
+    default: ['scale.075', "var(--ds-space-075, 6px)"],
+    large: ['scale.100', "var(--ds-space-100, 8px)"]
+  },
+  compact: {
+    small: ['scale.025', "var(--ds-space-025, 2px)"],
+    default: ['scale.050', "var(--ds-space-050, 4px)"],
+    large: ['scale.075', "var(--ds-space-075, 6px)"]
+  }
+};
 export var sizes = {
   small: 4,
   default: 8,
   large: 12
 };
-export var spacingDivision = {
-  comfortable: 1,
-  cozy: 2,
-  compact: 4
-};
 export var varDotsSize = '--ds-dots-size';
 export var varDotsMargin = '--ds-dots-margin';

package/dist/esm/components/indicator.js

@@ -1,5 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 
+/* eslint-disable @repo/internal/react/use-primitives */
+
 /** @jsx jsx */
 import { css, jsx } from '@emotion/react';
 import FocusRing from '@atlaskit/focus-ring';
@@ -20,7 +22,6 @@ var commonStyles = css({
   }
 });
 var buttonStyles = css({
-  // TODO Delete this comment after verifying spacing token -> previous value `0`
   padding: "var(--ds-scale-0, 0px)",
   border: 0,
   cursor: 'pointer',

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

@@ -1,22 +1,20 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 
 /** @jsx jsx */
 import React, { useCallback, useEffect, useRef } from 'react';
-import { css, jsx } from '@emotion/react';
+import { jsx } from '@emotion/react';
 import { bind } from 'bind-event-listener';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next';
+import Box from '@atlaskit/ds-explorations/box';
+import Inline from '@atlaskit/ds-explorations/inline';
 import noop from '@atlaskit/ds-lib/noop';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBgColor } from './appearances';
-import { sizes, spacingDivision, varDotsMargin, varDotsSize } from './constants';
+import { progressIndicatorGapMap, sizes, varDotsMargin, varDotsSize } from './constants';
 import { ButtonIndicator, PresentationalIndicator } from './indicator';
 var packageName = "@atlaskit/progress-indicator";
-var packageVersion = "9.3.3";
-var containerStyles = css({
-  display: 'flex',
-  justifyContent: 'center',
-  gap: "var(".concat(varDotsMargin, ")")
-});
+var packageVersion = "9.4.0";
 /**
  * __ProgressDots__
  *
@@ -48,6 +46,11 @@ var ProgressDots = function ProgressDots(_ref) {
     packageName: packageName,
     packageVersion: packageVersion
   });
+
+  var _progressIndicatorGap = _slicedToArray(progressIndicatorGapMap[gutter][size], 2),
+      inlineGapValue = _progressIndicatorGap[0],
+      rawGapValue = _progressIndicatorGap[1];
+
   var handleKeyDown = useCallback(function (event) {
     var indicators = Array.from(tablistRef.current.children); // bail if the target isn't an indicator
 
@@ -98,14 +101,16 @@ var ProgressDots = function ProgressDots(_ref) {
     });
   }, [onSelect, handleKeyDown]);
   var theme = useGlobalTheme();
-  return jsx("div", {
-    "data-testid": testId,
-    css: containerStyles,
-    style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, "".concat(sizes[size] / spacingDivision[gutter], "px")), _ref2),
+  return jsx(Box, {
+    UNSAFE_style: (_ref2 = {}, _defineProperty(_ref2, varDotsSize, "".concat(sizes[size], "px")), _defineProperty(_ref2, varDotsMargin, rawGapValue), _ref2),
+    role: "tablist"
+  }, jsx(Inline, {
+    testId: testId,
     ref: function ref(r) {
       tablistRef.current = r;
     },
-    role: "tablist"
+    justifyContent: "center",
+    gap: inlineGapValue
   }, values.map(function (_, index) {
     var isSelected = selectedIndex === index;
     var tabId = "".concat(ariaLabel).concat(index);
@@ -137,7 +142,7 @@ var ProgressDots = function ProgressDots(_ref) {
         backgroundColor: backgroundColor
       }
     });
-  }));
+  })));
 };
 
 export default ProgressDots;

package/dist/esm/version.json

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

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

@@ -1,12 +1,31 @@
+import type { UNSAFE_InlineProps } from '@atlaskit/ds-explorations';
+import { token } from '@atlaskit/tokens';
+declare type TokenValue = ReturnType<typeof token>;
+declare type ScaleValue = UNSAFE_InlineProps['gap'];
+declare type SpacingTuple = [ScaleValue, TokenValue];
+declare type SpacingPropsToTokensMap = {
+    comfortable: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+    cozy: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+    compact: {
+        small: SpacingTuple;
+        default: SpacingTuple;
+        large: SpacingTuple;
+    };
+};
+export declare const progressIndicatorGapMap: SpacingPropsToTokensMap;
 export declare const sizes: {
     small: number;
     default: number;
     large: number;
 };
-export declare const spacingDivision: {
-    comfortable: number;
-    cozy: number;
-    compact: number;
-};
 export declare const varDotsSize = "--ds-dots-size";
 export declare const varDotsMargin = "--ds-dots-margin";
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/progress-indicator",
-  "version": "9.3.3",
+  "version": "9.4.0",
   "description": "A progress indicator shows the user where they are along the steps of a journey.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -25,6 +25,7 @@
   },
   "dependencies": {
     "@atlaskit/analytics-next": "^8.0.0",
+    "@atlaskit/ds-explorations": "^1.5.0",
     "@atlaskit/ds-lib": "^2.1.0",
     "@atlaskit/focus-ring": "^1.2.0",
     "@atlaskit/theme": "^12.2.0",
@@ -58,7 +59,10 @@
     },
     "@repo/internal": {
       "dom-events": "use-bind-event-listener",
-      "ui-components": "lite-mode",
+      "ui-components": [
+        "lite-mode",
+        "primitives"
+      ],
       "design-system": "v1",
       "styling": [
         "static",