@atlaskit/eslint-plugin-design-system 8.31.0 → 8.32.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.
Files changed (40) hide show
  1. package/CHANGELOG.md +12 -0
  2. package/README.md +1 -0
  3. package/constellation/consistent-css-prop-usage/usage.mdx +1 -1
  4. package/constellation/index/usage.mdx +1 -0
  5. package/constellation/no-css-tagged-template-expression/usage.mdx +1 -1
  6. package/constellation/no-empty-styled-expression/usage.mdx +1 -1
  7. package/constellation/no-exported-css/usage.mdx +2 -2
  8. package/constellation/no-exported-keyframes/usage.mdx +2 -2
  9. package/constellation/no-html-button-element/usage.mdx +26 -0
  10. package/constellation/no-keyframes-tagged-template-expression/usage.mdx +1 -3
  11. package/constellation/no-styled-tagged-template-expression/usage.mdx +2 -4
  12. package/dist/cjs/presets/all.codegen.js +2 -1
  13. package/dist/cjs/rules/consistent-css-prop-usage/index.js +375 -334
  14. package/dist/cjs/rules/index.codegen.js +3 -1
  15. package/dist/cjs/rules/no-html-button-element/index.js +107 -0
  16. package/dist/cjs/rules/no-html-button-element/utils.js +18 -0
  17. package/dist/cjs/rules/prefer-primitives/utils.js +1 -1
  18. package/dist/es2019/presets/all.codegen.js +2 -1
  19. package/dist/es2019/rules/consistent-css-prop-usage/index.js +283 -267
  20. package/dist/es2019/rules/index.codegen.js +3 -1
  21. package/dist/es2019/rules/no-html-button-element/index.js +101 -0
  22. package/dist/es2019/rules/no-html-button-element/utils.js +12 -0
  23. package/dist/es2019/rules/prefer-primitives/utils.js +1 -1
  24. package/dist/esm/presets/all.codegen.js +2 -1
  25. package/dist/esm/rules/consistent-css-prop-usage/index.js +375 -334
  26. package/dist/esm/rules/index.codegen.js +3 -1
  27. package/dist/esm/rules/no-html-button-element/index.js +101 -0
  28. package/dist/esm/rules/no-html-button-element/utils.js +12 -0
  29. package/dist/esm/rules/prefer-primitives/utils.js +1 -1
  30. package/dist/types/index.codegen.d.ts +1 -0
  31. package/dist/types/presets/all.codegen.d.ts +2 -1
  32. package/dist/types/rules/index.codegen.d.ts +1 -0
  33. package/dist/types/rules/no-html-button-element/index.d.ts +3 -0
  34. package/dist/types/rules/no-html-button-element/utils.d.ts +2 -0
  35. package/dist/types-ts4.5/index.codegen.d.ts +1 -0
  36. package/dist/types-ts4.5/presets/all.codegen.d.ts +2 -1
  37. package/dist/types-ts4.5/rules/index.codegen.d.ts +1 -0
  38. package/dist/types-ts4.5/rules/no-html-button-element/index.d.ts +3 -0
  39. package/dist/types-ts4.5/rules/no-html-button-element/utils.d.ts +2 -0
  40. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/eslint-plugin-design-system
2
2
 
3
+ ## 8.32.1
4
+
5
+ ### Patch Changes
6
+
7
+ - [#77519](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/77519) [`6507c28d3c88`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6507c28d3c88) - Refactor implementation of `no-css-tagged-template-expression`. No change to functionality expected.
8
+
9
+ ## 8.32.0
10
+
11
+ ### Minor Changes
12
+
13
+ - [#58240](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/58240) [`39f3c929f0c4`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/39f3c929f0c4) - Add new rule `no-html-button-element` to enforce usage of Pressable and Button
14
+
3
15
  ## 8.31.0
4
16
 
5
17
  ### Minor Changes
package/README.md CHANGED
@@ -61,6 +61,7 @@ module.exports = {
61
61
  | <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 | | |
62
62
  | <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 | | |
63
63
  | <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 | | |
64
+ | <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. | | | |
64
65
  | <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 | | |
65
66
  | <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 | |
66
67
  | <a href="./src/rules/no-margin/README.md">no-margin</a> | Disallow using the margin CSS property. | | | |
package/constellation/consistent-css-prop-usage/usage.mdx CHANGED
@@ -165,7 +165,7 @@ Defaults to `top`.
165
165
 
166
166
  ### cssImportSource
167
167
 
168
- When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)` function call or `` css\`...\` `` template expression, and it will add an import declaration for the `css` function. `cssImportSource` is a string that determines what package `css` should be imported from.
168
+ When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)` function call or `` css`...` `` template expression, and it will add an import declaration for the `css` function. `cssImportSource` is a string that determines what package `css` should be imported from.
169
169
 
170
170
  This is `@compiled/react` by default.
171
171
 
package/constellation/index/usage.mdx CHANGED
@@ -23,6 +23,7 @@ This plugin contains rules that should be used when working with the [Atlassian
23
23
  | <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 | | |
24
24
  | <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 | | |
25
25
  | <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 | | |
26
+ | <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. | | | |
26
27
  | <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 | | |
27
28
  | <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 | |
28
29
  | <a href="no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
package/constellation/no-css-tagged-template-expression/usage.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  # no-css-tagged-template-expression
2
2
 
3
- Disallows any `css` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
3
+ Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
5
  Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix ` css`` ` to the preferred `css({})` call expression syntax.
6
6
 
package/constellation/no-empty-styled-expression/usage.mdx CHANGED
@@ -1,6 +1,6 @@
1
1
  # no-empty-styled-expression
2
2
 
3
- Disallows/discourages passing empty arguments to any `styled` expression when using `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
3
+ Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
5
  If Compiled is used in the file, passing an empty object or no object at all causes Compiled to build extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced performance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in the empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.
6
6
 
package/constellation/no-exported-css/usage.mdx CHANGED
@@ -1,8 +1,8 @@
1
1
  # no-exported-css
2
2
 
3
- Disallows `css` export declarations that originate from `@compiled/react` and `@atlaskit/css`, as well as any other CSS-in-JS library defined through the `importSources` option.
3
+ Disallows `css` export declarations that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
- In Compiled, exporting css declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating css definitions with their usage is considered best practice in order to improve code readability and build performance.
5
+ In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `css` declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating `css` definitions with their usage is considered best practice in order to improve code readability and build performance.
6
6
 
7
7
  ## Examples
8
8
 
package/constellation/no-exported-keyframes/usage.mdx CHANGED
@@ -1,8 +1,8 @@
1
1
  # no-exported-keyframes
2
2
 
3
- Disallows `keyframes` export declarations that originate from `@compiled/react`, as well as any other CSS-in-JS library defined through the `importSources` option.
3
+ Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
- In Compiled, exporting keyframes declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating keyframes definitions with their usage is considered best practice in order to improve code readability and build performance.
5
+ In Compiled (`@atlaskit/css` and `@compiled/react`), exporting `keyframes` declarations may result in unexpected errors when imported, because its value will be `null` at runtime. Additionally, co-locating `keyframes` definitions with their usage is considered best practice in order to improve code readability and build performance.
6
6
 
7
7
  ## Examples
8
8
 
package/constellation/no-html-button-element/usage.mdx ADDED
@@ -0,0 +1,26 @@
1
+ # no-html-button-element
2
+
3
+ HTML `<button>` elements should not be used. They can be replaced using the Button component or the Pressable primitive, which are ready made solutions made by the Atlassian Design System Team. This benefits analytics as they are fitted with tracking by default and provide safe access to design tokens for styling.
4
+
5
+ ## Examples
6
+
7
+ This rule marks code as violations when it can be replaced with either a Button component or a Pressable primitive.
8
+
9
+ ### Incorrect
10
+
11
+ ```js
12
+ <button>Click me</button>
13
+ ^^^^^^^^^^^^^^^^^^^^^^^^^
14
+ ```
15
+
16
+ ### Correct
17
+
18
+ ```js
19
+ <Button>Click me</Button>
20
+ ^^^^^^^^^^^^^^^^^^^^^^^^^
21
+ ```
22
+
23
+ ```js
24
+ <Pressable>Click me</Pressable>
25
+ ^^^^^^^^^^^^^^^^^^^^^^^^^
26
+ ```
package/constellation/no-keyframes-tagged-template-expression/usage.mdx CHANGED
@@ -1,13 +1,11 @@
1
1
  # no-keyframes-tagged-template-expression
2
2
 
3
- Disallows any `keyframes` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
3
+ Disallows any `keyframes` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
5
  Tagged template expressions are difficult to parse correctly (which can lead to more frequent build failures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These problems can be avoided by using the preferred call expression syntax instead.
6
6
 
7
7
  Thank you to the [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-keyframes-tagged-template-expression) from which this was ported.
8
8
 
9
- ---
10
-
11
9
  The `--fix` option on the command line automatically fixes problems reported by this rule.
12
10
 
13
11
  ## Examples
package/constellation/no-styled-tagged-template-expression/usage.mdx CHANGED
@@ -1,11 +1,9 @@
1
1
  # no-styled-tagged-template-expression
2
2
 
3
- Disallows any `styled` tagged template expressions that originate from `@emotion/react`, `@emotion/core`, `compiled/react` or `styled-components`.
3
+ Disallows any `styled` tagged template expressions that originate from a CSS-in-JS library, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
4
4
 
5
5
  Tagged template expressions are difficult to parse correctly (which can lead to more frequent build failures or invalid CSS generation), have limited type safety, and lack syntax highlighting. These problems can be avoided by using the preferred call expression syntax instead.
6
6
 
7
- ---
8
-
9
7
  The `--fix` option on the command line automatically fixes problems reported by this rule.
10
8
 
11
9
  ## Examples
@@ -87,4 +85,4 @@ export const Component = styled.div``;
87
85
 
88
86
  ## Limitations
89
87
 
90
- - Comments are not fixable
88
+ - Comments are not fixable.
package/dist/cjs/presets/all.codegen.js CHANGED
@@ -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::aa64b4343b8763cfa5aa66230faea408>>
9
+ * @codegen <<SignedSource::bcb633b9d5c2def00d43b11139433c5c>>
10
10
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
11
11
  */
12
12
  var _default = exports.default = {
@@ -24,6 +24,7 @@ var _default = exports.default = {
24
24
  '@atlaskit/design-system/no-empty-styled-expression': 'warn',
25
25
  '@atlaskit/design-system/no-exported-css': 'warn',
26
26
  '@atlaskit/design-system/no-exported-keyframes': 'warn',
27
+ '@atlaskit/design-system/no-html-button-element': 'warn',
27
28
  '@atlaskit/design-system/no-invalid-css-map': 'error',
28
29
  '@atlaskit/design-system/no-keyframes-tagged-template-expression': 'error',
29
30
  '@atlaskit/design-system/no-margin': 'warn',