@atlaskit/eslint-plugin-design-system 7.0.1 → 7.0.3

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/eslint-plugin-design-system
 
+## 7.0.3
+
+### Patch Changes
+
+- [`81c15e86b18`](https://bitbucket.org/atlassian/atlassian-frontend/commits/81c15e86b18) - Improved autofix for 50% border radius to shape token.
+
+## 7.0.2
+
+### Patch Changes
+
+- [`50cf866a219`](https://bitbucket.org/atlassian/atlassian-frontend/commits/50cf866a219) - bump semver
+
 ## 7.0.1
 
 ### Patch Changes

package/dist/cjs/rules/ensure-design-token-usage/shape.js

@@ -15,16 +15,21 @@ var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBot
 var borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
 var radiusValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
   return t.name.startsWith('border.radius');
+})
+// we prefer using the default (border.radius) over its aliases
+.filter(function (t) {
+  return !t.name.startsWith('border.radius.100');
 }).map(function (t) {
-  var value = t.value === '4px' ? '3px' : t.value;
-  return [value, t.name];
-}));
+  return [t.value, t.cleanName];
+}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
+.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
+);
 exports.radiusValueToToken = radiusValueToToken;
 var borderWidthValueToToken = Object.fromEntries(_tokensRaw.shape.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {
-  return [t.value, t.name];
-}));
+  return [t.value, t.cleanName];
+}).concat([['2px', 'border.width']]));
 exports.borderWidthValueToToken = borderWidthValueToToken;
 function isRadiusProperty(propertyName) {
   return shapeProperties.includes(propertyName);

package/dist/cjs/rules/ensure-design-token-usage/spacing-utils.js

@@ -253,11 +253,14 @@ var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, c
   return final;
 };
 var emRegex = /(.*\d+)em$/;
+var percentageRegex = /(%$)/;
 var emToPixels = function emToPixels(value, fontSize) {
   if (typeof value === 'string') {
-    var match = value.match(emRegex);
-    if (match && typeof fontSize === 'number') {
-      return Number(match[1]) * fontSize;
+    var emMatch = value.match(emRegex);
+    if (emMatch && typeof fontSize === 'number') {
+      return Number(emMatch[1]) * fontSize;
+    } else if (value.match(percentageRegex)) {
+      return value;
     } else {
       return null;
     }
@@ -273,7 +276,7 @@ var removePixelSuffix = function removePixelSuffix(value) {
   return Number(typeof value === 'string' ? value.replace('px', '') : value);
 };
 exports.removePixelSuffix = removePixelSuffix;
-var invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(vw$)|(vh$)/;
+var invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
 var isValidSpacingValue = function isValidSpacingValue(value, fontSize) {
   if (typeof value === 'string') {
     if (invalidSpacingUnitRegex.test(value)) {

package/dist/cjs/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "7.0.1",
+	"version": "7.0.3",
 	"sideEffects": false
 }

package/dist/es2019/rules/ensure-design-token-usage/shape.js

@@ -2,11 +2,15 @@ import { isNodeOfType } from 'eslint-codemod-utils';
 import { shape as shapeTokens } from '@atlaskit/tokens/tokens-raw';
 const shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBottomRightRadius', 'borderBottomLeftRadius', 'borderRadius'];
 const borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
-export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.radius')).map(t => {
-  const value = t.value === '4px' ? '3px' : t.value;
-  return [value, t.name];
-}));
-export const borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.width')).map(t => [t.value, t.name]));
+export const radiusValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.radius'))
+// we prefer using the default (border.radius) over its aliases
+.filter(t => !t.name.startsWith('border.radius.100')).map(t => {
+  return [t.value, t.cleanName];
+}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
+.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
+);
+
+export const borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(t => t.name.startsWith('border.width')).map(t => [t.value, t.cleanName]).concat([['2px', 'border.width']]));
 export function isRadiusProperty(propertyName) {
   return shapeProperties.includes(propertyName);
 }

package/dist/es2019/rules/ensure-design-token-usage/spacing-utils.js

@@ -211,11 +211,14 @@ const getValueFromBinaryExpression = (node, context) => {
   return final;
 };
 const emRegex = /(.*\d+)em$/;
+const percentageRegex = /(%$)/;
 export const emToPixels = (value, fontSize) => {
   if (typeof value === 'string') {
-    const match = value.match(emRegex);
-    if (match && typeof fontSize === 'number') {
-      return Number(match[1]) * fontSize;
+    const emMatch = value.match(emRegex);
+    if (emMatch && typeof fontSize === 'number') {
+      return Number(emMatch[1]) * fontSize;
+    } else if (value.match(percentageRegex)) {
+      return value;
     } else {
       return null;
     }
@@ -229,7 +232,7 @@ export const removePixelSuffix = value => {
   }
   return Number(typeof value === 'string' ? value.replace('px', '') : value);
 };
-const invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(vw$)|(vh$)/;
+const invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
 export const isValidSpacingValue = (value, fontSize) => {
   if (typeof value === 'string') {
     if (invalidSpacingUnitRegex.test(value)) {

package/dist/es2019/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "7.0.1",
+	"version": "7.0.3",
 	"sideEffects": false
 }

package/dist/esm/rules/ensure-design-token-usage/shape.js

@@ -4,15 +4,21 @@ var shapeProperties = ['borderTopLeftRadius', 'borderTopRightRadius', 'borderBot
 var borderSizeProperties = ['borderWidth', 'outlineWidth', 'borderRightWidth', 'borderLeftWidth', 'borderTopWidth', 'borderBottomWidth', 'borderInlineWidth', 'borderBlockWidth'];
 export var radiusValueToToken = Object.fromEntries(shapeTokens.filter(function (t) {
   return t.name.startsWith('border.radius');
+})
+// we prefer using the default (border.radius) over its aliases
+.filter(function (t) {
+  return !t.name.startsWith('border.radius.100');
 }).map(function (t) {
-  var value = t.value === '4px' ? '3px' : t.value;
-  return [value, t.name];
-}));
+  return [t.value, t.cleanName];
+}).concat([['3px', 'border.radius']]) // add in an extra entry to resolve 3px to border.radius (normally 4px)
+.concat([['50%', 'border.radius.circle']]) // add in an extra entry to resolve 50% to border.radius.circle (normally 2002rem)
+);
+
 export var borderWidthValueToToken = Object.fromEntries(shapeTokens.filter(function (t) {
   return t.name.startsWith('border.width');
 }).map(function (t) {
-  return [t.value, t.name];
-}));
+  return [t.value, t.cleanName];
+}).concat([['2px', 'border.width']]));
 export function isRadiusProperty(propertyName) {
   return shapeProperties.includes(propertyName);
 }

package/dist/esm/rules/ensure-design-token-usage/spacing-utils.js

@@ -219,11 +219,14 @@ var getValueFromBinaryExpression = function getValueFromBinaryExpression(node, c
   return final;
 };
 var emRegex = /(.*\d+)em$/;
+var percentageRegex = /(%$)/;
 export var emToPixels = function emToPixels(value, fontSize) {
   if (typeof value === 'string') {
-    var match = value.match(emRegex);
-    if (match && typeof fontSize === 'number') {
-      return Number(match[1]) * fontSize;
+    var emMatch = value.match(emRegex);
+    if (emMatch && typeof fontSize === 'number') {
+      return Number(emMatch[1]) * fontSize;
+    } else if (value.match(percentageRegex)) {
+      return value;
     } else {
       return null;
     }
@@ -237,7 +240,7 @@ export var removePixelSuffix = function removePixelSuffix(value) {
   }
   return Number(typeof value === 'string' ? value.replace('px', '') : value);
 };
-var invalidSpacingUnitRegex = /(%$)|(\d+rem$)|(vw$)|(vh$)/;
+var invalidSpacingUnitRegex = /(\d+rem$)|(vw$)|(vh$)/;
 export var isValidSpacingValue = function isValidSpacingValue(value, fontSize) {
   if (typeof value === 'string') {
     if (invalidSpacingUnitRegex.test(value)) {

package/dist/esm/version.json

@@ -1,5 +1,5 @@
 {
 	"name": "@atlaskit/eslint-plugin-design-system",
-	"version": "7.0.1",
+	"version": "7.0.3",
 	"sideEffects": false
 }

package/dist/types/rules/ensure-design-token-usage/shape.d.ts

@@ -1,10 +1,6 @@
 import { EslintNode } from 'eslint-codemod-utils';
-export declare const radiusValueToToken: {
-    [k: string]: string;
-};
-export declare const borderWidthValueToToken: {
-    [k: string]: string;
-};
+export declare const radiusValueToToken: any;
+export declare const borderWidthValueToToken: any;
 export declare function isRadiusProperty(propertyName: string): boolean;
 export declare function isBorderSizeProperty(propertyName: string): boolean;
 export declare function isShapeProperty(propertyName: string): boolean;

package/dist/types-ts4.5/rules/ensure-design-token-usage/shape.d.ts

@@ -1,10 +1,6 @@
 import { EslintNode } from 'eslint-codemod-utils';
-export declare const radiusValueToToken: {
-    [k: string]: string;
-};
-export declare const borderWidthValueToToken: {
-    [k: string]: string;
-};
+export declare const radiusValueToToken: any;
+export declare const borderWidthValueToToken: any;
 export declare function isRadiusProperty(propertyName: string): boolean;
 export declare function isBorderSizeProperty(propertyName: string): boolean;
 export declare function isShapeProperty(propertyName: string): boolean;

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": "7.0.1",
+  "version": "7.0.3",
   "author": "Atlassian Pty Ltd",
   "publishConfig": {
     "registry": "https://registry.npmjs.org/"
@@ -33,12 +33,12 @@
     ".": "./src/index.tsx"
   },
   "dependencies": {
-    "@atlaskit/tokens": "^1.10.0",
+    "@atlaskit/tokens": "^1.11.0",
     "@babel/runtime": "^7.0.0",
     "@typescript-eslint/utils": "^5.48.1",
     "ajv": "^6.12.6",
     "eslint-codemod-utils": "^1.8.6",
-    "semver": "^7.3.0"
+    "semver": "^7.5.2"
   },
   "devDependencies": {
     "@atlaskit/ds-lib": "^2.2.0",