Autocomplete support for size

gsoft-inc · Apr 30, 2024 · 04900c0 · 04900c0
1 parent 16b5874
commit 04900c0
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 0 deletions.
diff --git a/.changeset/little-badgers-flash.md b/.changeset/little-badgers-flash.md
@@ -0,0 +1,5 @@
+---
+"@orbit-ui/transition-components": patch
+---
+
+Fixed a typing issue when using a size on Autocomplete
diff --git a/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx b/packages/components/src/autocomplete/docs/Autocomplete.stories.mdx
@@ -207,6 +207,35 @@ An autocomplete trigger can have an icon.
     </Story>
 </Preview>
 
+### Size
+
+An autocomplete trigger can have different sizes.
+
+<Preview>
+    <Story name="size">
+        <Inline alignY="center">
+            <Autocomplete placeholder="Planets" aria-label="Planets" size="sm">
+                <Item key="earth">Earth</Item>
+                <Item key="jupiter">Jupiter</Item>
+                <Item key="mars">Mars</Item>
+                <Item key="mercury">Mercury</Item>
+                <Item key="neptune">Neptune</Item>
+                <Item key="saturn">Saturn</Item>
+                <Item key="uranus">Uranus</Item>
+            </Autocomplete>
+            <Autocomplete placeholder="Planets" aria-label="Planets" size="md">
+                <Item key="earth">Earth</Item>
+                <Item key="jupiter">Jupiter</Item>
+                <Item key="mars">Mars</Item>
+                <Item key="mercury">Mercury</Item>
+                <Item key="neptune">Neptune</Item>
+                <Item key="saturn">Saturn</Item>
+                <Item key="uranus">Uranus</Item>
+            </Autocomplete>
+        </Inline>
+    </Story>
+</Preview>
+
 ### Disabled
 
 <Preview>

diff --git a/packages/components/src/autocomplete/src/Autocomplete.tsx b/packages/components/src/autocomplete/src/Autocomplete.tsx
@@ -82,6 +82,10 @@ export interface InnerAutocompleteProps extends PopupProps, Omit<AbstractInputPr
      * Additional props to render on the menu of options.
      */
     overlayProps?: Partial<OverlayProps>;
+    /**
+    * An autocomplete trigger can vary in size.
+    */
+    size?: ResponsiveProp<"sm" | "md">;
     /**
      * A controlled autocomplete value.
      */
@@ -131,6 +135,7 @@ export function InnerAutocomplete(props: InnerAutocompleteProps) {
         placeholder,
         readOnly,
         required,
+        size,
         validationState,
         value: valueProp,
         wrapperProps,
@@ -419,6 +424,7 @@ export function InnerAutocomplete(props: InnerAutocompleteProps) {
                         readOnly,
                         ref: triggerRef,
                         role: "combobox",
+                        size,
                         type: "text",
                         validationState,
                         value: queryRef.current,

diff --git a/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx b/packages/components/src/autocomplete/tests/chromatic/Autocomplete.stories.tsx
@@ -221,6 +221,16 @@ export const DefaultValueNotMatching: AutocompleteStory = {
     )
 };
 
+export const Size: AutocompleteStory = {
+    storyName: "size",
+    render: () => (
+        <Autocomplete size="sm" placeholder="Select a planet" aria-label="Planets">
+            <Item key="earth">Earth</Item>
+            <Item key="mars">Mars</Item>
+            <Item key="saturn">Saturn</Item>
+        </Autocomplete>
+    )
+};
 
 export const TriggerIcon: AutocompleteStory = {
     storyName: "trigger icon",