@atlaskit/icon 26.0.0 → 26.1.0

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

@@ -1,6 +1,6 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
-var _excluded = ["dangerouslySetGlyph"];
+var _excluded = ["dangerouslySetGlyph", "size"];
 import React, { memo } from 'react';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { Icon as LegacyIcon } from './icon';
@@ -24,34 +24,36 @@ var sizeSpacingMap = {
  * @returns A React element representing either the new or legacy icon based on the feature flag and icon size.
  */
 export var IconFacade = /*#__PURE__*/memo(function IconFacade(_ref) {
-  var _props$size;
   var dangerouslySetGlyph = _ref.dangerouslySetGlyph,
+    size = _ref.size,
     props = _objectWithoutProperties(_ref, _excluded);
   var NewIcon = props.newIcon;
 
   // By default, the icon size will be medium for core icons and small for utility icons
-  var size = (_props$size = props.size) !== null && _props$size !== void 0 ? _props$size : 'medium';
+  var iconSize = size !== null && size !== void 0 ? size : 'medium';
   var useNewIcon = !props.isFacadeDisabled &&
   // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
   fg('platform-visual-refresh-icons-legacy-facade');
-  if (useNewIcon && NewIcon && (size === 'small' || size === 'medium')) {
+  if (useNewIcon && NewIcon && (iconSize === 'small' || iconSize === 'medium')) {
     if (props.iconType === 'utility') {
       var Icon = NewIcon;
       return /*#__PURE__*/React.createElement(Icon, _extends({}, props, {
-        spacing: fg('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][size] : 'none',
+        spacing: fg('platform-visual-refresh-icons-facade-button-fix') ? sizeSpacingMap['utility'][iconSize] : 'none',
         color: props.primaryColor || 'currentColor',
         type: props.iconType
       }));
     } else {
       var _Icon = NewIcon;
       return /*#__PURE__*/React.createElement(_Icon, _extends({}, props, {
-        spacing: sizeSpacingMap['core'][size],
+        size: iconSize,
+        spacing: sizeSpacingMap['core'][iconSize],
         color: props.primaryColor || 'currentColor',
         type: props.iconType
       }));
     }
   }
   return /*#__PURE__*/React.createElement(LegacyIcon, _extends({
-    dangerouslySetGlyph: dangerouslySetGlyph
+    dangerouslySetGlyph: dangerouslySetGlyph,
+    size: size
   }, props));
 });

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

@@ -20,9 +20,14 @@ var scaleStyles = null;
  */
 var baseHcmStyles = null;
 var scaleSize = null;
-var coreSizes = {
+var coreSizeMedium = {
   none: "_1bsbpxbi _4t3ipxbi",
-  compact: "",
+  compact: "_1bsb1ejb _4t3i1ejb",
+  spacious: "_1bsb1ejb _4t3i1ejb"
+};
+var coreSizeSmall = {
+  none: "_1bsbutpp _4t3iutpp",
+  compact: "_1bsbpxbi _4t3ipxbi",
   spacious: "_1bsb1ejb _4t3i1ejb"
 };
 var utilSizes = {
@@ -36,13 +41,28 @@ var baseSizeMap = {
 };
 var paddingMap = {
   core: {
-    none: 0,
-    spacious: 4
+    medium: {
+      none: 0,
+      compact: 4,
+      spacious: 4
+    },
+    small: {
+      none: 0,
+      compact: 2.66,
+      spacious: 8
+    }
   },
   utility: {
-    none: 0,
-    compact: 2,
-    spacious: 6
+    medium: {
+      none: 0,
+      compact: 2,
+      spacious: 6
+    },
+    small: {
+      none: 0,
+      compact: 2,
+      spacious: 6
+    }
   }
 };
 
@@ -55,7 +75,7 @@ var paddingMap = {
  * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
  */
 export var Icon = /*#__PURE__*/memo(function Icon(props) {
-  var _props$type, _props$spacing3, _props$spacing4;
+  var _props$type;
   var _ref = props,
     _ref$color = _ref.color,
     color = _ref$color === void 0 ? 'currentColor' : _ref$color,
@@ -67,7 +87,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     FallbackIcon = _ref.LEGACY_fallbackIcon,
     dangerouslySetGlyph = _ref.dangerouslySetGlyph,
     shouldScale = _ref.shouldScale,
-    LEGACY_margin = _ref.LEGACY_margin;
+    LEGACY_margin = _ref.LEGACY_margin,
+    _ref$spacing = _ref.spacing,
+    spacing = _ref$spacing === void 0 ? 'none' : _ref$spacing;
   var dangerouslySetInnerHTML = dangerouslySetGlyph ? {
     __html: dangerouslySetGlyph
   } : undefined;
@@ -87,15 +109,14 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
       UNSAFE_margin: LEGACY_margin
     });
   }
-  var baseSize = baseSizeMap[(_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core'];
-  var viewBoxPadding;
-  if (props.type === 'utility') {
-    var _props$spacing;
-    viewBoxPadding = paddingMap[props.type][(_props$spacing = props.spacing) !== null && _props$spacing !== void 0 ? _props$spacing : 'none'];
-  } else {
-    var _props$spacing2;
-    viewBoxPadding = paddingMap['core'][(_props$spacing2 = props.spacing) !== null && _props$spacing2 !== void 0 ? _props$spacing2 : 'none'];
-  }
+  var type = (_props$type = props.type) !== null && _props$type !== void 0 ? _props$type : 'core';
+  var size = 'size' in props && props.size !== undefined && (
+  // This prevents invalid sizes being passed in, which is required
+  // for handling unsupported legacy icon sizes which can
+  // cause errors.
+  props.size === 'small' || props.size === 'medium') ? props.size : 'medium';
+  var baseSize = baseSizeMap[type];
+  var viewBoxPadding = paddingMap[type][size][spacing];
   var viewBoxSize = baseSize + 2 * viewBoxPadding;
   return /*#__PURE__*/React.createElement("span", {
     "data-testid": testId,
@@ -105,7 +126,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     style: {
       color: color
     },
-    className: ax(["_1e0c1o8l _vchhusvi _1o9zidpf _vwz4kb7n _y4ti1igz _bozg1mb9", "_12va1onz _jcxd1r8n", shouldScale && "_1bsb1kw7 _4t3i1kw7", props.type === 'utility' && "_vwz4utpp"])
+    className: ax(["_1e0c1o8l _vchhusvi _1o9zidpf _vwz4kb7n _y4ti1igz _bozg1mb9", "_12va1onz _jcxd1r8n", shouldScale && "_1bsb1kw7 _4t3i1kw7", (type === 'utility' || size === 'small') && "_vwz4utpp"])
   }, /*#__PURE__*/React.createElement("svg", {
     fill: "none"
     // Adjusting the viewBox allows the icon padding to scale with the contents of the SVG, which
@@ -114,7 +135,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
     viewBox: "".concat(0 - viewBoxPadding, " ").concat(0 - viewBoxPadding, " ").concat(viewBoxSize, " ").concat(viewBoxSize),
     role: "presentation",
     dangerouslySetInnerHTML: dangerouslySetInnerHTML,
-    className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : props.type === 'utility' ? utilSizes[(_props$spacing3 = props.spacing) !== null && _props$spacing3 !== void 0 ? _props$spacing3 : 'none'] : coreSizes[(_props$spacing4 = props.spacing) !== null && _props$spacing4 !== void 0 ? _props$spacing4 : 'none']])
+    className: ax(["_1reo15vq _18m915vq _syaz1r31 _lcxvglyw _s7n4yfq0 _vc881r31", shouldScale ? "_1bsb1kw7 _4t3i1kw7" : type === 'utility' ? utilSizes[spacing] : size === 'small' ? coreSizeSmall[spacing] : coreSizeMedium[spacing]])
   }));
 });
 export default Icon;

package/dist/esm/metadata-core.js

@@ -3,7 +3,7 @@
  *
  * To change the format of this file, modify `createIconDocsNew` in icon-build-process/src/create-icon-docs.tsx.
  *
- * @codegen <<SignedSource::74e48f82d18722adc91c77fffafd647c>>
+ * @codegen <<SignedSource::ddf97866ab3e12660c9c9f8e4a34f107>>
  * @codegenCommand yarn build:icon-glyphs
  */
 
@@ -720,6 +720,70 @@ var metadata = {
     team: 'Design System Team',
     status: 'published'
   },
+  'chevron-double-left': {
+    keywords: ['chevron-double-left', 'chevrondoubleleft', 'icon', 'core', 'double chevron', 'left', 'previous year'],
+    componentName: 'ChevronDoubleLeftIcon',
+    package: '@atlaskit/icon/core/chevron-double-left',
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
+  'chevron-double-right': {
+    keywords: ['chevron-double-right', 'chevrondoubleright', 'icon', 'core', 'double chevron', 'right', 'next year'],
+    componentName: 'ChevronDoubleRightIcon',
+    package: '@atlaskit/icon/core/chevron-double-right',
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
+  'chevron-down': {
+    keywords: ['chevron-down', 'chevrondown', 'expand', 'collapse', 'icon', 'core', 'chevron down', 'open dropdown menu', 'expanded tree item', 'collapse tree item'],
+    componentName: 'ChevronDownIcon',
+    package: '@atlaskit/icon/core/chevron-down',
+    oldName: ['chevron-down', 'chevron-down-circle', 'hipchat/chevron-down'],
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
+  'chevron-left': {
+    keywords: ['chevron-left', 'chevronleft', 'back', 'previous', 'icon', 'core', 'chevron left', 'back'],
+    componentName: 'ChevronLeftIcon',
+    package: '@atlaskit/icon/core/chevron-left',
+    oldName: ['chevron-left-circle', 'chevron-left', 'chevron-left-large'],
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
+  'chevron-right': {
+    keywords: ['chevron-right', 'chevronright', 'forward', 'next', 'icon', 'core', 'chevron right', 'collapsed', 'expand tree item'],
+    componentName: 'ChevronRightIcon',
+    package: '@atlaskit/icon/core/chevron-right',
+    oldName: ['chevron-right-circle', 'chevron-right', 'chevron-right-large'],
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
+  'chevron-up': {
+    keywords: ['chevron-up', 'chevronup', 'expand', 'collapse', 'icon', 'core', 'chevron up', 'close dropdown menu', 'collapse'],
+    componentName: 'ChevronUpIcon',
+    package: '@atlaskit/icon/core/chevron-up',
+    oldName: ['chevron-up-circle', 'hipchat/chevron-up', 'chevron-up'],
+    type: 'core',
+    categorization: 'multi-purpose',
+    team: 'Design System Team',
+    status: 'ready-to-publish',
+    slackChannel: '#icon-contributions'
+  },
   'child-issues': {
     keywords: ['child-issues', 'childissues', 'icon', 'core'],
     componentName: 'ChildIssuesIcon',