@atlaskit/radio 8.4.1 → 8.4.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (10) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/codemods/migrations/migrate-aria-labelledby.tsx +2 -2
  3. package/codemods/utils.tsx +23 -12
  4. package/dist/cjs/radio.compiled.css +9 -1
  5. package/dist/cjs/radio.js +16 -3
  6. package/dist/es2019/radio.compiled.css +8 -0
  7. package/dist/es2019/radio.js +16 -3
  8. package/dist/esm/radio.compiled.css +9 -1
  9. package/dist/esm/radio.js +16 -3
  10. package/package.json +6 -3
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 8.4.3
4
+
5
+ ### Patch Changes
6
+
7
+ - [`d2af0dc3a08f3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/d2af0dc3a08f3) -
8
+ Internal only CSS refactor to eliminate nested CSS selectors in favor of an atomic-friendly
9
+ styling approach. This change is behind the platform-radio-atomic-styles feature gate.
10
+ - Updated dependencies
11
+
12
+ ## 8.4.2
13
+
14
+ ### Patch Changes
15
+
16
+ - Updated dependencies
17
+
3
18
  ## 8.4.1
4
19
 
5
20
  ### Patch Changes
package/codemods/migrations/migrate-aria-labelledby.tsx CHANGED
@@ -1,13 +1,13 @@
1
1
  import { createRenameFuncFor } from '../utils';
2
2
 
3
- export const migrateRadioAriaLabelledby = createRenameFuncFor(
3
+ export const migrateRadioAriaLabelledby: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameFuncFor(
4
4
  '@atlaskit/radio',
5
5
  'Radio',
6
6
  'aria-labelledby',
7
7
  'labelId',
8
8
  );
9
9
 
10
- export const migrateRadioGroupAriaLabelledby = createRenameFuncFor(
10
+ export const migrateRadioGroupAriaLabelledby: (j: import("jscodeshift/src/core").JSCodeshift, source: import("jscodeshift/src/Collection").Collection<Node>) => void = createRenameFuncFor(
11
11
  '@atlaskit/radio',
12
12
  'RadioGroup',
13
13
  'aria-labelledby',
package/codemods/utils.tsx CHANGED
@@ -20,7 +20,7 @@ export function getNamedSpecifier(
20
20
  source: any,
21
21
  specifier: string,
22
22
  importName: string,
23
- ) {
23
+ ): any {
24
24
  const specifiers = source
25
25
  .find(j.ImportDeclaration)
26
26
  .filter((path: ASTPath<ImportDeclaration>) => path.node.source.value === specifier)
@@ -61,7 +61,7 @@ export function getJSXAttributesByName(
61
61
  });
62
62
  }
63
63
 
64
- export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string) {
64
+ export function hasImportDeclaration(j: core.JSCodeshift, source: any, importPath: string): boolean {
65
65
  const imports = source
66
66
  .find(j.ImportDeclaration)
67
67
  .filter(
@@ -78,7 +78,7 @@ export function findIdentifierAndReplaceAttribute(
78
78
  identifierName: string,
79
79
  searchAttr: string,
80
80
  replaceWithAttr: string,
81
- ) {
81
+ ): void {
82
82
  source
83
83
  .find(j.JSXElement)
84
84
  .find(j.JSXOpeningElement)
@@ -136,7 +136,7 @@ export function addCommentToStartOfFile({
136
136
  j: core.JSCodeshift;
137
137
  base: Collection<Node>;
138
138
  message: string;
139
- }) {
139
+ }): void {
140
140
  addCommentBefore({
141
141
  j,
142
142
  target: base.find(j.Program),
@@ -152,7 +152,7 @@ export function addCommentBefore({
152
152
  j: core.JSCodeshift;
153
153
  target: Collection<Program> | Collection<ImportDeclaration>;
154
154
  message: string;
155
- }) {
155
+ }): void {
156
156
  const content: string = ` TODO: (from codemod) ${clean(message)} `;
157
157
  target.forEach((path: ASTPath<Program | ImportDeclaration>) => {
158
158
  path.value.comments = path.value.comments || [];
@@ -178,7 +178,7 @@ export function tryCreateImport({
178
178
  base: Collection<any>;
179
179
  relativeToPackage: string;
180
180
  packageName: string;
181
- }) {
181
+ }): void {
182
182
  const exists: boolean =
183
183
  base.find(j.ImportDeclaration).filter((path) => path.value.source.value === packageName)
184
184
  .length > 0;
@@ -203,7 +203,7 @@ export function addToImport({
203
203
  base: Collection<any>;
204
204
  importSpecifier: ImportSpecifier | ImportDefaultSpecifier;
205
205
  packageName: string;
206
- }) {
206
+ }): void {
207
207
  base
208
208
  .find(j.ImportDeclaration)
209
209
  .filter((path) => path.value.source.value === packageName)
@@ -223,7 +223,7 @@ export function addToImport({
223
223
  });
224
224
  }
225
225
 
226
- export const createRenameFuncFor =
226
+ export const createRenameFuncFor: (component: string, importName: string, from: string, to: string) => (j: core.JSCodeshift, source: Collection<Node>) => void =
227
227
  (component: string, importName: string, from: string, to: string) =>
228
228
  (j: core.JSCodeshift, source: Collection<Node>) => {
229
229
  const specifier = getNamedSpecifier(j, source, component, importName);
@@ -255,7 +255,7 @@ export const createRenameFuncFor =
255
255
  // }
256
256
  };
257
257
 
258
- export const createRemoveFuncFor =
258
+ export const createRemoveFuncFor: (component: string, importName: string, prop: string, comment?: string) => (j: core.JSCodeshift, source: Collection<Node>) => void =
259
259
  (component: string, importName: string, prop: string, comment?: string) =>
260
260
  (j: core.JSCodeshift, source: Collection<Node>) => {
261
261
  const specifier =
@@ -276,7 +276,12 @@ export const createRemoveFuncFor =
276
276
  });
277
277
  };
278
278
 
279
- export const createRenameImportFor =
279
+ export const createRenameImportFor: ({ componentName, newComponentName, oldPackagePath, newPackagePath, }: {
280
+ componentName: string;
281
+ newComponentName?: string;
282
+ oldPackagePath: string;
283
+ newPackagePath: string;
284
+ }) => (j: core.JSCodeshift, source: Collection<Node>) => void =
280
285
  ({
281
286
  componentName,
282
287
  newComponentName,
@@ -357,7 +362,11 @@ export const createRenameImportFor =
357
362
  .remove();
358
363
  };
359
364
 
360
- export const createRemoveImportsFor =
365
+ export const createRemoveImportsFor: ({ importsToRemove, packagePath, comment, }: {
366
+ importsToRemove: string[];
367
+ packagePath: string;
368
+ comment: string;
369
+ }) => (j: core.JSCodeshift, source: Collection<Node>) => void =
361
370
  ({
362
371
  importsToRemove,
363
372
  packagePath,
@@ -427,7 +436,9 @@ export const createRemoveImportsFor =
427
436
  }
428
437
  };
429
438
 
430
- export const createTransformer =
439
+ export const createTransformer: (component: string, migrates: {
440
+ (j: core.JSCodeshift, source: Collection<Node>): void;
441
+ }[]) => (fileInfo: FileInfo, api: API, options: Options) => string =
431
442
  (component: string, migrates: { (j: core.JSCodeshift, source: Collection<Node>): void }[]) =>
432
443
  (fileInfo: FileInfo, { jscodeshift: j }: API, options: Options) => {
433
444
  const source: Collection<Node> = j(fileInfo.source);
package/dist/cjs/radio.compiled.css CHANGED
@@ -6,8 +6,11 @@
6
6
  ._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
7
7
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
8
8
  ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
9
- ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151ddza{--radio-border-color:var(--_vnm8xo)}
9
+ ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._11511pl2{--radio-border-color:var(--_1ufdgqf)}
10
+ ._1151ddza{--radio-border-color:var(--_vnm8xo)}
11
+ ._1151ua6f{--radio-border-color:var(--_m4cp67)}
10
12
  ._11jy1j4g:checked{--radio-border-color:var(--_1gcp7nr)}
13
+ ._11jyua6f:checked{--radio-border-color:var(--_m4cp67)}
11
14
  ._12ji1r31{outline-color:currentColor}
12
15
  ._12y31o36{outline-width:medium}
13
16
  ._13diglyw{-moz-appearance:none}
@@ -24,9 +27,11 @@
24
27
  ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
25
28
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
26
29
  ._1q6q1kd8{--radio-background-color:var(--_4mkb4g)}
30
+ ._1q6q1ouc{--radio-background-color:var(--_r5pknd)}
27
31
  ._1qdg120g:after{height:.6pc}
28
32
  ._1qu2glyw{outline-style:none}
29
33
  ._1s6weh7q{--radio-dot-color:var(--_jf353p)}
34
+ ._1s6wsnw8{--radio-dot-color:var(--_1xmcmw9)}
30
35
  ._2kbk1ouc:disabled:checked{--radio-background-color:var(--_r5pknd)}
31
36
  ._4cvr1h6o{align-items:center}
32
37
  ._4cvr1y6m{align-items:flex-start}
@@ -34,6 +39,7 @@
34
39
  ._4rya1ouc:disabled{--radio-background-color:var(--_r5pknd)}
35
40
  ._4t3i1tcg{height:24px}
36
41
  ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
42
+ ._80om13gf{cursor:not-allowed}
37
43
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
38
44
  ._aetrb3bt:after{content:""}
39
45
  ._bfhk4t47{background-color:var(--radio-background-color)}
@@ -47,9 +53,11 @@
47
53
  ._mqf87wap[data-disabled]{color:var(--_1ynhf1h)}
48
54
  ._pmm4snw8:disabled[data-invalid]{--radio-dot-color:var(--_1xmcmw9)}
49
55
  ._s7n4jp4b{vertical-align:top}
56
+ ._syaz7wap{color:var(--_1ynhf1h)}
50
57
  ._syazovqm{color:var(--_5xk3r4)}
51
58
  ._t9ec1soj{transform:scale(.625)}
52
59
  ._tqbwidpf{--radio-dot-opacity:0}
60
+ ._tqbwt94y{--radio-dot-opacity:1px}
53
61
  ._vchhusvi{box-sizing:border-box}
54
62
  ._wml0snw8:disabled:checked{--radio-dot-color:var(--_1xmcmw9)}
55
63
  ._wstuglyw{-webkit-appearance:none}
package/dist/cjs/radio.js CHANGED
@@ -15,6 +15,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
15
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
16
16
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
17
17
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  var _colors = require("@atlaskit/theme/colors");
19
20
  var _excluded = ["ariaLabel", "aria-labelledby", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "labelId", "name", "onChange", "value", "testId", "analyticsContext"]; /// <reference types="node" />
20
21
  // for typing `process`
@@ -24,7 +25,19 @@ var packageVersion = "0.0.0-development";
24
25
  var noop = _noop.default;
25
26
  var labelPaddingStyles = null;
26
27
  var labelStyles = null;
27
- var radioStyles = null;
28
+
29
+ // These styles should be removed when the platform-radio-atomic-styles feature gate is cleaned up.
30
+ var labelLegacyStyles = null;
31
+ var labelDisabledStyles = null;
32
+ var radioBaseStyles = null;
33
+ var radioInteractiveStyles = null;
34
+ var radioDisabledStyles = null;
35
+ var radioDisabledCheckedStyles = null;
36
+
37
+ // These styles are applied when the platform-radio-atomic-styles feature gate is disabled.
38
+ // When the feature gate is cleaned up, this style block can be removed.
39
+ var radioLegacyStyles = null;
40
+ var radioInvalidStyles = null;
28
41
  var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
29
42
  var ariaLabel = props.ariaLabel,
30
43
  ariaLabelledBy = props['aria-labelledby'],
@@ -55,7 +68,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
55
68
  return /*#__PURE__*/React.createElement("label", {
56
69
  "data-testid": testId && "".concat(testId, "--radio-label"),
57
70
  "data-disabled": isDisabled ? 'true' : undefined,
58
- className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _mqf87wap _g7st13gf"]),
71
+ className: (0, _runtime.ax)(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_mqf87wap _g7st13gf", isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_syaz7wap _80om13gf"]),
59
72
  style: {
60
73
  "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
61
74
  "--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")"))
@@ -80,7 +93,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
80
93
  ,
81
94
  "data-invalid": isInvalid ? 'true' : undefined,
82
95
  ref: ref,
83
- className: (0, _runtime.ax)(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd _iosi1j4g _11jy1j4g _f3ett94y _19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _2kbk1ouc _6cyr1ouc _n8t01ouc _1o5r1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1if11pl2 _bl0e1pl2 _92na1pl2 _awur1pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _wml0snw8 _tusmsnw8 _1c6fsnw8 _qfttsnw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8 _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c"]),
96
+ className: (0, _runtime.ax)(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_iosi1j4g _11jy1j4g _f3ett94y _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", !(0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _2kbk1ouc _6cyr1ouc _n8t01ouc _1o5r1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1if11pl2 _bl0e1pl2 _92na1pl2 _awur1pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _wml0snw8 _tusmsnw8 _1c6fsnw8 _qfttsnw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8", !isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_iosi1j4g _11jy1j4g _f3ett94y _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_80om13gf _1q6q1ouc _11511pl2 _1s6wsnw8", isDisabled && isChecked && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && (0, _platformFeatureFlags.fg)('platform-radio-atomic-styles') && "_1151ua6f _11jyua6f"]),
84
97
  style: {
85
98
  "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
86
99
  "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
package/dist/es2019/radio.compiled.css CHANGED
@@ -7,6 +7,9 @@
7
7
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
8
8
  ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
9
9
  ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._11511fmg{--radio-border-color:var(--ds-border-input,#7a869a)}
10
+ ._1151k8x7{--radio-border-color:var(--ds-icon-danger,#ff5630)}
11
+ ._1151zcs9{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
12
+ ._11jyk8x7:checked{--radio-border-color:var(--ds-icon-danger,#ff5630)}
10
13
  ._11jyzyvw:checked{--radio-border-color:var(--ds-background-selected-bold,#0052cc)}
11
14
  ._12ji1r31{outline-color:currentColor}
12
15
  ._12y31o36{outline-width:medium}
@@ -23,9 +26,11 @@
23
26
  ._1o9zidpf{flex-shrink:0}
24
27
  ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
25
28
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
29
+ ._1q6q1y1w{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
26
30
  ._1q6qmag2{--radio-background-color:var(--ds-background-input,#fafbfc)}
27
31
  ._1qdg120g:after{height:.6pc}
28
32
  ._1qu2glyw{outline-style:none}
33
+ ._1s6w15t7{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
29
34
  ._1s6w1qbb{--radio-dot-color:var(--ds-icon-inverse,#fafbfc)}
30
35
  ._2kbk1y1w:disabled:checked{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
31
36
  ._4cvr1h6o{align-items:center}
@@ -34,6 +39,7 @@
34
39
  ._4rya1y1w:disabled{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
35
40
  ._4t3i1tcg{height:24px}
36
41
  ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
42
+ ._80om13gf{cursor:not-allowed}
37
43
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
38
44
  ._aetrb3bt:after{content:""}
39
45
  ._bfhk4t47{background-color:var(--radio-background-color)}
@@ -47,9 +53,11 @@
47
53
  ._mqf81tvo[data-disabled]{color:var(--ds-text-disabled,#97a0af)}
48
54
  ._pmm415t7:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
49
55
  ._s7n4jp4b{vertical-align:top}
56
+ ._syaz1tvo{color:var(--ds-text-disabled,#97a0af)}
50
57
  ._syazj3m3{color:var(--ds-text,#091e42)}
51
58
  ._t9ec1soj{transform:scale(.625)}
52
59
  ._tqbwidpf{--radio-dot-opacity:0}
60
+ ._tqbwt94y{--radio-dot-opacity:1px}
53
61
  ._vchhusvi{box-sizing:border-box}
54
62
  ._wml015t7:disabled:checked{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
55
63
  ._wstuglyw{-webkit-appearance:none}
package/dist/es2019/radio.js CHANGED
@@ -8,13 +8,26 @@ import { ax, ix } from "@compiled/react/runtime";
8
8
  import { forwardRef, memo } from 'react';
9
9
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
10
10
  import __noop from '@atlaskit/ds-lib/noop';
11
+ import { fg } from '@atlaskit/platform-feature-flags';
11
12
  import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
12
13
  const packageName = "@atlaskit/radio";
13
14
  const packageVersion = "0.0.0-development";
14
15
  const noop = __noop;
15
16
  const labelPaddingStyles = null;
16
17
  const labelStyles = null;
17
- const radioStyles = null;
18
+
19
+ // These styles should be removed when the platform-radio-atomic-styles feature gate is cleaned up.
20
+ const labelLegacyStyles = null;
21
+ const labelDisabledStyles = null;
22
+ const radioBaseStyles = null;
23
+ const radioInteractiveStyles = null;
24
+ const radioDisabledStyles = null;
25
+ const radioDisabledCheckedStyles = null;
26
+
27
+ // These styles are applied when the platform-radio-atomic-styles feature gate is disabled.
28
+ // When the feature gate is cleaned up, this style block can be removed.
29
+ const radioLegacyStyles = null;
30
+ const radioInvalidStyles = null;
18
31
  const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
19
32
  const {
20
33
  ariaLabel,
@@ -44,7 +57,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
44
57
  return /*#__PURE__*/React.createElement("label", {
45
58
  "data-testid": testId && `${testId}--radio-label`,
46
59
  "data-disabled": isDisabled ? 'true' : undefined,
47
- className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazj3m3 _mqf81tvo _g7st13gf"])
60
+ className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazj3m3", !fg('platform-radio-atomic-styles') && "_mqf81tvo _g7st13gf", isDisabled && fg('platform-radio-atomic-styles') && "_syaz1tvo _80om13gf"])
48
61
  }, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
49
62
  // It is necessary only for Safari. It allows to render focus styles.
50
63
  tabIndex: 0,
@@ -65,7 +78,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
65
78
  ,
66
79
  "data-invalid": isInvalid ? 'true' : undefined,
67
80
  ref: ref,
68
- className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6qmag2 _11511fmg _1s6w1qbb _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd _iosizyvw _11jyzyvw _f3ett94y _19ybk8x7 _1d7pk8x7 _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1y1w _o1bd1y1w _2kbk1y1w _6cyr1y1w _n8t01y1w _1o5r1y1w _nxi61y1w _neoe1y1w _1el21y1w _lekrzcs9 _11v7zcs9 _1if1zcs9 _bl0ezcs9 _92nazcs9 _awurzcs9 _1f8czcs9 _s2ftzcs9 _17a1zcs9 _x48a15t7 _1ib215t7 _wml015t7 _tusm15t7 _1c6f15t7 _qftt15t7 _1yk915t7 _gdmb15t7 _pmm415t7 _y2mvjdfc _1bg41l7b _6tjkjdfc _awqn1l7b _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn"])
81
+ className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6qmag2 _11511fmg _1s6w1qbb _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !fg('platform-radio-atomic-styles') && "_iosizyvw _11jyzyvw _f3ett94y _y2mvjdfc _1bg41l7b _6tjkjdfc _awqn1l7b _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn", !fg('platform-radio-atomic-styles') && "_19ybk8x7 _1d7pk8x7 _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1y1w _o1bd1y1w _2kbk1y1w _6cyr1y1w _n8t01y1w _1o5r1y1w _nxi61y1w _neoe1y1w _1el21y1w _lekrzcs9 _11v7zcs9 _1if1zcs9 _bl0ezcs9 _92nazcs9 _awurzcs9 _1f8czcs9 _s2ftzcs9 _17a1zcs9 _x48a15t7 _1ib215t7 _wml015t7 _tusm15t7 _1c6f15t7 _qftt15t7 _1yk915t7 _gdmb15t7 _pmm415t7", !isDisabled && fg('platform-radio-atomic-styles') && "_iosizyvw _11jyzyvw _f3ett94y _y2mvjdfc _1bg41l7b _6tjkjdfc _awqn1l7b _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn", isDisabled && fg('platform-radio-atomic-styles') && "_80om13gf _1q6q1y1w _1151zcs9 _1s6w15t7", isDisabled && isChecked && fg('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && fg('platform-radio-atomic-styles') && "_1151k8x7 _11jyk8x7"])
69
82
  })), label ? /*#__PURE__*/React.createElement("span", {
70
83
  className: ax(["_85i5v77o _1q51v77o _y4ti1b66 _bozg1b66"])
71
84
  }, label) : null);
package/dist/esm/radio.compiled.css CHANGED
@@ -6,8 +6,11 @@
6
6
  ._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
7
7
  ._2rko1qll{border-radius:var(--ds-radius-full,50%)}
8
8
  ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
9
- ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151ddza{--radio-border-color:var(--_vnm8xo)}
9
+ ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._11511pl2{--radio-border-color:var(--_1ufdgqf)}
10
+ ._1151ddza{--radio-border-color:var(--_vnm8xo)}
11
+ ._1151ua6f{--radio-border-color:var(--_m4cp67)}
10
12
  ._11jy1j4g:checked{--radio-border-color:var(--_1gcp7nr)}
13
+ ._11jyua6f:checked{--radio-border-color:var(--_m4cp67)}
11
14
  ._12ji1r31{outline-color:currentColor}
12
15
  ._12y31o36{outline-width:medium}
13
16
  ._13diglyw{-moz-appearance:none}
@@ -24,9 +27,11 @@
24
27
  ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
25
28
  ._1q51v77o{padding-block-start:var(--ds-space-025,2px)}
26
29
  ._1q6q1kd8{--radio-background-color:var(--_4mkb4g)}
30
+ ._1q6q1ouc{--radio-background-color:var(--_r5pknd)}
27
31
  ._1qdg120g:after{height:.6pc}
28
32
  ._1qu2glyw{outline-style:none}
29
33
  ._1s6weh7q{--radio-dot-color:var(--_jf353p)}
34
+ ._1s6wsnw8{--radio-dot-color:var(--_1xmcmw9)}
30
35
  ._2kbk1ouc:disabled:checked{--radio-background-color:var(--_r5pknd)}
31
36
  ._4cvr1h6o{align-items:center}
32
37
  ._4cvr1y6m{align-items:flex-start}
@@ -34,6 +39,7 @@
34
39
  ._4rya1ouc:disabled{--radio-background-color:var(--_r5pknd)}
35
40
  ._4t3i1tcg{height:24px}
36
41
  ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
42
+ ._80om13gf{cursor:not-allowed}
37
43
  ._85i5v77o{padding-block-end:var(--ds-space-025,2px)}
38
44
  ._aetrb3bt:after{content:""}
39
45
  ._bfhk4t47{background-color:var(--radio-background-color)}
@@ -47,9 +53,11 @@
47
53
  ._mqf87wap[data-disabled]{color:var(--_1ynhf1h)}
48
54
  ._pmm4snw8:disabled[data-invalid]{--radio-dot-color:var(--_1xmcmw9)}
49
55
  ._s7n4jp4b{vertical-align:top}
56
+ ._syaz7wap{color:var(--_1ynhf1h)}
50
57
  ._syazovqm{color:var(--_5xk3r4)}
51
58
  ._t9ec1soj{transform:scale(.625)}
52
59
  ._tqbwidpf{--radio-dot-opacity:0}
60
+ ._tqbwt94y{--radio-dot-opacity:1px}
53
61
  ._vchhusvi{box-sizing:border-box}
54
62
  ._wml0snw8:disabled:checked{--radio-dot-color:var(--_1xmcmw9)}
55
63
  ._wstuglyw{-webkit-appearance:none}
package/dist/esm/radio.js CHANGED
@@ -10,13 +10,26 @@ import { ax, ix } from "@compiled/react/runtime";
10
10
  import { forwardRef, memo } from 'react';
11
11
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
12
12
  import __noop from '@atlaskit/ds-lib/noop';
13
+ import { fg } from '@atlaskit/platform-feature-flags';
13
14
  import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
14
15
  var packageName = "@atlaskit/radio";
15
16
  var packageVersion = "0.0.0-development";
16
17
  var noop = __noop;
17
18
  var labelPaddingStyles = null;
18
19
  var labelStyles = null;
19
- var radioStyles = null;
20
+
21
+ // These styles should be removed when the platform-radio-atomic-styles feature gate is cleaned up.
22
+ var labelLegacyStyles = null;
23
+ var labelDisabledStyles = null;
24
+ var radioBaseStyles = null;
25
+ var radioInteractiveStyles = null;
26
+ var radioDisabledStyles = null;
27
+ var radioDisabledCheckedStyles = null;
28
+
29
+ // These styles are applied when the platform-radio-atomic-styles feature gate is disabled.
30
+ // When the feature gate is cleaned up, this style block can be removed.
31
+ var radioLegacyStyles = null;
32
+ var radioInvalidStyles = null;
20
33
  var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
21
34
  var ariaLabel = props.ariaLabel,
22
35
  ariaLabelledBy = props['aria-labelledby'],
@@ -47,7 +60,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
47
60
  return /*#__PURE__*/React.createElement("label", {
48
61
  "data-testid": testId && "".concat(testId, "--radio-label"),
49
62
  "data-disabled": isDisabled ? 'true' : undefined,
50
- className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _mqf87wap _g7st13gf"]),
63
+ className: ax(["_11c8fhey _1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm", !fg('platform-radio-atomic-styles') && "_mqf87wap _g7st13gf", isDisabled && fg('platform-radio-atomic-styles') && "_syaz7wap _80om13gf"]),
51
64
  style: {
52
65
  "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
53
66
  "--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")"))
@@ -72,7 +85,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
72
85
  ,
73
86
  "data-invalid": isInvalid ? 'true' : undefined,
74
87
  ref: ref,
75
- className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd _iosi1j4g _11jy1j4g _f3ett94y _19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _2kbk1ouc _6cyr1ouc _n8t01ouc _1o5r1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1if11pl2 _bl0e1pl2 _92na1pl2 _awur1pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _wml0snw8 _tusmsnw8 _1c6fsnw8 _qfttsnw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8 _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c"]),
88
+ className: ax(["_18s8ze3t _19it3vzd _2rko1qll _12ji1r31 _1qu2glyw _12y31o36 _v56415j1 _1e0c1txw _1bsb1tcg _4t3i1tcg _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _13diglyw _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1soj _s7n4jp4b _wstuglyw _16r2ucr4 _14mj1qll _qc5orqeg _z0ai120g _1qdg120g _18postnw _aetrb3bt _1peq1xmd", !fg('platform-radio-atomic-styles') && "_iosi1j4g _11jy1j4g _f3ett94y _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", !fg('platform-radio-atomic-styles') && "_19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _4fps13gf _5ry313gf _qep213gf _180n13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _2kbk1ouc _6cyr1ouc _n8t01ouc _1o5r1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1if11pl2 _bl0e1pl2 _92na1pl2 _awur1pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _wml0snw8 _tusmsnw8 _1c6fsnw8 _qfttsnw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8", !isDisabled && fg('platform-radio-atomic-styles') && "_iosi1j4g _11jy1j4g _f3ett94y _y2mv15pg _1bg41l7b _6tjk15pg _awqn1l7b _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", isDisabled && fg('platform-radio-atomic-styles') && "_80om13gf _1q6q1ouc _11511pl2 _1s6wsnw8", isDisabled && isChecked && fg('platform-radio-atomic-styles') && "_tqbwt94y", isInvalid && !isDisabled && fg('platform-radio-atomic-styles') && "_1151ua6f _11jyua6f"]),
76
89
  style: {
77
90
  "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
78
91
  "--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "8.4.1",
3
+ "version": "8.4.3",
4
4
  "description": "A radio input allows users to select only one option from a number of choices. Radio is generally displayed in a radio group.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -37,7 +37,7 @@
37
37
  "@atlaskit/ds-lib": "^5.3.0",
38
38
  "@atlaskit/platform-feature-flags": "^1.1.0",
39
39
  "@atlaskit/theme": "^21.0.0",
40
- "@atlaskit/tokens": "^10.0.0",
40
+ "@atlaskit/tokens": "^11.0.0",
41
41
  "@babel/runtime": "^7.0.0",
42
42
  "@compiled/react": "^0.18.6"
43
43
  },
@@ -53,7 +53,7 @@
53
53
  "@atlaskit/docs": "^11.3.0",
54
54
  "@atlaskit/form": "^15.3.0",
55
55
  "@atlaskit/link": "^3.3.0",
56
- "@atlaskit/primitives": "^17.1.0",
56
+ "@atlaskit/primitives": "^18.0.0",
57
57
  "@atlaskit/section-message": "^8.12.0",
58
58
  "@atlassian/ssr-tests": "workspace:^",
59
59
  "@testing-library/react": "^16.3.0",
@@ -90,6 +90,9 @@
90
90
  "platform-feature-flags": {
91
91
  "platform-visual-refresh-icons": {
92
92
  "type": "boolean"
93
+ },
94
+ "platform-radio-atomic-styles": {
95
+ "type": "boolean"
93
96
  }
94
97
  }
95
98
  }