@atlaskit/eslint-plugin-design-system 9.3.1 → 9.4.1
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 +12 -0
- package/README.md +36 -35
- package/constellation/index/usage.mdx +36 -35
- package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx +140 -0
- package/constellation/use-tokens-typography/usage.mdx +6 -2
- package/dist/cjs/presets/all.codegen.js +2 -1
- package/dist/cjs/presets/recommended.codegen.js +2 -1
- package/dist/cjs/rules/index.codegen.js +3 -1
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.js +31 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.js +63 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.js +48 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.js +55 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/index.js +55 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.js +8 -0
- package/dist/cjs/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.js +31 -0
- package/dist/cjs/rules/use-tokens-typography/config/index.js +5 -1
- package/dist/cjs/rules/use-tokens-typography/index.js +2 -1
- package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js +16 -9
- package/dist/cjs/rules/use-tokens-typography/utils.js +9 -9
- package/dist/es2019/presets/all.codegen.js +2 -1
- package/dist/es2019/presets/recommended.codegen.js +2 -1
- package/dist/es2019/rules/index.codegen.js +3 -1
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.js +25 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.js +38 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.js +33 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.js +49 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/index.js +49 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.js +2 -0
- package/dist/es2019/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.js +25 -0
- package/dist/es2019/rules/use-tokens-typography/config/index.js +5 -1
- package/dist/es2019/rules/use-tokens-typography/index.js +2 -1
- package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js +16 -9
- package/dist/es2019/rules/use-tokens-typography/utils.js +8 -9
- package/dist/esm/presets/all.codegen.js +2 -1
- package/dist/esm/presets/recommended.codegen.js +2 -1
- package/dist/esm/rules/index.codegen.js +3 -1
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.js +25 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.js +59 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.js +44 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.js +49 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/index.js +49 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.js +2 -0
- package/dist/esm/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.js +25 -0
- package/dist/esm/rules/use-tokens-typography/config/index.js +5 -1
- package/dist/esm/rules/use-tokens-typography/index.js +2 -1
- package/dist/esm/rules/use-tokens-typography/transformers/style-object.js +16 -9
- package/dist/esm/rules/use-tokens-typography/utils.js +9 -9
- package/dist/types/index.codegen.d.ts +2 -0
- package/dist/types/presets/all.codegen.d.ts +2 -1
- package/dist/types/presets/recommended.codegen.d.ts +2 -1
- package/dist/types/rules/index.codegen.d.ts +1 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.d.ts +2 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.d.ts +3 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.d.ts +3 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.d.ts +3 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/index.d.ts +2 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.d.ts +2 -0
- package/dist/types/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.d.ts +2 -0
- package/dist/types/rules/use-tokens-typography/config/index.d.ts +1 -0
- package/dist/types/rules/use-tokens-typography/transformers/style-object.d.ts +6 -2
- package/dist/types/rules/use-tokens-typography/utils.d.ts +1 -1
- package/dist/types-ts4.5/index.codegen.d.ts +2 -0
- package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
- package/dist/types-ts4.5/presets/recommended.codegen.d.ts +2 -1
- package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-add-event-listener.d.ts +2 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind-all.d.ts +3 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-bind.d.ts +3 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/checks/is-blocked-jsx-attribute.d.ts +3 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/index.d.ts +2 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/shared/blocked.d.ts +2 -0
- package/dist/types-ts4.5/rules/no-direct-use-of-web-platform-drag-and-drop/shared/is-blocked-event-binding.d.ts +2 -0
- package/dist/types-ts4.5/rules/use-tokens-typography/config/index.d.ts +1 -0
- package/dist/types-ts4.5/rules/use-tokens-typography/transformers/style-object.d.ts +6 -2
- package/dist/types-ts4.5/rules/use-tokens-typography/utils.d.ts +1 -1
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,17 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 9.4.1
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [#90125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/90125) [`3ee5bf94b4fd`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3ee5bf94b4fd) - Added the `shouldEnforceFallbacks` option to the `use-tokens-typography` rule which can be used to prevent token fallback values being added automatically.
|
|
8
|
+
|
|
9
|
+
## 9.4.0
|
|
10
|
+
|
|
11
|
+
### Minor Changes
|
|
12
|
+
|
|
13
|
+
- [#88717](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/88717) [`5332c5b63887`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/5332c5b63887) - Adding new eslint rule `@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop` to block using web platform drag and drop directly.
|
|
14
|
+
|
|
3
15
|
## 9.3.1
|
|
4
16
|
|
|
5
17
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -47,40 +47,41 @@ module.exports = {
|
|
|
47
47
|
<!-- START_RULE_TABLE_CODEGEN -->
|
|
48
48
|
<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
|
|
49
49
|
|
|
50
|
-
| Rule
|
|
51
|
-
|
|
|
52
|
-
| <a href="./src/rules/consistent-css-prop-usage/README.md">consistent-css-prop-usage</a>
|
|
53
|
-
| <a href="./src/rules/ensure-design-token-usage/README.md">ensure-design-token-usage</a>
|
|
54
|
-
| <a href="./src/rules/ensure-design-token-usage-preview/README.md">ensure-design-token-usage/preview</a>
|
|
55
|
-
| <a href="./src/rules/icon-label/README.md">icon-label</a>
|
|
56
|
-
| <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a>
|
|
57
|
-
| <a href="./src/rules/no-css-tagged-template-expression/README.md">no-css-tagged-template-expression</a>
|
|
58
|
-
| <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a>
|
|
59
|
-
| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a>
|
|
60
|
-
| <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a>
|
|
61
|
-
| <a href="./src/rules/no-
|
|
62
|
-
| <a href="./src/rules/no-
|
|
63
|
-
| <a href="./src/rules/no-exported-
|
|
64
|
-
| <a href="./src/rules/no-
|
|
65
|
-
| <a href="./src/rules/no-
|
|
66
|
-
| <a href="./src/rules/no-
|
|
67
|
-
| <a href="./src/rules/no-
|
|
68
|
-
| <a href="./src/rules/no-
|
|
69
|
-
| <a href="./src/rules/no-
|
|
70
|
-
| <a href="./src/rules/no-
|
|
71
|
-
| <a href="./src/rules/no-
|
|
72
|
-
| <a href="./src/rules/no-unsafe-
|
|
73
|
-
| <a href="./src/rules/no-
|
|
74
|
-
| <a href="./src/rules/
|
|
75
|
-
| <a href="./src/rules/
|
|
76
|
-
| <a href="./src/rules/use-
|
|
77
|
-
| <a href="./src/rules/use-
|
|
78
|
-
| <a href="./src/rules/use-heading
|
|
79
|
-
| <a href="./src/rules/use-
|
|
80
|
-
| <a href="./src/rules/use-
|
|
81
|
-
| <a href="./src/rules/use-primitives
|
|
82
|
-
| <a href="./src/rules/use-
|
|
83
|
-
| <a href="./src/rules/use-tokens-
|
|
84
|
-
| <a href="./src/rules/use-
|
|
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/icon-label/README.md">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
|
|
56
|
+
| <a href="./src/rules/no-banned-imports/README.md">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
|
|
57
|
+
| <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 | |
|
|
58
|
+
| <a href="./src/rules/no-deprecated-apis/README.md">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
|
|
59
|
+
| <a href="./src/rules/no-deprecated-design-token-usage/README.md">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
|
|
60
|
+
| <a href="./src/rules/no-deprecated-imports/README.md">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
|
|
61
|
+
| <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 | | |
|
|
62
|
+
| <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). | Yes | | |
|
|
63
|
+
| <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. | Yes | | |
|
|
64
|
+
| <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. | Yes | | |
|
|
65
|
+
| <a href="./src/rules/no-html-button-element/README.md">no-html-button-element</a> | Prevent direct usage of HTML button elements and enforce usage of Button and Pressable. | | | |
|
|
66
|
+
| <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 | | |
|
|
67
|
+
| <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 | |
|
|
68
|
+
| <a href="./src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
|
|
69
|
+
| <a href="./src/rules/no-nested-styles/README.md">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
|
|
70
|
+
| <a href="./src/rules/no-physical-properties/README.md">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
|
|
71
|
+
| <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 | |
|
|
72
|
+
| <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 | |
|
|
73
|
+
| <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 | | |
|
|
74
|
+
| <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 | | |
|
|
75
|
+
| <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. | | | |
|
|
76
|
+
| <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 |
|
|
77
|
+
| <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 |
|
|
78
|
+
| <a href="./src/rules/use-heading/README.md">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
|
|
79
|
+
| <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 | |
|
|
80
|
+
| <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 |
|
|
81
|
+
| <a href="./src/rules/use-primitives/README.md">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
82
|
+
| <a href="./src/rules/use-primitives-text/README.md">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
83
|
+
| <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 |
|
|
84
|
+
| <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 |
|
|
85
|
+
| <a href="./src/rules/use-visually-hidden/README.md">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
|
|
85
86
|
|
|
86
87
|
<!-- END_RULE_TABLE_CODEGEN -->
|
|
@@ -9,40 +9,41 @@ This plugin contains rules that should be used when working with the [Atlassian
|
|
|
9
9
|
<!-- START_RULE_TABLE_CODEGEN -->
|
|
10
10
|
<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
|
|
11
11
|
|
|
12
|
-
| Rule
|
|
13
|
-
|
|
|
14
|
-
| <a href="consistent-css-prop-usage/usage">consistent-css-prop-usage</a>
|
|
15
|
-
| <a href="ensure-design-token-usage/usage">ensure-design-token-usage</a>
|
|
16
|
-
| <a href="ensure-design-token-usage-preview/usage">ensure-design-token-usage/preview</a>
|
|
17
|
-
| <a href="icon-label/usage">icon-label</a>
|
|
18
|
-
| <a href="no-banned-imports/usage">no-banned-imports</a>
|
|
19
|
-
| <a href="no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a>
|
|
20
|
-
| <a href="no-deprecated-apis/usage">no-deprecated-apis</a>
|
|
21
|
-
| <a href="no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a>
|
|
22
|
-
| <a href="no-deprecated-imports/usage">no-deprecated-imports</a>
|
|
23
|
-
| <a href="no-
|
|
24
|
-
| <a href="no-
|
|
25
|
-
| <a href="no-exported-
|
|
26
|
-
| <a href="no-
|
|
27
|
-
| <a href="no-
|
|
28
|
-
| <a href="no-
|
|
29
|
-
| <a href="no-
|
|
30
|
-
| <a href="no-
|
|
31
|
-
| <a href="no-
|
|
32
|
-
| <a href="no-
|
|
33
|
-
| <a href="no-
|
|
34
|
-
| <a href="no-unsafe-
|
|
35
|
-
| <a href="no-
|
|
36
|
-
| <a href="
|
|
37
|
-
| <a href="
|
|
38
|
-
| <a href="use-
|
|
39
|
-
| <a href="use-
|
|
40
|
-
| <a href="use-heading
|
|
41
|
-
| <a href="use-
|
|
42
|
-
| <a href="use-
|
|
43
|
-
| <a href="use-primitives
|
|
44
|
-
| <a href="use-
|
|
45
|
-
| <a href="use-tokens-
|
|
46
|
-
| <a href="use-
|
|
12
|
+
| Rule | Description | Recommended | Fixable | Suggestions |
|
|
13
|
+
| ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
|
|
14
|
+
| <a href="consistent-css-prop-usage/usage">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
|
|
15
|
+
| <a href="ensure-design-token-usage/usage">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |
|
|
16
|
+
| <a href="ensure-design-token-usage-preview/usage">ensure-design-token-usage/preview</a> | Enforces usage of pre-release design tokens rather than hard-coded values. | | Yes | Yes |
|
|
17
|
+
| <a href="icon-label/usage">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
|
|
18
|
+
| <a href="no-banned-imports/usage">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
|
|
19
|
+
| <a href="no-css-tagged-template-expression/usage">no-css-tagged-template-expression</a> | Disallows any `css` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
20
|
+
| <a href="no-deprecated-apis/usage">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
|
|
21
|
+
| <a href="no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
|
|
22
|
+
| <a href="no-deprecated-imports/usage">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
|
|
23
|
+
| <a href="no-direct-use-of-web-platform-drag-and-drop/usage">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 | | |
|
|
24
|
+
| <a href="no-empty-styled-expression/usage">no-empty-styled-expression</a> | Forbids any styled expression to be used when passing empty arguments to styled.div() (or other JSX elements). | Yes | | |
|
|
25
|
+
| <a href="no-exported-css/usage">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. | Yes | | |
|
|
26
|
+
| <a href="no-exported-keyframes/usage">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. | Yes | | |
|
|
27
|
+
| <a href="no-html-button-element/usage">no-html-button-element</a> | Prevent direct usage of HTML button elements and enforce usage of Button and Pressable. | | | |
|
|
28
|
+
| <a href="no-invalid-css-map/usage">no-invalid-css-map</a> | Checks the validity of a CSS map created through cssMap. This is intended to be used alongside TypeScript's type-checking. | Yes | | |
|
|
29
|
+
| <a href="no-keyframes-tagged-template-expression/usage">no-keyframes-tagged-template-expression</a> | Disallows any `keyframe` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
30
|
+
| <a href="no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
|
|
31
|
+
| <a href="no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
|
|
32
|
+
| <a href="no-physical-properties/usage">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
|
|
33
|
+
| <a href="no-styled-tagged-template-expression/usage">no-styled-tagged-template-expression</a> | Disallows any `styled` tagged template expressions that originate from Emotion, Styled Components or Compiled | | Yes | |
|
|
34
|
+
| <a href="no-unsafe-design-token-usage/usage">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
|
|
35
|
+
| <a href="no-unsafe-style-overrides/usage">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |
|
|
36
|
+
| <a href="no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
|
|
37
|
+
| <a href="prefer-primitives/usage">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. | | | |
|
|
38
|
+
| <a href="use-button-group-label/usage">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |
|
|
39
|
+
| <a href="use-drawer-label/usage">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
|
|
40
|
+
| <a href="use-heading/usage">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
|
|
41
|
+
| <a href="use-heading-level-in-spotlight-card/usage">use-heading-level-in-spotlight-card</a> | Inform developers of eventual requirement of `headingLevel` prop in `SpotlightCard` component. The heading level should be the appropriate level according to the surrounding context. | Yes | Yes | |
|
|
42
|
+
| <a href="use-href-in-link-item/usage">use-href-in-link-item</a> | Inform developers of eventual requirement of `href` prop in `LinkItem` component. Elements with a `link` role require an `href` attribute for users to properly navigate, particularly those using assistive technologies. If no valid `href` is required for your use case, consider using a `ButtonItem` instead. | Yes | Yes | Yes |
|
|
43
|
+
| <a href="use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
|
|
44
|
+
| <a href="use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
|
|
45
|
+
| <a href="use-tokens-space/usage">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
|
|
46
|
+
| <a href="use-tokens-typography/usage">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | | Yes | Yes |
|
|
47
|
+
| <a href="use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
|
|
47
48
|
|
|
48
49
|
<!-- END_RULE_TABLE_CODEGEN -->
|
|
@@ -0,0 +1,140 @@
|
|
|
1
|
+
# no-direct-use-of-web-platform-drag-and-drop
|
|
2
|
+
|
|
3
|
+
Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.
|
|
4
|
+
|
|
5
|
+
## Rationale
|
|
6
|
+
|
|
7
|
+
The web platform has powerful drag and drop functionality built in. However, it is hard to be successful with web platform drag and drop due to bugs, inconsistencies and usage friction. Rather than leveraging the web platform API directly, the rule enforces the usage of [Pragmatic drag and drop](https://atlassian.design/components/pragmatic-drag-and-drop), which allows people to easily and successfully leverage web platform drag and drop.
|
|
8
|
+
|
|
9
|
+
## Examples
|
|
10
|
+
|
|
11
|
+
This rule marks direct usage of web platform drag events as violations.
|
|
12
|
+
|
|
13
|
+
### Incorrect
|
|
14
|
+
|
|
15
|
+
Adding drag related event listeners on intrinsic `react` elements (eg `div`, `span`, `strong` and so on).
|
|
16
|
+
|
|
17
|
+
```tsx
|
|
18
|
+
<div onDragStart={fn}>{children}</div>
|
|
19
|
+
^^^^^^^^^^^
|
|
20
|
+
<div onDragEnter={fn}>{children}</div>
|
|
21
|
+
^^^^^^^^^^^
|
|
22
|
+
<div onDragLeave={fn}>{children}</div>
|
|
23
|
+
^^^^^^^^^^^
|
|
24
|
+
<div onDragOver={fn}>{children}</div>
|
|
25
|
+
^^^^^^^^^^^
|
|
26
|
+
<div onDrag={fn}>{children}</div>
|
|
27
|
+
^^^^^^
|
|
28
|
+
<div onDrop={fn}>{children}</div>
|
|
29
|
+
^^^^^^
|
|
30
|
+
<div onDragEnd={fn}>{children}</div>
|
|
31
|
+
^^^^^^^^^
|
|
32
|
+
```
|
|
33
|
+
|
|
34
|
+
Adding drag related event listeners on our `<Box>` primitive.
|
|
35
|
+
|
|
36
|
+
```tsx
|
|
37
|
+
import { Box } from '@atlaskit/primitives';
|
|
38
|
+
|
|
39
|
+
<Box onDragStart={fn}>{children}</Box>
|
|
40
|
+
^^^^^^^^^^^
|
|
41
|
+
<Box onDragEnter={fn}>{children}</Box>
|
|
42
|
+
^^^^^^^^^^^
|
|
43
|
+
<Box onDragLeave={fn}>{children}</Box>
|
|
44
|
+
^^^^^^^^^^^
|
|
45
|
+
<Box onDragOver={fn}>{children}</Box>
|
|
46
|
+
^^^^^^^^^^^
|
|
47
|
+
<Box onDrag={fn}>{children}</Box>
|
|
48
|
+
^^^^^^
|
|
49
|
+
<Box onDrop={fn}>{children}</Box>
|
|
50
|
+
^^^^^^
|
|
51
|
+
<Box onDragEnd={fn}>{children}</Box>
|
|
52
|
+
^^^^^^^^^
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
Binding drag related events using `eventTarget.addEventListener()`
|
|
56
|
+
|
|
57
|
+
```ts
|
|
58
|
+
window.addEventListener('dragstart', fn);
|
|
59
|
+
^^^^^^^^^^^
|
|
60
|
+
window.addEventListener('dragenter', fn);
|
|
61
|
+
^^^^^^^^^^^
|
|
62
|
+
window.addEventListener('dragleave', fn);
|
|
63
|
+
^^^^^^^^^^^
|
|
64
|
+
window.addEventListener('dragover', fn);
|
|
65
|
+
^^^^^^^^^^
|
|
66
|
+
window.addEventListener('drag', fn);
|
|
67
|
+
^^^^^^
|
|
68
|
+
window.addEventListener('drop', fn);
|
|
69
|
+
^^^^^^
|
|
70
|
+
window.addEventListener('dragend', fn);
|
|
71
|
+
^^^^^^^^^
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
Binding drag related events using `bind()` from [bind-event-listener](https://github.com/alexreardon/bind-event-listener)
|
|
75
|
+
|
|
76
|
+
```ts
|
|
77
|
+
import {bind} from 'bind-event-listener';
|
|
78
|
+
|
|
79
|
+
bind(element, { type: 'dragstart', listener: fn });
|
|
80
|
+
^^^^^^^^^^^
|
|
81
|
+
bind(element, { type: 'dragenter', listener: fn });
|
|
82
|
+
^^^^^^^^^^^
|
|
83
|
+
bind(element, { type: 'dragleave', listener: fn });
|
|
84
|
+
^^^^^^^^^^^
|
|
85
|
+
bind(element, { type: 'dragover', listener: fn });
|
|
86
|
+
^^^^^^^^^^
|
|
87
|
+
bind(element, { type: 'drag', listener: fn });
|
|
88
|
+
^^^^^^
|
|
89
|
+
bind(element, { type: 'drop', listener: fn });
|
|
90
|
+
^^^^^^
|
|
91
|
+
bind(element, { type: 'dragend', listener: fn });
|
|
92
|
+
^^^^^^^^^
|
|
93
|
+
```
|
|
94
|
+
|
|
95
|
+
Binding drag related events using `bindAll()` from [bind-event-listener](https://github.com/alexreardon/bind-event-listener)
|
|
96
|
+
|
|
97
|
+
```ts
|
|
98
|
+
import {bindAll} from 'bind-event-listener';
|
|
99
|
+
|
|
100
|
+
bindAll(window, [
|
|
101
|
+
{ type: 'dragstart', listener: fn },
|
|
102
|
+
^^^^^^^^^^
|
|
103
|
+
{ type: 'dragenter', listener: fn },
|
|
104
|
+
^^^^^^^^^^
|
|
105
|
+
{ type: 'dragleave', listener: fn },
|
|
106
|
+
^^^^^^^^^^
|
|
107
|
+
{ type: 'dragover', listener: fn },
|
|
108
|
+
^^^^^^^^^^
|
|
109
|
+
{ type: 'drag', listener: fn },
|
|
110
|
+
^^^^^^
|
|
111
|
+
{ type: 'drop', listener: fn },
|
|
112
|
+
^^^^^^
|
|
113
|
+
{ type: 'dragend', listener: fn },
|
|
114
|
+
^^^^^^^^^
|
|
115
|
+
]);
|
|
116
|
+
```
|
|
117
|
+
|
|
118
|
+
### Correct
|
|
119
|
+
|
|
120
|
+
Leveraging Pragmatic drag and drop for web platform drag and drop.
|
|
121
|
+
|
|
122
|
+
```ts
|
|
123
|
+
import { monitor } from '@atlaskit/pragmatic-drag-and-drop/element/adapter';
|
|
124
|
+
|
|
125
|
+
monitor({
|
|
126
|
+
onGenerateDragPreview: fn,
|
|
127
|
+
onDragStart: fn,
|
|
128
|
+
onDropTargetChange: fn,
|
|
129
|
+
onDrag: fn,
|
|
130
|
+
onDrop: fn,
|
|
131
|
+
});
|
|
132
|
+
```
|
|
133
|
+
|
|
134
|
+
> See the [Pragmatic drag and drop documentation](https://atlassian.design/components/pragmatic-drag-and-drop) for more information about it's usage.
|
|
135
|
+
|
|
136
|
+
Using blocked JSX attributes on custom `react` components
|
|
137
|
+
|
|
138
|
+
```tsx
|
|
139
|
+
<MyComponent onDragStart={fn}>
|
|
140
|
+
```
|
|
@@ -36,7 +36,11 @@ css({
|
|
|
36
36
|
```js
|
|
37
37
|
import { token } from '@atlaskit/tokens';
|
|
38
38
|
|
|
39
|
-
css({
|
|
39
|
+
css({ font: token('font.heading.large') });
|
|
40
40
|
|
|
41
|
-
css({
|
|
41
|
+
css({ font: token('font.body') });
|
|
42
42
|
```
|
|
43
|
+
|
|
44
|
+
## Options
|
|
45
|
+
|
|
46
|
+
`shouldEnforceFallbacks`: Set to `false` to ensure token fallback values are not added. Defaults to `true`.
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::1ab11547db880eba1206f334a9b2150f>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
var _default = exports.default = {
|
|
@@ -21,6 +21,7 @@ var _default = exports.default = {
|
|
|
21
21
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
22
22
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
23
23
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|
|
24
|
+
'@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop': 'error',
|
|
24
25
|
'@atlaskit/design-system/no-empty-styled-expression': 'warn',
|
|
25
26
|
'@atlaskit/design-system/no-exported-css': 'warn',
|
|
26
27
|
'@atlaskit/design-system/no-exported-keyframes': 'warn',
|
|
@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports.default = void 0;
|
|
7
7
|
/**
|
|
8
8
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
9
|
-
* @codegen <<SignedSource::
|
|
9
|
+
* @codegen <<SignedSource::05b4fe8f97edc4f7e46ded52b4917037>>
|
|
10
10
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
11
11
|
*/
|
|
12
12
|
var _default = exports.default = {
|
|
@@ -19,6 +19,7 @@ var _default = exports.default = {
|
|
|
19
19
|
'@atlaskit/design-system/no-deprecated-apis': 'error',
|
|
20
20
|
'@atlaskit/design-system/no-deprecated-design-token-usage': 'warn',
|
|
21
21
|
'@atlaskit/design-system/no-deprecated-imports': 'error',
|
|
22
|
+
'@atlaskit/design-system/no-direct-use-of-web-platform-drag-and-drop': 'error',
|
|
22
23
|
'@atlaskit/design-system/no-empty-styled-expression': 'warn',
|
|
23
24
|
'@atlaskit/design-system/no-exported-css': 'warn',
|
|
24
25
|
'@atlaskit/design-system/no-exported-keyframes': 'warn',
|
|
@@ -14,6 +14,7 @@ var _noCssTaggedTemplateExpression = _interopRequireDefault(require("./no-css-ta
|
|
|
14
14
|
var _noDeprecatedApis = _interopRequireDefault(require("./no-deprecated-apis"));
|
|
15
15
|
var _noDeprecatedDesignTokenUsage = _interopRequireDefault(require("./no-deprecated-design-token-usage"));
|
|
16
16
|
var _noDeprecatedImports = _interopRequireDefault(require("./no-deprecated-imports"));
|
|
17
|
+
var _noDirectUseOfWebPlatformDragAndDrop = _interopRequireDefault(require("./no-direct-use-of-web-platform-drag-and-drop"));
|
|
17
18
|
var _noEmptyStyledExpression = _interopRequireDefault(require("./no-empty-styled-expression"));
|
|
18
19
|
var _noExportedCss = _interopRequireDefault(require("./no-exported-css"));
|
|
19
20
|
var _noExportedKeyframes = _interopRequireDefault(require("./no-exported-keyframes"));
|
|
@@ -40,7 +41,7 @@ var _useTokensTypography = _interopRequireDefault(require("./use-tokens-typograp
|
|
|
40
41
|
var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
|
|
41
42
|
/**
|
|
42
43
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
43
|
-
* @codegen <<SignedSource::
|
|
44
|
+
* @codegen <<SignedSource::293575f7bd0150862f792e3fffc286c4>>
|
|
44
45
|
* @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
|
|
45
46
|
*/
|
|
46
47
|
var _default = exports.default = {
|
|
@@ -53,6 +54,7 @@ var _default = exports.default = {
|
|
|
53
54
|
'no-deprecated-apis': _noDeprecatedApis.default,
|
|
54
55
|
'no-deprecated-design-token-usage': _noDeprecatedDesignTokenUsage.default,
|
|
55
56
|
'no-deprecated-imports': _noDeprecatedImports.default,
|
|
57
|
+
'no-direct-use-of-web-platform-drag-and-drop': _noDirectUseOfWebPlatformDragAndDrop.default,
|
|
56
58
|
'no-empty-styled-expression': _noEmptyStyledExpression.default,
|
|
57
59
|
'no-exported-css': _noExportedCss.default,
|
|
58
60
|
'no-exported-keyframes': _noExportedKeyframes.default,
|
|
@@ -0,0 +1,31 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
|
|
3
|
+
Object.defineProperty(exports, "__esModule", {
|
|
4
|
+
value: true
|
|
5
|
+
});
|
|
6
|
+
exports.isBlockedAddEventListener = isBlockedAddEventListener;
|
|
7
|
+
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
|
+
var _blocked = require("../shared/blocked");
|
|
9
|
+
function isBlockedAddEventListener(node) {
|
|
10
|
+
var callee = node.callee;
|
|
11
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(callee, 'MemberExpression')) {
|
|
12
|
+
return false;
|
|
13
|
+
}
|
|
14
|
+
var property = callee.property;
|
|
15
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(property, 'Identifier')) {
|
|
16
|
+
return false;
|
|
17
|
+
}
|
|
18
|
+
if (property.name !== 'addEventListener') {
|
|
19
|
+
return false;
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
// check the first argument
|
|
23
|
+
var first = node.arguments[0];
|
|
24
|
+
|
|
25
|
+
// only checking literals for this eslint rule
|
|
26
|
+
if (!(0, _eslintCodemodUtils.isNodeOfType)(first, 'Literal')) {
|
|
27
|
+
return false;
|
|
28
|
+
}
|
|
29
|
+
var value = first.value;
|
|
30
|
+
return typeof value === 'string' && _blocked.blockedEventNameLookup.has(value);
|
|
31
|
+
}
|