@atlaskit/icon - npm Package Compare versions

Comparing version 22.2.0 to 22.3.0

afm-cc/tsconfig.json

@@ -22,2 +22,5 @@ {
         {
+            "path": "../../../platform/feature-flags/afm-cc/tsconfig.json"
+        },
+        {
             "path": "../../tokens/afm-cc/tsconfig.json"
@@ -24,0 +27,0 @@ }

dist/cjs/components/icon.js

@@ -114,3 +114,3 @@ "use strict";
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton
-    // We could then simplify how common styles are dealt with simply by encapsualting them
+    // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
@@ -117,0 +117,0 @@ dimensions &&

dist/cjs/index.js

@@ -7,2 +7,8 @@ "use strict";
 });
+Object.defineProperty(exports, "IconTile", {
+  enumerable: true,
+  get: function get() {
+    return _iconTile.default;
+  }
+});
 Object.defineProperty(exports, "SVG", {
@@ -20,2 +26,8 @@ enumerable: true,
 });
+Object.defineProperty(exports, "UNSAFE_IconNew", {
+  enumerable: true,
+  get: function get() {
+    return _iconNew.default;
+  }
+});
 Object.defineProperty(exports, "default", {
@@ -40,4 +52,6 @@ enumerable: true,
 var _icon = _interopRequireDefault(require("./components/icon"));
+var _iconNew = _interopRequireDefault(require("./components/icon-new"));
 var _svg = _interopRequireDefault(require("./components/svg"));
 var _constants = require("./constants");
-var _skeleton = _interopRequireDefault(require("./components/skeleton"));
+var _skeleton = _interopRequireDefault(require("./components/skeleton"));
+var _iconTile = _interopRequireDefault(require("./components/icon-tile"));

dist/es2019/components/icon.js

@@ -107,3 +107,3 @@ import _extends from "@babel/runtime/helpers/extends";
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton
-    // We could then simplify how common styles are dealt with simply by encapsualting them
+    // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
@@ -110,0 +110,0 @@ dimensions &&

dist/es2019/index.js

 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
-export { default as Skeleton } from './components/skeleton';
+export { default as Skeleton } from './components/skeleton';
+export { default as IconTile } from './components/icon-tile';

dist/esm/components/icon.js

@@ -109,3 +109,3 @@ import _extends from "@babel/runtime/helpers/extends";
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton
-    // We could then simplify how common styles are dealt with simply by encapsualting them
+    // We could then simplify how common styles are dealt with simply by encapsulating them
     // at their appropriate level and/or having a singular approach to css variables in the package
@@ -112,0 +112,0 @@ dimensions &&

dist/esm/index.js

 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
-export { default as Skeleton } from './components/skeleton';
+export { default as Skeleton } from './components/skeleton';
+export { default as IconTile } from './components/icon-tile';

dist/types-ts4.5/entry-points/types.d.ts

@@ -1,1 +0,1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from '../types';

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

 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';
+export { default as IconTile } from './components/icon-tile';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from './types';

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

 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { IconColor } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
@@ -29,2 +30,13 @@ export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
 }
+/**
+ * NOTE: we want to move away from icons using text colors and make the icon tokens darker - so currentColor will eventually go away, and
+ * we will be shifting existing usages down (`color.text` -> `color.icon` -> `color.icon.`) via a codemod.
+ * For now, icon defaults to `color.text` under the hood to emulate the darker appearance.
+ */
+export interface NewGlyphColorProps {
+    /**
+     * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
+     */
+    color?: IconColor | 'currentColor';
+}
 export interface GlyphSizeProps {
@@ -38,2 +50,10 @@ /**
 }
+export interface NewGlyphSpacingProps {
+    /**
+     * Icons have only one available size, but can be displayed with additional spacing.
+     * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
+     * "spacious" provides accessible spacing between the icon and other elements.
+     */
+    spacing?: 'none' | 'spacious';
+}
 export interface OtherGlyphProps {
@@ -53,5 +73,16 @@ /**
 }
+interface IconInternalGlyphProps {
+    /**
+     * @deprecated
+     * Custom icon string that should contain an SVG element with set `viewBox`,
+     * `width`, and `height` attributes.
+     * It's recommended to use the `glyph` prop instead.
+     */
+    dangerouslySetGlyph?: string;
+}
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface IconProps extends GlyphProps {
+export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
@@ -62,10 +93,47 @@ * Custom icon component that returns an SVG element with set `viewBox`,
     glyph?: ComponentType<CustomGlyphProps>;
+}
+export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * @deprecated
-     * Custom icon string that should contain an SVG element with set `viewBox`,
-     * `width`, and `height` attributes.
-     * It's recommended to use the `glyph` prop instead.
+     * Legacy icon component to render when feature flag turned off.
+     * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
-    dangerouslySetGlyph?: string;
+    LEGACY_fallbackIcon?: ComponentType<IconProps>;
+    /**
+     * Secondary color to be rendered by the legacy fallback icon
+     */
+    LEGACY_secondaryColor?: string;
+    /**
+     * Size of the legacy fallback icon. Legacy icons default to "medium".
+     */
+    LEGACY_size?: 'small' | 'medium';
+    /**
+     * Icon type. Used in icon build process.
+     */
+    type?: 'utility' | 'global';
 }
+export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
+export type IconTileSize = '16' | '24' | '32' | '40' | '48';
+export interface IconTileProps {
+    /**
+     * The icon to display
+     */
+    icon: ComponentType<NewIconProps>;
+    /**
+     * The label for the icon
+     */
+    label: string;
+    /**
+     * The appearance of the tile
+     */
+    appearance: IconTileAppearance;
+    /**
+     * Size of the tile, in pixels. Defaults to "24".
+     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     */
+    size?: IconTileSize;
+    /**
+     * Shape of the tile background. Defaults to "square"
+     */
+    shape?: 'square' | 'circle';
+}
 export interface SkeletonProps {
@@ -87,1 +155,2 @@ color?: string;
 }
+export {};

dist/types/entry-points/types.d.ts

@@ -1,1 +0,1 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, } from '../types';
+export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from '../types';

dist/types/index.d.ts

 export { default } from './components/icon';
+export { default as UNSAFE_IconNew } from './components/icon-new';
 export { default as SVG } from './components/svg';
 export { sizeMap as size, sizes } from './constants';
 export { default as Skeleton } from './components/skeleton';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';
+export { default as IconTile } from './components/icon-tile';
+export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, NewIconProps as UNSAFE_NewIconProps, } from './types';

dist/types/types.d.ts

 import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { IconColor } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
@@ -29,2 +30,13 @@ export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
 }
+/**
+ * NOTE: we want to move away from icons using text colors and make the icon tokens darker - so currentColor will eventually go away, and
+ * we will be shifting existing usages down (`color.text` -> `color.icon` -> `color.icon.`) via a codemod.
+ * For now, icon defaults to `color.text` under the hood to emulate the darker appearance.
+ */
+export interface NewGlyphColorProps {
+    /**
+     * Color for the icon. Supports any icon design token, or 'currentColor' to inherit the current text color.
+     */
+    color?: IconColor | 'currentColor';
+}
 export interface GlyphSizeProps {
@@ -38,2 +50,10 @@ /**
 }
+export interface NewGlyphSpacingProps {
+    /**
+     * Icons have only one available size, but can be displayed with additional spacing.
+     * "none" is default, and allows the icon to be placed in buttons and allows the parent component to manage spacing.
+     * "spacious" provides accessible spacing between the icon and other elements.
+     */
+    spacing?: 'none' | 'spacious';
+}
 export interface OtherGlyphProps {
@@ -53,5 +73,16 @@ /**
 }
+interface IconInternalGlyphProps {
+    /**
+     * @deprecated
+     * Custom icon string that should contain an SVG element with set `viewBox`,
+     * `width`, and `height` attributes.
+     * It's recommended to use the `glyph` prop instead.
+     */
+    dangerouslySetGlyph?: string;
+}
 export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
-export interface IconProps extends GlyphProps {
+export interface NewGlyphProps extends OtherGlyphProps, NewGlyphSpacingProps, NewGlyphColorProps {
+}
+export interface IconProps extends GlyphProps, IconInternalGlyphProps {
     /**
@@ -62,10 +93,47 @@ * Custom icon component that returns an SVG element with set `viewBox`,
     glyph?: ComponentType<CustomGlyphProps>;
+}
+export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
     /**
-     * @deprecated
-     * Custom icon string that should contain an SVG element with set `viewBox`,
-     * `width`, and `height` attributes.
-     * It's recommended to use the `glyph` prop instead.
+     * Legacy icon component to render when feature flag turned off.
+     * The legacy icon defaults to "medium" size, with `primaryColor` set to the value of the `color` prop.
      */
-    dangerouslySetGlyph?: string;
+    LEGACY_fallbackIcon?: ComponentType<IconProps>;
+    /**
+     * Secondary color to be rendered by the legacy fallback icon
+     */
+    LEGACY_secondaryColor?: string;
+    /**
+     * Size of the legacy fallback icon. Legacy icons default to "medium".
+     */
+    LEGACY_size?: 'small' | 'medium';
+    /**
+     * Icon type. Used in icon build process.
+     */
+    type?: 'utility' | 'global';
 }
+export type IconTileAppearance = 'gray' | 'blue' | 'teal' | 'green' | 'lime' | 'yellow' | 'orange' | 'red' | 'magenta' | 'purple' | 'grayBold' | 'blueBold' | 'tealBold' | 'greenBold' | 'limeBold' | 'yellowBold' | 'orangeBold' | 'redBold' | 'magentaBold' | 'purpleBold';
+export type IconTileSize = '16' | '24' | '32' | '40' | '48';
+export interface IconTileProps {
+    /**
+     * The icon to display
+     */
+    icon: ComponentType<NewIconProps>;
+    /**
+     * The label for the icon
+     */
+    label: string;
+    /**
+     * The appearance of the tile
+     */
+    appearance: IconTileAppearance;
+    /**
+     * Size of the tile, in pixels. Defaults to "24".
+     * In a future release, semantic names will be introduced, and number values will be deprecated.
+     */
+    size?: IconTileSize;
+    /**
+     * Shape of the tile background. Defaults to "square"
+     */
+    shape?: 'square' | 'circle';
+}
 export interface SkeletonProps {
@@ -87,1 +155,2 @@ color?: string;
 }
+export {};

package.json

 {
   "name": "@atlaskit/icon",
-  "version": "22.2.0",
+  "version": "22.3.0",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
@@ -33,3 +33,4 @@ "publishConfig": {
   "dependencies": {
-    "@atlaskit/tokens": "^1.48.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
+    "@atlaskit/tokens": "^1.49.0",
     "@babel/runtime": "^7.0.0",
@@ -43,6 +44,8 @@ "@emotion/react": "^11.7.1"
     "@af/accessibility-testing": "*",
-    "@af/icon-build-process": "^0.5.0",
+    "@af/icon-build-process": "^0.6.0",
     "@af/visual-regression": "*",
+    "@atlaskit/code": "^15.2.0",
     "@atlaskit/ds-lib": "^2.3.0",
-    "@atlaskit/logo": "^13.16.0",
+    "@atlaskit/logo": "^13.17.0",
+    "@atlaskit/primitives": "^6.3.0",
     "@atlaskit/ssr": "*",
@@ -55,2 +58,3 @@ "@atlaskit/textfield": "^6.3.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/icon-lab": "^0.0.1",
     "@babel/core": "^7.20.0",
@@ -102,2 +106,3 @@ "@emotion/babel-preset-css-prop": "^10.0.7",
     "./base": "./src/entry-points/base.tsx",
+    "./UNSAFE_base-new": "./src/entry-points/base-new.tsx",
     "./constants": "./src/entry-points/constants.tsx",
@@ -108,5 +113,12 @@ "./metadata": "./src/entry-points/metadata.tsx",
     "./glyph": "./glyph",
+    "./core": "./core",
+    "./utility": "./utility",
     ".": "./src/index.tsx"
   },
-  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
+  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1",
+  "platform-feature-flags": {
+    "platform.design-system-team.enable-new-icons": {
+      "type": "boolean"
+    }
+  }
 }

No alert changes

Improved metrics

Total package byte prevSize

2044081

increased by44.53%

Number of package files

1983

increased by28.52%

Lines of code

27729

increased by109.07%

Worsened metrics

Dependency count

5

increased by25%

Dev dependency count

28

increased by12%

Dependency changes

• + Added@atlaskit/platform-feature-flags@^0.2.0

• + Added@atlaskit/platform-feature-flags@0.2.6(transitive)

• Updated@atlaskit/tokens@^1.49.0