@atlaskit/icon 22.20.1 → 22.21.0

package/core/zoom-in.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::9ed7674a9770302e55927913233491a4>>
+ * @codegen <<SignedSource::24ebd0807fef0b223c5c94ed1168eee1>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ZoomInIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<NewCoreIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ZoomInIcon;

package/core/zoom-out.d.ts

@@ -1,14 +1,15 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::0b32365d82ce6b6a6509cc717e5328fd>>
+ * @codegen <<SignedSource::4b1c95268599ebcd76008f066d0043a6>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
-import React from 'react';
-import Icon from '@atlaskit/icon/UNSAFE_base-new';
+import type React from 'react';
+import type { NewCoreIconProps } from '@atlaskit/icon/UNSAFE_base-new';
+import type Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ZoomOutIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<NewCoreIconProps, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ZoomOutIcon;

package/dist/cjs/components/icon-facade.js

@@ -14,7 +14,16 @@ var _icon = _interopRequireDefault(require("./icon"));
 var _excluded = ["dangerouslySetGlyph"];
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
-var sizesEligibleForNewIcons = ['small', 'medium'];
+var sizeSpacingMap = {
+  utility: {
+    small: 'compact',
+    medium: 'spacious'
+  },
+  core: {
+    small: 'none',
+    medium: 'spacious'
+  }
+};
 
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
@@ -30,18 +39,27 @@ var IconFacade = exports.IconFacade = /*#__PURE__*/(0, _react.memo)(function Ico
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   var NewIcon = props.newIcon;
 
-  // By default, the icon size will be medium and spacing will be none for small icons
+  // By default, the icon size will be medium for core icons and small for utility icons
   var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
-  var spacing = size === 'small' ? 'none' : 'spacious';
   var useNewIcon = !props.isFacadeDisabled &&
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
-  if (useNewIcon && NewIcon) {
-    return /*#__PURE__*/_react.default.createElement(NewIcon, (0, _extends2.default)({}, props, {
-      spacing: spacing,
-      color: props.primaryColor || 'currentColor',
-      type: props.iconType
-    }));
+  (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade');
+  if (useNewIcon && NewIcon && (size === 'small' || size === 'medium')) {
+    if (props.iconType === 'utility') {
+      var Icon = NewIcon;
+      return /*#__PURE__*/_react.default.createElement(Icon, (0, _extends2.default)({}, props, {
+        spacing: (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][size] : 'none',
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    } else {
+      var _Icon = NewIcon;
+      return /*#__PURE__*/_react.default.createElement(_Icon, (0, _extends2.default)({}, props, {
+        spacing: sizeSpacingMap['core'][size],
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    }
   }
   return /*#__PURE__*/_react.default.createElement(_icon.default, (0, _extends2.default)({
     dangerouslySetGlyph: dangerouslySetGlyph

package/dist/cjs/components/icon-new.js

@@ -61,28 +61,51 @@ var baseHcmStyles = (0, _react2.css)({
     filter: 'grayscale(1)'
   }
 });
+var scaleSize = (0, _react2.css)({
+  width: 'inherit',
+  height: 'inherit'
+});
 var sizeMap = {
-  scale: (0, _react2.css)({
-    width: 'inherit',
-    height: 'inherit'
-  }),
-  utility: (0, _react2.css)({
-    width: "var(--ds-space-150, 12px)",
-    height: "var(--ds-space-150, 12px)"
-  }),
-  none: (0, _react2.css)({
-    width: "var(--ds-space-200, 16px)",
-    height: "var(--ds-space-200, 16px)"
-  }),
-  spacious: (0, _react2.css)({
-    width: "var(--ds-space-300, 24px)",
-    height: "var(--ds-space-300, 24px)"
-  })
+  core: {
+    none: (0, _react2.css)({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: (0, _react2.css)({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  },
+  utility: {
+    none: (0, _react2.css)({
+      width: "var(--ds-space-150, 12px)",
+      height: "var(--ds-space-150, 12px)"
+    }),
+    compact: (0, _react2.css)({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: (0, _react2.css)({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  }
 };
 var baseSizeMap = {
-  global: 16,
+  core: 16,
   utility: 12
 };
+var paddingMap = {
+  core: {
+    none: 0,
+    spacious: 4
+  },
+  utility: {
+    none: 0,
+    compact: 2,
+    spacious: 6
+  }
+};
 
 /**
  * __Icon__
@@ -93,18 +116,15 @@ var baseSizeMap = {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
 var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
+  var _props$type, _props$spacing3, _props$spacing4;
   var _ref = props,
     providedColor = _ref.color,
-    _ref$spacing = _ref.spacing,
-    providedSpacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
     testId = _ref.testId,
     label = _ref.label,
     LEGACY_primaryColor = _ref.LEGACY_primaryColor,
     LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
     LEGACY_size = _ref.LEGACY_size,
     FallbackIcon = _ref.LEGACY_fallbackIcon,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
     shouldScale = _ref.shouldScale,
     LEGACY_margin = _ref.LEGACY_margin;
@@ -118,7 +138,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
   } : undefined;
 
   // Fall back to old icon
-  if (FallbackIcon && !(0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons')) {
+  if (FallbackIcon && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
     // parse out unnecessary props
     return (0, _react2.jsx)(FallbackIcon, {
       primaryColor: LEGACY_primaryColor !== null && LEGACY_primaryColor !== void 0 ? LEGACY_primaryColor : color,
@@ -131,12 +151,15 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       UNSAFE_margin: LEGACY_margin
     });
   }
-
-  // Utility icons don't have 'spacing' as a type, but in case it's provided, we default to 'none'
-  var spacing = type === 'utility' ? 'none' : providedSpacing;
-  var baseSize = baseSizeMap[type];
-  var size = type === 'utility' ? 'utility' : shouldScale ? 'scale' : spacing;
-  var viewBoxPadding = spacing === 'spacious' ? 4 : 0;
+  var baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
+  var viewBoxPadding;
+  if (props.type === 'utility') {
+    var _props$spacing;
+    viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
+  } else {
+    var _props$spacing2;
+    viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
+  }
   var viewBoxSize = baseSize + 2 * viewBoxPadding;
 
   // Workaround for the transparency in our disabled icon token.
@@ -156,7 +179,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     style: {
       color: iconColor
     },
-    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, type === 'utility' && utilityIconStyles]
+    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
   }, (0, _react2.jsx)("svg", {
     fill: "none"
     // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
@@ -164,7 +187,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     ,
     viewBox: "".concat(0 - viewBoxPadding, " ").concat(0 - viewBoxPadding, " ").concat(viewBoxSize, " ").concat(viewBoxSize),
     role: "presentation",
-    css: [commonSVGStyles, svgStyles, sizeMap[size]],
+    css: [commonSVGStyles, svgStyles, shouldScale ? scaleSize : props.type === 'utility' ? sizeMap[props.type][(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : sizeMap['core'][(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']],
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   }));
 });

package/dist/cjs/components/icon-tile.js

@@ -151,7 +151,7 @@ function IconTile(props) {
     shape = _props$shape === void 0 ? 'square' : _props$shape,
     LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
   var ExpandedIcon = Icon;
-  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons')) {
+  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return (0, _react.jsx)("span", {

package/dist/es2019/components/icon-facade.js

@@ -2,7 +2,16 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import LegacyIcon from './icon';
-const sizesEligibleForNewIcons = ['small', 'medium'];
+const sizeSpacingMap = {
+  utility: {
+    small: 'compact',
+    medium: 'spacious'
+  },
+  core: {
+    small: 'none',
+    medium: 'spacious'
+  }
+};
 
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
@@ -19,18 +28,27 @@ export const IconFacade = /*#__PURE__*/memo(function IconFacade({
   var _props$size;
   const NewIcon = props.newIcon;
 
-  // By default, the icon size will be medium and spacing will be none for small icons
+  // By default, the icon size will be medium for core icons and small for utility icons
   const size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
-  const spacing = size === 'small' ? 'none' : 'spacious';
   const useNewIcon = !props.isFacadeDisabled &&
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
-  if (useNewIcon && NewIcon) {
-    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
-      spacing: spacing,
-      color: props.primaryColor || 'currentColor',
-      type: props.iconType
-    }));
+  fg('platform-visual-refresh-icons-legacy-facade');
+  if (useNewIcon && NewIcon && (size === 'small' || size === 'medium')) {
+    if (props.iconType === 'utility') {
+      const Icon = NewIcon;
+      return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+        spacing: fg('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][size] : 'none',
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    } else {
+      const Icon = NewIcon;
+      return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+        spacing: sizeSpacingMap['core'][size],
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    }
   }
   return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
     dangerouslySetGlyph: dangerouslySetGlyph

package/dist/es2019/components/icon-new.js

@@ -55,28 +55,51 @@ const baseHcmStyles = css({
     filter: 'grayscale(1)'
   }
 });
+const scaleSize = css({
+  width: 'inherit',
+  height: 'inherit'
+});
 const sizeMap = {
-  scale: css({
-    width: 'inherit',
-    height: 'inherit'
-  }),
-  utility: css({
-    width: "var(--ds-space-150, 12px)",
-    height: "var(--ds-space-150, 12px)"
-  }),
-  none: css({
-    width: "var(--ds-space-200, 16px)",
-    height: "var(--ds-space-200, 16px)"
-  }),
-  spacious: css({
-    width: "var(--ds-space-300, 24px)",
-    height: "var(--ds-space-300, 24px)"
-  })
+  core: {
+    none: css({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: css({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  },
+  utility: {
+    none: css({
+      width: "var(--ds-space-150, 12px)",
+      height: "var(--ds-space-150, 12px)"
+    }),
+    compact: css({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: css({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  }
 };
 const baseSizeMap = {
-  global: 16,
+  core: 16,
   utility: 12
 };
+const paddingMap = {
+  core: {
+    none: 0,
+    spacious: 4
+  },
+  utility: {
+    none: 0,
+    compact: 2,
+    spacious: 6
+  }
+};
 
 /**
  * __Icon__
@@ -87,9 +110,9 @@ const baseSizeMap = {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
 export const Icon = /*#__PURE__*/memo(function Icon(props) {
+  var _props$type, _props$spacing3, _props$spacing4;
   const {
     color: providedColor,
-    spacing: providedSpacing = 'none',
     testId,
     label,
     LEGACY_primaryColor,
@@ -97,7 +120,6 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     LEGACY_size,
     LEGACY_fallbackIcon: FallbackIcon,
     // Used to set icon dimensions/behaviour in codegen
-    type = 'global',
     // Used to set icon glyphs in codegen
     dangerouslySetGlyph,
     // Used with iconTile to scale icon up and down
@@ -114,7 +136,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
   } : undefined;
 
   // Fall back to old icon
-  if (FallbackIcon && !fg('platform.design-system-team.enable-new-icons')) {
+  if (FallbackIcon && !fg('platform-visual-refresh-icons')) {
     // parse out unnecessary props
     return jsx(FallbackIcon, {
       primaryColor: LEGACY_primaryColor !== null && LEGACY_primaryColor !== void 0 ? LEGACY_primaryColor : color,
@@ -127,12 +149,15 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
       UNSAFE_margin: LEGACY_margin
     });
   }
-
-  // Utility icons don't have 'spacing' as a type, but in case it's provided, we default to 'none'
-  const spacing = type === 'utility' ? 'none' : providedSpacing;
-  const baseSize = baseSizeMap[type];
-  const size = type === 'utility' ? 'utility' : shouldScale ? 'scale' : spacing;
-  const viewBoxPadding = spacing === 'spacious' ? 4 : 0;
+  const baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
+  let viewBoxPadding;
+  if (props.type === 'utility') {
+    var _props$spacing;
+    viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
+  } else {
+    var _props$spacing2;
+    viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
+  }
   const viewBoxSize = baseSize + 2 * viewBoxPadding;
 
   // Workaround for the transparency in our disabled icon token.
@@ -159,7 +184,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     style: {
       color: iconColor
     },
-    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, type === 'utility' && utilityIconStyles]
+    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
   }, jsx("svg", {
     fill: "none"
     // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
@@ -167,7 +192,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     ,
     viewBox: `${0 - viewBoxPadding} ${0 - viewBoxPadding} ${viewBoxSize} ${viewBoxSize}`,
     role: "presentation",
-    css: [commonSVGStyles, svgStyles, sizeMap[size]],
+    css: [commonSVGStyles, svgStyles, shouldScale ? scaleSize : props.type === 'utility' ? sizeMap[props.type][(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : sizeMap['core'][(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']],
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   }));
 });

package/dist/es2019/components/icon-tile.js

@@ -144,7 +144,7 @@ export default function IconTile(props) {
     LEGACY_fallbackComponent
   } = props;
   const ExpandedIcon = Icon;
-  if (LEGACY_fallbackComponent && !fg('platform.design-system-team.enable-new-icons')) {
+  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return jsx("span", {

package/dist/esm/components/icon-facade.js

@@ -4,7 +4,16 @@ var _excluded = ["dangerouslySetGlyph"];
 import React, { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import LegacyIcon from './icon';
-var sizesEligibleForNewIcons = ['small', 'medium'];
+var sizeSpacingMap = {
+  utility: {
+    small: 'compact',
+    medium: 'spacious'
+  },
+  core: {
+    small: 'none',
+    medium: 'spacious'
+  }
+};
 
 /**
  * `IconFacade` is a component that conditionally renders either a new or legacy icon based on a feature flag.
@@ -20,18 +29,27 @@ export var IconFacade = /*#__PURE__*/memo(function IconFacade(_ref) {
     props = _objectWithoutProperties(_ref, _excluded);
   var NewIcon = props.newIcon;
 
-  // By default, the icon size will be medium and spacing will be none for small icons
+  // By default, the icon size will be medium for core icons and small for utility icons
   var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
-  var spacing = size === 'small' ? 'none' : 'spacious';
   var useNewIcon = !props.isFacadeDisabled &&
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
-  fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
-  if (useNewIcon && NewIcon) {
-    return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
-      spacing: spacing,
-      color: props.primaryColor || 'currentColor',
-      type: props.iconType
-    }));
+  fg('platform-visual-refresh-icons-legacy-facade');
+  if (useNewIcon && NewIcon && (size === 'small' || size === 'medium')) {
+    if (props.iconType === 'utility') {
+      var Icon = NewIcon;
+      return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
+        spacing: fg('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][size] : 'none',
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    } else {
+      var _Icon = NewIcon;
+      return /*#__PURE__*/React.createElement(_Icon, _extends({}, props, {
+        spacing: sizeSpacingMap['core'][size],
+        color: props.primaryColor || 'currentColor',
+        type: props.iconType
+      }));
+    }
   }
   return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
     dangerouslySetGlyph: dangerouslySetGlyph

package/dist/esm/components/icon-new.js

@@ -55,28 +55,51 @@ var baseHcmStyles = css({
     filter: 'grayscale(1)'
   }
 });
+var scaleSize = css({
+  width: 'inherit',
+  height: 'inherit'
+});
 var sizeMap = {
-  scale: css({
-    width: 'inherit',
-    height: 'inherit'
-  }),
-  utility: css({
-    width: "var(--ds-space-150, 12px)",
-    height: "var(--ds-space-150, 12px)"
-  }),
-  none: css({
-    width: "var(--ds-space-200, 16px)",
-    height: "var(--ds-space-200, 16px)"
-  }),
-  spacious: css({
-    width: "var(--ds-space-300, 24px)",
-    height: "var(--ds-space-300, 24px)"
-  })
+  core: {
+    none: css({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: css({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  },
+  utility: {
+    none: css({
+      width: "var(--ds-space-150, 12px)",
+      height: "var(--ds-space-150, 12px)"
+    }),
+    compact: css({
+      width: "var(--ds-space-200, 16px)",
+      height: "var(--ds-space-200, 16px)"
+    }),
+    spacious: css({
+      width: "var(--ds-space-300, 24px)",
+      height: "var(--ds-space-300, 24px)"
+    })
+  }
 };
 var baseSizeMap = {
-  global: 16,
+  core: 16,
   utility: 12
 };
+var paddingMap = {
+  core: {
+    none: 0,
+    spacious: 4
+  },
+  utility: {
+    none: 0,
+    compact: 2,
+    spacious: 6
+  }
+};
 
 /**
  * __Icon__
@@ -87,18 +110,15 @@ var baseSizeMap = {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
 export var Icon = /*#__PURE__*/memo(function Icon(props) {
+  var _props$type, _props$spacing3, _props$spacing4;
   var _ref = props,
     providedColor = _ref.color,
-    _ref$spacing = _ref.spacing,
-    providedSpacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
     testId = _ref.testId,
     label = _ref.label,
     LEGACY_primaryColor = _ref.LEGACY_primaryColor,
     LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
     LEGACY_size = _ref.LEGACY_size,
     FallbackIcon = _ref.LEGACY_fallbackIcon,
-    _ref$type = _ref.type,
-    type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
     shouldScale = _ref.shouldScale,
     LEGACY_margin = _ref.LEGACY_margin;
@@ -112,7 +132,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
   } : undefined;
 
   // Fall back to old icon
-  if (FallbackIcon && !fg('platform.design-system-team.enable-new-icons')) {
+  if (FallbackIcon && !fg('platform-visual-refresh-icons')) {
     // parse out unnecessary props
     return jsx(FallbackIcon, {
       primaryColor: LEGACY_primaryColor !== null && LEGACY_primaryColor !== void 0 ? LEGACY_primaryColor : color,
@@ -125,12 +145,15 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       UNSAFE_margin: LEGACY_margin
     });
   }
-
-  // Utility icons don't have 'spacing' as a type, but in case it's provided, we default to 'none'
-  var spacing = type === 'utility' ? 'none' : providedSpacing;
-  var baseSize = baseSizeMap[type];
-  var size = type === 'utility' ? 'utility' : shouldScale ? 'scale' : spacing;
-  var viewBoxPadding = spacing === 'spacious' ? 4 : 0;
+  var baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
+  var viewBoxPadding;
+  if (props.type === 'utility') {
+    var _props$spacing;
+    viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
+  } else {
+    var _props$spacing2;
+    viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
+  }
   var viewBoxSize = baseSize + 2 * viewBoxPadding;
 
   // Workaround for the transparency in our disabled icon token.
@@ -150,7 +173,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     style: {
       color: iconColor
     },
-    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, type === 'utility' && utilityIconStyles]
+    css: [iconStyles, baseHcmStyles, shouldScale && scaleStyles, props.type === 'utility' && utilityIconStyles]
   }, jsx("svg", {
     fill: "none"
     // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
@@ -158,7 +181,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     ,
     viewBox: "".concat(0 - viewBoxPadding, " ").concat(0 - viewBoxPadding, " ").concat(viewBoxSize, " ").concat(viewBoxSize),
     role: "presentation",
-    css: [commonSVGStyles, svgStyles, sizeMap[size]],
+    css: [commonSVGStyles, svgStyles, shouldScale ? scaleSize : props.type === 'utility' ? sizeMap[props.type][(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : sizeMap['core'][(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']],
     dangerouslySetInnerHTML: dangerouslySetInnerHTML
   }));
 });

package/dist/esm/components/icon-tile.js

@@ -144,7 +144,7 @@ export default function IconTile(props) {
     shape = _props$shape === void 0 ? 'square' : _props$shape,
     LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
   var ExpandedIcon = Icon;
-  if (LEGACY_fallbackComponent && !fg('platform.design-system-team.enable-new-icons')) {
+  if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return jsx("span", {