@atlaskit/icon 22.3.0 → 22.3.1

package/CHANGELOG.md

@@ -1,5 +1,14 @@
 # @atlaskit/icon
 
+## 22.3.1
+
+### Patch Changes
+
+-   [#104222](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104222)
+    [`cabed929cdde`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/cabed929cdde) -
+    Fix bug where utility icons incorrectly allowed the 'spacing' prop to be set. Utility icons only
+    support 'none' spacing and the prop type has been removed"
+
 ## 22.3.0
 
 ### Minor Changes

package/afm-jira/tsconfig.json

@@ -0,0 +1,28 @@
+{
+  "extends": "../../../../tsconfig.products.json",
+  "compilerOptions": {
+    "declaration": true,
+    "target": "es5",
+    "outDir": "../../../../../tsDist/@atlaskit__icon/app",
+    "composite": true,
+    "rootDir": "../",
+    "baseUrl": "../"
+  },
+  "include": [
+    "../src/**/*.ts",
+    "../src/**/*.tsx"
+  ],
+  "exclude": [
+    "../src/**/__tests__/*",
+    "../src/**/*.test.*",
+    "../src/**/test.*"
+  ],
+  "references": [
+    {
+      "path": "../../../platform/feature-flags/afm-jira/tsconfig.json"
+    },
+    {
+      "path": "../../tokens/afm-jira/tsconfig.json"
+    }
+  ]
+}

package/codemods/21.2.0-metadata-entry.tsx

@@ -1,4 +1,5 @@
-import core, {
+import type {
+  default as core,
   API,
   FileInfo,
   ImportSpecifier,
@@ -6,7 +7,7 @@ import core, {
   ImportDefaultSpecifier,
   Options,
 } from 'jscodeshift';
-import { Collection } from 'jscodeshift/src/Collection';
+import { type Collection } from 'jscodeshift/src/Collection';
 
 export const packageName = '@atlaskit/icon';
 

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

@@ -92,7 +92,7 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "var(--ds-icon, #44546F)" : _ref$color,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
+    providedSpacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
     testId = _ref.testId,
     label = _ref.label,
     LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
@@ -118,6 +118,9 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       testId: testId
     });
   }
+
+  // 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;

package/dist/cjs/components/icon.js

@@ -103,7 +103,9 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     "data-testid": testId,
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
-    "aria-hidden": label ? undefined : true,
+    "aria-hidden": label ? undefined : true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       '--icon-primary-color': primaryColor,
       '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)()

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

@@ -84,7 +84,7 @@ const baseSizeMap = {
 export const Icon = /*#__PURE__*/memo(function Icon(props) {
   const {
     color = "var(--ds-icon, #44546F)",
-    spacing = 'none',
+    spacing: providedSpacing = 'none',
     testId,
     label,
     LEGACY_secondaryColor,
@@ -112,6 +112,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
       testId: testId
     });
   }
+
+  // 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;

package/dist/es2019/components/icon.js

@@ -96,7 +96,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     "data-testid": testId,
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
-    "aria-hidden": label ? undefined : true,
+    "aria-hidden": label ? undefined : true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       '--icon-primary-color': primaryColor,
       '--icon-secondary-color': secondaryColor || getBackground()

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

@@ -86,7 +86,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? "var(--ds-icon, #44546F)" : _ref$color,
     _ref$spacing = _ref.spacing,
-    spacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
+    providedSpacing = _ref$spacing === void 0 ? 'none' : _ref$spacing,
     testId = _ref.testId,
     label = _ref.label,
     LEGACY_secondaryColor = _ref.LEGACY_secondaryColor,
@@ -112,6 +112,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       testId: testId
     });
   }
+
+  // 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;

package/dist/esm/components/icon.js

@@ -98,7 +98,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     "data-testid": testId,
     role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
-    "aria-hidden": label ? undefined : true,
+    "aria-hidden": label ? undefined : true
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
+    ,
     style: {
       '--icon-primary-color': primaryColor,
       '--icon-secondary-color': secondaryColor || getBackground()

package/dist/types/components/styles.d.ts

@@ -1,5 +1,5 @@
 import type { Size } from '../types';
-import { CSSObject } from '@emotion/react';
+import { type CSSObject } from '@emotion/react';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
     small: import("@emotion/react").SerializedStyles;

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

@@ -1,5 +1,5 @@
 import type { Size } from '../types';
-import { CSSObject } from '@emotion/react';
+import { type CSSObject } from '@emotion/react';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
     small: import("@emotion/react").SerializedStyles;

package/package.json

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

package/utility/add.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const AddIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default AddIcon;

package/utility/check-circle.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CheckCircleIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CheckCircleIcon;

package/utility/check-mark.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CheckMarkIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CheckMarkIcon;

package/utility/chevron-down.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronDownIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronDownIcon;

package/utility/chevron-left.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronLeftIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronLeftIcon;

package/utility/chevron-right.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronRightIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronRightIcon;

package/utility/chevron-up.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ChevronUpIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ChevronUpIcon;

package/utility/cross-circle.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CrossCircleIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CrossCircleIcon;

package/utility/cross.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const CrossIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default CrossIcon;

package/utility/error.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ErrorIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ErrorIcon;

package/utility/information.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const InformationIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default InformationIcon;

package/utility/link-external.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const LinkExternalIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default LinkExternalIcon;

package/utility/lock-locked.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const LockLockedIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default LockLockedIcon;

package/utility/lock-unlocked.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const LockUnlockedIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default LockUnlockedIcon;

package/utility/show-more-horizontal.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ShowMoreHorizontalIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ShowMoreHorizontalIcon;

package/utility/show-more-vertical.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const ShowMoreVerticalIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default ShowMoreVerticalIcon;

package/utility/star-starred.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const StarStarredIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default StarStarredIcon;

package/utility/star-unstarred.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const StarUnstarredIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default StarUnstarredIcon;

package/utility/warning.d.ts

@@ -3,7 +3,7 @@ import React from 'react';
 import Icon from '@atlaskit/icon/UNSAFE_base-new';
 
 declare const WarningIcon: {
-  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'type'>): JSX.Element;
+  (props: Omit<React.ComponentProps<typeof Icon>, 'dangerouslySetGlyph' | 'spacing' | 'type'>): JSX.Element;
   displayName: string;
 };
 export default WarningIcon;