@atlaskit/eslint-plugin-design-system 10.4.0 → 10.4.2

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 (9) hide show
  1. package/CHANGELOG.md +17 -0
  2. package/constellation/index/usage.mdx +39 -39
  3. package/dist/cjs/rules/no-banned-imports/paths.js +0 -6
  4. package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js +6 -0
  5. package/dist/es2019/rules/no-banned-imports/paths.js +0 -6
  6. package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js +7 -1
  7. package/dist/esm/rules/no-banned-imports/paths.js +0 -6
  8. package/dist/esm/rules/use-tokens-typography/transformers/style-object.js +6 -0
  9. package/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,22 @@
1
1
  # @atlaskit/eslint-plugin-design-system
2
2
 
3
+ ## 10.4.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#104190](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/104190)
8
+ [`a6243f719741`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/a6243f719741) -
9
+ `no-banned-imports`: Remove banned paths for unsafe Buttons and Pressable primitive
10
+
11
+ ## 10.4.1
12
+
13
+ ### Patch Changes
14
+
15
+ - [#103215](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/103215)
16
+ [`1108a9b46be2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/1108a9b46be2) -
17
+ Fixed an issue with the `use-tokens-typography` rule where font family properties that were
18
+ already using a token could be misinterpreted and cause the font family property to be removed.
19
+
3
20
  ## 10.4.0
4
21
 
5
22
  ### Minor Changes
package/constellation/index/usage.mdx CHANGED
@@ -10,44 +10,44 @@ This plugin contains rules that should be used when working with the
10
10
  <!-- START_RULE_TABLE_CODEGEN -->
11
11
  <!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->
12
12
 
13
- | Rule | Description | Recommended | Fixable | Suggestions |
14
- | ----------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |
15
- | <a href="consistent-css-prop-usage/usage">consistent-css-prop-usage</a> | Ensures consistency with `css` and `xcss` prop usages | Yes | Yes | |
16
- | <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 |
17
- | <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 |
18
- | <a href="icon-label/usage">icon-label</a> | Enforces accessible usage of icon labels when composed with Atlassian Design System components. | Yes | Yes | |
19
- | <a href="no-banned-imports/usage">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |
20
- | <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 | |
21
- | <a href="no-deprecated-apis/usage">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
22
- | <a href="no-deprecated-design-token-usage/usage">no-deprecated-design-token-usage</a> | Disallow using deprecated design tokens. | Yes | Yes | |
23
- | <a href="no-deprecated-imports/usage">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
24
- | <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 | | |
25
- | <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 | | |
26
- | <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 | | |
27
- | <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 | | |
28
- | <a href="no-html-anchor/usage">no-html-anchor</a> | Discourage direct usage of HTML anchor elements in favor of Atlassian Design System link components. | | | |
29
- | <a href="no-html-button/usage">no-html-button</a> | Discourage direct usage of HTML button elements in favor of Atlassian Design System button components. | | | |
30
- | <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 | | |
31
- | <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 | |
32
- | <a href="no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
33
- | <a href="no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
34
- | <a href="no-physical-properties/usage">no-physical-properties</a> | Disallow physical properties and values in `css` function calls. | | Yes | |
35
- | <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 | |
36
- | <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 | |
37
- | <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 | | |
38
- | <a href="no-unsupported-drag-and-drop-libraries/usage">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules. | Yes | | |
39
- | <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. | | | |
40
- | <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 |
41
- | <a href="use-drawer-label/usage">use-drawer-label</a> | Encourages to provide accessible name for Atlassian Design System Drawer component. | Yes | | Yes |
42
- | <a href="use-heading/usage">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
43
- | <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 | |
44
- | <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 |
45
- | <a href="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 | |
46
- | <a href="use-popup-label/usage">use-popup-label</a> | Encourages to provide accessible name for Atlassian Design System Popup component. | Yes | | Yes |
47
- | <a href="use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
48
- | <a href="use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
49
- | <a href="use-tokens-space/usage">use-tokens-space</a> | Enforces usage of space design tokens rather than hard-coded values. | | Yes | Yes |
50
- | <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 |
51
- | <a href="use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
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-deprecated-apis/usage">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |
22
+ | <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 | |
23
+ | <a href="/components/eslint-plugin-design-system/no-deprecated-imports/usage">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | | |
24
+ | <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 | | |
25
+ | <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 | | |
26
+ | <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 | | |
27
+ | <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 | | |
28
+ | <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. | | | |
29
+ | <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. | | | |
30
+ | <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 | | |
31
+ | <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 | |
32
+ | <a href="/components/eslint-plugin-design-system/no-margin/usage">no-margin</a> | Disallow using the margin CSS property. | | | |
33
+ | <a href="/components/eslint-plugin-design-system/no-nested-styles/usage">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |
34
+ | <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 | |
35
+ | <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 | |
36
+ | <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 | |
37
+ | <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 | | |
38
+ | <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 | | |
39
+ | <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. | | | |
40
+ | <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 |
41
+ | <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 |
42
+ | <a href="/components/eslint-plugin-design-system/use-heading/usage">use-heading</a> | Encourage the usage of heading components. | | Yes | Yes |
43
+ | <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 | |
44
+ | <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 |
45
+ | <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 | |
46
+ | <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 |
47
+ | <a href="/components/eslint-plugin-design-system/use-primitives/usage">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |
48
+ | <a href="/components/eslint-plugin-design-system/use-primitives-text/usage">use-primitives-text</a> | Encourage the usage of text components. | | Yes | Yes |
49
+ | <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 |
50
+ | <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 |
51
+ | <a href="/components/eslint-plugin-design-system/use-visually-hidden/usage">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |
52
52
 
53
53
  <!-- END_RULE_TABLE_CODEGEN -->
package/dist/cjs/rules/no-banned-imports/paths.js CHANGED
@@ -5,15 +5,9 @@ Object.defineProperty(exports, "__esModule", {
5
5
  });
6
6
  exports.restrictedPaths = void 0;
7
7
  var restrictedPaths = exports.restrictedPaths = [{
8
- path: '@atlaskit/button/unsafe',
9
- message: "The '@atlaskit/button/unsafe' export is for internal usage and testing of new button features and should not be consumed directly."
10
- }, {
11
8
  path: '@atlaskit/ds-lib',
12
9
  message: "The '@atlaskit/ds-lib' library has been designed as a utility library for internal usage and should not be consumed directly."
13
10
  }, {
14
11
  path: '@atlaskit/ds-explorations',
15
12
  message: "The @atlaskit/ds-explorations package is used for experiments and should not be consumed directly."
16
- }, {
17
- path: '@atlaskit/primitives/pressable',
18
- message: "The @atlaskit/primitives/pressable export is currently under development and should not be consumed directly."
19
13
  }];
package/dist/cjs/rules/use-tokens-typography/transformers/style-object.js CHANGED
@@ -95,6 +95,12 @@ var StyleObject = exports.StyleObject = {
95
95
  var fontFamilyNode = _astNodes.Object.getEntryByPropertyName(node, 'fontFamily');
96
96
  var fontFamilyRaw = fontFamilyNode && (0, _utils.getValueForPropertyNode)(fontFamilyNode, context);
97
97
  var fontFamilyValue = fontFamilyRaw && (0, _utils.normaliseValue)('fontFamily', fontFamilyRaw) || undefined;
98
+
99
+ // If font family is already a token, we remove and re-add it
100
+ // Only need to do this for non-default font stacks as the defaults can be safely removed
101
+ if (fontFamilyValue && fontFamilyValue.includes('font.family.') && !(fontFamilyValue.includes('font.family.heading') || fontFamilyValue.includes('font.family.body'))) {
102
+ fontFamilyValue = undefined;
103
+ }
98
104
  var fontFamilyToAdd;
99
105
  // If font family uses the Charlie font we can't replace; exit
100
106
  if (fontFamilyValue) {
package/dist/es2019/rules/no-banned-imports/paths.js CHANGED
@@ -1,13 +1,7 @@
1
1
  export const restrictedPaths = [{
2
- path: '@atlaskit/button/unsafe',
3
- message: `The '@atlaskit/button/unsafe' export is for internal usage and testing of new button features and should not be consumed directly.`
4
- }, {
5
2
  path: '@atlaskit/ds-lib',
6
3
  message: `The '@atlaskit/ds-lib' library has been designed as a utility library for internal usage and should not be consumed directly.`
7
4
  }, {
8
5
  path: '@atlaskit/ds-explorations',
9
6
  message: `The @atlaskit/ds-explorations package is used for experiments and should not be consumed directly.`
10
- }, {
11
- path: '@atlaskit/primitives/pressable',
12
- message: `The @atlaskit/primitives/pressable export is currently under development and should not be consumed directly.`
13
7
  }];
package/dist/es2019/rules/use-tokens-typography/transformers/style-object.js CHANGED
@@ -88,7 +88,13 @@ export const StyleObject = {
88
88
  // -- Font family --
89
89
  const fontFamilyNode = ASTObject.getEntryByPropertyName(node, 'fontFamily');
90
90
  const fontFamilyRaw = fontFamilyNode && getValueForPropertyNode(fontFamilyNode, context);
91
- const fontFamilyValue = fontFamilyRaw && normaliseValue('fontFamily', fontFamilyRaw) || undefined;
91
+ let fontFamilyValue = fontFamilyRaw && normaliseValue('fontFamily', fontFamilyRaw) || undefined;
92
+
93
+ // If font family is already a token, we remove and re-add it
94
+ // Only need to do this for non-default font stacks as the defaults can be safely removed
95
+ if (fontFamilyValue && fontFamilyValue.includes('font.family.') && !(fontFamilyValue.includes('font.family.heading') || fontFamilyValue.includes('font.family.body'))) {
96
+ fontFamilyValue = undefined;
97
+ }
92
98
  let fontFamilyToAdd;
93
99
  // If font family uses the Charlie font we can't replace; exit
94
100
  if (fontFamilyValue) {
package/dist/esm/rules/no-banned-imports/paths.js CHANGED
@@ -1,13 +1,7 @@
1
1
  export var restrictedPaths = [{
2
- path: '@atlaskit/button/unsafe',
3
- message: "The '@atlaskit/button/unsafe' export is for internal usage and testing of new button features and should not be consumed directly."
4
- }, {
5
2
  path: '@atlaskit/ds-lib',
6
3
  message: "The '@atlaskit/ds-lib' library has been designed as a utility library for internal usage and should not be consumed directly."
7
4
  }, {
8
5
  path: '@atlaskit/ds-explorations',
9
6
  message: "The @atlaskit/ds-explorations package is used for experiments and should not be consumed directly."
10
- }, {
11
- path: '@atlaskit/primitives/pressable',
12
- message: "The @atlaskit/primitives/pressable export is currently under development and should not be consumed directly."
13
7
  }];
package/dist/esm/rules/use-tokens-typography/transformers/style-object.js CHANGED
@@ -89,6 +89,12 @@ export var StyleObject = {
89
89
  var fontFamilyNode = ASTObject.getEntryByPropertyName(node, 'fontFamily');
90
90
  var fontFamilyRaw = fontFamilyNode && getValueForPropertyNode(fontFamilyNode, context);
91
91
  var fontFamilyValue = fontFamilyRaw && normaliseValue('fontFamily', fontFamilyRaw) || undefined;
92
+
93
+ // If font family is already a token, we remove and re-add it
94
+ // Only need to do this for non-default font stacks as the defaults can be safely removed
95
+ if (fontFamilyValue && fontFamilyValue.includes('font.family.') && !(fontFamilyValue.includes('font.family.heading') || fontFamilyValue.includes('font.family.body'))) {
96
+ fontFamilyValue = undefined;
97
+ }
92
98
  var fontFamilyToAdd;
93
99
  // If font family uses the Charlie font we can't replace; exit
94
100
  if (fontFamilyValue) {
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": "10.4.0",
4
+ "version": "10.4.2",
5
5
  "author": "Atlassian Pty Ltd",
6
6
  "license": "Apache-2.0",
7
7
  "publishConfig": {