@atlaskit/eslint-plugin-design-system 11.0.2 → 11.2.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.
Files changed (38) hide show
  1. package/CHANGELOG.md +33 -0
  2. package/README.md +49 -49
  3. package/dist/cjs/rules/no-deprecated-apis/index.js +14 -27
  4. package/dist/cjs/rules/no-legacy-icons/checks.js +14 -3
  5. package/dist/cjs/rules/no-legacy-icons/helpers.js +3 -14
  6. package/dist/cjs/rules/no-legacy-icons/index.js +3 -0
  7. package/dist/cjs/rules/use-tokens-typography/index.js +1 -1
  8. package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js +37 -16
  9. package/dist/cjs/rules/use-tokens-typography/utils.js +10 -0
  10. package/dist/es2019/rules/no-deprecated-apis/index.js +15 -24
  11. package/dist/es2019/rules/no-legacy-icons/checks.js +14 -3
  12. package/dist/es2019/rules/no-legacy-icons/helpers.js +3 -14
  13. package/dist/es2019/rules/no-legacy-icons/index.js +3 -0
  14. package/dist/es2019/rules/use-tokens-typography/index.js +1 -1
  15. package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js +35 -14
  16. package/dist/es2019/rules/use-tokens-typography/utils.js +3 -0
  17. package/dist/esm/rules/no-deprecated-apis/index.js +15 -27
  18. package/dist/esm/rules/no-legacy-icons/checks.js +14 -3
  19. package/dist/esm/rules/no-legacy-icons/helpers.js +3 -14
  20. package/dist/esm/rules/no-legacy-icons/index.js +3 -0
  21. package/dist/esm/rules/use-tokens-typography/index.js +1 -1
  22. package/dist/esm/rules/use-tokens-typography/transformers/style-object.js +38 -17
  23. package/dist/esm/rules/use-tokens-typography/utils.js +9 -0
  24. package/dist/types/index.codegen.d.ts +3 -9
  25. package/dist/types/rules/index.codegen.d.ts +1 -3
  26. package/dist/types/rules/no-deprecated-apis/index.d.ts +2 -5
  27. package/dist/types/rules/no-legacy-icons/helpers.d.ts +1 -0
  28. package/dist/types/rules/use-tokens-typography/utils.d.ts +80 -0
  29. package/dist/types/rules/utils/create-no-tagged-template-expression-rule/index.d.ts +1 -1
  30. package/dist/types/rules/utils/create-rule.d.ts +1 -1
  31. package/dist/types-ts4.5/index.codegen.d.ts +3 -15
  32. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -5
  33. package/dist/types-ts4.5/rules/no-deprecated-apis/index.d.ts +2 -7
  34. package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts +1 -0
  35. package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts +80 -0
  36. package/dist/types-ts4.5/rules/utils/create-no-tagged-template-expression-rule/index.d.ts +1 -1
  37. package/dist/types-ts4.5/rules/utils/create-rule.d.ts +1 -1
  38. package/package.json +4 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,38 @@
1
1
  # @atlaskit/eslint-plugin-design-system
2
2
 
3
+ ## 11.2.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [#175583](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/175583)
8
+ [`75911cb003bd5`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/75911cb003bd5) - ####
9
+ no-legacy-icons
10
+
11
+ Add new `shouldUseSafeMigrationMode` flag to no-legacy-icons rule. When set to true, the autofixer
12
+ will only attempt to migrate icons that are visually similar and do not include secondary colors
13
+ or sizes other than medium.
14
+
15
+ Additionally, the autofixer will no longer attempt to explicity add `color="currentColor"` for
16
+ every migration as this is now the default.
17
+
18
+ #### no-deprecated-apis
19
+
20
+ Refactored to fix type errors and match code style of other rules.
21
+
22
+ ### Patch Changes
23
+
24
+ - Updated dependencies
25
+
26
+ ## 11.1.0
27
+
28
+ ### Minor Changes
29
+
30
+ - [#169407](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169407)
31
+ [`fc5784691adcf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc5784691adcf) -
32
+ `use-tokens-typography` rule now reports on `fontSize` used with tokens since this is invalid
33
+ syntax. If the token is a typography token, it will suggest switching `fontSize` to `font` with a
34
+ fixer. If the token is not a typography token it will only report.
35
+
3
36
  ## 11.0.2
4
37
 
5
38
  ### Patch Changes
package/README.md CHANGED
@@ -47,54 +47,54 @@ module.exports = {
47
47
  <!-- START_RULE_TABLE_CODEGEN -->
48
48
  <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
49
49
 
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/ensure-design-token-usage/README.md">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |
54
- | <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 |
55
- | <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. | | | |
56
- | <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 | |
57
- | <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
58
- | <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 | |
59
- | <a href="./src/rules/no-custom-icons/README.md">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |
60
- | <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 | |
61
- | <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
62
- | <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
63
- | <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |
64
- | <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 | | |
65
- | <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). | | | |
66
- | <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. | | | |
67
- | <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. | | | |
68
- | <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 |
69
- | <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 | | |
70
- | <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 | | |
71
- | <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 | |
72
- | <a href="./src/rules/no-legacy-icons/README.md">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |
73
- | <a href="./src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
74
- | <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
75
- | <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
76
- | <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 | | |
77
- | <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 | |
78
- | <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 | |
79
- | <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 | | |
80
- | <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 | | |
81
- | <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. | | | |
82
- | <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 |
83
- | <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 |
84
- | <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 |
85
- | <a href="./src/rules/use-heading/README.md">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
86
- | <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 | |
87
- | <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 |
88
- | <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 | |
89
- | <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 | |
90
- | <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 |
91
- | <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 |
92
- | <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 |
93
- | <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
94
- | <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
95
- | <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 |
96
- | <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 |
97
- | <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 |
98
- | <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
50
+ | Rule | Description | Recommended | Fixable | Suggestions |
51
+ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
52
+ | <a href="./packages/design-system/eslint-plugin/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="./packages/design-system/eslint-plugin/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 |
54
+ | <a href="./packages/design-system/eslint-plugin/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 |
55
+ | <a href="./packages/design-system/eslint-plugin/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. | | | |
56
+ | <a href="./packages/design-system/eslint-plugin/src/rules/icon-label/README.md">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
57
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-banned-imports/README.md">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
58
+ | <a href="./packages/design-system/eslint-plugin/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 | |
59
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-custom-icons/README.md">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |
60
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-dark-theme-vr-tests/README.md">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |
61
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
62
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
63
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |
64
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
65
+ | <a href="./packages/design-system/eslint-plugin/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). | | | |
66
+ | <a href="./packages/design-system/eslint-plugin/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. | | | |
67
+ | <a href="./packages/design-system/eslint-plugin/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. | | | |
68
+ | <a href="./packages/design-system/eslint-plugin/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 |
69
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
70
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
71
+ | <a href="./packages/design-system/eslint-plugin/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 | |
72
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-legacy-icons/README.md">no-legacy-icons</a> | Enforces no legacy icons are used. | | Yes | Yes |
73
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
74
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
75
+ | <a href="./packages/design-system/eslint-plugin/src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
76
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
77
+ | <a href="./packages/design-system/eslint-plugin/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 | |
78
+ | <a href="./packages/design-system/eslint-plugin/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 | |
79
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
80
+ | <a href="./packages/design-system/eslint-plugin/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 | | |
81
+ | <a href="./packages/design-system/eslint-plugin/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. | | | |
82
+ | <a href="./packages/design-system/eslint-plugin/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 |
83
+ | <a href="./packages/design-system/eslint-plugin/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 |
84
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-drawer-label/README.md">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
85
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-heading/README.md">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
86
+ | <a href="./packages/design-system/eslint-plugin/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 | |
87
+ | <a href="./packages/design-system/eslint-plugin/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 |
88
+ | <a href="./packages/design-system/eslint-plugin/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 | |
89
+ | <a href="./packages/design-system/eslint-plugin/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 | |
90
+ | <a href="./packages/design-system/eslint-plugin/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 |
91
+ | <a href="./packages/design-system/eslint-plugin/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 |
92
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-popup-label/README.md">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
93
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
94
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
95
+ | <a href="./packages/design-system/eslint-plugin/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 |
96
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-tokens-space/README.md">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
97
+ | <a href="./packages/design-system/eslint-plugin/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 |
98
+ | <a href="./packages/design-system/eslint-plugin/src/rules/use-visually-hidden/README.md">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
99
99
 
100
100
  <!-- END_RULE_TABLE_CODEGEN -->
@@ -1,43 +1,36 @@
1
1
  "use strict";
2
2
 
3
- var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
4
3
  Object.defineProperty(exports, "__esModule", {
5
4
  value: true
6
5
  });
7
6
  exports.noDeprecatedJSXAttributeMessageId = exports.name = exports.default = void 0;
8
- var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
9
- var _utils = require("@typescript-eslint/utils");
7
+ var _eslintCodemodUtils = require("eslint-codemod-utils");
10
8
  var _createRule = require("../utils/create-rule");
11
9
  var _getDeprecatedConfig = require("../utils/get-deprecated-config");
12
10
  var _types = require("../utils/types");
13
11
  var noDeprecatedJSXAttributeMessageId = exports.noDeprecatedJSXAttributeMessageId = 'noDeprecatedJSXAttributes';
14
- var isNodeOfType = function isNodeOfType(node, nodeType) {
15
- return _utils.ASTUtils.isNodeOfType(nodeType)(node);
16
- };
17
12
  var isImportDeclaration = function isImportDeclaration(programStatement) {
18
13
  return (programStatement === null || programStatement === void 0 ? void 0 : programStatement.type) === 'ImportDeclaration';
19
14
  };
20
15
  var findJSXElementName = function findJSXElementName(jsxAttributeNode) {
21
- if (!jsxAttributeNode.parent || !isNodeOfType(jsxAttributeNode.parent, _utils.AST_NODE_TYPES.JSXOpeningElement)) {
16
+ if (!jsxAttributeNode.parent || !(0, _eslintCodemodUtils.isNodeOfType)(jsxAttributeNode === null || jsxAttributeNode === void 0 ? void 0 : jsxAttributeNode.parent, 'JSXOpeningElement')) {
22
17
  return;
23
18
  }
24
19
  var openingElement = jsxAttributeNode.parent;
25
- if (!isNodeOfType(openingElement.name, _utils.AST_NODE_TYPES.JSXIdentifier)) {
20
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(openingElement.name, 'JSXIdentifier')) {
26
21
  return;
27
22
  }
28
23
  return openingElement.name.name;
29
24
  };
30
25
  var name = exports.name = 'no-deprecated-apis';
31
- var rule = (0, _createRule.createRule)({
32
- name: name,
33
- defaultOptions: [{
34
- deprecatedConfig: (0, _getDeprecatedConfig.getConfig)('jsxAttributes')
35
- }],
26
+ var rule = (0, _createRule.createLintRule)({
36
27
  meta: {
28
+ name: name,
37
29
  type: 'suggestion',
38
30
  docs: {
39
31
  description: 'Disallow using deprecated APIs.',
40
- recommended: 'error'
32
+ recommended: true,
33
+ severity: 'error'
41
34
  },
42
35
  messages: {
43
36
  noDeprecatedJSXAttributes: 'The JSX attribute {{propName}} has been deprecated.'
@@ -67,7 +60,7 @@ var rule = (0, _createRule.createRule)({
67
60
  }
68
61
  },
69
62
  required: ['moduleSpecifier'],
70
- additionalProperites: false
63
+ additionalProperties: false
71
64
  }
72
65
  }
73
66
  }
@@ -75,24 +68,18 @@ var rule = (0, _createRule.createRule)({
75
68
  }
76
69
  }]
77
70
  },
78
- create: function create(context, _ref) {
71
+ create: function create(context) {
79
72
  var _context$options$;
80
- var _ref2 = (0, _slicedToArray2.default)(_ref, 1),
81
- options = _ref2[0];
82
- // Get rule configuration
83
- var defaultDeprecatedConfig = options.deprecatedConfig;
84
-
85
73
  // Get the rule configuration specified otherwise use default config.
86
74
  // A bit confusing as it seems that the default options have precedence over the user specified options.
87
- var deprecatedConfig = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || defaultDeprecatedConfig;
75
+ var deprecatedConfig = ((_context$options$ = context.options[0]) === null || _context$options$ === void 0 ? void 0 : _context$options$.deprecatedConfig) || (0, _getDeprecatedConfig.getConfig)('jsxAttributes');
88
76
  return {
89
77
  // find JSX atribute - find name of attribute - get source and find relevant identifiers.
90
78
  JSXAttribute: function JSXAttribute(node) {
91
- var jsxAttributeIdentifier = node.name;
92
- if (!isNodeOfType(jsxAttributeIdentifier, _utils.AST_NODE_TYPES.JSXIdentifier)) {
79
+ if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXAttribute') || !(0, _eslintCodemodUtils.isNodeOfType)(node.name, 'JSXIdentifier')) {
93
80
  return;
94
81
  }
95
- var jsxAttributeName = jsxAttributeIdentifier.name;
82
+ var jsxAttributeName = node.name.name;
96
83
  if (!(0, _types.isDeprecatedJSXAttributeConfig)(deprecatedConfig) || !deprecatedConfig[jsxAttributeName]) {
97
84
  return;
98
85
  }
@@ -100,13 +87,13 @@ var rule = (0, _createRule.createRule)({
100
87
  if (!jsxElementName) {
101
88
  return;
102
89
  }
103
- var source = context.getSourceCode();
90
+ var source = context.sourceCode;
104
91
 
105
92
  // find an import for the path of the banned api
106
93
  deprecatedConfig[jsxAttributeName].forEach(function (importItem) {
107
94
  var _importItem$namedSpec;
108
95
  var importNode = source.ast.body.filter(isImportDeclaration).find(function (node) {
109
- return node.source.value.includes(importItem.moduleSpecifier);
96
+ return node && node.source.value && typeof node.source.value === 'string' && node.source.value.includes(importItem.moduleSpecifier);
110
97
  });
111
98
  if (!importNode) {
112
99
  return;
@@ -10,7 +10,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
10
10
  function _unsupportedIterableToArray(r, a) { if (r) { if ("string" == typeof r) return _arrayLikeToArray(r, a); var t = {}.toString.call(r).slice(8, -1); return "Object" === t && r.constructor && (t = r.constructor.name), "Map" === t || "Set" === t ? Array.from(r) : "Arguments" === t || /^(?:Ui|I)nt(?:8|16|32)(?:Clamped)?Array$/.test(t) ? _arrayLikeToArray(r, a) : void 0; } }
11
11
  function _arrayLikeToArray(r, a) { (null == a || a > r.length) && (a = r.length); for (var e = 0, n = Array(a); e < a; e++) n[e] = r[e]; return n; }
12
12
  var createChecks = exports.createChecks = function createChecks(context) {
13
- //create global variables to be shared by the checks
13
+ // Create global variables to be shared by the checks
14
14
  var _createHelpers = (0, _helpers.createHelpers)(context),
15
15
  getPrimaryColor = _createHelpers.getPrimaryColor,
16
16
  getConfigFlag = _createHelpers.getConfigFlag;
@@ -27,6 +27,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
27
27
  var shouldErrorForAutoMigration = getConfigFlag('shouldErrorForAutoMigration', true);
28
28
  var isQuietMode = getConfigFlag('quiet', false);
29
29
  var shouldUseMigrationPath = getConfigFlag('shouldUseMigrationPath', true);
30
+ var shouldUseSafeMigrationMode = getConfigFlag('shouldUseSafeMigrationMode', false);
30
31
 
31
32
  // Sorted list of ranges
32
33
  var errorRanges = [];
@@ -411,10 +412,11 @@ var createChecks = exports.createChecks = function createChecks(context) {
411
412
  // Find size prop on node
412
413
  var size = 'medium';
413
414
  var primaryColor = null;
415
+ var hasPrimaryColorProp = false;
416
+ var hasSecondaryColorProp = false;
414
417
  var afterSpreadSet = new Set();
415
418
  var requiredAttributesAfterSpread = new Set(['size', 'primaryColor', 'secondaryColor']);
416
419
  var hasSpread = false;
417
- var hasPrimaryColorProp = false;
418
420
  var _iterator8 = _createForOfIteratorHelper(node.openingElement.attributes),
419
421
  _step8;
420
422
  try {
@@ -449,6 +451,9 @@ var createChecks = exports.createChecks = function createChecks(context) {
449
451
  primaryColor = getPrimaryColor(attr);
450
452
  hasPrimaryColorProp = true;
451
453
  break;
454
+ case 'secondaryColor':
455
+ hasSecondaryColorProp = true;
456
+ break;
452
457
  }
453
458
  }
454
459
  } catch (err) {
@@ -457,6 +462,8 @@ var createChecks = exports.createChecks = function createChecks(context) {
457
462
  _iterator8.f();
458
463
  }
459
464
  var hasManualMigration = false;
465
+
466
+ // Flag manual migration if primary color cannot be migrated
460
467
  if (primaryColor && !(0, _helpers.canMigrateColor)(primaryColor) || hasPrimaryColorProp && !primaryColor) {
461
468
  (0, _helpers.createCantMigrateColorError)(node, primaryColor ? "the value of '".concat(primaryColor, "'") : 'a statically unknown value', errorsManual, legacyIconImports[name].packageName, name);
462
469
  hasManualMigration = true;
@@ -468,6 +475,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
468
475
  (0, _helpers.createCantMigrateSizeUnknown)(node, errorsManual, legacyIconImports[name].packageName, name);
469
476
  hasManualMigration = true;
470
477
  }
478
+
471
479
  // Do a set comparison - is requiredAttributesAfterSpread a subset of afterSpreadSet?
472
480
  if (hasSpread === true && !Array.from(requiredAttributesAfterSpread).every(function (val) {
473
481
  return afterSpreadSet.has(val);
@@ -478,6 +486,7 @@ var createChecks = exports.createChecks = function createChecks(context) {
478
486
  (0, _helpers.createCantMigrateSpreadPropsError)(node, missingProps, errorsManual, legacyIconImports[name].packageName, name);
479
487
  hasManualMigration = true;
480
488
  }
489
+
481
490
  // Check if it is an exported component?
482
491
  if (legacyIconImports[name].exported) {
483
492
  (0, _helpers.createCantMigrateReExportError)(node, legacyIconImports[name].packageName, name, errorsManual);
@@ -507,7 +516,9 @@ var createChecks = exports.createChecks = function createChecks(context) {
507
516
  spacing = 'spacious';
508
517
  }
509
518
  }
510
- if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
519
+ if (shouldUseSafeMigrationMode && !hasManualMigration && (newIcon !== null && newIcon !== void 0 && newIcon.isMigrationUnsafe || size !== 'medium' || hasSecondaryColorProp)) {
520
+ (0, _helpers.createCantFindSuitableReplacementError)(node, legacyIconImports[name].packageName, name, errorsManual, upcomingIcon ? true : migrationMapObject ? true : false);
521
+ } else if (!hasManualMigration && (newIcon || upcomingIcon) && isNewIconMigratable) {
511
522
  (0, _helpers.createAutoMigrationError)({
512
523
  node: node,
513
524
  importSource: legacyIconImports[name].packageName,
@@ -480,8 +480,7 @@ var createPropFixes = function createPropFixes(_ref7) {
480
480
  migrationImportNode = _ref7.migrationImportNode,
481
481
  newIconName = _ref7.newIconName;
482
482
  var fixes = [];
483
- var spacing = metadata.spacing,
484
- insideNewButton = metadata.insideNewButton;
483
+ var spacing = metadata.spacing;
485
484
  if (shouldUseMigrationPath && !legacyImportNode) {
486
485
  return fixes;
487
486
  }
@@ -498,16 +497,6 @@ var createPropFixes = function createPropFixes(_ref7) {
498
497
  fixes.push(fixer.replaceText(primaryColor.name, 'color'));
499
498
  }
500
499
 
501
- // add color="currentColor" if
502
- // 1. primaryColor prop is not set
503
- // 2. icon is not imported from migration entrypoint
504
- // 3. icon element is not inside a new button
505
- if (legacyImportNode && !primaryColor && !migrationImportNode &&
506
- // value type need to be a string in Rule.ReportDescriptor
507
- insideNewButton !== 'true') {
508
- fixes.push(fixer.insertTextAfter(openingElement.name, " color=\"currentColor\""));
509
- }
510
-
511
500
  // rename or remove size prop based on shouldUseMigrationPath,
512
501
  // add spacing="spacious" if
513
502
  // 1. it's in error metadata, which means size is medium
@@ -637,12 +626,12 @@ var throwAutoErrors = exports.throwAutoErrors = function throwAutoErrors(_ref10)
637
626
  }
638
627
  return result;
639
628
  }, new Set());
640
- //group errors by import source and remove any unwanted errors
629
+ // Group errors by import source and remove any unwanted errors
641
630
  var groupedErrorList = Object.entries(errorsAuto).reduce(function (result, option) {
642
631
  var _option2 = (0, _slicedToArray2.default)(option, 2),
643
632
  key = _option2[0],
644
633
  error = _option2[1];
645
- //return early if no data
634
+ // Return early if no data
646
635
  if (!error.data) {
647
636
  return result;
648
637
  }
@@ -28,6 +28,9 @@ var rule = (0, _createRule.createLintRule)({
28
28
  shouldErrorForAutoMigration: {
29
29
  type: 'boolean'
30
30
  },
31
+ shouldUseSafeMigrationMode: {
32
+ type: 'boolean'
33
+ },
31
34
  quiet: {
32
35
  type: 'boolean'
33
36
  },
@@ -32,7 +32,7 @@ var rule = (0, _createRule.createLintRule)({
32
32
  severity: 'warn'
33
33
  },
34
34
  messages: {
35
- noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.'
35
+ noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}>>.\n\nNOTE: Using tokens with the `fontSize` property is invalid. Any `font.heading` or `font.body` tokens must use the CSS `font` property.'
36
36
  },
37
37
  schema: _config.ruleSchema
38
38
  },
@@ -71,22 +71,43 @@ var StyleObject = exports.StyleObject = {
71
71
  }
72
72
 
73
73
  // -- Match tokens --
74
- var matchingTokens = (0, _utils2.findTypographyTokenForValues)(fontSizeValue, lineHeightValue);
75
- if (matchingTokens.length) {
76
- // If we have multiple matching tokens, try matching fontWeight
77
- var matchingTokensWithWeight = matchingTokens.filter(function (token) {
78
- return fontWeightValue ? token.values.fontWeight === fontWeightValue : token;
79
- });
80
- if (matchingTokensWithWeight.length) {
81
- // Possibly narrowed down tokens
82
- matchingTokens = matchingTokensWithWeight;
83
- } else {
84
- // Ended up with 0 matches by matching fontWeight
85
- // return body token and add fontWeight manually
86
- matchingTokens = matchingTokens.filter(function (token) {
87
- return token.tokenName.includes('.body');
74
+ // Check if fontSize is a token (this is invalid syntax but unfortunately a common occurence)
75
+ // We may as well auto-fix `fontSize` to `font` and keep the token.
76
+ // Other tokens like `fontSize: token('space.100')` will not autofix, but still report
77
+ var matchingTokens = [];
78
+ var isFontSizeAToken = (0, _isNode.isDecendantOfGlobalToken)(fontSizeNode.value);
79
+ if (isFontSizeAToken) {
80
+ // Specifically match for valid, non-deprecated font.heading|body|code tokens
81
+ var match = fontSizeValue.match(/font.(body|heading|code)[^']*/);
82
+ if (match) {
83
+ var matchedTokenName = match[0];
84
+ // This is really just a double check to be 100% certain the token exists
85
+ // and that we're not trying to apply a deprecated fontSize token to the font property
86
+ if ((0, _utils2.isValidTypographyToken)(matchedTokenName)) {
87
+ matchingTokens = [{
88
+ tokenName: matchedTokenName
89
+ }];
90
+ }
91
+ }
92
+ } else {
93
+ // Standard matching against fontSize/lineHeight values
94
+ matchingTokens = (0, _utils2.findTypographyTokenForValues)(fontSizeValue, lineHeightValue);
95
+ if (matchingTokens.length) {
96
+ // If we have multiple matching tokens, try matching fontWeight
97
+ var matchingTokensWithWeight = matchingTokens.filter(function (token) {
98
+ return fontWeightValue ? token.values.fontWeight === fontWeightValue : token;
88
99
  });
89
- shouldAddFontWeight = true;
100
+ if (matchingTokensWithWeight.length) {
101
+ // Possibly narrowed down tokens
102
+ matchingTokens = matchingTokensWithWeight;
103
+ } else {
104
+ // Ended up with 0 matches by matching fontWeight
105
+ // return body token and add fontWeight manually
106
+ matchingTokens = matchingTokens.filter(function (token) {
107
+ return token.tokenName.includes('.body');
108
+ });
109
+ shouldAddFontWeight = true;
110
+ }
90
111
  }
91
112
  }
92
113
 
@@ -191,7 +212,7 @@ var StyleObject = exports.StyleObject = {
191
212
 
192
213
  // -- Font size --
193
214
  var fontSizeNode = _astNodes.Object.getEntryByPropertyName(node, 'fontSize');
194
- if (!fontSizeNode || !(0, _utils2.isValidPropertyNode)(fontSizeNode) || (0, _isNode.isDecendantOfGlobalToken)(fontSizeNode.value)) {
215
+ if (!fontSizeNode || !(0, _utils2.isValidPropertyNode)(fontSizeNode)) {
195
216
  return {
196
217
  success: false
197
218
  };
@@ -16,6 +16,7 @@ exports.insertFallbackImportSpecifier = insertFallbackImportSpecifier;
16
16
  exports.insertTokensImport = insertTokensImport;
17
17
  exports.isTypographyProperty = exports.isFontSizeSmall = exports.isFontSize = exports.isFontFamily = exports.isCodeFontFamily = void 0;
18
18
  exports.isValidPropertyNode = isValidPropertyNode;
19
+ exports.isValidTypographyToken = isValidTypographyToken;
19
20
  exports.notUndefined = notUndefined;
20
21
  exports.typographyValueToToken = exports.typographyProperties = void 0;
21
22
  var _eslintCodemodUtils = require("eslint-codemod-utils");
@@ -69,6 +70,15 @@ var typographyValueToToken = exports.typographyValueToToken = _tokensRaw.typogra
69
70
  values: individualValues
70
71
  };
71
72
  });
73
+ function isValidTypographyToken(tokenName) {
74
+ return _tokensRaw.typographyAdg3.filter(function (t) {
75
+ return t.attributes.group === 'typography';
76
+ }).filter(function (t) {
77
+ return t.cleanName.includes('font.heading') || t.cleanName.includes('font.body') || t.cleanName.includes('font.code');
78
+ }).find(function (t) {
79
+ return t.cleanName === tokenName;
80
+ });
81
+ }
72
82
  function findTypographyTokenForValues(fontSize, lineHeight) {
73
83
  var matchingTokens = typographyValueToToken.filter(function (token) {
74
84
  return token.values.fontSize === fontSize;