@atlaskit/icon 22.16.0 → 22.17.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/icon
 
+## 22.17.0
+
+### Minor Changes
+
+- [#139873](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/139873)
+  [`141a2cdfda71c`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/141a2cdfda71c) -
+  Add support to opt out of icon facade via the `isFacadeDisabled` prop.
+
+## 22.16.1
+
+### Patch Changes
+
+- [#137821](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/137821)
+  [`bcca6c1789a37`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/bcca6c1789a37) -
+  Rename of `@atlassian/icon-lab` to `@atlaskit/icon-lab`
+
 ## 22.16.0
 
 ### Minor Changes

package/codemods/22.14.0-new-icon-migrate-color-prop.tsx

@@ -54,7 +54,7 @@ export default function transformer(file: FileInfo, api: API) {
 	const iconLabIconImportDeclarations = getPartialImportDeclaration(
 		j,
 		source,
-		'@atlassian/icon-lab/core',
+		'@atlaskit/icon-lab/core',
 	);
 
 	// Get all the specifier names

package/codemods/__tests__/next-new-icon-migrate-color-prop.test.tsx

@@ -9,7 +9,7 @@ describe('Migrate color API', () => {
 		`
         import AddIcon from '@atlaskit/icon/core/add';
         import ChevronDownIcon from '@atlaskit/icon/utility/add';
-        import BitbucketBranchIcon from '@atlassian/icon-lab/core/bitbucket-branch';
+        import BitbucketBranchIcon from '@atlaskit/icon-lab/core/bitbucket-branch';
 
         const App = () => (
           <>
@@ -24,7 +24,7 @@ describe('Migrate color API', () => {
         import { token } from "@atlaskit/tokens";
         import AddIcon from '@atlaskit/icon/core/add';
         import ChevronDownIcon from '@atlaskit/icon/utility/add';
-        import BitbucketBranchIcon from '@atlassian/icon-lab/core/bitbucket-branch';
+        import BitbucketBranchIcon from '@atlaskit/icon-lab/core/bitbucket-branch';
 
         const App = () => (
           <>

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

@@ -13,7 +13,7 @@ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 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 && Object.prototype.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; }
+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'];
 
 /**
@@ -33,9 +33,9 @@ var IconFacade = exports.IconFacade = /*#__PURE__*/(0, _react.memo)(function Ico
   // By default, the icon size will be medium and spacing will be none for small 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
-  var useNewIcon = (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  (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,

package/dist/cjs/entry-points/base-new.js

@@ -18,4 +18,4 @@ Object.defineProperty(exports, "default", {
 });
 var _iconNew = _interopRequireWildcard(require("../components/icon-new"));
 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 && Object.prototype.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; }
+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; }

package/dist/cjs/entry-points/base.js

@@ -25,4 +25,4 @@ Object.defineProperty(exports, "default", {
 var _icon = _interopRequireWildcard(require("../components/icon"));
 var _iconFacade = require("../components/icon-facade");
 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 && Object.prototype.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; }
+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; }

package/dist/cjs/entry-points/migration-map.js

@@ -18,4 +18,4 @@ Object.defineProperty(exports, "migrationOutcomeDescriptionMap", {
 });
 var _migrationMap = _interopRequireWildcard(require("../migration-map"));
 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 && Object.prototype.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; }
+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; }

package/dist/cjs/migration-map.js

@@ -12,7 +12,7 @@ var migrationOutcomeDescriptionMap = exports.migrationOutcomeDescriptionMap = {
   'no-larger-size': 'This icon should not be used with a larger size; please shift to a smaller size.',
   'not-recommended': 'No equivalent icon in new set. This icon is not recommended.',
   'product-icon': 'Product icons are not supported; please use the custom SVG component from `@atlaskit/icon/svg`.',
-  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlassian/icon-lab`.',
+  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlaskit/icon-lab`.',
   'top-nav': 'This icon is only for use for top navigation; please choose a different icon if used elsewhere.',
   'icon-tile': 'Switch to Icon Tile, use a smaller size or remove.',
   '16-icon-tile': "This icon can be re-created using an Icon tile with size='16'.",

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

@@ -22,9 +22,9 @@ export const IconFacade = /*#__PURE__*/memo(function IconFacade({
   // By default, the icon size will be medium and spacing will be none for small 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
-  const useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
   if (useNewIcon && NewIcon) {
     return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
       spacing: spacing,

package/dist/es2019/migration-map.js

@@ -6,7 +6,7 @@ export const migrationOutcomeDescriptionMap = {
   'no-larger-size': 'This icon should not be used with a larger size; please shift to a smaller size.',
   'not-recommended': 'No equivalent icon in new set. This icon is not recommended.',
   'product-icon': 'Product icons are not supported; please use the custom SVG component from `@atlaskit/icon/svg`.',
-  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlassian/icon-lab`.',
+  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlaskit/icon-lab`.',
   'top-nav': 'This icon is only for use for top navigation; please choose a different icon if used elsewhere.',
   'icon-tile': 'Switch to Icon Tile, use a smaller size or remove.',
   '16-icon-tile': "This icon can be re-created using an Icon tile with size='16'.",

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

@@ -23,9 +23,9 @@ export var IconFacade = /*#__PURE__*/memo(function IconFacade(_ref) {
   // By default, the icon size will be medium and spacing will be none for small 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
-  var useNewIcon = fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
+  fg('platform-visual-refresh-icons-legacy-facade') && sizesEligibleForNewIcons.includes(size);
   if (useNewIcon && NewIcon) {
     return /*#__PURE__*/React.createElement(NewIcon, _extends({}, props, {
       spacing: spacing,

package/dist/esm/migration-map.js

@@ -6,7 +6,7 @@ export var migrationOutcomeDescriptionMap = {
   'no-larger-size': 'This icon should not be used with a larger size; please shift to a smaller size.',
   'not-recommended': 'No equivalent icon in new set. This icon is not recommended.',
   'product-icon': 'Product icons are not supported; please use the custom SVG component from `@atlaskit/icon/svg`.',
-  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlassian/icon-lab`.',
+  'icon-lab': 'Find an alternative icon, or create an updated icon in the new style, and contribute it to `@atlaskit/icon-lab`.',
   'top-nav': 'This icon is only for use for top navigation; please choose a different icon if used elsewhere.',
   'icon-tile': 'Switch to Icon Tile, use a smaller size or remove.',
   '16-icon-tile': "This icon can be re-created using an Icon tile with size='16'.",

package/dist/types/types.d.ts

@@ -67,6 +67,10 @@ export interface OtherGlyphProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Used to opt out of the icon facade and only display the legacy icon regardless of the feature flag.
+     */
+    isFacadeDisabled?: boolean;
 }
 interface IconInternalGlyphProps {
     /**

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

@@ -67,6 +67,10 @@ export interface OtherGlyphProps {
      * serving as a hook for automated tests.
      */
     testId?: string;
+    /**
+     * Used to opt out of the icon facade and only display the legacy icon regardless of the feature flag.
+     */
+    isFacadeDisabled?: boolean;
 }
 interface IconInternalGlyphProps {
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.16.0",
+	"version": "22.17.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -48,7 +48,7 @@
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tooltip": "^18.7.0",
 		"@atlaskit/visual-regression": "*",
-		"@babel/core": "^7.20.0",
+		"@babel/core": "7.24.9",
 		"@emotion/babel-preset-css-prop": "^10.0.7",
 		"@testing-library/react": "^12.1.5",
 		"classnames": "^2.2.5",