@atlaskit/icon 22.18.1 → 22.19.0

package/CHANGELOG.md

@@ -1,5 +1,12 @@
 # @atlaskit/icon
 
+## 22.19.0
+
+### Minor Changes
+
+- [`318191402c2ad`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/318191402c2ad) -
+  Add LEGACY_fallbackComponent prop to Icon Tile
+
 ## 22.18.1
 
 ### Patch Changes

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

@@ -5,6 +5,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = IconTile;
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
  * @jsx jsx
@@ -147,14 +148,19 @@ function IconTile(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? '24' : _props$size,
     _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'square' : _props$shape;
+    shape = _props$shape === void 0 ? 'square' : _props$shape,
+    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
   var ExpandedIcon = Icon;
-  return (0, _react.jsx)("span", {
-    css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
-  }, (0, _react.jsx)(ExpandedIcon, {
-    color: "currentColor",
-    label: label,
-    spacing: "spacious",
-    shouldScale: true
-  }));
+  if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform.design-system-team.enable-new-icons')) {
+    return LEGACY_fallbackComponent;
+  } else {
+    return (0, _react.jsx)("span", {
+      css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
+    }, (0, _react.jsx)(ExpandedIcon, {
+      color: "currentColor",
+      label: label,
+      spacing: "spacious",
+      shouldScale: true
+    }));
+  }
 }

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

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 const sizeMap = {
   '16': css({
     width: '16px',
@@ -139,15 +140,20 @@ export default function IconTile(props) {
     label,
     appearance,
     size = '24',
-    shape = 'square'
+    shape = 'square',
+    LEGACY_fallbackComponent
   } = props;
   const ExpandedIcon = Icon;
-  return jsx("span", {
-    css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
-  }, jsx(ExpandedIcon, {
-    color: "currentColor",
-    label: label,
-    spacing: "spacious",
-    shouldScale: true
-  }));
+  if (LEGACY_fallbackComponent && !fg('platform.design-system-team.enable-new-icons')) {
+    return LEGACY_fallbackComponent;
+  } else {
+    return jsx("span", {
+      css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
+    }, jsx(ExpandedIcon, {
+      color: "currentColor",
+      label: label,
+      spacing: "spacious",
+      shouldScale: true
+    }));
+  }
 }

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

@@ -5,6 +5,7 @@
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 var sizeMap = {
   '16': css({
     width: '16px',
@@ -140,14 +141,19 @@ export default function IconTile(props) {
     _props$size = props.size,
     size = _props$size === void 0 ? '24' : _props$size,
     _props$shape = props.shape,
-    shape = _props$shape === void 0 ? 'square' : _props$shape;
+    shape = _props$shape === void 0 ? 'square' : _props$shape,
+    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
   var ExpandedIcon = Icon;
-  return jsx("span", {
-    css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
-  }, jsx(ExpandedIcon, {
-    color: "currentColor",
-    label: label,
-    spacing: "spacious",
-    shouldScale: true
-  }));
+  if (LEGACY_fallbackComponent && !fg('platform.design-system-team.enable-new-icons')) {
+    return LEGACY_fallbackComponent;
+  } else {
+    return jsx("span", {
+      css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
+    }, jsx(ExpandedIcon, {
+      color: "currentColor",
+      label: label,
+      spacing: "spacious",
+      shouldScale: true
+    }));
+  }
 }

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
+import type { ComponentType, ReactElement, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed, TextColor, TextColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -94,7 +94,7 @@ export interface IconProps extends GlyphProps, IconInternalGlyphProps {
 }
 export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * Legacy icon component to render when feature flag turned off.
+     * Legacy icon component to render when the icon refresh feature flag is turned off.
      * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
     LEGACY_fallbackIcon?: ComponentType<IconProps>;
@@ -144,6 +144,10 @@ export interface IconTileProps {
      * Shape of the tile background. Defaults to "square"
      */
     shape?: 'square' | 'circle';
+    /**
+     * Legacy component to render when the icon refresh feature flag is turned off.
+     */
+    LEGACY_fallbackComponent?: ReactElement;
 }
 export interface SkeletonProps {
     color?: string;

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

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
+import type { ComponentType, ReactElement, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed, TextColor, TextColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -94,7 +94,7 @@ export interface IconProps extends GlyphProps, IconInternalGlyphProps {
 }
 export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * Legacy icon component to render when feature flag turned off.
+     * Legacy icon component to render when the icon refresh feature flag is turned off.
      * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
     LEGACY_fallbackIcon?: ComponentType<IconProps>;
@@ -144,6 +144,10 @@ export interface IconTileProps {
      * Shape of the tile background. Defaults to "square"
      */
     shape?: 'square' | 'circle';
+    /**
+     * Legacy component to render when the icon refresh feature flag is turned off.
+     */
+    LEGACY_fallbackComponent?: ReactElement;
 }
 export interface SkeletonProps {
     color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.18.1",
+	"version": "22.19.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"