@atlaskit/eslint-plugin-design-system 13.29.1 → 13.29.3
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 +14 -0
- package/README.md +1 -1
- package/dist/cjs/rules/use-character-counter-field/index.js +12 -5
- package/dist/es2019/rules/use-character-counter-field/index.js +11 -4
- package/dist/esm/rules/use-character-counter-field/index.js +11 -4
- package/dist/types/rules/use-character-counter-field/index.d.ts +2 -1
- package/dist/types-ts4.5/rules/use-character-counter-field/index.d.ts +2 -1
- package/package.json +2 -2
package/CHANGELOG.md
CHANGED
|
@@ -1,5 +1,19 @@
|
|
|
1
1
|
# @atlaskit/eslint-plugin-design-system
|
|
2
2
|
|
|
3
|
+
## 13.29.3
|
|
4
|
+
|
|
5
|
+
### Patch Changes
|
|
6
|
+
|
|
7
|
+
- [`da8c77a7aa301`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/da8c77a7aa301) -
|
|
8
|
+
Update the use-character-counter-field rule to include guidance for when to use the standalone
|
|
9
|
+
character counter component
|
|
10
|
+
|
|
11
|
+
## 13.29.2
|
|
12
|
+
|
|
13
|
+
### Patch Changes
|
|
14
|
+
|
|
15
|
+
- Updated dependencies
|
|
16
|
+
|
|
3
17
|
## 13.29.1
|
|
4
18
|
|
|
5
19
|
### Patch Changes
|
package/README.md
CHANGED
|
@@ -98,7 +98,7 @@ module.exports = {
|
|
|
98
98
|
| <a href="./packages/design-system/eslint-plugin/src/rules/no-utility-icons/README.md">no-utility-icons</a> | Disallow use of deprecated utility icons, in favor of core icons with `size="small"`. | Yes | Yes | Yes |
|
|
99
99
|
| <a href="./packages/design-system/eslint-plugin/src/rules/prefer-primitives/README.md">prefer-primitives</a> | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule. | | | |
|
|
100
100
|
| <a href="./packages/design-system/eslint-plugin/src/rules/use-button-group-label/README.md">use-button-group-label</a> | Ensures button groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |
|
|
101
|
-
| <a href="./packages/design-system/eslint-plugin/src/rules/use-character-counter-field/README.md">use-character-counter-field</a> | Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props
|
|
101
|
+
| <a href="./packages/design-system/eslint-plugin/src/rules/use-character-counter-field/README.md">use-character-counter-field</a> | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | | |
|
|
102
102
|
| <a href="./packages/design-system/eslint-plugin/src/rules/use-correct-field/README.md">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |
|
|
103
103
|
| <a href="./packages/design-system/eslint-plugin/src/rules/use-cx-function-in-xcss/README.md">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |
|
|
104
104
|
| <a href="./packages/design-system/eslint-plugin/src/rules/use-datetime-picker-calendar-button/README.md">use-datetime-picker-calendar-button</a> | Encourages makers to use calendar button in Atlassian Design System's date picker and datetime picker components. | Yes | Yes | Yes |
|
|
@@ -3,14 +3,15 @@
|
|
|
3
3
|
Object.defineProperty(exports, "__esModule", {
|
|
4
4
|
value: true
|
|
5
5
|
});
|
|
6
|
-
exports.ruleName = exports.
|
|
6
|
+
exports.ruleName = exports.messageOutsideForm = exports.messageInsideForm = exports.default = void 0;
|
|
7
7
|
var _eslintCodemodUtils = require("eslint-codemod-utils");
|
|
8
8
|
var _jsxElement = require("../../ast-nodes/jsx-element");
|
|
9
9
|
var _createRule = require("../utils/create-rule");
|
|
10
10
|
var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
|
|
11
11
|
var TEXTAREA_PACKAGE = '@atlaskit/textarea';
|
|
12
12
|
var FORM_PACKAGE = '@atlaskit/form';
|
|
13
|
-
var
|
|
13
|
+
var messageInsideForm = exports.messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
|
|
14
|
+
var messageOutsideForm = exports.messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
|
|
14
15
|
var ruleName = exports.ruleName = __dirname.split('/').slice(-1)[0];
|
|
15
16
|
|
|
16
17
|
/**
|
|
@@ -58,12 +59,13 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
58
59
|
name: ruleName,
|
|
59
60
|
type: 'suggestion',
|
|
60
61
|
docs: {
|
|
61
|
-
description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props
|
|
62
|
+
description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
|
|
62
63
|
recommended: true,
|
|
63
64
|
severity: 'warn'
|
|
64
65
|
},
|
|
65
66
|
messages: {
|
|
66
|
-
useCharacterCounterField:
|
|
67
|
+
useCharacterCounterField: messageInsideForm,
|
|
68
|
+
useCharacterCounter: messageOutsideForm
|
|
67
69
|
}
|
|
68
70
|
},
|
|
69
71
|
create: function create(context) {
|
|
@@ -124,12 +126,17 @@ var rule = (0, _createRule.createLintRule)({
|
|
|
124
126
|
var hasMaxLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'maxLength');
|
|
125
127
|
var hasMinLength = _jsxElement.JSXElementHelper.getAttributeByName(node, 'minLength');
|
|
126
128
|
if (hasMaxLength || hasMinLength) {
|
|
127
|
-
//
|
|
129
|
+
// Use different messages based on whether inside Form context or not
|
|
128
130
|
if (isInsideFormOrField(node, formComponentNames)) {
|
|
129
131
|
context.report({
|
|
130
132
|
node: node,
|
|
131
133
|
messageId: 'useCharacterCounterField'
|
|
132
134
|
});
|
|
135
|
+
} else {
|
|
136
|
+
context.report({
|
|
137
|
+
node: node,
|
|
138
|
+
messageId: 'useCharacterCounter'
|
|
139
|
+
});
|
|
133
140
|
}
|
|
134
141
|
}
|
|
135
142
|
}
|
|
@@ -4,7 +4,8 @@ import { createLintRule } from '../utils/create-rule';
|
|
|
4
4
|
const TEXTFIELD_PACKAGE = '@atlaskit/textfield';
|
|
5
5
|
const TEXTAREA_PACKAGE = '@atlaskit/textarea';
|
|
6
6
|
const FORM_PACKAGE = '@atlaskit/form';
|
|
7
|
-
export const
|
|
7
|
+
export const messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
|
|
8
|
+
export const messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
|
|
8
9
|
export const ruleName = __dirname.split('/').slice(-1)[0];
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -52,12 +53,13 @@ const rule = createLintRule({
|
|
|
52
53
|
name: ruleName,
|
|
53
54
|
type: 'suggestion',
|
|
54
55
|
docs: {
|
|
55
|
-
description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props
|
|
56
|
+
description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
|
|
56
57
|
recommended: true,
|
|
57
58
|
severity: 'warn'
|
|
58
59
|
},
|
|
59
60
|
messages: {
|
|
60
|
-
useCharacterCounterField:
|
|
61
|
+
useCharacterCounterField: messageInsideForm,
|
|
62
|
+
useCharacterCounter: messageOutsideForm
|
|
61
63
|
}
|
|
62
64
|
},
|
|
63
65
|
create(context) {
|
|
@@ -116,12 +118,17 @@ const rule = createLintRule({
|
|
|
116
118
|
const hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
|
|
117
119
|
const hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
|
|
118
120
|
if (hasMaxLength || hasMinLength) {
|
|
119
|
-
//
|
|
121
|
+
// Use different messages based on whether inside Form context or not
|
|
120
122
|
if (isInsideFormOrField(node, formComponentNames)) {
|
|
121
123
|
context.report({
|
|
122
124
|
node,
|
|
123
125
|
messageId: 'useCharacterCounterField'
|
|
124
126
|
});
|
|
127
|
+
} else {
|
|
128
|
+
context.report({
|
|
129
|
+
node,
|
|
130
|
+
messageId: 'useCharacterCounter'
|
|
131
|
+
});
|
|
125
132
|
}
|
|
126
133
|
}
|
|
127
134
|
}
|
|
@@ -4,7 +4,8 @@ import { createLintRule } from '../utils/create-rule';
|
|
|
4
4
|
var TEXTFIELD_PACKAGE = '@atlaskit/textfield';
|
|
5
5
|
var TEXTAREA_PACKAGE = '@atlaskit/textarea';
|
|
6
6
|
var FORM_PACKAGE = '@atlaskit/form';
|
|
7
|
-
export var
|
|
7
|
+
export var messageInsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)';
|
|
8
|
+
export var messageOutsideForm = 'When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)';
|
|
8
9
|
export var ruleName = __dirname.split('/').slice(-1)[0];
|
|
9
10
|
|
|
10
11
|
/**
|
|
@@ -52,12 +53,13 @@ var rule = createLintRule({
|
|
|
52
53
|
name: ruleName,
|
|
53
54
|
type: 'suggestion',
|
|
54
55
|
docs: {
|
|
55
|
-
description: 'Suggests using CharacterCounterField when Textfield or Textarea components have maxLength or minLength props
|
|
56
|
+
description: 'Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props.',
|
|
56
57
|
recommended: true,
|
|
57
58
|
severity: 'warn'
|
|
58
59
|
},
|
|
59
60
|
messages: {
|
|
60
|
-
useCharacterCounterField:
|
|
61
|
+
useCharacterCounterField: messageInsideForm,
|
|
62
|
+
useCharacterCounter: messageOutsideForm
|
|
61
63
|
}
|
|
62
64
|
},
|
|
63
65
|
create: function create(context) {
|
|
@@ -118,12 +120,17 @@ var rule = createLintRule({
|
|
|
118
120
|
var hasMaxLength = JSXElementHelper.getAttributeByName(node, 'maxLength');
|
|
119
121
|
var hasMinLength = JSXElementHelper.getAttributeByName(node, 'minLength');
|
|
120
122
|
if (hasMaxLength || hasMinLength) {
|
|
121
|
-
//
|
|
123
|
+
// Use different messages based on whether inside Form context or not
|
|
122
124
|
if (isInsideFormOrField(node, formComponentNames)) {
|
|
123
125
|
context.report({
|
|
124
126
|
node: node,
|
|
125
127
|
messageId: 'useCharacterCounterField'
|
|
126
128
|
});
|
|
129
|
+
} else {
|
|
130
|
+
context.report({
|
|
131
|
+
node: node,
|
|
132
|
+
messageId: 'useCharacterCounter'
|
|
133
|
+
});
|
|
127
134
|
}
|
|
128
135
|
}
|
|
129
136
|
}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Rule } from 'eslint';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const messageInsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
|
|
3
|
+
export declare const messageOutsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)";
|
|
3
4
|
export declare const ruleName: string;
|
|
4
5
|
declare const rule: Rule.RuleModule;
|
|
5
6
|
export default rule;
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import type { Rule } from 'eslint';
|
|
2
|
-
export declare const
|
|
2
|
+
export declare const messageInsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea inside a Form, use `CharacterCounterField` from `@atlaskit/form` instead of Field and remove the props from the Textfield/Textarea. This ensures accessibility through real time feedback and aligns with the design system. Read more about [character counter fields](https://atlassian.design/components/form/examples#charactercounterfield)";
|
|
3
|
+
export declare const messageOutsideForm = "When using `maxLength` or `minLength` props with Textfield/Textarea, use `CharacterCounter` from `@atlaskit/form` alongside your input for real-time character count feedback. This ensures accessibility through screen reader announcements and visual feedback. Read more about [standalone character counter](https://atlassian.design/components/form/examples#standalone-charactercounter)";
|
|
3
4
|
export declare const ruleName: string;
|
|
4
5
|
declare const rule: Rule.RuleModule;
|
|
5
6
|
export default rule;
|
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": "13.29.
|
|
4
|
+
"version": "13.29.3",
|
|
5
5
|
"author": "Atlassian Pty Ltd",
|
|
6
6
|
"license": "Apache-2.0",
|
|
7
7
|
"publishConfig": {
|
|
@@ -41,7 +41,7 @@
|
|
|
41
41
|
"@atlaskit/eslint-utils": "^2.0.0",
|
|
42
42
|
"@atlaskit/icon": "^29.3.0",
|
|
43
43
|
"@atlaskit/icon-lab": "^5.13.0",
|
|
44
|
-
"@atlaskit/tokens": "^
|
|
44
|
+
"@atlaskit/tokens": "^9.0.0",
|
|
45
45
|
"@babel/runtime": "^7.0.0",
|
|
46
46
|
"@typescript-eslint/utils": "^7.1.0",
|
|
47
47
|
"ajv": "^6.12.6",
|