@atlaskit/eslint-plugin-design-system 10.10.0 → 10.10.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 (56) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/dist/cjs/rules/no-legacy-icons/checks.js +63 -67
  3. package/dist/cjs/rules/no-legacy-icons/helpers.js +29 -24
  4. package/dist/cjs/rules/no-legacy-icons/index.js +4 -5
  5. package/dist/es2019/rules/no-legacy-icons/checks.js +20 -33
  6. package/dist/es2019/rules/no-legacy-icons/helpers.js +24 -21
  7. package/dist/es2019/rules/no-legacy-icons/index.js +4 -5
  8. package/dist/esm/rules/no-legacy-icons/checks.js +64 -68
  9. package/dist/esm/rules/no-legacy-icons/helpers.js +28 -23
  10. package/dist/esm/rules/no-legacy-icons/index.js +4 -5
  11. package/dist/types/rules/no-legacy-icons/helpers.d.ts +3 -13
  12. package/dist/types-ts4.5/rules/no-legacy-icons/helpers.d.ts +3 -13
  13. package/package.json +2 -2
  14. package/constellation/consistent-css-prop-usage/usage.mdx +0 -210
  15. package/constellation/ensure-design-token-usage/usage.mdx +0 -77
  16. package/constellation/ensure-design-token-usage-preview/usage.mdx +0 -6
  17. package/constellation/icon-label/usage.mdx +0 -41
  18. package/constellation/index/props.mdx +0 -30
  19. package/constellation/index/usage.mdx +0 -57
  20. package/constellation/no-banned-imports/usage.mdx +0 -19
  21. package/constellation/no-css-tagged-template-expression/usage.mdx +0 -71
  22. package/constellation/no-custom-icons/usage.mdx +0 -36
  23. package/constellation/no-deprecated-apis/usage.mdx +0 -82
  24. package/constellation/no-deprecated-design-token-usage/usage.mdx +0 -30
  25. package/constellation/no-deprecated-imports/usage.mdx +0 -66
  26. package/constellation/no-direct-use-of-web-platform-drag-and-drop/usage.mdx +0 -149
  27. package/constellation/no-empty-styled-expression/usage.mdx +0 -82
  28. package/constellation/no-exported-css/usage.mdx +0 -55
  29. package/constellation/no-exported-keyframes/usage.mdx +0 -55
  30. package/constellation/no-html-anchor/usage.mdx +0 -46
  31. package/constellation/no-html-button/usage.mdx +0 -52
  32. package/constellation/no-invalid-css-map/usage.mdx +0 -210
  33. package/constellation/no-keyframes-tagged-template-expression/usage.mdx +0 -80
  34. package/constellation/no-legacy-icons/usage.mdx +0 -42
  35. package/constellation/no-margin/usage.mdx +0 -21
  36. package/constellation/no-nested-styles/usage.mdx +0 -47
  37. package/constellation/no-physical-properties/usage.mdx +0 -53
  38. package/constellation/no-styled-tagged-template-expression/usage.mdx +0 -135
  39. package/constellation/no-unsafe-design-token-usage/usage.mdx +0 -50
  40. package/constellation/no-unsafe-style-overrides/usage.mdx +0 -52
  41. package/constellation/no-unsupported-drag-and-drop-libraries/usage.mdx +0 -23
  42. package/constellation/prefer-primitives/usage.mdx +0 -32
  43. package/constellation/use-button-group-label/usage.mdx +0 -60
  44. package/constellation/use-drawer-label/usage.mdx +0 -55
  45. package/constellation/use-heading/usage.mdx +0 -31
  46. package/constellation/use-heading-level-in-spotlight-card/usage.mdx +0 -21
  47. package/constellation/use-href-in-link-item/usage.mdx +0 -19
  48. package/constellation/use-latest-xcss-syntax/usage.mdx +0 -33
  49. package/constellation/use-latest-xcss-syntax-typography/usage.mdx +0 -34
  50. package/constellation/use-menu-section-title/usage.mdx +0 -55
  51. package/constellation/use-popup-label/usage.mdx +0 -56
  52. package/constellation/use-primitives/usage.mdx +0 -78
  53. package/constellation/use-primitives-text/usage.mdx +0 -35
  54. package/constellation/use-tokens-space/usage.mdx +0 -34
  55. package/constellation/use-tokens-typography/usage.mdx +0 -55
  56. package/constellation/use-visually-hidden/usage.mdx +0 -35
package/constellation/consistent-css-prop-usage/usage.mdx DELETED
@@ -1,210 +0,0 @@
1
- # consistent-css-prop-usage
2
-
3
- Ensures consistency with css prop usage.
4
-
5
- ## Rationale
6
-
7
- Every product should be defining styles in the same way, using the same tools, enforced by the same
8
- linting rules, which we can then all evolve and scale together.
9
-
10
- ## How the rule works
11
-
12
- This rule checks for the following cases:
13
-
14
- - Styles should not be defined inline; it should instead be in a standalone variable.
15
- - The exception for this is style composition (e.g. `<div css={[baseStyles, moreStyles]} />`),
16
- which is a way to combine styles from two variables.
17
- - Styles must be wrapped in a `css` function call.
18
- - Styles must be defined in the same file as their usage, and not be imported.
19
- - Styles should not contain spread operators (e.g. `css({ ...spreadStyles })`).
20
- - Styles must all be defined at the top of the file, or at the bottom of the file.
21
-
22
- This rule also has an autofixer that enforces and fixes the code (where practical) to meet the above
23
- requirements.
24
-
25
- All the above can also work for custom `css` functions, such as `xcss`
26
- (https://atlassian.design/components/primitives/xcss/).
27
-
28
- This rule has several options - see below.
29
-
30
- ## Examples
31
-
32
- ### Incorrect
33
-
34
- **Calling a css/xcss function or direct objects inside the JSX attribute.**
35
-
36
- ```js
37
- function Button({ children }) {
38
- return <div css={css({...})}>{children}</div>;
39
- ^^^^^^^ css function call used inline (performance issue)
40
- }
41
- ```
42
-
43
- **Inserting a non css-function based object identifier into a css JSX attribute.**
44
-
45
- ```js
46
- const container = {
47
- ^^^^^^^^^ should be a css function call
48
- zIndex: 10,
49
- };
50
-
51
- function Button({ children }) {
52
- return <button css={container}>{children}</button>;
53
- }
54
- ```
55
-
56
- **Importing styles from another file.**
57
-
58
- ```js
59
- import { container } from './styles';
60
- ^^^^^^^^^ styles should be local, not shared
61
-
62
- function Button({ children }) {
63
- return <button css={container}>{children}</button>;
64
- }
65
- ```
66
-
67
- **Nesting styles with objects instead of arrays.**
68
-
69
- ```js
70
- const baseContainerStyles = css({
71
- zIndex: 5,
72
- });
73
-
74
- const containerStyles = css({
75
- ...baseContainerStyles,
76
- ^^^^^^^^^^^^^^^^^^^^^^ compose styles by providing an array to the css call instead (see example below)
77
- zIndex: 7,
78
- });
79
-
80
- function Button({ children }) {
81
- return <button css={containerStyles}>{children}</button>;
82
- }
83
- ```
84
-
85
- ### Correct
86
-
87
- **Using the css() function to create a style object and passing it as a variable into the css={...}
88
- JSX attribute.**
89
-
90
- With the following options turned on:
91
-
92
- - cssFunctions = ['css']
93
- - stylesPlacement = 'top'
94
-
95
- ```js
96
- const containerStyles = css({
97
- zIndex: 1,
98
- });
99
-
100
- function Button({ children }) {
101
- return <button css={containerStyles}>{children}</button>;
102
- }
103
- ```
104
-
105
- **Technically correct usage of the cssMap function.**
106
-
107
- With the following options turned on:
108
-
109
- - cssFunctions = ['css']
110
- - stylesPlacement = 'top'
111
-
112
- ```js
113
- const borderStyles = cssMap({
114
- 'solid': '1px solid';
115
- 'none': '0px';
116
- })
117
-
118
- function Button({ children }) {
119
- return <button css={borderStyles[solid]}>{children}</button>;
120
- }
121
- ```
122
-
123
- **Create composite styles with arrays, not objects.**
124
-
125
- With the following options turned on:
126
-
127
- - cssFunctions = ['css']
128
- - stylesPlacement = 'bottom'
129
-
130
- ```js
131
- function Button({ children }) {
132
- return <button css={[baseContainerStyles, containerStyles]}>{children}</button>;
133
- }
134
-
135
- const baseContainerStyles = css({
136
- zIndex: 5,
137
- });
138
-
139
- const containerStyles = css({
140
- zIndex: 7,
141
- });
142
- ```
143
-
144
- **Ternaries can be used inline**
145
-
146
- ```js
147
- const baseStyles = css({ color: token('color.text.primary') });
148
- const disabledStyles = css({ color: token('color.text.disabled') });
149
-
150
- <div css={props.disabled ? disabledStyles : baseStyles}></div>;
151
- ```
152
-
153
- ## Options
154
-
155
- This rule comes with options to support different repository configurations.
156
-
157
- ### cssFunctions
158
-
159
- An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. The
160
- functionality of `cssMap` will be linted regardless of the configuration of `cssFunctions`, as it
161
- can be used with either attribute.
162
-
163
- ### stylesPlacement
164
-
165
- Either `top` or `bottom`.
166
-
167
- The rule prevents inline styles from being created. This option defines what the error message
168
- should say: "(...) styles at the top (...)" or "(...) styles at the bottom (...)". Defaults to
169
- `top`.
170
-
171
- ### cssImportSource
172
-
173
- When auto-fixing the contents of the `css` attribute, this rule will wrap CSS styles in a `css(...)`
174
- function call or ``css`...` `` template expression, and it will add an import declaration for the
175
- `css` function. `cssImportSource` is a string that determines what package `css` should be imported
176
- from.
177
-
178
- This is `@compiled/react` by default.
179
-
180
- ### xcssImportSource
181
-
182
- When auto-fixing the contents of the `xcss` attribute, this rule will wrap XCSS styles in a
183
- `xcss(...)` function call, and it will add an import declaration for the `xcss` function.
184
- `xcssImportSource` is a string that determines what package `xcss` should be imported from.
185
-
186
- This is `@atlaskit/primitives` by default.
187
-
188
- ### excludeReactComponents
189
-
190
- Whether to exclude `css` attributes of React components from being affected by this ESLint rule. We
191
- assume that an element is a React component if its name starts with a capital letter, e.g.
192
- `<Button />`.
193
-
194
- This is `false` by default.
195
-
196
- ### shouldAlwaysCheckXcss
197
-
198
- Overrides `excludeReactComponents` specifically for the `xcss` prop.
199
-
200
- This means that even if `excludeReactComponents` is `true`, you can still lint the `xcss` prop by
201
- setting `shouldAlwaysCheckXcss` to `true`.
202
-
203
- This is `false` by default.
204
-
205
- ### autoFix
206
-
207
- When set to `true`, this rule will turn on the autofixer. Set this to `false` if you do not want the
208
- autofixers to run.
209
-
210
- This is `true` by default.
package/constellation/ensure-design-token-usage/usage.mdx DELETED
@@ -1,77 +0,0 @@
1
- # ensure-design-token-usage
2
-
3
- Using design tokens results in a harmonious experience for end users whilst providing theming and
4
- consistency. All experiences must use color tokens otherwise when switching between themes,
5
- unexpected incidents can occur where not all of the UI is themed. Space, and shape tokens are
6
- strongly recommended to further align our experiences and make future changes easier.
7
-
8
- ## Examples
9
-
10
- Using anything other than design tokens such as hardcoded values or legacy theme colors will be
11
- considered violations.
12
-
13
- ### Incorrect
14
-
15
- ```js
16
- import { e100 } from '@atlaskit/theme/elevation';
17
- import { B100 } from '@atlaskit/theme/colors';
18
-
19
- css({ color: 'red' });
20
- ^^^
21
- css({ boxShadow: '0px 1px 1px #161A1D32' });
22
- ^^^^^^^^^
23
- css`${e100};`;
24
- ^^^^
25
- css({ color: B100 });
26
- ^^^^
27
- ```
28
-
29
- ### Correct
30
-
31
- ```js
32
- import { token } from '@atlaskit/tokens';
33
-
34
- css({ color: token('color.text.danger') });
35
-
36
- css({ boxShadow: token('elevation.shadow.card') });
37
- ```
38
-
39
- ### Incorrect
40
-
41
- ```js
42
- css({ padding: '16px' });
43
- ^^^
44
- css({ margin: gridSize() });
45
- ^^^^^^^^^^
46
- ```
47
-
48
- ### Correct
49
-
50
- ```js
51
- import { token } from '@atlaskit/tokens';
52
-
53
- css({ padding: token('space.100') });
54
- ```
55
-
56
- ## Options
57
-
58
- This rule comes with options to aid in migrating to design tokens.
59
-
60
- ### domains
61
-
62
- An array specifiying which token domains to lint against (`color`, `spacing`, `shape`). Defaults to
63
- [`'color'`] if not provided.
64
-
65
- ### applyImport
66
-
67
- When `true`, the rule when automatically add imports to the `@atlaskit/tokens` package where tokens
68
- are auto-fixed. Defaults to `true` if not provided.
69
-
70
- ### shouldEnforceFallbacks
71
-
72
- When `true` the rule will add in stub fallbacks when choosing a suggestion in your IDE. Defaults to
73
- `false` if not provided.
74
-
75
- ### exceptions
76
-
77
- An array specifying strings to ingore when linting.
package/constellation/ensure-design-token-usage-preview/usage.mdx DELETED
@@ -1,6 +0,0 @@
1
- # ensure-design-token-usage/preview
2
-
3
- This rule is a clone of `ensure-design-token-usage` and is intended to allow you to set some domains
4
- to `warn` before they are set to `error` in the main rule.
5
-
6
- See `ensure-design-token-usage` for full usage documentation.
package/constellation/icon-label/usage.mdx DELETED
@@ -1,41 +0,0 @@
1
- # icon-label
2
-
3
- Icon labels are used to describe what the icon is so the visually impaired can be described what the
4
- UI element is. There are cases where icons should have labels as well as cases where they shouldn't
5
- be labelled.
6
-
7
- ## Examples
8
-
9
- This rule will find violations for when an icon label is or isn't needed when composed with other
10
- Design System components.
11
-
12
- ### Incorrect
13
-
14
- ```js
15
- import ActivityIcon from '@atlaskit/icon/glyph/activity'
16
-
17
- <ActivityIcon>
18
- ^^^^^^^^^^^^^^ missing `label` prop
19
-
20
- <Button iconLeft={<ActivityIcon label="">} />
21
- ^^^^^ label should be defined
22
-
23
- <ButtonItem iconBefore={<ActivityIcon label="">}>
24
- ^^^^^ label should not be defined
25
- My activity
26
- </ButtonItem>
27
- ```
28
-
29
- ### Correct
30
-
31
- ```js
32
- import ActivityIcon from '@atlaskit/icon/glyph/activity'
33
-
34
- <ActivityIcon label="Activity">
35
-
36
- <Button iconLeft={<ActivityIcon label="Activity">} />
37
-
38
- <ButtonItem iconBefore={<ActivityIcon label="">}>
39
- My activity
40
- </ButtonItem>
41
- ```
package/constellation/index/props.mdx DELETED
@@ -1,30 +0,0 @@
1
- Use the recommended config to get reasonable defaults recommended by the Atlassian Design System:
2
-
3
- ```diff
4
- module.exports = {
5
- extends: [
6
- + 'plugin:@atlaskit/design-system/recommended',
7
- ],
8
- };
9
- ```
10
-
11
- We don't recommended maintaining your own configuration. If you do not use our config you will need
12
- to specify individual rules and configuration. Add the plugin to your `.eslintrc.js` file.
13
-
14
- ```diff
15
- module.exports = {
16
- plugins: [
17
- + '@atlaskit/design-system',
18
- ],
19
- };
20
- ```
21
-
22
- Enable the rules that you would like to use.
23
-
24
- ```diff
25
- module.exports = {
26
- rules: [
27
- + '@atlaskit/design-system/no-deprecated-apis': 'error',
28
- ],
29
- };
30
- ```
package/constellation/index/usage.mdx DELETED
@@ -1,57 +0,0 @@
1
- ---
2
- order: 0
3
- ---
4
-
5
- This plugin contains rules that should be used when working with the
6
- [Atlassian Design System](https://atlassian.design).
7
-
8
- ## Rules
9
-
10
- <!-- START_RULE_TABLE_CODEGEN -->
11
- <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
12
-
13
- | Rule | Description | Recommended | Fixable | Suggestions |
14
- | --------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
15
- | <a href="/components/eslint-plugin-design-system/consistent-css-prop-usage/usage">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
16
- | <a href="/components/eslint-plugin-design-system/ensure-design-token-usage/usage">ensure-design-token-usage</a> | Enforces usage of design tokens rather than hard-coded values. | Yes | Yes | Yes |
17
- | <a href="/components/eslint-plugin-design-system/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 |
18
- | <a href="/components/eslint-plugin-design-system/icon-label/usage">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
19
- | <a href="/components/eslint-plugin-design-system/no-banned-imports/usage">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
20
- | <a href="/components/eslint-plugin-design-system/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 | |
21
- | <a href="/components/eslint-plugin-design-system/no-custom-icons/usage">no-custom-icons</a> | Enforces custom glyph icons are used. | | | |
22
- | <a href="/components/eslint-plugin-design-system/no-deprecated-apis/usage">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
23
- | <a href="/components/eslint-plugin-design-system/no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
24
- | <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
25
- | <a href="/components/eslint-plugin-design-system/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 | | |
26
- | <a href="/components/eslint-plugin-design-system/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 | | |
27
- | <a href="/components/eslint-plugin-design-system/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 | | |
28
- | <a href="/components/eslint-plugin-design-system/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 | | |
29
- | <a href="/components/eslint-plugin-design-system/no-html-anchor/usage">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | | | |
30
- | <a href="/components/eslint-plugin-design-system/no-html-button/usage">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | Yes | | |
31
- | <a href="/components/eslint-plugin-design-system/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 | | |
32
- | <a href="/components/eslint-plugin-design-system/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 | |
33
- | <a href="/components/eslint-plugin-design-system/no-legacy-icons/usage">no-legacy-icons</a> | Enforces no legacy icons are used. | | | |
34
- | <a href="/components/eslint-plugin-design-system/no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
35
- | <a href="/components/eslint-plugin-design-system/no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
36
- | <a href="/components/eslint-plugin-design-system/no-physical-properties/usage">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
37
- | <a href="/components/eslint-plugin-design-system/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 | |
38
- | <a href="/components/eslint-plugin-design-system/no-unsafe-design-token-usage/usage">no-unsafe-design-token-usage</a> | Enforces design token usage is statically and locally analyzable. | Yes | Yes | |
39
- | <a href="/components/eslint-plugin-design-system/no-unsafe-style-overrides/usage">no-unsafe-style-overrides</a> | Discourage usage of unsafe style overrides used against the Atlassian Design System. | Yes | | |
40
- | <a href="/components/eslint-plugin-design-system/no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
41
- | <a href="/components/eslint-plugin-design-system/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. | | | |
42
- | <a href="/components/eslint-plugin-design-system/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 |
43
- | <a href="/components/eslint-plugin-design-system/use-drawer-label/usage">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
44
- | <a href="/components/eslint-plugin-design-system/use-heading/usage">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
45
- | <a href="/components/eslint-plugin-design-system/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 | |
46
- | <a href="/components/eslint-plugin-design-system/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 |
47
- | <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax/usage">use-latest-xcss-syntax</a> | Enforces usage of space design tokens rather than hard-coded values in xcss. | Yes | Yes | |
48
- | <a href="/components/eslint-plugin-design-system/use-latest-xcss-syntax-typography/usage">use-latest-xcss-syntax-typography</a> | Prohibits use of unsafe styling properties in xcss. Please use Text/Heading primitives instead. | Yes | Yes | |
49
- | <a href="/components/eslint-plugin-design-system/use-menu-section-title/usage">use-menu-section-title</a> | Encourages makers to provide accessible title for Atlassian Design System Menu Section component. | Yes | | Yes |
50
- | <a href="/components/eslint-plugin-design-system/use-popup-label/usage">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
51
- | <a href="/components/eslint-plugin-design-system/use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
52
- | <a href="/components/eslint-plugin-design-system/use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
53
- | <a href="/components/eslint-plugin-design-system/use-tokens-space/usage">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
54
- | <a href="/components/eslint-plugin-design-system/use-tokens-typography/usage">use-tokens-typography</a> | Enforces usage of design tokens for typography properties rather than hard-coded values. | | Yes | Yes |
55
- | <a href="/components/eslint-plugin-design-system/use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
56
-
57
- <!-- END_RULE_TABLE_CODEGEN -->
package/constellation/no-banned-imports/usage.mdx DELETED
@@ -1,19 +0,0 @@
1
- # no-banned-imports
2
-
3
- Using private or experimental packages is dangerous as they are not supported across major versions
4
- meaning you will not be able to migrate easily causing friction for yourself and the Atlassian
5
- Design System team.
6
-
7
- ## Examples
8
-
9
- Anything that is considered private or experimental will be marked as violations.
10
-
11
- ### Incorrect
12
-
13
- ```ts
14
- import noop from '@atlaskit/ds-lib/noop';
15
- ^^^^^^^^^^^^^^^^^^^^^
16
-
17
- import { Text } from '@atlaskit/ds-explorations';
18
- ^^^^^^^^^^^^^^^^^^^^^^^^^
19
- ```
package/constellation/no-css-tagged-template-expression/usage.mdx DELETED
@@ -1,71 +0,0 @@
1
- # no-css-tagged-template-expression
2
-
3
- Disallows any `css` tagged template expressions that originate from a CSS-in-JS library, including
4
- `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.
5
-
6
- Tagged template expressions cannot be type safe and are difficult to parse correctly. Will auto fix
7
- ` css`` ` to the preferred `css({})` call expression syntax.
8
-
9
- Thank you to the
10
- [Compiled team for their rule](https://github.com/atlassian-labs/compiled/tree/master/packages/eslint-plugin/src/rules/no-css-tagged-template-expression)
11
- from which this was ported.
12
-
13
- ## Examples
14
-
15
- ### Incorrect
16
-
17
- ```js
18
- import { css } from '@emotion/react';
19
-
20
- css`
21
- color: blue;
22
- `;
23
-
24
- const styles = css`
25
- color: blue;
26
- font-weight: 500;
27
- `;
28
- ```
29
-
30
- ### Correct
31
-
32
- ```js
33
- import { css } from '@emotion/react';
34
-
35
- css({ color: 'blue' });
36
-
37
- const styles = css({
38
- color: 'blue',
39
- fontWeight: 500,
40
- });
41
- ```
42
-
43
- ## Options
44
-
45
- ### importSources
46
-
47
- By default, this rule will check `css` usages from:
48
-
49
- - `@atlaskit/css`
50
- - `@atlaskit/primitives`
51
- - `@compiled/react`
52
- - `@emotion/react`
53
- - `@emotion/core`
54
- - `@emotion/styled`
55
- - `styled-components`
56
-
57
- To change this list of libraries, you can define a custom set of `importSources`, which accepts an
58
- array of package names (strings).
59
-
60
- ```tsx
61
- // [{ importSources: ['other-lib'] }]
62
-
63
- import { css } from 'other-lib';
64
-
65
- // Invalid!
66
- export const styles = css``;
67
- ```
68
-
69
- ## Limitations
70
-
71
- - Comments are not auto-fixable. You will need to manually convert usages containing functions.
package/constellation/no-custom-icons/usage.mdx DELETED
@@ -1,36 +0,0 @@
1
- # no-custom-icons
2
-
3
- Icons are being updated with new designs, a simplified set of available icons and sizes, as well as
4
- more consistent padding and spacing.
5
-
6
- The new icon components allows your components to align with the new visual language - either by
7
- default, or when enabled via a feature flag.
8
-
9
- Custom icons are no longer supported, and should either be replaced with an existing icon from the
10
- `@atlaskit/icon` or `@atlassian/icon-lab` packages, or contributed to those packages.
11
-
12
- During the migration process, any custom icons should be moved into a central location to disable
13
- this error and allow the icon to be quickly replaced. What location to display in the error can be
14
- configured via the legacyIconPackages option.
15
-
16
- ## Examples
17
-
18
- This rule identifies usages of custom icons from `@atlaskit/icon` or `@atlaskit/icon/base`.
19
-
20
- ### Incorrect
21
-
22
- ```js
23
- import Icon from '@atlaskit/icon';
24
- ^^^^^^^^^^^^^^^^^ custom icon import
25
-
26
- <Icon label="Activity" glyph="...">
27
- ^^^^^^^^^^^^^^^^^^^^^^^ custom icon
28
- ```
29
-
30
- ### Correct
31
-
32
- ```js
33
- import AddIcon from '@atlaskit/icon/core/add';
34
-
35
- <AddIcon label="" />;
36
- ```
package/constellation/no-deprecated-apis/usage.mdx DELETED
@@ -1,82 +0,0 @@
1
- # no-deprecated-apis
2
-
3
- Props across the Atlassian Design System can be deprecated when they are deemed no-longer fit for
4
- purporse or dangerous and risk effective use at scale.
5
-
6
- ## Examples
7
-
8
- Anything that can be used as props from Atlassian Design System components can be violations when
9
- marked as deprecated.
10
-
11
- ### Incorrect
12
-
13
- ```tsx
14
- <ButtonItem cssFn={cssFn()} />
15
- ^^^^
16
-
17
- <Drawer overrides={overrides} />
18
- ^^^^^^^^^
19
- ```
20
-
21
- ## Options
22
-
23
- The rule can take one option: `deprecatedConfig`, if not provided the rule will use an internal
24
- config. If provided the rule will use the passed in config instead.
25
-
26
- ### deprecatedConfig
27
-
28
- The following fields can be defined in the config:
29
-
30
- - `deprecatedProp`, which is the deprecated props. Each prop has the following fields:
31
- - `moduleSpecifier`, which is the module specifier of the package in which the prop was
32
- deprecated. For example: `@atlaskit/button`.
33
- - `namedSpecifier` **(optional)**, which is an array of named specifiers of the package in which
34
- the prop was deprecated. For example: `Button`.
35
- - `actionableVersion` **(optional)**, which is the version of the package in which the prop can be
36
- actioned on. For example: `1.0.0`.
37
-
38
- ```json
39
- {
40
- "cssFn": [
41
- {
42
- "moduleSpecifier": "@atlaskit/menu"
43
- }
44
- ]
45
- }
46
- ```
47
-
48
- ```js
49
- import { configs } from '@atlaskit/eslint-plugin-design-system';
50
-
51
- module.exports = {
52
- rules: {
53
- '@atlaskit/design-system/no-deprecated-api': [
54
- 'error',
55
- {
56
- deprecatedConfig: {
57
- cssFn: [
58
- {
59
- moduleSpecifier: '@atlaskit/menu',
60
- },
61
- ],
62
- },
63
- },
64
- ],
65
- },
66
- };
67
- ```
68
-
69
- The plugin also provides a `filterActionableDeprecations` util function that accepts the
70
- `deprecated APIs config` and your root `package.json` as params and will filter the default
71
- deprecated APIs config based on the package versions installed.
72
-
73
- ```js
74
- import { configs, filterActionableDeprecations } from '@atlaskit/eslint-plugin-design-system';
75
- import packageJson from './package.json';
76
-
77
- rules: {
78
- '@atlaskit/design-system/no-deprecated-api': ['error', {
79
- 'deprecatedConfig': filterActionableDeprecations(configs.deprecatedConfig, packageJson),
80
- }]
81
- }
82
- ```