@atlaskit/radio 6.1.0 → 6.1.2

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 +12 -0
  2. package/Radio/package.json +1 -1
  3. package/RadioGroup/package.json +1 -1
  4. package/dist/cjs/radio.js +6 -5
  5. package/dist/es2019/radio.js +7 -6
  6. package/dist/esm/radio.js +7 -6
  7. package/package.json +10 -4
  8. package/types/package.json +1 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,17 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 6.1.2
4
+
5
+ ### Patch Changes
6
+
7
+ - [#83116](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/83116) [`8d4e99057fe0`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8d4e99057fe0) - Upgrade Typescript from `4.9.5` to `5.4.2`
8
+
9
+ ## 6.1.1
10
+
11
+ ### Patch Changes
12
+
13
+ - [#81644](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/81644) [`8ab7a816dca7`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/8ab7a816dca7) - Revert input border change from the previous version
14
+
3
15
  ## 6.1.0
4
16
 
5
17
  ### Minor Changes
package/Radio/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/radio.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/radio.d.ts"
12
12
  ]
package/RadioGroup/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/radio-group.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/radio-group.d.ts"
12
12
  ]
package/dist/cjs/radio.js CHANGED
@@ -11,12 +11,13 @@ var _react = require("react");
11
11
  var _react2 = require("@emotion/react");
12
12
  var _usePlatformLeafEventHandler = require("@atlaskit/analytics-next/usePlatformLeafEventHandler");
13
13
  var _noop = _interopRequireDefault(require("@atlaskit/ds-lib/noop"));
14
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
14
15
  var _colors = require("@atlaskit/theme/colors");
15
16
  var _constants = require("@atlaskit/theme/constants");
16
17
  var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "name", "onChange", "value", "testId", "analyticsContext"];
17
18
  /** @jsx jsx */
18
19
  var packageName = "@atlaskit/radio";
19
- var packageVersion = "6.1.0";
20
+ var packageVersion = "6.1.2";
20
21
  var fontFamily = (0, _constants.fontFamily)();
21
22
  var noop = _noop.default;
22
23
  var labelPaddingStyles = (0, _react2.css)({
@@ -55,7 +56,7 @@ var radioStyles = (0, _react2.css)({
55
56
  backgroundColor: 'var(--radio-background-color)',
56
57
  /* 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
57
58
  inner circle not be centred at various zoom levels */
58
- border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
59
+ border: "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
59
60
  borderRadius: "var(--ds-border-radius-circle, 50%)",
60
61
  MozAppearance: 'none',
61
62
  outline: 'none',
@@ -65,7 +66,7 @@ var radioStyles = (0, _react2.css)({
65
66
  All other variables are constant
66
67
  */
67
68
  '--radio-background-color': "var(--ds-background-input, ".concat(_colors.N10, ")"),
68
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
69
+ '--radio-border-color': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
69
70
  '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
70
71
  '--radio-dot-opacity': 0,
71
72
  /* 24px * 7 / 12 === 14px height and width */
@@ -87,7 +88,7 @@ var radioStyles = (0, _react2.css)({
87
88
  },
88
89
  '&:hover': {
89
90
  '--radio-background-color': "var(--ds-background-input-hovered, ".concat(_colors.N30, ")"),
90
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")")
91
+ '--radio-border-color': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")")
91
92
  },
92
93
  '&:active': {
93
94
  '--radio-background-color': "var(--ds-background-input-pressed, ".concat(_colors.N30, ")")
@@ -107,7 +108,7 @@ var radioStyles = (0, _react2.css)({
107
108
  },
108
109
  '&:checked:active': {
109
110
  '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(_colors.B50, ")"),
110
- '--radio-border-color': "var(--ds-border-input, ".concat(_colors.N100, ")"),
111
+ '--radio-border-color': (0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(_colors.N100, ")") : "var(--ds-border-input, ".concat(_colors.N40, ")"),
111
112
  '--radio-dot-color': "var(--ds-icon-inverse, ".concat(_colors.B400, ")")
112
113
  },
113
114
  '&:checked:focus': {
package/dist/es2019/radio.js CHANGED
@@ -4,10 +4,11 @@ import { forwardRef, memo } from 'react';
4
4
  import { css, jsx } from '@emotion/react';
5
5
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
6
6
  import __noop from '@atlaskit/ds-lib/noop';
7
- import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
7
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
8
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
8
9
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
9
10
  const packageName = "@atlaskit/radio";
10
- const packageVersion = "6.1.0";
11
+ const packageVersion = "6.1.2";
11
12
  const fontFamily = getFontFamily();
12
13
  const noop = __noop;
13
14
  const labelPaddingStyles = css({
@@ -46,7 +47,7 @@ const radioStyles = css({
46
47
  backgroundColor: 'var(--radio-background-color)',
47
48
  /* 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
48
49
  inner circle not be centred at various zoom levels */
49
- border: `${"var(--ds-border-width, 1px)"} solid var(--radio-border-color)`,
50
+ border: `${getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)'} solid var(--radio-border-color)`,
50
51
  borderRadius: "var(--ds-border-radius-circle, 50%)",
51
52
  MozAppearance: 'none',
52
53
  outline: 'none',
@@ -56,7 +57,7 @@ const radioStyles = css({
56
57
  All other variables are constant
57
58
  */
58
59
  '--radio-background-color': `var(--ds-background-input, ${N10})`,
59
- '--radio-border-color': `var(--ds-border-input, ${N100})`,
60
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
60
61
  '--radio-dot-color': `var(--ds-icon-inverse, ${N10})`,
61
62
  '--radio-dot-opacity': 0,
62
63
  /* 24px * 7 / 12 === 14px height and width */
@@ -78,7 +79,7 @@ const radioStyles = css({
78
79
  },
79
80
  '&:hover': {
80
81
  '--radio-background-color': `var(--ds-background-input-hovered, ${N30})`,
81
- '--radio-border-color': `var(--ds-border-input, ${N100})`
82
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`
82
83
  },
83
84
  '&:active': {
84
85
  '--radio-background-color': `var(--ds-background-input-pressed, ${N30})`
@@ -98,7 +99,7 @@ const radioStyles = css({
98
99
  },
99
100
  '&:checked:active': {
100
101
  '--radio-background-color': `var(--ds-background-selected-bold-pressed, ${B50})`,
101
- '--radio-border-color': `var(--ds-border-input, ${N100})`,
102
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? `var(--ds-border-bold, ${N100})` : `var(--ds-border-input, ${N40})`,
102
103
  '--radio-dot-color': `var(--ds-icon-inverse, ${B400})`
103
104
  },
104
105
  '&:checked:focus': {
package/dist/esm/radio.js CHANGED
@@ -6,10 +6,11 @@ import { forwardRef, memo } from 'react';
6
6
  import { css, jsx } from '@emotion/react';
7
7
  import { usePlatformLeafEventHandler } from '@atlaskit/analytics-next/usePlatformLeafEventHandler';
8
8
  import __noop from '@atlaskit/ds-lib/noop';
9
- import { B200, B300, B400, B50, N10, N100, N20, N30, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
9
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
10
+ import { B200, B300, B400, B50, N10, N100, N20, N30, N40, N70, N80, N900, R300 } from '@atlaskit/theme/colors';
10
11
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
11
12
  var packageName = "@atlaskit/radio";
12
- var packageVersion = "6.1.0";
13
+ var packageVersion = "6.1.2";
13
14
  var fontFamily = getFontFamily();
14
15
  var noop = __noop;
15
16
  var labelPaddingStyles = css({
@@ -48,7 +49,7 @@ var radioStyles = css({
48
49
  backgroundColor: 'var(--radio-background-color)',
49
50
  /* 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
50
51
  inner circle not be centred at various zoom levels */
51
- border: "var(--ds-border-width, 1px)".concat(" solid var(--radio-border-color)"),
52
+ border: "".concat(getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-width, 1px)" : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
52
53
  borderRadius: "var(--ds-border-radius-circle, 50%)",
53
54
  MozAppearance: 'none',
54
55
  outline: 'none',
@@ -58,7 +59,7 @@ var radioStyles = css({
58
59
  All other variables are constant
59
60
  */
60
61
  '--radio-background-color': "var(--ds-background-input, ".concat(N10, ")"),
61
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
62
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
62
63
  '--radio-dot-color': "var(--ds-icon-inverse, ".concat(N10, ")"),
63
64
  '--radio-dot-opacity': 0,
64
65
  /* 24px * 7 / 12 === 14px height and width */
@@ -80,7 +81,7 @@ var radioStyles = css({
80
81
  },
81
82
  '&:hover': {
82
83
  '--radio-background-color': "var(--ds-background-input-hovered, ".concat(N30, ")"),
83
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")")
84
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")")
84
85
  },
85
86
  '&:active': {
86
87
  '--radio-background-color': "var(--ds-background-input-pressed, ".concat(N30, ")")
@@ -100,7 +101,7 @@ var radioStyles = css({
100
101
  },
101
102
  '&:checked:active': {
102
103
  '--radio-background-color': "var(--ds-background-selected-bold-pressed, ".concat(B50, ")"),
103
- '--radio-border-color': "var(--ds-border-input, ".concat(N100, ")"),
104
+ '--radio-border-color': getBooleanFF('platform.design-system-team.update-border-radio-checkbox_7askv') ? "var(--ds-border-bold, ".concat(N100, ")") : "var(--ds-border-input, ".concat(N40, ")"),
104
105
  '--radio-dot-color': "var(--ds-icon-inverse, ".concat(B400, ")")
105
106
  },
106
107
  '&:checked:focus': {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "6.1.0",
3
+ "version": "6.1.2",
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/"
@@ -42,8 +42,9 @@
42
42
  "dependencies": {
43
43
  "@atlaskit/analytics-next": "^9.2.0",
44
44
  "@atlaskit/ds-lib": "^2.2.0",
45
+ "@atlaskit/platform-feature-flags": "^0.2.0",
45
46
  "@atlaskit/theme": "^12.6.0",
46
- "@atlaskit/tokens": "^1.41.0",
47
+ "@atlaskit/tokens": "^1.42.0",
47
48
  "@babel/runtime": "^7.0.0",
48
49
  "@emotion/react": "^11.7.1"
49
50
  },
@@ -60,7 +61,7 @@
60
61
  "@testing-library/react": "^12.1.5",
61
62
  "react-dom": "^16.8.0",
62
63
  "storybook-addon-performance": "^0.16.0",
63
- "typescript": "~4.9.5"
64
+ "typescript": "~5.4.2"
64
65
  },
65
66
  "keywords": [
66
67
  "atlaskit",
@@ -87,6 +88,11 @@
87
88
  "deprecation": "no-deprecated-imports"
88
89
  }
89
90
  },
91
+ "platform-feature-flags": {
92
+ "platform.design-system-team.update-border-radio-checkbox_7askv": {
93
+ "type": "boolean"
94
+ }
95
+ },
90
96
  "homepage": "https://atlassian.design/components/radio/",
91
97
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
92
- }
98
+ }
package/types/package.json CHANGED
@@ -6,7 +6,7 @@
6
6
  "sideEffects": false,
7
7
  "types": "../dist/types/types.d.ts",
8
8
  "typesVersions": {
9
- ">=4.5 <4.9": {
9
+ ">=4.5 <5.4": {
10
10
  "*": [
11
11
  "../dist/types-ts4.5/types.d.ts"
12
12
  ]