Develop

core/components/css-utilities/Spacing/Data.tsx

@@ -15,6 +15,10 @@ const classMap = [
     marginClasses: 'm-3',
     paddingClasses: 'p-3',
   },
+  {
+    marginClasses: 'm-3-5',
+    paddingClasses: 'p-3-5',
+  },
   {
     marginClasses: 'm-4',
     paddingClasses: 'p-4',
@@ -79,6 +83,10 @@ const classMap = [
     marginClasses: 'mx-3',
     paddingClasses: 'px-3',
   },
+  {
+    marginClasses: 'mx-3-5',
+    paddingClasses: 'px-3-5',
+  },
   {
     marginClasses: 'mx-4',
     paddingClasses: 'px-4',
@@ -143,6 +151,10 @@ const classMap = [
     marginClasses: 'my-3',
     paddingClasses: 'py-3',
   },
+  {
+    marginClasses: 'my-3-5',
+    paddingClasses: 'py-3-5',
+  },
   {
     marginClasses: 'my-4',
     paddingClasses: 'py-4',
@@ -207,6 +219,10 @@ const classMap = [
     marginClasses: 'mt-3',
     paddingClasses: 'pt-3',
   },
+  {
+    marginClasses: 'mt-3-5',
+    paddingClasses: 'pt-3-5',
+  },
   {
     marginClasses: 'mt-4',
     paddingClasses: 'pt-4',
@@ -271,6 +287,10 @@ const classMap = [
     marginClasses: 'mb-3',
     paddingClasses: 'pb-3',
   },
+  {
+    marginClasses: 'mb-3-5',
+    paddingClasses: 'pb-3-5',
+  },
   {
     marginClasses: 'mb-4',
     paddingClasses: 'pb-4',
@@ -335,6 +355,10 @@ const classMap = [
     marginClasses: 'mr-3',
     paddingClasses: 'pr-3',
   },
+  {
+    marginClasses: 'mr-3-5',
+    paddingClasses: 'pr-3-5',
+  },
   {
     marginClasses: 'mr-4',
     paddingClasses: 'pr-4',
@@ -399,6 +423,10 @@ const classMap = [
     marginClasses: 'ml-3',
     paddingClasses: 'pl-3',
   },
+  {
+    marginClasses: 'ml-3-5',
+    paddingClasses: 'pl-3-5',
+  },
   {
     marginClasses: 'ml-4',
     paddingClasses: 'pl-4',
@@ -454,6 +482,7 @@ export const sizeData = [
   { pixel: '1px', value: '1', properties: 'var(--spacing-xs)' },
   { pixel: '2px', value: '2', properties: 'var(--spacing-s)' },
   { pixel: '4px', value: '3', properties: 'var(--spacing-m)' },
+  { pixel: '6px', value: '3-5', properties: 'var(--spacing-0-75)' },
   { pixel: '8px', value: '4', properties: 'var(--spacing)' },
   { pixel: '12px', value: '5', properties: 'var(--spacing-l)' },
   { pixel: '16px', value: '6', properties: 'var(--spacing-2)' },
@@ -468,11 +497,12 @@ export const sizeData = [
   { pixel: '', value: 'auto', properties: 'auto' },
 ];
 
-const sizeMap = {
+const sizeMap: Record<string | number, string> = {
   0: '0',
   1: '1px',
   2: '2px',
   3: '4px',
+  '3-5': '6px',
   4: '8px',
   5: '12px',
   6: '16px',
@@ -489,7 +519,13 @@ const sizeMap = {
 
 export const classData = classMap.map((item) => {
   const { paddingClasses = '' } = item;
-  const key = paddingClasses.split('-')[1] as keyof typeof sizeMap;
+  const values = paddingClasses.split('-');
+  let key;
+  if (values.length > 2) {
+    key = '3-5' as keyof typeof sizeMap;
+  } else {
+    key = values[1] as keyof typeof sizeMap;
+  }
 
   return {
     ...item,

core/components/molecules/chipInput/ChipInput.tsx

@@ -92,6 +92,8 @@ export const ChipInput = (props: ChipInputProps) => {
   } = props;
 
   const inputRef = React.createRef<HTMLInputElement>();
+  const customRef = React.useRef<any>();
+
   const [chips, setChips] = React.useState(value || defaultValue);
   const [inputValue, setInputValue] = React.useState('');
 
@@ -103,6 +105,13 @@ export const ChipInput = (props: ChipInputProps) => {
     }
   }, [value]);
 
+  React.useEffect(() => {
+    if (inputValue === '' && inputRef.current) {
+      inputRef.current.style.flexBasis = '0';
+      customRef.current.charCount = null;
+    }
+  }, [inputValue]);
+
   const ChipInputBorderClass = classNames({
     ['ChipInput-border']: true,
     ['ChipInput-border--error']: error,
@@ -178,6 +187,23 @@ export const ChipInput = (props: ChipInputProps) => {
   };
 
   const onInputChangeHandler = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const elementScrollWidth = inputRef.current?.scrollWidth;
+    const elementClientWidth = inputRef.current?.clientWidth;
+    const charLen = e.target.value.length;
+
+    if (elementScrollWidth && elementClientWidth && inputRef.current) {
+      if (elementScrollWidth > elementClientWidth && inputValue.length <= charLen && customRef.current) {
+        inputRef.current.style.flexBasis = 'auto';
+        customRef.current.charCount = charLen;
+      } else if (
+        elementScrollWidth <= elementClientWidth &&
+        inputValue.length > charLen &&
+        charLen <= customRef.current?.charCount - 2
+      ) {
+        inputRef.current.style.flex = '0';
+      }
+    }
+
     setInputValue(e.target.value);
   };
 
@@ -215,7 +241,7 @@ export const ChipInput = (props: ChipInputProps) => {
         onClick={onClickHandler}
         tabIndex={disabled ? -1 : 0}
       >
-        <div className="ChipInput-wrapper">
+        <div className="ChipInput-wrapper" ref={customRef}>
           {chips && chips.length > 0 && chipComponents}
           <input
             data-test="DesignSystem-ChipInput--Input"

core/components/molecules/chipInput/__tests__/__snapshots__/ChipInput.test.tsx.snap

@@ -87,6 +87,7 @@ exports[`ChipInput component
             class="ChipInput-input"
             data-test="DesignSystem-ChipInput--Input"
             placeholder=""
+            style="flex-basis: 0px;"
             value=""
           />
         </div>
@@ -193,6 +194,7 @@ exports[`ChipInput component
             data-test="DesignSystem-ChipInput--Input"
             disabled=""
             placeholder=""
+            style="flex-basis: 0px;"
             value=""
           />
         </div>
@@ -298,6 +300,7 @@ exports[`ChipInput component
             class="ChipInput-input"
             data-test="DesignSystem-ChipInput--Input"
             placeholder=""
+            style="flex-basis: 0px;"
             value=""
           />
         </div>

core/components/molecules/dropzone/utils.tsx

@@ -13,6 +13,10 @@ export const accepts = (file: File, acceptedFiles?: string | string[]) => {
     const mimeType = (file.type || '').toLowerCase();
     const baseMimeType = mimeType.replace(/\/.*$/, '');
 
+    if (!mimeType) {
+      return true;
+    }
+
     return acceptedFilesArray.some((type) => {
       const validType = type.trim().toLowerCase();
       if (validType.charAt(0) === '.') {

css/Readme.md

@@ -99,6 +99,7 @@
 | --spacing-xs 	| 1px   	|
 | --spacing-s  	| 2px   	|
 | --spacing-m  	| 4px   	|
+| --spacing-0-75  	| 6px   	|
 | --spacing    	| 8px   	|
 | --spacing-l  	| 12px  	|
 | --spacing-2  	| 16px  	|
@@ -128,12 +129,13 @@ x - for classes that set both *-left and *-right<br>
 y - for classes that set both *-top and *-bottom<br>   
 blank - for classes that set a margin or padding on all 4 sides of the element<br>  
 Where size is one of:
-| value | properites |
+| value | properties |
 | ----- | ---------- |         
 | **0** |  0 ; |
 | **1** |  --spacing-xs ;|
 | **2** |  --spacing-s ; |
 | **3** |  --spacing-m ; |
+| **3-5** |  --spacing-0-75 ; |
 | **4** |  --spacing ; |
 | **5** |  --spacing-l ; |
 | **6** |  --spacing-2 ; |
@@ -155,6 +157,7 @@ Where size is one of:
 | **.m-1** 	| **.p-1** 	|
 | **.m-2** 	| **.p-2** 	|
 | **.m-3** 	| **.p-3** 	|
+| **.m-3-5** 	| **.p-3-5** 	|
 | **.m-4** 	| **.p-4** 	|
 | **.m-5** 	| **.p-5** 	|
 | **.m-6** 	| **.p-6** 	|
@@ -171,6 +174,7 @@ Where size is one of:
 | **.mx-1** 	| **.px-1** 	|
 | **.mx-2** 	| **.px-2** 	|
 | **.mx-3** 	| **.px-3** 	|
+| **.mx-3-5** 	| **.px-3-5** 	|
 | **.mx-4** 	| **.px-4** 	|
 | **.mx-5** 	| **.px-5** 	|
 | **.mx-6** 	| **.px-6** 	|
@@ -187,6 +191,7 @@ Where size is one of:
 | **.my-1** 	| **.py-1** 	|
 | **.my-2** 	| **.py-2** 	|
 | **.my-3** 	| **.py-3** 	|
+| **.my-3-5** 	| **.py-3-5** 	|
 | **.my-4** 	| **.py-4** 	|
 | **.my-5** 	| **.py-5** 	|
 | **.my-6** 	| **.py-6** 	|
@@ -203,6 +208,7 @@ Where size is one of:
 | **.mt-1** 	| **.pt-1** 	|
 | **.mt-2** 	| **.pt-2** 	|
 | **.mt-3** 	| **.pt-3** 	|
+| **.mt-3-5** 	| **.pt-3-5** 	|
 | **.mt-4** 	| **.pt-4** 	|
 | **.mt-5** 	| **.pt-5** 	|
 | **.mt-6** 	| **.pt-6** 	|
@@ -219,6 +225,7 @@ Where size is one of:
 | **.mb-1** 	| **.pb-1** 	|
 | **.mb-2** 	| **.pb-2** 	|
 | **.mb-3** 	| **.pb-3** 	|
+| **.mb-3-5** 	| **.pb-3-5** 	|
 | **.mb-4** 	| **.pb-4** 	|
 | **.mb-5** 	| **.pb-5** 	|
 | **.mb-6** 	| **.pb-6** 	|
@@ -235,6 +242,7 @@ Where size is one of:
 | **.mr-1** 	| **.pr-1** 	|
 | **.mr-2** 	| **.pr-2** 	|
 | **.mr-3** 	| **.pr-3** 	|
+| **.mr-3-5** 	| **.pr-3-5** 	|
 | **.mr-4** 	| **.pr-4** 	|
 | **.mr-5** 	| **.pr-5** 	|
 | **.mr-6** 	| **.pr-6** 	|
@@ -251,6 +259,7 @@ Where size is one of:
 | **.ml-1** 	| **.pl-1** 	|
 | **.ml-2** 	| **.pl-2** 	|
 | **.ml-3** 	| **.pl-3** 	|
+| **.ml-3-5** 	| **.pl-3-5** 	|
 | **.ml-4** 	| **.pl-4** 	|
 | **.ml-5** 	| **.pl-5** 	|
 | **.ml-6** 	| **.pl-6** 	|

css/src/components/tooltip.css

@@ -3,7 +3,7 @@
   padding: var(--spacing-m) var(--spacing);
   border-radius: var(--spacing-m);
   z-index: 500;
-  background: color-mod(var(--inverse) a(0.88));
+  background: var(--inverse);
   overflow: hidden;
   box-sizing: border-box;
   transition: opacity 120ms;