@atlaskit/icon 22.6.0 → 22.7.0

package/CHANGELOG.md

@@ -1,5 +1,20 @@
 # @atlaskit/icon
 
+## 22.7.0
+
+### Minor Changes
+
+- [#122612](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122612)
+  [`0c9d2190a14f2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/0c9d2190a14f2) -
+  Adds a new prop, LEGACY_margin, to the new icon API to allow for spacing adjustments between old
+  and new icons API.
+
+### Patch Changes
+
+- [#122977](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/122977)
+  [`41748db2c12de`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/41748db2c12de) -
+  [ux]ED-24225 add wrap button inside editor-plugin-block
+
 ## 22.6.0
 
 ### Minor Changes

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

@@ -9,8 +9,8 @@ var _react2 = require("@emotion/react");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -107,7 +107,8 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-    shouldScale = _ref.shouldScale;
+    shouldScale = _ref.shouldScale,
+    LEGACY_margin = _ref.LEGACY_margin;
   var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
   } : undefined;
@@ -121,6 +122,9 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

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

@@ -7,8 +7,8 @@ exports.default = IconTile;
 var _react = require("@emotion/react");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

package/dist/cjs/components/icon.js

@@ -9,12 +9,13 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("react");
 var _react2 = require("@emotion/react");
-var _utils = require("./utils");
 var _styles = require("./styles");
+var _utils = require("./utils");
 function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } /**
  * @jsxRuntime classic
- */ /** @jsx jsx */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
+ * @jsx jsx
+ */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 /**
  * We are hiding these props from consumers as they're used to
  * hack around icon sizing specifically for icon-file-type.
@@ -86,7 +87,8 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     testId = _ref.testId,
     label = _ref.label,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    UNSAFE_margin = _ref.UNSAFE_margin;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -108,12 +110,13 @@ var Icon = exports.Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     "aria-hidden": label ? undefined : true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: {
+    style: _objectSpread({
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || (0, _utils.getBackground)()
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    }
+    }, UNSAFE_margin ? {
+      margin: UNSAFE_margin
+    } : {})
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton

package/dist/cjs/components/skeleton.js

@@ -9,8 +9,8 @@ var _react2 = require("react");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
 var skeletonStyles = (0, _react.css)({

package/dist/cjs/components/svg.js

@@ -10,8 +10,8 @@ var _utils = require("./utils");
 var _styles = require("./styles");
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 

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

@@ -1,8 +1,9 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // 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';
@@ -100,7 +101,8 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     // Used to set icon glyphs in codegen
     dangerouslySetGlyph,
     // Used with iconTile to scale icon up and down
-    shouldScale
+    shouldScale,
+    LEGACY_margin
   } = props;
   const dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
@@ -115,6 +117,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/es2019/components/icon.js

@@ -1,13 +1,14 @@
 import _extends from "@babel/runtime/helpers/extends";
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+import { getBackground } from './utils';
 
 /**
  * We are hiding these props from consumers as they're used to
@@ -81,7 +82,8 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     testId,
     label,
     width,
-    height
+    height,
+    UNSAFE_margin
   } = props;
   const glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
@@ -107,7 +109,11 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
     style: {
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-      '--icon-secondary-color': secondaryColor || getBackground()
+      '--icon-secondary-color': secondaryColor || getBackground(),
+      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
+      ...(UNSAFE_margin ? {
+        margin: UNSAFE_margin
+      } : {})
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     }
   }, glyphProps, {

package/dist/es2019/components/skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';

package/dist/es2019/components/svg.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

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

@@ -1,8 +1,9 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // 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';
@@ -100,7 +101,8 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     _ref$type = _ref.type,
     type = _ref$type === void 0 ? 'global' : _ref$type,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
-    shouldScale = _ref.shouldScale;
+    shouldScale = _ref.shouldScale,
+    LEGACY_margin = _ref.LEGACY_margin;
   var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
   } : undefined;
@@ -114,6 +116,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       size: LEGACY_size,
       label: label,
       testId: testId
+      // @ts-ignore-next-line
+      ,
+      UNSAFE_margin: LEGACY_margin
     });
   }
 

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

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/esm/components/icon.js

@@ -4,13 +4,14 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
+
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
-import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
+import { getBackground } from './utils';
 
 /**
  * We are hiding these props from consumers as they're used to
@@ -83,7 +84,8 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     testId = _ref.testId,
     label = _ref.label,
     width = _ref.width,
-    height = _ref.height;
+    height = _ref.height,
+    UNSAFE_margin = _ref.UNSAFE_margin;
   var glyphProps = dangerouslySetGlyph ? {
     dangerouslySetInnerHTML: {
       __html: dangerouslySetGlyph
@@ -105,12 +107,13 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     "aria-hidden": label ? undefined : true
     // eslint-disable-next-line @atlaskit/ui-styling-standard/enforce-style-prop -- Ignored via go/DSP-18766
     ,
-    style: {
+    style: _objectSpread({
       '--icon-primary-color': primaryColor,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
       '--icon-secondary-color': secondaryColor || getBackground()
-      // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
-    }
+    }, UNSAFE_margin ? {
+      margin: UNSAFE_margin
+    } : {})
   }, glyphProps, {
     css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
     // NB: This can be resolved if this component, composes base SVG / and/or skeleton

package/dist/esm/components/skeleton.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';
 import { memo } from 'react';

package/dist/esm/components/svg.js

@@ -1,7 +1,7 @@
 /**
  * @jsxRuntime classic
+ * @jsx jsx
  */
-/** @jsx jsx */
 import { memo } from 'react';
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css, jsx } from '@emotion/react';

package/dist/types/types.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -111,6 +111,10 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Icon type. Used in icon build process.
      */
     type?: 'utility' | 'global';
+    /**
+     * Sets a margin on the fallback legacy icon.
+     */
+    LEGACY_margin?: string;
 }
 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';

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

@@ -1,4 +1,4 @@
-import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
+import type { ComponentType, ReactNode, SVGProps as ReactSVGProps } from 'react';
 import type { IconColor, IconColorPressed } from '@atlaskit/tokens/css-type-schema';
 export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
@@ -111,6 +111,10 @@ export interface NewIconProps extends NewGlyphProps, IconInternalGlyphProps {
      * Icon type. Used in icon build process.
      */
     type?: 'utility' | 'global';
+    /**
+     * Sets a margin on the fallback legacy icon.
+     */
+    LEGACY_margin?: string;
 }
 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';

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "22.6.0",
+	"version": "22.7.0",
 	"description": "An icon is a visual representation of a command, device, directory, or common action.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -31,7 +31,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/platform-feature-flags": "^0.3.0",
-		"@atlaskit/tokens": "^1.53.0",
+		"@atlaskit/tokens": "^1.56.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -45,7 +45,7 @@
 		"@atlaskit/code": "^15.4.0",
 		"@atlaskit/ds-lib": "^2.3.0",
 		"@atlaskit/logo": "^14.1.0",
-		"@atlaskit/primitives": "^10.1.0",
+		"@atlaskit/primitives": "^11.0.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/textfield": "^6.4.0",
 		"@atlaskit/theme": "^12.11.0",

package/dist/cjs/extract-react-types/custom-glyph.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = CustomGlyphProps;
-function CustomGlyphProps(props) {
-  return null;
-}

package/dist/cjs/extract-react-types/glyph-no-color-size.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-function _default(_) {}

package/dist/cjs/extract-react-types/glyph-no-color.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-function _default(_) {}

package/dist/cjs/extract-react-types/glyph.js

@@ -1,7 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = _default;
-function _default(_) {}

package/dist/cjs/extract-react-types/svg.js

@@ -1,9 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = SVGProps;
-function SVGProps(props) {
-  return null;
-}

package/dist/es2019/extract-react-types/custom-glyph.js

@@ -1,3 +0,0 @@
-export default function CustomGlyphProps(props) {
-  return null;
-}

package/dist/es2019/extract-react-types/glyph-no-color-size.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/extract-react-types/glyph-no-color.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/extract-react-types/glyph.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/es2019/extract-react-types/svg.js

@@ -1,3 +0,0 @@
-export default function SVGProps(props) {
-  return null;
-}

package/dist/esm/extract-react-types/custom-glyph.js

@@ -1,3 +0,0 @@
-export default function CustomGlyphProps(props) {
-  return null;
-}

package/dist/esm/extract-react-types/glyph-no-color-size.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/esm/extract-react-types/glyph-no-color.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/esm/extract-react-types/glyph.js

@@ -1 +0,0 @@
-export default function (_) {}

package/dist/esm/extract-react-types/svg.js

@@ -1,3 +0,0 @@
-export default function SVGProps(props) {
-  return null;
-}

package/dist/types/extract-react-types/custom-glyph.d.ts

@@ -1,2 +0,0 @@
-import type { CustomGlyphProps as Props } from '../types';
-export default function CustomGlyphProps(props: Props): null;

package/dist/types/extract-react-types/glyph-no-color-size.d.ts

@@ -1,2 +0,0 @@
-import type { OtherGlyphProps } from '../types';
-export default function (_: OtherGlyphProps): void;

package/dist/types/extract-react-types/glyph-no-color.d.ts

@@ -1,2 +0,0 @@
-import type { OtherGlyphProps, GlyphSizeProps } from '../types';
-export default function (_: OtherGlyphProps & GlyphSizeProps): void;

package/dist/types/extract-react-types/glyph.d.ts

@@ -1,2 +0,0 @@
-import type { GlyphProps } from '../types';
-export default function (_: GlyphProps): void;

package/dist/types/extract-react-types/svg.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps as Props } from '../types';
-export default function SVGProps(props: Props): null;

package/dist/types-ts4.5/extract-react-types/custom-glyph.d.ts

@@ -1,2 +0,0 @@
-import type { CustomGlyphProps as Props } from '../types';
-export default function CustomGlyphProps(props: Props): null;

package/dist/types-ts4.5/extract-react-types/glyph-no-color-size.d.ts

@@ -1,2 +0,0 @@
-import type { OtherGlyphProps } from '../types';
-export default function (_: OtherGlyphProps): void;

package/dist/types-ts4.5/extract-react-types/glyph-no-color.d.ts

@@ -1,2 +0,0 @@
-import type { OtherGlyphProps, GlyphSizeProps } from '../types';
-export default function (_: OtherGlyphProps & GlyphSizeProps): void;

package/dist/types-ts4.5/extract-react-types/glyph.d.ts

@@ -1,2 +0,0 @@
-import type { GlyphProps } from '../types';
-export default function (_: GlyphProps): void;

package/dist/types-ts4.5/extract-react-types/svg.d.ts

@@ -1,2 +0,0 @@
-import type { SVGProps as Props } from '../types';
-export default function SVGProps(props: Props): null;