@atlaskit/icon 22.26.0 → 22.28.0

package/CHANGELOG.md

@@ -1,5 +1,26 @@
 # @atlaskit/icon
 
+## 22.28.0
+
+### Minor Changes
+
+- [#169436](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169436)
+  [`e52faf54c03cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e52faf54c03cd) -
+  Adds `testId` to Icon Tile. Fixes bug where icon tiles could render incorrectly when placed inside
+  headings.
+
+## 22.27.0
+
+### Minor Changes
+
+- [#168743](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168743)
+  [`b27dba8a5f3cd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/b27dba8a5f3cd) -
+  Update types to improve compatibility with React 18.
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 22.26.0
 
 ### Minor Changes

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

@@ -129,7 +129,8 @@ var iconTileStyles = (0, _react.css)({
   display: 'inline-flex',
   boxSizing: 'border-box',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 
 /**
@@ -149,12 +150,14 @@ function IconTile(props) {
     size = _props$size === void 0 ? '24' : _props$size,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'square' : _props$shape,
-    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
+    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
+    testId = props.testId;
   var ExpandedIcon = Icon;
   if (LEGACY_fallbackComponent && !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return (0, _react.jsx)("span", {
+      "data-testid": testId,
       css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
     }, (0, _react.jsx)(ExpandedIcon, {
       color: "currentColor",

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

@@ -122,7 +122,8 @@ const iconTileStyles = css({
   display: 'inline-flex',
   boxSizing: 'border-box',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 
 /**
@@ -141,13 +142,15 @@ export default function IconTile(props) {
     appearance,
     size = '24',
     shape = 'square',
-    LEGACY_fallbackComponent
+    LEGACY_fallbackComponent,
+    testId
   } = props;
   const ExpandedIcon = Icon;
   if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return jsx("span", {
+      "data-testid": testId,
       css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
     }, jsx(ExpandedIcon, {
       color: "currentColor",

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

@@ -122,7 +122,8 @@ var iconTileStyles = css({
   display: 'inline-flex',
   boxSizing: 'border-box',
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  fontSize: 0 /* Prevents parent font-size from affecting the container */
 });
 
 /**
@@ -142,12 +143,14 @@ export default function IconTile(props) {
     size = _props$size === void 0 ? '24' : _props$size,
     _props$shape = props.shape,
     shape = _props$shape === void 0 ? 'square' : _props$shape,
-    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent;
+    LEGACY_fallbackComponent = props.LEGACY_fallbackComponent,
+    testId = props.testId;
   var ExpandedIcon = Icon;
   if (LEGACY_fallbackComponent && !fg('platform-visual-refresh-icons')) {
     return LEGACY_fallbackComponent;
   } else {
     return jsx("span", {
+      "data-testid": testId,
       css: [iconTileStyles, appearanceMap[appearance], sizeMap[size], shapeMap[shape]]
     }, jsx(ExpandedIcon, {
       color: "currentColor",

package/dist/types/types.d.ts

@@ -84,6 +84,30 @@ export interface OtherGlyphProps {
      */
     isFacadeDisabled?: boolean;
 }
+/**
+ * Props for legacy icons –– including the children prop to resolve R18 type errors
+ */
+export interface LegacyOtherGlyphProps {
+    /**
+     * Text used to describe what the icon is in context.
+     */
+    label: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     */
+    testId?: string;
+    /**
+     * Used to opt out of the icon facade.
+     */
+    isFacadeDisabled?: boolean;
+    /**
+     * The content to be rendered inside the glyph component.
+     * Only for legacy icons that used R16's implicit children prop.
+     * It doesn't actually serve any purpose, but is required to resolve R18 type errors
+     * without updating all the legacy icon usages.
+     */
+    children?: ReactNode;
+}
 interface IconInternalGlyphProps {
     /**
      * @deprecated
@@ -93,7 +117,7 @@ interface IconInternalGlyphProps {
      */
     dangerouslySetGlyph?: string;
 }
-export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
+export interface GlyphProps extends LegacyOtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
 export interface NewCoreGlyphProps extends OtherGlyphProps, NewCoreGlyphSpacingProps, NewGlyphColorProps {
 }
@@ -165,6 +189,11 @@ export interface IconTileProps {
      * Legacy component to render when the icon refresh feature flag is turned off.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
 }
 export interface SkeletonProps {
     color?: string;

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

@@ -84,6 +84,30 @@ export interface OtherGlyphProps {
      */
     isFacadeDisabled?: boolean;
 }
+/**
+ * Props for legacy icons –– including the children prop to resolve R18 type errors
+ */
+export interface LegacyOtherGlyphProps {
+    /**
+     * Text used to describe what the icon is in context.
+     */
+    label: string;
+    /**
+     * A `testId` prop is provided for specified elements,
+     */
+    testId?: string;
+    /**
+     * Used to opt out of the icon facade.
+     */
+    isFacadeDisabled?: boolean;
+    /**
+     * The content to be rendered inside the glyph component.
+     * Only for legacy icons that used R16's implicit children prop.
+     * It doesn't actually serve any purpose, but is required to resolve R18 type errors
+     * without updating all the legacy icon usages.
+     */
+    children?: ReactNode;
+}
 interface IconInternalGlyphProps {
     /**
      * @deprecated
@@ -93,7 +117,7 @@ interface IconInternalGlyphProps {
      */
     dangerouslySetGlyph?: string;
 }
-export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
+export interface GlyphProps extends LegacyOtherGlyphProps, GlyphSizeProps, GlyphColorProps {
 }
 export interface NewCoreGlyphProps extends OtherGlyphProps, NewCoreGlyphSpacingProps, NewGlyphColorProps {
 }
@@ -165,6 +189,11 @@ export interface IconTileProps {
      * Legacy component to render when the icon refresh feature flag is turned off.
      */
     LEGACY_fallbackComponent?: ReactElement;
+    /**
+     * A unique string that appears as a data attribute `data-testid` in the rendered code,
+     * serving as a hook for automated tests.
+     */
+    testId?: string;
 }
 export interface SkeletonProps {
     color?: string;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.26.0",
+	"version": "22.28.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -68,7 +68,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^2.3.0",
+		"@atlaskit/tokens": "^2.4.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -77,14 +77,14 @@
 	},
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
-		"@af/icon-build-process": "^2.2.0",
+		"@af/icon-build-process": "^2.3.0",
 		"@af/visual-regression": "*",
 		"@atlaskit/code": "^15.6.0",
-		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/ds-lib": "^3.3.0",
 		"@atlaskit/logo": "^14.3.0",
-		"@atlaskit/primitives": "^13.2.0",
+		"@atlaskit/primitives": "^13.3.0",
 		"@atlaskit/ssr": "*",
-		"@atlaskit/textfield": "^6.5.0",
+		"@atlaskit/textfield": "^6.6.0",
 		"@atlaskit/theme": "^14.0.0",
 		"@atlaskit/toggle": "^13.4.0",
 		"@atlaskit/tooltip": "^18.9.0",