[MP-917] Support size in Autocomplete props (#4687)

Author: Q-Man

.changeset/honest-pumas-roll.md

@@ -0,0 +1,7 @@
+---
+'@toptal/picasso-autocomplete': minor
+---
+
+### Autocomplete
+
+- add `size` property to control input size

packages/base/Autocomplete/src/Autocomplete/Autocomplete.tsx

@@ -11,7 +11,7 @@ import type {
   Ref,
 } from 'react'
 import React, { forwardRef, useRef } from 'react'
-import type { BaseProps } from '@toptal/picasso-shared'
+import type { BaseProps, SizeType } from '@toptal/picasso-shared'
 import { isForwardRef } from '@toptal/picasso-shared'
 import type { PopperOptions } from 'popper.js'
 import { Input } from '@toptal/picasso-input'
@@ -118,6 +118,8 @@ export interface Props
     disableAutofillInput?: string
   }
   highlight?: 'autofill'
+  /** Component size */
+  size?: SizeType<'medium' | 'large'>
 }
 
 const getItemText = (item: Item | null) =>

packages/base/Autocomplete/src/Autocomplete/story/LargeSize.example.tsx

@@ -0,0 +1,23 @@
+import React from 'react'
+import { Autocomplete } from '@toptal/picasso'
+
+const options = [
+  { text: 'Belarus' },
+  { text: 'Croatia' },
+  { text: 'Lithuania' },
+  { text: 'Slovakia' },
+  { text: 'Ukraine' },
+]
+
+const Example = () => (
+  <div>
+    <Autocomplete
+      placeholder='Start typing country...'
+      options={options}
+      value=''
+      size='large'
+    />
+  </div>
+)
+
+export default Example

packages/base/Autocomplete/src/Autocomplete/story/index.jsx

@@ -98,6 +98,14 @@ page
     },
     'base/Autocomplete'
   )
+  .addExample(
+    'Autocomplete/story/LargeSize.example.tsx',
+    {
+      title: 'Large size',
+      takeScreenshot: false,
+    },
+    'base/Autocomplete'
+  )
   .addExample(
     'Autocomplete/story/Loading.example.tsx',
     'Loading',