@atlaskit/eslint-plugin-design-system 13.24.0 → 13.24.2
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 +71 -71
- package/dist/cjs/presets/recommended-flat.codegen.js +4 -1
- package/dist/cjs/presets/recommended.codegen.js +4 -1
- package/dist/cjs/rules/lozenge-appearance-and-isbold-migration/index.js +38 -69
- package/dist/cjs/rules/use-heading/index.js +1 -1
- package/dist/cjs/rules/use-primitives-text/index.js +1 -1
- package/dist/cjs/rules/use-tokens-typography/index.js +1 -1
- package/dist/es2019/presets/recommended-flat.codegen.js +4 -1
- package/dist/es2019/presets/recommended.codegen.js +4 -1
- package/dist/es2019/rules/lozenge-appearance-and-isbold-migration/index.js +38 -69
- package/dist/es2019/rules/use-heading/index.js +1 -1
- package/dist/es2019/rules/use-primitives-text/index.js +1 -1
- package/dist/es2019/rules/use-tokens-typography/index.js +1 -1
- package/dist/esm/presets/recommended-flat.codegen.js +4 -1
- package/dist/esm/presets/recommended.codegen.js +4 -1
- package/dist/esm/rules/lozenge-appearance-and-isbold-migration/index.js +38 -69
- package/dist/esm/rules/use-heading/index.js +1 -1
- package/dist/esm/rules/use-primitives-text/index.js +1 -1
- package/dist/esm/rules/use-tokens-typography/index.js +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/lozenge-appearance-and-isbold-migration/index.d.ts +2 -1
- package/dist/types-ts4.5/presets/recommended-flat.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/recommended.codegen.d.ts +1 -1
- package/dist/types-ts4.5/rules/lozenge-appearance-and-isbold-migration/index.d.ts +2 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,21 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 13.24.2
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`453ffbfcd89a0`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/453ffbfcd89a0) -
|
|
8
|
+
Typography lint rules `use-tokens-typography`, `use-primitives-text` and `use-heading` added to
|
|
9
|
+
recommended rules.
|
|
10
|
+
|
|
11
|
+
## 13.24.1
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- [`9e8597d0a762f`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/9e8597d0a762f) -
|
|
16
|
+
Update lozenge-appearance-and-isbold-migration rule to preserve appearance prop (no color prop
|
|
17
|
+
change)
|
|
18
|
+
|
|
3
19
|
## 13.24.0
|
|
4
20
|
|
|
5
21
|
### Minor Changes
|
package/README.md
CHANGED
|
@@ -47,76 +47,76 @@ module.exports = {
|
|
|
47
47
|
<!-- START_RULE_TABLE_CODEGEN -->
|
|
48
48
|
<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
|
|
49
49
|
|
|
50
|
-
| Rule
|
|
51
|
-
|
|
|
52
|
-
| <a href="./
|
|
53
|
-
| <a href="./
|
|
54
|
-
| <a href="./
|
|
55
|
-
| <a href="./
|
|
56
|
-
| <a href="./
|
|
57
|
-
| <a href="./
|
|
58
|
-
| <a href="./
|
|
59
|
-
| <a href="./
|
|
60
|
-
| <a href="./
|
|
61
|
-
| <a href="./
|
|
62
|
-
| <a href="./
|
|
63
|
-
| <a href="./
|
|
64
|
-
| <a href="./
|
|
65
|
-
| <a href="./
|
|
66
|
-
| <a href="./
|
|
67
|
-
| <a href="./
|
|
68
|
-
| <a href="./
|
|
69
|
-
| <a href="./
|
|
70
|
-
| <a href="./
|
|
71
|
-
| <a href="./
|
|
72
|
-
| <a href="./
|
|
73
|
-
| <a href="./
|
|
74
|
-
| <a href="./
|
|
75
|
-
| <a href="./
|
|
76
|
-
| <a href="./
|
|
77
|
-
| <a href="./
|
|
78
|
-
| <a href="./
|
|
79
|
-
| <a href="./
|
|
80
|
-
| <a href="./
|
|
81
|
-
| <a href="./
|
|
82
|
-
| <a href="./
|
|
83
|
-
| <a href="./
|
|
84
|
-
| <a href="./
|
|
85
|
-
| <a href="./
|
|
86
|
-
| <a href="./
|
|
87
|
-
| <a href="./
|
|
88
|
-
| <a href="./
|
|
89
|
-
| <a href="./
|
|
90
|
-
| <a href="./
|
|
91
|
-
| <a href="./
|
|
92
|
-
| <a href="./
|
|
93
|
-
| <a href="./
|
|
94
|
-
| <a href="./
|
|
95
|
-
| <a href="./
|
|
96
|
-
| <a href="./
|
|
97
|
-
| <a href="./
|
|
98
|
-
| <a href="./
|
|
99
|
-
| <a href="./
|
|
100
|
-
| <a href="./
|
|
101
|
-
| <a href="./
|
|
102
|
-
| <a href="./
|
|
103
|
-
| <a href="./
|
|
104
|
-
| <a href="./
|
|
105
|
-
| <a href="./
|
|
106
|
-
| <a href="./
|
|
107
|
-
| <a href="./
|
|
108
|
-
| <a href="./
|
|
109
|
-
| <a href="./
|
|
110
|
-
| <a href="./
|
|
111
|
-
| <a href="./
|
|
112
|
-
| <a href="./
|
|
113
|
-
| <a href="./
|
|
114
|
-
| <a href="./
|
|
115
|
-
| <a href="./
|
|
116
|
-
| <a href="./
|
|
117
|
-
| <a href="./
|
|
118
|
-
| <a href="./
|
|
119
|
-
| <a href="./
|
|
120
|
-
| <a href="./
|
|
50
|
+
| Rule | Description | Recommended | Fixable | Suggestions |
|
|
51
|
+
| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
|
|
52
|
+
| <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
|
|
53
|
+
| <a href="./src/rules/enforce-inline-styles-in-select/README.md">enforce-inline-styles-in-select</a> | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | | | |
|
|
54
|
+
| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |
|
|
55
|
+
| <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 |
|
|
56
|
+
| <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. | | | |
|
|
57
|
+
| <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. | | | |
|
|
58
|
+
| <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 | |
|
|
59
|
+
| <a href="./src/rules/lozenge-appearance-and-isbold-migration/README.md">lozenge-appearance-and-isbold-migration</a> | Helps migrate deprecated Lozenge usages to the new API or Tag component as part of the Labelling System Phase 1 migration. | Yes | Yes | |
|
|
60
|
+
| <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
|
|
61
|
+
| <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 | | |
|
|
62
|
+
| <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 | |
|
|
63
|
+
| <a href="./src/rules/no-custom-icons/README.md">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |
|
|
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
|
+
| <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
|
|
66
|
+
| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
|
|
67
|
+
| <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |
|
|
68
|
+
| <a href="./src/rules/no-direct-use-of-web-platform-drag-and-drop/README.md">no-direct-use-of-web-platform-drag-and-drop</a> | Disallow using direct use of native drag and drop (please use Pragmatic drag and drop) | Yes | | |
|
|
69
|
+
| <a href="./src/rules/no-emotion-primitives/README.md">no-emotion-primitives</a> | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | | Yes | |
|
|
70
|
+
| <a href="./src/rules/no-empty-styled-expression/README.md">no-empty-styled-expression</a> | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | | | |
|
|
71
|
+
| <a href="./src/rules/no-exported-css/README.md">no-exported-css</a> | Forbid exporting `css` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |
|
|
72
|
+
| <a href="./src/rules/no-exported-keyframes/README.md">no-exported-keyframes</a> | Forbid exporting `keyframes` function calls. Exporting `css` function calls can result in unexpected behaviour at runtime, and is not statically analysable. | | | |
|
|
73
|
+
| <a href="./src/rules/no-html-anchor/README.md">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | Yes | | Yes |
|
|
74
|
+
| <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 | | |
|
|
75
|
+
| <a href="./src/rules/no-html-checkbox/README.md">no-html-checkbox</a> | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | | Yes |
|
|
76
|
+
| <a href="./src/rules/no-html-code/README.md">no-html-code</a> | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | | Yes |
|
|
77
|
+
| <a href="./src/rules/no-html-heading/README.md">no-html-heading</a> | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | | Yes |
|
|
78
|
+
| <a href="./src/rules/no-html-image/README.md">no-html-image</a> | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | | Yes |
|
|
79
|
+
| <a href="./src/rules/no-html-radio/README.md">no-html-radio</a> | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | | Yes |
|
|
80
|
+
| <a href="./src/rules/no-html-range/README.md">no-html-range</a> | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | | Yes |
|
|
81
|
+
| <a href="./src/rules/no-html-select/README.md">no-html-select</a> | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | | Yes |
|
|
82
|
+
| <a href="./src/rules/no-html-text-input/README.md">no-html-text-input</a> | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | | Yes |
|
|
83
|
+
| <a href="./src/rules/no-html-textarea/README.md">no-html-textarea</a> | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | | Yes |
|
|
84
|
+
| <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 | | |
|
|
85
|
+
| <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 | |
|
|
86
|
+
| <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |
|
|
87
|
+
| <a href="./src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
|
|
88
|
+
| <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
|
|
89
|
+
| <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |
|
|
90
|
+
| <a href="./src/rules/no-separator-with-list-elements/README.md">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as="li"`, `as="ol"`, or `as="dl"` in the Inline component. | Yes | | |
|
|
91
|
+
| <a href="./src/rules/no-styled-tagged-template-expression/README.md">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
92
|
+
| <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
|
|
93
|
+
| <a href="./src/rules/no-unsafe-style-overrides/README.md">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |
|
|
94
|
+
| <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
|
|
95
|
+
| <a href="./src/rules/no-unused-css-map/README.md">no-unused-css-map</a> | Detects unused styles in cssMap objects to help keep code clean. | Yes | | |
|
|
96
|
+
| <a href="./src/rules/no-utility-icons/README.md">no-utility-icons</a> | Disallow use of deprecated utility icons, in favor of core icons with `size="small"`. | Yes | Yes | Yes |
|
|
97
|
+
| <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a> | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. | | | |
|
|
98
|
+
| <a href="./src/rules/use-button-group-label/README.md">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |
|
|
99
|
+
| <a href="./src/rules/use-correct-field/README.md">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |
|
|
100
|
+
| <a href="./src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |
|
|
101
|
+
| <a href="./src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a> | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components. | Yes | Yes | Yes |
|
|
102
|
+
| <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
|
|
103
|
+
| <a href="./src/rules/use-heading/README.md">use-heading</a> | Encourage the usage of heading components. | Yes | Yes | Yes |
|
|
104
|
+
| <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 | |
|
|
105
|
+
| <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 |
|
|
106
|
+
| <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 | |
|
|
107
|
+
| <a href="./src/rules/use-latest-xcss-syntax-typography/README.md">use-latest-xcss-syntax-typography</a> | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | |
|
|
108
|
+
| <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 |
|
|
109
|
+
| <a href="./src/rules/use-modal-dialog-close-button/README.md">use-modal-dialog-close-button</a> | Encourages makers to use close button in Atlassian Design System's modal dialog component. | Yes | Yes | Yes |
|
|
110
|
+
| <a href="./src/rules/use-onboarding-spotlight-label/README.md">use-onboarding-spotlight-label</a> | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes |
|
|
111
|
+
| <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 |
|
|
112
|
+
| <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
113
|
+
| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | Yes | Yes | Yes |
|
|
114
|
+
| <a href="./src/rules/use-should-render-to-parent/README.md">use-should-render-to-parent</a> | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components. | Yes | | Yes |
|
|
115
|
+
| <a href="./src/rules/use-spotlight-package/README.md">use-spotlight-package</a> | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | | Yes | Yes |
|
|
116
|
+
| <a href="./src/rules/use-tag-group-label/README.md">use-tag-group-label</a> | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |
|
|
117
|
+
| <a href="./src/rules/use-tokens-shape/README.md">use-tokens-shape</a> | Enforces usage of shape design tokens rather than hard-coded values. | | Yes | Yes |
|
|
118
|
+
| <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
|
|
119
|
+
| <a href="./src/rules/use-tokens-typography/README.md">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | Yes | Yes | Yes |
|
|
120
|
+
| <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
|
|
121
121
|
|
|
122
122
|
<!-- END_RULE_TABLE_CODEGEN -->
|
|
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -50,6 +50,7 @@ var rules = {
|
|
|
50
50
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
51
51
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
52
52
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
53
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
54
55
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
55
56
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -58,8 +59,10 @@ var rules = {
|
|
|
58
59
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
59
60
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
60
61
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
62
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
61
63
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
62
64
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
65
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
63
66
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
64
67
|
}
|
|
65
68
|
};
|
|
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -49,6 +49,7 @@ var rules = {
|
|
|
49
49
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
50
50
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
51
51
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
52
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
52
53
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
54
55
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -57,8 +58,10 @@ var rules = {
|
|
|
57
58
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
58
59
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
59
60
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
61
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
60
62
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
61
63
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
64
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
62
65
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
63
66
|
}
|
|
64
67
|
};
|
|
@@ -17,7 +17,7 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
17
17
|
severity: 'warn'
|
|
18
18
|
},
|
|
19
19
|
messages: {
|
|
20
|
-
|
|
20
|
+
updateAppearance: 'Update appearance value to new semantic value.',
|
|
21
21
|
migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
|
|
22
22
|
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
23
23
|
}
|
|
@@ -27,7 +27,6 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
27
27
|
* Contains a map of imported Lozenge components.
|
|
28
28
|
*/
|
|
29
29
|
var lozengeImports = {}; // local name -> import source
|
|
30
|
-
var tagImports = {}; // local name -> import source
|
|
31
30
|
|
|
32
31
|
/**
|
|
33
32
|
* Check if a JSX attribute value is a literal false
|
|
@@ -61,33 +60,20 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
61
60
|
}
|
|
62
61
|
|
|
63
62
|
/**
|
|
64
|
-
* Map
|
|
63
|
+
* Map old appearance values to new semantic appearance values
|
|
64
|
+
* Both Lozenge and Tag now use the same appearance prop with new semantic values
|
|
65
65
|
*/
|
|
66
|
-
function
|
|
66
|
+
function mapToNewAppearanceValue(oldValue) {
|
|
67
67
|
var mapping = {
|
|
68
|
-
success: '
|
|
69
|
-
default: '
|
|
70
|
-
removed: '
|
|
71
|
-
inprogress: '
|
|
72
|
-
new: '
|
|
73
|
-
moved: '
|
|
68
|
+
success: 'success',
|
|
69
|
+
default: 'default',
|
|
70
|
+
removed: 'removed',
|
|
71
|
+
inprogress: 'inprogress',
|
|
72
|
+
new: 'new',
|
|
73
|
+
moved: 'moved'
|
|
74
74
|
};
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
/**
|
|
79
|
-
* Map Lozenge appearance values to Lozenge color values
|
|
80
|
-
*/
|
|
81
|
-
function mapAppearanceToLozengeColor(appearanceValue) {
|
|
82
|
-
var mapping = {
|
|
83
|
-
default: 'neutral',
|
|
84
|
-
inprogress: 'information',
|
|
85
|
-
moved: 'warning',
|
|
86
|
-
new: 'discovery',
|
|
87
|
-
removed: 'danger',
|
|
88
|
-
success: 'success'
|
|
89
|
-
};
|
|
90
|
-
return mapping[appearanceValue] || appearanceValue;
|
|
75
|
+
// TODO: Update this mapping based on actual new semantic values when provided
|
|
76
|
+
return mapping[oldValue] || oldValue;
|
|
91
77
|
}
|
|
92
78
|
|
|
93
79
|
/**
|
|
@@ -109,11 +95,11 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
109
95
|
/**
|
|
110
96
|
* Generate the replacement JSX element text
|
|
111
97
|
*/
|
|
112
|
-
function generateTagReplacement(node
|
|
98
|
+
function generateTagReplacement(node) {
|
|
113
99
|
var sourceCode = context.getSourceCode();
|
|
114
100
|
var attributes = node.openingElement.attributes;
|
|
115
101
|
|
|
116
|
-
// Build new attributes array, excluding isBold and mapping appearance to
|
|
102
|
+
// Build new attributes array, excluding isBold and mapping appearance values to new semantics
|
|
117
103
|
var newAttributes = [];
|
|
118
104
|
attributes.forEach(function (attr) {
|
|
119
105
|
if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
|
|
@@ -123,15 +109,15 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
123
109
|
return;
|
|
124
110
|
}
|
|
125
111
|
if (attrName === 'appearance') {
|
|
126
|
-
// Map appearance to
|
|
112
|
+
// Map appearance value to new semantic value but keep the prop name as appearance
|
|
127
113
|
var stringValue = extractStringValue(attr.value);
|
|
128
114
|
if (stringValue && typeof stringValue === 'string') {
|
|
129
|
-
var
|
|
130
|
-
newAttributes.push("
|
|
115
|
+
var mappedAppearance = mapToNewAppearanceValue(stringValue);
|
|
116
|
+
newAttributes.push("appearance=\"".concat(mappedAppearance, "\""));
|
|
131
117
|
} else {
|
|
132
|
-
// If we can't extract the string value, keep as-is
|
|
118
|
+
// If we can't extract the string value, keep as-is with appearance prop
|
|
133
119
|
var value = attr.value ? sourceCode.getText(attr.value) : '';
|
|
134
|
-
newAttributes.push("
|
|
120
|
+
newAttributes.push("appearance".concat(value ? "=".concat(value) : ''));
|
|
135
121
|
}
|
|
136
122
|
return;
|
|
137
123
|
}
|
|
@@ -167,18 +153,6 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
167
153
|
}
|
|
168
154
|
});
|
|
169
155
|
}
|
|
170
|
-
// Track Tag imports
|
|
171
|
-
if (moduleSource === '@atlaskit/tag' || moduleSource.startsWith('@atlaskit/tag/')) {
|
|
172
|
-
node.specifiers.forEach(function (spec) {
|
|
173
|
-
if (spec.type === 'ImportDefaultSpecifier') {
|
|
174
|
-
tagImports[spec.local.name] = moduleSource;
|
|
175
|
-
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
176
|
-
if (spec.imported.name === 'Tag') {
|
|
177
|
-
tagImports[spec.local.name] = moduleSource;
|
|
178
|
-
}
|
|
179
|
-
}
|
|
180
|
-
});
|
|
181
|
-
}
|
|
182
156
|
}
|
|
183
157
|
},
|
|
184
158
|
JSXElement: function JSXElement(node) {
|
|
@@ -198,35 +172,30 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
198
172
|
var appearanceProp = attributesMap.appearance;
|
|
199
173
|
var isBoldProp = attributesMap.isBold;
|
|
200
174
|
|
|
201
|
-
// Handle appearance prop migration
|
|
175
|
+
// Handle appearance prop value migration
|
|
202
176
|
if (appearanceProp) {
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
|
|
211
|
-
|
|
212
|
-
|
|
213
|
-
|
|
214
|
-
var stringValue = extractStringValue(appearanceProp.value);
|
|
215
|
-
if (stringValue && typeof stringValue === 'string') {
|
|
216
|
-
var mappedColor = mapAppearanceToLozengeColor(stringValue);
|
|
217
|
-
if (mappedColor !== stringValue) {
|
|
218
|
-
// Update the value if it changed
|
|
177
|
+
var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
|
|
178
|
+
if (!shouldMigrateToTag) {
|
|
179
|
+
// Only update appearance values for Lozenge components that stay as Lozenge
|
|
180
|
+
var stringValue = extractStringValue(appearanceProp.value);
|
|
181
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
182
|
+
var mappedValue = mapToNewAppearanceValue(stringValue);
|
|
183
|
+
if (mappedValue !== stringValue) {
|
|
184
|
+
context.report({
|
|
185
|
+
node: appearanceProp,
|
|
186
|
+
messageId: 'updateAppearance',
|
|
187
|
+
fix: function fix(fixer) {
|
|
219
188
|
if (appearanceProp.value.type === 'Literal') {
|
|
220
|
-
|
|
189
|
+
return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
|
|
221
190
|
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
222
|
-
|
|
191
|
+
return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
|
|
223
192
|
}
|
|
193
|
+
return null;
|
|
224
194
|
}
|
|
225
|
-
}
|
|
195
|
+
});
|
|
226
196
|
}
|
|
227
|
-
return fixes;
|
|
228
197
|
}
|
|
229
|
-
}
|
|
198
|
+
}
|
|
230
199
|
}
|
|
231
200
|
|
|
232
201
|
// Handle isBold prop and Tag migration
|
|
@@ -237,7 +206,7 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
237
206
|
node: node,
|
|
238
207
|
messageId: 'migrateTag',
|
|
239
208
|
fix: function fix(fixer) {
|
|
240
|
-
var replacement = generateTagReplacement(node
|
|
209
|
+
var replacement = generateTagReplacement(node);
|
|
241
210
|
return fixer.replaceText(node, replacement);
|
|
242
211
|
}
|
|
243
212
|
});
|
|
@@ -255,7 +224,7 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
255
224
|
node: node,
|
|
256
225
|
messageId: 'migrateTag',
|
|
257
226
|
fix: function fix(fixer) {
|
|
258
|
-
var replacement = generateTagReplacement(node
|
|
227
|
+
var replacement = generateTagReplacement(node);
|
|
259
228
|
return fixer.replaceText(node, replacement);
|
|
260
229
|
}
|
|
261
230
|
});
|
|
@@ -69,7 +69,7 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
69
69
|
hasSuggestions: true,
|
|
70
70
|
docs: {
|
|
71
71
|
description: 'Enforces usage of design tokens for typography properties rather than hard-coded values.',
|
|
72
|
-
recommended:
|
|
72
|
+
recommended: true,
|
|
73
73
|
severity: 'warn'
|
|
74
74
|
},
|
|
75
75
|
messages: {
|
|
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -44,6 +44,7 @@ const rules = {
|
|
|
44
44
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
45
45
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
46
46
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
47
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
47
48
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
48
49
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
49
50
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -52,8 +53,10 @@ const rules = {
|
|
|
52
53
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
54
55
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
56
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
55
57
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
56
58
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
59
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
57
60
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
58
61
|
}
|
|
59
62
|
};
|
|
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -43,6 +43,7 @@ const rules = {
|
|
|
43
43
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
44
44
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
45
45
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
46
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
46
47
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
47
48
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
48
49
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -51,8 +52,10 @@ const rules = {
|
|
|
51
52
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
52
53
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
55
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
54
56
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
55
57
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
58
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
56
59
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
57
60
|
}
|
|
58
61
|
};
|
|
@@ -11,7 +11,7 @@ const rule = createLintRule({
|
|
|
11
11
|
severity: 'warn'
|
|
12
12
|
},
|
|
13
13
|
messages: {
|
|
14
|
-
|
|
14
|
+
updateAppearance: 'Update appearance value to new semantic value.',
|
|
15
15
|
migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
|
|
16
16
|
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
17
17
|
}
|
|
@@ -21,7 +21,6 @@ const rule = createLintRule({
|
|
|
21
21
|
* Contains a map of imported Lozenge components.
|
|
22
22
|
*/
|
|
23
23
|
const lozengeImports = {}; // local name -> import source
|
|
24
|
-
const tagImports = {}; // local name -> import source
|
|
25
24
|
|
|
26
25
|
/**
|
|
27
26
|
* Check if a JSX attribute value is a literal false
|
|
@@ -55,33 +54,20 @@ const rule = createLintRule({
|
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
/**
|
|
58
|
-
* Map
|
|
57
|
+
* Map old appearance values to new semantic appearance values
|
|
58
|
+
* Both Lozenge and Tag now use the same appearance prop with new semantic values
|
|
59
59
|
*/
|
|
60
|
-
function
|
|
60
|
+
function mapToNewAppearanceValue(oldValue) {
|
|
61
61
|
const mapping = {
|
|
62
|
-
success: '
|
|
63
|
-
default: '
|
|
64
|
-
removed: '
|
|
65
|
-
inprogress: '
|
|
66
|
-
new: '
|
|
67
|
-
moved: '
|
|
62
|
+
success: 'success',
|
|
63
|
+
default: 'default',
|
|
64
|
+
removed: 'removed',
|
|
65
|
+
inprogress: 'inprogress',
|
|
66
|
+
new: 'new',
|
|
67
|
+
moved: 'moved'
|
|
68
68
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Map Lozenge appearance values to Lozenge color values
|
|
74
|
-
*/
|
|
75
|
-
function mapAppearanceToLozengeColor(appearanceValue) {
|
|
76
|
-
const mapping = {
|
|
77
|
-
default: 'neutral',
|
|
78
|
-
inprogress: 'information',
|
|
79
|
-
moved: 'warning',
|
|
80
|
-
new: 'discovery',
|
|
81
|
-
removed: 'danger',
|
|
82
|
-
success: 'success'
|
|
83
|
-
};
|
|
84
|
-
return mapping[appearanceValue] || appearanceValue;
|
|
69
|
+
// TODO: Update this mapping based on actual new semantic values when provided
|
|
70
|
+
return mapping[oldValue] || oldValue;
|
|
85
71
|
}
|
|
86
72
|
|
|
87
73
|
/**
|
|
@@ -103,11 +89,11 @@ const rule = createLintRule({
|
|
|
103
89
|
/**
|
|
104
90
|
* Generate the replacement JSX element text
|
|
105
91
|
*/
|
|
106
|
-
function generateTagReplacement(node
|
|
92
|
+
function generateTagReplacement(node) {
|
|
107
93
|
const sourceCode = context.getSourceCode();
|
|
108
94
|
const attributes = node.openingElement.attributes;
|
|
109
95
|
|
|
110
|
-
// Build new attributes array, excluding isBold and mapping appearance to
|
|
96
|
+
// Build new attributes array, excluding isBold and mapping appearance values to new semantics
|
|
111
97
|
const newAttributes = [];
|
|
112
98
|
attributes.forEach(attr => {
|
|
113
99
|
if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
|
|
@@ -117,15 +103,15 @@ const rule = createLintRule({
|
|
|
117
103
|
return;
|
|
118
104
|
}
|
|
119
105
|
if (attrName === 'appearance') {
|
|
120
|
-
// Map appearance to
|
|
106
|
+
// Map appearance value to new semantic value but keep the prop name as appearance
|
|
121
107
|
const stringValue = extractStringValue(attr.value);
|
|
122
108
|
if (stringValue && typeof stringValue === 'string') {
|
|
123
|
-
const
|
|
124
|
-
newAttributes.push(`
|
|
109
|
+
const mappedAppearance = mapToNewAppearanceValue(stringValue);
|
|
110
|
+
newAttributes.push(`appearance="${mappedAppearance}"`);
|
|
125
111
|
} else {
|
|
126
|
-
// If we can't extract the string value, keep as-is
|
|
112
|
+
// If we can't extract the string value, keep as-is with appearance prop
|
|
127
113
|
const value = attr.value ? sourceCode.getText(attr.value) : '';
|
|
128
|
-
newAttributes.push(`
|
|
114
|
+
newAttributes.push(`appearance${value ? `=${value}` : ''}`);
|
|
129
115
|
}
|
|
130
116
|
return;
|
|
131
117
|
}
|
|
@@ -161,18 +147,6 @@ const rule = createLintRule({
|
|
|
161
147
|
}
|
|
162
148
|
});
|
|
163
149
|
}
|
|
164
|
-
// Track Tag imports
|
|
165
|
-
if (moduleSource === '@atlaskit/tag' || moduleSource.startsWith('@atlaskit/tag/')) {
|
|
166
|
-
node.specifiers.forEach(spec => {
|
|
167
|
-
if (spec.type === 'ImportDefaultSpecifier') {
|
|
168
|
-
tagImports[spec.local.name] = moduleSource;
|
|
169
|
-
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
170
|
-
if (spec.imported.name === 'Tag') {
|
|
171
|
-
tagImports[spec.local.name] = moduleSource;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
150
|
}
|
|
177
151
|
},
|
|
178
152
|
JSXElement(node) {
|
|
@@ -192,35 +166,30 @@ const rule = createLintRule({
|
|
|
192
166
|
const appearanceProp = attributesMap.appearance;
|
|
193
167
|
const isBoldProp = attributesMap.isBold;
|
|
194
168
|
|
|
195
|
-
// Handle appearance prop migration
|
|
169
|
+
// Handle appearance prop value migration
|
|
196
170
|
if (appearanceProp) {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
const stringValue = extractStringValue(appearanceProp.value);
|
|
209
|
-
if (stringValue && typeof stringValue === 'string') {
|
|
210
|
-
const mappedColor = mapAppearanceToLozengeColor(stringValue);
|
|
211
|
-
if (mappedColor !== stringValue) {
|
|
212
|
-
// Update the value if it changed
|
|
171
|
+
const shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
|
|
172
|
+
if (!shouldMigrateToTag) {
|
|
173
|
+
// Only update appearance values for Lozenge components that stay as Lozenge
|
|
174
|
+
const stringValue = extractStringValue(appearanceProp.value);
|
|
175
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
176
|
+
const mappedValue = mapToNewAppearanceValue(stringValue);
|
|
177
|
+
if (mappedValue !== stringValue) {
|
|
178
|
+
context.report({
|
|
179
|
+
node: appearanceProp,
|
|
180
|
+
messageId: 'updateAppearance',
|
|
181
|
+
fix: fixer => {
|
|
213
182
|
if (appearanceProp.value.type === 'Literal') {
|
|
214
|
-
|
|
183
|
+
return fixer.replaceText(appearanceProp.value, `"${mappedValue}"`);
|
|
215
184
|
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
216
|
-
|
|
185
|
+
return fixer.replaceText(appearanceProp.value.expression, `"${mappedValue}"`);
|
|
217
186
|
}
|
|
187
|
+
return null;
|
|
218
188
|
}
|
|
219
|
-
}
|
|
189
|
+
});
|
|
220
190
|
}
|
|
221
|
-
return fixes;
|
|
222
191
|
}
|
|
223
|
-
}
|
|
192
|
+
}
|
|
224
193
|
}
|
|
225
194
|
|
|
226
195
|
// Handle isBold prop and Tag migration
|
|
@@ -231,7 +200,7 @@ const rule = createLintRule({
|
|
|
231
200
|
node: node,
|
|
232
201
|
messageId: 'migrateTag',
|
|
233
202
|
fix: fixer => {
|
|
234
|
-
const replacement = generateTagReplacement(node
|
|
203
|
+
const replacement = generateTagReplacement(node);
|
|
235
204
|
return fixer.replaceText(node, replacement);
|
|
236
205
|
}
|
|
237
206
|
});
|
|
@@ -249,7 +218,7 @@ const rule = createLintRule({
|
|
|
249
218
|
node: node,
|
|
250
219
|
messageId: 'migrateTag',
|
|
251
220
|
fix: fixer => {
|
|
252
|
-
const replacement = generateTagReplacement(node
|
|
221
|
+
const replacement = generateTagReplacement(node);
|
|
253
222
|
return fixer.replaceText(node, replacement);
|
|
254
223
|
}
|
|
255
224
|
});
|
|
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -44,6 +44,7 @@ var rules = {
|
|
|
44
44
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
45
45
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
46
46
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
47
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
47
48
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
48
49
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
49
50
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -52,8 +53,10 @@ var rules = {
|
|
|
52
53
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
54
55
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
56
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
55
57
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
56
58
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
59
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
57
60
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
58
61
|
}
|
|
59
62
|
};
|
|
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
|
|
@@ -43,6 +43,7 @@ var rules = {
|
|
|
43
43
|
'@atlaskit/design-system/use-cx-function-in-xcss': 'error',
|
|
44
44
|
'@atlaskit/design-system/use-datetime-picker-calendar-button': 'warn',
|
|
45
45
|
'@atlaskit/design-system/use-drawer-label': 'warn',
|
|
46
|
+
'@atlaskit/design-system/use-heading': 'warn',
|
|
46
47
|
'@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
|
|
47
48
|
'@atlaskit/design-system/use-href-in-link-item': 'warn',
|
|
48
49
|
'@atlaskit/design-system/use-latest-xcss-syntax': 'error',
|
|
@@ -51,8 +52,10 @@ var rules = {
|
|
|
51
52
|
'@atlaskit/design-system/use-modal-dialog-close-button': 'warn',
|
|
52
53
|
'@atlaskit/design-system/use-onboarding-spotlight-label': 'warn',
|
|
53
54
|
'@atlaskit/design-system/use-popup-label': 'warn',
|
|
55
|
+
'@atlaskit/design-system/use-primitives-text': 'warn',
|
|
54
56
|
'@atlaskit/design-system/use-should-render-to-parent': 'warn',
|
|
55
57
|
'@atlaskit/design-system/use-tag-group-label': 'warn',
|
|
58
|
+
'@atlaskit/design-system/use-tokens-typography': 'warn',
|
|
56
59
|
'@atlaskit/design-system/use-visually-hidden': 'error'
|
|
57
60
|
}
|
|
58
61
|
};
|
|
@@ -11,7 +11,7 @@ var rule = createLintRule({
|
|
|
11
11
|
severity: 'warn'
|
|
12
12
|
},
|
|
13
13
|
messages: {
|
|
14
|
-
|
|
14
|
+
updateAppearance: 'Update appearance value to new semantic value.',
|
|
15
15
|
migrateTag: 'Non-bold <Lozenge> variants should migrate to <Tag> component.',
|
|
16
16
|
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
17
17
|
}
|
|
@@ -21,7 +21,6 @@ var rule = createLintRule({
|
|
|
21
21
|
* Contains a map of imported Lozenge components.
|
|
22
22
|
*/
|
|
23
23
|
var lozengeImports = {}; // local name -> import source
|
|
24
|
-
var tagImports = {}; // local name -> import source
|
|
25
24
|
|
|
26
25
|
/**
|
|
27
26
|
* Check if a JSX attribute value is a literal false
|
|
@@ -55,33 +54,20 @@ var rule = createLintRule({
|
|
|
55
54
|
}
|
|
56
55
|
|
|
57
56
|
/**
|
|
58
|
-
* Map
|
|
57
|
+
* Map old appearance values to new semantic appearance values
|
|
58
|
+
* Both Lozenge and Tag now use the same appearance prop with new semantic values
|
|
59
59
|
*/
|
|
60
|
-
function
|
|
60
|
+
function mapToNewAppearanceValue(oldValue) {
|
|
61
61
|
var mapping = {
|
|
62
|
-
success: '
|
|
63
|
-
default: '
|
|
64
|
-
removed: '
|
|
65
|
-
inprogress: '
|
|
66
|
-
new: '
|
|
67
|
-
moved: '
|
|
62
|
+
success: 'success',
|
|
63
|
+
default: 'default',
|
|
64
|
+
removed: 'removed',
|
|
65
|
+
inprogress: 'inprogress',
|
|
66
|
+
new: 'new',
|
|
67
|
+
moved: 'moved'
|
|
68
68
|
};
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
/**
|
|
73
|
-
* Map Lozenge appearance values to Lozenge color values
|
|
74
|
-
*/
|
|
75
|
-
function mapAppearanceToLozengeColor(appearanceValue) {
|
|
76
|
-
var mapping = {
|
|
77
|
-
default: 'neutral',
|
|
78
|
-
inprogress: 'information',
|
|
79
|
-
moved: 'warning',
|
|
80
|
-
new: 'discovery',
|
|
81
|
-
removed: 'danger',
|
|
82
|
-
success: 'success'
|
|
83
|
-
};
|
|
84
|
-
return mapping[appearanceValue] || appearanceValue;
|
|
69
|
+
// TODO: Update this mapping based on actual new semantic values when provided
|
|
70
|
+
return mapping[oldValue] || oldValue;
|
|
85
71
|
}
|
|
86
72
|
|
|
87
73
|
/**
|
|
@@ -103,11 +89,11 @@ var rule = createLintRule({
|
|
|
103
89
|
/**
|
|
104
90
|
* Generate the replacement JSX element text
|
|
105
91
|
*/
|
|
106
|
-
function generateTagReplacement(node
|
|
92
|
+
function generateTagReplacement(node) {
|
|
107
93
|
var sourceCode = context.getSourceCode();
|
|
108
94
|
var attributes = node.openingElement.attributes;
|
|
109
95
|
|
|
110
|
-
// Build new attributes array, excluding isBold and mapping appearance to
|
|
96
|
+
// Build new attributes array, excluding isBold and mapping appearance values to new semantics
|
|
111
97
|
var newAttributes = [];
|
|
112
98
|
attributes.forEach(function (attr) {
|
|
113
99
|
if (attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier') {
|
|
@@ -117,15 +103,15 @@ var rule = createLintRule({
|
|
|
117
103
|
return;
|
|
118
104
|
}
|
|
119
105
|
if (attrName === 'appearance') {
|
|
120
|
-
// Map appearance to
|
|
106
|
+
// Map appearance value to new semantic value but keep the prop name as appearance
|
|
121
107
|
var stringValue = extractStringValue(attr.value);
|
|
122
108
|
if (stringValue && typeof stringValue === 'string') {
|
|
123
|
-
var
|
|
124
|
-
newAttributes.push("
|
|
109
|
+
var mappedAppearance = mapToNewAppearanceValue(stringValue);
|
|
110
|
+
newAttributes.push("appearance=\"".concat(mappedAppearance, "\""));
|
|
125
111
|
} else {
|
|
126
|
-
// If we can't extract the string value, keep as-is
|
|
112
|
+
// If we can't extract the string value, keep as-is with appearance prop
|
|
127
113
|
var value = attr.value ? sourceCode.getText(attr.value) : '';
|
|
128
|
-
newAttributes.push("
|
|
114
|
+
newAttributes.push("appearance".concat(value ? "=".concat(value) : ''));
|
|
129
115
|
}
|
|
130
116
|
return;
|
|
131
117
|
}
|
|
@@ -161,18 +147,6 @@ var rule = createLintRule({
|
|
|
161
147
|
}
|
|
162
148
|
});
|
|
163
149
|
}
|
|
164
|
-
// Track Tag imports
|
|
165
|
-
if (moduleSource === '@atlaskit/tag' || moduleSource.startsWith('@atlaskit/tag/')) {
|
|
166
|
-
node.specifiers.forEach(function (spec) {
|
|
167
|
-
if (spec.type === 'ImportDefaultSpecifier') {
|
|
168
|
-
tagImports[spec.local.name] = moduleSource;
|
|
169
|
-
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
170
|
-
if (spec.imported.name === 'Tag') {
|
|
171
|
-
tagImports[spec.local.name] = moduleSource;
|
|
172
|
-
}
|
|
173
|
-
}
|
|
174
|
-
});
|
|
175
|
-
}
|
|
176
150
|
}
|
|
177
151
|
},
|
|
178
152
|
JSXElement: function JSXElement(node) {
|
|
@@ -192,35 +166,30 @@ var rule = createLintRule({
|
|
|
192
166
|
var appearanceProp = attributesMap.appearance;
|
|
193
167
|
var isBoldProp = attributesMap.isBold;
|
|
194
168
|
|
|
195
|
-
// Handle appearance prop migration
|
|
169
|
+
// Handle appearance prop value migration
|
|
196
170
|
if (appearanceProp) {
|
|
197
|
-
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
|
|
202
|
-
|
|
203
|
-
|
|
204
|
-
|
|
205
|
-
|
|
206
|
-
|
|
207
|
-
|
|
208
|
-
var stringValue = extractStringValue(appearanceProp.value);
|
|
209
|
-
if (stringValue && typeof stringValue === 'string') {
|
|
210
|
-
var mappedColor = mapAppearanceToLozengeColor(stringValue);
|
|
211
|
-
if (mappedColor !== stringValue) {
|
|
212
|
-
// Update the value if it changed
|
|
171
|
+
var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
|
|
172
|
+
if (!shouldMigrateToTag) {
|
|
173
|
+
// Only update appearance values for Lozenge components that stay as Lozenge
|
|
174
|
+
var stringValue = extractStringValue(appearanceProp.value);
|
|
175
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
176
|
+
var mappedValue = mapToNewAppearanceValue(stringValue);
|
|
177
|
+
if (mappedValue !== stringValue) {
|
|
178
|
+
context.report({
|
|
179
|
+
node: appearanceProp,
|
|
180
|
+
messageId: 'updateAppearance',
|
|
181
|
+
fix: function fix(fixer) {
|
|
213
182
|
if (appearanceProp.value.type === 'Literal') {
|
|
214
|
-
|
|
183
|
+
return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
|
|
215
184
|
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
216
|
-
|
|
185
|
+
return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
|
|
217
186
|
}
|
|
187
|
+
return null;
|
|
218
188
|
}
|
|
219
|
-
}
|
|
189
|
+
});
|
|
220
190
|
}
|
|
221
|
-
return fixes;
|
|
222
191
|
}
|
|
223
|
-
}
|
|
192
|
+
}
|
|
224
193
|
}
|
|
225
194
|
|
|
226
195
|
// Handle isBold prop and Tag migration
|
|
@@ -231,7 +200,7 @@ var rule = createLintRule({
|
|
|
231
200
|
node: node,
|
|
232
201
|
messageId: 'migrateTag',
|
|
233
202
|
fix: function fix(fixer) {
|
|
234
|
-
var replacement = generateTagReplacement(node
|
|
203
|
+
var replacement = generateTagReplacement(node);
|
|
235
204
|
return fixer.replaceText(node, replacement);
|
|
236
205
|
}
|
|
237
206
|
});
|
|
@@ -249,7 +218,7 @@ var rule = createLintRule({
|
|
|
249
218
|
node: node,
|
|
250
219
|
messageId: 'migrateTag',
|
|
251
220
|
fix: function fix(fixer) {
|
|
252
|
-
var replacement = generateTagReplacement(node
|
|
221
|
+
var replacement = generateTagReplacement(node);
|
|
253
222
|
return fixer.replaceText(node, replacement);
|
|
254
223
|
}
|
|
255
224
|
});
|
|
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
import type { Linter } from 'eslint';
|
|
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
import type { ESLint } from 'eslint';
|
|
@@ -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::ff76b50abd06b99746997ad4f51a9178>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
import type { Linter } from 'eslint';
|
|
@@ -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::07d2533eef1accad3c7ace7be7a8ea24>>
|
|
4
4
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
5
5
|
*/
|
|
6
6
|
import type { ESLint } from 'eslint';
|
package/package.json
CHANGED