@atlaskit/radio - npm Package Compare versions

Comparing version 5.5.2 to 5.6.0

CHANGELOG.md

 # @atlaskit/radio
 
+## 5.6.0
+
+### Minor Changes
+
+- [`b257978b66a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b257978b66a) - [ux] reduce the border from 2px to 1px
+
 ## 5.5.2
@@ -4,0 +10,0 @@

dist/cjs/radio.js

@@ -14,2 +14,3 @@ "use strict";
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
@@ -22,3 +23,3 @@ var _components = _interopRequireDefault(require("@atlaskit/theme/components"));
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.5.2";
+var packageVersion = "5.6.0";
 var fontFamily = (0, _constants.fontFamily)();
@@ -49,2 +50,3 @@ var noop = _noop.default;
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
@@ -65,4 +67,5 @@ The circle should be 14px * 14px centred in a 24px * 24px box.
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
+  /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
+    inner circle not be centred at various zoom levels */
+  border: "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
   borderRadius: '50%',
@@ -69,0 +72,0 @@ MozAppearance: 'none',

dist/cjs/styles.js

@@ -7,2 +7,3 @@ "use strict";
 exports.default = getRadioCustomProperties;
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
@@ -21,4 +22,4 @@ var radioThemeColors = {
     dotActive: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
-    border: "var(--ds-border-input, ".concat(_colors.N40, ")"),
-    borderHover: "var(--ds-border-input, ".concat(_colors.N40, ")"),
+    border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(_colors.N20, ")"),
@@ -38,3 +39,3 @@ borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
     dotActive: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
-    border: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
+    border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN80, ")"),
     borderHover: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
@@ -41,0 +42,0 @@ borderDisabled: "var(--ds-border-disabled, ".concat(_colors.DN10, ")"),

dist/cjs/version.json

 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.2",
+	"version": "5.6.0",
 	"sideEffects": false
 }

dist/es2019/radio.js

@@ -7,2 +7,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import __noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
@@ -13,3 +14,3 @@ import GlobalTheme from '@atlaskit/theme/components';
 const packageName = "@atlaskit/radio";
-const packageVersion = "5.5.2";
+const packageVersion = "5.6.0";
 const fontFamily = getFontFamily();
@@ -40,2 +41,3 @@ const noop = __noop;
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
@@ -56,4 +58,5 @@ The circle should be 14px * 14px centred in a 24px * 24px box.
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
+  /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
+    inner circle not be centred at various zoom levels */
+  border: `${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)'} solid var(--radio-border-color)`,
   borderRadius: '50%',
@@ -60,0 +63,0 @@ MozAppearance: 'none',

dist/es2019/styles.js

@@ -1,2 +0,3 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 const radioThemeColors = {
@@ -14,4 +15,4 @@ light: {
     dotActive: `var(--ds-icon-inverse, ${B400})`,
-    border: `var(--ds-border-input, ${N40})`,
-    borderHover: `var(--ds-border-input, ${N40})`,
+    border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
+    borderHover: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
     borderDisabled: `var(--ds-border-disabled, ${N20})`,
@@ -31,3 +32,3 @@ borderFocus: `var(--ds-border-focused, ${B100})`
     dotActive: `var(--ds-icon-inverse, ${DN10})`,
-    border: `var(--ds-border-input, ${DN80})`,
+    border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80})`,
     borderHover: `var(--ds-border-input, ${DN200})`,
@@ -34,0 +35,0 @@ borderDisabled: `var(--ds-border-disabled, ${DN10})`,

dist/es2019/version.json

 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.2",
+	"version": "5.6.0",
 	"sideEffects": false
 }

dist/esm/radio.js

@@ -9,2 +9,3 @@ import _extends from "@babel/runtime/helpers/extends";
 import __noop from '@atlaskit/ds-lib/noop';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { DN600, N80, N900 } from '@atlaskit/theme/colors';
@@ -15,3 +16,3 @@ import GlobalTheme from '@atlaskit/theme/components';
 var packageName = "@atlaskit/radio";
-var packageVersion = "5.5.2";
+var packageVersion = "5.6.0";
 var fontFamily = getFontFamily();
@@ -42,2 +43,3 @@ var noop = __noop;
   display: 'flex',
+  // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
   /*
@@ -58,4 +60,5 @@ The circle should be 14px * 14px centred in a 24px * 24px box.
   backgroundColor: 'var(--radio-background-color)',
-  /* Border should be 2px, multiply by 24/14 to offset scale */
-  border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
+  /* Border should multiply by 24/14 to offset scale, a scale of 12 / 7 is to fix a Chrome bug that makes the circle become an oval and the
+    inner circle not be centred at various zoom levels */
+  border: "".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
   borderRadius: '50%',
@@ -62,0 +65,0 @@ MozAppearance: 'none',

dist/esm/styles.js

@@ -1,2 +0,3 @@
-import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
+import { getBooleanFF } from '@atlaskit/platform-feature-flags';
+import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
 var radioThemeColors = {
@@ -14,4 +15,4 @@ light: {
     dotActive: "var(--ds-icon-inverse, ".concat(B400, ")"),
-    border: "var(--ds-border-input, ".concat(N40, ")"),
-    borderHover: "var(--ds-border-input, ".concat(N40, ")"),
+    border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
+    borderHover: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
     borderDisabled: "var(--ds-border-disabled, ".concat(N20, ")"),
@@ -31,3 +32,3 @@ borderFocus: "var(--ds-border-focused, ".concat(B100, ")")
     dotActive: "var(--ds-icon-inverse, ".concat(DN10, ")"),
-    border: "var(--ds-border-input, ".concat(DN80, ")"),
+    border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80, ")"),
     borderHover: "var(--ds-border-input, ".concat(DN200, ")"),
@@ -34,0 +35,0 @@ borderDisabled: "var(--ds-border-disabled, ".concat(DN10, ")"),

dist/esm/version.json

 {
 	"name": "@atlaskit/radio",
-	"version": "5.5.2",
+	"version": "5.6.0",
 	"sideEffects": false
 }

package.json

 {
   "name": "@atlaskit/radio",
-  "version": "5.5.2",
+  "version": "5.6.0",
   "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
@@ -42,2 +42,3 @@ "publishConfig": {
     "@atlaskit/ds-lib": "^2.2.0",
+    "@atlaskit/platform-feature-flags": "^0.2.0",
     "@atlaskit/theme": "^12.5.0",
@@ -61,2 +62,3 @@ "@atlaskit/tokens": "^1.4.0",
     "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
+    "@atlassian/feature-flags-test-utils": "*",
     "@testing-library/react": "^12.1.5",
@@ -91,4 +93,9 @@ "react-dom": "^16.8.0",
   },
+  "platform-feature-flags": {
+    "platform.design-system-team.update-border-input_ff9l1": {
+      "type": "boolean"
+    }
+  },
   "homepage": "https://atlassian.design/components/radio/",
   "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
 }

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

122390

increased by2.2%

Lines of code

1607

increased by0.75%

Worsened metrics

Dependency count

8

increased by14.29%

Dev dependency count

14

increased by7.69%

Dependency changes

• + Added@atlaskit/platform-feature-flags@^0.2.0

• + Added@atlaskit/platform-feature-flags@0.2.6(transitive)