@atlaskit/ads-mcp 1.0.0 → 1.2.0
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 +19 -0
- package/dist/cjs/index.js +27 -1
- package/dist/cjs/tools/get-all-components/components.codegen.js +2 -2
- package/dist/cjs/tools/get-all-components/types.js +5 -1
- package/dist/cjs/tools/get-atlaskit-components/atlaskit-components.codegen.js +35 -6
- package/dist/cjs/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +206 -0
- package/dist/cjs/tools/get-atlaskit-hooks/get-atlaskit-hooks-tool.js +40 -0
- package/dist/cjs/tools/get-atlaskit-hooks/list-get-atlaskit-hooks-tool.js +22 -0
- package/dist/cjs/tools/get-atlaskit-hooks/types.js +5 -0
- package/dist/cjs/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +836 -0
- package/dist/cjs/tools/get-atlaskit-utilities/get-atlaskit-utilities-tool.js +40 -0
- package/dist/cjs/tools/get-atlaskit-utilities/list-get-atlaskit-utilities-tool.js +22 -0
- package/dist/cjs/tools/get-atlaskit-utilities/types.js +5 -0
- package/dist/cjs/tools/get-guidelines/guidelines-structured-content.codegen.js +4 -4
- package/dist/cjs/tools/get-lint-rules/lint-rules-structured-content.codegen.js +31 -11
- package/dist/cjs/tools/i18n-conversion/guide.js +7 -7
- package/dist/cjs/tools/i18n-conversion/list-i18n-conversion-tool.js +1 -1
- package/dist/cjs/tools/search-atlaskit-hooks/list-search-atlaskit-hooks-tool.js +22 -0
- package/dist/cjs/tools/search-atlaskit-hooks/search-atlaskit-hooks-input-schema.js +11 -0
- package/dist/cjs/tools/search-atlaskit-hooks/search-atlaskit-hooks-tool.js +109 -0
- package/dist/cjs/tools/search-atlaskit-utilities/list-search-atlaskit-utilities-tool.js +22 -0
- package/dist/cjs/tools/search-atlaskit-utilities/search-atlaskit-utilities-input-schema.js +11 -0
- package/dist/cjs/tools/search-atlaskit-utilities/search-atlaskit-utilities-tool.js +111 -0
- package/dist/cjs/tools/types.js +1 -0
- package/dist/es2019/index.js +30 -0
- package/dist/es2019/tools/get-all-components/components.codegen.js +2 -2
- package/dist/es2019/tools/get-all-components/types.js +1 -0
- package/dist/es2019/tools/get-atlaskit-components/atlaskit-components.codegen.js +35 -6
- package/dist/es2019/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +200 -0
- package/dist/es2019/tools/get-atlaskit-hooks/get-atlaskit-hooks-tool.js +14 -0
- package/dist/es2019/tools/get-atlaskit-hooks/list-get-atlaskit-hooks-tool.js +21 -0
- package/dist/es2019/tools/get-atlaskit-hooks/types.js +1 -0
- package/dist/es2019/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +830 -0
- package/dist/es2019/tools/get-atlaskit-utilities/get-atlaskit-utilities-tool.js +14 -0
- package/dist/es2019/tools/get-atlaskit-utilities/list-get-atlaskit-utilities-tool.js +21 -0
- package/dist/es2019/tools/get-atlaskit-utilities/types.js +1 -0
- package/dist/es2019/tools/get-guidelines/guidelines-structured-content.codegen.js +4 -4
- package/dist/es2019/tools/get-lint-rules/lint-rules-structured-content.codegen.js +31 -11
- package/dist/es2019/tools/i18n-conversion/guide.js +7 -7
- package/dist/es2019/tools/i18n-conversion/list-i18n-conversion-tool.js +1 -1
- package/dist/es2019/tools/search-atlaskit-hooks/list-search-atlaskit-hooks-tool.js +19 -0
- package/dist/es2019/tools/search-atlaskit-hooks/search-atlaskit-hooks-input-schema.js +5 -0
- package/dist/es2019/tools/search-atlaskit-hooks/search-atlaskit-hooks-tool.js +79 -0
- package/dist/es2019/tools/search-atlaskit-utilities/list-search-atlaskit-utilities-tool.js +19 -0
- package/dist/es2019/tools/search-atlaskit-utilities/search-atlaskit-utilities-input-schema.js +5 -0
- package/dist/es2019/tools/search-atlaskit-utilities/search-atlaskit-utilities-tool.js +81 -0
- package/dist/es2019/tools/types.js +0 -0
- package/dist/esm/index.js +27 -1
- package/dist/esm/tools/get-all-components/components.codegen.js +2 -2
- package/dist/esm/tools/get-all-components/types.js +1 -0
- package/dist/esm/tools/get-atlaskit-components/atlaskit-components.codegen.js +35 -6
- package/dist/esm/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +200 -0
- package/dist/esm/tools/get-atlaskit-hooks/get-atlaskit-hooks-tool.js +32 -0
- package/dist/esm/tools/get-atlaskit-hooks/list-get-atlaskit-hooks-tool.js +16 -0
- package/dist/esm/tools/get-atlaskit-hooks/types.js +1 -0
- package/dist/esm/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +830 -0
- package/dist/esm/tools/get-atlaskit-utilities/get-atlaskit-utilities-tool.js +32 -0
- package/dist/esm/tools/get-atlaskit-utilities/list-get-atlaskit-utilities-tool.js +16 -0
- package/dist/esm/tools/get-atlaskit-utilities/types.js +1 -0
- package/dist/esm/tools/get-guidelines/guidelines-structured-content.codegen.js +4 -4
- package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js +31 -11
- package/dist/esm/tools/i18n-conversion/guide.js +7 -7
- package/dist/esm/tools/i18n-conversion/list-i18n-conversion-tool.js +1 -1
- package/dist/esm/tools/search-atlaskit-hooks/list-search-atlaskit-hooks-tool.js +16 -0
- package/dist/esm/tools/search-atlaskit-hooks/search-atlaskit-hooks-input-schema.js +5 -0
- package/dist/esm/tools/search-atlaskit-hooks/search-atlaskit-hooks-tool.js +102 -0
- package/dist/esm/tools/search-atlaskit-utilities/list-search-atlaskit-utilities-tool.js +16 -0
- package/dist/esm/tools/search-atlaskit-utilities/search-atlaskit-utilities-input-schema.js +5 -0
- package/dist/esm/tools/search-atlaskit-utilities/search-atlaskit-utilities-tool.js +106 -0
- package/dist/esm/tools/types.js +0 -0
- package/dist/types/tools/get-all-components/components.codegen.d.ts +1 -1
- package/dist/types/tools/get-all-components/types.d.ts +2 -1
- package/dist/types/tools/get-atlaskit-components/atlaskit-components.codegen.d.ts +1 -1
- package/dist/types/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.d.ts +10 -0
- package/dist/types/tools/get-atlaskit-hooks/get-atlaskit-hooks-tool.d.ts +6 -0
- package/dist/types/tools/get-atlaskit-hooks/list-get-atlaskit-hooks-tool.d.ts +2 -0
- package/dist/types/tools/get-atlaskit-hooks/types.d.ts +14 -0
- package/dist/types/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.d.ts +10 -0
- package/dist/types/tools/get-atlaskit-utilities/get-atlaskit-utilities-tool.d.ts +6 -0
- package/dist/types/tools/get-atlaskit-utilities/list-get-atlaskit-utilities-tool.d.ts +2 -0
- package/dist/types/tools/get-atlaskit-utilities/types.d.ts +41 -0
- package/dist/types/tools/get-guidelines/guidelines-structured-content.codegen.d.ts +1 -1
- package/dist/types/tools/get-lint-rules/lint-rules-structured-content.codegen.d.ts +1 -1
- package/dist/types/tools/search-atlaskit-hooks/list-search-atlaskit-hooks-tool.d.ts +2 -0
- package/dist/types/tools/search-atlaskit-hooks/search-atlaskit-hooks-input-schema.d.ts +11 -0
- package/dist/types/tools/search-atlaskit-hooks/search-atlaskit-hooks-tool.d.ts +4 -0
- package/dist/types/tools/search-atlaskit-utilities/list-search-atlaskit-utilities-tool.d.ts +2 -0
- package/dist/types/tools/search-atlaskit-utilities/search-atlaskit-utilities-input-schema.d.ts +11 -0
- package/dist/types/tools/search-atlaskit-utilities/search-atlaskit-utilities-tool.d.ts +4 -0
- package/dist/types/tools/types.d.ts +12 -0
- package/package.json +3 -3
|
@@ -3,7 +3,7 @@
|
|
|
3
3
|
*
|
|
4
4
|
* Structured content for MCP (JSON) for ESLint rule docs from constellation.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::ef9c19eed4e720ce7570ee24935c3476>>
|
|
7
7
|
* @codegenCommand yarn build structured-docs
|
|
8
8
|
*/
|
|
9
9
|
/* eslint-disable no-template-curly-in-string */
|
|
@@ -40,12 +40,16 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
40
40
|
content: "{\"ruleName\":\"ensure-proper-xcss-usage\",\"description\":\"This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\",\"content\":\"# ensure-proper-xcss-usage\\n\\nThis ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from\\n`@atlaskit/primitives/compiled`.\\n\\n### Incorrect\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { xcss } from '@atlaskit/primitives';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst oldStyles = xcss({\\n color: 'red',\\n});\\n\\nconst styles = cssMap({\\n root: { width: '100%' }\\n});\\n\\n// ❌ xcss variable with compiled component\\n<Box xcss={oldStyles} />\\n\\n// ❌ cssMap without key\\n<Box xcss={styles} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst styles = cssMap({\\n\\troot: { color: token('color.text.subtle') },\\n\\tsecondary: { color: token('color.text.subtle') },\\n});\\n\\n<Box xcss={styles.root} />;\\n```\\n\\n### Alternative Correct Usage\\n\\n```tsx\\n// ✅ Using inline styles (when cssMap is not needed)\\nimport { Box } from '@atlaskit/primitives/compiled';\\n\\n<Box xcss={{ color: 'red' }} />;\\n\\n// ✅ Or continue using old primitives (but migration is recommended)\\nimport { Box, xcss } from '@atlaskit/primitives';\\n\\nconst oldStyles = xcss({ color: 'red' });\\n\\n<Box xcss={oldStyles} />;\\n```\\n\"}",
|
|
41
41
|
ruleName: 'ensure-proper-xcss-usage',
|
|
42
42
|
description: 'This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from'
|
|
43
|
+
}, {
|
|
44
|
+
content: "{\"ruleName\":\"expand-motion-shorthand\",\"description\":\"This rule expands `transition` and `animation` CSS shorthand properties into their individual\",\"content\":\"# expand-motion-shorthand\\n\\n## Examples\\n\\nThis rule expands `transition` and `animation` CSS shorthand properties into their individual\\nsub-properties. Expanding shorthands enables the\\n[`use-tokens-motion`](/components/eslint-plugin-design-system/use-tokens-motion/usage)\\nrule to target `transitionDuration`, `transitionTimingFunction`, `animationDuration`, and\\n`animationTimingFunction` individually. This rule auto-fixes the expansion.\\n\\n### Incorrect\\n\\n```jsx\\nconst styles = css({\\n transition: 'opacity 200ms cubic-bezier(0.4, 0, 0, 1) 0ms',\\n ^^^^^^^^^^^\\n animation: 'fade 150ms ease-in 0ms 1 normal none running',\\n ^^^^^^^^^^\\n});\\n```\\n\\n### Correct\\n\\n```jsx\\nconst styles = css({\\n\\ttransitionProperty: 'opacity',\\n\\ttransitionDuration: '200ms',\\n\\ttransitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',\\n\\ttransitionDelay: '0ms',\\n\\tanimationName: 'fade',\\n\\tanimationDuration: '150ms',\\n\\tanimationTimingFunction: 'ease-in',\\n\\tanimationDelay: '0ms',\\n\\tanimationIterationCount: '1',\\n\\tanimationDirection: 'normal',\\n\\tanimationFillMode: 'none',\\n\\tanimationPlayState: 'running',\\n});\\n```\\n\"}",
|
|
45
|
+
ruleName: 'expand-motion-shorthand',
|
|
46
|
+
description: 'This rule expands `transition` and `animation` CSS shorthand properties into their individual'
|
|
43
47
|
}, {
|
|
44
48
|
content: '{"ruleName":"icon-label","description":"Icon labels are used to describe what the icon is so the visually impaired can be described what the","content":"# icon-label\\n\\nIcon labels are used to describe what the icon is so the visually impaired can be described what the\\nUI element is. There are cases where icons should have labels as well as cases where they shouldn\'t\\nbe labelled.\\n\\n## Examples\\n\\nThis rule will find violations for when an icon label is or isn\'t needed when composed with other\\nDesign System components.\\n\\n### Incorrect\\n\\n```js\\nimport DashboardIcon from \'@atlaskit/icon/glyph/dashboard\'\\n\\n<DashboardIcon>\\n^^^^^^^^^^^^^^^ missing `label` prop\\n\\n<Button iconLeft={<DashboardIcon label=\\"\\">} />\\n ^^^^^ label should be defined\\n\\n<ButtonItem iconBefore={<DashboardIcon label=\\"\\">}>\\n ^^^^^ label should not be defined\\n My dashboard\\n</ButtonItem>\\n```\\n\\n### Correct\\n\\n```js\\nimport DashboardIcon from \'@atlaskit/icon/glyph/dashboard\'\\n\\n<DashboardIcon label=\\"Dashboard\\">\\n\\n<Button iconLeft={<DashboardIcon label=\\"Add\\">} />\\n\\n<ButtonItem iconBefore={<DashboardIcon label=\\"\\">}>\\n My dashboard\\n</ButtonItem>\\n```\\n"}',
|
|
45
49
|
ruleName: 'icon-label',
|
|
46
50
|
description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
|
|
47
51
|
}, {
|
|
48
|
-
content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule | Description | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a> | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a> | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally. | Yes | | |\\n| <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 |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a> | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a> | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-boolean-autofocus-on-modal-dialog/usage\\">no-boolean-autofocus-on-modal-dialog</a> | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a> | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | | Yes | |\\n| <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). | | | |\\n| <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. | | | |\\n| <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. | | | |\\n| <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. | Yes | | Yes |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a> | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a> | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a> | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a> | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a> | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a> | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a> | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a> | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a> | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a> | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead. | Yes | | Yes |\\n| <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 | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a> | Disallow using the margin CSS property. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a> | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a> | Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale. | | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a> | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes. | | | |\\n| <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 | | |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a> | Detects unused styles in cssMap objects to help keep code clean. | Yes | | |\\n| <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. | | | |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a> | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">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 |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a> | Encourage use of message wrapper component when using form message components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a> | Encourage the usage of heading components. | Yes | Yes | Yes |\\n| <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 | |\\n| <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 |\\n| <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 | |\\n| <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 | |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a> | Encourages makers to use close button in Atlassian Design System\'s modal dialog component. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a> | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives/usage\\">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a> | Encourage the usage of text components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a> | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a> | Encourage use of simple field for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a> | Encourage use of simple form for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a> | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a> | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a> | Enforces usage of shape design tokens rather than hard-coded values. | | Yes | Yes |\\n| <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 |\\n| <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 | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n extends: [\\n+ \'plugin:@atlaskit/design-system/recommended\',\\n ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n plugins: [\\n+ \'@atlaskit/design-system\',\\n ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n rules: [\\n+ \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n ],\\n};\\n```\\n"}',
|
|
52
|
+
content: '{"ruleName":"index","description":"---","content":"---\\norder: 0\\n---\\n\\nThis plugin contains rules that should be used when working with the\\n[Atlassian Design System](https://atlassian.design).\\n\\n## Rules\\n\\n<!-- START_RULE_TABLE_CODEGEN -->\\n<!-- @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen -->\\n\\n| Rule | Description | Recommended | Fixable | Suggestions |\\n| ----------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ----------- | ------- | ----------- |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/enforce-inline-styles-in-select/usage\\">enforce-inline-styles-in-select</a> | Disallow unsupported CSS selectors in styles prop for @atlaskit/select and require inline styles only | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-avatar-tag-avatar-props/usage\\">ensure-avatar-tag-avatar-props</a> | Ensures AvatarTag avatar prop does not include controlled props (size, borderColor, appearance) which are managed internally. | Yes | | |\\n| <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 |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-icon-color/usage\\">ensure-icon-color</a> | Enforces that upcoming icon components have a color prop set, to enable a migration of the default value. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/ensure-proper-xcss-usage/usage\\">ensure-proper-xcss-usage</a> | Enforces proper xcss usage: migrate from xcss() to cssMap() and use cssMap objects with specific keys. | | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/lozenge-badge-tag-labelling-system-migration/usage\\">lozenge-badge-tag-labelling-system-migration</a> | Helps migrate Lozenge isBold prop, Badge appearance values, and SimpleTag/RemovableTag components as part of the Labelling System Phase 1 migration. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-banned-imports/usage\\">no-banned-imports</a> | Disallow importing banned modules. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-boolean-autofocus-on-modal-dialog/usage\\">no-boolean-autofocus-on-modal-dialog</a> | Encourages makers to not use boolean values for `autoFocus` on Atlassian Design System\'s modal dialog component. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-dark-theme-vr-tests/usage\\">no-dark-theme-vr-tests</a> | Disallow using dark colorScheme in VR tests. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-apis/usage\\">no-deprecated-apis</a> | Disallow using deprecated APIs. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-deprecated-imports/usage\\">no-deprecated-imports</a> | Disallow importing deprecated modules. | Yes | Yes | Yes |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-emotion-primitives/usage\\">no-emotion-primitives</a> | Ensures usage of Compiled Primitives import instead of Emotion entrypoint. | | Yes | |\\n| <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). | | | |\\n| <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. | | | |\\n| <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. | | | |\\n| <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. | Yes | | Yes |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-checkbox/usage\\">no-html-checkbox</a> | Discourage direct usage of HTML checkbox elements in favor of the Atlassian Design System checkbox component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-code/usage\\">no-html-code</a> | Discourage direct usage of HTML code elements in favor of the Atlassian Design System code component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-heading/usage\\">no-html-heading</a> | Discourage direct usage of HTML heading elements in favor of Atlassian Design System heading components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-image/usage\\">no-html-image</a> | Discourage direct usage of HTML image elements in favor of the Atlassian Design System image component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-radio/usage\\">no-html-radio</a> | Discourage direct usage of HTML radio elements in favor of the Atlassian Design System radio component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-range/usage\\">no-html-range</a> | Discourage direct usage of HTML range elements in favor of the Atlassian Design System range component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-select/usage\\">no-html-select</a> | Discourage direct usage of HTML select elements in favor of the Atlassian Design System select component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-text-input/usage\\">no-html-text-input</a> | Discourage direct usage of HTML text input elements in favor of the Atlassian Design System textfield component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-html-textarea/usage\\">no-html-textarea</a> | Discourage direct usage of HTML textarea elements in favor of the Atlassian Design System textarea component. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/no-icon-spacing-prop/usage\\">no-icon-spacing-prop</a> | Disallows usage of the deprecated spacing prop on new icons. Use Flex with cssMap for spacing instead. | Yes | | Yes |\\n| <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 | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-margin/usage\\">no-margin</a> | Disallow using the margin CSS property. | | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-nested-styles/usage\\">no-nested-styles</a> | Disallows use of nested styles in `css` functions. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-physical-properties/usage\\">no-physical-properties</a> | Disallow physical properties and values in `css` and `cssMap` function calls. | | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-placeholder/usage\\">no-placeholder</a> | Placeholders should not be used. If information should be given to the user about the proper type or formatting of a value, this should be included using a helper message that is associated to the input instead. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-readonly-or-disabled-inputs/usage\\">no-readonly-or-disabled-inputs</a> | Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by a more user-friendly design pattern. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-separator-with-list-elements/usage\\">no-separator-with-list-elements</a> | Warn when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component. | Yes | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-to-match-snapshot/usage\\">no-to-match-snapshot</a> | Disallow using toMatchSnapshot() in favor of toMatchInlineSnapshot(). See https://hello.atlassian.net/wiki/spaces/DST/pages/6105892000/DSTRFC-038+-+Removal+of+.toMatchSnapshot for rationale. | | | |\\n| <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 | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unsafe-inline-snapshot/usage\\">no-unsafe-inline-snapshot</a> | Enforce guardrails on toMatchInlineSnapshot usage: snapshots must not exceed 100 lines and must not contain internal implementation details like className or style attributes. | | | |\\n| <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 | | |\\n| <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 | | |\\n| <a href=\\"/components/eslint-plugin-design-system/no-unused-css-map/usage\\">no-unused-css-map</a> | Detects unused styles in cssMap objects to help keep code clean. | Yes | | |\\n| <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. | | | |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-character-counter-field/usage\\">use-character-counter-field</a> | Suggests using CharacterCounterField or CharacterCounter when Textfield or Textarea components have maxLength or minLength props. | Yes | | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-correct-field/usage\\">use-correct-field</a> | Ensure makers use appropriate field component for their respective form elements. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-cx-function-in-xcss/usage\\">use-cx-function-in-xcss</a> | Enforces cx function use to combine styles in xcss. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-datetime-picker-calendar-button/usage\\">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 |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-field-message-wrapper/usage\\">use-field-message-wrapper</a> | Encourage use of message wrapper component when using form message components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading/usage\\">use-heading</a> | Encourage the usage of heading components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-heading-level-in-section-message/usage\\">use-heading-level-in-section-message</a> | The `SectionMessage` component in `@atlaskit/section-message` needs to be the correct level within the document flow. This is not something that can be automated and requires contextual knowledge of what is present in the experience. | Yes | Yes | |\\n| <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 | |\\n| <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 |\\n| <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 | |\\n| <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 | |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-modal-dialog-close-button/usage\\">use-modal-dialog-close-button</a> | Encourages makers to use close button in Atlassian Design System\'s modal dialog component. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-onboarding-spotlight-label/usage\\">use-onboarding-spotlight-label</a> | Ensures onboarding spotlight dialogs are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <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 |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives/usage\\">use-primitives</a> | Encourage the usage of primitives components. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-primitives-text/usage\\">use-primitives-text</a> | Encourage the usage of text components. | Yes | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-should-render-to-parent/usage\\">use-should-render-to-parent</a> | Encourages makers to use the `shouldRenderToParent` where possible in Atlassian Design System `Popup` and `DropdownMenu` components. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-field/usage\\">use-simple-field</a> | Encourage use of simple field for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-simple-form/usage\\">use-simple-form</a> | Encourage use of simple form for better developer experience and accessibility. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-spotlight-package/usage\\">use-spotlight-package</a> | Discourage the use of @atlaskit/onboarding in favor of @atlaskit/spotlight. | | Yes | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tag-group-label/usage\\">use-tag-group-label</a> | Ensures tag groups are described to assistive technology by a direct label or by another element. | Yes | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-textfield-autocomplete/usage\\">use-textfield-autocomplete</a> | Enforce that Textfield components with type=\\"email\\", \\"tel\\", or \\"url\\" have an appropriate autocomplete value for WCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose). | Yes | Yes | |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-motion/usage\\">use-tokens-motion</a> | Enforces usage of motion design tokens rather than hard-coded duration and easing values. | | | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-tokens-shape/usage\\">use-tokens-shape</a> | Enforces usage of shape design tokens rather than hard-coded values. | | Yes | Yes |\\n| <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 |\\n| <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 | Yes |\\n| <a href=\\"/components/eslint-plugin-design-system/use-visually-hidden/usage\\">use-visually-hidden</a> | Enforce usage of the visually hidden component. | Yes | Yes | |\\n\\n<!-- END_RULE_TABLE_CODEGEN -->\\n\\n\\n## Props\\n\\nUse the recommended config to get reasonable defaults recommended by the Atlassian Design System:\\n\\n```diff\\nmodule.exports = {\\n extends: [\\n+ \'plugin:@atlaskit/design-system/recommended\',\\n ],\\n};\\n```\\n\\nWe don\'t recommended maintaining your own configuration. If you do not use our config you will need\\nto specify individual rules and configuration. Add the plugin to your `eslint.config.cjs` file.\\n\\n```diff\\nmodule.exports = {\\n plugins: [\\n+ \'@atlaskit/design-system\',\\n ],\\n};\\n```\\n\\nEnable the rules that you would like to use.\\n\\n```diff\\nmodule.exports = {\\n rules: [\\n+ \'@atlaskit/design-system/no-deprecated-apis\': \'error\',\\n ],\\n};\\n```\\n"}',
|
|
49
53
|
ruleName: 'index',
|
|
50
54
|
description: '---'
|
|
51
55
|
}, {
|
|
@@ -113,11 +117,11 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
113
117
|
ruleName: 'no-exported-keyframes',
|
|
114
118
|
description: 'Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including'
|
|
115
119
|
}, {
|
|
116
|
-
content: '{"ruleName":"no-html-anchor","description":"Don\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that","content":"# no-html-anchor\\n\\nDon\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that\\ninclude event tracking, automatic router configuration, ensure accessible implementations, and\\nprovide access to ADS styling features like design tokens.\\n\\nUse Atlassian Design System components such as the [Link](/components/link
|
|
120
|
+
content: '{"ruleName":"no-html-anchor","description":"Don\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that","content":"# no-html-anchor\\n\\nDon\'t use native HTML anchors. The Atlassian Design System provides ready-made link components that\\ninclude event tracking, automatic router configuration, ensure accessible implementations, and\\nprovide access to ADS styling features like design tokens.\\n\\nUse Atlassian Design System components such as the [Link](/components/link) or\\n[LinkButton](/components/button/link-button) components when suitable. There may also be other\\ncomponents better-suited depending on the use case. If these components aren\'t suitable, use the\\n[Anchor primitive](/components/primitives/anchor) which helps you build custom links with Atlassian\\nDesign System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML anchor elements.\\n\\n### Incorrect\\n\\n```jsx\\n<a href=\\"/\\">\\n ^ Using a native HTML `<a>`\\n Hello, World!\\n</a>\\n\\n<div role=\\"link\\" tabIndex=\\"0\\" data-href=\\"https://www.atlassian.com\\">\\n ^^^^^^^^^^^ Using `role=\\"link\\"` to create links\\n Hello, World!\\n</div>\\n\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Anchor from \'@atlaskit/primitives/anchor\';\\n\\n<Anchor href=\\"/\\">Hello, World!</Anchor>;\\n\\nimport Link from \'@atlaskit/link\';\\n\\n<Link href=\\"/\\">Hello, World!</Link>;\\n\\nimport { LinkButton } from \'@atlaskit/button/new\';\\n\\n<LinkButton href=\\"/\\">Hello, World!</LinkButton>;\\n```\\n"}',
|
|
117
121
|
ruleName: 'no-html-anchor',
|
|
118
122
|
description: "Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that"
|
|
119
123
|
}, {
|
|
120
|
-
content: '{"ruleName":"no-html-button","description":"Don\'t use native HTML buttons. The Atlassian Design System provides ready-made button components","content":"# no-html-button\\n\\nDon\'t use native HTML buttons. The Atlassian Design System provides ready-made button components\\nthat include event tracking, ensure accessible implementations, and provide access to ADS styling\\nfeatures like design tokens.\\n\\nUse Atlassian Design System components such as the [Button component](/components/button
|
|
124
|
+
content: '{"ruleName":"no-html-button","description":"Don\'t use native HTML buttons. The Atlassian Design System provides ready-made button components","content":"# no-html-button\\n\\nDon\'t use native HTML buttons. The Atlassian Design System provides ready-made button components\\nthat include event tracking, ensure accessible implementations, and provide access to ADS styling\\nfeatures like design tokens.\\n\\nUse Atlassian Design System components such as the [Button component](/components/button) when\\nsuitable. There may also be other components better-suited depending on the use case. If these\\ncomponents aren\'t suitable, use the [Pressable primitive](/components/primitives/pressable) which\\nhelps you build custom buttons with Atlassian Design System styling.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML button elements.\\n\\n### Incorrect\\n\\n```jsx\\n<button>\\n ^^^^^^ Using a native HTML `<button>`\\n Hello, World!\\n</button>\\n\\n<div role=\\"button\\" tabIndex=\\"0\\">\\n ^^^^^^^^^^^^^ Using `role=\\"button\\"` to create buttons\\n Hello, World!\\n</div>\\n\\n<input type=\\"button\\" value=\\"Button\\" />\\n ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"submit\\" value=\\"Submit\\" />\\n ^^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"reset\\" value=\\"Reset\\" />\\n ^^^^^^^^^^^^ Using a `<input>` as a button\\n\\n<input type=\\"image\\" alt=\\"Submit\\" src=\\"/submit-button.png\\" />\\n ^^^^^^^^^^^^ Using a `<input>` as a button\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Pressable from \'@atlaskit/primitives/pressable\';\\n\\n<Pressable>Hello, World!</Pressable>;\\n\\nimport Button from \'@atlaskit/button/new\';\\n\\n<Button>Hello, World!</Button>;\\n```\\n"}',
|
|
121
125
|
ruleName: 'no-html-button',
|
|
122
126
|
description: "Don't use native HTML buttons. The Atlassian Design System provides ready-made button components"
|
|
123
127
|
}, {
|
|
@@ -125,15 +129,15 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
125
129
|
ruleName: 'no-html-checkbox',
|
|
126
130
|
description: "Don't use native HTML checkboxes. The Atlassian Design System provides a ready-made checkbox"
|
|
127
131
|
}, {
|
|
128
|
-
content: '{"ruleName":"no-html-code","description":"Don\'t use native HTML code element. The Atlassian Design System provides a ready-made code component","content":"# no-html-code\\n\\nDon\'t use native HTML code element. The Atlassian Design System provides a ready-made code component\\nthat ensures accessible implementations and consistent ADS styling.\\n\\nUse the Atlassian Design System [Code](/components/code
|
|
132
|
+
content: '{"ruleName":"no-html-code","description":"Don\'t use native HTML code element. The Atlassian Design System provides a ready-made code component","content":"# no-html-code\\n\\nDon\'t use native HTML code element. The Atlassian Design System provides a ready-made code component\\nthat ensures accessible implementations and consistent ADS styling.\\n\\nUse the Atlassian Design System [Code](/components/code) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML code elements.\\n\\n### Incorrect\\n\\n```jsx\\n<code>yarn changeset</code>\\n ^^^^ Using a native HTML `<code>`\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Code } from \'@atlaskit/code\';\\n\\n<Code>yarn changeset</Code>;\\n```\\n"}',
|
|
129
133
|
ruleName: 'no-html-code',
|
|
130
134
|
description: "Don't use native HTML code element. The Atlassian Design System provides a ready-made code component"
|
|
131
135
|
}, {
|
|
132
|
-
content: '{"ruleName":"no-html-heading","description":"Don\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component","content":"# no-html-heading\\n\\nDon\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component\\nthat ensures accessible implementations, and provides access to ADS styling features like design\\ntokens.\\n\\nUse the Atlassian Design System [Heading](/components/heading
|
|
136
|
+
content: '{"ruleName":"no-html-heading","description":"Don\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component","content":"# no-html-heading\\n\\nDon\'t use native HTML headings. The Atlassian Design System provides a ready-made heading component\\nthat ensures accessible implementations, and provides access to ADS styling features like design\\ntokens.\\n\\nUse the Atlassian Design System [Heading](/components/heading) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML heading elements.\\n\\n### Incorrect\\n\\n```jsx\\n<h1>Hello world!</h1>\\n ^^ Using a native HTML heading element\\n\\n<span role=\\"heading\\" aria-level=\\"1\\">Hello world!</span>\\n ^^^^ Using `role=\\"heading\\"` to create headings\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Heading from \'@atlaskit/heading\';\\n\\n<Heading as=\\"h1\\">Hello, World!</Heading>;\\n```\\n"}',
|
|
133
137
|
ruleName: 'no-html-heading',
|
|
134
138
|
description: "Don't use native HTML headings. The Atlassian Design System provides a ready-made heading component"
|
|
135
139
|
}, {
|
|
136
|
-
content: '{"ruleName":"no-html-image","description":"Don\'t use native HTML images. The Atlassian Design System provides a ready-made image component that","content":"# no-html-image\\n\\nDon\'t use native HTML images. The Atlassian Design System provides a ready-made image component that\\nensures accessible implementations and provides access to ADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Image](/components/image
|
|
140
|
+
content: '{"ruleName":"no-html-image","description":"Don\'t use native HTML images. The Atlassian Design System provides a ready-made image component that","content":"# no-html-image\\n\\nDon\'t use native HTML images. The Atlassian Design System provides a ready-made image component that\\nensures accessible implementations and provides access to ADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Image](/components/image) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML image elements.\\n\\n### Incorrect\\n\\n```jsx\\n<img src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />\\n ^^^ Using a native HTML `<img>`\\n\\n<div role=\\"img\\" src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />\\n ^^^ Using `role=\\"img\\"` to create images\\n\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Image from \'@atlaskit/image\';\\n\\n<Image src=\\"foo.jpg\\" alt=\\"The word \'foo\' written on a white background.\\" />;\\n```\\n"}',
|
|
137
141
|
ruleName: 'no-html-image',
|
|
138
142
|
description: "Don't use native HTML images. The Atlassian Design System provides a ready-made image component that"
|
|
139
143
|
}, {
|
|
@@ -145,7 +149,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
145
149
|
ruleName: 'no-html-range',
|
|
146
150
|
description: "Don't use native HTML ranges. The Atlassian Design System provides a ready-made range component that"
|
|
147
151
|
}, {
|
|
148
|
-
content: "{\"ruleName\":\"no-html-select\",\"description\":\"Don't use native HTML selects. The Atlassian Design System provides a ready-made select component\",\"content\":\"# no-html-select\\n\\nDon't use native HTML selects. The Atlassian Design System provides a ready-made select component\\nthat has event tracking, ensures accessible implementations, and provides access to ADS styling\\nfeatures like design tokens.\\n\\nUse one of the Atlassian Design System [Select](/components/select
|
|
152
|
+
content: "{\"ruleName\":\"no-html-select\",\"description\":\"Don't use native HTML selects. The Atlassian Design System provides a ready-made select component\",\"content\":\"# no-html-select\\n\\nDon't use native HTML selects. The Atlassian Design System provides a ready-made select component\\nthat has event tracking, ensures accessible implementations, and provides access to ADS styling\\nfeatures like design tokens.\\n\\nUse one of the Atlassian Design System [Select](/components/select) components when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML select elements.\\n\\n### Incorrect\\n\\n```jsx\\n<select name=\\\"cities\\\" id=\\\"city-select\\\">\\n\\t<option value=\\\"adelaide\\\">Adelaide</option>\\n\\t<option value=\\\"brisbane\\\">Brisbane</option>\\n\\t<option value=\\\"canberra\\\">Canberra</option>\\n\\t<option value=\\\"darwin\\\">Darwin</option>\\n\\t<option value=\\\"hobart\\\">Hobart</option>\\n\\t<option value=\\\"melbourne\\\">Melbourne</option>\\n\\t<option value=\\\"perth\\\">Perth</option>\\n\\t<option value=\\\"sydney\\\">Sydney</option>\\n</select>\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Select from '@atlaskit/select';\\n\\nexport const cities: OptionsType = [\\n\\t{ label: 'Adelaide', value: 'adelaide', extra: 'extra' },\\n\\t{ label: 'Brisbane', value: 'brisbane' },\\n\\t{ label: 'Canberra', value: 'canberra' },\\n\\t{ label: 'Darwin', value: 'darwin' },\\n\\t{ label: 'Hobart', value: 'hobart' },\\n\\t{ label: 'Melbourne', value: 'melbourne' },\\n\\t{ label: 'Perth', value: 'perth' },\\n\\t{ label: 'Sydney', value: 'sydney' },\\n];\\n\\n<Select inputId=\\\"city-select\\\" options={cities} />\\n```\\n\"}",
|
|
149
153
|
ruleName: 'no-html-select',
|
|
150
154
|
description: "Don't use native HTML selects. The Atlassian Design System provides a ready-made select component"
|
|
151
155
|
}, {
|
|
@@ -153,7 +157,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
153
157
|
ruleName: 'no-html-text-input',
|
|
154
158
|
description: "Don't use native HTML text inputs. The Atlassian Design System provides a ready-made textfield"
|
|
155
159
|
}, {
|
|
156
|
-
content: '{"ruleName":"no-html-textarea","description":"Don\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea","content":"# no-html-textarea\\n\\nDon\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Textarea](/components/textarea
|
|
160
|
+
content: '{"ruleName":"no-html-textarea","description":"Don\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea","content":"# no-html-textarea\\n\\nDon\'t use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea\\ncomponent that includes event tracking, ensures accessible implementations, and provides access to\\nADS styling features like design tokens.\\n\\nUse the Atlassian Design System [Textarea](/components/textarea) component when suitable.\\n\\n## Examples\\n\\nThis rule marks code as violations when it finds native HTML code elements.\\n\\n### Incorrect\\n\\n```jsx\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<textarea id=\\"textarea\\"></textarea>\\n ^^^^^^^^ Using a native HTML `<textarea>`\\n```\\n\\n### Correct\\n\\n```jsx\\nimport Textarea from \'@atlaskit/textarea\';\\n\\n<label htmlFor=\\"textarea\\">Share your feedback</label>\\n<Textarea id=\\"textarea\\" />\\n```\\n"}',
|
|
157
161
|
ruleName: 'no-html-textarea',
|
|
158
162
|
description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
|
|
159
163
|
}, {
|
|
@@ -188,6 +192,10 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
188
192
|
content: "{\"ruleName\":\"no-pseudo-class-in-select-styles\",\"description\":\"This ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.\",\"content\":\"# no-pseudo-class-in-select-styles\\n\\nThis ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.\\nInstead, developers should use the `components` API with `xcss` props for styling pseudo-states.\\n\\n### Incorrect\\n\\n```tsx\\nimport Select from '@atlaskit/select';\\n\\n// ❌ Inline styles with pseudo-class\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t':hover': { backgroundColor: 'blue' },\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ❌ Variable-defined styles with pseudo-class\\nconst selectStyles = {\\n\\tcontrol: (base) => ({\\n\\t\\t...base,\\n\\t\\t':focus': { borderColor: 'red' },\\n\\t}),\\n};\\n<Select styles={selectStyles} />;\\n\\n// ❌ Pseudo class in spread operation\\nconst styles = {\\n\\t':hover': { backgroundColor: 'green' },\\n};\\n\\n<Select\\n\\tstyles={{\\n\\t\\toption: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\t...styles,\\n\\t\\t}),\\n\\t}}\\n/>;\\n```\\n\\n### Correct\\n\\n```tsx\\n// ✅ Use normal CSS properties without pseudo-classes\\nimport Select from '@atlaskit/select';\\n\\n<Select\\n\\tstyles={{\\n\\t\\tcontrol: (base) => ({\\n\\t\\t\\t...base,\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t\\tborderColor: 'gray',\\n\\t\\t}),\\n\\t}}\\n/>;\\n\\n// ✅ Use components API with xcss prop\\nimport { cssMap } from '@compiled/react';\\nimport Select, { components } from '@atlaskit/select';\\n\\nconst controlStyles = cssMap({\\n\\troot: {\\n\\t\\t'&:hover': {\\n\\t\\t\\tbackgroundColor: 'white',\\n\\t\\t},\\n\\t},\\n});\\n\\n<Select\\n\\tcomponents={{\\n\\t\\tControl: (props) => <components.Control {...props} xcss={controlStyles.root} />,\\n\\t}}\\n/>;\\n```\\n\"}",
|
|
189
193
|
ruleName: 'no-pseudo-class-in-select-styles',
|
|
190
194
|
description: 'This ESlint rule disallows pseudo classes in the `styles` prop for `@atlaskit/select` component.'
|
|
195
|
+
}, {
|
|
196
|
+
content: '{"ruleName":"no-readonly-or-disabled-inputs","description":"Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by","content":"# no-readonly-or-disabled-inputs\\n\\nInputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by\\na more user-friendly design pattern. Before using them, consider these alternatives:\\n\\n- Instead of disabling an input, consider removing it altogether, as it cannot be used anyway. Use a\\n well labeled and described input with clear error, valid, and/or helper messages.\\n- Instead of making an input read-only, consider making it normal text. Read-only inputs do the same\\n thing as normal text but appear as interactive elements and add themselves to the tab-order, which\\n can be confusing for users.\\n\\nThere are instances where these attributes are contextually appropriate, like disabling inputs\\nduring loading or asynchronous validation. Consult your accessibility team if you want to know how\\nyou can improve your experience and keep it accessible.\\n\\n## Examples\\n\\nThis rule will find violations for when an input has a disabled or read-only attribute.\\n\\n### Incorrect\\n\\n```jsx\\n<input\\n id=\\"name\\"\\n name=\\"username\\"\\n type=\\"text\\"\\n value=\\"Jane Doe\\"\\n disabled\\n ^^^^^^^^ Input should not be disabled.\\n/>\\n\\n<input\\n id=\\"name\\"\\n name=\\"username\\"\\n type=\\"text\\"\\n value=\\"Jane Doe\\"\\n readonly\\n ^^^^^^^^ Input should not be read-only.\\n/>\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield defaultValue=\\"Jane Doe\\" isDisabled />\\n ^^^^^^^^^^ Input should not be disabled.\\n<Textfield defaultValue=\\"Jane Doe\\" isReadOnly />\\n ^^^^^^^^^^ Input should not be read-only.\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n return (\\n <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n <Field\\n label=\\"Comments\\"\\n name=\\"comments\\"\\n component={({ fieldProps }) => (\\n <Textarea\\n defaultValue=\\"I love this restaurant.\\"\\n isDisabled\\n ^^^^^^^^^^ Input should not be disabled.\\n {...fieldProps}\\n />\\n )}\\n />\\n <FormFooter>\\n <Button type=\\"submit\\" appearance=\\"primary\\">\\n Submit\\n </Button>\\n </FormFooter>\\n </Form>\\n );\\n}\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n return (\\n <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n <Field\\n label=\\"Comments\\"\\n name=\\"comments\\"\\n component={({ fieldProps }) => (\\n <Textarea\\n defaultValue=\\"I love this restaurant.\\"\\n isReadOnly\\n ^^^^^^^^^^ Input should not be read-only.\\n {...fieldProps}\\n />\\n )}\\n />\\n <FormFooter>\\n <Button type=\\"submit\\" appearance=\\"primary\\">\\n Submit\\n </Button>\\n </FormFooter>\\n </Form>\\n );\\n}\\n```\\n\\n### Correct\\n\\n```jsx\\n<input id=\\"name\\" name=\\"username\\" type=\\"text\\" value=\\"Jane Doe\\" />\\n\\n<p>The current user\'s username is Jane Doe.</p>\\n```\\n\\n```jsx\\nimport Textfield from \'@atlaskit/textfield\';\\nimport { Text } from \'@atlaskit/primitives\';\\n\\n<Textfield value=\\"Jane Doe\\" />\\n\\n<Text>The current user\'s username is Jane Doe.</Text>\\n```\\n\\n```jsx\\nimport Form, { Field, FormFooter } from \'@atlaskit/form\';\\nimport Textarea from \'@atlaskit/textarea\';\\n\\nexport default function Example(): React.JSX.Element {\\n return (\\n <Form onSubmit={(formState: unknown) => console.log(\'form submitted\', formState)}>\\n <Field\\n label=\\"Comments\\"\\n name=\\"comments\\"\\n defaultValue=\\"I love this restaurant.\\"\\n component={({ fieldProps }) => <Textarea {...fieldProps} />}\\n />\\n <FormFooter>\\n <Button type=\\"submit\\" appearance=\\"primary\\">\\n Submit\\n </Button>\\n </FormFooter>\\n </Form>\\n );\\n}\\n```\\n"}',
|
|
197
|
+
ruleName: 'no-readonly-or-disabled-inputs',
|
|
198
|
+
description: 'Inputs should almost always be interactive. Disabled and read-only inputs can usually be replaced by'
|
|
191
199
|
}, {
|
|
192
200
|
content: '{"ruleName":"no-separator-with-list-elements","description":"This ESLint rule warns when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in","content":"# no-separator-with-list-elements\\n\\n## No Separator with List Elements\\n\\nThis ESLint rule warns when the `separator` prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in\\nthe `Inline` component from `@atlaskit/primitives`.\\n\\n### Examples\\n\\n#### Incorrect\\n\\n```tsx\\n<Inline as=\\"li\\" separator=\\"/\\">Content</Inline>\\n\\t\\t\\t\\t^^^^^^^^^^^^^ separator prop is used with `as=\\"li\\"`, `as=\\"ol\\"`, or `as=\\"dl\\"` in the Inline component\\n```\\n\\n## Correct\\n\\n```tsx\\n<Inline as=\\"li\\">Content</Inline>\\n```\\n"}',
|
|
193
201
|
ruleName: 'no-separator-with-list-elements',
|
|
@@ -233,7 +241,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
233
241
|
ruleName: 'use-button-group-label',
|
|
234
242
|
description: 'ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of'
|
|
235
243
|
}, {
|
|
236
|
-
content: '{"ruleName":"use-character-counter-field","description":"Suggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`","content":"# use-character-counter-field\\n\\nSuggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`\\nor `Textarea` components are used with `maxLength` or `minLength` props.\\n\\n## Why is this important?\\n\\nWhen using character limits on text inputs, it\'s important to provide real-time feedback to users\\nabout:\\n\\n- How many characters they can still enter\\n- Whether they\'ve met a minimum character requirement\\n- Whether they\'re approaching or exceeding a maximum character limit\\n\\nThe `CharacterCounterField` and `CharacterCounter` components provide this accessibility benefit out\\nof the box with:\\n\\n- Visual character count display\\n- Screen reader announcements for character count changes\\n- Clear indication of when limits are approaching or exceeded\\n- Proper ARIA attributes for assistive technologies\\n\\n## Examples\\n\\n### Inside Form context\\n\\nUse `CharacterCounterField` when your input is within a Form.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Form, { Field } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<Field name=\\"name\\" label=\\"Name\\">\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} maxLength={50} />}\\n\\t</Field>\\n</Form>;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport Form, { CharacterCounterField } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<CharacterCounterField name=\\"name\\" label=\\"Name\\" maxCharacters={50}>\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} />}\\n\\t</CharacterCounterField>\\n</Form>;\\n```\\n\\n### Outside Form context (standalone)\\n\\nUse `CharacterCounter` for custom implementations outside of Form context.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield label=\\"Name\\" maxLength={50} />;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport { useState } from \'react\';\\nimport { CharacterCounter, Label } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\nconst [value, setValue] = useState(\'\');\\nconst maxCharacters = 50;\\nconst isTooLong = value.length > maxCharacters;\\n\\n<>\\n\\t<Label htmlFor=\\"name-field\\">Name</Label>\\n\\t<Textfield\\n\\t\\tid=\\"name-field\\"\\n\\t\\tvalue={value}\\n\\t\\tonChange={(e) => setValue(e.currentTarget.value)}\\n\\t\\taria-describedby=\\"name-field-character-counter\\"\\n\\t\\tisInvalid={isTooLong}\\n\\t/>\\n\\t<CharacterCounter\\n\\t\\tcurrentValue={value}\\n\\t\\tmaxCharacters={maxCharacters}\\n\\t\\tinputId=\\"name-field\\"\\n\\t\\tshouldShowAsError={isTooLong}\\n\\t/>\\n</>;\\n```\\n\\n## Options\\n\\nThis rule has no options.\\n\\n## When Not To Use It\\n\\n- If you\'re not using character limits on your text inputs, this rule won\'t apply.\\n\\nIf you are using character limits, it\'s strongly recommended to use `CharacterCounterField` (within\\nForm) or `CharacterCounter` (standalone) for better accessibility.\\n\\n## Related Rules\\n\\n- [use-correct-field](
|
|
244
|
+
content: '{"ruleName":"use-character-counter-field","description":"Suggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`","content":"# use-character-counter-field\\n\\nSuggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`\\nor `Textarea` components are used with `maxLength` or `minLength` props.\\n\\n## Why is this important?\\n\\nWhen using character limits on text inputs, it\'s important to provide real-time feedback to users\\nabout:\\n\\n- How many characters they can still enter\\n- Whether they\'ve met a minimum character requirement\\n- Whether they\'re approaching or exceeding a maximum character limit\\n\\nThe `CharacterCounterField` and `CharacterCounter` components provide this accessibility benefit out\\nof the box with:\\n\\n- Visual character count display\\n- Screen reader announcements for character count changes\\n- Clear indication of when limits are approaching or exceeded\\n- Proper ARIA attributes for assistive technologies\\n\\n## Examples\\n\\n### Inside Form context\\n\\nUse `CharacterCounterField` when your input is within a Form.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Form, { Field } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<Field name=\\"name\\" label=\\"Name\\">\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} maxLength={50} />}\\n\\t</Field>\\n</Form>;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport Form, { CharacterCounterField } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Form onSubmit={handleSubmit}>\\n\\t<CharacterCounterField name=\\"name\\" label=\\"Name\\" maxCharacters={50}>\\n\\t\\t{({ fieldProps }) => <Textfield {...fieldProps} />}\\n\\t</CharacterCounterField>\\n</Form>;\\n```\\n\\n### Outside Form context (standalone)\\n\\nUse `CharacterCounter` for custom implementations outside of Form context.\\n\\n#### Incorrect ❌\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield label=\\"Name\\" maxLength={50} />;\\n```\\n\\n#### Correct ✅\\n\\n```tsx\\nimport { useState } from \'react\';\\nimport { CharacterCounter, Label } from \'@atlaskit/form\';\\nimport Textfield from \'@atlaskit/textfield\';\\n\\nconst [value, setValue] = useState(\'\');\\nconst maxCharacters = 50;\\nconst isTooLong = value.length > maxCharacters;\\n\\n<>\\n\\t<Label htmlFor=\\"name-field\\">Name</Label>\\n\\t<Textfield\\n\\t\\tid=\\"name-field\\"\\n\\t\\tvalue={value}\\n\\t\\tonChange={(e) => setValue(e.currentTarget.value)}\\n\\t\\taria-describedby=\\"name-field-character-counter\\"\\n\\t\\tisInvalid={isTooLong}\\n\\t/>\\n\\t<CharacterCounter\\n\\t\\tcurrentValue={value}\\n\\t\\tmaxCharacters={maxCharacters}\\n\\t\\tinputId=\\"name-field\\"\\n\\t\\tshouldShowAsError={isTooLong}\\n\\t/>\\n</>;\\n```\\n\\n## Options\\n\\nThis rule has no options.\\n\\n## When Not To Use It\\n\\n- If you\'re not using character limits on your text inputs, this rule won\'t apply.\\n\\nIf you are using character limits, it\'s strongly recommended to use `CharacterCounterField` (within\\nForm) or `CharacterCounter` (standalone) for better accessibility.\\n\\n## Related Rules\\n\\n- [use-correct-field](/components/eslint-plugin-design-system/use-correct-field)\\n"}',
|
|
237
245
|
ruleName: 'use-character-counter-field',
|
|
238
246
|
description: 'Suggests using `CharacterCounterField` or `CharacterCounter` from `@atlaskit/form` when `Textfield`'
|
|
239
247
|
}, {
|
|
@@ -260,6 +268,10 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
260
268
|
content: '{"ruleName":"use-heading","description":"Using primitives allows you to delete bespoke component code and replace it with ready made","content":"# use-heading\\n\\nUsing primitives allows you to delete bespoke component code and replace it with ready made\\nsolutions made by the Atlassian Design System Team.\\n\\n## Examples\\n\\nThis rule marks code as violations when it can be replaced 1:1 with a heading component.\\n\\n### Incorrect\\n\\n```jsx\\n<div>\\n <h1>text</hi>\\n <p>content</p>\\n</div>\\n^^^^\\n```\\n\\n### Correct\\n\\n```jsx\\n<div>\\n\\t<Heading size=\\"xlarge\\">text</Heading>\\n\\t<p>content</p>\\n</div>\\n```\\n\\nCurrently, the rule is extremely defensive, only reporting on `h1`, `h2`, `h3`, `h4`, `h5` and `h6`\\nelements that don\'t have any props outside of `key`, `id` and `data-testid`. We\'re only targeting\\ninstances that are the first child of their siblings.\\n\\n## Options\\n\\n`enableUnsafeAutofix`: Rule reports errors with autofixes instead of suggestions. Defaults to\\n`false`.\\n\\n`enableUnsafeReport`: Rule reports errors for native elements that are not autofixable. Defaults to\\n`true`.\\n"}',
|
|
261
269
|
ruleName: 'use-heading',
|
|
262
270
|
description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
|
|
271
|
+
}, {
|
|
272
|
+
content: '{"ruleName":"use-heading-level-in-section-message","description":"The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs","content":"# use-heading-level-in-section-message\\n\\nThe `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs\\nto be the correct level within the document flow. This is not something that can be automated and\\nrequires contextual knowledge of what is present in the experience.\\n\\nFor more information on proper heading flow, consider this\\n[W3C document on heading hierarchy](https://www.w3.org/WAI/tutorials/page-structure/headings/).\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled\';\\nimport SectionMessage from \'@atlaskit/section-message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\">\\n ^^^^^^^^^^^^^^ Heading level is not explicitly set.\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport Heading from \'@atlaskit/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled\';\\nimport SectionMessage from \'@atlaskit/section-message\';\\n\\n<Heading as=\\"h1\\">Jira</Heading>\\n<SectionMessage title=\\"Editing is restricted\\" headingLevel=\\"h2\\">\\n\\t<Text as=\\"p\\">You must be an administrator to edit this content.</Text>\\n</SectionMessage>\\n```\\n"}',
|
|
273
|
+
ruleName: 'use-heading-level-in-section-message',
|
|
274
|
+
description: 'The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs'
|
|
263
275
|
}, {
|
|
264
276
|
content: '{"ruleName":"use-heading-level-in-spotlight-card","description":"The `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in","content":"# use-heading-level-in-spotlight-card\\n\\nThe `SpotlightCard` component in `@atlaskit/onboarding` will be requiring the `headingLevel` prop in\\nfuture releases.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<SpotlightCard heading=\\"Heading\\">Spotlight card contents</SpotlightCard>\\n ^^^^^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<SpotlightCard heading=\\"Heading\\" headingLevel={2}>\\n\\tSpotlight card contents\\n</SpotlightCard>\\n```\\n"}',
|
|
265
277
|
ruleName: 'use-heading-level-in-spotlight-card',
|
|
@@ -301,7 +313,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
301
313
|
ruleName: 'use-primitives-text',
|
|
302
314
|
description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
|
|
303
315
|
}, {
|
|
304
|
-
content:
|
|
316
|
+
content: "{\"ruleName\":\"use-should-render-to-parent\",\"description\":\"Popups and dropdown menus render to portals by default. This puts their content outside of the\",\"content\":\"# use-should-render-to-parent\\n\\nPopups and dropdown menus render to portals by default. This puts their content outside of the\\nstandard DOM order which creates accessibility issues for users.\\n\\n## Examples\\n\\nThis rule will indicate user with a recommendation to use the `shouldRenderToParent` prop set to\\n`true`.\\n\\n### Incorrect\\n\\n```tsx\\nimport Popup from '@atlaskit/popup';\\nimport { DropdownMenu } from '@atlaskit/dropdown-menu';\\nimport { DropdownTrigger } from '@atlassian/entry-points/dropdown-trigger';\\nimport { PopupTrigger } from '@atlassian/entry-points/popup-trigger';\\n\\n<Popup>\\n ^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Popup content\\n</Popup>\\n\\n<DropdownMenu>\\n ^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Dropdown content\\n</DropdownMenu>\\n\\n<DropdownTrigger>\\n ^^^^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Dropdown content\\n</DropdownTrigger>\\n\\n<PopupTrigger>\\n ^^^^^^^^^^^^^^^ The default value of `shouldRenderToParent` is `false`. Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Popup content\\n</PopupTrigger>\\n\\n<Popup shouldRenderToParent={false}>\\n ^^^^^^^^^^^^^^^^^^^^ Setting the `shouldRenderToParent` prop to anything other than `true` causes accessibility issues. Only set to `false` as a last resort.\\n Popup content\\n</Popup>\\n```\\n\\n### Correct\\n\\n```tsx\\nimport Popup from '@atlaskit/popup';\\nimport { DropdownMenu } from '@atlaskit/dropdown-menu';\\nimport { DropdownTrigger } from '@atlassian/entry-points/dropdown-trigger';\\nimport { PopupTrigger } from '@atlassian/entry-points/popup-trigger';\\n\\n<Popup shouldRenderToParent>\\n Popup content\\n</Popup>\\n\\n<DropdownMenu shouldRenderToParent>\\n Dropdown content\\n</DropdownMenu>\\n\\n<DropdownTrigger shouldRenderToParent>\\n Dropdown content\\n</DropdownTrigger>\\n\\n<PopupTrigger shouldRenderToParent>\\n Popup content\\n</PopupTrigger>\\n```\\n\"}",
|
|
305
317
|
ruleName: 'use-should-render-to-parent',
|
|
306
318
|
description: 'Popups and dropdown menus render to portals by default. This puts their content outside of the'
|
|
307
319
|
}, {
|
|
@@ -320,6 +332,14 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
320
332
|
content: '{"ruleName":"use-tag-group-label","description":"TagGroup should have an accessible name or a reference to it, so that upon opening, users of","content":"# use-tag-group-label\\n\\nTagGroup should have an accessible name or a reference to it, so that upon opening, users of\\nassistive technologies could have contextual information of interaction with current element.\\n\\n## Examples\\n\\nThis rule will indicate user with warning to strongly recommend usage of either `label` or `titleId`\\nprop.\\n\\n### Incorrect\\n\\n```tsx\\n<TagGroup>\\n ^^^^^^^^ Missing either `label` or `titleId` prop.\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<TagGroup label=\\"\\">\\n ^^^^^ `label` prop is missing accessible name value.\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</hi>\\n<TagGroup titleId=\\"\\">\\n ^^^^^^^ `titleId` prop is missing reference value.\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</h2>\\n<TagGroup titleId=\\"tag-group-title\\" label=\\"\\">\\n ^^^^^^^ ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n```\\n\\n### Correct\\n\\n```tsx\\n<TagGroup label=\\"TagGroup content title\\">\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n\\n<h2 id=\\"tag-group-title\\">TagGroup content title</h2>\\n<TagGroup titleId=\\"tag-group-title\\">\\n <Tag text=\\"Jira\\">\\n <Tag text=\\"Confluence\\">\\n <Tag text=\\"Platform\\">\\n</TagGroup>\\n```\\n"}',
|
|
321
333
|
ruleName: 'use-tag-group-label',
|
|
322
334
|
description: 'TagGroup should have an accessible name or a reference to it, so that upon opening, users of'
|
|
335
|
+
}, {
|
|
336
|
+
content: '{"ruleName":"use-textfield-autocomplete","description":"This rule enforces that `Textfield` components with identifiable input purposes (`type=\\"email\\"`,","content":"# use-textfield-autocomplete\\n\\nThis rule enforces that `Textfield` components with identifiable input purposes (`type=\\"email\\"`,\\n`type=\\"tel\\"`, or `type=\\"url\\"`) have an appropriate `autoComplete` prop set. This is required for\\nWCAG 2.2 SC 1.3.5 compliance (Identify Input Purpose), which mandates that inputs with identifiable\\npurposes must have that purpose indicated programmatically.\\n\\n## Supported Types\\n\\n| Input `type` | Required `autoComplete` |\\n| ------------ | ----------------------- |\\n| `email` | `\\"email\\"` |\\n| `tel` | `\\"tel\\"` |\\n| `url` | `\\"url\\"` |\\n\\n## Examples\\n\\nThis rule will warn makers if a `Textfield` component with one of the supported types is missing the\\n`autoComplete` attribute or has it set to `\\"off\\"`.\\n\\n### Incorrect\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n// Missing autoComplete (Having autoComplete on the Textfield would provide the most accurate autofill)\\n<Textfield type=\\"email\\" />\\n<Textfield type=\\"tel\\" />\\n<Textfield type=\\"url\\" />\\n```\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n// autoComplete disabled\\n<Textfield type=\\"email\\" autoComplete=\\"off\\" />\\n<Textfield type=\\"tel\\" autoComplete=\\"off\\" />\\n<Textfield type=\\"url\\" autoComplete=\\"off\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport Textfield from \'@atlaskit/textfield\';\\n\\n<Textfield type=\\"email\\" autoComplete=\\"email\\" />\\n<Textfield type=\\"tel\\" autoComplete=\\"tel\\" />\\n<Textfield type=\\"url\\" autoComplete=\\"url\\" />\\n```\\n\\n## Auto-Fix\\n\\nThis rule is auto-fixable. When enabled, ESLint can automatically:\\n\\n- Add the appropriate `autoComplete` value to `Textfield` components that are missing the attribute\\n- Replace `autoComplete=\\"off\\"` with the correct value for the input type\\n\\n## References\\n\\n- [WCAG 2.2 SC 1.3.5: Identify Input Purpose](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html)\\n- [HTML autocomplete attribute specification](https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill)\\n"}',
|
|
337
|
+
ruleName: 'use-textfield-autocomplete',
|
|
338
|
+
description: 'This rule enforces that `Textfield` components with identifiable input purposes (`type="email"`,'
|
|
339
|
+
}, {
|
|
340
|
+
content: "{\"ruleName\":\"use-tokens-motion\",\"description\":\"This rule marks code as violations when a motion duration or easing token should be used. It will\",\"content\":\"# use-tokens-motion\\n\\n## Examples\\n\\nThis rule marks code as violations when a motion duration or easing token should be used. It will\\nauto-fix values that can be mapped 1:1 with an ADS motion token. Values that can't be mapped to a\\ntoken will still be reported, however no auto-fix will happen.\\n\\n### Incorrect\\n\\n```jsx\\nconst styles = css({\\n\\ttransitionDuration: '200ms',\\n\\ttransitionTimingFunction: 'cubic-bezier(0.4, 0, 0, 1)',\\n});\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\ttransitionDuration: token('motion.duration.medium', '200ms'),\\n\\ttransitionTimingFunction: token('motion.easing.inout.bold', 'cubic-bezier(0.4, 0, 0, 1)'),\\n});\\n```\\n\\nSee the list of available motion tokens on the\\n[ADS website](https://atlassian.design/foundations/motion).\\n\"}",
|
|
341
|
+
ruleName: 'use-tokens-motion',
|
|
342
|
+
description: 'This rule marks code as violations when a motion duration or easing token should be used. It will'
|
|
323
343
|
}, {
|
|
324
344
|
content: '{"ruleName":"use-tokens-shape","description":"This rule marks code as violations when a shape token should be used. It will auto-fix values that","content":"# use-tokens-shape\\n\\n## Examples\\n\\nThis rule marks code as violations when a shape token should be used. It will auto-fix values that\\ncan be mapped 1:1 with an ADS shape token. Values that can\'t be mapped to a token will still be\\nreported, however no auto-fix will happen.\\n\\n### Incorrect\\n\\n```jsx\\nconst someStyles = css({\\n borderRadius: \'3px\';\\n \\t\\t\\t^^^^^\\n borderWidth: \'2px\';\\n \\t\\t ^^^^^\\n})\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { token } from \'@atlaskit/tokens\'\\n\\nconst someStyles = css({\\n borderRadius: token(\'radius.small\');\\n borderRadius: token(\'border.width.outline\');\\n})\\n```\\n\\nSee the list of available shape tokens on the\\n[ADS website](https://atlassian.design/components/tokens/all-tokens).\\n"}',
|
|
325
345
|
ruleName: 'use-tokens-shape',
|
|
@@ -5,8 +5,8 @@
|
|
|
5
5
|
export const i18nConversionGuide = {
|
|
6
6
|
id: 'hardcoded-string-to-formatmessage',
|
|
7
7
|
title: 'Hardcoded String to formatMessage Conversion Guide',
|
|
8
|
-
description: 'Comprehensive guide for converting hardcoded strings to use formatMessage or FormattedMessage from @atlassian/jira-intl or react-intl
|
|
9
|
-
purpose: 'This guide instructs LLM agents to convert hardcoded strings to use formatMessage or FormattedMessage. The import source depends on the file path: use @atlassian/jira-intl for Jira files (path contains "jira"), and react-intl
|
|
8
|
+
description: 'Comprehensive guide for converting hardcoded strings to use formatMessage or FormattedMessage from @atlassian/jira-intl or react-intl',
|
|
9
|
+
purpose: 'This guide instructs LLM agents to convert hardcoded strings to use formatMessage or FormattedMessage. The import source depends on the file path: use @atlassian/jira-intl for Jira files (path contains "jira"), and react-intl for any non-Jira files. **CRITICAL: Check for existing imports** - If the file already imports from react-intl or react-intl, reuse that import. If the file already uses FormattedMessage, use FormattedMessage for consistency instead of useIntl + formatMessage. The goal is to find all hardcoded strings in JSX and convert them to internationalized messages.',
|
|
10
10
|
scope: `**CRITICAL SCOPE**: This process should **ONLY** focus on converting hardcoded strings (literal strings in JSX, eslint-disable comments for no-literal-string-in-jsx, etc.) to use formatMessage. Do NOT modify pre-existing messages that were already in the codebase, even if they have poor descriptions, incorrect placeholder names, or other quality issues. Only convert NEW hardcoded strings.
|
|
11
11
|
|
|
12
12
|
**PATH SCOPE LIMITATION**: If a specific file, package name, or path is provided, **ONLY** find and convert hardcoded strings within that specified path. Do NOT modify files outside the provided scope.
|
|
@@ -16,7 +16,7 @@ export const i18nConversionGuide = {
|
|
|
16
16
|
**CRITICAL: FIX ALL VIOLATIONS IN FILE**: When a specific file is mentioned (even with line numbers like \`@file.tsx:139-142\`), you MUST find and fix **ALL** @atlassian/i18n/no-literal-string-in-jsx violations in that entire file, not just the specific lines mentioned. Scan the entire file for hardcoded strings WITH eslint-disable comments and convert them all. The line numbers are just a reference point - the goal is to fix all i18n violations (those with eslint-disable comments) in the provided file.
|
|
17
17
|
|
|
18
18
|
**CRITICAL: STRING FILTERING**: When finding eslint-disable comments, you MUST examine the actual string content. Only convert strings that contain **user-facing English text**. Many English strings are technical/non-user-facing and should NOT be converted (e.g., product names like "Jira", URLs like "https://example.com", technical IDs, symbols). Use the ESLint ignore patterns to identify which English strings to skip - strings matching ignore patterns should be LEFT AS-IS with their eslint-disable comments intact.`,
|
|
19
|
-
implementationChecklist: ['**CRITICAL: Only convert strings with eslint-disable** - ONLY convert strings that have eslint-disable comments for @atlassian/i18n/no-literal-string-in-jsx. Do NOT convert strings without these comments (e.g., field labels like label="Space Name" without eslint-disable should remain as-is).', '**CRITICAL: Check for existing imports** - If the file already imports from react-intl
|
|
19
|
+
implementationChecklist: ['**CRITICAL: Only convert strings with eslint-disable** - ONLY convert strings that have eslint-disable comments for @atlassian/i18n/no-literal-string-in-jsx. Do NOT convert strings without these comments (e.g., field labels like label="Space Name" without eslint-disable should remain as-is).', '**CRITICAL: Check for existing imports** - If the file already imports from react-intl or react-intl, REUSE that import. Only add a new import if none exists.', '**CRITICAL: Match existing pattern** - If the file already uses FormattedMessage, use FormattedMessage with inline props. If it uses useIntl + formatMessage, use defineMessage + formatMessage. Match the existing code style.', "**CRITICAL: When to use formatMessage() vs <FormattedMessage>** - Use formatMessage() for prop values (labels, placeholders, aria-labels), computed values, event handlers, and non-JSX contexts. Use <FormattedMessage> for JSX content where you'd otherwise write {formatMessage(...)}.", 'Import: Use "@atlassian/jira-intl" for Jira files or "react-intl" for non-Jira files. Note: "react-intl" and "react-intl" are treated the same way - both use the same API. When adding to existing imports, maintain alphabetical order: import { defineMessage, FormattedMessage } from "react-intl";', '**CRITICAL: FormattedMessage pattern** - When using FormattedMessage, define message details directly inline: <FormattedMessage id="..." defaultMessage="..." description="..." />. NO need to use defineMessage - FormattedMessage accepts these props directly.', '**CRITICAL: formatMessage pattern** - When using useIntl + formatMessage, create message constants using defineMessage (singular) at the top of the file - use defineMessage for each individual message, NOT defineMessages. Then use: const { formatMessage } = useIntl(); formatMessage(messageKey)', '**CRITICAL: i18n ID Format**: For files in `/next/packages/`, i18n ids MUST start with the package name (with dashes). Format: `{package-name}.{component-or-feature}.{message-key}`. Example: For package `comment-extension-handlers`, use `comment-extension-handlers.legacy-content-modal.close-button`. For package `rovo-ai-search`, use `rovo-ai-search.view-profile-text` or `rovo-ai-search.knowledge-cards.copy-email-address`.', '**CRITICAL: ai-non-final Suffix**: ALL new message IDs MUST end with `.ai-non-final` suffix. This applies to ALL newly created messages, regardless of whether existing messages in the file have this suffix. Format: `{message-key}.ai-non-final`. Example: `applinks.administration.list.applinks-table.system-label.ai-non-final`. This suffix indicates the message is AI-generated and may need review before finalization.', 'Replace hardcoded strings with either formatMessage(messageKey) or <FormattedMessage id="..." defaultMessage="..." description="..." /> based on existing pattern', '**CRITICAL: Write comprehensive descriptions** - Descriptions are instructions for translators. Include: (1) Where text is shown and the UI element (e.g., "on a button", "as an error message", "as a title", "for a link", "as a drop-down item"), (2) What it does, triggers, or prompts, (3) If there is a placeholder, explain how it will be substituted and with what, (4) If there is an ICU MessageFormat statement (not a placeholder!), provide instruction on the resolved ICU message, not on the ICU structure unless there are more than 2 plural statements, (5) Explain the purpose of the sentence in defaultMessage, (6) Propose an alternative text in Plain English only if the text contains an idiom. Descriptions must be 40+ chars and unique from defaultMessage.', 'Remove eslint-disable for no-literal-string-in-jsx ONLY after converting', '**VERIFICATION**: To verify all hardcoded strings are fixed, search for `@atlassian/i18n/no-literal-string-in-jsx` in the file. Do NOT run eslint - just search for the eslint-disable comments. If no matches are found, all hardcoded strings have been converted.'],
|
|
20
20
|
patterns: [{
|
|
21
21
|
title: 'Button Text and Action Labels',
|
|
22
22
|
description: 'Converting hardcoded button text with variables',
|
|
@@ -135,7 +135,7 @@ export function MyComponent() {
|
|
|
135
135
|
}, {
|
|
136
136
|
title: 'Using FormattedMessage',
|
|
137
137
|
description: 'Reusing existing FormattedMessage pattern and using with placeholders',
|
|
138
|
-
before: `import { FormattedMessage } from 'react-intl
|
|
138
|
+
before: `import { FormattedMessage } from 'react-intl';
|
|
139
139
|
|
|
140
140
|
export function MyComponent() {
|
|
141
141
|
const version = 'v2.0';
|
|
@@ -149,7 +149,7 @@ export function MyComponent() {
|
|
|
149
149
|
</Box>
|
|
150
150
|
);
|
|
151
151
|
}`,
|
|
152
|
-
after: `import { FormattedMessage } from 'react-intl
|
|
152
|
+
after: `import { FormattedMessage } from 'react-intl';
|
|
153
153
|
|
|
154
154
|
export function MyComponent() {
|
|
155
155
|
const version = 'v2.0';
|
|
@@ -181,7 +181,7 @@ export function MyComponent() {
|
|
|
181
181
|
before: `<Field name="spaceName" label="Space Name" placeholder="Enter space name" />
|
|
182
182
|
<Button aria-label="Create space">Create space</Button>
|
|
183
183
|
<Box>Welcome message</Box>`,
|
|
184
|
-
after: `import { defineMessage, FormattedMessage, useIntl } from 'react-intl
|
|
184
|
+
after: `import { defineMessage, FormattedMessage, useIntl } from 'react-intl';
|
|
185
185
|
|
|
186
186
|
const spaceNameLabel = defineMessage({
|
|
187
187
|
id: 'my-component.space-name-label.ai-non-final',
|
|
@@ -231,6 +231,6 @@ export function MyComponent() {
|
|
|
231
231
|
explanation: "Use formatMessage() for prop values (labels, placeholders, aria-labels), computed values, event handlers, and non-JSX contexts. Use <FormattedMessage> for JSX content where you'd otherwise write {formatMessage(...)}. In this example, label and placeholder props use formatMessage(), while button text and content use FormattedMessage."
|
|
232
232
|
}],
|
|
233
233
|
bestPractices: ['Use descriptive names (userNameLabel not label) and placeholders (userName not value)', 'Use ICU plural format for numeric values: {count, plural, one {...} other {...}}', 'When using formatMessage pattern: Place message constants at top of file. When using FormattedMessage pattern: Define messages inline in JSX.', "Use formatMessage() for prop values (labels, placeholders, aria-labels), computed values, event handlers, and non-JSX contexts. Use <FormattedMessage> for JSX content where you'd otherwise write {formatMessage(...)}.", 'Convert arrow functions to body form if needed for hooks'],
|
|
234
|
-
commonPitfalls: ["**CRITICAL**: Converting strings that don't have eslint-disable comments - only convert strings with @atlassian/i18n/no-literal-string-in-jsx eslint-disable comments. Field labels and other strings without these comments should remain as-is.", '**CRITICAL**: Converting/removing eslint-disable for strings matching ignore patterns - technical/non-user-facing strings should remain hardcoded', '**CRITICAL**: Forgetting to remove eslint-disable comments after conversion - once a string is converted to use formatMessage/FormattedMessage, the eslint-disable comment must be removed', 'Using wrong import path - "jira" path needs @atlassian/jira-intl (with eslint-disable), others use react-intl
|
|
234
|
+
commonPitfalls: ["**CRITICAL**: Converting strings that don't have eslint-disable comments - only convert strings with @atlassian/i18n/no-literal-string-in-jsx eslint-disable comments. Field labels and other strings without these comments should remain as-is.", '**CRITICAL**: Converting/removing eslint-disable for strings matching ignore patterns - technical/non-user-facing strings should remain hardcoded', '**CRITICAL**: Forgetting to remove eslint-disable comments after conversion - once a string is converted to use formatMessage/FormattedMessage, the eslint-disable comment must be removed', 'Using wrong import path - "jira" path needs @atlassian/jira-intl (with eslint-disable), others use react-intl', 'Adding eslint-disable for defineMessage in non-Jira files or forgetting it in Jira files', 'Missing useIntl hook when using formatMessage pattern, generic placeholder names, descriptions < 40 chars, or descriptions that do not follow the translator guidelines (missing UI element location, missing action explanation, etc.)', "Using placeholder names that don't match variable names - placeholder names in defaultMessage must exactly match the keys in the values object or formatMessage parameters", 'Modifying pre-existing messages or working outside specified path scope'],
|
|
235
235
|
additionalResources: ['ESLint rule @atlassian/i18n/no-literal-string-in-jsx defines ignore patterns for technical strings (URLs, product names, symbols, etc.)']
|
|
236
236
|
};
|
|
@@ -4,7 +4,7 @@ import { zodToJsonSchema } from '../../helpers/zod-to-json-schema';
|
|
|
4
4
|
import { i18nConversionInputSchema } from './i18n-conversion-input-schema';
|
|
5
5
|
export const listI18nConversionTool = {
|
|
6
6
|
name: 'ads_i18n_conversion_guide',
|
|
7
|
-
description: `Returns a **bundled** step-by-step guide for replacing hardcoded UI strings with \`formatMessage\` (and related patterns) using @atlassian/jira-intl or react-intl
|
|
7
|
+
description: `Returns a **bundled** step-by-step guide for replacing hardcoded UI strings with \`formatMessage\` (and related patterns) using @atlassian/jira-intl or react-intl: message constants, placeholders, descriptions, and scope/limitations for systematic refactors.
|
|
8
8
|
|
|
9
9
|
When working with i18n or hardcoded UI strings, use this tool alongside the Context Engine MCP tool \`get_i18n_docs\` for Atlassian-wide Traduki / i18n standards (message definition, extraction, pluralisation, formatting, workflow); this tool supplies the concrete hardcoded-string → \`formatMessage\` playbook bundled in ADS MCP.
|
|
10
10
|
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
/* eslint-disable-next-line import/extensions -- MCP SDK requires .js extensions for ESM imports */
|
|
2
|
+
|
|
3
|
+
import { zodToJsonSchema } from '../../helpers';
|
|
4
|
+
import { searchAtlaskitHooksInputSchema } from './search-atlaskit-hooks-input-schema';
|
|
5
|
+
export const listSearchAtlaskitHooksTool = {
|
|
6
|
+
name: 'atlaskit_search_hooks',
|
|
7
|
+
description: `Search for atlaskit hooks by name, package, category, description, or keywords.
|
|
8
|
+
|
|
9
|
+
WHEN TO USE:
|
|
10
|
+
Use this when you want to find a hook but don't know its exact name or package.`,
|
|
11
|
+
annotations: {
|
|
12
|
+
title: 'Search Atlaskit hooks',
|
|
13
|
+
readOnlyHint: true,
|
|
14
|
+
destructiveHint: false,
|
|
15
|
+
idempotentHint: true,
|
|
16
|
+
openWorldHint: true
|
|
17
|
+
},
|
|
18
|
+
inputSchema: zodToJsonSchema(searchAtlaskitHooksInputSchema)
|
|
19
|
+
};
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
import { z } from 'zod';
|
|
2
|
+
export const searchAtlaskitHooksInputSchema = z.object({
|
|
3
|
+
terms: z.array(z.string()).describe('Required: one or more search terms (fuzzy over name, package, category, description, keywords, usageGuidelines). Example: `["analytics", "storage", "layering"]`.'),
|
|
4
|
+
limit: z.number().default(2).describe('Max matches **per term** (default 2).').optional()
|
|
5
|
+
});
|