@atlaskit/icon 21.10.8 → 21.11.1

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/icon
 
+## 21.11.1
+
+### Patch Changes
+
+- [`88a34a8c2dd`](https://bitbucket.org/atlassian/atlassian-frontend/commits/88a34a8c2dd) - Remove redundant `role=presentation` on wrapping @atlaskit/icon and @atlaskit/logo spans.
+- [`15d704e3090`](https://bitbucket.org/atlassian/atlassian-frontend/commits/15d704e3090) - For an SVG icon, do not render a `aria-label` when empty.
+
+## 21.11.0
+
+### Minor Changes
+
+- [`a3973745679`](https://bitbucket.org/atlassian/atlassian-frontend/commits/a3973745679) - Updates `@emotion/core` to `@emotion/react`; v10 to v11. There is no expected behavior change.
+
 ## 21.10.8
 
 ### Patch Changes

package/dist/cjs/components/icon.js

@@ -13,7 +13,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -25,7 +25,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
 
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
 
-var iconStyles = (0, _core.css)({
+var iconStyles = (0, _react2.css)({
   display: 'inline-block',
   flexShrink: 0,
   lineHeight: 1,
@@ -42,7 +42,7 @@ var iconStyles = (0, _core.css)({
  * For windows high contrast mode
  */
 
-var baseHcmStyles = (0, _core.css)({
+var baseHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -54,7 +54,7 @@ var baseHcmStyles = (0, _core.css)({
     }
   }
 });
-var primaryEqualsSecondaryHcmStyles = (0, _core.css)({
+var primaryEqualsSecondaryHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -66,7 +66,7 @@ var primaryEqualsSecondaryHcmStyles = (0, _core.css)({
     }
   }
 });
-var secondaryTransparentHcmStyles = (0, _core.css)({
+var secondaryTransparentHcmStyles = (0, _react2.css)({
   '@media screen and (forced-colors: active)': {
     // eslint-disable-next-line @repo/internal/styles/no-nested-styles
     '> svg': {
@@ -101,7 +101,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
       __html: dangerouslySetGlyph
     }
   } : {
-    children: Glyph ? (0, _core.jsx)(Glyph, {
+    children: Glyph ? (0, _react2.jsx)(Glyph, {
       role: "presentation"
     }) : null
   };
@@ -114,9 +114,9 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("span", (0, _extends2.default)({
+  return (0, _react2.jsx)("span", (0, _extends2.default)({
     "data-testid": testId,
-    role: label ? 'img' : 'presentation',
+    role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true,
     style: {
@@ -128,7 +128,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
     // We could then simplify how common styles are dealt with simply by encapsualting them
     // at their appropriate level and/or having a singular approach to css variables in the package
     dimensions && // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-    (0, _core.css)({
+    (0, _react2.css)({
       width: dimensions.width,
       height: dimensions.height,
       '> svg': dimensions

package/dist/cjs/components/skeleton.js

@@ -5,28 +5,28 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
-var _react = require("react");
+var _react2 = require("react");
 
 var _styles = require("./styles");
 
 /** @jsx jsx */
-var skeletonStyles = (0, _core.css)({
+var skeletonStyles = (0, _react.css)({
   display: 'inline-block',
   borderRadius: '50%'
 });
-var subtleOpacityStyles = (0, _core.css)({
+var subtleOpacityStyles = (0, _react.css)({
   opacity: 0.15
 });
-var strongOpacityStyles = (0, _core.css)({
+var strongOpacityStyles = (0, _react.css)({
   opacity: 0.3
 });
 /**
  * __Skeleton__
  */
 
-var Skeleton = /*#__PURE__*/(0, _react.memo)(function Skeleton(_ref) {
+var Skeleton = /*#__PURE__*/(0, _react2.memo)(function Skeleton(_ref) {
   var testId = _ref.testId,
       _ref$size = _ref.size,
       size = _ref$size === void 0 ? 'medium' : _ref$size,
@@ -34,7 +34,7 @@ var Skeleton = /*#__PURE__*/(0, _react.memo)(function Skeleton(_ref) {
       color = _ref$color === void 0 ? 'currentColor' : _ref$color,
       _ref$weight = _ref.weight,
       weight = _ref$weight === void 0 ? 'normal' : _ref$weight;
-  return (0, _core.jsx)("div", {
+  return (0, _react.jsx)("div", {
     "data-testid": testId,
     style: {
       backgroundColor: color

package/dist/cjs/components/styles.js

@@ -7,7 +7,7 @@ exports.sizeStyleMap = exports.getIconSize = exports.commonSVGStyles = void 0;
 
 var _constants = require("../constants");
 
-var _core = require("@emotion/core");
+var _react = require("@emotion/react");
 
 var commonSVGStyles = {
   overflow: 'hidden',
@@ -23,10 +23,10 @@ var commonSVGStyles = {
   }
 };
 exports.commonSVGStyles = commonSVGStyles;
-var smallStyles = (0, _core.css)(_constants.dimensions.small);
-var mediumStyles = (0, _core.css)(_constants.dimensions.medium);
-var largeStyles = (0, _core.css)(_constants.dimensions.large);
-var xlargeStyles = (0, _core.css)(_constants.dimensions.xlarge); // pre-built css style-size map
+var smallStyles = (0, _react.css)(_constants.dimensions.small);
+var mediumStyles = (0, _react.css)(_constants.dimensions.medium);
+var largeStyles = (0, _react.css)(_constants.dimensions.large);
+var xlargeStyles = (0, _react.css)(_constants.dimensions.xlarge); // pre-built css style-size map
 
 var sizeStyleMap = {
   small: smallStyles,

package/dist/cjs/components/svg.js

@@ -7,7 +7,7 @@ exports.default = void 0;
 
 var _react = require("react");
 
-var _core = require("@emotion/core");
+var _react2 = require("@emotion/react");
 
 var _components = require("@atlaskit/theme/components");
 
@@ -17,7 +17,7 @@ var _styles = require("./styles");
 
 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
-var svgStyles = (0, _core.css)(_styles.commonSVGStyles);
+var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
 /**
  * __SVG__
  *
@@ -40,7 +40,7 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
   var _useGlobalTheme = (0, _components.useGlobalTheme)(),
       mode = _useGlobalTheme.mode;
 
-  return (0, _core.jsx)("svg", {
+  return (0, _react2.jsx)("svg", {
     viewBox: "0 0 24 24",
     style: {
       color: primaryColor,
@@ -48,7 +48,7 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
     },
     css: [svgStyles, _styles.sizeStyleMap[size]],
     "data-testid": testId,
-    "aria-label": label,
+    "aria-label": label || undefined,
     role: label ? 'img' : 'presentation'
   }, children);
 });

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.8",
+	"version": "21.11.1",
 	"sideEffects": false
 }

package/dist/es2019/components/icon.js

@@ -2,7 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
@@ -101,7 +101,7 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
   } = useGlobalTheme();
   return jsx("span", _extends({
     "data-testid": testId,
-    role: label ? 'img' : 'presentation',
+    role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true,
     style: {

package/dist/es2019/components/skeleton.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
 const skeletonStyles = css({

package/dist/es2019/components/styles.js

@@ -1,5 +1,5 @@
 import { dimensions } from '../constants';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export const commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',

package/dist/es2019/components/svg.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -34,7 +34,7 @@ const SVG = /*#__PURE__*/memo(function SVG({
     },
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,
-    "aria-label": label,
+    "aria-label": label || undefined,
     role: label ? 'img' : 'presentation'
   }, children);
 });

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.8",
+	"version": "21.11.1",
 	"sideEffects": false
 }

package/dist/esm/components/icon.js

@@ -7,7 +7,7 @@ function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { va
 
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, getIconSize } from './styles';
@@ -107,7 +107,7 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
 
   return jsx("span", _extends({
     "data-testid": testId,
-    role: label ? 'img' : 'presentation',
+    role: label ? 'img' : undefined,
     "aria-label": label ? label : undefined,
     "aria-hidden": label ? undefined : true,
     style: {

package/dist/esm/components/skeleton.js

@@ -1,5 +1,5 @@
 /** @jsx jsx */
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { memo } from 'react';
 import { sizeStyleMap } from './styles';
 var skeletonStyles = css({

package/dist/esm/components/styles.js

@@ -1,5 +1,5 @@
 import { dimensions } from '../constants';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 export var commonSVGStyles = {
   overflow: 'hidden',
   pointerEvents: 'none',

package/dist/esm/components/svg.js

@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { memo } from 'react';
-import { css, jsx } from '@emotion/core';
+import { css, jsx } from '@emotion/react';
 import { useGlobalTheme } from '@atlaskit/theme/components';
 import { getBackground } from './utils';
 import { commonSVGStyles, sizeStyleMap } from './styles'; // eslint-disable-next-line @repo/internal/react/consistent-css-prop-usage
@@ -36,7 +36,7 @@ var SVG = /*#__PURE__*/memo(function SVG(_ref) {
     },
     css: [svgStyles, sizeStyleMap[size]],
     "data-testid": testId,
-    "aria-label": label,
+    "aria-label": label || undefined,
     role: label ? 'img' : 'presentation'
   }, children);
 });

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/icon",
-	"version": "21.10.8",
+	"version": "21.11.1",
 	"sideEffects": false
 }

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

@@ -1,11 +1,11 @@
 import type { Size } from '../types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
-    small: import("@emotion/utils").SerializedStyles;
-    medium: import("@emotion/utils").SerializedStyles;
-    large: import("@emotion/utils").SerializedStyles;
-    xlarge: import("@emotion/utils").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    large: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
 };
 /**
  * Returns the width of the icon's parent span. This function has

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

@@ -1,11 +1,11 @@
 import type { Size } from '../types';
-import { CSSObject } from '@emotion/core';
+import { CSSObject } from '@emotion/react';
 export declare const commonSVGStyles: CSSObject;
 export declare const sizeStyleMap: {
-    small: import("@emotion/utils").SerializedStyles;
-    medium: import("@emotion/utils").SerializedStyles;
-    large: import("@emotion/utils").SerializedStyles;
-    xlarge: import("@emotion/utils").SerializedStyles;
+    small: import("@emotion/react").SerializedStyles;
+    medium: import("@emotion/react").SerializedStyles;
+    large: import("@emotion/react").SerializedStyles;
+    xlarge: import("@emotion/react").SerializedStyles;
 };
 /**
  * Returns the width of the icon's parent span. This function has

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.10.8",
+  "version": "21.11.1",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -15,7 +15,8 @@
   "typesVersions": {
     ">=4.0 <4.5": {
       "*": [
-        "dist/types-ts4.0/*"
+        "dist/types-ts4.0/*",
+        "dist/types-ts4.0/index.d.ts"
       ]
     }
   },
@@ -23,6 +24,7 @@
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/icon/",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -46,25 +48,25 @@
     "@atlaskit/theme": "^12.2.0",
     "@atlaskit/tokens": "^0.10.0",
     "@babel/runtime": "^7.0.0",
-    "@emotion/core": "^10.0.9"
+    "@emotion/react": "^11.7.1"
   },
   "peerDependencies": {
     "react": "^16.8.0"
   },
   "devDependencies": {
     "@af/icon-build-process": "^0.3.0",
-    "@atlaskit/button": "^16.3.0",
+    "@atlaskit/button": "^16.4.0",
     "@atlaskit/docs": "*",
     "@atlaskit/ds-lib": "^2.1.1",
     "@atlaskit/dynamic-table": "^14.8.0",
     "@atlaskit/icon-file-type": "^6.3.0",
     "@atlaskit/icon-object": "^6.2.0",
-    "@atlaskit/logo": "^13.9.0",
-    "@atlaskit/modal-dialog": "^12.3.0",
-    "@atlaskit/section-message": "^6.2.0",
+    "@atlaskit/logo": "^13.10.0",
+    "@atlaskit/modal-dialog": "^12.4.0",
+    "@atlaskit/section-message": "^6.3.0",
     "@atlaskit/ssr": "*",
-    "@atlaskit/textfield": "^5.2.0",
-    "@atlaskit/tooltip": "^17.5.0",
+    "@atlaskit/textfield": "^5.3.0",
+    "@atlaskit/tooltip": "^17.6.0",
     "@atlaskit/visual-regression": "*",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
     "@babel/core": "^7.12.3",

package/report.api.md

@@ -2,6 +2,12 @@
 
 > Do not edit this file. It is a report generated by [API Extractor](https://api-extractor.com/).
 
+<!--
+	Generated API Report version: 2.0
+-->
+
+[Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
+
 ```ts
 /// <reference types="react" />
 
@@ -10,127 +16,77 @@ import { NamedExoticComponent } from 'react';
 import type { ReactNode } from 'react';
 import type { SVGProps as SVGProps_2 } from 'react';
 
-export declare interface CustomGlyphProps extends SVGProps_2<SVGSVGElement> {
-  /**
-   * provided to a custom glyph
-   */
-  'data-testid'?: string;
-  /**
-   * provided to a custom glyph
-   */
+// @public (undocumented)
+export interface CustomGlyphProps extends SVGProps_2<SVGSVGElement> {
   'aria-label'?: string;
-  /**
-   * provided classname for custom glyph to match ADG styles
-   */
+  'data-testid'?: string;
   className?: string;
 }
 
-declare interface GlyphColorProps {
-  /**
-   * Primary color for the icon.
-   * Inherits the current font color by default.
-   */
+// @public (undocumented)
+interface GlyphColorProps {
   primaryColor?: string;
-  /**
-   * Secondary color for the icon.
-   * Defaults to the page background for an icon that supports two colors.
-   */
   secondaryColor?: string;
 }
 
-export declare interface GlyphProps
+// @public (undocumented)
+export interface GlyphProps
   extends OtherGlyphProps,
     GlyphSizeProps,
     GlyphColorProps {}
 
-declare interface GlyphSizeProps {
-  /**
-   * There are three icon sizes – small (16px), medium (24px), and large (32px).
-   * This pixel size refers to the canvas the icon sits on,
-   * not the size of the icon shape itself.
-   */
+// @public (undocumented)
+interface GlyphSizeProps {
   size?: Size;
 }
 
-/**
- * __Icon__
- *
- * An icon is used as a visual representation of common actions and commands to provide context.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
- * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
- */
-declare const Icon: NamedExoticComponent<IconProps>;
+// @public
+const Icon: NamedExoticComponent<IconProps>;
 export default Icon;
 
-export declare interface IconProps extends GlyphProps {
-  /**
-   * Custom icon component that returns an SVG element with set `viewBox`,
-   * `width`, and `height` props.
-   */
-  glyph?: ComponentType<CustomGlyphProps>;
-  /**
-   * @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.
-   */
+// @public (undocumented)
+export interface IconProps extends GlyphProps {
+  // @deprecated (undocumented)
   dangerouslySetGlyph?: string;
+  glyph?: ComponentType<CustomGlyphProps>;
 }
 
-declare interface OtherGlyphProps {
-  /**
-   * Text used to describe what the icon is in context.
-   * A label is needed when there is no pairing visible text next to the icon.
-   * An empty string marks the icon as presentation only.
-   */
+// @public (undocumented)
+interface OtherGlyphProps {
   label: string;
-  /**
-   * A `testId` prop is provided for specified elements,
-   * which is 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 declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
+// @public (undocumented)
+export type Size = 'small' | 'medium' | 'large' | 'xlarge';
 
-export declare const size: Record<Size, Size>;
+// @public (undocumented)
+export const size: Record<Size, Size>;
 
-export declare const sizes: Record<Size, string>;
+// @public (undocumented)
+export const sizes: Record<Size, string>;
 
-/**
- * __Skeleton__
- */
-export declare const Skeleton: NamedExoticComponent<SkeletonProps>;
+// @public
+export const Skeleton: NamedExoticComponent<SkeletonProps>;
 
-export declare interface SkeletonProps {
+// @public (undocumented)
+export interface SkeletonProps {
+  // (undocumented)
   color?: string;
+  // (undocumented)
   size?: Size;
-  weight?: 'normal' | 'strong';
-  /**
-   * A unique string that appears as a data attribute `data-testid` in the rendered code,
-   * serving as a hook for automated tests.
-   */
   testId?: string;
+  // (undocumented)
+  weight?: 'normal' | 'strong';
 }
 
-/**
- * __SVG__
- *
- * An icon is used as a visual representation of common actions and commands to provide context.
- *
- * - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
- * - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
- */
-export declare const SVG: NamedExoticComponent<SVGProps>;
-
-export declare interface SVGProps extends GlyphProps {
-  /**
-   * The children of the SVG, should still honour the constraints of icons
-   */
+// @public
+export const SVG: NamedExoticComponent<SVGProps>;
+
+// @public (undocumented)
+export interface SVGProps extends GlyphProps {
   children?: ReactNode;
 }
 
-export {};
+// (No @packageDocumentation comment for this package)
 ```