@atlaskit/ads-mcp 1.11.0 → 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 +16 -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-guidelines/guidelines-structured-content.codegen.js +8 -6
- 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-guidelines/guidelines-structured-content.codegen.js +8 -6
- 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-guidelines/guidelines-structured-content.codegen.js +8 -6
- 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-guidelines/guidelines-structured-content.codegen.d.ts +2 -2
- 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
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
|
|
3
3
|
*
|
|
4
|
-
* Structured content for
|
|
4
|
+
* Structured content for authored agent guidelines and design-system-docs foundations content.
|
|
5
5
|
*
|
|
6
|
-
* @codegen <<SignedSource::
|
|
6
|
+
* @codegen <<SignedSource::425b1c773867acafd317f203d71685ac>>
|
|
7
7
|
* @codegenCommand yarn build structured-docs
|
|
8
8
|
*/
|
|
9
9
|
|
|
@@ -14,11 +14,13 @@ export const guidelinesStructuredContent = [{
|
|
|
14
14
|
content: '## About border tokens\n\nBorders define boundaries and add emphasis using a combination of width and color tokens. Width\ntokens control a border\'s prominence, while color tokens provide its meaning. Pair these tokens to\ncommunicate an element’s purpose, such as a simple divider, or a visible interactive state.\n\n## Border width tokens and usage guidelines\n\nUse border width tokens to provide a clear and intentional way to apply width across different\nstates and use cases.\n\n<Stack space="space.200">\n\t<BorderTable />\n\t<Text>* Token values are subject to change and should be used as an indication only.</Text>\n</Stack>\n\n### Default border width\n\nThe `border.width` token is the default value for all standard borders and dividers. It establishes\nthe baseline thickness for components that require a subtle, defining outline, ensuring they are\nvisually distinct.\n\n\n\n### Selected states\n\nUse the `border.width.selected` token to show users which option they’ve selected from a group.\nApply this token to highlight a user\'s choice, such as an active tab or a chosen item in a list.\n\n\n\n### Focus ring\n\nUse the `border.width.focused` token to define the thickness of the focus ring. Apply this token to\nshow keyboard users where they are on the page. When users press Tab to move through an interface,\nthe token highlights the active element they can interact with. This helps make your interface\naccessible to everyone.\n\n\n\n## Border color and width pairing\n\nCreate borders by pairing width and color tokens. Choose:\n\n- width tokens to control how thick and visible your border appears\n- color tokens to show what the border means, like its state or importance\n\nAlways pair the right width token with the right color token to keep your interface consistent and\nclear for users.\n\n\n\n### Visual indicator for selected state\n\nAlways pair the `border.width.selected` token with the `color.border.selected` token, to show users\nwhich items they’ve selected. Use this combination to consistently highlight selected elements, like\nan active tab or a chosen list item, throughout the interface.\n\n\n\n### Required pairing for focus state\n\nAlways pair the `border.width.focused` token with the `color.border.focused` token to define the\nthickness of the focus ring.\n\nUse this combination to consistently highlight elements that receive keyboard focus, so users always\nknow which element is active and ready for interaction.\n\nTo ensure consistency and accessibility when adding a focused state to your components, follow these\nstandards:\n\n- **Code:** Use the\n [Focusable component](https://atlassian.design/components/primitives/focusable/examples) to wrap\n all interactive elements requiring focus.\n- **Design:** Use the\n [Focus Ring component (Atlassians only)](https://go.atlassian.com/focus-ring-component) from the\n Atlassian Design System Figma library.\n\n\n\nIt’s important to consider contrast when using different accent colors in your UI. For subtle\nbackgrounds, pair them with an accent border to meet the 3:1 contrast requirement for accessibility.\n\n[More about accent colors](https://atlassian.design/foundations/color/accents#use-borders-for-more-contrast-around-subtle-backgrounds)\n\n',
|
|
15
15
|
keywords: ['border', 'stroke', 'outline', 'design tokens', 'visual hierarchy']
|
|
16
16
|
}, {
|
|
17
|
-
content:
|
|
18
|
-
|
|
17
|
+
content: "# Color\n\nUse color tokens to communicate intent, hierarchy, and interaction in Atlassian UI. Start with the\nexisting ADS component treatment; use these choices when styling custom UI or reviewing a token\nchoice.\n\n## Choose the token family\n\n1. Identify what the color communicates. Use a semantic role for status, validation, actions, or\n discovery. Use an accent when the hue identifies a category and could change without changing its\n meaning. See the Color accents guidance for hue and pairing choices.\n2. Choose the background emphasis that fits the intended hierarchy.\n3. Pair it with the text, icon, and border tokens for that role and emphasis.\n4. For interactive UI, apply the state to the element that owns the interaction. Preserve separate\n cues for persistent selection and keyboard focus.\n\nApply tokens with `token('color...')` from `@atlaskit/tokens`. Tokens resolve for light and dark\nthemes, so use their semantic names instead of copying palette values or hardcoded colors.\n\n## Read token names\n\nMost tokens follow `color.[property].[role].[emphasis].[state]`:\n\n- **Property** describes where the color is applied: `background`, `text`, `icon`, or `border`.\n- **Role** describes its intent: `brand`, `danger`, `warning`, `success`, `information`,\n `discovery`, `neutral`, `selected`, `focused`, `input`, or `accent.[hue]`.\n- **Emphasis** describes contrast against the default surface: `bold`, `bolder`, `boldest`,\n `subtle`, `subtler`, or `subtlest`.\n- **State** describes an interaction state such as `hovered` or `pressed`.\n\nAccent tokens place the hue after the role, for example `color.background.accent.blue.subtlest`.\nLook up exceptions such as `color.link`, `color.blanket`, `color.skeleton`, and `color.chart.*` in\nthe token catalog rather than extending the pattern.\n\n## Choose a semantic role\n\n| Role | Choose it for | Example use |\n| :------------- | :------------------------------------------------ | :---------------------------------- |\n| `danger` | Destructive actions, errors, or critical failures | Error message or destructive action |\n| `warning` | Caution, risk, or something that needs attention | Risk notice |\n| `success` | A successful, completed, or valid state | Completion message |\n| `information` | A passive informational message | Informational notice |\n| `brand` | Primary actions or product identity | Primary action |\n| `discovery` | Discovery, AI, or a new feature | New feature callout |\n| `neutral` | Base surfaces and neutral layout | Page or control surface |\n| `input` | Form field backgrounds and boundaries | Text field |\n| `selected` | A persistent current choice | Selected row or option |\n| `focused` | Keyboard focus indicator; border only | Focus ring |\n| `accent.[hue]` | Categories and labels whose hue is optional | User-chosen tag |\n\nKeep fixed meaning in the semantic role. For example, an error uses `danger` and a successful state\nuses `success`; an accent red or green is for a category whose color does not carry that meaning.\n\n## Pair semantic backgrounds and foregrounds\n\n| Background | Text and icon |\n| :------------------------------------------------------ | :------------------------------------------------------------ |\n| Semantic `*.bold` or `*.bolder` | `color.text.inverse` and `color.icon.inverse` |\n| `color.background.warning.bold` | `color.text.warning.inverse` and `color.icon.warning.inverse` |\n| Subtle, subtler, subtlest, or default semantic surfaces | Matching role text and icon, such as `color.text.danger` |\n\nUse the warning-specific inverse pair shown above on a bold warning background. Accent foreground\npairings are in the Color accents guidance.\n\n```tsx\n// Error banner\nbackgroundColor: token('color.background.danger.bold'),\ncolor: token('color.text.inverse'),\n\n// Category label whose hue carries no status meaning\nbackgroundColor: token('color.background.accent.red.bolder'),\ncolor: token('color.text.inverse'),\n```\n\n## Apply state to the interactive element\n\n### Form fields\n\nUse `color.background.input` for the field background, with `color.background.input.hovered` and\n`color.background.input.pressed` for those states. Use `color.border.input` for the field boundary.\nStart with the ADS form component’s treatment when one owns the control.\n\n### Selection and focus\n\nUse `color.background.selected`, `color.text.selected`, `color.icon.selected`, or\n`color.border.selected` for a persistent choice. Use `color.border.focused` for keyboard focus. When\nan element is both selected and focused, keep the selected treatment and add the focus indicator.\nDon’t use link, brand, or focused tokens to communicate selection. Pair selection color with another\ncue, such as a checkmark, underline, border, or shape change, so selection remains clear without\ncolor alone.\n\nApply `hovered` and `pressed` variants to the currently interactive element. Keep a selected item\nrecognizable during those temporary states. Icons do not have dedicated hovered or pressed color\ntokens; use a subtle neutral background such as `color.background.neutral.subtle.hovered` or\n`color.background.neutral.subtle.pressed` when the icon’s control needs a surface response.\n\n## Check the rendered result\n\nInspect the foreground, meaningful borders, and state changes against the final visible background\nin the themes the experience supports. For translucent colors, include the underlying surface when\nchecking contrast. Use `color.chart.*` for chart marks and product UI tokens for axes, labels, and\ngridlines.\n\n## Look up exact tokens\n\nSearch the ADS token registry when an identifier or pairing is uncertain:\n\n```bash\natlas ads search \"danger background\" --type token\natlas ads token color.background.danger.bold --json\n```\n\nIf the Atlas plugin is unavailable, use\n`npx @atlaskit/ads-cli search \"danger background\" --type token`.",
|
|
18
|
+
name: 'Color',
|
|
19
|
+
keywords: ['color', 'selected state colors', 'focus indicator colors', 'hovered and pressed states', 'contrast', 'palette', 'brand', 'design tokens', 'themes', 'input backgrounds', 'semantic statuses']
|
|
19
20
|
}, {
|
|
20
|
-
content:
|
|
21
|
-
|
|
21
|
+
content: "# Color accents\n\nUse accents for categories, projects, and labels when their hue can change without changing their\nmeaning. Choose a semantic color role for status, alerts, validation, primary actions, and discovery\ninstead; see the Color guidance.\n\nStart with the existing ADS component treatment for tags and labels. For custom UI, keep the\nbackground, text, and icon in the same accent hue family.\n\n**Available hues:** `blue`, `teal`, `green`, `lime`, `yellow`, `orange`, `red`, `magenta`, `purple`,\nand `gray`.\n\nPrefer another accent hue, such as orange, to yellow. Yellow accents can appear brown as their\nvalues adjust to meet contrast requirements.\n\n## Pair hue and emphasis\n\n| Background emphasis | Text and icon |\n| :---------------------- | :-------------------------------------------- |\n| `subtlest` or `subtler` | Matching accent `default` or `bolder` |\n| `subtle` | Matching accent `bolder` |\n| `bolder` | `color.text.inverse` and `color.icon.inverse` |\n\n```tsx\n// A category tag: the blue hue identifies a category, not a status\nbackgroundColor: token('color.background.accent.blue.subtlest'),\ncolor: token('color.text.accent.blue'),\n```\n\nUse `color.chart.*` for chart marks. For other pairings, check the rendered foreground and\nbackground: text needs 4.5:1 contrast and meaningful UI boundaries need 3:1.\n\n## Choose borders by their purpose\n\nUse `color.border.accent.[hue]` for a meaningful accent border on a non-bold accent background when\nthe boundary needs to meet 3:1 contrast. Verify the rendered pair when the boundary communicates a\ncontrol or state. The `.subtle` accent border variant is decorative; use it for visual decoration\nthat does not need to identify a boundary or state, not for a required control boundary. A required\nboundary must remain distinguishable without relying on a low-contrast decorative border.\n\n## Verify themes and states\n\nCheck the tag or label in its actual component, theme, and interaction states. Confirm that its hue\nstill means only the category, its text remains legible, and any required boundary stays visible.",
|
|
22
|
+
name: 'Color accents',
|
|
23
|
+
keywords: ['accent colors', 'non-status color', 'categories', 'tags', 'color pairing', 'accent tags', 'decorative borders', 'required borders', 'status colors', 'semantic colors', 'success', 'warning', 'error']
|
|
22
24
|
}, {
|
|
23
25
|
content: '## The palette\n\n<ColorPaletteRamps />\n\n## Picking colors for dark mode\n\nNeutral colors are set up in a way that makes it easy to convert a light theme to a dark theme. If\nyou use our [design tokens](https://atlassian.design/tokens/design-tokens) to apply colors, this\nmapping is done for you.\n\nThere is a light neutral ramp and an equivalent dark neutral ramp. Neutral100 in the light neutral\nramp should equate to DarkNeutral100 in the dark neutral ramp.\n\n<img\n\tsrc={paletteNeutralMapping}\n\talt="How light neutral ramp maps to dark neutral ramp in light and dark mode respectively."\n/>\n\nSaturated colors are also easy to convert from a light theme to a dark theme using symmetry. We\ncurrently have 10 swatches set up in each palette. If the swatches are divided in half, each half\nbecomes a mirror.\n\n<img\n\tsrc={paletteSaturatedMapping}\n\talt="How colors in the blue ramp maps across light and dark mode."\n/>\n\nFor instance, if a button color is 700 in light theme, it will be 400 in dark theme. If a section\nmessage background is 100 in light theme, it will be 1000 in dark theme. Design tokens will handle\nthese conversions for you.\n\n<img\n\tsrc={paletteJiraBoard}\n\talt="Screenshot of a Confluence page, which is shown half in light mode and half in dark mode. The button background uses B700 in light mode and B400 in dark mode. The section message background uses B100 in light mode and B1000 in dark mode."\n/>\n\nUsing symmetry is a great place to start and will cover most use cases. However, it may not work for\nall use cases and color mapping can be adjusted accordingly.\n\n## Dedicated to\n\nThese colors have been dedicated to honor the memory of Rosie and Alexandria, and will be woven into\nAtlassian apps and design for years to come.\n\n<ColorPaletteDedication />',
|
|
24
26
|
keywords: ['color palette', 'color system', 'brand colors', 'primary', 'secondary']
|
|
@@ -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::519a4af34d9d3f477d07bad55b5fde80>>
|
|
7
7
|
* @codegenCommand yarn build structured-docs
|
|
8
8
|
*/
|
|
9
9
|
/* eslint-disable no-template-curly-in-string */
|
|
@@ -37,7 +37,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
37
37
|
ruleName: 'ensure-icon-color',
|
|
38
38
|
description: 'In an upcoming release of `@atlaskit/icon`, new icon components in `@atlaskit/icon/core`,'
|
|
39
39
|
}, {
|
|
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\\
|
|
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/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\"}",
|
|
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
43
|
}, {
|
|
@@ -49,7 +49,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
49
49
|
ruleName: 'icon-label',
|
|
50
50
|
description: 'Icon labels are used to describe what the icon is so the visually impaired can be described what the'
|
|
51
51
|
}, {
|
|
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/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"}',
|
|
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 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"}',
|
|
53
53
|
ruleName: 'index',
|
|
54
54
|
description: '---'
|
|
55
55
|
}, {
|
|
@@ -101,9 +101,13 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
101
101
|
ruleName: 'no-direct-use-of-web-platform-drag-and-drop',
|
|
102
102
|
description: 'Block the usage of web platform drag and drop functionality directly. Use Pragmatic drag and drop.'
|
|
103
103
|
}, {
|
|
104
|
-
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\\
|
|
104
|
+
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\"}",
|
|
105
105
|
ruleName: 'no-emotion-primitives',
|
|
106
106
|
description: 'This rule ensures that imports from `@atlaskit/primitives` are replaced with their Compiled'
|
|
107
|
+
}, {
|
|
108
|
+
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"}',
|
|
109
|
+
ruleName: 'no-empty-icon-button-label',
|
|
110
|
+
description: 'Ensures that icon-only Atlassian Design System buttons do not have an empty accessible name.'
|
|
107
111
|
}, {
|
|
108
112
|
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"}',
|
|
109
113
|
ruleName: 'no-empty-styled-expression',
|
|
@@ -117,11 +121,11 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
117
121
|
ruleName: 'no-exported-keyframes',
|
|
118
122
|
description: 'Disallows `keyframes` export declarations that originate from a CSS-in-JS library, including'
|
|
119
123
|
}, {
|
|
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
|
|
124
|
+
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"}',
|
|
121
125
|
ruleName: 'no-html-anchor',
|
|
122
126
|
description: "Don't use native HTML anchors. The Atlassian Design System provides ready-made link components that"
|
|
123
127
|
}, {
|
|
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/
|
|
128
|
+
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"}',
|
|
125
129
|
ruleName: 'no-html-button',
|
|
126
130
|
description: "Don't use native HTML buttons. The Atlassian Design System provides ready-made button components"
|
|
127
131
|
}, {
|
|
@@ -161,7 +165,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
161
165
|
ruleName: 'no-html-textarea',
|
|
162
166
|
description: "Don't use native HTML textarea elements. The Atlassian Design System provides a ready-made textarea"
|
|
163
167
|
}, {
|
|
164
|
-
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"}',
|
|
168
|
+
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"}',
|
|
165
169
|
ruleName: 'no-icon-spacing-prop',
|
|
166
170
|
description: 'Disallows usage of the deprecated `spacing` prop on icon components from `@atlaskit/icon/core` and'
|
|
167
171
|
}, {
|
|
@@ -177,7 +181,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
177
181
|
ruleName: 'no-margin',
|
|
178
182
|
description: "Using margins to define spacing results in components that can't be readily reused in other contexts"
|
|
179
183
|
}, {
|
|
180
|
-
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}
|
|
184
|
+
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"}',
|
|
181
185
|
ruleName: 'no-modal-label',
|
|
182
186
|
description: 'Do not use the `label` prop on the Atlassian Design System modal dialog default import.'
|
|
183
187
|
}, {
|
|
@@ -221,7 +225,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
221
225
|
ruleName: 'no-unsafe-inline-snapshot',
|
|
222
226
|
description: 'This rule enforces guardrails on `toMatchInlineSnapshot()` usage to prevent snapshots from becoming'
|
|
223
227
|
}, {
|
|
224
|
-
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"}',
|
|
228
|
+
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"}',
|
|
225
229
|
ruleName: 'no-unsafe-style-overrides',
|
|
226
230
|
description: "Unsafe style overrides cause friction and incidents when internals of the component you're"
|
|
227
231
|
}, {
|
|
@@ -273,7 +277,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
273
277
|
ruleName: 'use-heading',
|
|
274
278
|
description: 'Using primitives allows you to delete bespoke component code and replace it with ready made'
|
|
275
279
|
}, {
|
|
276
|
-
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"}',
|
|
280
|
+
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"}',
|
|
277
281
|
ruleName: 'use-heading-level-in-section-message',
|
|
278
282
|
description: 'The `SectionMessage` component in `@atlaskit/section-message`, when used with a `title` prop, needs'
|
|
279
283
|
}, {
|
|
@@ -313,7 +317,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
313
317
|
ruleName: 'use-popup-label',
|
|
314
318
|
description: 'Popup should have an accessible name or a reference to it when `role="dialog"`, so that upon'
|
|
315
319
|
}, {
|
|
316
|
-
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 {
|
|
320
|
+
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\"}",
|
|
317
321
|
ruleName: 'use-pressable-motion',
|
|
318
322
|
description: 'Encourages semantic motion tokens when local static styles change interactive colours on `Pressable`'
|
|
319
323
|
}, {
|
|
@@ -377,7 +381,7 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
377
381
|
ruleName: 'convert-props-syntax',
|
|
378
382
|
description: 'Blocks dynamic styling syntax that is unsupported by `styled-components@<4` and `@emotion/styled`,'
|
|
379
383
|
}, {
|
|
380
|
-
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"}',
|
|
384
|
+
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"}',
|
|
381
385
|
ruleName: 'enforce-style-prop',
|
|
382
386
|
description: 'Blocks providing static values through the `style` prop, which should only be used to provide'
|
|
383
387
|
}, {
|
|
@@ -388,6 +392,10 @@ export const lintRulesMcpStructuredContent = [{
|
|
|
388
392
|
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"}',
|
|
389
393
|
ruleName: 'no-array-arguments',
|
|
390
394
|
description: 'Blocks passing array arguments to style declaration functions.'
|
|
395
|
+
}, {
|
|
396
|
+
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\"}",
|
|
397
|
+
ruleName: 'no-atlaskit-theme',
|
|
398
|
+
description: 'Disallow imports from `@atlaskit/theme` and its subpaths, including default, named, namespace,'
|
|
391
399
|
}, {
|
|
392
400
|
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\"}",
|
|
393
401
|
ruleName: 'no-classname-prop',
|