@atlaskit/eslint-plugin-design-system 11.0.1 → 11.1.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 +20 -0
- package/README.md +49 -49
- package/dist/cjs/rules/no-deprecated-apis/index.js +2 -2
- package/dist/cjs/rules/no-legacy-icons/helpers.js +10 -10
- package/dist/cjs/rules/use-tokens-typography/index.js +1 -1
- package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js +37 -16
- package/dist/cjs/rules/use-tokens-typography/utils.js +10 -0
- package/dist/es2019/rules/no-deprecated-apis/index.js +2 -2
- package/dist/es2019/rules/no-legacy-icons/helpers.js +1 -1
- package/dist/es2019/rules/use-tokens-typography/index.js +1 -1
- package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js +35 -14
- package/dist/es2019/rules/use-tokens-typography/utils.js +3 -0
- package/dist/esm/rules/no-deprecated-apis/index.js +2 -2
- package/dist/esm/rules/no-legacy-icons/helpers.js +1 -1
- package/dist/esm/rules/use-tokens-typography/index.js +1 -1
- package/dist/esm/rules/use-tokens-typography/transformers/style-object.js +38 -17
- package/dist/esm/rules/use-tokens-typography/utils.js +9 -0
- package/dist/types/rules/no-deprecated-apis/index.d.ts +2 -3
- package/dist/types/rules/no-legacy-icons/helpers.d.ts +1 -1
- package/dist/types/rules/use-tokens-typography/utils.d.ts +80 -0
- package/dist/types/rules/utils/create-no-tagged-template-expression-rule/index.d.ts +1 -1
- package/dist/types/rules/utils/create-rule.d.ts +1 -1
- package/dist/types-ts4.5/rules/no-deprecated-apis/index.d.ts +2 -3
- package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts +1 -1
- package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts +80 -0
- package/dist/types-ts4.5/rules/utils/create-no-tagged-template-expression-rule/index.d.ts +1 -1
- package/dist/types-ts4.5/rules/utils/create-rule.d.ts +1 -1
- package/package.json +5 -4
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,25 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 11.1.0
|
|
4
|
+
|
|
5
|
+
### Minor Changes
|
|
6
|
+
|
|
7
|
+
- [#169407](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/169407)
|
|
8
|
+
[`fc5784691adcf`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/fc5784691adcf) -
|
|
9
|
+
`use-tokens-typography` rule now reports on `fontSize` used with tokens since this is invalid
|
|
10
|
+
syntax. If the token is a typography token, it will suggest switching `fontSize` to `font` with a
|
|
11
|
+
fixer. If the token is not a typography token it will only report.
|
|
12
|
+
|
|
13
|
+
## 11.0.2
|
|
14
|
+
|
|
15
|
+
### Patch Changes
|
|
16
|
+
|
|
17
|
+
- [#171994](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/171994)
|
|
18
|
+
[`be58e4bb2e387`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/be58e4bb2e387) -
|
|
19
|
+
Migrating usages of UNSAFE types and entrypoints that have been renamed in `@atlaskit/icon` and
|
|
20
|
+
`@atlaskit/icon-lab`.
|
|
21
|
+
- Updated dependencies
|
|
22
|
+
|
|
3
23
|
## 11.0.1
|
|
4
24
|
|
|
5
25
|
### 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
|
|
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 -->
|
|
@@ -37,7 +37,7 @@ var rule = (0, _createRule.createRule)({
|
|
|
37
37
|
type: 'suggestion',
|
|
38
38
|
docs: {
|
|
39
39
|
description: 'Disallow using deprecated APIs.',
|
|
40
|
-
recommended: '
|
|
40
|
+
recommended: 'strict'
|
|
41
41
|
},
|
|
42
42
|
messages: {
|
|
43
43
|
noDeprecatedJSXAttributes: 'The JSX attribute {{propName}} has been deprecated.'
|
|
@@ -67,7 +67,7 @@ var rule = (0, _createRule.createRule)({
|
|
|
67
67
|
}
|
|
68
68
|
},
|
|
69
69
|
required: ['moduleSpecifier'],
|
|
70
|
-
|
|
70
|
+
additionalProperties: false
|
|
71
71
|
}
|
|
72
72
|
}
|
|
73
73
|
}
|
|
@@ -10,7 +10,7 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
|
|
|
10
10
|
var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
|
|
11
11
|
var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
|
|
12
12
|
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
13
|
-
var
|
|
13
|
+
var _migrationMap = _interopRequireWildcard(require("@atlaskit/icon/migration-map"));
|
|
14
14
|
var _upcomingIcons = require("./upcoming-icons");
|
|
15
15
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
|
16
16
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
|
|
@@ -31,8 +31,8 @@ var isSize = exports.isSize = function isSize(size) {
|
|
|
31
31
|
*/
|
|
32
32
|
var getMigrationMapObject = exports.getMigrationMapObject = function getMigrationMapObject(iconPackage) {
|
|
33
33
|
var key = getIconKey(iconPackage);
|
|
34
|
-
if (Object.keys(
|
|
35
|
-
return
|
|
34
|
+
if (Object.keys(_migrationMap.default).includes(key)) {
|
|
35
|
+
return _migrationMap.default[key];
|
|
36
36
|
}
|
|
37
37
|
return null;
|
|
38
38
|
};
|
|
@@ -106,7 +106,7 @@ var createGuidance = exports.createGuidance = function createGuidance(_ref) {
|
|
|
106
106
|
} else {
|
|
107
107
|
guidance += "No equivalent icon for this size, ".concat(size, ", in the current or upcoming set of icons.");
|
|
108
108
|
}
|
|
109
|
-
guidance += "".concat(Object.keys(
|
|
109
|
+
guidance += "".concat(Object.keys(_migrationMap.migrationOutcomeDescriptionMap).includes(upcomingIcon.sizeGuidance[size]) ? " Once the upcoming icons are released, please: ".concat(_migrationMap.migrationOutcomeDescriptionMap[upcomingIcon.sizeGuidance[size]]) : ' No migration size advice given.', "\n");
|
|
110
110
|
} else {
|
|
111
111
|
guidance = "Please wait for the upcoming icons released, as it will contain an alternative for this legacy icon.\nMigration suggestions, depending on the legacy icon size:\n";
|
|
112
112
|
for (var _i = 0, _Object$entries = Object.entries(upcomingIcon.sizeGuidance); _i < _Object$entries.length; _i++) {
|
|
@@ -114,10 +114,10 @@ var createGuidance = exports.createGuidance = function createGuidance(_ref) {
|
|
|
114
114
|
_size = _Object$entries$_i[0],
|
|
115
115
|
value = _Object$entries$_i[1];
|
|
116
116
|
guidance += "\t- ".concat(_size, ": ");
|
|
117
|
-
if (!Object.keys(
|
|
117
|
+
if (!Object.keys(_migrationMap.migrationOutcomeDescriptionMap).includes(value)) {
|
|
118
118
|
guidance += 'No migration advice given.\n';
|
|
119
119
|
} else {
|
|
120
|
-
guidance += "".concat(
|
|
120
|
+
guidance += "".concat(_migrationMap.migrationOutcomeDescriptionMap[value], ".\n");
|
|
121
121
|
}
|
|
122
122
|
}
|
|
123
123
|
}
|
|
@@ -138,7 +138,7 @@ var createGuidance = exports.createGuidance = function createGuidance(_ref) {
|
|
|
138
138
|
} else {
|
|
139
139
|
_guidance += "No equivalent icon for this size, ".concat(size, ", in new set.");
|
|
140
140
|
}
|
|
141
|
-
_guidance += "".concat(Object.keys(
|
|
141
|
+
_guidance += "".concat(Object.keys(_migrationMap.migrationOutcomeDescriptionMap).includes(migrationMapObject.sizeGuidance[size]) ? " Please: ".concat(_migrationMap.migrationOutcomeDescriptionMap[migrationMapObject.sizeGuidance[size]]) : ' No migration size advice given.', "\n");
|
|
142
142
|
} else {
|
|
143
143
|
_guidance = "Use ".concat(iconName, " from ").concat(importPath, " instead.\nMigration suggestions, depending on the legacy icon size:\n");
|
|
144
144
|
Object.entries(migrationMapObject.sizeGuidance).forEach(function (_ref2) {
|
|
@@ -146,10 +146,10 @@ var createGuidance = exports.createGuidance = function createGuidance(_ref) {
|
|
|
146
146
|
size = _ref3[0],
|
|
147
147
|
value = _ref3[1];
|
|
148
148
|
_guidance += "\t- ".concat(size, ": ");
|
|
149
|
-
if (!Object.keys(
|
|
149
|
+
if (!Object.keys(_migrationMap.migrationOutcomeDescriptionMap).includes(value)) {
|
|
150
150
|
_guidance += 'No migration advice given.\n';
|
|
151
151
|
} else {
|
|
152
|
-
_guidance += "".concat(
|
|
152
|
+
_guidance += "".concat(_migrationMap.migrationOutcomeDescriptionMap[value], ".\n");
|
|
153
153
|
}
|
|
154
154
|
});
|
|
155
155
|
}
|
|
@@ -561,7 +561,7 @@ var checkIfNewIconExist = function checkIfNewIconExist(error) {
|
|
|
561
561
|
return false;
|
|
562
562
|
}
|
|
563
563
|
var iconKey = getIconKey(error.data.importSource);
|
|
564
|
-
var _ref8 =
|
|
564
|
+
var _ref8 = _migrationMap.default[iconKey] || {},
|
|
565
565
|
newIcon = _ref8.newIcon;
|
|
566
566
|
return Boolean(newIcon);
|
|
567
567
|
};
|
|
@@ -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
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
//
|
|
85
|
-
//
|
|
86
|
-
|
|
87
|
-
|
|
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
|
-
|
|
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)
|
|
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;
|
|
@@ -27,7 +27,7 @@ const rule = createRule({
|
|
|
27
27
|
type: 'suggestion',
|
|
28
28
|
docs: {
|
|
29
29
|
description: 'Disallow using deprecated APIs.',
|
|
30
|
-
recommended: '
|
|
30
|
+
recommended: 'strict'
|
|
31
31
|
},
|
|
32
32
|
messages: {
|
|
33
33
|
noDeprecatedJSXAttributes: 'The JSX attribute {{propName}} has been deprecated.'
|
|
@@ -57,7 +57,7 @@ const rule = createRule({
|
|
|
57
57
|
}
|
|
58
58
|
},
|
|
59
59
|
required: ['moduleSpecifier'],
|
|
60
|
-
|
|
60
|
+
additionalProperties: false
|
|
61
61
|
}
|
|
62
62
|
}
|
|
63
63
|
}
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import { isNodeOfType, literal } from 'eslint-codemod-utils';
|
|
2
|
-
import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/
|
|
2
|
+
import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/migration-map';
|
|
3
3
|
import { upcomingIcons } from './upcoming-icons';
|
|
4
4
|
const sizes = ['small', 'medium', 'large', 'xlarge'];
|
|
5
5
|
export const isSize = size => sizes.includes(size);
|
|
@@ -24,7 +24,7 @@ const rule = createLintRule({
|
|
|
24
24
|
severity: 'warn'
|
|
25
25
|
},
|
|
26
26
|
messages: {
|
|
27
|
-
noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}
|
|
27
|
+
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.'
|
|
28
28
|
},
|
|
29
29
|
schema: ruleSchema
|
|
30
30
|
},
|
|
@@ -4,7 +4,7 @@ import { isNodeOfType } from 'eslint-codemod-utils';
|
|
|
4
4
|
import { Object as ASTObject, ObjectEntry, Root } from '../../../ast-nodes';
|
|
5
5
|
import { getValueForPropertyNode, normaliseValue } from '../../ensure-design-token-usage/utils';
|
|
6
6
|
import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
|
|
7
|
-
import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, notUndefined } from '../utils';
|
|
7
|
+
import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, isValidTypographyToken, notUndefined } from '../utils';
|
|
8
8
|
export const StyleObject = {
|
|
9
9
|
lint(node, {
|
|
10
10
|
context,
|
|
@@ -67,18 +67,39 @@ export const StyleObject = {
|
|
|
67
67
|
}
|
|
68
68
|
|
|
69
69
|
// -- Match tokens --
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
70
|
+
// Check if fontSize is a token (this is invalid syntax but unfortunately a common occurence)
|
|
71
|
+
// We may as well auto-fix `fontSize` to `font` and keep the token.
|
|
72
|
+
// Other tokens like `fontSize: token('space.100')` will not autofix, but still report
|
|
73
|
+
let matchingTokens = [];
|
|
74
|
+
const isFontSizeAToken = isDecendantOfGlobalToken(fontSizeNode.value);
|
|
75
|
+
if (isFontSizeAToken) {
|
|
76
|
+
// Specifically match for valid, non-deprecated font.heading|body|code tokens
|
|
77
|
+
const match = fontSizeValue.match(/font.(body|heading|code)[^']*/);
|
|
78
|
+
if (match) {
|
|
79
|
+
const matchedTokenName = match[0];
|
|
80
|
+
// This is really just a double check to be 100% certain the token exists
|
|
81
|
+
// and that we're not trying to apply a deprecated fontSize token to the font property
|
|
82
|
+
if (isValidTypographyToken(matchedTokenName)) {
|
|
83
|
+
matchingTokens = [{
|
|
84
|
+
tokenName: matchedTokenName
|
|
85
|
+
}];
|
|
86
|
+
}
|
|
87
|
+
}
|
|
88
|
+
} else {
|
|
89
|
+
// Standard matching against fontSize/lineHeight values
|
|
90
|
+
matchingTokens = findTypographyTokenForValues(fontSizeValue, lineHeightValue);
|
|
91
|
+
if (matchingTokens.length) {
|
|
92
|
+
// If we have multiple matching tokens, try matching fontWeight
|
|
93
|
+
let matchingTokensWithWeight = matchingTokens.filter(token => fontWeightValue ? token.values.fontWeight === fontWeightValue : token);
|
|
94
|
+
if (matchingTokensWithWeight.length) {
|
|
95
|
+
// Possibly narrowed down tokens
|
|
96
|
+
matchingTokens = matchingTokensWithWeight;
|
|
97
|
+
} else {
|
|
98
|
+
// Ended up with 0 matches by matching fontWeight
|
|
99
|
+
// return body token and add fontWeight manually
|
|
100
|
+
matchingTokens = matchingTokens.filter(token => token.tokenName.includes('.body'));
|
|
101
|
+
shouldAddFontWeight = true;
|
|
102
|
+
}
|
|
82
103
|
}
|
|
83
104
|
}
|
|
84
105
|
|
|
@@ -185,7 +206,7 @@ export const StyleObject = {
|
|
|
185
206
|
|
|
186
207
|
// -- Font size --
|
|
187
208
|
const fontSizeNode = ASTObject.getEntryByPropertyName(node, 'fontSize');
|
|
188
|
-
if (!fontSizeNode || !isValidPropertyNode(fontSizeNode)
|
|
209
|
+
if (!fontSizeNode || !isValidPropertyNode(fontSizeNode)) {
|
|
189
210
|
return {
|
|
190
211
|
success: false
|
|
191
212
|
};
|
|
@@ -31,6 +31,9 @@ export const typographyValueToToken = typographyTokens
|
|
|
31
31
|
values: individualValues
|
|
32
32
|
};
|
|
33
33
|
});
|
|
34
|
+
export function isValidTypographyToken(tokenName) {
|
|
35
|
+
return typographyTokens.filter(t => t.attributes.group === 'typography').filter(t => t.cleanName.includes('font.heading') || t.cleanName.includes('font.body') || t.cleanName.includes('font.code')).find(t => t.cleanName === tokenName);
|
|
36
|
+
}
|
|
34
37
|
export function findTypographyTokenForValues(fontSize, lineHeight) {
|
|
35
38
|
let matchingTokens = typographyValueToToken.filter(token => token.values.fontSize === fontSize)
|
|
36
39
|
// If lineHeight == 1, we don't match to a token
|
|
@@ -30,7 +30,7 @@ var rule = createRule({
|
|
|
30
30
|
type: 'suggestion',
|
|
31
31
|
docs: {
|
|
32
32
|
description: 'Disallow using deprecated APIs.',
|
|
33
|
-
recommended: '
|
|
33
|
+
recommended: 'strict'
|
|
34
34
|
},
|
|
35
35
|
messages: {
|
|
36
36
|
noDeprecatedJSXAttributes: 'The JSX attribute {{propName}} has been deprecated.'
|
|
@@ -60,7 +60,7 @@ var rule = createRule({
|
|
|
60
60
|
}
|
|
61
61
|
},
|
|
62
62
|
required: ['moduleSpecifier'],
|
|
63
|
-
|
|
63
|
+
additionalProperties: false
|
|
64
64
|
}
|
|
65
65
|
}
|
|
66
66
|
}
|
|
@@ -7,7 +7,7 @@ function _createForOfIteratorHelper(r, e) { var t = "undefined" != typeof Symbol
|
|
|
7
7
|
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; } }
|
|
8
8
|
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; }
|
|
9
9
|
import { isNodeOfType, literal } from 'eslint-codemod-utils';
|
|
10
|
-
import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/
|
|
10
|
+
import baseMigrationMap, { migrationOutcomeDescriptionMap } from '@atlaskit/icon/migration-map';
|
|
11
11
|
import { upcomingIcons } from './upcoming-icons';
|
|
12
12
|
var sizes = ['small', 'medium', 'large', 'xlarge'];
|
|
13
13
|
export var isSize = function isSize(size) {
|
|
@@ -26,7 +26,7 @@ var rule = createLintRule({
|
|
|
26
26
|
severity: 'warn'
|
|
27
27
|
},
|
|
28
28
|
messages: {
|
|
29
|
-
noRawTypographyValues: 'Typography primitives or tokens should be used instead of hard-coded values.\n\n@meta <<{{payload}}
|
|
29
|
+
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.'
|
|
30
30
|
},
|
|
31
31
|
schema: ruleSchema
|
|
32
32
|
},
|
|
@@ -7,7 +7,7 @@ import { isNodeOfType } from 'eslint-codemod-utils';
|
|
|
7
7
|
import { Object as ASTObject, ObjectEntry, Root } from '../../../ast-nodes';
|
|
8
8
|
import { getValueForPropertyNode, normaliseValue } from '../../ensure-design-token-usage/utils';
|
|
9
9
|
import { isDecendantOfGlobalToken, isDecendantOfStyleBlock, isDecendantOfType } from '../../utils/is-node';
|
|
10
|
-
import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, notUndefined } from '../utils';
|
|
10
|
+
import { convertPropertyNodeToStringableNode, defaultFontWeight, findFontFamilyValueForToken, findFontWeightTokenForValue, findTypographyTokenForValues, fontWeightMap, getLiteralProperty, getTokenProperty, insertFallbackImportFull, insertFallbackImportSpecifier, insertTokensImport, isValidPropertyNode, isValidTypographyToken, notUndefined } from '../utils';
|
|
11
11
|
export var StyleObject = {
|
|
12
12
|
lint: function lint(node, _ref) {
|
|
13
13
|
var context = _ref.context,
|
|
@@ -66,22 +66,43 @@ export var StyleObject = {
|
|
|
66
66
|
}
|
|
67
67
|
|
|
68
68
|
// -- Match tokens --
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
//
|
|
80
|
-
//
|
|
81
|
-
|
|
82
|
-
|
|
69
|
+
// Check if fontSize is a token (this is invalid syntax but unfortunately a common occurence)
|
|
70
|
+
// We may as well auto-fix `fontSize` to `font` and keep the token.
|
|
71
|
+
// Other tokens like `fontSize: token('space.100')` will not autofix, but still report
|
|
72
|
+
var matchingTokens = [];
|
|
73
|
+
var isFontSizeAToken = isDecendantOfGlobalToken(fontSizeNode.value);
|
|
74
|
+
if (isFontSizeAToken) {
|
|
75
|
+
// Specifically match for valid, non-deprecated font.heading|body|code tokens
|
|
76
|
+
var match = fontSizeValue.match(/font.(body|heading|code)[^']*/);
|
|
77
|
+
if (match) {
|
|
78
|
+
var matchedTokenName = match[0];
|
|
79
|
+
// This is really just a double check to be 100% certain the token exists
|
|
80
|
+
// and that we're not trying to apply a deprecated fontSize token to the font property
|
|
81
|
+
if (isValidTypographyToken(matchedTokenName)) {
|
|
82
|
+
matchingTokens = [{
|
|
83
|
+
tokenName: matchedTokenName
|
|
84
|
+
}];
|
|
85
|
+
}
|
|
86
|
+
}
|
|
87
|
+
} else {
|
|
88
|
+
// Standard matching against fontSize/lineHeight values
|
|
89
|
+
matchingTokens = findTypographyTokenForValues(fontSizeValue, lineHeightValue);
|
|
90
|
+
if (matchingTokens.length) {
|
|
91
|
+
// If we have multiple matching tokens, try matching fontWeight
|
|
92
|
+
var matchingTokensWithWeight = matchingTokens.filter(function (token) {
|
|
93
|
+
return fontWeightValue ? token.values.fontWeight === fontWeightValue : token;
|
|
83
94
|
});
|
|
84
|
-
|
|
95
|
+
if (matchingTokensWithWeight.length) {
|
|
96
|
+
// Possibly narrowed down tokens
|
|
97
|
+
matchingTokens = matchingTokensWithWeight;
|
|
98
|
+
} else {
|
|
99
|
+
// Ended up with 0 matches by matching fontWeight
|
|
100
|
+
// return body token and add fontWeight manually
|
|
101
|
+
matchingTokens = matchingTokens.filter(function (token) {
|
|
102
|
+
return token.tokenName.includes('.body');
|
|
103
|
+
});
|
|
104
|
+
shouldAddFontWeight = true;
|
|
105
|
+
}
|
|
85
106
|
}
|
|
86
107
|
}
|
|
87
108
|
|
|
@@ -186,7 +207,7 @@ export var StyleObject = {
|
|
|
186
207
|
|
|
187
208
|
// -- Font size --
|
|
188
209
|
var fontSizeNode = ASTObject.getEntryByPropertyName(node, 'fontSize');
|
|
189
|
-
if (!fontSizeNode || !isValidPropertyNode(fontSizeNode)
|
|
210
|
+
if (!fontSizeNode || !isValidPropertyNode(fontSizeNode)) {
|
|
190
211
|
return {
|
|
191
212
|
success: false
|
|
192
213
|
};
|
|
@@ -49,6 +49,15 @@ export var typographyValueToToken = typographyTokens
|
|
|
49
49
|
values: individualValues
|
|
50
50
|
};
|
|
51
51
|
});
|
|
52
|
+
export function isValidTypographyToken(tokenName) {
|
|
53
|
+
return typographyTokens.filter(function (t) {
|
|
54
|
+
return t.attributes.group === 'typography';
|
|
55
|
+
}).filter(function (t) {
|
|
56
|
+
return t.cleanName.includes('font.heading') || t.cleanName.includes('font.body') || t.cleanName.includes('font.code');
|
|
57
|
+
}).find(function (t) {
|
|
58
|
+
return t.cleanName === tokenName;
|
|
59
|
+
});
|
|
60
|
+
}
|
|
52
61
|
export function findTypographyTokenForValues(fontSize, lineHeight) {
|
|
53
62
|
var matchingTokens = typographyValueToToken.filter(function (token) {
|
|
54
63
|
return token.values.fontSize === fontSize;
|
|
@@ -1,8 +1,7 @@
|
|
|
1
|
-
import { type TSESLint } from '@typescript-eslint/utils';
|
|
2
1
|
import { type DeprecatedConfig } from '../utils/types';
|
|
3
2
|
export declare const noDeprecatedJSXAttributeMessageId = "noDeprecatedJSXAttributes";
|
|
4
3
|
export declare const name = "no-deprecated-apis";
|
|
5
|
-
declare const rule:
|
|
4
|
+
declare const rule: import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [{
|
|
6
5
|
deprecatedConfig: DeprecatedConfig;
|
|
7
|
-
}],
|
|
6
|
+
}], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
|
|
8
7
|
export default rule;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Rule } from 'eslint';
|
|
2
2
|
import { type ImportDeclaration, type JSXAttribute, type Node } from 'eslint-codemod-utils';
|
|
3
|
-
import { type IconMigrationSizeGuidance } from '@atlaskit/icon/
|
|
3
|
+
import { type IconMigrationSizeGuidance } from '@atlaskit/icon/migration-map';
|
|
4
4
|
export type IconMigrationError = Rule.ReportDescriptor;
|
|
5
5
|
export type RangeList = {
|
|
6
6
|
start: number;
|
|
@@ -16,6 +16,86 @@ export type TokenValueMap = {
|
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
export declare const typographyValueToToken: TokenValueMap[];
|
|
19
|
+
export declare function isValidTypographyToken(tokenName: string): {
|
|
20
|
+
attributes: {
|
|
21
|
+
group: string;
|
|
22
|
+
state: string;
|
|
23
|
+
introduced: string;
|
|
24
|
+
description: string;
|
|
25
|
+
deprecated?: undefined;
|
|
26
|
+
};
|
|
27
|
+
value: string;
|
|
28
|
+
filePath: string;
|
|
29
|
+
isSource: boolean;
|
|
30
|
+
original: {
|
|
31
|
+
attributes: {
|
|
32
|
+
group: string;
|
|
33
|
+
state: string;
|
|
34
|
+
introduced: string;
|
|
35
|
+
description: string;
|
|
36
|
+
deprecated?: undefined;
|
|
37
|
+
};
|
|
38
|
+
value: string;
|
|
39
|
+
};
|
|
40
|
+
name: string;
|
|
41
|
+
path: string[];
|
|
42
|
+
cleanName: string;
|
|
43
|
+
} | {
|
|
44
|
+
attributes: {
|
|
45
|
+
group: string;
|
|
46
|
+
state: string;
|
|
47
|
+
introduced: string;
|
|
48
|
+
description: string;
|
|
49
|
+
deprecated: string;
|
|
50
|
+
};
|
|
51
|
+
value: string;
|
|
52
|
+
filePath: string;
|
|
53
|
+
isSource: boolean;
|
|
54
|
+
original: {
|
|
55
|
+
attributes: {
|
|
56
|
+
group: string;
|
|
57
|
+
state: string;
|
|
58
|
+
introduced: string;
|
|
59
|
+
description: string;
|
|
60
|
+
deprecated: string;
|
|
61
|
+
};
|
|
62
|
+
value: string;
|
|
63
|
+
};
|
|
64
|
+
name: string;
|
|
65
|
+
path: string[];
|
|
66
|
+
cleanName: string;
|
|
67
|
+
} | {
|
|
68
|
+
attributes: {
|
|
69
|
+
group: string;
|
|
70
|
+
state: string;
|
|
71
|
+
introduced: string;
|
|
72
|
+
description: string;
|
|
73
|
+
deprecated?: undefined;
|
|
74
|
+
};
|
|
75
|
+
value: string;
|
|
76
|
+
filePath: string;
|
|
77
|
+
isSource: boolean;
|
|
78
|
+
original: {
|
|
79
|
+
attributes: {
|
|
80
|
+
group: string;
|
|
81
|
+
state: string;
|
|
82
|
+
introduced: string;
|
|
83
|
+
description: string;
|
|
84
|
+
deprecated?: undefined;
|
|
85
|
+
};
|
|
86
|
+
value: {
|
|
87
|
+
fontWeight: string;
|
|
88
|
+
fontSize: string;
|
|
89
|
+
lineHeight: string;
|
|
90
|
+
fontFamily: string;
|
|
91
|
+
fontStyle: string;
|
|
92
|
+
letterSpacing: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
name: string;
|
|
96
|
+
path: string[];
|
|
97
|
+
cleanName: string;
|
|
98
|
+
} | undefined;
|
|
19
99
|
export declare function findTypographyTokenForValues(fontSize: string, lineHeight?: string): TokenValueMap[];
|
|
20
100
|
export declare const fontWeightTokens: {
|
|
21
101
|
tokenName: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
|
|
2
1
|
import type { Rule } from 'eslint';
|
|
2
|
+
import type { JSONSchema4 } from 'json-schema';
|
|
3
3
|
import { type SupportedNameChecker } from '@atlaskit/eslint-utils/is-supported-import';
|
|
4
4
|
type RuleModule = Rule.RuleModule;
|
|
5
5
|
export declare const noTaggedTemplateExpressionRuleSchema: JSONSchema4;
|
|
@@ -8,7 +8,7 @@ import { ESLintUtils } from '@typescript-eslint/utils';
|
|
|
8
8
|
* @private
|
|
9
9
|
* @deprecated
|
|
10
10
|
*/
|
|
11
|
-
export declare const createRule: <
|
|
11
|
+
export declare const createRule: <Options extends readonly unknown[], MessageIds extends string>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<Options, MessageIds>>) => ESLintUtils.RuleModule<MessageIds, Options, ESLintUtils.RuleListener>;
|
|
12
12
|
/**
|
|
13
13
|
* Tiny wrapped over the ESLint rule module type that ensures
|
|
14
14
|
* there is a docs link to our ESLint plugin documentation page,
|
|
@@ -1,10 +1,9 @@
|
|
|
1
|
-
import { type TSESLint } from '@typescript-eslint/utils';
|
|
2
1
|
import { type DeprecatedConfig } from '../utils/types';
|
|
3
2
|
export declare const noDeprecatedJSXAttributeMessageId = "noDeprecatedJSXAttributes";
|
|
4
3
|
export declare const name = "no-deprecated-apis";
|
|
5
|
-
declare const rule:
|
|
4
|
+
declare const rule: import("@typescript-eslint/utils/dist/ts-eslint").RuleModule<string, [
|
|
6
5
|
{
|
|
7
6
|
deprecatedConfig: DeprecatedConfig;
|
|
8
7
|
}
|
|
9
|
-
],
|
|
8
|
+
], import("@typescript-eslint/utils/dist/ts-eslint").RuleListener>;
|
|
10
9
|
export default rule;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
import type { Rule } from 'eslint';
|
|
2
2
|
import { type ImportDeclaration, type JSXAttribute, type Node } from 'eslint-codemod-utils';
|
|
3
|
-
import { type IconMigrationSizeGuidance } from '@atlaskit/icon/
|
|
3
|
+
import { type IconMigrationSizeGuidance } from '@atlaskit/icon/migration-map';
|
|
4
4
|
export type IconMigrationError = Rule.ReportDescriptor;
|
|
5
5
|
export type RangeList = {
|
|
6
6
|
start: number;
|
|
@@ -16,6 +16,86 @@ export type TokenValueMap = {
|
|
|
16
16
|
};
|
|
17
17
|
};
|
|
18
18
|
export declare const typographyValueToToken: TokenValueMap[];
|
|
19
|
+
export declare function isValidTypographyToken(tokenName: string): {
|
|
20
|
+
attributes: {
|
|
21
|
+
group: string;
|
|
22
|
+
state: string;
|
|
23
|
+
introduced: string;
|
|
24
|
+
description: string;
|
|
25
|
+
deprecated?: undefined;
|
|
26
|
+
};
|
|
27
|
+
value: string;
|
|
28
|
+
filePath: string;
|
|
29
|
+
isSource: boolean;
|
|
30
|
+
original: {
|
|
31
|
+
attributes: {
|
|
32
|
+
group: string;
|
|
33
|
+
state: string;
|
|
34
|
+
introduced: string;
|
|
35
|
+
description: string;
|
|
36
|
+
deprecated?: undefined;
|
|
37
|
+
};
|
|
38
|
+
value: string;
|
|
39
|
+
};
|
|
40
|
+
name: string;
|
|
41
|
+
path: string[];
|
|
42
|
+
cleanName: string;
|
|
43
|
+
} | {
|
|
44
|
+
attributes: {
|
|
45
|
+
group: string;
|
|
46
|
+
state: string;
|
|
47
|
+
introduced: string;
|
|
48
|
+
description: string;
|
|
49
|
+
deprecated: string;
|
|
50
|
+
};
|
|
51
|
+
value: string;
|
|
52
|
+
filePath: string;
|
|
53
|
+
isSource: boolean;
|
|
54
|
+
original: {
|
|
55
|
+
attributes: {
|
|
56
|
+
group: string;
|
|
57
|
+
state: string;
|
|
58
|
+
introduced: string;
|
|
59
|
+
description: string;
|
|
60
|
+
deprecated: string;
|
|
61
|
+
};
|
|
62
|
+
value: string;
|
|
63
|
+
};
|
|
64
|
+
name: string;
|
|
65
|
+
path: string[];
|
|
66
|
+
cleanName: string;
|
|
67
|
+
} | {
|
|
68
|
+
attributes: {
|
|
69
|
+
group: string;
|
|
70
|
+
state: string;
|
|
71
|
+
introduced: string;
|
|
72
|
+
description: string;
|
|
73
|
+
deprecated?: undefined;
|
|
74
|
+
};
|
|
75
|
+
value: string;
|
|
76
|
+
filePath: string;
|
|
77
|
+
isSource: boolean;
|
|
78
|
+
original: {
|
|
79
|
+
attributes: {
|
|
80
|
+
group: string;
|
|
81
|
+
state: string;
|
|
82
|
+
introduced: string;
|
|
83
|
+
description: string;
|
|
84
|
+
deprecated?: undefined;
|
|
85
|
+
};
|
|
86
|
+
value: {
|
|
87
|
+
fontWeight: string;
|
|
88
|
+
fontSize: string;
|
|
89
|
+
lineHeight: string;
|
|
90
|
+
fontFamily: string;
|
|
91
|
+
fontStyle: string;
|
|
92
|
+
letterSpacing: string;
|
|
93
|
+
};
|
|
94
|
+
};
|
|
95
|
+
name: string;
|
|
96
|
+
path: string[];
|
|
97
|
+
cleanName: string;
|
|
98
|
+
} | undefined;
|
|
19
99
|
export declare function findTypographyTokenForValues(fontSize: string, lineHeight?: string): TokenValueMap[];
|
|
20
100
|
export declare const fontWeightTokens: {
|
|
21
101
|
tokenName: string;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
|
-
import type { JSONSchema4 } from '@typescript-eslint/utils/dist/json-schema';
|
|
2
1
|
import type { Rule } from 'eslint';
|
|
2
|
+
import type { JSONSchema4 } from 'json-schema';
|
|
3
3
|
import { type SupportedNameChecker } from '@atlaskit/eslint-utils/is-supported-import';
|
|
4
4
|
type RuleModule = Rule.RuleModule;
|
|
5
5
|
export declare const noTaggedTemplateExpressionRuleSchema: JSONSchema4;
|
|
@@ -8,7 +8,7 @@ import { ESLintUtils } from '@typescript-eslint/utils';
|
|
|
8
8
|
* @private
|
|
9
9
|
* @deprecated
|
|
10
10
|
*/
|
|
11
|
-
export declare const createRule: <
|
|
11
|
+
export declare const createRule: <Options extends readonly unknown[], MessageIds extends string>({ name, meta, ...rule }: Readonly<ESLintUtils.RuleWithMetaAndName<Options, MessageIds>>) => ESLintUtils.RuleModule<MessageIds, Options, ESLintUtils.RuleListener>;
|
|
12
12
|
/**
|
|
13
13
|
* Tiny wrapped over the ESLint rule module type that ensures
|
|
14
14
|
* there is a docs link to our ESLint plugin documentation page,
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@atlaskit/eslint-plugin-design-system",
|
|
3
3
|
"description": "The essential plugin for use with the Atlassian Design System.",
|
|
4
|
-
"version": "11.0
|
|
4
|
+
"version": "11.1.0",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"publishConfig": {
|
|
@@ -44,11 +44,11 @@
|
|
|
44
44
|
},
|
|
45
45
|
"dependencies": {
|
|
46
46
|
"@atlaskit/eslint-utils": "^1.7.0",
|
|
47
|
-
"@atlaskit/icon": "^
|
|
48
|
-
"@atlaskit/icon-lab": "^
|
|
47
|
+
"@atlaskit/icon": "^23.0.0",
|
|
48
|
+
"@atlaskit/icon-lab": "^2.0.0",
|
|
49
49
|
"@atlaskit/tokens": "*",
|
|
50
50
|
"@babel/runtime": "^7.0.0",
|
|
51
|
-
"@typescript-eslint/utils": "^
|
|
51
|
+
"@typescript-eslint/utils": "^7.1.0",
|
|
52
52
|
"ajv": "^6.12.6",
|
|
53
53
|
"eslint-codemod-utils": "^1.8.6",
|
|
54
54
|
"esquery": "^1.5.0",
|
|
@@ -70,6 +70,7 @@
|
|
|
70
70
|
"@types/eslint__eslintrc": "^2.1.2",
|
|
71
71
|
"@types/esquery": "^1.5.3",
|
|
72
72
|
"@types/estraverse": "^5.1.7",
|
|
73
|
+
"@types/json-schema": "^7.0.15",
|
|
73
74
|
"eslint": "^8.57.0",
|
|
74
75
|
"jscodeshift": "^0.13.0",
|
|
75
76
|
"outdent": "^0.5.0",
|