@automattic/vip-design-system 2.3.0 → 2.3.1

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/build/system/Button/Button.js +2 -2
  2. package/build/system/NewDialog/DialogClose.js +6 -3
  3. package/build/system/theme/index.d.ts +7 -2
  4. package/build/system/theme/index.js +7 -2
  5. package/package.json +1 -1
  6. package/src/system/Button/Button.tsx +2 -2
  7. package/src/system/NewDialog/DialogClose.tsx +4 -3
  8. package/src/system/theme/index.js +7 -2
package/build/system/Button/Button.js CHANGED
@@ -52,8 +52,8 @@ var Button = exports.Button = /*#__PURE__*/(0, _react.forwardRef)(function (_ref
52
52
  cursor: 'not-allowed',
53
53
  pointerEvents: 'none'
54
54
  },
55
- flexGrow: Boolean(grow) === true ? '1' : 'initial',
56
- width: Boolean(full) === true ? '100%' : 'auto'
55
+ flexGrow: Boolean(grow) === true ? '1' : undefined,
56
+ width: Boolean(full) === true ? '100%' : undefined
57
57
  }, sx)
58
58
  }, rest, {
59
59
  "aria-disabled": disabled,
package/build/system/NewDialog/DialogClose.js CHANGED
@@ -27,8 +27,9 @@ var defaultCloseStyles = exports.defaultCloseStyles = function defaultCloseStyle
27
27
  position: 'absolute',
28
28
  top: 3,
29
29
  right: 3,
30
- minWidth: 38,
31
- minHeight: 38,
30
+ width: 38,
31
+ height: 38,
32
+ p: 0,
32
33
  color: variant === 'primary' ? 'icon.primary' : 'icon.inverse',
33
34
  svg: {
34
35
  '&:hover': {
@@ -47,7 +48,9 @@ var DialogCloseDefault = exports.DialogCloseDefault = /*#__PURE__*/(0, _react.fo
47
48
  variant: "tertiary",
48
49
  sx: defaultCloseStyles(variant),
49
50
  children: (0, _jsxRuntime.jsx)(_io.IoClose, {
50
- "aria-hidden": "true"
51
+ "aria-hidden": "true",
52
+ width: 20,
53
+ height: 20
51
54
  })
52
55
  })
53
56
  });
package/build/system/theme/index.d.ts CHANGED
@@ -67,7 +67,7 @@ declare namespace _default {
67
67
  py: number;
68
68
  px: number;
69
69
  minHeight: string;
70
- height: string;
70
+ display: string;
71
71
  cursor: string;
72
72
  fontWeight: string;
73
73
  boxShadow: string;
@@ -77,10 +77,15 @@ declare namespace _default {
77
77
  color: string;
78
78
  };
79
79
  verticalAlign: string;
80
- display: string;
81
80
  alignItems: string;
82
81
  justifyContent: string;
83
82
  textDecoration: string;
83
+ svg: {
84
+ fill: string;
85
+ '&:hover': {
86
+ fill: string;
87
+ };
88
+ };
84
89
  '&:hover': {
85
90
  textDecoration: string;
86
91
  };
package/build/system/theme/index.js CHANGED
@@ -278,7 +278,7 @@ export default {
278
278
  py: 0,
279
279
  px: 5,
280
280
  minHeight: '38px',
281
- height: '100%',
281
+ display: 'inline-flex',
282
282
  cursor: 'pointer',
283
283
  fontWeight: 'medium',
284
284
  boxShadow: 'none',
@@ -288,10 +288,15 @@ export default {
288
288
  color: 'button.primary.label.hover',
289
289
  },
290
290
  verticalAlign: 'middle',
291
- display: 'inline-flex',
292
291
  alignItems: 'center',
293
292
  justifyContent: 'center',
294
293
  textDecoration: 'none',
294
+ svg: {
295
+ fill: 'currentColor',
296
+ '&:hover': {
297
+ fill: 'inherit',
298
+ },
299
+ },
295
300
  '&:hover': {
296
301
  textDecoration: 'none',
297
302
  },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.3.0",
3
+ "version": "2.3.1",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/Button/Button.tsx CHANGED
@@ -54,8 +54,8 @@ const Button = forwardRef< HTMLButtonElement, ButtonProps >(
54
54
  cursor: 'not-allowed',
55
55
  pointerEvents: 'none',
56
56
  },
57
- flexGrow: Boolean( grow ) === true ? '1' : 'initial',
58
- width: Boolean( full ) === true ? '100%' : 'auto',
57
+ flexGrow: Boolean( grow ) === true ? '1' : undefined,
58
+ width: Boolean( full ) === true ? '100%' : undefined,
59
59
  ...sx,
60
60
  } }
61
61
  { ...rest }
package/src/system/NewDialog/DialogClose.tsx CHANGED
@@ -29,8 +29,9 @@ export const defaultCloseStyles = ( variant = 'primary' ): ThemeUIStyleObject =>
29
29
  position: 'absolute',
30
30
  top: 3,
31
31
  right: 3,
32
- minWidth: 38,
33
- minHeight: 38,
32
+ width: 38,
33
+ height: 38,
34
+ p: 0,
34
35
  color: variant === 'primary' ? 'icon.primary' : 'icon.inverse',
35
36
  svg: {
36
37
  '&:hover': {
@@ -49,7 +50,7 @@ export const DialogCloseDefault = forwardRef< HTMLButtonElement, DialogCloseDefa
49
50
  variant="tertiary"
50
51
  sx={ defaultCloseStyles( variant ) }
51
52
  >
52
- <IoClose aria-hidden="true" />
53
+ <IoClose aria-hidden="true" width={ 20 } height={ 20 } />
53
54
  </Button>
54
55
  </DialogClose>
55
56
  );
package/src/system/theme/index.js CHANGED
@@ -278,7 +278,7 @@ export default {
278
278
  py: 0,
279
279
  px: 5,
280
280
  minHeight: '38px',
281
- height: '100%',
281
+ display: 'inline-flex',
282
282
  cursor: 'pointer',
283
283
  fontWeight: 'medium',
284
284
  boxShadow: 'none',
@@ -288,10 +288,15 @@ export default {
288
288
  color: 'button.primary.label.hover',
289
289
  },
290
290
  verticalAlign: 'middle',
291
- display: 'inline-flex',
292
291
  alignItems: 'center',
293
292
  justifyContent: 'center',
294
293
  textDecoration: 'none',
294
+ svg: {
295
+ fill: 'currentColor',
296
+ '&:hover': {
297
+ fill: 'inherit',
298
+ },
299
+ },
295
300
  '&:hover': {
296
301
  textDecoration: 'none',
297
302
  },