@atlaskit/eslint-plugin-design-system 8.19.2 → 8.21.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 8.21.0
+
+### Minor Changes
+
+- [#66250](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66250) [`6ff74a16aee7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/6ff74a16aee7) - Introducing new rule to encourage adding/referencing accessible name to a ButtonGroup component.
+
+## 8.20.0
+
+### Minor Changes
+
+- [#66409](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66409) [`f6c48f4a67c1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/f6c48f4a67c1) - Implemented functionality for the consistent-css-prop-usage rule to account for cssMap usages
+
+### Patch Changes
+
+- [#66604](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/66604) [`3205b1daf57f`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/3205b1daf57f) - Refactor internal logic of `use-primitives` to better handle cases it will not suggest transformations for, based on the value of CSS properties.
+
 ## 8.19.2
 
 ### Patch Changes

package/README.md

@@ -65,6 +65,7 @@ module.exports = {
 | <a href="./src/rules/no-unsafe-style-overrides/README.md">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <a href="./src/rules/no-unsupported-drag-and-drop-libraries/README.md">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="./src/rules/prefer-primitives/README.md">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
+| <a href="./src/rules/use-button-group-label/README.md">use-button-group-label</a>                                 | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="./src/rules/use-drawer-label/README.md">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
 | <a href="./src/rules/use-heading-level-in-spotlight-card/README.md">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     |             |
 | <a href="./src/rules/use-href-in-link-item/README.md">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         |

package/constellation/index/usage.mdx

@@ -29,6 +29,7 @@ This plugin contains rules that should be used when working with the [Atlassian
 | <a href="#no-unsafe-style-overrides">no-unsafe-style-overrides</a>                           | Discourage usage of unsafe style overrides used against the Atlassian Design System.                                                                                                                                                                                                                                | Yes         |         |             |
 | <a href="#no-unsupported-drag-and-drop-libraries">no-unsupported-drag-and-drop-libraries</a> | Disallow importing unsupported drag and drop modules.                                                                                                                                                                                                                                                               | Yes         |         |             |
 | <a href="#prefer-primitives">prefer-primitives</a>                                           | Increase awareness of primitive components via code hints. Strictly used for education purposes and discoverability. To enforce usage please refer to the `use-primitives` rule.                                                                                                                                    |             |         |             |
+| <a href="#use-button-group-label">use-button-group-label</a>                                 | Ensures button groups are described to assistive technology by a direct label or by another element.                                                                                                                                                                                                                | Yes         |         | Yes         |
 | <a href="#use-drawer-label">use-drawer-label</a>                                             | Encourages to provide accessible name for Atlassian Design System Drawer component.                                                                                                                                                                                                                                 | Yes         |         | Yes         |
 | <a href="#use-heading-level-in-spotlight-card">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     |             |
 | <a href="#use-href-in-link-item">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         |
@@ -142,7 +143,7 @@ This rule comes with options to support different repository configurations.
 
 #### cssFunctions
 
-An array of function names the linting rule should target. Defaults to `['css', 'xcss']`.
+An array of function names the linting rule should target. Defaults to `['css', 'xcss']`. Functionality of cssMap will be linted regardless of the configuration of `cssFunctions` as it can be used with either attribute.
 
 #### stylesPlacement
 
@@ -767,6 +768,65 @@ This rule marks code as violations when it may be able to be replaced with a pri
 </Component>
 ```
 
+## use-button-group-label
+
+ButtonGroup should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.
+
+<h3>Examples</h3>
+
+This rule will indicate user with warning to strongly recommend usage of either `label` or `titleId` prop.
+
+#### Incorrect
+
+```tsx
+<ButtonGroup>
+ ^^^^^^^^^^^ Missing either `label` or `titleId` prop.
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+
+<ButtonGroup label="">
+             ^^^^^ `label` prop is missing accessible name value.
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+
+<h2 id="button-group-title">ButtonGroup content title</hi>
+<ButtonGroup titleId="">
+             ^^^^^^^ `titleId` prop is missing reference value.
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+
+<h2 id="button-group-title">ButtonGroup content title</h2>
+<ButtonGroup titleId="button-group-title" label="">
+             ^^^^^^^                      ^^^^^ Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+```
+
+#### Correct
+
+```tsx
+<ButtonGroup label="ButtonGroup content title">
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+
+<h2 id="button-group-title">ButtonGroup content title</h2>
+<ButtonGroup titleId="button-group-title">
+  <Button>Save</Button>
+  <Button>Edit</Button>
+  <Button>Delete</Button>
+</ButtonGroup>
+```
+
 ## use-drawer-label
 
 Drawer should have an accessible name or a reference to it, so that upon opening, users of assistive technologies could have contextual information of interaction with current element.

package/dist/cjs/presets/all.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -28,6 +28,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/cjs/presets/recommended.codegen.js

@@ -6,7 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 exports.default = void 0;
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -23,6 +23,7 @@ var _default = exports.default = {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/cjs/rules/consistent-css-prop-usage/index.js

@@ -6,6 +6,7 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.default = void 0;
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _assign = _interopRequireDefault(require("lodash/assign"));
@@ -25,9 +26,9 @@ function findSpreadProperties(node) {
   });
 }
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
-  var _getIdentifierInParen;
+  var _getIdentifierInParen, _getIdentifierInParen2;
   var scope = context.getScope();
-  var _ref = ((_getIdentifierInParen = (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, sourceIdentifier.name)) === null || _getIdentifierInParen === void 0 ? void 0 : _getIdentifierInParen.identifiers) || [],
+  var _ref = (_getIdentifierInParen = (_getIdentifierInParen2 = (0, _eslintCodemodUtils.getIdentifierInParentScope)(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [],
     _ref2 = (0, _slicedToArray2.default)(_ref, 1),
     identifier = _ref2[0];
   if (!identifier || !identifier.parent) {
@@ -50,7 +51,7 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
     return;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, [].concat((0, _toConsumableArray2.default)(configuration.cssFunctions), ['cssMap']))) {
     // When variable value is not of type css({})
     context.report({
       node: identifier,
@@ -69,6 +70,13 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
   }
 }
+
+/**
+ * Handle different cases based on what's been passed in the css-related JSXAttribute
+ * @param context the context of the node
+ * @param expression the expression of the JSXAttribute value
+ * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
+ */
 var traverseExpressionWithConfig = function traverseExpressionWithConfig(context, expression, configuration) {
   function traverseExpression(expression) {
     switch (expression.type) {
@@ -140,7 +148,8 @@ var rule = (0, _createRule.createLintRule)({
   create: function create(context) {
     var _ref3;
     var mergedConfig = (0, _assign.default)({}, defaultConfig, context.options[0]);
-    var callSelector = mergedConfig.cssFunctions.map(function (fn) {
+    var callSelectorFunctions = [].concat((0, _toConsumableArray2.default)(mergedConfig.cssFunctions), ['cssMap']);
+    var callSelector = callSelectorFunctions.map(function (fn) {
       return "CallExpression[callee.name=".concat(fn, "]");
     }).join(',');
     return _ref3 = {}, (0, _defineProperty2.default)(_ref3, callSelector, function (node) {

package/dist/cjs/rules/index.codegen.js

@@ -21,6 +21,7 @@ var _noUnsafeDesignTokenUsage = _interopRequireDefault(require("./no-unsafe-desi
 var _noUnsafeStyleOverrides = _interopRequireDefault(require("./no-unsafe-style-overrides"));
 var _noUnsupportedDragAndDropLibraries = _interopRequireDefault(require("./no-unsupported-drag-and-drop-libraries"));
 var _preferPrimitives = _interopRequireDefault(require("./prefer-primitives"));
+var _useButtonGroupLabel = _interopRequireDefault(require("./use-button-group-label"));
 var _useDrawerLabel = _interopRequireDefault(require("./use-drawer-label"));
 var _useHeadingLevelInSpotlightCard = _interopRequireDefault(require("./use-heading-level-in-spotlight-card"));
 var _useHrefInLinkItem = _interopRequireDefault(require("./use-href-in-link-item"));
@@ -28,7 +29,7 @@ var _usePrimitives = _interopRequireDefault(require("./use-primitives"));
 var _useVisuallyHidden = _interopRequireDefault(require("./use-visually-hidden"));
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
+ * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 var _default = exports.default = {
@@ -48,6 +49,7 @@ var _default = exports.default = {
   'no-unsafe-style-overrides': _noUnsafeStyleOverrides.default,
   'no-unsupported-drag-and-drop-libraries': _noUnsupportedDragAndDropLibraries.default,
   'prefer-primitives': _preferPrimitives.default,
+  'use-button-group-label': _useButtonGroupLabel.default,
   'use-drawer-label': _useDrawerLabel.default,
   'use-heading-level-in-spotlight-card': _useHeadingLevelInSpotlightCard.default,
   'use-href-in-link-item': _useHrefInLinkItem.default,

package/dist/cjs/rules/use-button-group-label/index.js

@@ -0,0 +1,83 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+var _eslintCodemodUtils = require("eslint-codemod-utils");
+var _createRule = require("../utils/create-rule");
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = (0, _createRule.createLintRule)({
+  meta: {
+    name: 'use-button-group-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Ensures button groups are described to assistive technology by a direct label or by another element.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/button') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportSpecifier';
+            });
+            if (defaultImport && defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node, 'JSXElement')) {
+          return;
+        }
+        if (!(0, _eslintCodemodUtils.isNodeOfType)(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return (0, _eslintCodemodUtils.isNodeOfType)(attr, 'JSXAttribute') && (0, _eslintCodemodUtils.isNodeOfType)(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && !prop.value.value || (0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingLabelProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+var _default = exports.default = rule;

package/dist/cjs/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -3,34 +3,24 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.convertASTObjectExpressionToJSObject = void 0;
+exports.convertASTObjectExpressionToJSObject = exports.SPREAD_SYNTAX = void 0;
 var _eslintCodemodUtils = require("eslint-codemod-utils");
-// FIXME: This is only loosely typed
-
+var SPREAD_SYNTAX = exports.SPREAD_SYNTAX = Symbol('SPREAD_SYNTAX');
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
 var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
-  var styleObj = {};
+  var styleObj = {
+    unsupported: []
+  };
 
-  // if we see any spread props we stop and return false to indicate this is unsupported
+  // if we see any spread props we indicate that as unsupported
   if (!styles.properties.every(function (prop) {
     return (0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property');
   })) {
-    return false;
+    styleObj.unsupported.push(SPREAD_SYNTAX);
   }
-
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
-  // We need to harden this logic asap.
-  // It currently generates a false positive for:
-  // styled.div({
-  //  marginTop: "0px",
-  //  marginBottom: blah(...),
-  // })
-  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
-  // from the resulting map and this is inaccurate.
   styles.properties.forEach(function (prop) {
-    // cases we want to skip (see note above)
     if (!(0, _eslintCodemodUtils.isNodeOfType)(prop, 'Property')) {
       return;
     }
@@ -41,28 +31,30 @@ var convertASTObjectExpressionToJSObject = exports.convertASTObjectExpressionToJ
     // a literal string value, the base case
     if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'Literal') && typeof prop.value.value === 'string') {
       styleObj[prop.key.name] = prop.value.value;
+      return;
     }
 
     // try to handle a direct call to `token`
     if ((0, _eslintCodemodUtils.isNodeOfType)(prop.value, 'CallExpression')) {
-      var _callExpression$argum;
       var callExpression = prop.value;
-      // skip if not a call to `token`
-      if (!(0, _eslintCodemodUtils.isNodeOfType)(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
-        return;
+      // strictly handle calls to `token`
+      if ((0, _eslintCodemodUtils.isNodeOfType)(callExpression.callee, 'Identifier') && callExpression.callee.name === 'token') {
+        // only two valid cases are supported
+        // one argument  => token('space.100')
+        // two arguments => token('space.100', '8px')
+        if ((callExpression.arguments.length === 1 || callExpression.arguments.length === 2) && (0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[0], 'Literal') && (typeof callExpression.arguments[1] === 'undefined' || (0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[1], 'Literal'))) {
+          var _callExpression$argum;
+          styleObj[prop.key.name] = {
+            tokenName: String(callExpression.arguments[0].value),
+            fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+          };
+          return;
+        }
       }
-
-      // only two valid cases are supported
-      // one argument  => token('space.100')
-      // two arguments => token('space.100', '8px')
-      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !(0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !(0, _eslintCodemodUtils.isNodeOfType)(callExpression.arguments[1], 'Literal')) {
-        return;
-      }
-      styleObj[prop.key.name] = {
-        tokenName: String(callExpression.arguments[0].value),
-        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
-      };
     }
+
+    // if we get here we have an unsupported value
+    styleObj.unsupported.push(prop.key.name);
   });
   return styleObj;
 };

package/dist/cjs/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -6,18 +6,22 @@ Object.defineProperty(exports, "__esModule", {
 });
 exports.isValidCssPropertiesToTransform = void 0;
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _eslintCodemodUtils = require("eslint-codemod-utils");
 var _cssToXcss = require("../transformers/css-to-xcss");
 var _convertAstObjectExpressionToJsObject = require("./convert-ast-object-expression-to-js-object");
+var _excluded = ["unsupported"];
 var isValidCssPropertiesToTransform = exports.isValidCssPropertiesToTransform = function isValidCssPropertiesToTransform(node, config) {
   var cssObjectExpression = node.arguments[0];
   // Bail on empty object calls
   if (!cssObjectExpression || !(0, _eslintCodemodUtils.isNodeOfType)(cssObjectExpression, 'ObjectExpression')) {
     return false;
   }
-  var cssObject = (0, _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject)(cssObjectExpression);
-  // Bail if there are less or more than 1 styles defined
-  if (!cssObject || Object.keys(cssObject).length !== 1) {
+  var _convertASTObjectExpr = (0, _convertAstObjectExpressionToJsObject.convertASTObjectExpressionToJSObject)(cssObjectExpression),
+    unsupported = _convertASTObjectExpr.unsupported,
+    cssObject = (0, _objectWithoutProperties2.default)(_convertASTObjectExpr, _excluded);
+  // Bail if there are any unsupported styles
+  if (unsupported.length > 0 || Object.keys(cssObject).length !== 1) {
     return false;
   }
   // Short-circuit when token calls are found but pattern is not enabled in config

package/dist/es2019/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -22,6 +22,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/es2019/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -17,6 +17,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/es2019/rules/consistent-css-prop-usage/index.js

@@ -14,9 +14,9 @@ function findSpreadProperties(node) {
   property.type === 'ExperimentalSpreadProperty');
 }
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
-  var _getIdentifierInParen;
+  var _getIdentifierInParen, _getIdentifierInParen2;
   const scope = context.getScope();
-  const [identifier] = ((_getIdentifierInParen = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen === void 0 ? void 0 : _getIdentifierInParen.identifiers) || [];
+  const [identifier] = (_getIdentifierInParen = (_getIdentifierInParen2 = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [];
   if (!identifier || !identifier.parent) {
     // Identifier isn't in the module, skip!
     return;
@@ -37,7 +37,7 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
     return;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, [...configuration.cssFunctions, 'cssMap'])) {
     // When variable value is not of type css({})
     context.report({
       node: identifier,
@@ -56,6 +56,13 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
   }
 }
+
+/**
+ * Handle different cases based on what's been passed in the css-related JSXAttribute
+ * @param context the context of the node
+ * @param expression the expression of the JSXAttribute value
+ * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
+ */
 const traverseExpressionWithConfig = (context, expression, configuration) => {
   function traverseExpression(expression) {
     switch (expression.type) {
@@ -124,7 +131,8 @@ const rule = createLintRule({
   },
   create(context) {
     const mergedConfig = assign({}, defaultConfig, context.options[0]);
-    const callSelector = mergedConfig.cssFunctions.map(fn => `CallExpression[callee.name=${fn}]`).join(',');
+    const callSelectorFunctions = [...mergedConfig.cssFunctions, 'cssMap'];
+    const callSelector = callSelectorFunctions.map(fn => `CallExpression[callee.name=${fn}]`).join(',');
     return {
       [callSelector]: node => {
         if (node.parent.type !== 'VariableDeclarator') {

package/dist/es2019/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
+ * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -19,6 +19,7 @@ import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
+import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -41,6 +42,7 @@ export default {
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
+  'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/es2019/rules/use-button-group-label/index.js

@@ -0,0 +1,75 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+const elementsAccessibleNameProps = ['label', 'titleId'];
+const rule = createLintRule({
+  meta: {
+    name: 'use-button-group-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Ensures button groups are described to assistive technology by a direct label or by another element.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create(context) {
+    const contextLocalIdentifier = [];
+    return {
+      ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/button') {
+          if (node.specifiers.length) {
+            const defaultImport = node.specifiers.filter(spec => spec.type === 'ImportSpecifier');
+            if (defaultImport && defaultImport.length) {
+              const {
+                local
+              } = defaultImport[0];
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        const name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          const componentLabelProps = node.openingElement.attributes.filter(attr => isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name));
+          if (componentLabelProps.length === 1) {
+            const prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingLabelProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/es2019/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -1,29 +1,18 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-
-// FIXME: This is only loosely typed
-
+export const SPREAD_SYNTAX = Symbol('SPREAD_SYNTAX');
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
 export const convertASTObjectExpressionToJSObject = styles => {
-  const styleObj = {};
+  const styleObj = {
+    unsupported: []
+  };
 
-  // if we see any spread props we stop and return false to indicate this is unsupported
+  // if we see any spread props we indicate that as unsupported
   if (!styles.properties.every(prop => isNodeOfType(prop, 'Property'))) {
-    return false;
+    styleObj.unsupported.push(SPREAD_SYNTAX);
   }
-
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
-  // We need to harden this logic asap.
-  // It currently generates a false positive for:
-  // styled.div({
-  //  marginTop: "0px",
-  //  marginBottom: blah(...),
-  // })
-  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
-  // from the resulting map and this is inaccurate.
   styles.properties.forEach(prop => {
-    // cases we want to skip (see note above)
     if (!isNodeOfType(prop, 'Property')) {
       return;
     }
@@ -34,28 +23,30 @@ export const convertASTObjectExpressionToJSObject = styles => {
     // a literal string value, the base case
     if (isNodeOfType(prop.value, 'Literal') && typeof prop.value.value === 'string') {
       styleObj[prop.key.name] = prop.value.value;
+      return;
     }
 
     // try to handle a direct call to `token`
     if (isNodeOfType(prop.value, 'CallExpression')) {
-      var _callExpression$argum;
       const callExpression = prop.value;
-      // skip if not a call to `token`
-      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
-        return;
+      // strictly handle calls to `token`
+      if (isNodeOfType(callExpression.callee, 'Identifier') && callExpression.callee.name === 'token') {
+        // only two valid cases are supported
+        // one argument  => token('space.100')
+        // two arguments => token('space.100', '8px')
+        if ((callExpression.arguments.length === 1 || callExpression.arguments.length === 2) && isNodeOfType(callExpression.arguments[0], 'Literal') && (typeof callExpression.arguments[1] === 'undefined' || isNodeOfType(callExpression.arguments[1], 'Literal'))) {
+          var _callExpression$argum;
+          styleObj[prop.key.name] = {
+            tokenName: String(callExpression.arguments[0].value),
+            fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+          };
+          return;
+        }
       }
-
-      // only two valid cases are supported
-      // one argument  => token('space.100')
-      // two arguments => token('space.100', '8px')
-      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !isNodeOfType(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !isNodeOfType(callExpression.arguments[1], 'Literal')) {
-        return;
-      }
-      styleObj[prop.key.name] = {
-        tokenName: String(callExpression.arguments[0].value),
-        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
-      };
     }
+
+    // if we get here we have an unsupported value
+    styleObj.unsupported.push(prop.key.name);
   });
   return styleObj;
 };

package/dist/es2019/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -7,9 +7,12 @@ export const isValidCssPropertiesToTransform = (node, config) => {
   if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
     return false;
   }
-  const cssObject = convertASTObjectExpressionToJSObject(cssObjectExpression);
-  // Bail if there are less or more than 1 styles defined
-  if (!cssObject || Object.keys(cssObject).length !== 1) {
+  const {
+    unsupported,
+    ...cssObject
+  } = convertASTObjectExpressionToJSObject(cssObjectExpression);
+  // Bail if there are any unsupported styles
+  if (unsupported.length > 0 || Object.keys(cssObject).length !== 1) {
     return false;
   }
   // Short-circuit when token calls are found but pattern is not enabled in config

package/dist/esm/presets/all.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -22,6 +22,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
     '@atlaskit/design-system/prefer-primitives': 'warn',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/esm/presets/recommended.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 export default {
@@ -17,6 +17,7 @@ export default {
     '@atlaskit/design-system/no-unsafe-design-token-usage': 'error',
     '@atlaskit/design-system/no-unsafe-style-overrides': 'warn',
     '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': 'error',
+    '@atlaskit/design-system/use-button-group-label': 'warn',
     '@atlaskit/design-system/use-drawer-label': 'warn',
     '@atlaskit/design-system/use-heading-level-in-spotlight-card': 'warn',
     '@atlaskit/design-system/use-href-in-link-item': 'warn',

package/dist/esm/rules/consistent-css-prop-usage/index.js

@@ -1,4 +1,5 @@
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
+import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 // eslint-disable-next-line import/no-extraneous-dependencies
 
@@ -18,9 +19,9 @@ function findSpreadProperties(node) {
   });
 }
 function analyzeIdentifier(context, sourceIdentifier, configuration) {
-  var _getIdentifierInParen;
+  var _getIdentifierInParen, _getIdentifierInParen2;
   var scope = context.getScope();
-  var _ref = ((_getIdentifierInParen = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen === void 0 ? void 0 : _getIdentifierInParen.identifiers) || [],
+  var _ref = (_getIdentifierInParen = (_getIdentifierInParen2 = getIdentifierInParentScope(scope, sourceIdentifier.name)) === null || _getIdentifierInParen2 === void 0 ? void 0 : _getIdentifierInParen2.identifiers) !== null && _getIdentifierInParen !== void 0 ? _getIdentifierInParen : [],
     _ref2 = _slicedToArray(_ref, 1),
     identifier = _ref2[0];
   if (!identifier || !identifier.parent) {
@@ -43,7 +44,7 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
     return;
   }
-  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, configuration.cssFunctions)) {
+  if (identifier.parent && identifier.parent.init && !isCssCallExpression(identifier.parent.init, [].concat(_toConsumableArray(configuration.cssFunctions), ['cssMap']))) {
     // When variable value is not of type css({})
     context.report({
       node: identifier,
@@ -62,6 +63,13 @@ function analyzeIdentifier(context, sourceIdentifier, configuration) {
     });
   }
 }
+
+/**
+ * Handle different cases based on what's been passed in the css-related JSXAttribute
+ * @param context the context of the node
+ * @param expression the expression of the JSXAttribute value
+ * @param configuration what css-related functions to account for (eg. css, xcss, cssMap), and whether to detect bottom vs top expressions
+ */
 var traverseExpressionWithConfig = function traverseExpressionWithConfig(context, expression, configuration) {
   function traverseExpression(expression) {
     switch (expression.type) {
@@ -133,7 +141,8 @@ var rule = createLintRule({
   create: function create(context) {
     var _ref3;
     var mergedConfig = assign({}, defaultConfig, context.options[0]);
-    var callSelector = mergedConfig.cssFunctions.map(function (fn) {
+    var callSelectorFunctions = [].concat(_toConsumableArray(mergedConfig.cssFunctions), ['cssMap']);
+    var callSelector = callSelectorFunctions.map(function (fn) {
       return "CallExpression[callee.name=".concat(fn, "]");
     }).join(',');
     return _ref3 = {}, _defineProperty(_ref3, callSelector, function (node) {

package/dist/esm/rules/index.codegen.js

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::ab1f5b129d07027c228dbd79da5f3572>>
+ * @codegen <<SignedSource::14cdfdcbd8b999ee097a1a5b245d7117>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 import consistentCssPropUsage from './consistent-css-prop-usage';
@@ -19,6 +19,7 @@ import noUnsafeDesignTokenUsage from './no-unsafe-design-token-usage';
 import noUnsafeStyleOverrides from './no-unsafe-style-overrides';
 import noUnsupportedDragAndDropLibraries from './no-unsupported-drag-and-drop-libraries';
 import preferPrimitives from './prefer-primitives';
+import useButtonGroupLabel from './use-button-group-label';
 import useDrawerLabel from './use-drawer-label';
 import useHeadingLevelInSpotlightCard from './use-heading-level-in-spotlight-card';
 import useHrefInLinkItem from './use-href-in-link-item';
@@ -41,6 +42,7 @@ export default {
   'no-unsafe-style-overrides': noUnsafeStyleOverrides,
   'no-unsupported-drag-and-drop-libraries': noUnsupportedDragAndDropLibraries,
   'prefer-primitives': preferPrimitives,
+  'use-button-group-label': useButtonGroupLabel,
   'use-drawer-label': useDrawerLabel,
   'use-heading-level-in-spotlight-card': useHeadingLevelInSpotlightCard,
   'use-href-in-link-item': useHrefInLinkItem,

package/dist/esm/rules/use-button-group-label/index.js

@@ -0,0 +1,77 @@
+// eslint-disable-next-line import/no-extraneous-dependencies
+
+import { isNodeOfType } from 'eslint-codemod-utils';
+import { createLintRule } from '../utils/create-rule';
+var elementsAccessibleNameProps = ['label', 'titleId'];
+var rule = createLintRule({
+  meta: {
+    name: 'use-button-group-label',
+    type: 'suggestion',
+    docs: {
+      description: 'Ensures button groups are described to assistive technology by a direct label or by another element.',
+      recommended: true,
+      severity: 'warn'
+    },
+    messages: {
+      missingLabelProp: 'Missing accessible name. If there is no visible content to associate use `label` prop, otherwise pass id of element to `titleId` prop to be associated as label.',
+      labelPropShouldHaveContents: 'Define string that labels the interactive element.',
+      titleIdShouldHaveValue: '`titleId` should reference the id of element that define accessible name.',
+      noBothPropsUsage: 'Do not include both `titleId` and `label` properties. Use `titleId` if the label text is available in the DOM to reference it, otherwise use `label` to provide accessible name explicitly.'
+    },
+    hasSuggestions: true
+  },
+  create: function create(context) {
+    var contextLocalIdentifier = [];
+    return {
+      ImportDeclaration: function ImportDeclaration(node) {
+        if (node.source.value === '@atlaskit/button') {
+          if (node.specifiers.length) {
+            var defaultImport = node.specifiers.filter(function (spec) {
+              return spec.type === 'ImportSpecifier';
+            });
+            if (defaultImport && defaultImport.length) {
+              var local = defaultImport[0].local;
+              contextLocalIdentifier.push(local.name);
+            }
+          }
+        }
+      },
+      JSXElement: function JSXElement(node) {
+        if (!isNodeOfType(node, 'JSXElement')) {
+          return;
+        }
+        if (!isNodeOfType(node.openingElement.name, 'JSXIdentifier')) {
+          return;
+        }
+        var name = node.openingElement.name.name;
+        if (contextLocalIdentifier.includes(name)) {
+          var componentLabelProps = node.openingElement.attributes.filter(function (attr) {
+            return isNodeOfType(attr, 'JSXAttribute') && isNodeOfType(attr.name, 'JSXIdentifier') && elementsAccessibleNameProps.includes(attr.name.name);
+          });
+          if (componentLabelProps.length === 1) {
+            var prop = componentLabelProps[0];
+            if ('value' in prop && prop.value) {
+              if (isNodeOfType(prop.value, 'Literal') && !prop.value.value || isNodeOfType(prop.value, 'JSXExpressionContainer') && !prop.value.expression) {
+                context.report({
+                  node: prop,
+                  messageId: prop.name.name === 'label' ? 'labelPropShouldHaveContents' : 'titleIdShouldHaveValue'
+                });
+              }
+            }
+          } else if (componentLabelProps.length > 1) {
+            context.report({
+              node: node.openingElement,
+              messageId: 'noBothPropsUsage'
+            });
+          } else {
+            context.report({
+              node: node.openingElement,
+              messageId: 'missingLabelProp'
+            });
+          }
+        }
+      }
+    };
+  }
+});
+export default rule;

package/dist/esm/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.js

@@ -1,31 +1,20 @@
 import { isNodeOfType } from 'eslint-codemod-utils';
-
-// FIXME: This is only loosely typed
-
+export var SPREAD_SYNTAX = Symbol('SPREAD_SYNTAX');
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
 export var convertASTObjectExpressionToJSObject = function convertASTObjectExpressionToJSObject(styles) {
-  var styleObj = {};
+  var styleObj = {
+    unsupported: []
+  };
 
-  // if we see any spread props we stop and return false to indicate this is unsupported
+  // if we see any spread props we indicate that as unsupported
   if (!styles.properties.every(function (prop) {
     return isNodeOfType(prop, 'Property');
   })) {
-    return false;
+    styleObj.unsupported.push(SPREAD_SYNTAX);
   }
-
-  // TODO: https://product-fabric.atlassian.net/browse/DSP-16055
-  // We need to harden this logic asap.
-  // It currently generates a false positive for:
-  // styled.div({
-  //  marginTop: "0px",
-  //  marginBottom: blah(...),
-  // })
-  // as the value for `marginBottom` is not a string nor a `token` call, it is just skipped
-  // from the resulting map and this is inaccurate.
   styles.properties.forEach(function (prop) {
-    // cases we want to skip (see note above)
     if (!isNodeOfType(prop, 'Property')) {
       return;
     }
@@ -36,28 +25,30 @@ export var convertASTObjectExpressionToJSObject = function convertASTObjectExpre
     // a literal string value, the base case
     if (isNodeOfType(prop.value, 'Literal') && typeof prop.value.value === 'string') {
       styleObj[prop.key.name] = prop.value.value;
+      return;
     }
 
     // try to handle a direct call to `token`
     if (isNodeOfType(prop.value, 'CallExpression')) {
-      var _callExpression$argum;
       var callExpression = prop.value;
-      // skip if not a call to `token`
-      if (!isNodeOfType(callExpression.callee, 'Identifier') || callExpression.callee.name !== 'token') {
-        return;
+      // strictly handle calls to `token`
+      if (isNodeOfType(callExpression.callee, 'Identifier') && callExpression.callee.name === 'token') {
+        // only two valid cases are supported
+        // one argument  => token('space.100')
+        // two arguments => token('space.100', '8px')
+        if ((callExpression.arguments.length === 1 || callExpression.arguments.length === 2) && isNodeOfType(callExpression.arguments[0], 'Literal') && (typeof callExpression.arguments[1] === 'undefined' || isNodeOfType(callExpression.arguments[1], 'Literal'))) {
+          var _callExpression$argum;
+          styleObj[prop.key.name] = {
+            tokenName: String(callExpression.arguments[0].value),
+            fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
+          };
+          return;
+        }
       }
-
-      // only two valid cases are supported
-      // one argument  => token('space.100')
-      // two arguments => token('space.100', '8px')
-      if (callExpression.arguments.length !== 1 && callExpression.arguments.length !== 2 || !isNodeOfType(callExpression.arguments[0], 'Literal') || callExpression.arguments[1] && !isNodeOfType(callExpression.arguments[1], 'Literal')) {
-        return;
-      }
-      styleObj[prop.key.name] = {
-        tokenName: String(callExpression.arguments[0].value),
-        fallbackValue: (_callExpression$argum = callExpression.arguments[1]) !== null && _callExpression$argum !== void 0 && _callExpression$argum.value ? String(callExpression.arguments[1].value) : undefined
-      };
     }
+
+    // if we get here we have an unsupported value
+    styleObj.unsupported.push(prop.key.name);
   });
   return styleObj;
 };

package/dist/esm/rules/use-primitives/utils/is-valid-css-properties-to-transform.js

@@ -1,4 +1,6 @@
 import _typeof from "@babel/runtime/helpers/typeof";
+import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
+var _excluded = ["unsupported"];
 import { isNodeOfType } from 'eslint-codemod-utils';
 import { supportedStylesMap } from '../transformers/css-to-xcss';
 import { convertASTObjectExpressionToJSObject } from './convert-ast-object-expression-to-js-object';
@@ -8,9 +10,11 @@ export var isValidCssPropertiesToTransform = function isValidCssPropertiesToTran
   if (!cssObjectExpression || !isNodeOfType(cssObjectExpression, 'ObjectExpression')) {
     return false;
   }
-  var cssObject = convertASTObjectExpressionToJSObject(cssObjectExpression);
-  // Bail if there are less or more than 1 styles defined
-  if (!cssObject || Object.keys(cssObject).length !== 1) {
+  var _convertASTObjectExpr = convertASTObjectExpressionToJSObject(cssObjectExpression),
+    unsupported = _convertASTObjectExpr.unsupported,
+    cssObject = _objectWithoutProperties(_convertASTObjectExpr, _excluded);
+  // Bail if there are any unsupported styles
+  if (unsupported.length > 0 || Object.keys(cssObject).length !== 1) {
     return false;
   }
   // Short-circuit when token calls are found but pattern is not enabled in config

package/dist/types/index.codegen.d.ts

@@ -19,6 +19,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
@@ -40,6 +41,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -22,6 +22,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -17,6 +17,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types/rules/index.codegen.d.ts

@@ -19,6 +19,7 @@ declare const _default: {
     'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
+    'use-button-group-label': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;

package/dist/types/rules/use-button-group-label/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts

@@ -1,14 +1,18 @@
+import type { CSSProperties } from 'react';
 import type { Rule } from 'eslint';
 import { ObjectExpression } from 'eslint-codemod-utils';
+export declare const SPREAD_SYNTAX: unique symbol;
 type Token = {
     tokenName: string;
     fallbackValue: string | undefined;
 };
 export type CSSPropStyleObject = {
-    [key: string]: string | number | Token;
+    [key in keyof CSSProperties]: string | number | Token;
+} & {
+    unsupported: (keyof CSSProperties | typeof SPREAD_SYNTAX)[];
 };
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
-export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject | false;
+export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject;
 export {};

package/dist/types-ts4.5/index.codegen.d.ts

@@ -19,6 +19,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
             '@atlaskit/design-system/prefer-primitives': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;
@@ -40,6 +41,7 @@ export declare const configs: {
             '@atlaskit/design-system/no-unsafe-design-token-usage': string;
             '@atlaskit/design-system/no-unsafe-style-overrides': string;
             '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+            '@atlaskit/design-system/use-button-group-label': string;
             '@atlaskit/design-system/use-drawer-label': string;
             '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
             '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types-ts4.5/presets/all.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::6efa1e48692b3e287d6dfcd500a5f0ab>>
+ * @codegen <<SignedSource::d1a459e1ea71650f65b2890dc86cc398>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -22,6 +22,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
         '@atlaskit/design-system/prefer-primitives': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types-ts4.5/presets/recommended.codegen.d.ts

@@ -1,6 +1,6 @@
 /**
  * THIS FILE WAS CREATED VIA CODEGEN DO NOT MODIFY {@see http://go/af-codegen}
- * @codegen <<SignedSource::be810d87ec2d253e3b053dc06ff1b99a>>
+ * @codegen <<SignedSource::3b93cfbbe0ea14514b9600509632394b>>
  * @codegenCommand yarn workspace @atlaskit/eslint-plugin-design-system codegen
  */
 declare const _default: {
@@ -17,6 +17,7 @@ declare const _default: {
         '@atlaskit/design-system/no-unsafe-design-token-usage': string;
         '@atlaskit/design-system/no-unsafe-style-overrides': string;
         '@atlaskit/design-system/no-unsupported-drag-and-drop-libraries': string;
+        '@atlaskit/design-system/use-button-group-label': string;
         '@atlaskit/design-system/use-drawer-label': string;
         '@atlaskit/design-system/use-heading-level-in-spotlight-card': string;
         '@atlaskit/design-system/use-href-in-link-item': string;

package/dist/types-ts4.5/rules/index.codegen.d.ts

@@ -23,6 +23,7 @@ declare const _default: {
     'no-unsafe-style-overrides': import("eslint").Rule.RuleModule;
     'no-unsupported-drag-and-drop-libraries': import("eslint").Rule.RuleModule;
     'prefer-primitives': import("eslint").Rule.RuleModule;
+    'use-button-group-label': import("eslint").Rule.RuleModule;
     'use-drawer-label': import("eslint").Rule.RuleModule;
     'use-heading-level-in-spotlight-card': import("eslint").Rule.RuleModule;
     'use-href-in-link-item': import("eslint").Rule.RuleModule;

package/dist/types-ts4.5/rules/use-button-group-label/index.d.ts

@@ -0,0 +1,3 @@
+import type { Rule } from 'eslint';
+declare const rule: Rule.RuleModule;
+export default rule;

package/dist/types-ts4.5/rules/use-primitives/utils/convert-ast-object-expression-to-js-object.d.ts

@@ -1,14 +1,18 @@
+import type { CSSProperties } from 'react';
 import type { Rule } from 'eslint';
 import { ObjectExpression } from 'eslint-codemod-utils';
+export declare const SPREAD_SYNTAX: unique symbol;
 type Token = {
     tokenName: string;
     fallbackValue: string | undefined;
 };
 export type CSSPropStyleObject = {
-    [key: string]: string | number | Token;
+    [key in keyof CSSProperties]: string | number | Token;
+} & {
+    unsupported: (keyof CSSProperties | typeof SPREAD_SYNTAX)[];
 };
 /**
  * Note: Not recursive. Only handles top level key/value pairs
  */
-export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject | false;
+export declare const convertASTObjectExpressionToJSObject: (styles: ObjectExpression & Partial<Rule.NodeParentExtension>) => CSSPropStyleObject;
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@atlaskit/eslint-plugin-design-system",
   "description": "The essential plugin for use with the Atlassian Design System.",
-  "version": "8.19.2",
+  "version": "8.21.0",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"