@atlaskit/icon 21.11.0 → 21.11.2

package/CHANGELOG.md

@@ -1,5 +1,18 @@
 # @atlaskit/icon
 
+## 21.11.2
+
+### Patch Changes
+
+- Updated dependencies
+
+## 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

package/dist/cjs/components/icon.js

@@ -116,7 +116,7 @@ var Icon = /*#__PURE__*/(0, _react.memo)(function Icon(props) {
 
   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: {

package/dist/cjs/components/svg.js

@@ -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.11.0",
+	"version": "21.11.2",
 	"sideEffects": false
 }

package/dist/es2019/components/icon.js

@@ -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/svg.js

@@ -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.11.0",
+	"version": "21.11.2",
 	"sideEffects": false
 }

package/dist/esm/components/icon.js

@@ -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/svg.js

@@ -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.11.0",
+	"version": "21.11.2",
 	"sideEffects": false
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@atlaskit/icon",
-  "version": "21.11.0",
+  "version": "21.11.2",
   "description": "An icon is a visual representation of a command, device, directory, or common action.",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -12,17 +12,11 @@
   "module": "dist/esm/index.js",
   "module:es2019": "dist/es2019/index.js",
   "types": "dist/types/index.d.ts",
-  "typesVersions": {
-    ">=4.0 <4.5": {
-      "*": [
-        "dist/types-ts4.0/*"
-      ]
-    }
-  },
   "sideEffects": false,
   "atlaskit:src": "src/index.tsx",
   "homepage": "https://atlassian.design/components/icon/",
   "atlassian": {
+    "disableProductCI": true,
     "team": "Design System Team",
     "releaseModel": "scheduled",
     "website": {
@@ -44,7 +38,7 @@
   },
   "dependencies": {
     "@atlaskit/theme": "^12.2.0",
-    "@atlaskit/tokens": "^0.10.0",
+    "@atlaskit/tokens": "^0.11.0",
     "@babel/runtime": "^7.0.0",
     "@emotion/react": "^11.7.1"
   },
@@ -53,7 +47,7 @@
   },
   "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",

package/report.api.md

@@ -1,6 +1,10 @@
-## API Report File for "@atlaskit/icon".
+## API Report File for "@atlaskit/icon"
 
-> Do not edit this file. This report is auto-generated by [API Extractor](https://api-extractor.com/).
+> 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)
 
@@ -12,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)
 ```

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { IconProps } from '../types';
-/**
- * __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)
- */
-export declare const Icon: import("react").NamedExoticComponent<IconProps>;
-export default Icon;

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

@@ -1,7 +0,0 @@
-/// <reference types="react" />
-import type { SkeletonProps } from '../types';
-/**
- * __Skeleton__
- */
-declare const Skeleton: import("react").NamedExoticComponent<SkeletonProps>;
-export default Skeleton;

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

@@ -1,28 +0,0 @@
-import type { Size } from '../types';
-import { CSSObject } from '@emotion/react';
-export declare const commonSVGStyles: CSSObject;
-export declare const sizeStyleMap: {
-    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
- * special behaviour to deal with icon-file-type specifically.
- *
- * The reality is the SVG still has its own dimensions, so this is
- * a secondary fallback which in 95% of cases is not required.
- * It's only really being kept to maintain backward compatability.
- */
-export declare const getIconSize: ({ width, height, size, }: {
-    size?: Size | undefined;
-    width?: number | undefined;
-    height?: number | undefined;
-}) => {
-    readonly width: string;
-    readonly height: string;
-} | {
-    width: number;
-    height: number;
-} | undefined;

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

@@ -1,12 +0,0 @@
-/// <reference types="react" />
-import type { SVGProps } from '../types';
-/**
- * __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)
- */
-declare const SVG: import("react").NamedExoticComponent<SVGProps>;
-export default SVG;

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

@@ -1,6 +0,0 @@
-import type { ThemeModes } from '@atlaskit/theme/types';
-/**
- * Returns the background color depending on the passed through mode.
- * @param mode
- */
-export declare const getBackground: (mode?: ThemeModes) => "var(--ds-surface)";

package/dist/types-ts4.0/constants.d.ts

@@ -1,21 +0,0 @@
-import type { Size } from './types';
-export declare const sizes: Record<Size, string>;
-export declare const sizeMap: Record<Size, Size>;
-export declare const dimensions: {
-    readonly small: {
-        readonly width: string;
-        readonly height: string;
-    };
-    readonly medium: {
-        readonly width: string;
-        readonly height: string;
-    };
-    readonly large: {
-        readonly width: string;
-        readonly height: string;
-    };
-    readonly xlarge: {
-        readonly width: string;
-        readonly height: string;
-    };
-};

package/dist/types-ts4.0/entry-points/base.d.ts

@@ -1,2 +0,0 @@
-export { default, Icon } from '../components/icon';
-export type { IconProps } from '../types';

package/dist/types-ts4.0/entry-points/constants.d.ts

@@ -1 +0,0 @@
-export { sizeMap, sizes } from '../constants';

package/dist/types-ts4.0/entry-points/metadata.d.ts

@@ -1 +0,0 @@
-export { default } from '../metadata';

package/dist/types-ts4.0/entry-points/svg.d.ts

@@ -1,2 +0,0 @@
-export { default } from '../components/svg';
-export type { SVGProps } from '../types';

package/dist/types-ts4.0/entry-points/types.d.ts

@@ -1 +0,0 @@
-export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, } from '../types';

package/dist/types-ts4.0/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.0/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.0/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.0/extract-react-types/glyph.d.ts

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

package/dist/types-ts4.0/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.0/index.d.ts

@@ -1,5 +0,0 @@
-export { default } from './components/icon';
-export { default as SVG } from './components/svg';
-export { sizeMap as size, sizes } from './constants';
-export { default as Skeleton } from './components/skeleton';
-export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';

package/dist/types-ts4.0/metadata.d.ts

@@ -1,16 +0,0 @@
-/**
- * NOTE:
- *
- * This file is automatically generated by the build process.
- * DO NOT CHANGE IT BY HAND or your changes will be lost.
- *
- * To change the format of this file, modify build/icon/createIconDocs.js.
- * Add synonyms in icon/icons/synonyms.js.
- */
-interface Data {
-    keywords: string[];
-    componentName: string;
-    package: string;
-}
-declare const metaData: Record<string, Data>;
-export default metaData;

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

@@ -1,82 +0,0 @@
-import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
-export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
-export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
-    /**
-     * provided to a custom glyph
-     */
-    'data-testid'?: string;
-    /**
-     * provided to a custom glyph
-     */
-    'aria-label'?: string;
-    /**
-     * provided classname for custom glyph to match ADG styles
-     */
-    className?: string;
-}
-export interface GlyphColorProps {
-    /**
-     * Primary color for the icon.
-     * Inherits the current font color by default.
-     */
-    primaryColor?: string;
-    /**
-     * Secondary color for the icon.
-     * Defaults to the page background for an icon that supports two colors.
-     */
-    secondaryColor?: string;
-}
-export 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.
-     */
-    size?: Size;
-}
-export 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.
-     */
-    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 interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
-}
-export 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.
-     */
-    dangerouslySetGlyph?: string;
-}
-export interface SkeletonProps {
-    color?: string;
-    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;
-}
-export interface SVGProps extends GlyphProps {
-    /**
-     * The children of the SVG, should still honour the constraints of icons
-     */
-    children?: ReactNode;
-}