@atlaskit/radio 5.5.2 → 5.6.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 (11) hide show
  1. package/CHANGELOG.md +6 -0
  2. package/dist/cjs/radio.js +6 -3
  3. package/dist/cjs/styles.js +4 -3
  4. package/dist/cjs/version.json +1 -1
  5. package/dist/es2019/radio.js +6 -3
  6. package/dist/es2019/styles.js +5 -4
  7. package/dist/es2019/version.json +1 -1
  8. package/dist/esm/radio.js +6 -3
  9. package/dist/esm/styles.js +5 -4
  10. package/dist/esm/version.json +1 -1
  11. package/package.json +8 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,11 @@
1
1
  # @atlaskit/radio
2
2
 
3
+ ## 5.6.0
4
+
5
+ ### Minor Changes
6
+
7
+ - [`b257978b66a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b257978b66a) - [ux] reduce the border from 2px to 1px
8
+
3
9
  ## 5.5.2
4
10
 
5
11
  ### Patch Changes
package/dist/cjs/radio.js CHANGED
@@ -11,6 +11,7 @@ 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 _components = _interopRequireDefault(require("@atlaskit/theme/components"));
16
17
  var _constants = require("@atlaskit/theme/constants");
@@ -18,7 +19,7 @@ var _styles = _interopRequireDefault(require("./styles"));
18
19
  var _excluded = ["ariaLabel", "isDisabled", "isRequired", "isInvalid", "isChecked", "label", "mode", "name", "onChange", "value", "testId", "analyticsContext"];
19
20
  /** @jsx jsx */
20
21
  var packageName = "@atlaskit/radio";
21
- var packageVersion = "5.5.2";
22
+ var packageVersion = "5.6.0";
22
23
  var fontFamily = (0, _constants.fontFamily)();
23
24
  var noop = _noop.default;
24
25
  var labelPaddingStyles = (0, _react2.css)({
@@ -44,6 +45,7 @@ var darkLabelStyles = (0, _react2.css)({
44
45
  });
45
46
  var radioStyles = (0, _react2.css)({
46
47
  display: 'flex',
48
+ // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
47
49
  /*
48
50
  The circle should be 14px * 14px centred in a 24px * 24px box.
49
51
  This is inclusive of a 2px border and inner circle with 2px radius.
@@ -59,8 +61,9 @@ var radioStyles = (0, _react2.css)({
59
61
  justifyContent: 'center',
60
62
  flexShrink: 0,
61
63
  backgroundColor: 'var(--radio-background-color)',
62
- /* Border should be 2px, multiply by 24/14 to offset scale */
63
- border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
64
+ /* 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
65
+ inner circle not be centred at various zoom levels */
66
+ border: "".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
64
67
  borderRadius: '50%',
65
68
  MozAppearance: 'none',
66
69
  outline: 'none',
package/dist/cjs/styles.js CHANGED
@@ -4,6 +4,7 @@ Object.defineProperty(exports, "__esModule", {
4
4
  value: true
5
5
  });
6
6
  exports.default = getRadioCustomProperties;
7
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
7
8
  var _colors = require("@atlaskit/theme/colors");
8
9
  var radioThemeColors = {
9
10
  light: {
@@ -17,8 +18,8 @@ var radioThemeColors = {
17
18
  dotChecked: "var(--ds-icon-inverse, ".concat(_colors.N10, ")"),
18
19
  dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.N70, ")"),
19
20
  dotActive: "var(--ds-icon-inverse, ".concat(_colors.B400, ")"),
20
- border: "var(--ds-border-input, ".concat(_colors.N40, ")"),
21
- borderHover: "var(--ds-border-input, ".concat(_colors.N40, ")"),
21
+ border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
22
+ borderHover: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.N100 : _colors.N40, ")"),
22
23
  borderDisabled: "var(--ds-border-disabled, ".concat(_colors.N20, ")"),
23
24
  borderFocus: "var(--ds-border-focused, ".concat(_colors.B100, ")")
24
25
  },
@@ -33,7 +34,7 @@ var radioThemeColors = {
33
34
  dotChecked: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
34
35
  dotDisabled: "var(--ds-icon-disabled, ".concat(_colors.DN90, ")"),
35
36
  dotActive: "var(--ds-icon-inverse, ".concat(_colors.DN10, ")"),
36
- border: "var(--ds-border-input, ".concat(_colors.DN80, ")"),
37
+ border: "var(--ds-border-input, ".concat((0, _platformFeatureFlags.getBooleanFF)('platform.design-system-team.update-border-input_ff9l1') ? _colors.DN200 : _colors.DN80, ")"),
37
38
  borderHover: "var(--ds-border-input, ".concat(_colors.DN200, ")"),
38
39
  borderDisabled: "var(--ds-border-disabled, ".concat(_colors.DN10, ")"),
39
40
  borderFocus: "var(--ds-border-focused, ".concat(_colors.B75, ")")
package/dist/cjs/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.5.2",
3
+ "version": "5.6.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/es2019/radio.js CHANGED
@@ -4,12 +4,13 @@ import { forwardRef, memo, useMemo } 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
7
8
  import { DN600, N80, N900 } from '@atlaskit/theme/colors';
8
9
  import GlobalTheme from '@atlaskit/theme/components';
9
10
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
10
11
  import getRadioCustomProperties from './styles';
11
12
  const packageName = "@atlaskit/radio";
12
- const packageVersion = "5.5.2";
13
+ const packageVersion = "5.6.0";
13
14
  const fontFamily = getFontFamily();
14
15
  const noop = __noop;
15
16
  const labelPaddingStyles = css({
@@ -35,6 +36,7 @@ const darkLabelStyles = css({
35
36
  });
36
37
  const radioStyles = css({
37
38
  display: 'flex',
39
+ // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
38
40
  /*
39
41
  The circle should be 14px * 14px centred in a 24px * 24px box.
40
42
  This is inclusive of a 2px border and inner circle with 2px radius.
@@ -50,8 +52,9 @@ const radioStyles = css({
50
52
  justifyContent: 'center',
51
53
  flexShrink: 0,
52
54
  backgroundColor: 'var(--radio-background-color)',
53
- /* Border should be 2px, multiply by 24/14 to offset scale */
54
- border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
55
+ /* 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
56
+ inner circle not be centred at various zoom levels */
57
+ border: `${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)'} solid var(--radio-border-color)`,
55
58
  borderRadius: '50%',
56
59
  MozAppearance: 'none',
57
60
  outline: 'none',
package/dist/es2019/styles.js CHANGED
@@ -1,4 +1,5 @@
1
- import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
1
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
+ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
2
3
  const radioThemeColors = {
3
4
  light: {
4
5
  background: `var(--ds-background-input, ${N10})`,
@@ -11,8 +12,8 @@ const radioThemeColors = {
11
12
  dotChecked: `var(--ds-icon-inverse, ${N10})`,
12
13
  dotDisabled: `var(--ds-icon-disabled, ${N70})`,
13
14
  dotActive: `var(--ds-icon-inverse, ${B400})`,
14
- border: `var(--ds-border-input, ${N40})`,
15
- borderHover: `var(--ds-border-input, ${N40})`,
15
+ border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
16
+ borderHover: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40})`,
16
17
  borderDisabled: `var(--ds-border-disabled, ${N20})`,
17
18
  borderFocus: `var(--ds-border-focused, ${B100})`
18
19
  },
@@ -27,7 +28,7 @@ const radioThemeColors = {
27
28
  dotChecked: `var(--ds-icon-inverse, ${DN10})`,
28
29
  dotDisabled: `var(--ds-icon-disabled, ${DN90})`,
29
30
  dotActive: `var(--ds-icon-inverse, ${DN10})`,
30
- border: `var(--ds-border-input, ${DN80})`,
31
+ border: `var(--ds-border-input, ${getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80})`,
31
32
  borderHover: `var(--ds-border-input, ${DN200})`,
32
33
  borderDisabled: `var(--ds-border-disabled, ${DN10})`,
33
34
  borderFocus: `var(--ds-border-focused, ${B75})`
package/dist/es2019/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.5.2",
3
+ "version": "5.6.0",
4
4
  "sideEffects": false
5
5
  }
package/dist/esm/radio.js CHANGED
@@ -6,12 +6,13 @@ import { forwardRef, memo, useMemo } 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 { getBooleanFF } from '@atlaskit/platform-feature-flags';
9
10
  import { DN600, N80, N900 } from '@atlaskit/theme/colors';
10
11
  import GlobalTheme from '@atlaskit/theme/components';
11
12
  import { fontFamily as getFontFamily } from '@atlaskit/theme/constants';
12
13
  import getRadioCustomProperties from './styles';
13
14
  var packageName = "@atlaskit/radio";
14
- var packageVersion = "5.5.2";
15
+ var packageVersion = "5.6.0";
15
16
  var fontFamily = getFontFamily();
16
17
  var noop = __noop;
17
18
  var labelPaddingStyles = css({
@@ -37,6 +38,7 @@ var darkLabelStyles = css({
37
38
  });
38
39
  var radioStyles = css({
39
40
  display: 'flex',
41
+ // TODO https://product-fabric.atlassian.net/browse/DSP-10507 revisit and remove the scale of 14/24
40
42
  /*
41
43
  The circle should be 14px * 14px centred in a 24px * 24px box.
42
44
  This is inclusive of a 2px border and inner circle with 2px radius.
@@ -52,8 +54,9 @@ var radioStyles = css({
52
54
  justifyContent: 'center',
53
55
  flexShrink: 0,
54
56
  backgroundColor: 'var(--radio-background-color)',
55
- /* Border should be 2px, multiply by 24/14 to offset scale */
56
- border: 'calc(2px * 12 / 7) solid var(--radio-border-color)',
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
58
+ inner circle not be centred at various zoom levels */
59
+ border: "".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? '1px' : 'calc(2px * 12 / 7)', " solid var(--radio-border-color)"),
57
60
  borderRadius: '50%',
58
61
  MozAppearance: 'none',
59
62
  outline: 'none',
package/dist/esm/styles.js CHANGED
@@ -1,4 +1,5 @@
1
- import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
1
+ import { getBooleanFF } from '@atlaskit/platform-feature-flags';
2
+ import { B100, B200, B300, B400, B50, B75, DN10, DN200, DN30, DN80, DN90, N10, N100, N20, N30, N40, N70, R300 } from '@atlaskit/theme/colors';
2
3
  var radioThemeColors = {
3
4
  light: {
4
5
  background: "var(--ds-background-input, ".concat(N10, ")"),
@@ -11,8 +12,8 @@ var radioThemeColors = {
11
12
  dotChecked: "var(--ds-icon-inverse, ".concat(N10, ")"),
12
13
  dotDisabled: "var(--ds-icon-disabled, ".concat(N70, ")"),
13
14
  dotActive: "var(--ds-icon-inverse, ".concat(B400, ")"),
14
- border: "var(--ds-border-input, ".concat(N40, ")"),
15
- borderHover: "var(--ds-border-input, ".concat(N40, ")"),
15
+ border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
16
+ borderHover: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? N100 : N40, ")"),
16
17
  borderDisabled: "var(--ds-border-disabled, ".concat(N20, ")"),
17
18
  borderFocus: "var(--ds-border-focused, ".concat(B100, ")")
18
19
  },
@@ -27,7 +28,7 @@ var radioThemeColors = {
27
28
  dotChecked: "var(--ds-icon-inverse, ".concat(DN10, ")"),
28
29
  dotDisabled: "var(--ds-icon-disabled, ".concat(DN90, ")"),
29
30
  dotActive: "var(--ds-icon-inverse, ".concat(DN10, ")"),
30
- border: "var(--ds-border-input, ".concat(DN80, ")"),
31
+ border: "var(--ds-border-input, ".concat(getBooleanFF('platform.design-system-team.update-border-input_ff9l1') ? DN200 : DN80, ")"),
31
32
  borderHover: "var(--ds-border-input, ".concat(DN200, ")"),
32
33
  borderDisabled: "var(--ds-border-disabled, ".concat(DN10, ")"),
33
34
  borderFocus: "var(--ds-border-focused, ".concat(B75, ")")
package/dist/esm/version.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.5.2",
3
+ "version": "5.6.0",
4
4
  "sideEffects": false
5
5
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/radio",
3
- "version": "5.5.2",
3
+ "version": "5.6.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,6 +39,7 @@
39
39
  "dependencies": {
40
40
  "@atlaskit/analytics-next": "^9.1.0",
41
41
  "@atlaskit/ds-lib": "^2.2.0",
42
+ "@atlaskit/platform-feature-flags": "^0.2.0",
42
43
  "@atlaskit/theme": "^12.5.0",
43
44
  "@atlaskit/tokens": "^1.4.0",
44
45
  "@babel/runtime": "^7.0.0",
@@ -57,6 +58,7 @@
57
58
  "@atlaskit/visual-regression": "*",
58
59
  "@atlaskit/webdriver-runner": "*",
59
60
  "@atlassian/atlassian-frontend-prettier-config-1.0.1": "npm:@atlassian/atlassian-frontend-prettier-config@1.0.1",
61
+ "@atlassian/feature-flags-test-utils": "*",
60
62
  "@testing-library/react": "^12.1.5",
61
63
  "react-dom": "^16.8.0",
62
64
  "storybook-addon-performance": "^0.16.0",
@@ -86,6 +88,11 @@
86
88
  "deprecation": "no-deprecated-imports"
87
89
  }
88
90
  },
91
+ "platform-feature-flags": {
92
+ "platform.design-system-team.update-border-input_ff9l1": {
93
+ "type": "boolean"
94
+ }
95
+ },
89
96
  "homepage": "https://atlassian.design/components/radio/",
90
97
  "prettier": "@atlassian/atlassian-frontend-prettier-config-1.0.1"
91
98
  }