group props with classname

apps/web/src/components/ui/inputs/MentionInput/MentionInput.stories.tsx

@@ -207,6 +207,7 @@ const manyCharacters: MentionInputTriggerItem[] = [
       },
     ],
     label: 'SpongeBob SquarePants Characters',
+    className: 'bg-red-100',
   },
   {
     type: 'separator',

apps/web/src/components/ui/inputs/MentionInput/MentionInput.types.ts

@@ -46,6 +46,7 @@ export type MentionInputTriggerGroup<T = string> = {
   icon?: React.ReactNode;
   type: 'group';
   disabled?: boolean;
+  className?: string;
 };
 
 export type MentionInputTriggerSeparator = {

apps/web/src/components/ui/inputs/MentionInput/MentionList/MentionListGroup.tsx

@@ -1,3 +1,4 @@
+import { cn } from '@/lib/utils';
 import { type MentionListGroupExtended, MentionListSelector } from './MentionListSelector';
 
 export function MentionListGroup<T = string>({
@@ -7,9 +8,16 @@ export function MentionListGroup<T = string>({
   setSelectedItem,
   selectedItem,
   onSelectItem,
+  type,
+  className,
+  disabled, //this is consumed by the children items, we can stylized this if we want
 }: MentionListGroupExtended<T>) {
   return (
-    <div className="mention-list-group">
+    <div
+      className={cn('mention-list-group', className)}
+      aria-disabled={disabled}
+      data-testid={type}
+    >
       <div className="flex items-center pb-1 px-2 pt-2 h-7 text-sm text-gray-dark">
         {icon && <span className="mr-2 text-icon-color">{icon}</span>}
         {label}