@atlaskit/eslint-plugin-design-system 15.2.0 → 15.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 +23 -0
- package/README.md +1 -1
- package/compass.yml +2 -2
- package/dist/cjs/presets/all-flat.codegen.js +2 -2
- package/dist/cjs/presets/all.codegen.js +2 -2
- package/dist/cjs/presets/recommended-flat.codegen.js +1 -2
- package/dist/cjs/presets/recommended.codegen.js +1 -2
- package/dist/cjs/rules/expand-motion-shorthand/index.js +285 -0
- package/dist/cjs/rules/index.codegen.js +3 -3
- package/dist/es2019/presets/all-flat.codegen.js +2 -2
- package/dist/es2019/presets/all.codegen.js +2 -2
- package/dist/es2019/presets/recommended-flat.codegen.js +1 -2
- package/dist/es2019/presets/recommended.codegen.js +1 -2
- package/dist/es2019/rules/expand-motion-shorthand/index.js +243 -0
- package/dist/es2019/rules/index.codegen.js +3 -3
- package/dist/esm/presets/all-flat.codegen.js +2 -2
- package/dist/esm/presets/all.codegen.js +2 -2
- package/dist/esm/presets/recommended-flat.codegen.js +1 -2
- package/dist/esm/presets/recommended.codegen.js +1 -2
- package/dist/esm/rules/expand-motion-shorthand/index.js +279 -0
- package/dist/esm/rules/index.codegen.js +3 -3
- package/dist/types/presets/all-flat.codegen.d.ts +1 -1
- package/dist/types/presets/all.codegen.d.ts +1 -1
- package/dist/types/presets/recommended-flat.codegen.d.ts +1 -1
- package/dist/types/presets/recommended.codegen.d.ts +1 -1
- package/dist/types/rules/expand-motion-shorthand/index.d.ts +3 -0
- package/dist/types/rules/index.codegen.d.ts +1 -1
- package/package.json +1 -1
- package/dist/cjs/rules/no-boolean-autofocus-on-modal-dialog/index.js +0 -82
- package/dist/es2019/rules/no-boolean-autofocus-on-modal-dialog/index.js +0 -76
- package/dist/esm/rules/no-boolean-autofocus-on-modal-dialog/index.js +0 -76
- package/dist/types/rules/no-boolean-autofocus-on-modal-dialog/index.d.ts +0 -5
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,28 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 15.4.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`0af52c9020b98`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0af52c9020b98) -
|
|
8
|
+
Add `expand-motion-shorthand` rule to `@atlaskit/eslint-plugin-design-system` so it is documented
|
|
9
|
+
on the design system website. Expands `transition` and `animation` CSS shorthand properties into
|
|
10
|
+
their individual sub-properties so values can be replaced with motion tokens.
|
|
11
|
+
|
|
12
|
+
Deprecate the `compiled/expand-motion-shorthand` rule in `@atlaskit/eslint-plugin-platform` in
|
|
13
|
+
favour of `@atlaskit/design-system/expand-motion-shorthand`.
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- Updated dependencies
|
|
18
|
+
|
|
19
|
+
## 15.3.0
|
|
20
|
+
|
|
21
|
+
### Minor Changes
|
|
22
|
+
|
|
23
|
+
- [`c012f03a95a5a`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/c012f03a95a5a) -
|
|
24
|
+
Remove modal `autoFocus` rule because type has been updated to remove unwanted case.
|
|
25
|
+
|
|
3
26
|
## 15.2.0
|
|
4
27
|
|
|
5
28
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -56,10 +56,10 @@ module.exports = {
|
|
|
56
56
|
| <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes |
|
|
57
57
|
| <a href="./src/rules/ensure-icon-color/README.md">ensure-icon-color</a> | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | |
|
|
58
58
|
| <a href="./src/rules/ensure-proper-xcss-usage/README.md">ensure-proper-xcss-usage</a> | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | | | |
|
|
59
|
+
| <a href="./src/rules/expand-motion-shorthand/README.md">expand-motion-shorthand</a> | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens. | | Yes | |
|
|
59
60
|
| <a href="./src/rules/icon-label/README.md">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
|
|
60
61
|
| <a href="./src/rules/lozenge-badge-tag-labelling-system-migration/README.md">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | | Yes | |
|
|
61
62
|
| <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
|
|
62
|
-
| <a href="./src/rules/no-boolean-autofocus-on-modal-dialog/README.md">no-boolean-autofocus-on-modal-dialog</a> | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System's modal dialog component. | Yes | | |
|
|
63
63
|
| <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a> | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
64
64
|
| <a href="./src/rules/no-dark-theme-vr-tests/README.md">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |
|
|
65
65
|
| <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
|
package/compass.yml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
configVersion: 1
|
|
2
2
|
id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/edf84219-0964-4453-82d0-ce6989586011
|
|
3
3
|
name: '@atlaskit/eslint-plugin-design-system'
|
|
4
|
-
ownerId: ari:cloud:identity::team/
|
|
4
|
+
ownerId: ari:cloud:identity::team/be19136e-6275-419f-be0c-fcee844b8684 # Design System Engineers
|
|
5
5
|
labels:
|
|
6
6
|
- platform-code
|
|
7
7
|
- platform-afm
|
|
@@ -32,7 +32,7 @@ customFields:
|
|
|
32
32
|
value: true
|
|
33
33
|
- name: Reviewer Selection Mechanism
|
|
34
34
|
type: text
|
|
35
|
-
value: random(
|
|
35
|
+
value: random(3)
|
|
36
36
|
- name: Required Reviewer Approvals
|
|
37
37
|
type: number
|
|
38
38
|
value: 1
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -21,10 +21,10 @@ var rules = {
|
|
|
21
21
|
'@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
|
|
22
22
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
23
23
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
24
|
+
'@atlaskit/design-system/expand-motion-shorthand': 'warn',
|
|
24
25
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
25
26
|
'@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
|
|
26
27
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
27
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
28
28
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
29
29
|
'@atlaskit/design-system/no-dark-theme-vr-tests': 'error',
|
|
30
30
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -20,10 +20,10 @@ var rules = {
|
|
|
20
20
|
'@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
|
|
21
21
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
22
22
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
23
|
+
'@atlaskit/design-system/expand-motion-shorthand': 'warn',
|
|
23
24
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
24
25
|
'@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
|
|
25
26
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
26
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
27
27
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
28
28
|
'@atlaskit/design-system/no-dark-theme-vr-tests': 'error',
|
|
29
29
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::753093c364736633c291ea7cd16fbb92>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -19,7 +19,6 @@ var rules = {
|
|
|
19
19
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
20
20
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
22
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
23
22
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
24
23
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
25
24
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::7cae0a4365766a3c1b06c8ab29cc7711>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -18,7 +18,6 @@ var rules = {
|
|
|
18
18
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
19
19
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
20
20
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
21
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
22
21
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
23
22
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
24
23
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|
|
@@ -0,0 +1,285 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _createLintRule = require("../utils/create-lint-rule");
|
|
8
|
+
function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol && r[Symbol.iterator] || r["@@iterator"]; if (!t) { if (Array.isArray(r) || (t = _unsupportedIterableToArray(r)) || e && r && "number" == typeof r.length) { t && (r = t); var _n = 0, F = function F() {}; return { s: F, n: function n() { return _n >= r.length ? { done: !0 } : { done: !1, value: r[_n++] }; }, e: function e(r) { throw r; }, f: F }; } throw new TypeError("Invalid attempt to iterate non-iterable instance.\nIn order to be iterable, non-array objects must have a [Symbol.iterator]() method."); } var o, a = !0, u = !1; return { s: function s() { t = t.call(r); }, n: function n() { var r = t.next(); return a = r.done, r; }, e: function e(r) { u = !0, o = r; }, f: function f() { try { a || null == t.return || t.return(); } finally { if (u) throw o; } } }; }
|
|
9
|
+
function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
|
|
10
|
+
function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
|
|
11
|
+
var EASING_KEYWORDS = ['ease', 'ease-in', 'ease-out', 'ease-in-out', 'linear', 'step-start', 'step-end'];
|
|
12
|
+
var KEYWORD_VALUES = ['none', 'all', 'inherit', 'initial', 'unset'];
|
|
13
|
+
var isDuration = function isDuration(token) {
|
|
14
|
+
return /^(?:0|\d+(?:\.\d+)?m?s)$/.test(token);
|
|
15
|
+
};
|
|
16
|
+
var isEasing = function isEasing(token) {
|
|
17
|
+
return EASING_KEYWORDS.includes(token) || token.startsWith('cubic-bezier(') || token.startsWith('steps(');
|
|
18
|
+
};
|
|
19
|
+
/**
|
|
20
|
+
* Tokenizes a CSS shorthand value string, respecting function boundaries.
|
|
21
|
+
* e.g. 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms' →
|
|
22
|
+
* ['opacity', '200ms', 'cubic-bezier(0.4, 0, 0, 1)', '0ms']
|
|
23
|
+
* Splits on whitespace only when not inside parentheses.
|
|
24
|
+
*/
|
|
25
|
+
var tokenizeShorthand = function tokenizeShorthand(value) {
|
|
26
|
+
var tokens = [];
|
|
27
|
+
var depth = 0;
|
|
28
|
+
var current = '';
|
|
29
|
+
for (var i = 0; i < value.length; i++) {
|
|
30
|
+
var ch = value[i];
|
|
31
|
+
if (ch === '(') {
|
|
32
|
+
depth++;
|
|
33
|
+
current += ch;
|
|
34
|
+
} else if (ch === ')') {
|
|
35
|
+
depth--;
|
|
36
|
+
current += ch;
|
|
37
|
+
} else if (/\s/.test(ch) && depth === 0) {
|
|
38
|
+
if (current.length > 0) {
|
|
39
|
+
tokens.push(current);
|
|
40
|
+
current = '';
|
|
41
|
+
}
|
|
42
|
+
} else {
|
|
43
|
+
current += ch;
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
if (current.length > 0) {
|
|
47
|
+
tokens.push(current);
|
|
48
|
+
}
|
|
49
|
+
return tokens;
|
|
50
|
+
};
|
|
51
|
+
|
|
52
|
+
// Splits on top-level commas (outside function parens) — preserves cubic-bezier(...) commas.
|
|
53
|
+
var splitOnTopLevelCommas = function splitOnTopLevelCommas(value) {
|
|
54
|
+
var parts = [];
|
|
55
|
+
var depth = 0;
|
|
56
|
+
var current = '';
|
|
57
|
+
var _iterator = _createForOfIteratorHelper(value),
|
|
58
|
+
_step;
|
|
59
|
+
try {
|
|
60
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
61
|
+
var ch = _step.value;
|
|
62
|
+
if (ch === '(') {
|
|
63
|
+
depth++;
|
|
64
|
+
current += ch;
|
|
65
|
+
} else if (ch === ')') {
|
|
66
|
+
depth--;
|
|
67
|
+
current += ch;
|
|
68
|
+
} else if (ch === ',' && depth === 0) {
|
|
69
|
+
parts.push(current.trim());
|
|
70
|
+
current = '';
|
|
71
|
+
} else {
|
|
72
|
+
current += ch;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
} catch (err) {
|
|
76
|
+
_iterator.e(err);
|
|
77
|
+
} finally {
|
|
78
|
+
_iterator.f();
|
|
79
|
+
}
|
|
80
|
+
if (current.trim().length > 0) {
|
|
81
|
+
parts.push(current.trim());
|
|
82
|
+
}
|
|
83
|
+
return parts;
|
|
84
|
+
};
|
|
85
|
+
var parseTransition = function parseTransition(value) {
|
|
86
|
+
var parts = tokenizeShorthand(value.trim());
|
|
87
|
+
var result = {};
|
|
88
|
+
var durationCount = 0;
|
|
89
|
+
var _iterator2 = _createForOfIteratorHelper(parts),
|
|
90
|
+
_step2;
|
|
91
|
+
try {
|
|
92
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
93
|
+
var part = _step2.value;
|
|
94
|
+
if (isDuration(part)) {
|
|
95
|
+
if (durationCount === 0) {
|
|
96
|
+
result.transitionDuration = part;
|
|
97
|
+
} else {
|
|
98
|
+
result.transitionDelay = part;
|
|
99
|
+
}
|
|
100
|
+
durationCount++;
|
|
101
|
+
} else if (isEasing(part)) {
|
|
102
|
+
result.transitionTimingFunction = part;
|
|
103
|
+
} else {
|
|
104
|
+
result.transitionProperty = part;
|
|
105
|
+
}
|
|
106
|
+
}
|
|
107
|
+
} catch (err) {
|
|
108
|
+
_iterator2.e(err);
|
|
109
|
+
} finally {
|
|
110
|
+
_iterator2.f();
|
|
111
|
+
}
|
|
112
|
+
return result;
|
|
113
|
+
};
|
|
114
|
+
var parseAnimation = function parseAnimation(value) {
|
|
115
|
+
var parts = tokenizeShorthand(value.trim());
|
|
116
|
+
var result = {};
|
|
117
|
+
var durationCount = 0;
|
|
118
|
+
var _iterator3 = _createForOfIteratorHelper(parts),
|
|
119
|
+
_step3;
|
|
120
|
+
try {
|
|
121
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
122
|
+
var part = _step3.value;
|
|
123
|
+
if (isDuration(part)) {
|
|
124
|
+
if (durationCount === 0) {
|
|
125
|
+
result.animationDuration = part;
|
|
126
|
+
} else {
|
|
127
|
+
result.animationDelay = part;
|
|
128
|
+
}
|
|
129
|
+
durationCount++;
|
|
130
|
+
} else if (isEasing(part)) {
|
|
131
|
+
result.animationTimingFunction = part;
|
|
132
|
+
} else if (part === 'infinite' || /^\d+(\.\d+)?$/.test(part)) {
|
|
133
|
+
result.animationIterationCount = part;
|
|
134
|
+
} else if (['normal', 'reverse', 'alternate', 'alternate-reverse'].includes(part)) {
|
|
135
|
+
result.animationDirection = part;
|
|
136
|
+
} else if (['none', 'forwards', 'backwards', 'both'].includes(part)) {
|
|
137
|
+
result.animationFillMode = part;
|
|
138
|
+
} else if (['running', 'paused'].includes(part)) {
|
|
139
|
+
result.animationPlayState = part;
|
|
140
|
+
} else {
|
|
141
|
+
result.animationName = part;
|
|
142
|
+
}
|
|
143
|
+
}
|
|
144
|
+
} catch (err) {
|
|
145
|
+
_iterator3.e(err);
|
|
146
|
+
} finally {
|
|
147
|
+
_iterator3.f();
|
|
148
|
+
}
|
|
149
|
+
return result;
|
|
150
|
+
};
|
|
151
|
+
|
|
152
|
+
// Combine sub-property values across comma-separated transitions/animations.
|
|
153
|
+
// If no segment explicitly set this sub-property, omit it entirely.
|
|
154
|
+
// Otherwise, fill missing slots with the CSS spec default to preserve positional alignment.
|
|
155
|
+
var combineSubPropertyValues = function combineSubPropertyValues(segments, subProperty, defaultValue) {
|
|
156
|
+
if (segments.every(function (s) {
|
|
157
|
+
return s[subProperty] === undefined;
|
|
158
|
+
})) {
|
|
159
|
+
return undefined;
|
|
160
|
+
}
|
|
161
|
+
return segments.map(function (s) {
|
|
162
|
+
var _s$subProperty;
|
|
163
|
+
return (_s$subProperty = s[subProperty]) !== null && _s$subProperty !== void 0 ? _s$subProperty : defaultValue;
|
|
164
|
+
}).join(', ');
|
|
165
|
+
};
|
|
166
|
+
var buildTransitionFix = function buildTransitionFix(segments, indent) {
|
|
167
|
+
var lines = [];
|
|
168
|
+
var property = combineSubPropertyValues(segments, 'transitionProperty', 'all');
|
|
169
|
+
var duration = combineSubPropertyValues(segments, 'transitionDuration', '0s');
|
|
170
|
+
var timing = combineSubPropertyValues(segments, 'transitionTimingFunction', 'ease');
|
|
171
|
+
var delay = combineSubPropertyValues(segments, 'transitionDelay', '0s');
|
|
172
|
+
if (property !== undefined) lines.push("transitionProperty: '".concat(property, "'"));
|
|
173
|
+
if (duration !== undefined) lines.push("transitionDuration: '".concat(duration, "'"));
|
|
174
|
+
if (timing !== undefined) lines.push("transitionTimingFunction: '".concat(timing, "'"));
|
|
175
|
+
if (delay !== undefined) lines.push("transitionDelay: '".concat(delay, "'"));
|
|
176
|
+
return lines.join(",\n".concat(indent));
|
|
177
|
+
};
|
|
178
|
+
var buildAnimationFix = function buildAnimationFix(segments, indent) {
|
|
179
|
+
var lines = [];
|
|
180
|
+
var name = combineSubPropertyValues(segments, 'animationName', 'none');
|
|
181
|
+
var duration = combineSubPropertyValues(segments, 'animationDuration', '0s');
|
|
182
|
+
var timing = combineSubPropertyValues(segments, 'animationTimingFunction', 'ease');
|
|
183
|
+
var delay = combineSubPropertyValues(segments, 'animationDelay', '0s');
|
|
184
|
+
var iter = combineSubPropertyValues(segments, 'animationIterationCount', '1');
|
|
185
|
+
var direction = combineSubPropertyValues(segments, 'animationDirection', 'normal');
|
|
186
|
+
var fill = combineSubPropertyValues(segments, 'animationFillMode', 'none');
|
|
187
|
+
var playState = combineSubPropertyValues(segments, 'animationPlayState', 'running');
|
|
188
|
+
if (name !== undefined) lines.push("animationName: '".concat(name, "'"));
|
|
189
|
+
if (duration !== undefined) lines.push("animationDuration: '".concat(duration, "'"));
|
|
190
|
+
if (timing !== undefined) lines.push("animationTimingFunction: '".concat(timing, "'"));
|
|
191
|
+
if (delay !== undefined) lines.push("animationDelay: '".concat(delay, "'"));
|
|
192
|
+
if (iter !== undefined) lines.push("animationIterationCount: '".concat(iter, "'"));
|
|
193
|
+
if (direction !== undefined) lines.push("animationDirection: '".concat(direction, "'"));
|
|
194
|
+
if (fill !== undefined) lines.push("animationFillMode: '".concat(fill, "'"));
|
|
195
|
+
if (playState !== undefined) lines.push("animationPlayState: '".concat(playState, "'"));
|
|
196
|
+
return lines.join(",\n".concat(indent));
|
|
197
|
+
};
|
|
198
|
+
var TRANSITION_SUB_PROPERTIES = ['transitionProperty', 'transitionDuration', 'transitionTimingFunction', 'transitionDelay'];
|
|
199
|
+
var ANIMATION_SUB_PROPERTIES = ['animationName', 'animationDuration', 'animationTimingFunction', 'animationDelay', 'animationIterationCount', 'animationDirection', 'animationFillMode', 'animationPlayState'];
|
|
200
|
+
var executeExpandTransitionRule = function executeExpandTransitionRule(context, node, property) {
|
|
201
|
+
var _context$sourceCode, _node$loc;
|
|
202
|
+
if (node.value.type === 'CallExpression') {
|
|
203
|
+
return;
|
|
204
|
+
}
|
|
205
|
+
if (node.value.type === 'TemplateLiteral') {
|
|
206
|
+
return;
|
|
207
|
+
}
|
|
208
|
+
if (node.value.type !== 'Literal' || typeof node.value.value !== 'string') {
|
|
209
|
+
return;
|
|
210
|
+
}
|
|
211
|
+
var rawValue = node.value.value;
|
|
212
|
+
if (KEYWORD_VALUES.includes(rawValue)) {
|
|
213
|
+
return;
|
|
214
|
+
}
|
|
215
|
+
var subProperties = property === 'transition' ? TRANSITION_SUB_PROPERTIES : ANIMATION_SUB_PROPERTIES;
|
|
216
|
+
|
|
217
|
+
// Extract leading whitespace to preserve indentation style (tabs vs spaces)
|
|
218
|
+
var sourceCode = (_context$sourceCode = context.sourceCode) !== null && _context$sourceCode !== void 0 ? _context$sourceCode : context.getSourceCode();
|
|
219
|
+
var nodeStart = (_node$loc = node.loc) === null || _node$loc === void 0 ? void 0 : _node$loc.start;
|
|
220
|
+
var indent = '\t';
|
|
221
|
+
if (nodeStart) {
|
|
222
|
+
var _sourceCode$lines;
|
|
223
|
+
var lineText = (_sourceCode$lines = sourceCode.lines[nodeStart.line - 1]) !== null && _sourceCode$lines !== void 0 ? _sourceCode$lines : '';
|
|
224
|
+
var leadingWhitespace = lineText.match(/^(\s*)/);
|
|
225
|
+
if (leadingWhitespace) {
|
|
226
|
+
indent = leadingWhitespace[1];
|
|
227
|
+
}
|
|
228
|
+
}
|
|
229
|
+
var segmentStrings = splitOnTopLevelCommas(rawValue);
|
|
230
|
+
if (property === 'transition') {
|
|
231
|
+
var segments = segmentStrings.map(parseTransition);
|
|
232
|
+
var fixText = buildTransitionFix(segments, indent);
|
|
233
|
+
context.report({
|
|
234
|
+
node: node,
|
|
235
|
+
messageId: 'expandTransitionShorthand',
|
|
236
|
+
data: {
|
|
237
|
+
property: property,
|
|
238
|
+
subProperties: subProperties.join(', ')
|
|
239
|
+
},
|
|
240
|
+
fix: function fix(fixer) {
|
|
241
|
+
return fixer.replaceText(node, fixText);
|
|
242
|
+
}
|
|
243
|
+
});
|
|
244
|
+
} else {
|
|
245
|
+
var _segments = segmentStrings.map(parseAnimation);
|
|
246
|
+
var _fixText = buildAnimationFix(_segments, indent);
|
|
247
|
+
context.report({
|
|
248
|
+
node: node,
|
|
249
|
+
messageId: 'expandTransitionShorthand',
|
|
250
|
+
data: {
|
|
251
|
+
property: property,
|
|
252
|
+
subProperties: subProperties.join(', ')
|
|
253
|
+
},
|
|
254
|
+
fix: function fix(fixer) {
|
|
255
|
+
return fixer.replaceText(node, _fixText);
|
|
256
|
+
}
|
|
257
|
+
});
|
|
258
|
+
}
|
|
259
|
+
};
|
|
260
|
+
var rule = (0, _createLintRule.createLintRule)({
|
|
261
|
+
meta: {
|
|
262
|
+
name: 'expand-motion-shorthand',
|
|
263
|
+
type: 'suggestion',
|
|
264
|
+
fixable: 'code',
|
|
265
|
+
docs: {
|
|
266
|
+
description: 'Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens.',
|
|
267
|
+
recommended: false,
|
|
268
|
+
severity: 'warn'
|
|
269
|
+
},
|
|
270
|
+
messages: {
|
|
271
|
+
expandTransitionShorthand: "Use {{ subProperties }} instead of the '{{ property }}' shorthand so that individual values can be replaced with motion tokens."
|
|
272
|
+
}
|
|
273
|
+
},
|
|
274
|
+
create: function create(context) {
|
|
275
|
+
return {
|
|
276
|
+
'Property[key.name="transition"]': function PropertyKeyNameTransition(node) {
|
|
277
|
+
executeExpandTransitionRule(context, node, 'transition');
|
|
278
|
+
},
|
|
279
|
+
'Property[key.name="animation"]': function PropertyKeyNameAnimation(node) {
|
|
280
|
+
executeExpandTransitionRule(context, node, 'animation');
|
|
281
|
+
}
|
|
282
|
+
};
|
|
283
|
+
}
|
|
284
|
+
});
|
|
285
|
+
var _default = exports.default = rule;
|
|
@@ -12,10 +12,10 @@ var _ensureDesignTokenUsage = _interopRequireDefault(require("./ensure-design-to
|
|
|
12
12
|
var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-design-token-usage-preview"));
|
|
13
13
|
var _ensureIconColor = _interopRequireDefault(require("./ensure-icon-color"));
|
|
14
14
|
var _ensureProperXcssUsage = _interopRequireDefault(require("./ensure-proper-xcss-usage"));
|
|
15
|
+
var _expandMotionShorthand = _interopRequireDefault(require("./expand-motion-shorthand"));
|
|
15
16
|
var _iconLabel = _interopRequireDefault(require("./icon-label"));
|
|
16
17
|
var _lozengeBadgeTagLabellingSystemMigration = _interopRequireDefault(require("./lozenge-badge-tag-labelling-system-migration"));
|
|
17
18
|
var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
|
|
18
|
-
var _noBooleanAutofocusOnModalDialog = _interopRequireDefault(require("./no-boolean-autofocus-on-modal-dialog"));
|
|
19
19
|
var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
|
|
20
20
|
var _noDarkThemeVrTests = _interopRequireDefault(require("./no-dark-theme-vr-tests"));
|
|
21
21
|
var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
|
|
@@ -86,7 +86,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
|
|
|
86
86
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
87
87
|
/**
|
|
88
88
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
89
|
-
* @codegen <<SignedSource::
|
|
89
|
+
* @codegen <<SignedSource::56038bd879a1d1c73de3addd961ade97>>
|
|
90
90
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
91
91
|
*/
|
|
92
92
|
|
|
@@ -98,10 +98,10 @@ var rules = exports.rules = {
|
|
|
98
98
|
'ensure-design-token-usage/preview': _ensureDesignTokenUsagePreview.default,
|
|
99
99
|
'ensure-icon-color': _ensureIconColor.default,
|
|
100
100
|
'ensure-proper-xcss-usage': _ensureProperXcssUsage.default,
|
|
101
|
+
'expand-motion-shorthand': _expandMotionShorthand.default,
|
|
101
102
|
'icon-label': _iconLabel.default,
|
|
102
103
|
'lozenge-badge-tag-labelling-system-migration': _lozengeBadgeTagLabellingSystemMigration.default,
|
|
103
104
|
'no-banned-imports': _noBannedImports.default,
|
|
104
|
-
'no-boolean-autofocus-on-modal-dialog': _noBooleanAutofocusOnModalDialog.default,
|
|
105
105
|
'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
|
|
106
106
|
'no-dark-theme-vr-tests': _noDarkThemeVrTests.default,
|
|
107
107
|
'no-deprecated-apis': _noDeprecatedApis.default,
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::22c8677c3fc921ba33acd505671124a2>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -15,10 +15,10 @@ const rules = {
|
|
|
15
15
|
'@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
|
|
16
16
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
17
17
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
18
|
+
'@atlaskit/design-system/expand-motion-shorthand': 'warn',
|
|
18
19
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
19
20
|
'@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
|
|
20
21
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
21
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
22
22
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
23
23
|
'@atlaskit/design-system/no-dark-theme-vr-tests': 'error',
|
|
24
24
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::2e8702ed4d2cd2902fed7fc5a895ea6e>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -14,10 +14,10 @@ const rules = {
|
|
|
14
14
|
'@atlaskit/design-system/ensure-design-token-usage/preview': 'warn',
|
|
15
15
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
16
16
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
17
|
+
'@atlaskit/design-system/expand-motion-shorthand': 'warn',
|
|
17
18
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
18
19
|
'@atlaskit/design-system/lozenge-badge-tag-labelling-system-migration': 'warn',
|
|
19
20
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
20
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-css-tagged-template-expression': 'error',
|
|
22
22
|
'@atlaskit/design-system/no-dark-theme-vr-tests': 'error',
|
|
23
23
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::753093c364736633c291ea7cd16fbb92>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -13,7 +13,6 @@ const rules = {
|
|
|
13
13
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
14
14
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
15
15
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
16
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
17
16
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
18
17
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
19
18
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
|
-
* @codegen <<SignedSource::
|
|
3
|
+
* @codegen <<SignedSource::7cae0a4365766a3c1b06c8ab29cc7711>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -12,7 +12,6 @@ const rules = {
|
|
|
12
12
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
13
13
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
14
14
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
15
|
-
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
16
15
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
17
16
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
18
17
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|