@atlaskit/icon 21.11.1 → 21.11.3
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +12 -0
- package/dist/cjs/version.json +1 -1
- package/dist/es2019/version.json +1 -1
- package/dist/esm/version.json +1 -1
- package/package.json +3 -11
- package/report.api.md +13 -6
- package/dist/types-ts4.0/components/icon.d.ts +0 -12
- package/dist/types-ts4.0/components/skeleton.d.ts +0 -7
- package/dist/types-ts4.0/components/styles.d.ts +0 -28
- package/dist/types-ts4.0/components/svg.d.ts +0 -12
- package/dist/types-ts4.0/components/utils.d.ts +0 -6
- package/dist/types-ts4.0/constants.d.ts +0 -21
- package/dist/types-ts4.0/entry-points/base.d.ts +0 -2
- package/dist/types-ts4.0/entry-points/constants.d.ts +0 -1
- package/dist/types-ts4.0/entry-points/metadata.d.ts +0 -1
- package/dist/types-ts4.0/entry-points/svg.d.ts +0 -2
- package/dist/types-ts4.0/entry-points/types.d.ts +0 -1
- package/dist/types-ts4.0/extract-react-types/custom-glyph.d.ts +0 -2
- package/dist/types-ts4.0/extract-react-types/glyph-no-color-size.d.ts +0 -2
- package/dist/types-ts4.0/extract-react-types/glyph-no-color.d.ts +0 -2
- package/dist/types-ts4.0/extract-react-types/glyph.d.ts +0 -2
- package/dist/types-ts4.0/extract-react-types/svg.d.ts +0 -2
- package/dist/types-ts4.0/index.d.ts +0 -5
- package/dist/types-ts4.0/metadata.d.ts +0 -16
- package/dist/types-ts4.0/types.d.ts +0 -82
package/CHANGELOG.md
CHANGED
package/dist/cjs/version.json
CHANGED
package/dist/es2019/version.json
CHANGED
package/dist/esm/version.json
CHANGED
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/icon",
|
|
3
|
-
"version": "21.11.
|
|
3
|
+
"version": "21.11.3",
|
|
4
4
|
"description": "An icon is a visual representation of a command, device, directory, or common action.",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"registry": "https://registry.npmjs.org/"
|
|
@@ -12,14 +12,6 @@
|
|
|
12
12
|
"module": "dist/esm/index.js",
|
|
13
13
|
"module:es2019": "dist/es2019/index.js",
|
|
14
14
|
"types": "dist/types/index.d.ts",
|
|
15
|
-
"typesVersions": {
|
|
16
|
-
">=4.0 <4.5": {
|
|
17
|
-
"*": [
|
|
18
|
-
"dist/types-ts4.0/*",
|
|
19
|
-
"dist/types-ts4.0/index.d.ts"
|
|
20
|
-
]
|
|
21
|
-
}
|
|
22
|
-
},
|
|
23
15
|
"sideEffects": false,
|
|
24
16
|
"atlaskit:src": "src/index.tsx",
|
|
25
17
|
"homepage": "https://atlassian.design/components/icon/",
|
|
@@ -46,7 +38,7 @@
|
|
|
46
38
|
},
|
|
47
39
|
"dependencies": {
|
|
48
40
|
"@atlaskit/theme": "^12.2.0",
|
|
49
|
-
"@atlaskit/tokens": "^0.
|
|
41
|
+
"@atlaskit/tokens": "^0.12.0",
|
|
50
42
|
"@babel/runtime": "^7.0.0",
|
|
51
43
|
"@emotion/react": "^11.7.1"
|
|
52
44
|
},
|
|
@@ -55,7 +47,7 @@
|
|
|
55
47
|
},
|
|
56
48
|
"devDependencies": {
|
|
57
49
|
"@af/icon-build-process": "^0.3.0",
|
|
58
|
-
"@atlaskit/button": "^16.
|
|
50
|
+
"@atlaskit/button": "^16.5.0",
|
|
59
51
|
"@atlaskit/docs": "*",
|
|
60
52
|
"@atlaskit/ds-lib": "^2.1.1",
|
|
61
53
|
"@atlaskit/dynamic-table": "^14.8.0",
|
package/report.api.md
CHANGED
|
@@ -1,12 +1,17 @@
|
|
|
1
|
+
<!-- API Report Version: 2.2 -->
|
|
2
|
+
|
|
1
3
|
## API Report File for "@atlaskit/icon"
|
|
2
4
|
|
|
3
|
-
> Do not edit this file.
|
|
5
|
+
> Do not edit this file. This report is auto-generated using [API Extractor](https://api-extractor.com/).
|
|
6
|
+
> [Learn more about API reports](https://hello.atlassian.net/wiki/spaces/UR/pages/1825484529/Package+API+Reports)
|
|
7
|
+
|
|
8
|
+
### Table of contents
|
|
4
9
|
|
|
5
|
-
|
|
6
|
-
Generated API Report version: 2.0
|
|
7
|
-
-->
|
|
10
|
+
- [Main Entry Types](#main-entry-types)
|
|
8
11
|
|
|
9
|
-
|
|
12
|
+
### Main Entry Types
|
|
13
|
+
|
|
14
|
+
<!--SECTION START: Main Entry Types-->
|
|
10
15
|
|
|
11
16
|
```ts
|
|
12
17
|
/// <reference types="react" />
|
|
@@ -58,7 +63,7 @@ interface OtherGlyphProps {
|
|
|
58
63
|
}
|
|
59
64
|
|
|
60
65
|
// @public (undocumented)
|
|
61
|
-
export type Size = '
|
|
66
|
+
export type Size = 'large' | 'medium' | 'small' | 'xlarge';
|
|
62
67
|
|
|
63
68
|
// @public (undocumented)
|
|
64
69
|
export const size: Record<Size, Size>;
|
|
@@ -90,3 +95,5 @@ export interface SVGProps extends GlyphProps {
|
|
|
90
95
|
|
|
91
96
|
// (No @packageDocumentation comment for this package)
|
|
92
97
|
```
|
|
98
|
+
|
|
99
|
+
<!--SECTION END: Main Entry Types-->
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { IconProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* __Icon__
|
|
5
|
-
*
|
|
6
|
-
* An icon is used as a visual representation of common actions and commands to provide context.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
|
|
9
|
-
* - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-icons)
|
|
10
|
-
*/
|
|
11
|
-
export declare const Icon: import("react").NamedExoticComponent<IconProps>;
|
|
12
|
-
export default Icon;
|
|
@@ -1,28 +0,0 @@
|
|
|
1
|
-
import type { Size } from '../types';
|
|
2
|
-
import { CSSObject } from '@emotion/react';
|
|
3
|
-
export declare const commonSVGStyles: CSSObject;
|
|
4
|
-
export declare const sizeStyleMap: {
|
|
5
|
-
small: import("@emotion/react").SerializedStyles;
|
|
6
|
-
medium: import("@emotion/react").SerializedStyles;
|
|
7
|
-
large: import("@emotion/react").SerializedStyles;
|
|
8
|
-
xlarge: import("@emotion/react").SerializedStyles;
|
|
9
|
-
};
|
|
10
|
-
/**
|
|
11
|
-
* Returns the width of the icon's parent span. This function has
|
|
12
|
-
* special behaviour to deal with icon-file-type specifically.
|
|
13
|
-
*
|
|
14
|
-
* The reality is the SVG still has its own dimensions, so this is
|
|
15
|
-
* a secondary fallback which in 95% of cases is not required.
|
|
16
|
-
* It's only really being kept to maintain backward compatability.
|
|
17
|
-
*/
|
|
18
|
-
export declare const getIconSize: ({ width, height, size, }: {
|
|
19
|
-
size?: Size | undefined;
|
|
20
|
-
width?: number | undefined;
|
|
21
|
-
height?: number | undefined;
|
|
22
|
-
}) => {
|
|
23
|
-
readonly width: string;
|
|
24
|
-
readonly height: string;
|
|
25
|
-
} | {
|
|
26
|
-
width: number;
|
|
27
|
-
height: number;
|
|
28
|
-
} | undefined;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
/// <reference types="react" />
|
|
2
|
-
import type { SVGProps } from '../types';
|
|
3
|
-
/**
|
|
4
|
-
* __SVG__
|
|
5
|
-
*
|
|
6
|
-
* An icon is used as a visual representation of common actions and commands to provide context.
|
|
7
|
-
*
|
|
8
|
-
* - [Examples](https://atlaskit.atlassian.com/packages/design-system/icon)
|
|
9
|
-
* - [Code](https://atlaskit.atlassian.com/packages/design-system/icon/docs/custom-svgs)
|
|
10
|
-
*/
|
|
11
|
-
declare const SVG: import("react").NamedExoticComponent<SVGProps>;
|
|
12
|
-
export default SVG;
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import type { Size } from './types';
|
|
2
|
-
export declare const sizes: Record<Size, string>;
|
|
3
|
-
export declare const sizeMap: Record<Size, Size>;
|
|
4
|
-
export declare const dimensions: {
|
|
5
|
-
readonly small: {
|
|
6
|
-
readonly width: string;
|
|
7
|
-
readonly height: string;
|
|
8
|
-
};
|
|
9
|
-
readonly medium: {
|
|
10
|
-
readonly width: string;
|
|
11
|
-
readonly height: string;
|
|
12
|
-
};
|
|
13
|
-
readonly large: {
|
|
14
|
-
readonly width: string;
|
|
15
|
-
readonly height: string;
|
|
16
|
-
};
|
|
17
|
-
readonly xlarge: {
|
|
18
|
-
readonly width: string;
|
|
19
|
-
readonly height: string;
|
|
20
|
-
};
|
|
21
|
-
};
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { sizeMap, sizes } from '../constants';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '../metadata';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type { CustomGlyphProps, GlyphProps, IconProps, Size, SkeletonProps, SVGProps, } from '../types';
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
export { default } from './components/icon';
|
|
2
|
-
export { default as SVG } from './components/svg';
|
|
3
|
-
export { sizeMap as size, sizes } from './constants';
|
|
4
|
-
export { default as Skeleton } from './components/skeleton';
|
|
5
|
-
export type { Size, SkeletonProps, IconProps, GlyphProps, CustomGlyphProps, SVGProps, } from './types';
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* NOTE:
|
|
3
|
-
*
|
|
4
|
-
* This file is automatically generated by the build process.
|
|
5
|
-
* DO NOT CHANGE IT BY HAND or your changes will be lost.
|
|
6
|
-
*
|
|
7
|
-
* To change the format of this file, modify build/icon/createIconDocs.js.
|
|
8
|
-
* Add synonyms in icon/icons/synonyms.js.
|
|
9
|
-
*/
|
|
10
|
-
interface Data {
|
|
11
|
-
keywords: string[];
|
|
12
|
-
componentName: string;
|
|
13
|
-
package: string;
|
|
14
|
-
}
|
|
15
|
-
declare const metaData: Record<string, Data>;
|
|
16
|
-
export default metaData;
|
|
@@ -1,82 +0,0 @@
|
|
|
1
|
-
import type { ComponentType, SVGProps as ReactSVGProps, ReactNode } from 'react';
|
|
2
|
-
export declare type Size = 'small' | 'medium' | 'large' | 'xlarge';
|
|
3
|
-
export interface CustomGlyphProps extends ReactSVGProps<SVGSVGElement> {
|
|
4
|
-
/**
|
|
5
|
-
* provided to a custom glyph
|
|
6
|
-
*/
|
|
7
|
-
'data-testid'?: string;
|
|
8
|
-
/**
|
|
9
|
-
* provided to a custom glyph
|
|
10
|
-
*/
|
|
11
|
-
'aria-label'?: string;
|
|
12
|
-
/**
|
|
13
|
-
* provided classname for custom glyph to match ADG styles
|
|
14
|
-
*/
|
|
15
|
-
className?: string;
|
|
16
|
-
}
|
|
17
|
-
export interface GlyphColorProps {
|
|
18
|
-
/**
|
|
19
|
-
* Primary color for the icon.
|
|
20
|
-
* Inherits the current font color by default.
|
|
21
|
-
*/
|
|
22
|
-
primaryColor?: string;
|
|
23
|
-
/**
|
|
24
|
-
* Secondary color for the icon.
|
|
25
|
-
* Defaults to the page background for an icon that supports two colors.
|
|
26
|
-
*/
|
|
27
|
-
secondaryColor?: string;
|
|
28
|
-
}
|
|
29
|
-
export interface GlyphSizeProps {
|
|
30
|
-
/**
|
|
31
|
-
* There are three icon sizes – small (16px), medium (24px), and large (32px).
|
|
32
|
-
* This pixel size refers to the canvas the icon sits on,
|
|
33
|
-
* not the size of the icon shape itself.
|
|
34
|
-
*/
|
|
35
|
-
size?: Size;
|
|
36
|
-
}
|
|
37
|
-
export interface OtherGlyphProps {
|
|
38
|
-
/**
|
|
39
|
-
* Text used to describe what the icon is in context.
|
|
40
|
-
* A label is needed when there is no pairing visible text next to the icon.
|
|
41
|
-
* An empty string marks the icon as presentation only.
|
|
42
|
-
*/
|
|
43
|
-
label: string;
|
|
44
|
-
/**
|
|
45
|
-
* A `testId` prop is provided for specified elements,
|
|
46
|
-
* which is a unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
47
|
-
* serving as a hook for automated tests.
|
|
48
|
-
*/
|
|
49
|
-
testId?: string;
|
|
50
|
-
}
|
|
51
|
-
export interface GlyphProps extends OtherGlyphProps, GlyphSizeProps, GlyphColorProps {
|
|
52
|
-
}
|
|
53
|
-
export interface IconProps extends GlyphProps {
|
|
54
|
-
/**
|
|
55
|
-
* Custom icon component that returns an SVG element with set `viewBox`,
|
|
56
|
-
* `width`, and `height` props.
|
|
57
|
-
*/
|
|
58
|
-
glyph?: ComponentType<CustomGlyphProps>;
|
|
59
|
-
/**
|
|
60
|
-
* @deprecated
|
|
61
|
-
* Custom icon string that should contain an SVG element with set `viewBox`,
|
|
62
|
-
* `width`, and `height` attributes.
|
|
63
|
-
* It's recommended to use the `glyph` prop instead.
|
|
64
|
-
*/
|
|
65
|
-
dangerouslySetGlyph?: string;
|
|
66
|
-
}
|
|
67
|
-
export interface SkeletonProps {
|
|
68
|
-
color?: string;
|
|
69
|
-
size?: Size;
|
|
70
|
-
weight?: 'normal' | 'strong';
|
|
71
|
-
/**
|
|
72
|
-
* A unique string that appears as a data attribute `data-testid` in the rendered code,
|
|
73
|
-
* serving as a hook for automated tests.
|
|
74
|
-
*/
|
|
75
|
-
testId?: string;
|
|
76
|
-
}
|
|
77
|
-
export interface SVGProps extends GlyphProps {
|
|
78
|
-
/**
|
|
79
|
-
* The children of the SVG, should still honour the constraints of icons
|
|
80
|
-
*/
|
|
81
|
-
children?: ReactNode;
|
|
82
|
-
}
|