@atlaskit/eslint-plugin-design-system 13.25.0 → 13.26.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 +9 -0
- package/README.md +71 -71
- 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 +2 -2
- package/dist/cjs/presets/recommended.codegen.js +2 -2
- package/dist/cjs/rules/index.codegen.js +3 -3
- package/dist/cjs/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
- 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 +2 -2
- package/dist/es2019/presets/recommended.codegen.js +2 -2
- package/dist/es2019/rules/index.codegen.js +3 -3
- package/dist/es2019/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +109 -15
- 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 +2 -2
- package/dist/esm/presets/recommended.codegen.js +2 -2
- package/dist/esm/rules/index.codegen.js +3 -3
- package/dist/esm/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.js +115 -19
- 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/index.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/all-flat.codegen.d.ts +1 -1
- package/dist/types-ts4.5/presets/all.codegen.d.ts +1 -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/index.codegen.d.ts +1 -1
- package/package.json +3 -3
- /package/dist/types/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
- /package/dist/types-ts4.5/rules/{lozenge-appearance-and-isbold-migration → lozenge-isBold-and-lozenge-badge-appearance-migration}/index.d.ts +0 -0
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,14 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 13.26.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [`35453fb5a0310`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/35453fb5a0310) -
|
|
8
|
+
Updates the `lozenge-appearance-and-isBold-migration` to be
|
|
9
|
+
`lozenge-isBold-and-lozenge-badge-appearance-migration` to help migrate deprecated Badge usages to
|
|
10
|
+
the new API as part of the Labelling System Phase 1 migration as well as lozenge.
|
|
11
|
+
|
|
3
12
|
## 13.25.0
|
|
4
13
|
|
|
5
14
|
### 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="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>
|
|
53
|
-
| <a href="./src/rules/enforce-inline-styles-in-select/README.md">enforce-inline-styles-in-select</a>
|
|
54
|
-
| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>
|
|
55
|
-
| <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>
|
|
56
|
-
| <a href="./src/rules/ensure-icon-color/README.md">ensure-icon-color</a>
|
|
57
|
-
| <a href="./src/rules/ensure-proper-xcss-usage/README.md">ensure-proper-xcss-usage</a>
|
|
58
|
-
| <a href="./src/rules/icon-label/README.md">icon-label</a>
|
|
59
|
-
| <a href="./src/rules/lozenge-
|
|
60
|
-
| <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>
|
|
61
|
-
| <a href="./src/rules/no-boolean-autofocus-on-modal-dialog/README.md">no-boolean-autofocus-on-modal-dialog</a>
|
|
62
|
-
| <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>
|
|
63
|
-
| <a href="./src/rules/no-custom-icons/README.md">no-custom-icons</a>
|
|
64
|
-
| <a href="./src/rules/no-dark-theme-vr-tests/README.md">no-dark-theme-vr-tests</a>
|
|
65
|
-
| <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>
|
|
66
|
-
| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>
|
|
67
|
-
| <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>
|
|
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>
|
|
69
|
-
| <a href="./src/rules/no-emotion-primitives/README.md">no-emotion-primitives</a>
|
|
70
|
-
| <a href="./src/rules/no-empty-styled-expression/README.md">no-empty-styled-expression</a>
|
|
71
|
-
| <a href="./src/rules/no-exported-css/README.md">no-exported-css</a>
|
|
72
|
-
| <a href="./src/rules/no-exported-keyframes/README.md">no-exported-keyframes</a>
|
|
73
|
-
| <a href="./src/rules/no-html-anchor/README.md">no-html-anchor</a>
|
|
74
|
-
| <a href="./src/rules/no-html-button/README.md">no-html-button</a>
|
|
75
|
-
| <a href="./src/rules/no-html-checkbox/README.md">no-html-checkbox</a>
|
|
76
|
-
| <a href="./src/rules/no-html-code/README.md">no-html-code</a>
|
|
77
|
-
| <a href="./src/rules/no-html-heading/README.md">no-html-heading</a>
|
|
78
|
-
| <a href="./src/rules/no-html-image/README.md">no-html-image</a>
|
|
79
|
-
| <a href="./src/rules/no-html-radio/README.md">no-html-radio</a>
|
|
80
|
-
| <a href="./src/rules/no-html-range/README.md">no-html-range</a>
|
|
81
|
-
| <a href="./src/rules/no-html-select/README.md">no-html-select</a>
|
|
82
|
-
| <a href="./src/rules/no-html-text-input/README.md">no-html-text-input</a>
|
|
83
|
-
| <a href="./src/rules/no-html-textarea/README.md">no-html-textarea</a>
|
|
84
|
-
| <a href="./src/rules/no-invalid-css-map/README.md">no-invalid-css-map</a>
|
|
85
|
-
| <a href="./src/rules/no-keyframes-tagged-template-expression/README.md">no-keyframes-tagged-template-expression</a>
|
|
86
|
-
| <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a>
|
|
87
|
-
| <a href="./src/rules/no-margin/README.md">no-margin</a>
|
|
88
|
-
| <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a>
|
|
89
|
-
| <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a>
|
|
90
|
-
| <a href="./src/rules/no-separator-with-list-elements/README.md">no-separator-with-list-elements</a>
|
|
91
|
-
| <a href="./src/rules/no-styled-tagged-template-expression/README.md">no-styled-tagged-template-expression</a>
|
|
92
|
-
| <a href="./src/rules/no-unsafe-design-token-usage/README.md">no-unsafe-design-token-usage</a>
|
|
93
|
-
| <a href="./src/rules/no-unsafe-style-overrides/README.md">no-unsafe-style-overrides</a>
|
|
94
|
-
| <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a>
|
|
95
|
-
| <a href="./src/rules/no-unused-css-map/README.md">no-unused-css-map</a>
|
|
96
|
-
| <a href="./src/rules/no-utility-icons/README.md">no-utility-icons</a>
|
|
97
|
-
| <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>
|
|
98
|
-
| <a href="./src/rules/use-button-group-label/README.md">use-button-group-label</a>
|
|
99
|
-
| <a href="./src/rules/use-correct-field/README.md">use-correct-field</a>
|
|
100
|
-
| <a href="./src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a>
|
|
101
|
-
| <a href="./src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a>
|
|
102
|
-
| <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>
|
|
103
|
-
| <a href="./src/rules/use-heading/README.md">use-heading</a>
|
|
104
|
-
| <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">use-heading-level-in-spotlight-card</a>
|
|
105
|
-
| <a href="./src/rules/use-href-in-link-item/README.md">use-href-in-link-item</a>
|
|
106
|
-
| <a href="./src/rules/use-latest-xcss-syntax/README.md">use-latest-xcss-syntax</a>
|
|
107
|
-
| <a href="./src/rules/use-latest-xcss-syntax-typography/README.md">use-latest-xcss-syntax-typography</a>
|
|
108
|
-
| <a href="./src/rules/use-menu-section-title/README.md">use-menu-section-title</a>
|
|
109
|
-
| <a href="./src/rules/use-modal-dialog-close-button/README.md">use-modal-dialog-close-button</a>
|
|
110
|
-
| <a href="./src/rules/use-onboarding-spotlight-label/README.md">use-onboarding-spotlight-label</a>
|
|
111
|
-
| <a href="./src/rules/use-popup-label/README.md">use-popup-label</a>
|
|
112
|
-
| <a href="./src/rules/use-primitives/README.md">use-primitives</a>
|
|
113
|
-
| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a>
|
|
114
|
-
| <a href="./src/rules/use-should-render-to-parent/README.md">use-should-render-to-parent</a>
|
|
115
|
-
| <a href="./src/rules/use-spotlight-package/README.md">use-spotlight-package</a>
|
|
116
|
-
| <a href="./src/rules/use-tag-group-label/README.md">use-tag-group-label</a>
|
|
117
|
-
| <a href="./src/rules/use-tokens-shape/README.md">use-tokens-shape</a>
|
|
118
|
-
| <a href="./src/rules/use-tokens-space/README.md">use-tokens-space</a>
|
|
119
|
-
| <a href="./src/rules/use-tokens-typography/README.md">use-tokens-typography</a>
|
|
120
|
-
| <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a>
|
|
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-isBold-and-lozenge-badge-appearance-migration/README.md">lozenge-isBold-and-lozenge-badge-appearance-migration</a> | Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) 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::df988d512376c1317e5f7a350ad19fb9>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -21,7 +21,7 @@ var rules = {
|
|
|
21
21
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
22
22
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
23
23
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
24
|
-
'@atlaskit/design-system/lozenge-
|
|
24
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
25
25
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
26
26
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
27
27
|
'@atlaskit/design-system/no-css-tagged-template-expression': '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::2dee8518d733b0b364809d0f5641afda>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -20,7 +20,7 @@ var rules = {
|
|
|
20
20
|
'@atlaskit/design-system/ensure-icon-color': 'error',
|
|
21
21
|
'@atlaskit/design-system/ensure-proper-xcss-usage': 'error',
|
|
22
22
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
23
|
-
'@atlaskit/design-system/lozenge-
|
|
23
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
24
24
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
25
25
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
26
26
|
'@atlaskit/design-system/no-css-tagged-template-expression': '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::7ed1a8eeaaea559980cb2c533ba9a2e6>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -17,7 +17,7 @@ var rules = {
|
|
|
17
17
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
18
18
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
19
19
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
20
|
-
'@atlaskit/design-system/lozenge-
|
|
20
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
22
22
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
23
23
|
'@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::32a0942d7edc5a3fdc70dd0833bb8aca>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
|
|
@@ -16,7 +16,7 @@ var rules = {
|
|
|
16
16
|
'@atlaskit/design-system/consistent-css-prop-usage': 'error',
|
|
17
17
|
'@atlaskit/design-system/ensure-design-token-usage': 'error',
|
|
18
18
|
'@atlaskit/design-system/icon-label': 'warn',
|
|
19
|
-
'@atlaskit/design-system/lozenge-
|
|
19
|
+
'@atlaskit/design-system/lozenge-isBold-and-lozenge-badge-appearance-migration': 'warn',
|
|
20
20
|
'@atlaskit/design-system/no-banned-imports': 'error',
|
|
21
21
|
'@atlaskit/design-system/no-boolean-autofocus-on-modal-dialog': 'warn',
|
|
22
22
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
@@ -12,7 +12,7 @@ var _ensureDesignTokenUsagePreview = _interopRequireDefault(require("./ensure-de
|
|
|
12
12
|
var _ensureIconColor = _interopRequireDefault(require("./ensure-icon-color"));
|
|
13
13
|
var _ensureProperXcssUsage = _interopRequireDefault(require("./ensure-proper-xcss-usage"));
|
|
14
14
|
var _iconLabel = _interopRequireDefault(require("./icon-label"));
|
|
15
|
-
var
|
|
15
|
+
var _lozengeIsBoldAndLozengeBadgeAppearanceMigration = _interopRequireDefault(require("./lozenge-isBold-and-lozenge-badge-appearance-migration"));
|
|
16
16
|
var _noBannedImports = _interopRequireDefault(require("./no-banned-imports"));
|
|
17
17
|
var _noBooleanAutofocusOnModalDialog = _interopRequireDefault(require("./no-boolean-autofocus-on-modal-dialog"));
|
|
18
18
|
var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-tagged-template-expression"));
|
|
@@ -76,7 +76,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
|
|
|
76
76
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
77
77
|
/**
|
|
78
78
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
79
|
-
* @codegen <<SignedSource::
|
|
79
|
+
* @codegen <<SignedSource::c74b833590d4eb693616a3fcbf2e335a>>
|
|
80
80
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
81
81
|
*/
|
|
82
82
|
|
|
@@ -88,7 +88,7 @@ var rules = exports.rules = {
|
|
|
88
88
|
'ensure-icon-color': _ensureIconColor.default,
|
|
89
89
|
'ensure-proper-xcss-usage': _ensureProperXcssUsage.default,
|
|
90
90
|
'icon-label': _iconLabel.default,
|
|
91
|
-
'lozenge-
|
|
91
|
+
'lozenge-isBold-and-lozenge-badge-appearance-migration': _lozengeIsBoldAndLozengeBadgeAppearanceMigration.default,
|
|
92
92
|
'no-banned-imports': _noBannedImports.default,
|
|
93
93
|
'no-boolean-autofocus-on-modal-dialog': _noBooleanAutofocusOnModalDialog.default,
|
|
94
94
|
'no-css-tagged-template-expression': _noCssTaggedTemplateExpression.default,
|
|
@@ -8,18 +8,20 @@ var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
|
8
8
|
var _createRule = require("../utils/create-rule");
|
|
9
9
|
var rule = (0, _createRule.createLintRule)({
|
|
10
10
|
meta: {
|
|
11
|
-
name: 'lozenge-
|
|
11
|
+
name: 'lozenge-isBold-and-lozenge-badge-appearance-migration',
|
|
12
12
|
fixable: 'code',
|
|
13
13
|
type: 'suggestion',
|
|
14
14
|
docs: {
|
|
15
|
-
description: 'Helps migrate
|
|
15
|
+
description: 'Helps migrate Lozenge isBold prop and appearance values (for both Lozenge and Badge components) as part of the Labelling System Phase 1 migration.',
|
|
16
16
|
recommended: true,
|
|
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
|
-
manualReview: "Dynamic 'isBold' props require manual review before migration."
|
|
22
|
+
manualReview: "Dynamic 'isBold' props require manual review before migration.",
|
|
23
|
+
updateBadgeAppearance: 'Update Badge appearance value "{{oldValue}}" to new semantic value "{{newValue}}".',
|
|
24
|
+
dynamicBadgeAppearance: 'Dynamic appearance prop values require manual review to ensure they use the new semantic values: neutral, information, inverse, danger, success.'
|
|
23
25
|
}
|
|
24
26
|
},
|
|
25
27
|
create: function create(context) {
|
|
@@ -28,6 +30,11 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
28
30
|
*/
|
|
29
31
|
var lozengeImports = {}; // local name -> import source
|
|
30
32
|
|
|
33
|
+
/**
|
|
34
|
+
* Contains a map of imported Badge components.
|
|
35
|
+
*/
|
|
36
|
+
var badgeImports = {}; // local name -> import source
|
|
37
|
+
|
|
31
38
|
/**
|
|
32
39
|
* Check if a JSX attribute value is a literal false
|
|
33
40
|
*/
|
|
@@ -36,14 +43,25 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
36
43
|
}
|
|
37
44
|
|
|
38
45
|
/**
|
|
39
|
-
* Check if a JSX attribute value is dynamic (not a literal
|
|
46
|
+
* Check if a JSX attribute value is dynamic (not a static literal value)
|
|
47
|
+
* Can be used for any prop type (boolean, string, etc.)
|
|
40
48
|
*/
|
|
41
49
|
function isDynamicExpression(node) {
|
|
42
|
-
if (!node
|
|
50
|
+
if (!node) {
|
|
51
|
+
return false;
|
|
52
|
+
}
|
|
53
|
+
|
|
54
|
+
// If it's a plain literal (e.g., appearance="value"), it's not dynamic
|
|
55
|
+
if (node.type === 'Literal') {
|
|
43
56
|
return false;
|
|
44
57
|
}
|
|
45
|
-
|
|
46
|
-
|
|
58
|
+
|
|
59
|
+
// If it's an expression container with a non-literal expression, it's dynamic
|
|
60
|
+
if (node.type === 'JSXExpressionContainer') {
|
|
61
|
+
var expr = node.expression;
|
|
62
|
+
return expr && expr.type !== 'Literal';
|
|
63
|
+
}
|
|
64
|
+
return false;
|
|
47
65
|
}
|
|
48
66
|
|
|
49
67
|
/**
|
|
@@ -76,6 +94,21 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
76
94
|
return mapping[oldValue] || oldValue;
|
|
77
95
|
}
|
|
78
96
|
|
|
97
|
+
/**
|
|
98
|
+
* Map Badge old appearance values to new semantic appearance values
|
|
99
|
+
*/
|
|
100
|
+
function mapBadgeToNewAppearanceValue(oldValue) {
|
|
101
|
+
var mapping = {
|
|
102
|
+
added: 'success',
|
|
103
|
+
removed: 'danger',
|
|
104
|
+
default: 'neutral',
|
|
105
|
+
primary: 'information',
|
|
106
|
+
primaryInverted: 'inverse',
|
|
107
|
+
important: 'danger'
|
|
108
|
+
};
|
|
109
|
+
return mapping[oldValue] || oldValue;
|
|
110
|
+
}
|
|
111
|
+
|
|
79
112
|
/**
|
|
80
113
|
* Extract the string value from a JSX attribute value
|
|
81
114
|
*/
|
|
@@ -92,6 +125,25 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
92
125
|
return null;
|
|
93
126
|
}
|
|
94
127
|
|
|
128
|
+
/**
|
|
129
|
+
* Create a fixer function to replace an appearance prop value
|
|
130
|
+
* Handles both Literal and JSXExpressionContainer with Literal
|
|
131
|
+
*/
|
|
132
|
+
function createAppearanceFixer(attrValue, newValue) {
|
|
133
|
+
return function (fixer) {
|
|
134
|
+
if (!attrValue) {
|
|
135
|
+
return null;
|
|
136
|
+
}
|
|
137
|
+
if (attrValue.type === 'Literal') {
|
|
138
|
+
return fixer.replaceText(attrValue, "\"".concat(newValue, "\""));
|
|
139
|
+
}
|
|
140
|
+
if (attrValue.type === 'JSXExpressionContainer' && 'expression' in attrValue && attrValue.expression && attrValue.expression.type === 'Literal') {
|
|
141
|
+
return fixer.replaceText(attrValue.expression, "\"".concat(newValue, "\""));
|
|
142
|
+
}
|
|
143
|
+
return null;
|
|
144
|
+
};
|
|
145
|
+
}
|
|
146
|
+
|
|
95
147
|
/**
|
|
96
148
|
* Generate the replacement JSX element text
|
|
97
149
|
*/
|
|
@@ -153,6 +205,18 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
153
205
|
}
|
|
154
206
|
});
|
|
155
207
|
}
|
|
208
|
+
// Track Badge imports
|
|
209
|
+
if (moduleSource === '@atlaskit/badge' || moduleSource.startsWith('@atlaskit/badge')) {
|
|
210
|
+
node.specifiers.forEach(function (spec) {
|
|
211
|
+
if (spec.type === 'ImportDefaultSpecifier') {
|
|
212
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
213
|
+
} else if (spec.type === 'ImportSpecifier' && spec.imported.type === 'Identifier') {
|
|
214
|
+
if (spec.imported.name === 'Badge' || spec.imported.name === 'default') {
|
|
215
|
+
badgeImports[spec.local.name] = moduleSource;
|
|
216
|
+
}
|
|
217
|
+
}
|
|
218
|
+
});
|
|
219
|
+
}
|
|
156
220
|
}
|
|
157
221
|
},
|
|
158
222
|
JSXElement: function JSXElement(node) {
|
|
@@ -164,6 +228,45 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
164
228
|
}
|
|
165
229
|
var elementName = node.openingElement.name.name;
|
|
166
230
|
|
|
231
|
+
// Handle Badge components
|
|
232
|
+
if (badgeImports[elementName]) {
|
|
233
|
+
// Find the appearance prop
|
|
234
|
+
var _appearanceProp = node.openingElement.attributes.find(function (attr) {
|
|
235
|
+
return attr.type === 'JSXAttribute' && attr.name.type === 'JSXIdentifier' && attr.name.name === 'appearance';
|
|
236
|
+
});
|
|
237
|
+
if (!_appearanceProp || _appearanceProp.type !== 'JSXAttribute') {
|
|
238
|
+
// No appearance prop or it's a spread attribute, nothing to migrate
|
|
239
|
+
return;
|
|
240
|
+
}
|
|
241
|
+
|
|
242
|
+
// Check if it's a dynamic expression
|
|
243
|
+
if (isDynamicExpression(_appearanceProp.value)) {
|
|
244
|
+
context.report({
|
|
245
|
+
node: _appearanceProp,
|
|
246
|
+
messageId: 'dynamicBadgeAppearance'
|
|
247
|
+
});
|
|
248
|
+
return;
|
|
249
|
+
}
|
|
250
|
+
|
|
251
|
+
// Extract the string value
|
|
252
|
+
var stringValue = extractStringValue(_appearanceProp.value);
|
|
253
|
+
if (stringValue && typeof stringValue === 'string') {
|
|
254
|
+
var mappedValue = mapBadgeToNewAppearanceValue(stringValue);
|
|
255
|
+
if (mappedValue !== stringValue) {
|
|
256
|
+
context.report({
|
|
257
|
+
node: _appearanceProp,
|
|
258
|
+
messageId: 'updateBadgeAppearance',
|
|
259
|
+
data: {
|
|
260
|
+
oldValue: stringValue,
|
|
261
|
+
newValue: mappedValue
|
|
262
|
+
},
|
|
263
|
+
fix: createAppearanceFixer(_appearanceProp.value, mappedValue)
|
|
264
|
+
});
|
|
265
|
+
}
|
|
266
|
+
}
|
|
267
|
+
return;
|
|
268
|
+
}
|
|
269
|
+
|
|
167
270
|
// Only process if this is a Lozenge component we've imported
|
|
168
271
|
if (!lozengeImports[elementName]) {
|
|
169
272
|
return;
|
|
@@ -177,21 +280,14 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
177
280
|
var shouldMigrateToTag = !isBoldProp || isLiteralFalse(isBoldProp.value);
|
|
178
281
|
if (!shouldMigrateToTag) {
|
|
179
282
|
// Only update appearance values for Lozenge components that stay as Lozenge
|
|
180
|
-
var
|
|
181
|
-
if (
|
|
182
|
-
var
|
|
183
|
-
if (
|
|
283
|
+
var _stringValue = extractStringValue(appearanceProp.value);
|
|
284
|
+
if (_stringValue && typeof _stringValue === 'string') {
|
|
285
|
+
var _mappedValue = mapToNewAppearanceValue(_stringValue);
|
|
286
|
+
if (_mappedValue !== _stringValue) {
|
|
184
287
|
context.report({
|
|
185
288
|
node: appearanceProp,
|
|
186
289
|
messageId: 'updateAppearance',
|
|
187
|
-
fix:
|
|
188
|
-
if (appearanceProp.value.type === 'Literal') {
|
|
189
|
-
return fixer.replaceText(appearanceProp.value, "\"".concat(mappedValue, "\""));
|
|
190
|
-
} else if (appearanceProp.value.type === 'JSXExpressionContainer' && appearanceProp.value.expression && appearanceProp.value.expression.type === 'Literal') {
|
|
191
|
-
return fixer.replaceText(appearanceProp.value.expression, "\"".concat(mappedValue, "\""));
|
|
192
|
-
}
|
|
193
|
-
return null;
|
|
194
|
-
}
|
|
290
|
+
fix: createAppearanceFixer(appearanceProp.value, _mappedValue)
|
|
195
291
|
});
|
|
196
292
|
}
|
|
197
293
|
}
|