ESLint plugin

d82e6f76528ab, (opens new window) - Add direct subpath package exports as part of the linking-platform, search, media, and design-system barrel-removal (de-barrel) migration.

These packages now expose their individual modules via explicit package.json exports subpaths so that consumers can import directly from the leaf module (e.g. @atlaskit/pkg/thing) instead of the package barrel/index. This adds new public entry points without changing or removing any existing exports, so it is a backwards-compatible additive change.

No runtime behaviour changes; this is an API-surface (entry-point) addition to support tree-shaking and to unblock removal of the barrel index files.

b2a44b7d3ce87, (opens new window) - Extend no-modal-label to disallow modalProps.label on modal entry-point triggers.

Exclude ads-mcp get-lint-rules from content and deprecated-import ratcheting (docs embed intentional bad examples as strings).

• use-simple-field
• use-simple-form
• use-field-message-wrapper
• use-correct-field
• use-character-counter-field
• no-placeholder
• no-readonly-or-disabled-inputs
• use-should-render-to-parent
• ensure-proper-xcss-usage
• lozenge-badge-tag-labelling-system-migration

• no-html-anchor
• no-html-heading
• no-html-image
• no-html-code
• no-html-text-input
• no-html-textarea
• no-separator-with-list-elements
• ensure-avatar-tag-avatar-props
• enforce-inline-styles-in-select
• use-datetime-picker-calendar-button
• use-drawer-label
• use-popup-label
• use-tag-group-label
• use-heading-level-in-section-message
• use-modal-dialog-close-button
• use-heading-level-in-spotlight-card
• use-spotlight-package

db02bae78813d, (opens new window) - Remove the use-primitives rule and its Box recommendation.

This is a breaking change. After upgrading, remove @atlaskit/design-system/use-primitives from your ESLint configuration and any ESLint disable comments to avoid "Definition for rule was not found" errors.

62b5aa6adc358, (opens new window) - Completes deprecation guidance for the legacy WidthDetector default export.

Use WidthObserver from @atlaskit/width-detector/width-observer instead.

0af52c9020b98, (opens new window) - Add expand-motion-shorthand rule to @atlaskit/eslint-plugin-design-system so it is documented on the design system website. Expands transition and animation CSS shorthand properties into their individual sub-properties so values can be replaced with motion tokens.

Deprecate the compiled/expand-motion-shorthand rule in @atlaskit/eslint-plugin-platform in favour of @atlaskit/design-system/expand-motion-shorthand.

• Lozenges no longer migrate to <Tag>. The <Lozenge> component stays as <Lozenge>.
• Legacy appearance values are now auto-fixed in-place to new semantic values: default → neutral, inprogress → information, moved → warning, removed → danger, new → discovery. The value success is unchanged.
• isBold is intentionally not flagged: while the feature flag platform-dst-lozenge-tag-badge-visual-uplifts is OFF, users still need isBold to render subtle Lozenges. It will be cleaned up in a separate pass after rollout.

f2dc9097319f0, (opens new window) - ### Dropped support for legacy Typescript 4 types. Typescript 5 is now the new minimum.

Removes the typesVersions property and dist/types-ts4.5 directory from the dist.

Types are now exclusively via the "types": "dist/types/index.d.ts" property.

• font.body.UNSAFE_small will no longer be suggested in autofixes.
• Both 11px and 12px will now be autofixed to the font.body.small token.
• Heading tokens will only be suggested if bold font weights (700 or 653) are used.

• Updated ensure-design-token-usage rule to apply correct shape tokens. Note this rule should not be used for shape - instead use the use-tokens-shape rule instead.

#117363, (opens new window) 10a0f7f6c2027, (opens new window) - This package's peerDependencies have been adjusted for react and/or react-dom to reflect the status of only supporting React 18 going forward. No explicit breaking change to React support has been made in this release, but this is to signify going forward, breaking changes for React 16 or React 17 may come via non-major semver releases.

Please refer this community post for more details: https://community.developer.atlassian.com/t/rfc-78-dropping-support-for-react-16-and-rendering-in-a-react-18-concurrent-root-in-jira-and-confluence/87026, (opens new window)

• use-tokens-typography enables all patterns by default. Set lint rule config to patterns: ['style-object'] for old default behaviour.
• use-primitives-text and use-heading enables the enableUnsafeReport option by default. Set lint rule config to enableUnsafeReport: false for old default behaviour.

#175583, (opens new window) 75911cb003bd5, (opens new window) - #### no-legacy-icons

Add new shouldUseSafeMigrationMode flag to no-legacy-icons rule. When set to true, the autofixer will only attempt to migrate icons that are visually similar and do not include secondary colors or sizes other than medium.

Additionally, the autofixer will no longer attempt to explicity add color="currentColor" for every migration as this is now the default.

Refactored to fix type errors and match code style of other rules.

#127511, (opens new window) db30e29344013, (opens new window) - Widening range of react and react-dom peer dependencies from ^16.8.0 || ^17.0.0 || ~18.2.0 to the wider range of ``^16.8.0 || ^17.0.0 || ^18.0.0` (where applicable).

This change has been done to enable usage of react@18.3 as well as to have a consistent peer dependency range for react and react-dom for /platform packages.

• Reconfigure '@atlaskit/design-system/no-invalid-css-map' to work properly of the box alongside ADS.

• Fixed a bug that could produce syntax errors when mixins were present in nested selectors.
• Disabled autofixing styled components usages with mixins in nested selectors, as there is no general equivalent.
• Disabled autofixing function interpolations with non-expression bodies.

• ensure-design-token-usage/preview: This rule is now deprecated. Please use use-tokens-space instead.

#83454, (opens new window) be8b7ad6ff8e, (opens new window) - Remove name autofixer from consistent-css-prop-usage. Variables for css / xcss / cssMap functions will no longer be required to end with "Styles".

[BREAKING] Some rule options have been changed:

• fixNamesOnly and autoFixNames have been removed, as there is no longer an autofixer that enforces variable names.
  • If you use fixNamesOnly: true, we recommend switching to using autoFix: false.
  • Users of the autoFixNames option should remove this from their configuration.
• autoFix option has been added. This controls whether the remaining autofixers should run or not (e.g. hoisting css function calls, wrapping objects in css function calls), and is true by default.

#80662, (opens new window) 4833299b00d4, (opens new window) - For no-css-tagged-template-expression and no-styled-tagged-template-expression:

• When importing from Emotion, stop applying autofixer when the styles contain !important.
• When importing from any library, stop applying autofixer when a selector contains a tagged template interpolation (previously only styled-components).

#81697, (opens new window) cf3483e7e87d, (opens new window) - Adding a missing license entry to the package.json for this package. This package was already licensed under Apache-2.0 (see LICENSE file), so this change is not changing it's license.

#72966, (opens new window) ec187f466e23, (opens new window) - Update consistent-css-prop-usage to incorporate some updates previously made to the @compiled/eslint-plugin equivalent.

1. Add autofixer to add the css function for the following scenario:

Note that this autofixer will not run if local variables are used inside the style object (e.g. { height: makeTaller ? '5px' : '2px' }), or if there are spread elements, template literals, and other tricky-to-parse code. These continue to require fixing manually.

(This rule would previously only autofix if the file was originally <div css={{ ... }} />) 2. Add import { css } from '@compiled/react' (or xcss) automatically when fixing. The package from which to import the css function can be specified through the importSource option. 3. Add excludeReactComponents to exclude linting React components (i.e. components that start with uppercase). Sometimes it may not be desirable to have this rule apply to React components (e.g. @atlaskit/button), which could either use the Emotion or Compiled APIs when they expose a css prop. Passing a function from the wrong library can result in the styling erroneously not being applied. 4. Treat { ... } as const statements the same way as { ... } objects. 5. Add fixNamesOnly to disable all autofixers except the autofixer that adds styles to the end of existing style variables. For example, in <div css={buttonComponent} />; const buttonComponent = css({ ... }), buttonComponent will continue to be renamed to buttonComponentStyles. Autofixers that will be disabled include hoisting the styles to the top-most scope, and adding the css function call around style objects.

#71429, (opens new window) 457122c5d002, (opens new window) - Add some ESLint rules from Compiled CSS-in-JS, and adapt them for the UI Styling Standard.

Rules added:

• no-empty-styled-expression: ban styled({}) usages
• no-exported-css and no-exported-keyframes: ban css and keyframes function calls that are exported
• no-invalid-css-map: ban usages of the Compiled/@atlaskit/css cssMap function call that are not valid

Changes made:

• Add them to monorepo, modify to use the existing utility functions
• Add support for CSS-in-JS libraries other than Compiled (styled-components, Emotion, @atlaskit/css, etc.) and xcss where appropriate

#69370, (opens new window) e14e79732cd4, (opens new window) - Add local-cx-xcss rule, which ensures that the cx() function (if imported from @compiled/react or @atlaskit/css) is only used within the xcss prop.

Internal changes: Also refactored the utility functions used by no-css-tagged-template-expression.