@automattic/vip-design-system 0.27.2 → 0.27.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 (3) hide show
  1. package/build/system/Form/Radio.js +7 -10
  2. package/package.json +1 -1
  3. package/src/system/Form/Radio.js +7 -4
package/build/system/Form/Radio.js CHANGED
@@ -19,6 +19,8 @@ var _Label = require("./Label");
19
19
 
20
20
  var _ScreenReaderText = require("../ScreenReaderText/ScreenReaderText");
21
21
 
22
+ var _theme = _interopRequireDefault(require("../theme"));
23
+
22
24
  var _jsxRuntime = require("theme-ui/jsx-runtime");
23
25
 
24
26
  var _excluded = ["children"],
@@ -33,10 +35,9 @@ var prefix = 'vip-radio-component-';
33
35
  var itemStyle = {
34
36
  display: 'flex',
35
37
  alignItems: 'center',
36
- minHeight: function minHeight(theme) {
37
- return theme.space[4] - theme.space[2] + "px";
38
- }
38
+ my: 2
39
39
  };
40
+ var radioPosition = _theme["default"].space[4] - _theme["default"].space[1];
40
41
  var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTextClass, {
41
42
  width: '16px',
42
43
  height: '16px',
@@ -46,7 +47,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
46
47
  border: '2px solid',
47
48
  borderColor: 'border',
48
49
  zIndex: 3,
49
- left: -1 * (theme.space[4] - theme.space[2]) + "px"
50
+ left: -1 * radioPosition + "px"
50
51
  });
51
52
  },
52
53
  '&:checked ~ label::after': {
@@ -57,9 +58,7 @@ var inputStyle = (0, _extends2["default"])({}, _ScreenReaderText.screenReaderTex
57
58
  var labelStyle = {
58
59
  cursor: 'pointer',
59
60
  position: 'relative',
60
- marginLeft: function marginLeft(theme) {
61
- return theme.space[4] - theme.space[2] + "px";
62
- },
61
+ marginLeft: radioPosition + "px",
63
62
  marginBottom: 0,
64
63
  userSelect: 'none',
65
64
  color: 'heading',
@@ -68,9 +67,7 @@ var labelStyle = {
68
67
  borderRadius: '50%',
69
68
  position: 'absolute',
70
69
  top: 0,
71
- left: function left(theme) {
72
- return -1 * (theme.space[4] - theme.space[2]) + "px";
73
- },
70
+ left: -1 * radioPosition + "px",
74
71
  transition: 'all .3s ease-out',
75
72
  zIndex: 2,
76
73
  width: '16px',
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "0.27.2",
3
+ "version": "0.27.3",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "build-storybook",
package/src/system/Form/Radio.js CHANGED
@@ -9,15 +9,18 @@ import PropTypes from 'prop-types';
9
9
  import classNames from 'classnames';
10
10
  import { Label } from './Label';
11
11
  import { screenReaderTextClass } from '../ScreenReaderText/ScreenReaderText';
12
+ import theme from '../theme';
12
13
 
13
14
  const prefix = 'vip-radio-component-';
14
15
 
15
16
  const itemStyle = {
16
17
  display: 'flex',
17
18
  alignItems: 'center',
18
- minHeight: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
19
+ my: 2,
19
20
  };
20
21
 
22
+ const radioPosition = theme.space[ 4 ] - theme.space[ 1 ];
23
+
21
24
  const inputStyle = {
22
25
  ...screenReaderTextClass,
23
26
  width: '16px',
@@ -28,7 +31,7 @@ const inputStyle = {
28
31
  border: '2px solid',
29
32
  borderColor: 'border',
30
33
  zIndex: 3,
31
- left: `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
34
+ left: `${ -1 * radioPosition }px`,
32
35
  } ),
33
36
  '&:checked ~ label::after': {
34
37
  opacity: 1,
@@ -39,7 +42,7 @@ const inputStyle = {
39
42
  const labelStyle = {
40
43
  cursor: 'pointer',
41
44
  position: 'relative',
42
- marginLeft: theme => `${ theme.space[ 4 ] - theme.space[ 2 ] }px`,
45
+ marginLeft: `${ radioPosition }px`,
43
46
  marginBottom: 0,
44
47
  userSelect: 'none',
45
48
  color: 'heading',
@@ -48,7 +51,7 @@ const labelStyle = {
48
51
  borderRadius: '50%',
49
52
  position: 'absolute',
50
53
  top: 0,
51
- left: theme => `${ -1 * ( theme.space[ 4 ] - theme.space[ 2 ] ) }px`,
54
+ left: `${ -1 * radioPosition }px`,
52
55
  transition: 'all .3s ease-out',
53
56
  zIndex: 2,
54
57
  width: '16px',