@atlaskit/radio 6.6.0 → 7.0.0

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 (8) hide show
  1. package/CHANGELOG.md +15 -0
  2. package/dist/cjs/radio.compiled.css +61 -0
  3. package/dist/cjs/radio.js +46 -135
  4. package/dist/es2019/radio.compiled.css +61 -0
  5. package/dist/es2019/radio.js +18 -135
  6. package/dist/esm/radio.compiled.css +61 -0
  7. package/dist/esm/radio.js +42 -135
  8. package/package.json +7 -6
package/CHANGELOG.md CHANGED
@@ -1,5 +1,20 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 7.0.0
4
+
5
+ ### Major Changes
6
+
7
+ - [#177175](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/177175)
8
+ [`188698fbad962`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/188698fbad962) -
9
+ Migrated from `@emotion/react` to `@compiled/react` in order to improve performance, align with
10
+ the rest of the Atlaskit techstack, and support React 18 Streaming SSR. Please note, in order to
11
+ use this version of `@atlaskit/radio`, you will need to ensure that your bundler is configured to
12
+ handle `.css` imports correctly. Most bundlers come with built-in support for `.css` imports, so
13
+ you may not need to do anything. If you are using a different bundler, please refer to the
14
+ documentation for that bundler to understand how to handle `.css` imports. For more information on
15
+ the migration, please refer to
16
+ [RFC-73 Migrating our components to Compiled CSS-in-JS](https://community.developer.atlassian.com/t/rfc-73-migrating-our-components-to-compiled-css-in-js/85953).
17
+
3
18
  ## 6.6.0
4
19
 
5
20
  ### Minor Changes
package/dist/cjs/radio.compiled.css ADDED
@@ -0,0 +1,61 @@
1
+
2
+ ._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
4
+ ._16r2ucr4:after{background:var(--radio-dot-color)}
5
+ ._18s8ze3t{margin:var(--ds-space-0,0)}
6
+ ._19itbyy8{border:var(--_1q9y51y)}
7
+ ._1yt41j1s{padding:var(--_1kppzk3)}
8
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
9
+ ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
10
+ ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151ddza{--radio-border-color:var(--_vnm8xo)}
11
+ ._11jy1j4g:checked{--radio-border-color:var(--_1gcp7nr)}
12
+ ._12ji1r31{outline-color:currentColor}
13
+ ._12y31o36{outline-width:medium}
14
+ ._13diglyw{-moz-appearance:none}
15
+ ._18postnw:after{position:absolute}
16
+ ._19ybua6f:checked[data-invalid], ._1d7pua6f[data-invalid]{--radio-border-color:var(--_m4cp67)}
17
+ ._1bah1h6o{justify-content:center}
18
+ ._1bsb1tcg{width:24px}
19
+ ._1e0c1txw{display:flex}
20
+ ._1o9zidpf{flex-shrink:0}
21
+ ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
22
+ ._1q6q1kd8{--radio-background-color:var(--_4mkb4g)}
23
+ ._1qdg120g:after{height:.6pc}
24
+ ._1qdg1cbz:after{height:6.85714px}
25
+ ._1qu2glyw{outline-style:none}
26
+ ._1s6weh7q{--radio-dot-color:var(--_jf353p)}
27
+ ._4cvr1h6o{align-items:center}
28
+ ._4cvr1y6m{align-items:flex-start}
29
+ ._4rya1ouc:disabled, ._o1bd1ouc:disabled:active, ._nxi61ouc:disabled:focus, ._neoe1ouc:disabled:hover, ._1el21ouc:disabled[data-invalid]{--radio-background-color:var(--_r5pknd)}
30
+ ._4t3i1tcg{height:24px}
31
+ ._aetrb3bt:after{content:""}
32
+ ._bfhk4t47{background-color:var(--radio-background-color)}
33
+ ._f3ett94y:checked{--radio-dot-opacity:1px}
34
+ ._g7st13gf[data-disabled]{cursor:not-allowed}
35
+ ._iosi1j4g:checked{--radio-background-color:var(--_1gcp7nr)}
36
+ ._j5dh13gf:disabled, ._scgf13gf:disabled:active, ._1gcs13gf:disabled:focus, ._1x1a13gf:disabled:hover, ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
37
+ ._kqswh2mm{position:relative}
38
+ ._lekr1pl2:disabled, ._11v71pl2:disabled:active, ._1f8c1pl2:disabled:focus, ._s2ft1pl2:disabled:hover, ._17a11pl2:disabled[data-invalid]{--radio-border-color:var(--_1ufdgqf)}
39
+ ._mqf87wap[data-disabled]{color:var(--_1ynhf1h)}
40
+ ._s7n4jp4b{vertical-align:top}
41
+ ._syazovqm{color:var(--_5xk3r4)}
42
+ ._t9ec1s1q{transform:scale(.58333)}
43
+ ._t9ec1soj{transform:scale(.625)}
44
+ ._tqbwidpf{--radio-dot-opacity:0}
45
+ ._vchhusvi{box-sizing:border-box}
46
+ ._wstuglyw{-webkit-appearance:none}
47
+ ._x48asnw8:disabled, ._1ib2snw8:disabled:active, ._1yk9snw8:disabled:focus, ._gdmbsnw8:disabled:hover, ._pmm4snw8:disabled[data-invalid]{--radio-dot-color:var(--_1xmcmw9)}
48
+ ._z0ai120g:after{width:.6pc}
49
+ ._z0ai1cbz:after{width:6.85714px}
50
+ ._6tjk1ri4:checked:focus{outline:var(--_1rdyq0k)}
51
+ ._y2mv1ri4:focus{outline:var(--_1rdyq0k)}
52
+ ._1bg4jfq9:focus{outline-offset:var(--ds-border-width-indicator,3px)}
53
+ ._awqnjfq9:checked:focus{outline-offset:var(--ds-border-width-indicator,3px)}
54
+ ._1iwz1ehr:checked:hover{--radio-border-color:var(--_14y1fod)}
55
+ ._1p9jddza:hover{--radio-border-color:var(--_vnm8xo)}
56
+ ._1rvq12ci:hover{--radio-background-color:var(--_1z08gfx)}
57
+ ._x2tz1ehr:checked:hover{--radio-background-color:var(--_14y1fod)}
58
+ ._1dvdddza:checked:active{--radio-border-color:var(--_vnm8xo)}
59
+ ._60akxz7c:checked:active{--radio-dot-color:var(--_uq1ko9)}
60
+ ._jckowjs8:checked:active{--radio-background-color:var(--_9b0jbo)}
61
+ ._sj8ye8ep:active{--radio-background-color:var(--_174hl94)}
package/dist/cjs/radio.js CHANGED
@@ -1,143 +1,32 @@
1
+ /* radio.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  "use strict";
2
3
 
3
4
  var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
5
+ var _typeof = require("@babel/runtime/helpers/typeof");
4
6
  Object.defineProperty(exports, "__esModule", {
5
7
  value: true
6
8
  });
7
9
  exports.default = void 0;
10
+ require("./radio.compiled.css");
11
+ var _react = _interopRequireWildcard(require("react"));
12
+ var React = _react;
13
+ var _runtime = require("@compiled/react/runtime");
8
14
  var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
9
15
  var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
10
- var _react = require("react");
11
- var _react2 = require("@emotion/react");
12
16
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
13
17
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
14
18
  var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
15
19
  var _colors = require("@atlaskit/theme/colors");
16
20
  var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
17
- /**
18
- * @jsxRuntime classic
19
- * @jsx jsx
20
- */
21
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
21
+ function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
22
+ function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }
22
23
  var packageName = "@atlaskit/radio";
23
- var packageVersion = "6.6.0";
24
+ var packageVersion = "7.0.0";
24
25
  var noop = _noop.default;
25
- var labelPaddingStyles = (0, _react2.css)({
26
- padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
27
- });
28
- var labelStyles = (0, _react2.css)({
29
- display: 'flex',
30
- boxSizing: 'border-box',
31
- position: 'relative',
32
- alignItems: 'flex-start',
33
- color: "var(--ds-text, ".concat(_colors.N900, ")"),
34
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
35
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
36
- '&[data-disabled]': {
37
- color: "var(--ds-text-disabled, ".concat(_colors.N80, ")"),
38
- cursor: 'not-allowed'
39
- }
40
- });
41
- var radioStyles = (0, _react2.css)({
42
- display: 'flex',
43
- // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
44
- /*
45
- The circle should be 14px * 14px centred in a 24px * 24px box.
46
- This is inclusive of a 2px border and inner circle with 2px radius.
47
- There is a Chrome bug that makes the circle become an oval and the
48
- inner circle not be centred at various zoom levels. This bug is fixed
49
- in all browsers if a scale of 14/24 is applied.
50
- */
51
- width: '24px',
52
- height: '24px',
53
- margin: "var(--ds-space-0, 0px)",
54
- position: 'relative',
55
- alignItems: 'center',
56
- justifyContent: 'center',
57
- flexShrink: 0,
58
- backgroundColor: 'var(--radio-background-color)',
59
- /* 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
60
- inner circle not be centred at various zoom levels */
61
- border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
62
- borderRadius: "var(--ds-border-radius-circle, 50%)",
63
- MozAppearance: 'none',
64
- outline: 'none',
65
- /*
66
- Change the variables --radio-background-color, --radio-border-color,
67
- -radio-dot-color and -radio-dot-opacity according to user interactions.
68
- All other variables are constant
69
- */
70
- '--radio-background-color': "var(--ds-background-input, ".concat(_colors.N10, ")"),
71
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
72
- '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
73
- '--radio-dot-opacity': 0,
74
- /* 24px * 7 / 12 === 14px height and width */
75
- transform: 'scale(calc(7 / 12))',
76
- transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
77
- verticalAlign: 'top',
78
- WebkitAppearance: 'none',
79
- '&::after': {
80
- /* Height and width should by 4px, multiply by 24/14 to offset scale */
81
- width: 'calc(4px * 12 / 7)',
82
- height: 'calc(4px * 12 / 7)',
83
- position: 'absolute',
84
- background: 'var(--radio-dot-color)',
85
- // TODO Delete this comment after verifying spacing token -> previous value `'50%'`
86
- borderRadius: "var(--ds-border-radius-circle, 50%)",
87
- content: "''",
88
- opacity: 'var(--radio-dot-opacity)',
89
- transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
90
- },
91
- '&:hover': {
92
- '--radio-background-color': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
93
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")")
94
- },
95
- '&:active': {
96
- '--radio-background-color': "var(--ds-background-input-pressed, ".concat(_colors.N30, ")")
97
- },
98
- '&:focus': {
99
- outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
100
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
101
- },
102
- '&:checked': {
103
- '--radio-background-color': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
104
- '--radio-border-color': "var(--ds-background-selected-bold, ".concat(_colors.B400, ")"),
105
- '--radio-dot-opacity': 1
106
- },
107
- '&:checked:hover': {
108
- '--radio-background-color': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")"),
109
- '--radio-border-color': "var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")
110
- },
111
- '&:checked:active': {
112
- '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")"),
113
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
114
- '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.B400, ")")
115
- },
116
- '&:checked:focus': {
117
- outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")")),
118
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
119
- },
120
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
121
- '&[data-invalid], &:checked[data-invalid]': {
122
- '--radio-border-color': "var(--ds-icon-danger, ".concat(_colors.R300, ")")
123
- },
124
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
125
- '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
126
- cursor: 'not-allowed',
127
- '--radio-background-color': "var(--ds-background-disabled, ".concat(_colors.N20, ")"),
128
- '--radio-border-color': "var(--ds-border-disabled, ".concat(_colors.N20, ")"),
129
- '--radio-dot-color': "var(--ds-icon-disabled, ".concat(_colors.N70, ")")
130
- }
131
- });
132
- var newRadioStyles = (0, _react2.css)({
133
- transform: 'scale(calc(7.5 / 12))',
134
- // 15px
135
- '&::after': {
136
- width: 'calc(5.6px * 12 / 7)',
137
- // 6px
138
- height: 'calc(5.6px * 12 / 7)' // 6px
139
- }
140
- });
26
+ var labelPaddingStyles = null;
27
+ var labelStyles = null;
28
+ var radioStyles = null;
29
+ var newRadioStyles = null;
141
30
  var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
142
31
  var ariaLabel = props.ariaLabel,
143
32
  _props$isDisabled = props.isDisabled,
@@ -163,11 +52,15 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
163
52
  packageName: packageName,
164
53
  packageVersion: packageVersion
165
54
  });
166
- return (0, _react2.jsx)("label", {
55
+ return /*#__PURE__*/React.createElement("label", {
167
56
  "data-testid": testId && "".concat(testId, "--radio-label"),
168
57
  "data-disabled": isDisabled ? 'true' : undefined,
169
- css: labelStyles
170
- }, (0, _react2.jsx)("input", (0, _extends2.default)({}, rest, {
58
+ className: (0, _runtime.ax)(["_1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _11c81oud _mqf87wap _g7st13gf"]),
59
+ style: {
60
+ "--_5xk3r4": (0, _runtime.ix)("var(--ds-text, ".concat(_colors.N900, ")")),
61
+ "--_1ynhf1h": (0, _runtime.ix)("var(--ds-text-disabled, ".concat(_colors.N80, ")"))
62
+ }
63
+ }, /*#__PURE__*/React.createElement("input", (0, _extends2.default)({}, rest, {
171
64
  // It is necessary only for Safari. It allows to render focus styles.
172
65
  tabIndex: 0,
173
66
  "aria-label": ariaLabel,
@@ -183,14 +76,32 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
183
76
  // use :invalid selector
184
77
  ,
185
78
  "data-invalid": isInvalid ? 'true' : undefined,
186
- css: [radioStyles,
187
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
188
- (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
79
+ ref: ref,
80
+ className: (0, _runtime.ax)(["_1e0c1txw _1bsb1tcg _4t3i1tcg _18s8ze3t _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _19itbyy8 _2rko1q5u _13diglyw _12ji1r31 _1qu2glyw _12y31o36 _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1s1q _v56415j1 _s7n4jp4b _wstuglyw _z0ai1cbz _1qdg1cbz _18postnw _16r2ucr4 _14mj1q5u _aetrb3bt _1peq1xmd _qc5orqeg _iosi1j4g _11jy1j4g _f3ett94y _19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8 _y2mv1ri4 _1bg4jfq9 _6tjk1ri4 _awqnjfq9 _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') &&
189
81
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
190
- (0, _platformFeatureFlags.fg)('platform-icon-control-migration') && newRadioStyles],
191
- ref: ref
192
- })), label ? (0, _react2.jsx)("span", {
193
- css: labelPaddingStyles
82
+ (0, _platformFeatureFlags.fg)('platform-icon-control-migration') && "_t9ec1soj _z0ai120g _1qdg120g"]),
83
+ style: {
84
+ "--_1q9y51y": (0, _runtime.ix)("var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)")),
85
+ "--_4mkb4g": (0, _runtime.ix)("var(--ds-background-input, ".concat(_colors.N10, ")")),
86
+ "--_vnm8xo": (0, _runtime.ix)("var(--ds-border-input, ".concat(_colors.N100, ")")),
87
+ "--_jf353p": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.N10, ")")),
88
+ "--_1z08gfx": (0, _runtime.ix)("var(--ds-background-input-hovered, ".concat(_colors.N30, ")")),
89
+ "--_174hl94": (0, _runtime.ix)("var(--ds-background-input-pressed, ".concat(_colors.N30, ")")),
90
+ "--_1rdyq0k": (0, _runtime.ix)("var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(_colors.B200, ")"))),
91
+ "--_1gcp7nr": (0, _runtime.ix)("var(--ds-background-selected-bold, ".concat(_colors.B400, ")")),
92
+ "--_14y1fod": (0, _runtime.ix)("var(--ds-background-selected-bold-hovered, ".concat(_colors.B300, ")")),
93
+ "--_9b0jbo": (0, _runtime.ix)("var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")")),
94
+ "--_uq1ko9": (0, _runtime.ix)("var(--ds-icon-inverse, ".concat(_colors.B400, ")")),
95
+ "--_m4cp67": (0, _runtime.ix)("var(--ds-icon-danger, ".concat(_colors.R300, ")")),
96
+ "--_r5pknd": (0, _runtime.ix)("var(--ds-background-disabled, ".concat(_colors.N20, ")")),
97
+ "--_1ufdgqf": (0, _runtime.ix)("var(--ds-border-disabled, ".concat(_colors.N20, ")")),
98
+ "--_1xmcmw9": (0, _runtime.ix)("var(--ds-icon-disabled, ".concat(_colors.N70, ")"))
99
+ }
100
+ })), label ? /*#__PURE__*/React.createElement("span", {
101
+ className: (0, _runtime.ax)(["_1yt41j1s"]),
102
+ style: {
103
+ "--_1kppzk3": (0, _runtime.ix)("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"))
104
+ }
194
105
  }, label) : null);
195
106
  });
196
107
 
@@ -204,7 +115,7 @@ var InnerRadio = /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref)
204
115
  * - [Usage](https://atlassian.design/components/radio/usage)
205
116
  */
206
117
  var Radio = /*#__PURE__*/(0, _react.memo)( /*#__PURE__*/(0, _react.forwardRef)(function Radio(props, ref) {
207
- return (0, _react2.jsx)(InnerRadio, (0, _extends2.default)({}, props, {
118
+ return /*#__PURE__*/React.createElement(InnerRadio, (0, _extends2.default)({}, props, {
208
119
  ref: ref
209
120
  }));
210
121
  }));
package/dist/es2019/radio.compiled.css ADDED
@@ -0,0 +1,61 @@
1
+
2
+ ._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
4
+ ._16r2ucr4:after{background:var(--radio-dot-color)}
5
+ ._18s8ze3t{margin:var(--ds-space-0,0)}
6
+ ._19it3vzd{border:var(--ds-border-width,1px) solid var(--radio-border-color)}
7
+ ._1yt4u49m{padding:var(--ds-space-025,2px) var(--ds-space-050,4px)}
8
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
9
+ ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
10
+ ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._11511fmg{--radio-border-color:var(--ds-border-input,#7a869a)}
11
+ ._11jyzyvw:checked{--radio-border-color:var(--ds-background-selected-bold,#0052cc)}
12
+ ._12ji1r31{outline-color:currentColor}
13
+ ._12y31o36{outline-width:medium}
14
+ ._13diglyw{-moz-appearance:none}
15
+ ._18postnw:after{position:absolute}
16
+ ._19ybk8x7:checked[data-invalid], ._1d7pk8x7[data-invalid]{--radio-border-color:var(--ds-icon-danger,#ff5630)}
17
+ ._1bah1h6o{justify-content:center}
18
+ ._1bsb1tcg{width:24px}
19
+ ._1e0c1txw{display:flex}
20
+ ._1o9zidpf{flex-shrink:0}
21
+ ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
22
+ ._1q6qmag2{--radio-background-color:var(--ds-background-input,#fafbfc)}
23
+ ._1qdg120g:after{height:.6pc}
24
+ ._1qdg1cbz:after{height:6.85714px}
25
+ ._1qu2glyw{outline-style:none}
26
+ ._1s6w1qbb{--radio-dot-color:var(--ds-icon-inverse,#fafbfc)}
27
+ ._4cvr1h6o{align-items:center}
28
+ ._4cvr1y6m{align-items:flex-start}
29
+ ._4rya1y1w:disabled, ._o1bd1y1w:disabled:active, ._nxi61y1w:disabled:focus, ._neoe1y1w:disabled:hover, ._1el21y1w:disabled[data-invalid]{--radio-background-color:var(--ds-background-disabled,#f4f5f7)}
30
+ ._4t3i1tcg{height:24px}
31
+ ._aetrb3bt:after{content:""}
32
+ ._bfhk4t47{background-color:var(--radio-background-color)}
33
+ ._f3ett94y:checked{--radio-dot-opacity:1px}
34
+ ._g7st13gf[data-disabled]{cursor:not-allowed}
35
+ ._iosizyvw:checked{--radio-background-color:var(--ds-background-selected-bold,#0052cc)}
36
+ ._j5dh13gf:disabled, ._scgf13gf:disabled:active, ._1gcs13gf:disabled:focus, ._1x1a13gf:disabled:hover, ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
37
+ ._kqswh2mm{position:relative}
38
+ ._lekrzcs9:disabled, ._11v7zcs9:disabled:active, ._1f8czcs9:disabled:focus, ._s2ftzcs9:disabled:hover, ._17a1zcs9:disabled[data-invalid]{--radio-border-color:var(--ds-border-disabled,#f4f5f7)}
39
+ ._mqf81tvo[data-disabled]{color:var(--ds-text-disabled,#97a0af)}
40
+ ._s7n4jp4b{vertical-align:top}
41
+ ._syazj3m3{color:var(--ds-text,#091e42)}
42
+ ._t9ec1s1q{transform:scale(.58333)}
43
+ ._t9ec1soj{transform:scale(.625)}
44
+ ._tqbwidpf{--radio-dot-opacity:0}
45
+ ._vchhusvi{box-sizing:border-box}
46
+ ._wstuglyw{-webkit-appearance:none}
47
+ ._x48a15t7:disabled, ._1ib215t7:disabled:active, ._1yk915t7:disabled:focus, ._gdmb15t7:disabled:hover, ._pmm415t7:disabled[data-invalid]{--radio-dot-color:var(--ds-icon-disabled,#a5adba)}
48
+ ._z0ai120g:after{width:.6pc}
49
+ ._z0ai1cbz:after{width:6.85714px}
50
+ ._6tjkehbj:checked:focus{outline:var(--ds-border-width-outline,3px) solid var(--ds-border-focused,#2684ff)}
51
+ ._y2mvehbj:focus{outline:var(--ds-border-width-outline,3px) solid var(--ds-border-focused,#2684ff)}
52
+ ._1bg4jfq9:focus{outline-offset:var(--ds-border-width-indicator,3px)}
53
+ ._awqnjfq9:checked:focus{outline-offset:var(--ds-border-width-indicator,3px)}
54
+ ._1iwzhh5a:checked:hover{--radio-border-color:var(--ds-background-selected-bold-hovered,#0065ff)}
55
+ ._1p9j1fmg:hover{--radio-border-color:var(--ds-border-input,#7a869a)}
56
+ ._1rvq10ko:hover{--radio-background-color:var(--ds-background-input-hovered,#ebecf0)}
57
+ ._x2tzhh5a:checked:hover{--radio-background-color:var(--ds-background-selected-bold-hovered,#0065ff)}
58
+ ._1dvd1fmg:checked:active{--radio-border-color:var(--ds-border-input,#7a869a)}
59
+ ._60ak1dzn:checked:active{--radio-dot-color:var(--ds-icon-inverse,#0052cc)}
60
+ ._jckox2ru:checked:active{--radio-background-color:var(--ds-background-selected-bold-pressed,#deebff)}
61
+ ._sj8y1wq0:active{--radio-background-color:var(--ds-background-input-pressed,#ebecf0)}
package/dist/es2019/radio.js CHANGED
@@ -1,135 +1,20 @@
1
+ /* radio.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
- /**
3
- * @jsxRuntime classic
4
- * @jsx jsx
5
- */
3
+ import "./radio.compiled.css";
4
+ import * as React from 'react';
5
+ import { ax, ix } from "@compiled/react/runtime";
6
6
  import { forwardRef, memo } from 'react';
7
-
8
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
9
- import { css, jsx } from '@emotion/react';
10
7
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
11
8
  import __noop from '@atlaskit/ds-lib/noop';
12
9
  import { fg } from '@atlaskit/platform-feature-flags';
13
10
  import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
14
11
  const packageName = "@atlaskit/radio";
15
- const packageVersion = "6.6.0";
12
+ const packageVersion = "7.0.0";
16
13
  const noop = __noop;
17
- const labelPaddingStyles = css({
18
- padding: `${"var(--ds-space-025, 2px)"} ${"var(--ds-space-050, 4px)"}`
19
- });
20
- const labelStyles = css({
21
- display: 'flex',
22
- boxSizing: 'border-box',
23
- position: 'relative',
24
- alignItems: 'flex-start',
25
- color: `var(--ds-text, ${N900})`,
26
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
27
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
28
- '&[data-disabled]': {
29
- color: `var(--ds-text-disabled, ${N80})`,
30
- cursor: 'not-allowed'
31
- }
32
- });
33
- const radioStyles = css({
34
- display: 'flex',
35
- // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
36
- /*
37
- The circle should be 14px * 14px centred in a 24px * 24px box.
38
- This is inclusive of a 2px border and inner circle with 2px radius.
39
- There is a Chrome bug that makes the circle become an oval and the
40
- inner circle not be centred at various zoom levels. This bug is fixed
41
- in all browsers if a scale of 14/24 is applied.
42
- */
43
- width: '24px',
44
- height: '24px',
45
- margin: "var(--ds-space-0, 0px)",
46
- position: 'relative',
47
- alignItems: 'center',
48
- justifyContent: 'center',
49
- flexShrink: 0,
50
- backgroundColor: 'var(--radio-background-color)',
51
- /* 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
52
- inner circle not be centred at various zoom levels */
53
- border: `${"var(--ds-border-width, 1px)"} solid var(--radio-border-color)`,
54
- borderRadius: "var(--ds-border-radius-circle, 50%)",
55
- MozAppearance: 'none',
56
- outline: 'none',
57
- /*
58
- Change the variables --radio-background-color, --radio-border-color,
59
- -radio-dot-color and -radio-dot-opacity according to user interactions.
60
- All other variables are constant
61
- */
62
- '--radio-background-color': `var(--ds-background-input, ${N10})`,
63
- '--radio-border-color': `var(--ds-border-input, ${N100})`,
64
- '--radio-dot-color': `var(--ds-icon-inverse, ${N10})`,
65
- '--radio-dot-opacity': 0,
66
- /* 24px * 7 / 12 === 14px height and width */
67
- transform: 'scale(calc(7 / 12))',
68
- transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
69
- verticalAlign: 'top',
70
- WebkitAppearance: 'none',
71
- '&::after': {
72
- /* Height and width should by 4px, multiply by 24/14 to offset scale */
73
- width: 'calc(4px * 12 / 7)',
74
- height: 'calc(4px * 12 / 7)',
75
- position: 'absolute',
76
- background: 'var(--radio-dot-color)',
77
- // TODO Delete this comment after verifying spacing token -> previous value `'50%'`
78
- borderRadius: "var(--ds-border-radius-circle, 50%)",
79
- content: "''",
80
- opacity: 'var(--radio-dot-opacity)',
81
- transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
82
- },
83
- '&:hover': {
84
- '--radio-background-color': `var(--ds-background-input-hovered, ${N30})`,
85
- '--radio-border-color': `var(--ds-border-input, ${N100})`
86
- },
87
- '&:active': {
88
- '--radio-background-color': `var(--ds-background-input-pressed, ${N30})`
89
- },
90
- '&:focus': {
91
- outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
92
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
93
- },
94
- '&:checked': {
95
- '--radio-background-color': `var(--ds-background-selected-bold, ${B400})`,
96
- '--radio-border-color': `var(--ds-background-selected-bold, ${B400})`,
97
- '--radio-dot-opacity': 1
98
- },
99
- '&:checked:hover': {
100
- '--radio-background-color': `var(--ds-background-selected-bold-hovered, ${B300})`,
101
- '--radio-border-color': `var(--ds-background-selected-bold-hovered, ${B300})`
102
- },
103
- '&:checked:active': {
104
- '--radio-background-color': `var(--ds-background-selected-bold-pressed, ${B50})`,
105
- '--radio-border-color': `var(--ds-border-input, ${N100})`,
106
- '--radio-dot-color': `var(--ds-icon-inverse, ${B400})`
107
- },
108
- '&:checked:focus': {
109
- outline: `${"var(--ds-border-width-outline, 3px)"} solid ${`var(--ds-border-focused, ${B200})`}`,
110
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
111
- },
112
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
113
- '&[data-invalid], &:checked[data-invalid]': {
114
- '--radio-border-color': `var(--ds-icon-danger, ${R300})`
115
- },
116
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
117
- '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
118
- cursor: 'not-allowed',
119
- '--radio-background-color': `var(--ds-background-disabled, ${N20})`,
120
- '--radio-border-color': `var(--ds-border-disabled, ${N20})`,
121
- '--radio-dot-color': `var(--ds-icon-disabled, ${N70})`
122
- }
123
- });
124
- const newRadioStyles = css({
125
- transform: 'scale(calc(7.5 / 12))',
126
- // 15px
127
- '&::after': {
128
- width: 'calc(5.6px * 12 / 7)',
129
- // 6px
130
- height: 'calc(5.6px * 12 / 7)' // 6px
131
- }
132
- });
14
+ const labelPaddingStyles = null;
15
+ const labelStyles = null;
16
+ const radioStyles = null;
17
+ const newRadioStyles = null;
133
18
  const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
134
19
  const {
135
20
  ariaLabel,
@@ -154,11 +39,11 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
154
39
  packageName,
155
40
  packageVersion
156
41
  });
157
- return jsx("label", {
42
+ return /*#__PURE__*/React.createElement("label", {
158
43
  "data-testid": testId && `${testId}--radio-label`,
159
44
  "data-disabled": isDisabled ? 'true' : undefined,
160
- css: labelStyles
161
- }, jsx("input", _extends({}, rest, {
45
+ className: ax(["_1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazj3m3 _11c81oud _mqf81tvo _g7st13gf"])
46
+ }, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
162
47
  // It is necessary only for Safari. It allows to render focus styles.
163
48
  tabIndex: 0,
164
49
  "aria-label": ariaLabel,
@@ -174,14 +59,12 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
174
59
  // use :invalid selector
175
60
  ,
176
61
  "data-invalid": isInvalid ? 'true' : undefined,
177
- css: [radioStyles,
178
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
179
- fg('platform-visual-refresh-icons') &&
62
+ ref: ref,
63
+ className: ax(["_1e0c1txw _1bsb1tcg _4t3i1tcg _18s8ze3t _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _19it3vzd _2rko1q5u _13diglyw _12ji1r31 _1qu2glyw _12y31o36 _1q6qmag2 _11511fmg _1s6w1qbb _tqbwidpf _t9ec1s1q _v56415j1 _s7n4jp4b _wstuglyw _z0ai1cbz _1qdg1cbz _18postnw _16r2ucr4 _14mj1q5u _aetrb3bt _1peq1xmd _qc5orqeg _iosizyvw _11jyzyvw _f3ett94y _19ybk8x7 _1d7pk8x7 _j5dh13gf _scgf13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1y1w _o1bd1y1w _nxi61y1w _neoe1y1w _1el21y1w _lekrzcs9 _11v7zcs9 _1f8czcs9 _s2ftzcs9 _17a1zcs9 _x48a15t7 _1ib215t7 _1yk915t7 _gdmb15t7 _pmm415t7 _y2mvehbj _1bg4jfq9 _6tjkehbj _awqnjfq9 _1rvq10ko _1p9j1fmg _x2tzhh5a _1iwzhh5a _sj8y1wq0 _jckox2ru _1dvd1fmg _60ak1dzn", fg('platform-visual-refresh-icons') &&
180
64
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
181
- fg('platform-icon-control-migration') && newRadioStyles],
182
- ref: ref
183
- })), label ? jsx("span", {
184
- css: labelPaddingStyles
65
+ fg('platform-icon-control-migration') && "_t9ec1soj _z0ai120g _1qdg120g"])
66
+ })), label ? /*#__PURE__*/React.createElement("span", {
67
+ className: ax(["_1yt4u49m"])
185
68
  }, label) : null);
186
69
  });
187
70
 
@@ -195,7 +78,7 @@ const InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
195
78
  * - [Usage](https://atlassian.design/components/radio/usage)
196
79
  */
197
80
  const Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
198
- return jsx(InnerRadio, _extends({}, props, {
81
+ return /*#__PURE__*/React.createElement(InnerRadio, _extends({}, props, {
199
82
  ref: ref
200
83
  }));
201
84
  }));
package/dist/esm/radio.compiled.css ADDED
@@ -0,0 +1,61 @@
1
+
2
+ ._11c81oud{font:var(--ds-font-body,normal 400 14px/20px ui-sans-serif,-apple-system,BlinkMacSystemFont,"Segoe UI",Ubuntu,system-ui,"Helvetica Neue",sans-serif)}
3
+ ._14mj1q5u:after{border-radius:var(--ds-border-radius-circle,50%)}
4
+ ._16r2ucr4:after{background:var(--radio-dot-color)}
5
+ ._18s8ze3t{margin:var(--ds-space-0,0)}
6
+ ._19itbyy8{border:var(--_1q9y51y)}
7
+ ._1yt41j1s{padding:var(--_1kppzk3)}
8
+ ._2rko1q5u{border-radius:var(--ds-border-radius-circle,50%)}
9
+ ._qc5orqeg:after{transition:background-color .2s ease-in-out,opacity .2s ease-in-out}
10
+ ._v56415j1{transition:border-color .2s ease-in-out,background-color .2s ease-in-out}._1151ddza{--radio-border-color:var(--_vnm8xo)}
11
+ ._11jy1j4g:checked{--radio-border-color:var(--_1gcp7nr)}
12
+ ._12ji1r31{outline-color:currentColor}
13
+ ._12y31o36{outline-width:medium}
14
+ ._13diglyw{-moz-appearance:none}
15
+ ._18postnw:after{position:absolute}
16
+ ._19ybua6f:checked[data-invalid], ._1d7pua6f[data-invalid]{--radio-border-color:var(--_m4cp67)}
17
+ ._1bah1h6o{justify-content:center}
18
+ ._1bsb1tcg{width:24px}
19
+ ._1e0c1txw{display:flex}
20
+ ._1o9zidpf{flex-shrink:0}
21
+ ._1peq1xmd:after{opacity:var(--radio-dot-opacity)}
22
+ ._1q6q1kd8{--radio-background-color:var(--_4mkb4g)}
23
+ ._1qdg120g:after{height:.6pc}
24
+ ._1qdg1cbz:after{height:6.85714px}
25
+ ._1qu2glyw{outline-style:none}
26
+ ._1s6weh7q{--radio-dot-color:var(--_jf353p)}
27
+ ._4cvr1h6o{align-items:center}
28
+ ._4cvr1y6m{align-items:flex-start}
29
+ ._4rya1ouc:disabled, ._o1bd1ouc:disabled:active, ._nxi61ouc:disabled:focus, ._neoe1ouc:disabled:hover, ._1el21ouc:disabled[data-invalid]{--radio-background-color:var(--_r5pknd)}
30
+ ._4t3i1tcg{height:24px}
31
+ ._aetrb3bt:after{content:""}
32
+ ._bfhk4t47{background-color:var(--radio-background-color)}
33
+ ._f3ett94y:checked{--radio-dot-opacity:1px}
34
+ ._g7st13gf[data-disabled]{cursor:not-allowed}
35
+ ._iosi1j4g:checked{--radio-background-color:var(--_1gcp7nr)}
36
+ ._j5dh13gf:disabled, ._scgf13gf:disabled:active, ._1gcs13gf:disabled:focus, ._1x1a13gf:disabled:hover, ._6hp813gf:disabled[data-invalid]{cursor:not-allowed}
37
+ ._kqswh2mm{position:relative}
38
+ ._lekr1pl2:disabled, ._11v71pl2:disabled:active, ._1f8c1pl2:disabled:focus, ._s2ft1pl2:disabled:hover, ._17a11pl2:disabled[data-invalid]{--radio-border-color:var(--_1ufdgqf)}
39
+ ._mqf87wap[data-disabled]{color:var(--_1ynhf1h)}
40
+ ._s7n4jp4b{vertical-align:top}
41
+ ._syazovqm{color:var(--_5xk3r4)}
42
+ ._t9ec1s1q{transform:scale(.58333)}
43
+ ._t9ec1soj{transform:scale(.625)}
44
+ ._tqbwidpf{--radio-dot-opacity:0}
45
+ ._vchhusvi{box-sizing:border-box}
46
+ ._wstuglyw{-webkit-appearance:none}
47
+ ._x48asnw8:disabled, ._1ib2snw8:disabled:active, ._1yk9snw8:disabled:focus, ._gdmbsnw8:disabled:hover, ._pmm4snw8:disabled[data-invalid]{--radio-dot-color:var(--_1xmcmw9)}
48
+ ._z0ai120g:after{width:.6pc}
49
+ ._z0ai1cbz:after{width:6.85714px}
50
+ ._6tjk1ri4:checked:focus{outline:var(--_1rdyq0k)}
51
+ ._y2mv1ri4:focus{outline:var(--_1rdyq0k)}
52
+ ._1bg4jfq9:focus{outline-offset:var(--ds-border-width-indicator,3px)}
53
+ ._awqnjfq9:checked:focus{outline-offset:var(--ds-border-width-indicator,3px)}
54
+ ._1iwz1ehr:checked:hover{--radio-border-color:var(--_14y1fod)}
55
+ ._1p9jddza:hover{--radio-border-color:var(--_vnm8xo)}
56
+ ._1rvq12ci:hover{--radio-background-color:var(--_1z08gfx)}
57
+ ._x2tz1ehr:checked:hover{--radio-background-color:var(--_14y1fod)}
58
+ ._1dvdddza:checked:active{--radio-border-color:var(--_vnm8xo)}
59
+ ._60akxz7c:checked:active{--radio-dot-color:var(--_uq1ko9)}
60
+ ._jckowjs8:checked:active{--radio-background-color:var(--_9b0jbo)}
61
+ ._sj8ye8ep:active{--radio-background-color:var(--_174hl94)}
package/dist/esm/radio.js CHANGED
@@ -1,137 +1,22 @@
1
+ /* radio.tsx generated by @compiled/babel-plugin v0.32.2 */
1
2
  import _extends from "@babel/runtime/helpers/extends";
2
3
  import _objectWithoutProperties from "@babel/runtime/helpers/objectWithoutProperties";
3
4
  var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
4
- /**
5
- * @jsxRuntime classic
6
- * @jsx jsx
7
- */
5
+ import "./radio.compiled.css";
6
+ import * as React from 'react';
7
+ import { ax, ix } from "@compiled/react/runtime";
8
8
  import { forwardRef, memo } from 'react';
9
-
10
- // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
11
- import { css, jsx } from '@emotion/react';
12
9
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
13
10
  import __noop from '@atlaskit/ds-lib/noop';
14
11
  import { fg } from '@atlaskit/platform-feature-flags';
15
12
  import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
16
13
  var packageName = "@atlaskit/radio";
17
- var packageVersion = "6.6.0";
14
+ var packageVersion = "7.0.0";
18
15
  var noop = __noop;
19
- var labelPaddingStyles = css({
20
- padding: "var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)")
21
- });
22
- var labelStyles = css({
23
- display: 'flex',
24
- boxSizing: 'border-box',
25
- position: 'relative',
26
- alignItems: 'flex-start',
27
- color: "var(--ds-text, ".concat(N900, ")"),
28
- font: "var(--ds-font-body, normal 400 14px/20px ui-sans-serif, -apple-system, BlinkMacSystemFont, \"Segoe UI\", Ubuntu, system-ui, \"Helvetica Neue\", sans-serif)",
29
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
30
- '&[data-disabled]': {
31
- color: "var(--ds-text-disabled, ".concat(N80, ")"),
32
- cursor: 'not-allowed'
33
- }
34
- });
35
- var radioStyles = css({
36
- display: 'flex',
37
- // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
38
- /*
39
- The circle should be 14px * 14px centred in a 24px * 24px box.
40
- This is inclusive of a 2px border and inner circle with 2px radius.
41
- There is a Chrome bug that makes the circle become an oval and the
42
- inner circle not be centred at various zoom levels. This bug is fixed
43
- in all browsers if a scale of 14/24 is applied.
44
- */
45
- width: '24px',
46
- height: '24px',
47
- margin: "var(--ds-space-0, 0px)",
48
- position: 'relative',
49
- alignItems: 'center',
50
- justifyContent: 'center',
51
- flexShrink: 0,
52
- backgroundColor: 'var(--radio-background-color)',
53
- /* 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
54
- inner circle not be centred at various zoom levels */
55
- border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
56
- borderRadius: "var(--ds-border-radius-circle, 50%)",
57
- MozAppearance: 'none',
58
- outline: 'none',
59
- /*
60
- Change the variables --radio-background-color, --radio-border-color,
61
- -radio-dot-color and -radio-dot-opacity according to user interactions.
62
- All other variables are constant
63
- */
64
- '--radio-background-color': "var(--ds-background-input, ".concat(N10, ")"),
65
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
66
- '--radio-dot-color': "var(--ds-icon-inverse, ".concat(N10, ")"),
67
- '--radio-dot-opacity': 0,
68
- /* 24px * 7 / 12 === 14px height and width */
69
- transform: 'scale(calc(7 / 12))',
70
- transition: 'border-color 0.2s ease-in-out, background-color 0.2s ease-in-out',
71
- verticalAlign: 'top',
72
- WebkitAppearance: 'none',
73
- '&::after': {
74
- /* Height and width should by 4px, multiply by 24/14 to offset scale */
75
- width: 'calc(4px * 12 / 7)',
76
- height: 'calc(4px * 12 / 7)',
77
- position: 'absolute',
78
- background: 'var(--radio-dot-color)',
79
- // TODO Delete this comment after verifying spacing token -> previous value `'50%'`
80
- borderRadius: "var(--ds-border-radius-circle, 50%)",
81
- content: "''",
82
- opacity: 'var(--radio-dot-opacity)',
83
- transition: 'background-color 0.2s ease-in-out, opacity 0.2s ease-in-out'
84
- },
85
- '&:hover': {
86
- '--radio-background-color': "var(--ds-background-input-hovered, ".concat(N30, ")"),
87
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")")
88
- },
89
- '&:active': {
90
- '--radio-background-color': "var(--ds-background-input-pressed, ".concat(N30, ")")
91
- },
92
- '&:focus': {
93
- outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
94
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
95
- },
96
- '&:checked': {
97
- '--radio-background-color': "var(--ds-background-selected-bold, ".concat(B400, ")"),
98
- '--radio-border-color': "var(--ds-background-selected-bold, ".concat(B400, ")"),
99
- '--radio-dot-opacity': 1
100
- },
101
- '&:checked:hover': {
102
- '--radio-background-color': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")"),
103
- '--radio-border-color': "var(--ds-background-selected-bold-hovered, ".concat(B300, ")")
104
- },
105
- '&:checked:active': {
106
- '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
107
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
108
- '--radio-dot-color': "var(--ds-icon-inverse, ".concat(B400, ")")
109
- },
110
- '&:checked:focus': {
111
- outline: "var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")")),
112
- outlineOffset: "var(--ds-border-width-indicator, 3px)"
113
- },
114
- // eslint-disable-next-line @atlaskit/design-system/no-nested-styles, @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
115
- '&[data-invalid], &:checked[data-invalid]': {
116
- '--radio-border-color': "var(--ds-icon-danger, ".concat(R300, ")")
117
- },
118
- // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
119
- '&:disabled, &:disabled:hover, &:disabled:focus, &:disabled:active, &:disabled[data-invalid]': {
120
- cursor: 'not-allowed',
121
- '--radio-background-color': "var(--ds-background-disabled, ".concat(N20, ")"),
122
- '--radio-border-color': "var(--ds-border-disabled, ".concat(N20, ")"),
123
- '--radio-dot-color': "var(--ds-icon-disabled, ".concat(N70, ")")
124
- }
125
- });
126
- var newRadioStyles = css({
127
- transform: 'scale(calc(7.5 / 12))',
128
- // 15px
129
- '&::after': {
130
- width: 'calc(5.6px * 12 / 7)',
131
- // 6px
132
- height: 'calc(5.6px * 12 / 7)' // 6px
133
- }
134
- });
16
+ var labelPaddingStyles = null;
17
+ var labelStyles = null;
18
+ var radioStyles = null;
19
+ var newRadioStyles = null;
135
20
  var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
136
21
  var ariaLabel = props.ariaLabel,
137
22
  _props$isDisabled = props.isDisabled,
@@ -157,11 +42,15 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
157
42
  packageName: packageName,
158
43
  packageVersion: packageVersion
159
44
  });
160
- return jsx("label", {
45
+ return /*#__PURE__*/React.createElement("label", {
161
46
  "data-testid": testId && "".concat(testId, "--radio-label"),
162
47
  "data-disabled": isDisabled ? 'true' : undefined,
163
- css: labelStyles
164
- }, jsx("input", _extends({}, rest, {
48
+ className: ax(["_1e0c1txw _vchhusvi _kqswh2mm _4cvr1y6m _syazovqm _11c81oud _mqf87wap _g7st13gf"]),
49
+ style: {
50
+ "--_5xk3r4": ix("var(--ds-text, ".concat(N900, ")")),
51
+ "--_1ynhf1h": ix("var(--ds-text-disabled, ".concat(N80, ")"))
52
+ }
53
+ }, /*#__PURE__*/React.createElement("input", _extends({}, rest, {
165
54
  // It is necessary only for Safari. It allows to render focus styles.
166
55
  tabIndex: 0,
167
56
  "aria-label": ariaLabel,
@@ -177,14 +66,32 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
177
66
  // use :invalid selector
178
67
  ,
179
68
  "data-invalid": isInvalid ? 'true' : undefined,
180
- css: [radioStyles,
181
- // eslint-disable-next-line @atlaskit/platform/no-preconditioning, @atlaskit/platform/ensure-feature-flag-prefix
182
- fg('platform-visual-refresh-icons') &&
69
+ ref: ref,
70
+ className: ax(["_1e0c1txw _1bsb1tcg _4t3i1tcg _18s8ze3t _kqswh2mm _4cvr1h6o _1bah1h6o _1o9zidpf _bfhk4t47 _19itbyy8 _2rko1q5u _13diglyw _12ji1r31 _1qu2glyw _12y31o36 _1q6q1kd8 _1151ddza _1s6weh7q _tqbwidpf _t9ec1s1q _v56415j1 _s7n4jp4b _wstuglyw _z0ai1cbz _1qdg1cbz _18postnw _16r2ucr4 _14mj1q5u _aetrb3bt _1peq1xmd _qc5orqeg _iosi1j4g _11jy1j4g _f3ett94y _19ybua6f _1d7pua6f _j5dh13gf _scgf13gf _1gcs13gf _1x1a13gf _6hp813gf _4rya1ouc _o1bd1ouc _nxi61ouc _neoe1ouc _1el21ouc _lekr1pl2 _11v71pl2 _1f8c1pl2 _s2ft1pl2 _17a11pl2 _x48asnw8 _1ib2snw8 _1yk9snw8 _gdmbsnw8 _pmm4snw8 _y2mv1ri4 _1bg4jfq9 _6tjk1ri4 _awqnjfq9 _1rvq12ci _1p9jddza _x2tz1ehr _1iwz1ehr _sj8ye8ep _jckowjs8 _1dvdddza _60akxz7c", fg('platform-visual-refresh-icons') &&
183
71
  // eslint-disable-next-line @atlaskit/platform/ensure-feature-flag-prefix
184
- fg('platform-icon-control-migration') && newRadioStyles],
185
- ref: ref
186
- })), label ? jsx("span", {
187
- css: labelPaddingStyles
72
+ fg('platform-icon-control-migration') && "_t9ec1soj _z0ai120g _1qdg120g"]),
73
+ style: {
74
+ "--_1q9y51y": ix("var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)")),
75
+ "--_4mkb4g": ix("var(--ds-background-input, ".concat(N10, ")")),
76
+ "--_vnm8xo": ix("var(--ds-border-input, ".concat(N100, ")")),
77
+ "--_jf353p": ix("var(--ds-icon-inverse, ".concat(N10, ")")),
78
+ "--_1z08gfx": ix("var(--ds-background-input-hovered, ".concat(N30, ")")),
79
+ "--_174hl94": ix("var(--ds-background-input-pressed, ".concat(N30, ")")),
80
+ "--_1rdyq0k": ix("var(--ds-border-width-outline, 3px)".concat(" solid ", "var(--ds-border-focused, ".concat(B200, ")"))),
81
+ "--_1gcp7nr": ix("var(--ds-background-selected-bold, ".concat(B400, ")")),
82
+ "--_14y1fod": ix("var(--ds-background-selected-bold-hovered, ".concat(B300, ")")),
83
+ "--_9b0jbo": ix("var(--ds-background-selected-bold-pressed, ".concat(B50, ")")),
84
+ "--_uq1ko9": ix("var(--ds-icon-inverse, ".concat(B400, ")")),
85
+ "--_m4cp67": ix("var(--ds-icon-danger, ".concat(R300, ")")),
86
+ "--_r5pknd": ix("var(--ds-background-disabled, ".concat(N20, ")")),
87
+ "--_1ufdgqf": ix("var(--ds-border-disabled, ".concat(N20, ")")),
88
+ "--_1xmcmw9": ix("var(--ds-icon-disabled, ".concat(N70, ")"))
89
+ }
90
+ })), label ? /*#__PURE__*/React.createElement("span", {
91
+ className: ax(["_1yt41j1s"]),
92
+ style: {
93
+ "--_1kppzk3": ix("var(--ds-space-025, 2px)".concat(" ", "var(--ds-space-050, 4px)"))
94
+ }
188
95
  }, label) : null);
189
96
  });
190
97
 
@@ -198,7 +105,7 @@ var InnerRadio = /*#__PURE__*/forwardRef(function Radio(props, ref) {
198
105
  * - [Usage](https://atlassian.design/components/radio/usage)
199
106
  */
200
107
  var Radio = /*#__PURE__*/memo( /*#__PURE__*/forwardRef(function Radio(props, ref) {
201
- return jsx(InnerRadio, _extends({}, props, {
108
+ return /*#__PURE__*/React.createElement(InnerRadio, _extends({}, props, {
202
109
  ref: ref
203
110
  }));
204
111
  }));
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "6.6.0",
3
+ "version": "7.0.0",
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/"
@@ -39,13 +39,14 @@
39
39
  ".": "./src/index.tsx"
40
40
  },
41
41
  "dependencies": {
42
- "@atlaskit/analytics-next": "^10.1.0",
43
- "@atlaskit/ds-lib": "^3.2.0",
42
+ "@atlaskit/analytics-next": "^10.2.0",
43
+ "@atlaskit/css": "^0.7.0",
44
+ "@atlaskit/ds-lib": "^3.3.0",
44
45
  "@atlaskit/platform-feature-flags": "^0.3.0",
45
46
  "@atlaskit/theme": "^14.0.0",
46
- "@atlaskit/tokens": "^2.3.0",
47
+ "@atlaskit/tokens": "^2.4.0",
47
48
  "@babel/runtime": "^7.0.0",
48
- "@emotion/react": "^11.7.1"
49
+ "@compiled/react": "^0.18.1"
49
50
  },
50
51
  "peerDependencies": {
51
52
  "react": "^16.8.0 || ^17.0.0 || ^18.0.0"
@@ -54,7 +55,7 @@
54
55
  "@af/accessibility-testing": "*",
55
56
  "@af/integration-testing": "*",
56
57
  "@af/visual-regression": "*",
57
- "@atlaskit/checkbox": "^15.1.0",
58
+ "@atlaskit/checkbox": "^15.2.0",
58
59
  "@atlaskit/ssr": "*",
59
60
  "@atlaskit/visual-regression": "*",
60
61
  "@atlassian/feature-flags-test-utils": "*",