@atlaskit/icon 22.3.1 → 22.4.0
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 +1081 -1072
- package/README.md +5 -2
- package/__perf__/default.tsx +7 -9
- package/build/index.tsx +39 -42
- package/codemods/21.2.0-metadata-entry.tsx +88 -96
- package/codemods/__tests__/21.2.0-metadata-entry.test.tsx +63 -63
- package/dist/cjs/components/icon-new.js +6 -1
- package/dist/cjs/components/icon-tile.js +5 -0
- package/dist/cjs/components/icon.js +13 -6
- package/dist/cjs/components/skeleton.js +7 -1
- package/dist/cjs/components/styles.js +8 -0
- package/dist/cjs/components/svg.js +10 -2
- package/dist/es2019/components/icon-new.js +5 -1
- package/dist/es2019/components/icon-tile.js +4 -0
- package/dist/es2019/components/icon.js +15 -5
- package/dist/es2019/components/skeleton.js +7 -1
- package/dist/es2019/components/styles.js +7 -0
- package/dist/es2019/components/svg.js +9 -2
- package/dist/esm/components/icon-new.js +5 -1
- package/dist/esm/components/icon-tile.js +4 -0
- package/dist/esm/components/icon.js +14 -5
- package/dist/esm/components/skeleton.js +7 -1
- package/dist/esm/components/styles.js +7 -0
- package/dist/esm/components/svg.js +9 -2
- package/docs/0-intro.tsx +5 -4
- package/package.json +116 -118
- package/report.api.md +23 -25
- package/utils/logo-icons.tsx +0 -32
|
@@ -7,7 +7,11 @@ exports.default = void 0;
|
|
|
7
7
|
var _react = require("@emotion/react");
|
|
8
8
|
var _react2 = require("react");
|
|
9
9
|
var _styles = require("./styles");
|
|
10
|
+
/**
|
|
11
|
+
* @jsxRuntime classic
|
|
12
|
+
*/
|
|
10
13
|
/** @jsx jsx */
|
|
14
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
11
15
|
|
|
12
16
|
var skeletonStyles = (0, _react.css)({
|
|
13
17
|
display: 'inline-block',
|
|
@@ -36,7 +40,9 @@ var Skeleton = /*#__PURE__*/(0, _react2.memo)(function Skeleton(_ref) {
|
|
|
36
40
|
style: {
|
|
37
41
|
backgroundColor: color
|
|
38
42
|
},
|
|
39
|
-
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
43
|
+
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
44
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
45
|
+
_styles.sizeStyleMap[size]]
|
|
40
46
|
});
|
|
41
47
|
});
|
|
42
48
|
var _default = exports.default = Skeleton;
|
|
@@ -6,6 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.sizeStyleMap = exports.getIconSize = exports.commonSVGStyles = void 0;
|
|
7
7
|
var _constants = require("../constants");
|
|
8
8
|
var _react = require("@emotion/react");
|
|
9
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
10
|
+
|
|
9
11
|
var commonSVGStyles = exports.commonSVGStyles = {
|
|
10
12
|
overflow: 'hidden',
|
|
11
13
|
pointerEvents: 'none',
|
|
@@ -18,12 +20,18 @@ var commonSVGStyles = exports.commonSVGStyles = {
|
|
|
18
20
|
stopColor: 'currentColor'
|
|
19
21
|
}
|
|
20
22
|
};
|
|
23
|
+
|
|
24
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
21
25
|
var smallStyles = (0, _react.css)(_constants.dimensions.small);
|
|
26
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
22
27
|
var mediumStyles = (0, _react.css)(_constants.dimensions.medium);
|
|
28
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
23
29
|
var largeStyles = (0, _react.css)(_constants.dimensions.large);
|
|
30
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
24
31
|
var xlargeStyles = (0, _react.css)(_constants.dimensions.xlarge);
|
|
25
32
|
|
|
26
33
|
// pre-built css style-size map
|
|
34
|
+
// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
27
35
|
var sizeStyleMap = exports.sizeStyleMap = {
|
|
28
36
|
small: smallStyles,
|
|
29
37
|
medium: mediumStyles,
|
|
@@ -8,9 +8,14 @@ var _react = require("react");
|
|
|
8
8
|
var _react2 = require("@emotion/react");
|
|
9
9
|
var _utils = require("./utils");
|
|
10
10
|
var _styles = require("./styles");
|
|
11
|
+
/**
|
|
12
|
+
* @jsxRuntime classic
|
|
13
|
+
*/
|
|
11
14
|
/** @jsx jsx */
|
|
12
15
|
|
|
13
|
-
// eslint-disable-next-line @atlaskit/
|
|
16
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
17
|
+
|
|
18
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
14
19
|
var svgStyles = (0, _react2.css)(_styles.commonSVGStyles);
|
|
15
20
|
|
|
16
21
|
/**
|
|
@@ -34,8 +39,11 @@ var SVG = /*#__PURE__*/(0, _react.memo)(function SVG(_ref) {
|
|
|
34
39
|
viewBox: "0 0 24 24",
|
|
35
40
|
style: {
|
|
36
41
|
color: primaryColor,
|
|
42
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
37
43
|
fill: secondaryColor || (0, _utils.getBackground)()
|
|
38
|
-
}
|
|
44
|
+
}
|
|
45
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
46
|
+
,
|
|
39
47
|
css: [svgStyles, _styles.sizeStyleMap[size]],
|
|
40
48
|
"data-testid": testId,
|
|
41
49
|
"aria-label": label || undefined,
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { memo } from 'react';
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
9
|
|
|
@@ -16,7 +20,7 @@ const commonSVGStyles = css({
|
|
|
16
20
|
* We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
|
|
17
21
|
* rule) and then override it with currentColor for the color changes to be picked up.
|
|
18
22
|
*/
|
|
19
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
24
|
stop: {
|
|
21
25
|
stopColor: 'currentColor'
|
|
22
26
|
}
|
|
@@ -1,6 +1,10 @@
|
|
|
1
1
|
import _extends from "@babel/runtime/helpers/extends";
|
|
2
|
+
/**
|
|
3
|
+
* @jsxRuntime classic
|
|
4
|
+
*/
|
|
2
5
|
/** @jsx jsx */
|
|
3
6
|
import { memo } from 'react';
|
|
7
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
4
8
|
import { css, jsx } from '@emotion/react';
|
|
5
9
|
import { getBackground } from './utils';
|
|
6
10
|
import { commonSVGStyles, getIconSize } from './styles';
|
|
@@ -14,8 +18,9 @@ const iconStyles = css({
|
|
|
14
18
|
display: 'inline-block',
|
|
15
19
|
flexShrink: 0,
|
|
16
20
|
lineHeight: 1,
|
|
17
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
21
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
18
22
|
'> svg': {
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
19
24
|
...commonSVGStyles,
|
|
20
25
|
maxWidth: '100%',
|
|
21
26
|
maxHeight: '100%',
|
|
@@ -29,7 +34,7 @@ const iconStyles = css({
|
|
|
29
34
|
*/
|
|
30
35
|
const baseHcmStyles = css({
|
|
31
36
|
'@media screen and (forced-colors: active)': {
|
|
32
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
37
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
33
38
|
'> svg': {
|
|
34
39
|
filter: 'grayscale(1)',
|
|
35
40
|
'--icon-primary-color': 'CanvasText',
|
|
@@ -40,7 +45,7 @@ const baseHcmStyles = css({
|
|
|
40
45
|
});
|
|
41
46
|
const primaryEqualsSecondaryHcmStyles = css({
|
|
42
47
|
'@media screen and (forced-colors: active)': {
|
|
43
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
48
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
44
49
|
'> svg': {
|
|
45
50
|
// if the primaryColor is the same as the secondaryColor we
|
|
46
51
|
// set the --icon-primary-color to Canvas
|
|
@@ -51,7 +56,7 @@ const primaryEqualsSecondaryHcmStyles = css({
|
|
|
51
56
|
});
|
|
52
57
|
const secondaryTransparentHcmStyles = css({
|
|
53
58
|
'@media screen and (forced-colors: active)': {
|
|
54
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
59
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
55
60
|
'> svg': {
|
|
56
61
|
'--icon-secondary-color': 'transparent' // background
|
|
57
62
|
}
|
|
@@ -101,7 +106,9 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
|
|
|
101
106
|
,
|
|
102
107
|
style: {
|
|
103
108
|
'--icon-primary-color': primaryColor,
|
|
109
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
104
110
|
'--icon-secondary-color': secondaryColor || getBackground()
|
|
111
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
105
112
|
}
|
|
106
113
|
}, glyphProps, {
|
|
107
114
|
css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
|
|
@@ -109,10 +116,13 @@ export const Icon = /*#__PURE__*/memo(function Icon(props) {
|
|
|
109
116
|
// We could then simplify how common styles are dealt with simply by encapsulating them
|
|
110
117
|
// at their appropriate level and/or having a singular approach to css variables in the package
|
|
111
118
|
dimensions &&
|
|
112
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
119
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
113
120
|
css({
|
|
121
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
114
122
|
width: dimensions.width,
|
|
123
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
115
124
|
height: dimensions.height,
|
|
125
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
116
126
|
'> svg': dimensions
|
|
117
127
|
})]
|
|
118
128
|
}));
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { memo } from 'react';
|
|
4
8
|
import { sizeStyleMap } from './styles';
|
|
@@ -27,7 +31,9 @@ const Skeleton = /*#__PURE__*/memo(function Skeleton({
|
|
|
27
31
|
style: {
|
|
28
32
|
backgroundColor: color
|
|
29
33
|
},
|
|
30
|
-
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
34
|
+
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
36
|
+
sizeStyleMap[size]]
|
|
31
37
|
});
|
|
32
38
|
});
|
|
33
39
|
export default Skeleton;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { dimensions } from '../constants';
|
|
2
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
3
|
import { css } from '@emotion/react';
|
|
3
4
|
export const commonSVGStyles = {
|
|
4
5
|
overflow: 'hidden',
|
|
@@ -12,12 +13,18 @@ export const commonSVGStyles = {
|
|
|
12
13
|
stopColor: 'currentColor'
|
|
13
14
|
}
|
|
14
15
|
};
|
|
16
|
+
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
18
|
const smallStyles = css(dimensions.small);
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
20
|
const mediumStyles = css(dimensions.medium);
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
17
22
|
const largeStyles = css(dimensions.large);
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
24
|
const xlargeStyles = css(dimensions.xlarge);
|
|
19
25
|
|
|
20
26
|
// pre-built css style-size map
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
21
28
|
export const sizeStyleMap = {
|
|
22
29
|
small: smallStyles,
|
|
23
30
|
medium: mediumStyles,
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { memo } from 'react';
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBackground } from './utils';
|
|
5
9
|
import { commonSVGStyles, sizeStyleMap } from './styles';
|
|
6
10
|
|
|
7
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
11
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
8
12
|
const svgStyles = css(commonSVGStyles);
|
|
9
13
|
|
|
10
14
|
/**
|
|
@@ -27,8 +31,11 @@ const SVG = /*#__PURE__*/memo(function SVG({
|
|
|
27
31
|
viewBox: "0 0 24 24",
|
|
28
32
|
style: {
|
|
29
33
|
color: primaryColor,
|
|
34
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
30
35
|
fill: secondaryColor || getBackground()
|
|
31
|
-
}
|
|
36
|
+
}
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
38
|
+
,
|
|
32
39
|
css: [svgStyles, sizeStyleMap[size]],
|
|
33
40
|
"data-testid": testId,
|
|
34
41
|
"aria-label": label || undefined,
|
|
@@ -1,5 +1,9 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { memo } from 'react';
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBooleanFF } from '@atlaskit/platform-feature-flags';
|
|
5
9
|
|
|
@@ -16,7 +20,7 @@ var commonSVGStyles = css({
|
|
|
16
20
|
* We have to initially set stop-color to inherit (either via DOM attribute or an initial CSS
|
|
17
21
|
* rule) and then override it with currentColor for the color changes to be picked up.
|
|
18
22
|
*/
|
|
19
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
23
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
20
24
|
stop: {
|
|
21
25
|
stopColor: 'currentColor'
|
|
22
26
|
}
|
|
@@ -2,8 +2,12 @@ import _extends from "@babel/runtime/helpers/extends";
|
|
|
2
2
|
import _defineProperty from "@babel/runtime/helpers/defineProperty";
|
|
3
3
|
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; }
|
|
4
4
|
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; }
|
|
5
|
+
/**
|
|
6
|
+
* @jsxRuntime classic
|
|
7
|
+
*/
|
|
5
8
|
/** @jsx jsx */
|
|
6
9
|
import { memo } from 'react';
|
|
10
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
7
11
|
import { css, jsx } from '@emotion/react';
|
|
8
12
|
import { getBackground } from './utils';
|
|
9
13
|
import { commonSVGStyles, getIconSize } from './styles';
|
|
@@ -17,7 +21,7 @@ var iconStyles = css({
|
|
|
17
21
|
display: 'inline-block',
|
|
18
22
|
flexShrink: 0,
|
|
19
23
|
lineHeight: 1,
|
|
20
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
24
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
21
25
|
'> svg': _objectSpread(_objectSpread({}, commonSVGStyles), {}, {
|
|
22
26
|
maxWidth: '100%',
|
|
23
27
|
maxHeight: '100%',
|
|
@@ -31,7 +35,7 @@ var iconStyles = css({
|
|
|
31
35
|
*/
|
|
32
36
|
var baseHcmStyles = css({
|
|
33
37
|
'@media screen and (forced-colors: active)': {
|
|
34
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
38
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
35
39
|
'> svg': {
|
|
36
40
|
filter: 'grayscale(1)',
|
|
37
41
|
'--icon-primary-color': 'CanvasText',
|
|
@@ -42,7 +46,7 @@ var baseHcmStyles = css({
|
|
|
42
46
|
});
|
|
43
47
|
var primaryEqualsSecondaryHcmStyles = css({
|
|
44
48
|
'@media screen and (forced-colors: active)': {
|
|
45
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
49
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
46
50
|
'> svg': {
|
|
47
51
|
// if the primaryColor is the same as the secondaryColor we
|
|
48
52
|
// set the --icon-primary-color to Canvas
|
|
@@ -53,7 +57,7 @@ var primaryEqualsSecondaryHcmStyles = css({
|
|
|
53
57
|
});
|
|
54
58
|
var secondaryTransparentHcmStyles = css({
|
|
55
59
|
'@media screen and (forced-colors: active)': {
|
|
56
|
-
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles
|
|
60
|
+
// eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
|
|
57
61
|
'> svg': {
|
|
58
62
|
'--icon-secondary-color': 'transparent' // background
|
|
59
63
|
}
|
|
@@ -103,7 +107,9 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
|
|
|
103
107
|
,
|
|
104
108
|
style: {
|
|
105
109
|
'--icon-primary-color': primaryColor,
|
|
110
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
106
111
|
'--icon-secondary-color': secondaryColor || getBackground()
|
|
112
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
107
113
|
}
|
|
108
114
|
}, glyphProps, {
|
|
109
115
|
css: [iconStyles, baseHcmStyles, primaryColor === secondaryColor && primaryEqualsSecondaryHcmStyles, secondaryColor === 'transparent' && secondaryTransparentHcmStyles,
|
|
@@ -111,10 +117,13 @@ export var Icon = /*#__PURE__*/memo(function Icon(props) {
|
|
|
111
117
|
// We could then simplify how common styles are dealt with simply by encapsulating them
|
|
112
118
|
// at their appropriate level and/or having a singular approach to css variables in the package
|
|
113
119
|
dimensions &&
|
|
114
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
120
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
115
121
|
css({
|
|
122
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
116
123
|
width: dimensions.width,
|
|
124
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
117
125
|
height: dimensions.height,
|
|
126
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
118
127
|
'> svg': dimensions
|
|
119
128
|
})]
|
|
120
129
|
}));
|
|
@@ -1,4 +1,8 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
5
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
6
|
import { css, jsx } from '@emotion/react';
|
|
3
7
|
import { memo } from 'react';
|
|
4
8
|
import { sizeStyleMap } from './styles';
|
|
@@ -29,7 +33,9 @@ var Skeleton = /*#__PURE__*/memo(function Skeleton(_ref) {
|
|
|
29
33
|
style: {
|
|
30
34
|
backgroundColor: color
|
|
31
35
|
},
|
|
32
|
-
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
36
|
+
css: [skeletonStyles, weight === 'strong' ? strongOpacityStyles : subtleOpacityStyles,
|
|
37
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
38
|
+
sizeStyleMap[size]]
|
|
33
39
|
});
|
|
34
40
|
});
|
|
35
41
|
export default Skeleton;
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { dimensions } from '../constants';
|
|
2
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
2
3
|
import { css } from '@emotion/react';
|
|
3
4
|
export var commonSVGStyles = {
|
|
4
5
|
overflow: 'hidden',
|
|
@@ -12,12 +13,18 @@ export var commonSVGStyles = {
|
|
|
12
13
|
stopColor: 'currentColor'
|
|
13
14
|
}
|
|
14
15
|
};
|
|
16
|
+
|
|
17
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
15
18
|
var smallStyles = css(dimensions.small);
|
|
19
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
16
20
|
var mediumStyles = css(dimensions.medium);
|
|
21
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
17
22
|
var largeStyles = css(dimensions.large);
|
|
23
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
18
24
|
var xlargeStyles = css(dimensions.xlarge);
|
|
19
25
|
|
|
20
26
|
// pre-built css style-size map
|
|
27
|
+
// eslint-disable-next-line @atlaskit/design-system/no-exported-css, @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
|
|
21
28
|
export var sizeStyleMap = {
|
|
22
29
|
small: smallStyles,
|
|
23
30
|
medium: mediumStyles,
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* @jsxRuntime classic
|
|
3
|
+
*/
|
|
1
4
|
/** @jsx jsx */
|
|
2
5
|
import { memo } from 'react';
|
|
6
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
|
|
3
7
|
import { css, jsx } from '@emotion/react';
|
|
4
8
|
import { getBackground } from './utils';
|
|
5
9
|
import { commonSVGStyles, sizeStyleMap } from './styles';
|
|
6
10
|
|
|
7
|
-
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage
|
|
11
|
+
// eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
|
|
8
12
|
var svgStyles = css(commonSVGStyles);
|
|
9
13
|
|
|
10
14
|
/**
|
|
@@ -28,8 +32,11 @@ var SVG = /*#__PURE__*/memo(function SVG(_ref) {
|
|
|
28
32
|
viewBox: "0 0 24 24",
|
|
29
33
|
style: {
|
|
30
34
|
color: primaryColor,
|
|
35
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
31
36
|
fill: secondaryColor || getBackground()
|
|
32
|
-
}
|
|
37
|
+
}
|
|
38
|
+
// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
|
|
39
|
+
,
|
|
33
40
|
css: [svgStyles, sizeStyleMap[size]],
|
|
34
41
|
"data-testid": testId,
|
|
35
42
|
"aria-label": label || undefined,
|
package/docs/0-intro.tsx
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
|
|
3
3
|
import { md } from '@atlaskit/docs';
|
|
4
|
+
import Link from '@atlaskit/link';
|
|
4
5
|
import SectionMessage from '@atlaskit/section-message';
|
|
5
6
|
|
|
6
7
|
export default md`
|
|
7
8
|
${(
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
9
|
+
<SectionMessage appearance="information">
|
|
10
|
+
This component is now documented on{' '}
|
|
11
|
+
<Link href="https://atlassian.design/components/icon">atlassian.design</Link>
|
|
12
|
+
</SectionMessage>
|
|
12
13
|
)}
|
|
13
14
|
`;
|