@automattic/vip-design-system 2.20.0 → 2.20.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 (5) hide show
  1. package/build/system/NewForm/FormAutocompleteMultiselect.jsx +7 -5
  2. package/build/system/NewForm/FormSelectLoading.js +1 -0
  3. package/package.json +1 -1
  4. package/src/system/NewForm/FormAutocompleteMultiselect.jsx +7 -5
  5. package/src/system/NewForm/FormSelectLoading.tsx +1 -0
package/build/system/NewForm/FormAutocompleteMultiselect.jsx CHANGED
@@ -111,7 +111,7 @@ const inlineChipsContainerStyles = {
111
111
  flexWrap: 'wrap',
112
112
  alignItems: 'center',
113
113
  p: 1,
114
- pr: 0,
114
+ pr: 5,
115
115
  position: 'relative',
116
116
  '& .autocomplete__input': {
117
117
  ...defaultStyles[ '& .autocomplete__input' ],
@@ -125,13 +125,15 @@ const inlineChipsContainerStyles = {
125
125
  lineHeight: '24px',
126
126
  minHeight: '24px',
127
127
  '& .autocomplete__dropdown-arrow-down': {
128
- top: 'unset',
129
- bottom: '6px',
128
+ top: '6px',
129
+ bottom: 'unset',
130
130
  },
131
131
  },
132
132
  };
133
133
 
134
- const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
134
+ const DefaultArrow = config => (
135
+ <FormSelectArrow className={ config.className } separator={ false } />
136
+ );
135
137
 
136
138
  const AddSelectionStatus = ( { status } ) => {
137
139
  return (
@@ -446,7 +448,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
446
448
  unselectValue={ unselectValue }
447
449
  />
448
450
  ) ) }
449
- <div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
451
+ <div sx={ { flex: '1 1 120px', minWidth: '120px', mr: -5 } }>
450
452
  <Autocomplete
451
453
  id={ forLabel }
452
454
  aria-busy={ loading }
package/build/system/NewForm/FormSelectLoading.js CHANGED
@@ -25,6 +25,7 @@ var kf = keyframes({
25
25
  var loadingStyles = {
26
26
  position: 'absolute',
27
27
  right: 3,
28
+ top: '9px',
28
29
  pointerEvents: 'none',
29
30
  animation: kf + " 1s infinite linear",
30
31
  opacity: 0.5,
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@automattic/vip-design-system",
3
- "version": "2.20.0",
3
+ "version": "2.20.2",
4
4
  "repository": {
5
5
  "type": "git",
6
6
  "url": "https://github.com/Automattic/vip-design-system"
package/src/system/NewForm/FormAutocompleteMultiselect.jsx CHANGED
@@ -111,7 +111,7 @@ const inlineChipsContainerStyles = {
111
111
  flexWrap: 'wrap',
112
112
  alignItems: 'center',
113
113
  p: 1,
114
- pr: 0,
114
+ pr: 5,
115
115
  position: 'relative',
116
116
  '& .autocomplete__input': {
117
117
  ...defaultStyles[ '& .autocomplete__input' ],
@@ -125,13 +125,15 @@ const inlineChipsContainerStyles = {
125
125
  lineHeight: '24px',
126
126
  minHeight: '24px',
127
127
  '& .autocomplete__dropdown-arrow-down': {
128
- top: 'unset',
129
- bottom: '6px',
128
+ top: '6px',
129
+ bottom: 'unset',
130
130
  },
131
131
  },
132
132
  };
133
133
 
134
- const DefaultArrow = config => <FormSelectArrow className={ config.className } />;
134
+ const DefaultArrow = config => (
135
+ <FormSelectArrow className={ config.className } separator={ false } />
136
+ );
135
137
 
136
138
  const AddSelectionStatus = ( { status } ) => {
137
139
  return (
@@ -446,7 +448,7 @@ const FormAutocompleteMultiselect = React.forwardRef(
446
448
  unselectValue={ unselectValue }
447
449
  />
448
450
  ) ) }
449
- <div sx={ { flex: '1 1 120px', minWidth: '120px' } }>
451
+ <div sx={ { flex: '1 1 120px', minWidth: '120px', mr: -5 } }>
450
452
  <Autocomplete
451
453
  id={ forLabel }
452
454
  aria-busy={ loading }
package/src/system/NewForm/FormSelectLoading.tsx CHANGED
@@ -25,6 +25,7 @@ interface FormSelectLoadingProps {
25
25
  const loadingStyles: ThemeUIStyleObject = {
26
26
  position: 'absolute',
27
27
  right: 3,
28
+ top: '9px',
28
29
  pointerEvents: 'none',
29
30
  animation: `${ kf } 1s infinite linear`,
30
31
  opacity: 0.5,