@atlaskit/radio 6.5.4 → 6.6.0

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/radio
 
+## 6.6.0
+
+### Minor Changes
+
+- [#168150](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/168150)
+  [`8189b94404af2`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8189b94404af2) -
+  Update radio to match new icon styles behind feature flag.
+
+## 6.5.5
+
+### Patch Changes
+
+- [#165531](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/165531)
+  [`57f451bda8919`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/57f451bda8919) -
+  Adds side-effect config to support Compiled css extraction in third-party apps
+
 ## 6.5.4
 
 ### Patch Changes

package/Radio/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/radio.js",
   "module": "../dist/esm/radio.js",
   "module:es2019": "../dist/es2019/radio.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/radio.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/RadioGroup/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/radio-group.js",
   "module": "../dist/esm/radio-group.js",
   "module:es2019": "../dist/es2019/radio-group.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/radio-group.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {

package/dist/cjs/radio.js

@@ -11,6 +11,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
 var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
 /**
@@ -19,7 +20,7 @@ var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecke
  */
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var packageName = "@atlaskit/radio";
-var packageVersion = "6.5.4";
+var packageVersion = "6.6.0";
 var noop = _noop.default;
 var labelPaddingStyles = (0, _react2.css)({
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
@@ -128,6 +129,15 @@ var radioStyles = (0, _react2.css)({
     '--radio-dot-color': "var(--ds-icon-disabled, ".concat(_colors.N70, ")")
   }
 });
+var newRadioStyles = (0, _react2.css)({
+  transform: 'scale(calc(7.5 / 12))',
+  // 15px
+  '&::after': {
+    width: 'calc(5.6px * 12 / 7)',
+    // 6px
+    height: 'calc(5.6px * 12 / 7)' // 6px
+  }
+});
 var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
   var ariaLabel = props.ariaLabel,
     _props$isDisabled = props.isDisabled,
@@ -173,7 +183,11 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
     // use :invalid selector
     ,
     "data-invalid": isInvalid ? 'true' : undefined,
-    css: radioStyles,
+    css: [radioStyles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+    (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    (0, _platformFeatureFlags.fg)('platform-icon-control-migration') && newRadioStyles],
     ref: ref
   })), label ? (0, _react2.jsx)("span", {
     css: labelPaddingStyles

package/dist/es2019/radio.js

@@ -9,9 +9,10 @@ import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 const packageName = "@atlaskit/radio";
-const packageVersion = "6.5.4";
+const packageVersion = "6.6.0";
 const noop = __noop;
 const labelPaddingStyles = css({
   padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
@@ -120,6 +121,15 @@ const radioStyles = css({
     '--radio-dot-color': `var(--ds-icon-disabled, ${N70})`
   }
 });
+const newRadioStyles = css({
+  transform: 'scale(calc(7.5 / 12))',
+  // 15px
+  '&::after': {
+    width: 'calc(5.6px * 12 / 7)',
+    // 6px
+    height: 'calc(5.6px * 12 / 7)' // 6px
+  }
+});
 const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
   const {
     ariaLabel,
@@ -164,7 +174,11 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // use :invalid selector
     ,
     "data-invalid": isInvalid ? 'true' : undefined,
-    css: radioStyles,
+    css: [radioStyles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-icon-control-migration') && newRadioStyles],
     ref: ref
   })), label ? jsx("span", {
     css: labelPaddingStyles

package/dist/esm/radio.js

@@ -11,9 +11,10 @@ import { forwardRef, memo } from 'react';
 import { css, jsx } from '@emotion/react';
 import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
 import __noop from '@atlaskit/ds-lib/noop';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
 var packageName = "@atlaskit/radio";
-var packageVersion = "6.5.4";
+var packageVersion = "6.6.0";
 var noop = __noop;
 var labelPaddingStyles = css({
   padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
@@ -122,6 +123,15 @@ var radioStyles = css({
     '--radio-dot-color': "var(--ds-icon-disabled, ".concat(N70, ")")
   }
 });
+var newRadioStyles = css({
+  transform: 'scale(calc(7.5 / 12))',
+  // 15px
+  '&::after': {
+    width: 'calc(5.6px * 12 / 7)',
+    // 6px
+    height: 'calc(5.6px * 12 / 7)' // 6px
+  }
+});
 var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
   var ariaLabel = props.ariaLabel,
     _props$isDisabled = props.isDisabled,
@@ -167,7 +177,11 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
     // use :invalid selector
     ,
     "data-invalid": isInvalid ? 'true' : undefined,
-    css: radioStyles,
+    css: [radioStyles,
+    // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-visual-refresh-icons') &&
+    // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
+    fg('platform-icon-control-migration') && newRadioStyles],
     ref: ref
   })), label ? jsx("span", {
     css: labelPaddingStyles

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/radio",
-	"version": "6.5.4",
+	"version": "6.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.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -20,14 +20,16 @@
 			]
 		}
 	},
-	"sideEffects": false,
+	"sideEffects": [
+		"**/*.compiled.css"
+	],
 	"atlaskit:src": "src/index.tsx",
 	"atlassian": {
 		"team": "Design System Team",
 		"runReact18": true,
 		"website": {
 			"name": "Radio",
-			"category": "Components"
+			"category": "Forms and input"
 		}
 	},
 	"af:exports": {
@@ -38,9 +40,10 @@
 	},
 	"dependencies": {
 		"@atlaskit/analytics-next": "^10.1.0",
-		"@atlaskit/ds-lib": "^3.1.0",
+		"@atlaskit/ds-lib": "^3.2.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/theme": "^14.0.0",
-		"@atlaskit/tokens": "^2.0.0",
+		"@atlaskit/tokens": "^2.3.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1"
 	},
@@ -50,13 +53,14 @@
 	"devDependencies": {
 		"@af/accessibility-testing": "*",
 		"@af/integration-testing": "*",
-		"@atlaskit/checkbox": "^15.0.0",
+		"@af/visual-regression": "*",
+		"@atlaskit/checkbox": "^15.1.0",
 		"@atlaskit/ssr": "*",
 		"@atlaskit/visual-regression": "*",
 		"@atlassian/feature-flags-test-utils": "*",
 		"@testing-library/react": "^12.1.5",
 		"react-dom": "^16.8.0",
-		"storybook-addon-performance": "^0.16.0",
+		"storybook-addon-performance": "^0.17.3",
 		"typescript": "~5.4.2"
 	},
 	"keywords": [
@@ -84,5 +88,13 @@
 			"deprecation": "no-deprecated-imports"
 		}
 	},
-	"homepage": "https://atlassian.design/components/radio/"
+	"homepage": "https://atlassian.design/components/radio/",
+	"platform-feature-flags": {
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
+		},
+		"platform-icon-control-migration": {
+			"type": "boolean"
+		}
+	}
 }

package/types/package.json

@@ -3,7 +3,9 @@
   "main": "../dist/cjs/types.js",
   "module": "../dist/esm/types.js",
   "module:es2019": "../dist/es2019/types.js",
-  "sideEffects": false,
+  "sideEffects": [
+    "**/*.compiled.css"
+  ],
   "types": "../dist/types/types.d.ts",
   "typesVersions": {
     ">=4.5 <5.4": {