@atlaskit/ads-mcp 1.11.1 → 1.11.2
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +8 -0
- package/dist/cjs/tools/get-all-components/components.codegen.js +2 -2
- package/dist/cjs/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/cjs/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +282 -82
- package/dist/cjs/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +3 -8393
- package/dist/cjs/tools/get-lint-rules/lint-rules-structured-content.codegen.js +20 -12
- package/dist/es2019/tools/get-all-components/components.codegen.js +2 -2
- package/dist/es2019/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/es2019/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +282 -82
- package/dist/es2019/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +2 -8386
- package/dist/es2019/tools/get-lint-rules/lint-rules-structured-content.codegen.js +20 -12
- package/dist/esm/tools/get-all-components/components.codegen.js +2 -2
- package/dist/esm/tools/get-atlaskit-components/atlaskit-components.codegen.js +2 -2
- package/dist/esm/tools/get-atlaskit-hooks/atlaskit-hooks.codegen.js +282 -82
- package/dist/esm/tools/get-atlaskit-utilities/atlaskit-utilities.codegen.js +2 -8386
- package/dist/esm/tools/get-lint-rules/lint-rules-structured-content.codegen.js +20 -12
- package/dist/types/tools/get-all-components/components.codegen.d.ts +1 -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 +1 -1
- package/dist/types/tools/get-atlaskit-utilities/atlaskit-utilities.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/types.d.ts +1 -1
- package/package.json +2 -2
|
@@ -9,7 +9,7 @@ exports.lintRulesMcpStructuredContent = void 0;
|
|
|
9
9
|
*
|
|
10
10
|
* Structured content for MCP (JSON) for ESLint rule docs from constellation.
|
|
11
11
|
*
|
|
12
|
-
* @codegen <<SignedSource::
|
|
12
|
+
* @codegen <<SignedSource::519a4af34d9d3f477d07bad55b5fde80>>
|
|
13
13
|
* @codegenCommand yarn build structured-docs
|
|
14
14
|
*/
|
|
15
15
|
/* eslint-disable no-template-curly-in-string */
|
|
@@ -43,7 +43,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
43
43
|
ruleName: 'ensure-icon-color',
|
|
44
44
|
description: 'In an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,'
|
|
45
45
|
}, {
|
|
46
|
-
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\\
|
|
46
|
+
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/box';\\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/box';\\nimport { cssMap } from '@atlaskit/css';\\nimport { token } from '@atlaskit/tokens';\\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\\nUse the component's built-in styling props when no style override is needed.\\n\\n```tsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\n\\n<Box padding=\\\"space.100\\\" backgroundColor=\\\"color.background.neutral\\\" />;\\n```\\n\"}",
|
|
47
47
|
ruleName: 'ensure-proper-xcss-usage',
|
|
48
48
|
description: 'This ESLint rule enforces proper usage of the `xcss` prop with compiled Primitives from'
|
|
49
49
|
}, {
|
|
@@ -55,7 +55,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
55
55
|
ruleName: 'icon-label',
|
|
56
56
|
description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
|
|
57
57
|
}, {
|
|
58
|
-
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/expand-motion-shorthand/usage\\">expand-motion-shorthand</a> | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens. | | Yes | |\\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-css-map-scoped/usage\\">no-css-map-scoped</a> | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface. | 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-modal-label/usage\\">no-modal-label</a> | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers. | Yes | | |\\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() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions. | | | |\\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. | | | |\\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-modal-title/usage\\">use-modal-title</a> | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog. | 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-pressable-motion/usage\\">use-pressable-motion</a> | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles. | | | 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"}',
|
|
58
|
+
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 afm 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/expand-motion-shorthand/usage\\">expand-motion-shorthand</a> | Expands `transition` and `animation` CSS shorthand properties into their individual sub-properties, so individual values can be replaced with motion tokens. | | Yes | |\\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-css-map-scoped/usage\\">no-css-map-scoped</a> | Disallows usage of the experimental `cssMapScoped` API from `@compiled/react`. This API is internal and is not part of the public Compiled CSS-in-JS interface. | 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-icon-button-label/usage\\">no-empty-icon-button-label</a> | Ensures icon-only Atlassian Design System buttons do not have an empty accessible name. | 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-modal-label/usage\\">no-modal-label</a> | Disallows usage of the `label` prop on Atlassian Design System modal dialog and modal entry-point triggers. | Yes | | |\\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() and toMatchInlineSnapshot() in unit tests. Snapshot assertions should be replaced with explicit assertions. | | | |\\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. | | | |\\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-modal-title/usage\\">use-modal-title</a> | Encourages makers to include `ModalTitle` within `ModalHeader` when using Atlassian Design System modal dialog. | 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-pressable-motion/usage\\">use-pressable-motion</a> | Suggests semantic motion tokens when Pressable or native buttons change interactive colours through local static styles. | | | 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"}',
|
|
59
59
|
ruleName: 'index',
|
|
60
60
|
description: '---'
|
|
61
61
|
}, {
|
|
@@ -107,9 +107,13 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
107
107
|
ruleName: 'no-direct-use-of-web-platform-drag-and-drop',
|
|
108
108
|
description: 'Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.'
|
|
109
109
|
}, {
|
|
110
|
-
content: "{\"ruleName\":\"no-emotion-primitives\",\"description\":\"This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\",\"content\":\"# no-emotion-primitives\\n\\nThis rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\\ncounterparts from `@atlaskit/primitives/compiled`. This helps ensure better performance and\\nconsistency across the codebase.\\n\\n## Examples\\n\\nThis rule marks code as violations when it uses the Emotion Primitives import path.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives';\\nimport { Stack } from '@atlaskit/primitives';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives/compiled';\\nimport { Stack } from '@atlaskit/primitives/compiled';\\n```\\n\\nThe rule will detect any imports from `@atlaskit/primitives` and suggest replacing them with the\\
|
|
110
|
+
content: "{\"ruleName\":\"no-emotion-primitives\",\"description\":\"This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\",\"content\":\"# no-emotion-primitives\\n\\nThis rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled\\ncounterparts from `@atlaskit/primitives/compiled`. This helps ensure better performance and\\nconsistency across the codebase.\\n\\n## Examples\\n\\nThis rule marks code as violations when it uses the Emotion Primitives import path.\\n\\n### Incorrect\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives';\\nimport { Stack } from '@atlaskit/primitives';\\n```\\n\\n### Correct\\n\\n```jsx\\nimport { Box } from '@atlaskit/primitives/compiled/box';\\nimport { Stack } from '@atlaskit/primitives/compiled/stack';\\n```\\n\\nThe rule will detect any imports from `@atlaskit/primitives` and suggest replacing them with the\\ndedicated compiled entrypoint. Root component and prop-type imports are split into dedicated\\nimports; legacy styling APIs, namespace imports, and bindings without a safe equivalent require\\nmanual migration.\\n\\n## Options\\n\\n`autofix`: When enabled, the rule will automatically fix imports to use the Compiled entrypoint\\ninstead of just warning. Defaults to `false`.\\n\\n## Configuration\\n\\nBasic usage (warnings only):\\n\\n```js\\n{\\n '@atlaskit/design-system/use-compiled-primitives': 'warn'\\n}\\n```\\n\\nWith auto-fixing enabled:\\n\\n```js\\n{\\n '@atlaskit/design-system/use-compiled-primitives': ['warn', { autofix: true }]\\n}\\n```\\n\"}",
|
|
111
111
|
ruleName: 'no-emotion-primitives',
|
|
112
112
|
description: 'This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled'
|
|
113
|
+
}, {
|
|
114
|
+
content: '{"ruleName":"no-empty-icon-button-label","description":"Ensures that icon-only Atlassian Design System buttons do not have an empty accessible name.","content":"# no-empty-icon-button-label\\n\\nEnsures that icon-only Atlassian Design System buttons do not have an empty accessible name.\\n\\n`IconButton` and `LinkIconButton` render no visible text, so the `label` prop is the accessible name\\navailable to screen reader users. TypeScript requires the prop, but it still permits empty values.\\nThis rule checks that the label is non-empty.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CrossIcon} label=\\"\\" onClick={onClose} />;\\n```\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CopyIcon} label=\\" \\" />;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={CrossIcon} label=\\"Close\\" onClick={onClose} />;\\n```\\n\\n```tsx\\nimport IconButton from \'@atlaskit/button/icon/button\';\\n\\n<IconButton icon={ShowMoreIcon} label={formatMessage(messages.moreActions)} />;\\n```\\n\\n## Scope\\n\\nThe rule checks the `label` prop on `IconButton` and `LinkIconButton` imported from:\\n\\n- `@atlaskit/button/icon/button`\\n- `@atlaskit/button/icon/link`\\n- `@atlaskit/button/new`\\n\\nIt reports statically empty values, including empty or whitespace-only strings, empty template\\nliterals, `null`, `undefined`, and `false`. Dynamic values such as variables, function calls,\\nelements, and interpolated templates are not evaluated because their runtime value cannot be\\ndetermined safely by a static rule.\\n"}',
|
|
115
|
+
ruleName: 'no-empty-icon-button-label',
|
|
116
|
+
description: 'Ensures that icon-only Atlassian Design System buttons do not have an empty accessible name.'
|
|
113
117
|
}, {
|
|
114
118
|
content: '{"ruleName":"no-empty-styled-expression","description":"Disallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS","content":"# no-empty-styled-expression\\n\\nDisallows/discourages passing empty arguments to any `styled` expression when using a CSS-in-JS\\nlibrary, including `@atlaskit/css`, `@compiled/react`, Emotion, and `styled-components`.\\n\\nIf Compiled is used in the file, passing an empty object or no object at all causes Compiled to\\nbuild extra `div/span` elements, as opposed to simply using a `div`. This leads to reduced\\nperformance and is greatly discouraged. If a wrapper is necessary, opt to use a `div` or wrap it in\\nthe empty React fragment `<> <YourComponentHere></YourComponentHere> </>`.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nconst EmptyStyledExpression = styled.div();\\n\\nconst EmptyStyledExpressionArgument = styled.div({});\\n\\nconst EmptyStyledExpressionArgument = styled.div([]);\\n```\\n\\n### Correct\\n\\n```tsx\\nconst Wrapper = styled.div({\\n\\tbackgroundColor: \'red\',\\n\\tMyComponent: {\\n\\t\\tbackgroundColor: \'green\',\\n\\t},\\n});\\n```\\n\\n## What to do instead?\\n\\n### Use elements directly\\n\\n```diff\\n- const Wrapper = styled.div({});\\n\\n function App() {\\n- return <Wrapper>hello world</Wrapper>;\\n+ return <div>hello world</div>;\\n }\\n```\\n\\n### Use a React fragment\\n\\n```diff\\n- const Wrapper = styled.div({});\\n\\n function App() {\\n- return <Wrapper>hello world</Wrapper>;\\n+ return <>hello world</>;\\n }\\n```\\n\\n## Options\\n\\n### importSources\\n\\nBy default, this rule will check `styled` usages from:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nTo change this list of libraries, you can define a custom set of `importSources`, which accepts an\\narray of package names (strings).\\n\\n```tsx\\n// [{ importSources: [\'other-lib\'] }]\\n\\nimport { styled } from \'other-lib\';\\n\\n// Invalid!\\nexport const Component = styled.div({});\\n```\\n"}',
|
|
115
119
|
ruleName: 'no-empty-styled-expression',
|
|
@@ -123,11 +127,11 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
123
127
|
ruleName: 'no-exported-keyframes',
|
|
124
128
|
description: 'Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including'
|
|
125
129
|
}, {
|
|
126
|
-
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
|
|
130
|
+
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/link\';\\n\\n<LinkButton href=\\"/\\">Hello, World!</LinkButton>;\\n```\\n"}',
|
|
127
131
|
ruleName: 'no-html-anchor',
|
|
128
132
|
description: "Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that"
|
|
129
133
|
}, {
|
|
130
|
-
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/
|
|
134
|
+
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/default/button\';\\n\\n<Button>Hello, World!</Button>;\\n```\\n"}',
|
|
131
135
|
ruleName: 'no-html-button',
|
|
132
136
|
description: "Don't use native HTML buttons. The Atlassian Design System provides ready-made button components"
|
|
133
137
|
}, {
|
|
@@ -167,7 +171,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
167
171
|
ruleName: 'no-html-textarea',
|
|
168
172
|
description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
|
|
169
173
|
}, {
|
|
170
|
-
content: '{"ruleName":"no-icon-spacing-prop","description":"Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and","content":"# no-icon-spacing-prop\\n\\nDisallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and\\n`@atlaskit/icon-lab/core`.\\n\\nThe `spacing` prop is deprecated. Wrap the icon in a `Flex` from `@atlaskit/primitives/compiled`\\nwith `cssMap` padding from `@atlaskit/css` instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n// ❌ Using deprecated spacing prop\\n<AddIcon label=\\"Add\\" spacing=\\"spacious\\" />\\n<AddIcon label=\\"Add\\" spacing=\\"compact\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\n/** @jsxRuntime classic */\\n/** @jsx jsx */\\nimport { cssMap, jsx } from \'@atlaskit/css\';\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { Flex } from \'@atlaskit/primitives/compiled\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst iconSpacingStyles = cssMap({\\n space050: {\\n paddingBlock: token(\'space.050\'),\\n paddingInline: token(\'space.050\'),\\n },\\n});\\n\\n// ✅ Using Flex with cssMap for spacing\\n<Flex xcss={iconSpacingStyles.space050}>\\n <AddIcon label=\\"Add\\" />\\n</Flex>\\n\\n// ✅ No spacing needed (spacing=\\"none\\")\\n<AddIcon label=\\"Add\\" />\\n```\\n\\n## Migration\\n\\nUse the `next-icon-spacing-to-flex-primitive` codemod via `npx @atlaskit/codemod-cli` to migrate\\nautomatically, or use the 💡 IDE quick-fix suggestion from this ESLint rule.\\n\\nSpacing token reference:\\n\\n| `spacing` value | Icon size | Token | Result |\\n| --------------- | ------------- | ----------- | --------------------------- |\\n| `spacious` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `compact` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `spacious` | small (12px) | `space.075` | 6px padding → 24px total |\\n| `compact` | small (12px) | `space.025` | 2px padding → 16px total |\\n| `none` | any | — | Remove prop, no Flex needed |\\n"}',
|
|
174
|
+
content: '{"ruleName":"no-icon-spacing-prop","description":"Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and","content":"# no-icon-spacing-prop\\n\\nDisallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and\\n`@atlaskit/icon-lab/core`.\\n\\nThe `spacing` prop is deprecated. Wrap the icon in a `Flex` from `@atlaskit/primitives/compiled`\\nwith `cssMap` padding from `@atlaskit/css` instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\n\\n// ❌ Using deprecated spacing prop\\n<AddIcon label=\\"Add\\" spacing=\\"spacious\\" />\\n<AddIcon label=\\"Add\\" spacing=\\"compact\\" />\\n```\\n\\n### Correct\\n\\n```tsx\\n/** @jsxRuntime classic */\\n/** @jsx jsx */\\nimport { cssMap, jsx } from \'@atlaskit/css\';\\nimport AddIcon from \'@atlaskit/icon/core/add\';\\nimport { Flex } from \'@atlaskit/primitives/compiled/flex\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst iconSpacingStyles = cssMap({\\n space050: {\\n paddingBlock: token(\'space.050\'),\\n paddingInline: token(\'space.050\'),\\n },\\n});\\n\\n// ✅ Using Flex with cssMap for spacing\\n<Flex xcss={iconSpacingStyles.space050}>\\n <AddIcon label=\\"Add\\" />\\n</Flex>\\n\\n// ✅ No spacing needed (spacing=\\"none\\")\\n<AddIcon label=\\"Add\\" />\\n```\\n\\n## Migration\\n\\nUse the `next-icon-spacing-to-flex-primitive` codemod via `npx @atlaskit/codemod-cli` to migrate\\nautomatically, or use the 💡 IDE quick-fix suggestion from this ESLint rule.\\n\\nSpacing token reference:\\n\\n| `spacing` value | Icon size | Token | Result |\\n| --------------- | ------------- | ----------- | --------------------------- |\\n| `spacious` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `compact` | medium (16px) | `space.050` | 4px padding → 24px total |\\n| `spacious` | small (12px) | `space.075` | 6px padding → 24px total |\\n| `compact` | small (12px) | `space.025` | 2px padding → 16px total |\\n| `none` | any | — | Remove prop, no Flex needed |\\n"}',
|
|
171
175
|
ruleName: 'no-icon-spacing-prop',
|
|
172
176
|
description: 'Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and'
|
|
173
177
|
}, {
|
|
@@ -183,7 +187,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
183
187
|
ruleName: 'no-margin',
|
|
184
188
|
description: "Using margins to define spacing results in components that can't be readily reused in other contexts"
|
|
185
189
|
}, {
|
|
186
|
-
content: '{"ruleName":"no-modal-label","description":"Do not use the `label` prop on the Atlassian Design System modal dialog default import.","content":"# no-modal-label\\n\\nDo not use the `label` prop on the Atlassian Design System modal dialog default import.\\n\\nUse `ModalTitle` within `ModalHeader`, or another element with `titleId` applied from `useModal()`\\nto provide a clear, visible title for modal content. This content will be propagated to assistive\\ntechnology as well as serving visual users. It is very rare that a dialog title should differ\\nbetween the visible text and that shown to users of assistive technology.\\n\\n## Examples\\n\\nThis rule warns when `label` is used on:\\n\\n- the default import from `@atlaskit/modal-dialog` or `@atlaskit/modal-dialog/modal-dialog`\\n- `modalProps.label` on modal entry-point triggers from `@atlassian/entry-points`\\n\\n### Incorrect\\n\\n```tsx\\nimport ModalDialog from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog label=\\"Create issue\\" />;\\n```\\n\\n```tsx\\nimport Modal from \'@atlaskit/modal-dialog/modal-dialog\';\\n\\n<Modal label={modalLabel} />;\\n```\\n\\n```tsx\\nimport { ModalTrigger } from \'@atlassian/entry-points/modal-trigger\';\\n\\n<ModalTrigger entryPoint={entryPoint} modalProps={{ label: \'Create issue\' }}>\\n\\t{({ ref }) => <button ref={ref}
|
|
190
|
+
content: '{"ruleName":"no-modal-label","description":"Do not use the `label` prop on the Atlassian Design System modal dialog default import.","content":"# no-modal-label\\n\\nDo not use the `label` prop on the Atlassian Design System modal dialog default import.\\n\\nUse `ModalTitle` within `ModalHeader`, or another element with `titleId` applied from `useModal()`\\nto provide a clear, visible title for modal content. This content will be propagated to assistive\\ntechnology as well as serving visual users. It is very rare that a dialog title should differ\\nbetween the visible text and that shown to users of assistive technology.\\n\\n## Examples\\n\\nThis rule warns when `label` is used on:\\n\\n- the default import from `@atlaskit/modal-dialog` or `@atlaskit/modal-dialog/modal-dialog`\\n- `modalProps.label` on modal entry-point triggers from `@atlassian/entry-points`\\n\\n### Incorrect\\n\\n```tsx\\nimport ModalDialog from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog label=\\"Create issue\\" />;\\n```\\n\\n```tsx\\nimport Modal from \'@atlaskit/modal-dialog/modal-dialog\';\\n\\n<Modal label={modalLabel} />;\\n```\\n\\n```tsx\\nimport { ModalTrigger } from \'@atlassian/entry-points/modal-trigger\';\\n\\n<ModalTrigger entryPoint={entryPoint} modalProps={{ label: \'Create issue\' }}>\\n\\t{({ ref, ...triggerProps }) => (\\n\\t\\t<button ref={ref} {...triggerProps}>\\n\\t\\t\\tOpen\\n\\t\\t</button>\\n\\t)}\\n</ModalTrigger>;\\n```\\n\\n### Correct\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle } from \'@atlaskit/modal-dialog\';\\n\\n<ModalDialog>\\n\\t<ModalHeader>\\n\\t\\t<ModalTitle>Create issue</ModalTitle>\\n\\t</ModalHeader>\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport ModalDialog, { ModalHeader, ModalTitle, useModal } from \'@atlaskit/modal-dialog\';\\nimport Heading from \'@atlaskit/heading\';\\n\\nconst CustomHeader = () => {\\n\\tconst { titleId } = useModal();\\n\\n\\treturn (\\n\\t\\t<ModalHeader>\\n\\t\\t\\t<Heading id={titleId}>Create issue</Heading>\\n\\t\\t</ModalHeader>\\n\\t);\\n};\\n\\n<ModalDialog>\\n\\t<CustomHeader />\\n</ModalDialog>;\\n```\\n\\n```tsx\\nimport { ModalIconButtonTrigger } from \'@atlassian/entry-points/modal-icon-button-trigger\';\\n\\n// Top-level `label` on icon button triggers is the trigger button name — allowed.\\n<ModalIconButtonTrigger entryPoint={entryPoint} label=\\"Create issue\\" icon={AddIcon} />;\\n```\\n"}',
|
|
187
191
|
ruleName: 'no-modal-label',
|
|
188
192
|
description: 'Do not use the `label` prop on the Atlassian Design System modal dialog default import.'
|
|
189
193
|
}, {
|
|
@@ -227,7 +231,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
227
231
|
ruleName: 'no-unsafe-inline-snapshot',
|
|
228
232
|
description: 'This rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming'
|
|
229
233
|
}, {
|
|
230
|
-
content: '{"ruleName":"no-unsafe-style-overrides","description":"Unsafe style overrides cause friction and incidents when internals of the component you\'re","content":"# no-unsafe-style-overrides\\n\\nUnsafe style overrides cause friction and incidents when internals of the component you\'re\\noverriding change. They\'re inherently unbounded and everything is API that can change at a moments\\nnotice.\\n\\nInstead, lean on composition, primitive components, and safe style overrides via the `xcss` prop\\nwhere component authors declare what styles they want to support.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Button from \'@atlaskit/button\';\\n\\n<Button css={{ fontWeight: 500 }}>foo</Button>;\\n ^^^\\n```\\n\\n```tsx\\nimport { LinkItem } from \'@atlaskit/menu\';\\n\\n<LinkItem cssFn={() => ({ \'> div > div\': { padding: 2 } })} />;\\n ^^^^^\\n```\\n\\n```tsx\\nimport { ButtonItem } from \'@atlaskit/side-navigation\';\\n\\n<ButtonItem className=\\"text-neutral-400\\" />;\\n ^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<Button>\\n\\t<strong>foo</strong>\\n</Button>\\n```\\n\\n```tsx\\nconst styles = css({ padding: \'var(--ds-space-100)\' });\\n\\n<Anchor xcss={styles}>\\n\\t<Stack>\\n\\t\\t<Inline />\\n\\t\\t<Inline />\\n\\t</Stack>\\n</Anchor>;\\n```\\n"}',
|
|
234
|
+
content: '{"ruleName":"no-unsafe-style-overrides","description":"Unsafe style overrides cause friction and incidents when internals of the component you\'re","content":"# no-unsafe-style-overrides\\n\\nUnsafe style overrides cause friction and incidents when internals of the component you\'re\\noverriding change. They\'re inherently unbounded and everything is API that can change at a moments\\nnotice.\\n\\nInstead, lean on composition, primitive components, and safe style overrides via the `xcss` prop\\nwhere component authors declare what styles they want to support.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport Button from \'@atlaskit/button/default/button\';\\n\\n<Button css={{ fontWeight: 500 }}>foo</Button>;\\n ^^^\\n```\\n\\n```tsx\\nimport { LinkItem } from \'@atlaskit/menu\';\\n\\n<LinkItem cssFn={() => ({ \'> div > div\': { padding: 2 } })} />;\\n ^^^^^\\n```\\n\\n```tsx\\nimport { ButtonItem } from \'@atlaskit/side-navigation\';\\n\\n<ButtonItem className=\\"text-neutral-400\\" />;\\n ^^^^^^^^^\\n```\\n\\n### Correct\\n\\n```tsx\\n<Button>\\n\\t<strong>foo</strong>\\n</Button>\\n```\\n\\n```tsx\\nconst styles = css({ padding: \'var(--ds-space-100)\' });\\n\\n<Anchor xcss={styles}>\\n\\t<Stack>\\n\\t\\t<Inline />\\n\\t\\t<Inline />\\n\\t</Stack>\\n</Anchor>;\\n```\\n"}',
|
|
231
235
|
ruleName: 'no-unsafe-style-overrides',
|
|
232
236
|
description: "Unsafe style overrides cause friction and incidents when internals of the component you're"
|
|
233
237
|
}, {
|
|
@@ -279,7 +283,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
279
283
|
ruleName: 'use-heading',
|
|
280
284
|
description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
|
|
281
285
|
}, {
|
|
282
|
-
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"}',
|
|
286
|
+
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/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled/text\';\\nimport SectionMessage from \'@atlaskit/section-message/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/heading\';\\nimport { Text } from \'@atlaskit/primitives/compiled/text\';\\nimport SectionMessage from \'@atlaskit/section-message/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"}',
|
|
283
287
|
ruleName: 'use-heading-level-in-section-message',
|
|
284
288
|
description: 'The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs'
|
|
285
289
|
}, {
|
|
@@ -319,7 +323,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
319
323
|
ruleName: 'use-popup-label',
|
|
320
324
|
description: 'Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon'
|
|
321
325
|
}, {
|
|
322
|
-
content: "{\"ruleName\":\"use-pressable-motion\",\"description\":\"Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`\",\"content\":\"# use-pressable-motion\\n\\nEncourages semantic motion tokens when local static styles change interactive colours on `Pressable`\\nor native `<button>` elements.\\n\\nIt supports Pressable imports from `@atlaskit/primitives/compiled`,\\n`@atlaskit/primitives/compiled/pressable`, and `@atlaskit/primitives/pressable`. It recognises\\nstyles created with `css`, `cssMap`, and `xcss`. Use `&:hover` and `&:active` with `css` or\\n`cssMap`; use `:hover` and `:active` with `xcss`. Pass styles to Pressable with `xcss` and to native\\nbuttons with `css`.\\n\\nFor button motion, the rule detects `backgroundColor` and colour-only `background` changes. For\\nlist-item motion, it also detects `color`, `borderColor`, and `textDecorationColor`. It offers\\neditor suggestions for button and list-item motion; choose the family that matches the surface's\\nsemantics. Suggestions add `motion.button.*` or `motion.listitem.*` tokens for hover and pressed\\nstates, but the rule does not autofix code.\\n\\nThe rule does not infer semantics, follow imported or dynamic styles, or overwrite an existing\\n`transition`.\\n\\n## Pressable example\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { Pressable } from '@atlaskit/primitives/compiled';\\nimport {
|
|
326
|
+
content: "{\"ruleName\":\"use-pressable-motion\",\"description\":\"Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`\",\"content\":\"# use-pressable-motion\\n\\nEncourages semantic motion tokens when local static styles change interactive colours on `Pressable`\\nor native `<button>` elements.\\n\\nIt supports Pressable imports from `@atlaskit/primitives/compiled`,\\n`@atlaskit/primitives/compiled/pressable`, and `@atlaskit/primitives/pressable`. It recognises\\nstyles created with `css`, `cssMap`, and `xcss`. Use `&:hover` and `&:active` with `css` or\\n`cssMap`; use `:hover` and `:active` with `xcss`. Pass styles to Pressable with `xcss` and to native\\nbuttons with `css`.\\n\\nFor button motion, the rule detects `backgroundColor` and colour-only `background` changes. For\\nlist-item motion, it also detects `color`, `borderColor`, and `textDecorationColor`. It offers\\neditor suggestions for button and list-item motion; choose the family that matches the surface's\\nsemantics. Suggestions add `motion.button.*` or `motion.listitem.*` tokens for hover and pressed\\nstates, but the rule does not autofix code. The rule also accepts `motion.tab` for tab label colour\\nchanges; it does not cover background, border, or text-decoration colour changes.\\n\\nThe rule does not infer semantics, follow imported or dynamic styles, or overwrite an existing\\n`transition`.\\n\\n## Pressable example\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { Pressable } from '@atlaskit/primitives/compiled/pressable';\\nimport { cssMap } from '@atlaskit/css';\\n\\nconst styles = cssMap({\\n\\troot: {\\n\\t\\ttransition: token('motion.button.hovered'),\\n\\t\\t'&:hover': { backgroundColor: token('color.background.neutral.hovered') },\\n\\t\\t'&:active': {\\n\\t\\t\\tbackgroundColor: token('color.background.neutral.pressed'),\\n\\t\\t\\ttransition: token('motion.button.pressed'),\\n\\t\\t},\\n\\t},\\n});\\n\\n<Pressable xcss={styles.root} />;\\n```\\n\\n## Native button example\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst styles = css({\\n\\ttransition: token('motion.button.hovered'),\\n\\t'&:hover': { backgroundColor: token('color.background.neutral.hovered') },\\n\\t'&:active': {\\n\\t\\tbackgroundColor: token('color.background.neutral.pressed'),\\n\\t\\ttransition: token('motion.button.pressed'),\\n\\t},\\n});\\n\\n<button css={styles}>Save</button>;\\n```\\n\\nFor custom button guidance, see the\\n[Pressable motion documentation](https://atlassian.design/components/primitives/pressable/usage#apply-motion-to-pressable).\\n\"}",
|
|
323
327
|
ruleName: 'use-pressable-motion',
|
|
324
328
|
description: 'Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`'
|
|
325
329
|
}, {
|
|
@@ -383,7 +387,7 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
383
387
|
ruleName: 'convert-props-syntax',
|
|
384
388
|
description: 'Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,'
|
|
385
389
|
}, {
|
|
386
|
-
content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth,\\n\\t\\t\\t\'--my-nested-width\': width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
|
|
390
|
+
content: '{"ruleName":"enforce-style-prop","description":"Blocks providing static values through the `style` prop, which should only be used to provide","content":"# enforce-style-prop\\n\\nBlocks providing static values through the `style` prop, which should only be used to provide\\ndynamic values (values unknown at build time).\\n\\nUse the `css` prop for providing static values instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { token } from \'@atlaskit/tokens\';\\n\\nconst Component = () => (\\n\\t<div\\n\\t\\tstyle={{\\n\\t\\t\\tmargin: 0,\\n\\t\\t\\tcolor: token(\'color.text.danger\'),\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n\\n### Correct\\n\\nAlthough `token` is a function call, it is statically resolvable by Compiled and should not be used\\nin the `style` prop.\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\nimport { token } from \'@atlaskit/tokens\';\\n\\ntype Props = { width: string };\\n\\nconst baseStyles = css({ margin: 0, color: token(\'color.text.danger\') });\\n\\nconst Component = ({ width }: Props) => (\\n\\t<div\\n\\t\\tcss={baseStyles}\\n\\t\\tstyle={{\\n\\t\\t\\twidth: props.width,\\n\\t\\t\\t\'--my-nested-width\': props.width,\\n\\t\\t}}\\n\\t/>\\n);\\n```\\n"}',
|
|
387
391
|
ruleName: 'enforce-style-prop',
|
|
388
392
|
description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
|
|
389
393
|
}, {
|
|
@@ -394,6 +398,10 @@ var lintRulesMcpStructuredContent = exports.lintRulesMcpStructuredContent = [{
|
|
|
394
398
|
content: '{"ruleName":"no-array-arguments","description":"Blocks passing array arguments to style declaration functions.","content":"# no-array-arguments\\n\\nBlocks passing array arguments to style declaration functions.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, { height: 100 }]);\\n```\\n\\n```tsx\\nimport { styled } from \'@compiled/react\';\\n\\nconst styles = css([{ width: 100 }, ...items]);\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, { height: 100 });\\n```\\n\\n```tsx\\nimport { css } from \'@compiled/react\';\\n\\nconst styles = css({ width: 100 }, ...items);\\n```\\n\\n## Options\\n\\n### `importSources: string[]`\\n\\nBy default, this rule will check styles using:\\n\\n- `@atlaskit/css`\\n- `@atlaskit/primitives`\\n- `@compiled/react`\\n- `@emotion/react`\\n- `@emotion/core`\\n- `@emotion/styled`\\n- `styled-components`\\n\\nOverride this list with the `importSources` option, which accepts an array of package names.\\n"}',
|
|
395
399
|
ruleName: 'no-array-arguments',
|
|
396
400
|
description: 'Blocks passing array arguments to style declaration functions.'
|
|
401
|
+
}, {
|
|
402
|
+
content: "{\"ruleName\":\"no-atlaskit-theme\",\"description\":\"Disallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,\",\"content\":\"# no-atlaskit-theme\\n\\nDisallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,\\nside-effect, and type imports.\\n\\n`@atlaskit/theme` is a legacy styling package. Use design tokens from `@atlaskit/tokens` and\\nAtlassian Design System components instead.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\nimport { colors } from '@atlaskit/theme';\\nimport { gridSize } from '@atlaskit/theme/constants';\\nimport Theme from '@atlaskit/theme/theme';\\nimport type { ThemeProp } from '@atlaskit/theme/create-theme';\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { token } from '@atlaskit/tokens';\\nimport { css } from '@atlaskit/css';\\n\\nconst styles = css({\\n\\tcolor: token('color.text'),\\n\\tpaddingTop: token('space.100'),\\n\\tpaddingRight: token('space.100'),\\n\\tpaddingBottom: token('space.100'),\\n\\tpaddingLeft: token('space.100'),\\n});\\n```\\n\"}",
|
|
403
|
+
ruleName: 'no-atlaskit-theme',
|
|
404
|
+
description: 'Disallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,'
|
|
397
405
|
}, {
|
|
398
406
|
content: "{\"ruleName\":\"no-classname-prop\",\"description\":\"Blocks the `className` prop, which encourages unsafe global styles and cannot be statically\",\"content\":\"# no-classname-prop\\n\\nBlocks the `className` prop, which encourages unsafe global styles and cannot be statically\\nresolved.\\n\\nUse the `css` prop for styling, with props for configuration and `xcss` for bounded overrides.\\n\\n## Examples\\n\\n### Incorrect\\n\\n```tsx\\n<div className=\\\"my-class\\\">\\n```\\n\\n```tsx\\n<MyComponent className={isDisabled ? 'disabled' : undefined} />\\n```\\n\\n### Correct\\n\\n```tsx\\nimport { css } from '@compiled/react';\\nimport { token } from '@atlaskit/tokens';\\n\\nconst myStyles = css({ padding: token('space.100') });\\n\\n<div css={myStyles} />;\\n```\\n\\n```tsx\\n<MyComponent isDisabled={isDisabled} />\\n```\\n\\n```tsx\\nimport { Checkbox } from '@atlaskit/checkbox';\\n\\n<Checkbox xcss={{ alignItems: 'center' }} />;\\n```\\n\\nPass-through `props.xcss` are allowed, expecting this to be typed, refer to\\n[@atlaskit/css](https://atlassian.design/components/css/overview#building-reusable-components)\\n\\n```tsx\\nimport { StrictXCSSProp } from '@atlaskit/css';\\n\\nconst Component = (props: { xcss?: StrictXCSSProp<'color', never> }) => (\\n\\t<div className={props.xcss} />\\n);\\n```\\n\\n## FAQ\\n\\n### What if I'm using `className` to target elements with JavaScript?\\n\\nThere are some cases where a selector is required to integrate with a 3rd party library, such as\\nlegacy code using jQuery.\\n\\nUse a `ref` if possible. Otherwise, if you _must_ have a selector, use a `data-*` attribute that\\ngives enough context and is unique enough, for example `data-editor-table-target=\\\"true\\\"`.\\n\"}",
|
|
399
407
|
ruleName: 'no-classname-prop',
|