@automattic/vip-design-system 1.6.5 → 1.6.6

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 (6) hide show
  1. package/build/system/NewForm/FormSelect.js +5 -2
  2. package/build/system/NewForm/FormSelectArrow.js +2 -2
  3. package/package.json +1 -1
  4. package/src/system/NewForm/FormSelect.js +5 -2
  5. package/src/system/NewForm/FormSelectArrow.js +2 -2
  6. package/tokens/utilities/colors/package-lock.json +6 -6
package/build/system/NewForm/FormSelect.js CHANGED
@@ -16,6 +16,7 @@ import { baseControlStyle } from '../Form/Input.styles';
16
16
  import { Label } from '../Form/Label';
17
17
 
18
18
  const MAX_SUGGESTED_OPTIONS = 15;
19
+ const ICON_SIZE = 24;
19
20
  const isDev = process.env.NODE_ENV !== 'production';
20
21
 
21
22
  const defaultStyles = {
@@ -26,6 +27,8 @@ const defaultStyles = {
26
27
  appearance: 'none',
27
28
  minHeight: '36px',
28
29
  lineHeight: '36px',
30
+ fontFamily: 'inherit',
31
+ fontSize: '1em',
29
32
  };
30
33
 
31
34
  const renderOption = ( label, value ) => {
@@ -102,7 +105,7 @@ const FormSelect = React.forwardRef(
102
105
  );
103
106
 
104
107
  const SelectLabel = () => (
105
- <Label required={ required } htmlFor={ forLabel }>
108
+ <Label sx={ { lineHeight: `${ ICON_SIZE }px` } } required={ required } htmlFor={ forLabel }>
106
109
  { label }
107
110
  </Label>
108
111
  );
@@ -131,7 +134,7 @@ const FormSelect = React.forwardRef(
131
134
  : renderOption( optionLabel( option ), optionValue( option ) )
132
135
  ) }
133
136
  </select>
134
- <FormSelectArrow />
137
+ <FormSelectArrow iconSize={ ICON_SIZE } />
135
138
  </FormSelectContent>
136
139
 
137
140
  { hasError && errorMessage && (
package/build/system/NewForm/FormSelectArrow.js CHANGED
@@ -11,11 +11,11 @@ import { MdExpandMore } from 'react-icons/md';
11
11
  */
12
12
  import { baseControlBorderStyle as borderStyle } from '../Form/Input.styles';
13
13
 
14
- export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
14
+ export const FormSelectArrow = React.forwardRef( ( { iconSize = 24, ...props }, forwardRef ) => (
15
15
  <MdExpandMore
16
16
  ref={ forwardRef }
17
17
  aria-hidden="true"
18
- size={ 24 }
18
+ size={ iconSize }
19
19
  sx={ {
20
20
  position: 'absolute',
21
21
  paddingLeft: 2,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "1.6.5",
3
+ "version": "1.6.6",
4
4
  "main": "build/system/index.js",
5
5
  "scripts": {
6
6
  "build-storybook": "storybook build",
package/src/system/NewForm/FormSelect.js CHANGED
@@ -16,6 +16,7 @@ import { baseControlStyle } from '../Form/Input.styles';
16
16
  import { Label } from '../Form/Label';
17
17
 
18
18
  const MAX_SUGGESTED_OPTIONS = 15;
19
+ const ICON_SIZE = 24;
19
20
  const isDev = process.env.NODE_ENV !== 'production';
20
21
 
21
22
  const defaultStyles = {
@@ -26,6 +27,8 @@ const defaultStyles = {
26
27
  appearance: 'none',
27
28
  minHeight: '36px',
28
29
  lineHeight: '36px',
30
+ fontFamily: 'inherit',
31
+ fontSize: '1em',
29
32
  };
30
33
 
31
34
  const renderOption = ( label, value ) => {
@@ -102,7 +105,7 @@ const FormSelect = React.forwardRef(
102
105
  );
103
106
 
104
107
  const SelectLabel = () => (
105
- <Label required={ required } htmlFor={ forLabel }>
108
+ <Label sx={ { lineHeight: `${ ICON_SIZE }px` } } required={ required } htmlFor={ forLabel }>
106
109
  { label }
107
110
  </Label>
108
111
  );
@@ -131,7 +134,7 @@ const FormSelect = React.forwardRef(
131
134
  : renderOption( optionLabel( option ), optionValue( option ) )
132
135
  ) }
133
136
  </select>
134
- <FormSelectArrow />
137
+ <FormSelectArrow iconSize={ ICON_SIZE } />
135
138
  </FormSelectContent>
136
139
 
137
140
  { hasError && errorMessage && (
package/src/system/NewForm/FormSelectArrow.js CHANGED
@@ -11,11 +11,11 @@ import { MdExpandMore } from 'react-icons/md';
11
11
  */
12
12
  import { baseControlBorderStyle as borderStyle } from '../Form/Input.styles';
13
13
 
14
- export const FormSelectArrow = React.forwardRef( ( props, forwardRef ) => (
14
+ export const FormSelectArrow = React.forwardRef( ( { iconSize = 24, ...props }, forwardRef ) => (
15
15
  <MdExpandMore
16
16
  ref={ forwardRef }
17
17
  aria-hidden="true"
18
- size={ 24 }
18
+ size={ iconSize }
19
19
  sx={ {
20
20
  position: 'absolute',
21
21
  paddingLeft: 2,
package/tokens/utilities/colors/package-lock.json CHANGED
@@ -1517,9 +1517,9 @@
1517
1517
  "integrity": "sha512-oXbJGbjDnfJRWPC7Va38EFhd+A8JWE5/hCiKcK8qjCdbLj9DTpsq6MEudwpRTH+V4qq+Jw7d3pUgQdSr3x3mTA=="
1518
1518
  },
1519
1519
  "node_modules/follow-redirects": {
1520
- "version": "1.15.2",
1521
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
1522
- "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
1520
+ "version": "1.15.4",
1521
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
1522
+ "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
1523
1523
  "funding": [
1524
1524
  {
1525
1525
  "type": "individual",
@@ -4921,9 +4921,9 @@
4921
4921
  "integrity": "sha512-oXbJGbjDnfJRWPC7Va38EFhd+A8JWE5/hCiKcK8qjCdbLj9DTpsq6MEudwpRTH+V4qq+Jw7d3pUgQdSr3x3mTA=="
4922
4922
  },
4923
4923
  "follow-redirects": {
4924
- "version": "1.15.2",
4925
- "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.2.tgz",
4926
- "integrity": "sha512-VQLG33o04KaQ8uYi2tVNbdrWp1QWxNNea+nmIB4EVM28v0hmP17z7aG1+wAkNzVq4KeXTq3221ye5qTJP91JwA==",
4924
+ "version": "1.15.4",
4925
+ "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.4.tgz",
4926
+ "integrity": "sha512-Cr4D/5wlrb0z9dgERpUL3LrmPKVDsETIJhaCMeDfuFYcqa5bldGV6wBsAN6X/vxlXQtFBMrXdXxdL8CbDTGniw==",
4927
4927
  "peer": true
4928
4928
  },
4929
4929
  "font-atlas": {