@atlaskit/eslint-plugin-design-system 10.4.5 → 10.6.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 +16 -0
- package/README.md +2 -0
- package/constellation/index/usage.mdx +2 -0
- package/constellation/no-legacy-icons/usage.mdx +42 -0
- package/constellation/use-menu-section-title/usage.mdx +55 -0
- package/dist/cjs/presets/all.codegen.js +3 -1
- package/dist/cjs/presets/recommended.codegen.js +2 -1
- package/dist/cjs/rules/index.codegen.js +5 -1
- package/dist/cjs/rules/no-legacy-icons/index.js +174 -0
- package/dist/cjs/rules/use-menu-section-title/index.js +85 -0
- package/dist/es2019/presets/all.codegen.js +3 -1
- package/dist/es2019/presets/recommended.codegen.js +2 -1
- package/dist/es2019/rules/index.codegen.js +5 -1
- package/dist/es2019/rules/no-legacy-icons/index.js +133 -0
- package/dist/es2019/rules/use-menu-section-title/index.js +79 -0
- package/dist/esm/presets/all.codegen.js +3 -1
- package/dist/esm/presets/recommended.codegen.js +2 -1
- package/dist/esm/rules/index.codegen.js +5 -1
- package/dist/esm/rules/no-legacy-icons/index.js +168 -0
- package/dist/esm/rules/use-menu-section-title/index.js +79 -0
- package/dist/types/index.codegen.d.ts +3 -0
- package/dist/types/presets/all.codegen.d.ts +3 -1
- package/dist/types/presets/recommended.codegen.d.ts +2 -1
- package/dist/types/rules/index.codegen.d.ts +2 -0
- package/dist/types/rules/no-legacy-icons/index.d.ts +2 -0
- package/dist/types/rules/use-menu-section-title/index.d.ts +3 -0
- package/dist/types-ts4.5/index.codegen.d.ts +3 -0
- package/dist/types-ts4.5/presets/all.codegen.d.ts +3 -1
- package/dist/types-ts4.5/presets/recommended.codegen.d.ts +2 -1
- package/dist/types-ts4.5/rules/index.codegen.d.ts +2 -0
- package/dist/types-ts4.5/rules/no-legacy-icons/index.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-menu-section-title/index.d.ts +3 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 10.6.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#99829](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/99829)
|
|
8
|
+
[`f15d4f35b8f6`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f15d4f35b8f6) -
|
|
9
|
+
Add `use-menu-section-title` eslint rule.
|
|
10
|
+
|
|
11
|
+
## 10.5.0
|
|
12
|
+
|
|
13
|
+
### Minor Changes
|
|
14
|
+
|
|
15
|
+
- [#105106](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/105106)
|
|
16
|
+
[`c1ef7e00be9d`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c1ef7e00be9d) -
|
|
17
|
+
Introduces new ESLint rule to identify and discourage use of legacy icons.
|
|
18
|
+
|
|
3
19
|
## 10.4.5
|
|
4
20
|
|
|
5
21
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -66,6 +66,7 @@ module.exports = {
|
|
|
66
66
|
| <a href="./src/rules/no-html-button/README.md">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |
|
|
67
67
|
| <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | |
|
|
68
68
|
| <a href="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
69
|
+
| <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a> | Enforces no legacy icons are used. | | | |
|
|
69
70
|
| <a href="./src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
|
|
70
71
|
| <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
|
|
71
72
|
| <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
|
|
@@ -80,6 +81,7 @@ module.exports = {
|
|
|
80
81
|
| <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
|
|
81
82
|
| <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
|
|
82
83
|
| <a href="./src/rules/use-latest-xcss-syntax/README.md">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |
|
|
84
|
+
| <a href="./src/rules/use-menu-section-title/README.md">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |
|
|
83
85
|
| <a href="./src/rules/use-popup-label/README.md">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
|
|
84
86
|
| <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
85
87
|
| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
@@ -29,6 +29,7 @@ This plugin contains rules that should be used when working with the
|
|
|
29
29
|
| <a href="/components/eslint-plugin-design-system/no-html-button/usage">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |
|
|
30
30
|
| <a href="/components/eslint-plugin-design-system/no-invalid-css-map/usage">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | |
|
|
31
31
|
| <a href="/components/eslint-plugin-design-system/no-keyframes-tagged-template-expression/usage">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
32
|
+
| <a href="/components/eslint-plugin-design-system/no-legacy-icons/usage">no-legacy-icons</a> | Enforces no legacy icons are used. | | | |
|
|
32
33
|
| <a href="/components/eslint-plugin-design-system/no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
|
|
33
34
|
| <a href="/components/eslint-plugin-design-system/no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
|
|
34
35
|
| <a href="/components/eslint-plugin-design-system/no-physical-properties/usage">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
|
|
@@ -43,6 +44,7 @@ This plugin contains rules that should be used when working with the
|
|
|
43
44
|
| <a href="/components/eslint-plugin-design-system/use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
|
|
44
45
|
| <a href="/components/eslint-plugin-design-system/use-href-in-link-item/usage">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
|
|
45
46
|
| <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |
|
|
47
|
+
| <a href="/components/eslint-plugin-design-system/use-menu-section-title/usage">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |
|
|
46
48
|
| <a href="/components/eslint-plugin-design-system/use-popup-label/usage">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
|
|
47
49
|
| <a href="/components/eslint-plugin-design-system/use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
48
50
|
| <a href="/components/eslint-plugin-design-system/use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
@@ -0,0 +1,42 @@
|
|
|
1
|
+
# no-legacy-icons
|
|
2
|
+
|
|
3
|
+
Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
|
|
4
|
+
more consistent padding and spacing.
|
|
5
|
+
|
|
6
|
+
The new icon components allows your components to align with the new visual language - either by
|
|
7
|
+
default, or when enabled via a feature flag.
|
|
8
|
+
|
|
9
|
+
## Examples
|
|
10
|
+
|
|
11
|
+
This rule identifies usages of legacy icons from `@atlaskit/icon/glyph` and `@atlaskit/icon-object`,
|
|
12
|
+
that aren't yet migrated to the new icon API. Legacy icons are only permitted when passed into a new
|
|
13
|
+
"core" or "utility" icon from `@atlaskit/icon` or `@atlassian/icon-lab`, via the
|
|
14
|
+
`LEGACY_fallbackIcon` prop.
|
|
15
|
+
|
|
16
|
+
### Incorrect
|
|
17
|
+
|
|
18
|
+
```js
|
|
19
|
+
import ActivityIcon from '@atlaskit/icon/glyph/activity'
|
|
20
|
+
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^ legacy icon import
|
|
21
|
+
|
|
22
|
+
import { IconButton } from '@atlaskit/button/new'
|
|
23
|
+
|
|
24
|
+
<ActivityIcon label="Activity">
|
|
25
|
+
^^^^^^^^^^^^^^^^^^^^^^^ legacy icon
|
|
26
|
+
|
|
27
|
+
<IconButton icon={ActivityIcon} label="Activity"/>
|
|
28
|
+
^^^^^^^^^^^^^ legacy icon
|
|
29
|
+
```
|
|
30
|
+
|
|
31
|
+
### Correct
|
|
32
|
+
|
|
33
|
+
```js
|
|
34
|
+
import AddIcon from '@atlaskit/icon/core/add';
|
|
35
|
+
import { IconButton } from '@atlaskit/button/new';
|
|
36
|
+
|
|
37
|
+
<AddIcon label="" />;
|
|
38
|
+
<IconButton
|
|
39
|
+
icon={(iconProps) => <AddIcon LEGACY_fallbackIcon={AddIconLegacy} {...iconProps} />}
|
|
40
|
+
label="Add to Cart"
|
|
41
|
+
/>;
|
|
42
|
+
```
|
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
# use-menu-section-title
|
|
2
|
+
|
|
3
|
+
Section should have an accessible title or a reference to it, so that users of assistive
|
|
4
|
+
technologies could have contextual information of interaction with current element.
|
|
5
|
+
|
|
6
|
+
## Examples
|
|
7
|
+
|
|
8
|
+
This rule will indicate user with warning to strongly recommend usage of either `title` or `titleId`
|
|
9
|
+
prop.
|
|
10
|
+
|
|
11
|
+
### Incorrect
|
|
12
|
+
|
|
13
|
+
```tsx
|
|
14
|
+
<Section>
|
|
15
|
+
^^^^^^ Missing either `title` or `titleId` prop.
|
|
16
|
+
Section content
|
|
17
|
+
</Section>
|
|
18
|
+
|
|
19
|
+
<Section title>
|
|
20
|
+
^^^^^ `title` prop is missing value.
|
|
21
|
+
Section content
|
|
22
|
+
</Section>
|
|
23
|
+
|
|
24
|
+
<Section title="">
|
|
25
|
+
^^^^^ `title` prop is missing accessible name value.
|
|
26
|
+
Section content
|
|
27
|
+
</Section>
|
|
28
|
+
|
|
29
|
+
<Section titleId>
|
|
30
|
+
^^^^^^^ `titleId` prop is missing reference value.
|
|
31
|
+
<h1 id="section-title">Section content title</hi>
|
|
32
|
+
</Section>
|
|
33
|
+
|
|
34
|
+
<Section titleId="">
|
|
35
|
+
^^^^^^^ `titleId` prop is missing reference value.
|
|
36
|
+
<h1 id="section-title">Section content title</hi>
|
|
37
|
+
</Section>
|
|
38
|
+
|
|
39
|
+
<Section titleId="section-title" title="Accessible title">
|
|
40
|
+
^^^^^^^ ^^^^^ Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.
|
|
41
|
+
<h1 id="section-title">Section content title</hi>
|
|
42
|
+
</Section>
|
|
43
|
+
```
|
|
44
|
+
|
|
45
|
+
### Correct
|
|
46
|
+
|
|
47
|
+
```tsx
|
|
48
|
+
<Section title="Section content title">
|
|
49
|
+
Section content
|
|
50
|
+
</Section>
|
|
51
|
+
|
|
52
|
+
<Section titleId="section-title">
|
|
53
|
+
<h1 id="section-title">Section content title</hi>
|
|
54
|
+
</Section>
|
|
55
|
+
```
|
|
@@ -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::837556032f39113ae86785a120bb9ccb>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
var _default = exports.default = {
|
|
@@ -29,6 +29,7 @@ var _default = exports.default = {
|
|
|
29
29
|
'@atlaskit/design-system/no-html-button': 'warn',
|
|
30
30
|
'@atlaskit/design-system/no-invalid-css-map': 'error',
|
|
31
31
|
'@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
|
|
32
|
+
'@atlaskit/design-system/no-legacy-icons': 'warn',
|
|
32
33
|
'@atlaskit/design-system/no-margin': 'warn',
|
|
33
34
|
'@atlaskit/design-system/no-nested-styles': 'error',
|
|
34
35
|
'@atlaskit/design-system/no-physical-properties': 'error',
|
|
@@ -43,6 +44,7 @@ var _default = exports.default = {
|
|
|
43
44
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
44
45
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
45
46
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
47
|
+
'@atlaskit/design-system/use-menu-section-title': 'warn',
|
|
46
48
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
47
49
|
'@atlaskit/design-system/use-primitives': 'warn',
|
|
48
50
|
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
@@ -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::b7ed527a03208f0bc68f9d34e4ef2260>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
var _default = exports.default = {
|
|
@@ -34,6 +34,7 @@ var _default = exports.default = {
|
|
|
34
34
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
35
35
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
36
36
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
37
|
+
'@atlaskit/design-system/use-menu-section-title': 'warn',
|
|
37
38
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
38
39
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
39
40
|
}
|
|
@@ -22,6 +22,7 @@ var _noHtmlAnchor = _interopRequireDefault(require("./no-html-anchor"));
|
|
|
22
22
|
var _noHtmlButton = _interopRequireDefault(require("./no-html-button"));
|
|
23
23
|
var _noInvalidCssMap = _interopRequireDefault(require("./no-invalid-css-map"));
|
|
24
24
|
var _noKeyframesTaggedTemplateExpression = _interopRequireDefault(require("./no-keyframes-tagged-template-expression"));
|
|
25
|
+
var _noLegacyIcons = _interopRequireDefault(require("./no-legacy-icons"));
|
|
25
26
|
var _noMargin = _interopRequireDefault(require("./no-margin"));
|
|
26
27
|
var _noNestedStyles = _interopRequireDefault(require("./no-nested-styles"));
|
|
27
28
|
var _noPhysicalProperties = _interopRequireDefault(require("./no-physical-properties"));
|
|
@@ -36,6 +37,7 @@ var _useHeading = _interopRequireDefault(require("./use-heading"));
|
|
|
36
37
|
var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
|
|
37
38
|
var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
|
|
38
39
|
var _useLatestXcssSyntax = _interopRequireDefault(require("./use-latest-xcss-syntax"));
|
|
40
|
+
var _useMenuSectionTitle = _interopRequireDefault(require("./use-menu-section-title"));
|
|
39
41
|
var _usePopupLabel = _interopRequireDefault(require("./use-popup-label"));
|
|
40
42
|
var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
|
|
41
43
|
var _usePrimitivesText = _interopRequireDefault(require("./use-primitives-text"));
|
|
@@ -44,7 +46,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
|
|
|
44
46
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
45
47
|
/**
|
|
46
48
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
47
|
-
* @codegen <<SignedSource::
|
|
49
|
+
* @codegen <<SignedSource::287628b11d396c2bcbcf6f4a175a3d3a>>
|
|
48
50
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
49
51
|
*/
|
|
50
52
|
var _default = exports.default = {
|
|
@@ -65,6 +67,7 @@ var _default = exports.default = {
|
|
|
65
67
|
'no-html-button': _noHtmlButton.default,
|
|
66
68
|
'no-invalid-css-map': _noInvalidCssMap.default,
|
|
67
69
|
'no-keyframes-tagged-template-expression': _noKeyframesTaggedTemplateExpression.default,
|
|
70
|
+
'no-legacy-icons': _noLegacyIcons.default,
|
|
68
71
|
'no-margin': _noMargin.default,
|
|
69
72
|
'no-nested-styles': _noNestedStyles.default,
|
|
70
73
|
'no-physical-properties': _noPhysicalProperties.default,
|
|
@@ -79,6 +82,7 @@ var _default = exports.default = {
|
|
|
79
82
|
'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
|
|
80
83
|
'use-href-in-link-item': _useHrefInLinkItem.default,
|
|
81
84
|
'use-latest-xcss-syntax': _useLatestXcssSyntax.default,
|
|
85
|
+
'use-menu-section-title': _useMenuSectionTitle.default,
|
|
82
86
|
'use-popup-label': _usePopupLabel.default,
|
|
83
87
|
'use-primitives': _usePrimitives.default,
|
|
84
88
|
'use-primitives-text': _usePrimitivesText.default,
|
|
@@ -0,0 +1,174 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
var _createRule = require("../utils/create-rule");
|
|
9
|
+
function _createForOfIteratorHelper(o, allowArrayLike) { var it = typeof Symbol !== "undefined" && o[Symbol.iterator] || o["@@iterator"]; if (!it) { if (Array.isArray(o) || (it = _unsupportedIterableToArray(o)) || allowArrayLike && o && typeof o.length === "number") { if (it) o = it; var i = 0; var F = function F() {}; return { s: F, n: function n() { if (i >= o.length) return { done: true }; return { done: false, value: o[i++] }; }, e: function e(_e) { throw _e; }, 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 normalCompletion = true, didErr = false, err; return { s: function s() { it = it.call(o); }, n: function n() { var step = it.next(); normalCompletion = step.done; return step; }, e: function e(_e2) { didErr = true; err = _e2; }, f: function f() { try { if (!normalCompletion && it.return != null) it.return(); } finally { if (didErr) throw err; } } }; }
|
|
10
|
+
function _unsupportedIterableToArray(o, minLen) { if (!o) return; if (typeof o === "string") return _arrayLikeToArray(o, minLen); var n = Object.prototype.toString.call(o).slice(8, -1); if (n === "Object" && o.constructor) n = o.constructor.name; if (n === "Map" || n === "Set") return Array.from(o); if (n === "Arguments" || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(n)) return _arrayLikeToArray(o, minLen); }
|
|
11
|
+
function _arrayLikeToArray(arr, len) { if (len == null || len > arr.length) len = arr.length; for (var i = 0, arr2 = new Array(len); i < len; i++) arr2[i] = arr[i]; return arr2; }
|
|
12
|
+
var rule = (0, _createRule.createLintRule)({
|
|
13
|
+
meta: {
|
|
14
|
+
name: 'no-legacy-icons',
|
|
15
|
+
type: 'problem',
|
|
16
|
+
docs: {
|
|
17
|
+
description: 'Enforces no legacy icons are used.',
|
|
18
|
+
recommended: false,
|
|
19
|
+
severity: 'warn'
|
|
20
|
+
},
|
|
21
|
+
messages: {
|
|
22
|
+
noLegacyIcons: "Legacy icon '{{iconName}}', is being rendered from import '{{importSource}}'. Migrate to an icon from '@atlaskit/icon/(core|utility)', or '@atlaskit/icon-labs/(core|utility)'.\nLearn more in our [code migration guide](https://hello.atlassian.net/wiki/spaces/DST/pages/3748692796/New+ADS+iconography+-+Code+migration+guide)."
|
|
23
|
+
}
|
|
24
|
+
},
|
|
25
|
+
create: function create(context) {
|
|
26
|
+
var legacyIconImports = {};
|
|
27
|
+
return {
|
|
28
|
+
ImportDeclaration: function ImportDeclaration(node) {
|
|
29
|
+
var moduleSource = node.source.value;
|
|
30
|
+
if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(function (val) {
|
|
31
|
+
return moduleSource.startsWith(val);
|
|
32
|
+
}) && node.specifiers.length) {
|
|
33
|
+
var defaultImport = node.specifiers.find(function (spec) {
|
|
34
|
+
return spec.type === 'ImportDefaultSpecifier';
|
|
35
|
+
});
|
|
36
|
+
if (!defaultImport) {
|
|
37
|
+
return;
|
|
38
|
+
}
|
|
39
|
+
var defaultImportName = defaultImport.local.name;
|
|
40
|
+
legacyIconImports[defaultImportName] = moduleSource;
|
|
41
|
+
}
|
|
42
|
+
},
|
|
43
|
+
VariableDeclaration: function VariableDeclaration(node) {
|
|
44
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(node, 'VariableDeclaration')) {
|
|
45
|
+
var _iterator = _createForOfIteratorHelper(node.declarations),
|
|
46
|
+
_step;
|
|
47
|
+
try {
|
|
48
|
+
for (_iterator.s(); !(_step = _iterator.n()).done;) {
|
|
49
|
+
var decl = _step.value;
|
|
50
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(decl, 'VariableDeclarator') && 'init' in decl && 'id' in decl && decl.init && decl.id && 'name' in decl.id && decl.id.name && (0, _eslintCodemodUtils.isNodeOfType)(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
|
|
51
|
+
legacyIconImports[decl.id.name] = legacyIconImports[decl.init.name];
|
|
52
|
+
}
|
|
53
|
+
}
|
|
54
|
+
} catch (err) {
|
|
55
|
+
_iterator.e(err);
|
|
56
|
+
} finally {
|
|
57
|
+
_iterator.f();
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
},
|
|
61
|
+
ExportDefaultDeclaration: function ExportDefaultDeclaration(node) {
|
|
62
|
+
if ('declaration' in node && node.declaration && (0, _eslintCodemodUtils.isNodeOfType)(node.declaration, 'Identifier') && node.declaration.name in legacyIconImports) {
|
|
63
|
+
context.report({
|
|
64
|
+
node: node,
|
|
65
|
+
messageId: 'noLegacyIcons',
|
|
66
|
+
data: {
|
|
67
|
+
importSource: legacyIconImports[node.declaration.name],
|
|
68
|
+
iconName: node.declaration.name
|
|
69
|
+
}
|
|
70
|
+
});
|
|
71
|
+
}
|
|
72
|
+
},
|
|
73
|
+
ExportNamedDeclaration: function ExportNamedDeclaration(node) {
|
|
74
|
+
if ('source' in node && node.source && (0, _eslintCodemodUtils.isNodeOfType)(node.source, 'Literal') && 'value' in node.source) {
|
|
75
|
+
var moduleSource = node.source.value;
|
|
76
|
+
if (typeof moduleSource === 'string' && ['@atlaskit/icon/glyph/', '@atlaskit/icon-object/glyph/'].find(function (val) {
|
|
77
|
+
return moduleSource.startsWith(val);
|
|
78
|
+
}) && node.specifiers.length) {
|
|
79
|
+
context.report({
|
|
80
|
+
node: node,
|
|
81
|
+
messageId: 'noLegacyIcons',
|
|
82
|
+
data: {
|
|
83
|
+
importSource: moduleSource,
|
|
84
|
+
iconName: node.specifiers[0].exported.name
|
|
85
|
+
}
|
|
86
|
+
});
|
|
87
|
+
}
|
|
88
|
+
} else if ('declaration' in node && node.declaration && (0, _eslintCodemodUtils.isNodeOfType)(node.declaration, 'VariableDeclaration')) {
|
|
89
|
+
var _iterator2 = _createForOfIteratorHelper(node.declaration.declarations),
|
|
90
|
+
_step2;
|
|
91
|
+
try {
|
|
92
|
+
for (_iterator2.s(); !(_step2 = _iterator2.n()).done;) {
|
|
93
|
+
var decl = _step2.value;
|
|
94
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(decl, 'VariableDeclarator') && 'init' in decl && decl.init && (0, _eslintCodemodUtils.isNodeOfType)(decl.init, 'Identifier') && decl.init.name in legacyIconImports) {
|
|
95
|
+
context.report({
|
|
96
|
+
node: node,
|
|
97
|
+
messageId: 'noLegacyIcons',
|
|
98
|
+
data: {
|
|
99
|
+
importSource: legacyIconImports[decl.init.name],
|
|
100
|
+
iconName: decl.init.name
|
|
101
|
+
}
|
|
102
|
+
});
|
|
103
|
+
}
|
|
104
|
+
}
|
|
105
|
+
} catch (err) {
|
|
106
|
+
_iterator2.e(err);
|
|
107
|
+
} finally {
|
|
108
|
+
_iterator2.f();
|
|
109
|
+
}
|
|
110
|
+
}
|
|
111
|
+
},
|
|
112
|
+
JSXAttribute: function JSXAttribute(node) {
|
|
113
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.value, 'JSXExpressionContainer')) {
|
|
114
|
+
return;
|
|
115
|
+
}
|
|
116
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(node.value.expression, 'Identifier') && node.value.expression.name in legacyIconImports && (0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier') && !node.name.name.startsWith('LEGACY_')) {
|
|
117
|
+
context.report({
|
|
118
|
+
node: node,
|
|
119
|
+
messageId: 'noLegacyIcons',
|
|
120
|
+
data: {
|
|
121
|
+
importSource: legacyIconImports[node.value.expression.name],
|
|
122
|
+
iconName: node.value.expression.name
|
|
123
|
+
}
|
|
124
|
+
});
|
|
125
|
+
}
|
|
126
|
+
},
|
|
127
|
+
JSXElement: function JSXElement(node) {
|
|
128
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
|
|
129
|
+
return;
|
|
130
|
+
}
|
|
131
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
|
|
132
|
+
return;
|
|
133
|
+
}
|
|
134
|
+
var name = node.openingElement.name.name;
|
|
135
|
+
if (name in legacyIconImports) {
|
|
136
|
+
context.report({
|
|
137
|
+
node: node,
|
|
138
|
+
messageId: 'noLegacyIcons',
|
|
139
|
+
data: {
|
|
140
|
+
importSource: legacyIconImports[name],
|
|
141
|
+
iconName: name
|
|
142
|
+
}
|
|
143
|
+
});
|
|
144
|
+
}
|
|
145
|
+
},
|
|
146
|
+
CallExpression: function CallExpression(node) {
|
|
147
|
+
if ('arguments' in node && node.arguments.length) {
|
|
148
|
+
var _iterator3 = _createForOfIteratorHelper(node.arguments),
|
|
149
|
+
_step3;
|
|
150
|
+
try {
|
|
151
|
+
for (_iterator3.s(); !(_step3 = _iterator3.n()).done;) {
|
|
152
|
+
var arg = _step3.value;
|
|
153
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(arg, 'Identifier') && arg.name in legacyIconImports) {
|
|
154
|
+
context.report({
|
|
155
|
+
node: arg,
|
|
156
|
+
messageId: 'noLegacyIcons',
|
|
157
|
+
data: {
|
|
158
|
+
importSource: legacyIconImports[arg.name],
|
|
159
|
+
iconName: arg.name
|
|
160
|
+
}
|
|
161
|
+
});
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
} catch (err) {
|
|
165
|
+
_iterator3.e(err);
|
|
166
|
+
} finally {
|
|
167
|
+
_iterator3.f();
|
|
168
|
+
}
|
|
169
|
+
}
|
|
170
|
+
}
|
|
171
|
+
};
|
|
172
|
+
}
|
|
173
|
+
});
|
|
174
|
+
var _default = exports.default = rule;
|
|
@@ -0,0 +1,85 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.default = void 0;
|
|
7
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
var _createRule = require("../utils/create-rule");
|
|
9
|
+
// eslint-disable-next-line import/no-extraneous-dependencies
|
|
10
|
+
|
|
11
|
+
var elementsAccessibleNameProps = ['title', 'titleId'];
|
|
12
|
+
var rule = (0, _createRule.createLintRule)({
|
|
13
|
+
meta: {
|
|
14
|
+
name: 'use-menu-section-title',
|
|
15
|
+
type: 'suggestion',
|
|
16
|
+
docs: {
|
|
17
|
+
description: 'Encourages makers to provide accessible title for Atlassian Design System Menu Section component.',
|
|
18
|
+
recommended: true,
|
|
19
|
+
severity: 'warn'
|
|
20
|
+
},
|
|
21
|
+
messages: {
|
|
22
|
+
missingTitleProp: 'Missing accessible title. If there is no visible content to associate use `title` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
|
|
23
|
+
titlePropShouldHaveContents: 'Define the string that labels the interactive element.',
|
|
24
|
+
titleIdShouldHaveValue: '`titleId` should reference the id of the element that defines the accessible name.',
|
|
25
|
+
noBothPropsUsage: 'Do not include both `titleId` and `title` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `title` to provide accessible name explicitly.'
|
|
26
|
+
},
|
|
27
|
+
hasSuggestions: true
|
|
28
|
+
},
|
|
29
|
+
create: function create(context) {
|
|
30
|
+
var contextLocalIdentifier = [];
|
|
31
|
+
return {
|
|
32
|
+
ImportDeclaration: function ImportDeclaration(node) {
|
|
33
|
+
var _node$specifiers;
|
|
34
|
+
var menuSectionIdentifier = (_node$specifiers = node.specifiers) === null || _node$specifiers === void 0 ? void 0 : _node$specifiers.filter(function (spec) {
|
|
35
|
+
if (node.source.value === '@atlaskit/menu') {
|
|
36
|
+
var _spec$imported;
|
|
37
|
+
return spec.type === 'ImportSpecifier' && ((_spec$imported = spec.imported) === null || _spec$imported === void 0 ? void 0 : _spec$imported.name) === 'Section';
|
|
38
|
+
} else if (node.source.value === '@atlaskit/menu/section') {
|
|
39
|
+
return spec.type === 'ImportDefaultSpecifier';
|
|
40
|
+
}
|
|
41
|
+
});
|
|
42
|
+
if (menuSectionIdentifier !== null && menuSectionIdentifier !== void 0 && menuSectionIdentifier.length) {
|
|
43
|
+
var local = menuSectionIdentifier[0].local;
|
|
44
|
+
contextLocalIdentifier.push(local.name);
|
|
45
|
+
}
|
|
46
|
+
},
|
|
47
|
+
JSXElement: function JSXElement(node) {
|
|
48
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
|
|
49
|
+
return;
|
|
50
|
+
}
|
|
51
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
|
|
52
|
+
return;
|
|
53
|
+
}
|
|
54
|
+
var name = node.openingElement.name.name;
|
|
55
|
+
if (contextLocalIdentifier.includes(name)) {
|
|
56
|
+
var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
|
|
57
|
+
return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
|
|
58
|
+
});
|
|
59
|
+
if (componentLabelProps.length === 1) {
|
|
60
|
+
var prop = componentLabelProps[0];
|
|
61
|
+
if ('value' in prop && prop.value) {
|
|
62
|
+
if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
|
|
63
|
+
context.report({
|
|
64
|
+
node: prop,
|
|
65
|
+
messageId: prop.name.name === 'title' ? 'titlePropShouldHaveContents' : 'titleIdShouldHaveValue'
|
|
66
|
+
});
|
|
67
|
+
}
|
|
68
|
+
}
|
|
69
|
+
} else if (componentLabelProps.length > 1) {
|
|
70
|
+
context.report({
|
|
71
|
+
node: node.openingElement,
|
|
72
|
+
messageId: 'noBothPropsUsage'
|
|
73
|
+
});
|
|
74
|
+
} else {
|
|
75
|
+
context.report({
|
|
76
|
+
node: node.openingElement,
|
|
77
|
+
messageId: 'missingTitleProp'
|
|
78
|
+
});
|
|
79
|
+
}
|
|
80
|
+
}
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
}
|
|
84
|
+
});
|
|
85
|
+
var _default = exports.default = rule;
|
|
@@ -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::837556032f39113ae86785a120bb9ccb>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
export default {
|
|
@@ -23,6 +23,7 @@ export default {
|
|
|
23
23
|
'@atlaskit/design-system/no-html-button': 'warn',
|
|
24
24
|
'@atlaskit/design-system/no-invalid-css-map': 'error',
|
|
25
25
|
'@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
|
|
26
|
+
'@atlaskit/design-system/no-legacy-icons': 'warn',
|
|
26
27
|
'@atlaskit/design-system/no-margin': 'warn',
|
|
27
28
|
'@atlaskit/design-system/no-nested-styles': 'error',
|
|
28
29
|
'@atlaskit/design-system/no-physical-properties': 'error',
|
|
@@ -37,6 +38,7 @@ export default {
|
|
|
37
38
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
38
39
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
39
40
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
41
|
+
'@atlaskit/design-system/use-menu-section-title': 'warn',
|
|
40
42
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
41
43
|
'@atlaskit/design-system/use-primitives': 'warn',
|
|
42
44
|
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
@@ -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::b7ed527a03208f0bc68f9d34e4ef2260>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
export default {
|
|
@@ -28,6 +28,7 @@ export default {
|
|
|
28
28
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
29
29
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
30
30
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
31
|
+
'@atlaskit/design-system/use-menu-section-title': 'warn',
|
|
31
32
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
32
33
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
33
34
|
}
|
|
@@ -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::287628b11d396c2bcbcf6f4a175a3d3a>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
import consistentCssPropUsage from './consistent-css-prop-usage';
|
|
@@ -20,6 +20,7 @@ import noHtmlAnchor from './no-html-anchor';
|
|
|
20
20
|
import noHtmlButton from './no-html-button';
|
|
21
21
|
import noInvalidCssMap from './no-invalid-css-map';
|
|
22
22
|
import noKeyframesTaggedTemplateExpression from './no-keyframes-tagged-template-expression';
|
|
23
|
+
import noLegacyIcons from './no-legacy-icons';
|
|
23
24
|
import noMargin from './no-margin';
|
|
24
25
|
import noNestedStyles from './no-nested-styles';
|
|
25
26
|
import noPhysicalProperties from './no-physical-properties';
|
|
@@ -34,6 +35,7 @@ import useHeading from './use-heading';
|
|
|
34
35
|
import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
|
|
35
36
|
import useHrefInLinkItem from './use-href-in-link-item';
|
|
36
37
|
import useLatestXcssSyntax from './use-latest-xcss-syntax';
|
|
38
|
+
import useMenuSectionTitle from './use-menu-section-title';
|
|
37
39
|
import usePopupLabel from './use-popup-label';
|
|
38
40
|
import usePrimitives from './use-primitives';
|
|
39
41
|
import usePrimitivesText from './use-primitives-text';
|
|
@@ -58,6 +60,7 @@ export default {
|
|
|
58
60
|
'no-html-button': noHtmlButton,
|
|
59
61
|
'no-invalid-css-map': noInvalidCssMap,
|
|
60
62
|
'no-keyframes-tagged-template-expression': noKeyframesTaggedTemplateExpression,
|
|
63
|
+
'no-legacy-icons': noLegacyIcons,
|
|
61
64
|
'no-margin': noMargin,
|
|
62
65
|
'no-nested-styles': noNestedStyles,
|
|
63
66
|
'no-physical-properties': noPhysicalProperties,
|
|
@@ -72,6 +75,7 @@ export default {
|
|
|
72
75
|
'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
|
|
73
76
|
'use-href-in-link-item': useHrefInLinkItem,
|
|
74
77
|
'use-latest-xcss-syntax': useLatestXcssSyntax,
|
|
78
|
+
'use-menu-section-title': useMenuSectionTitle,
|
|
75
79
|
'use-popup-label': usePopupLabel,
|
|
76
80
|
'use-primitives': usePrimitives,
|
|
77
81
|
'use-primitives-text': usePrimitivesText,
|