Add animation transitions and combobox option styling support (#2893)

* feat(combobox): add class prop support for custom option styling

- Add class prop to combobox-option component
- Add optionClass prop to combobox component to pass through custom classes
- Use tailwind-merge to properly combine classes with defaults

* feat(menu): add smooth animation transitions for menu open/close

- Replace fly transition with CSS transitions for better performance
- Use visibility and transform/opacity for smooth animations
- Add transition-all with 100ms duration for opening
- Scale from 95% to 100% with opacity fade

* feat(modal): add smooth animation transitions for modal open

- Add transition classes for smooth scale and opacity animations
- Use duration-200 for modal (slightly slower than menu for better UX)
- Add backdrop fade animation with bg-black/50

* fix(modal): remove backdrop background color override

Author: rossnelson

src/lib/holocene/combobox/combobox-option.svelte

@@ -1,29 +1,35 @@
 <script lang="ts">
+  import { twMerge as merge } from 'tailwind-merge';
+
   import MenuItem from '$lib/holocene/menu/menu-item.svelte';
 
   interface Props {
     selected?: boolean;
     disabled?: boolean;
     label: string;
+    class?: string;
   }
 
   interface DisabledProps {
     label: string;
     disabled: true;
     selected?: never;
+    class?: string;
   }
 
   type $$Props = Props | DisabledProps;
 
   export let selected = false;
   export let disabled = false;
   export let label: string;
+  let className = '';
+  export { className as class };
 </script>
 
 <MenuItem
   on:click
   role="option"
-  class="break-all"
+  class={merge('break-all', className)}
   aria-selected={selected}
   aria-disabled={disabled}
   {selected}

src/lib/holocene/combobox/combobox.svelte

@@ -93,6 +93,7 @@
     maxMenuHeight?: string;
     variant?: ComboboxStyles['variant'];
     class?: string;
+    optionClass?: string;
   }
 
   type MultiSelectProps = {
@@ -163,6 +164,7 @@
   export let loading = false;
   export let loadingText = 'Loading more results';
   export let variant: ComboboxStyles['variant'] = 'default';
+  export let optionClass = '';
 
   export let numberOfItemsSelectedLabel = (count: number) =>
     `${count} option${count > 1 ? 's' : ''} selected`;
@@ -577,6 +579,7 @@
         on:click={() => handleSelectOption(option)}
         selected={isSelected(option, value)}
         label={getDisplayValue(option)}
+        class={optionClass}
       />
     {:else}
       {#if loading === false}

src/lib/holocene/menu/menu.svelte

@@ -1,6 +1,5 @@
 <script lang="ts">
   import type { HTMLAttributes } from 'svelte/elements';
-  import { fly } from 'svelte/transition';
 
   import { getContext } from 'svelte';
   import { twMerge as merge } from 'tailwind-merge';
@@ -45,10 +44,16 @@
 </script>
 
 <ul
-  in:fly={{ duration: 100 }}
   role="menu"
-  class={merge('menu', maxHeight, position, className)}
-  class:hidden={!$open}
+  class={merge(
+    'menu',
+    'transition-all duration-100 ease-out',
+    !$open && 'invisible scale-95 opacity-0',
+    $open && 'visible scale-100 opacity-100',
+    maxHeight,
+    position,
+    className,
+  )}
   aria-labelledby={id}
   tabindex={-1}
   style={position === 'top-right' || position === 'top-left'

src/lib/holocene/modal.svelte

@@ -88,7 +88,13 @@
   {id}
   on:close={handleCancel}
   bind:this={modalElement}
-  class={merge('body', className)}
+  class={merge(
+    'body',
+    'transition-all duration-200 ease-out',
+    open && 'scale-100 opacity-100',
+    !open && 'scale-95 opacity-0',
+    className,
+  )}
   class:large
   class:hightlightNav
   aria-modal="true"
@@ -142,7 +148,7 @@
   }
 
   .body::backdrop {
-    @apply cursor-pointer;
+    @apply cursor-pointer transition-opacity duration-200;
   }
 
   .body.hightlightNav::backdrop {