utocomplete fix color dialog list item

Altinn · Jan 23, 2025 · 3062274 · 3062274
1 parent 43faf8e
commit 3062274
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 12 deletions.
diff --git a/lib/components/Autocomplete/AutocompleteItem.tsx b/lib/components/Autocomplete/AutocompleteItem.tsx
@@ -39,14 +39,24 @@ export type AutocompleteItemProps =
 export const AutocompleteItem = ({ type, ...props }: AutocompleteItemProps) => {
   switch (type) {
     case 'scope':
-      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} theme="default" tabIndex={-1} />;
+      return <ScopeListItem {...(props as ScopeAutocompleteItemProps)} theme="default" shadow="none" tabIndex={-1} />;
     case 'bookmark':
-      return <BookmarksListItem {...(props as BookmarksListItemProps)} theme="default" size="sm" tabIndex={-1} />;
+      return (
+        <BookmarksListItem
+          {...(props as BookmarksListItemProps)}
+          theme="default"
+          shadow="none"
+          size="sm"
+          tabIndex={-1}
+        />
+      );
     case 'dialog':
-      return <DialogListItem {...(props as DialogListItemProps)} theme="default" size="sm" tabIndex={-1} />;
+      return (
+        <DialogListItem {...(props as DialogListItemProps)} theme="default" shadow="none" size="sm" tabIndex={-1} />
+      );
     case 'information':
-      return <ListItem {...(props as ListItemProps)} theme="default" tabIndex={-1} disabled />;
+      return <ListItem {...(props as ListItemProps)} theme="default" shadow="none" tabIndex={-1} disabled />;
     default:
-      return <ListItem {...(props as ListItemProps)} theme="default" size="sm" tabIndex={-1} />;
+      return <ListItem {...(props as ListItemProps)} theme="default" shadow="none" size="sm" tabIndex={-1} />;
   }
 };
diff --git a/lib/components/Dialog/DialogListItem.tsx b/lib/components/Dialog/DialogListItem.tsx
@@ -8,6 +8,7 @@ import {
   type DialogSelectProps,
   type DialogStatusProps,
   type DialogTouchedByActor,
+  ListItem,
   ListItemBase,
   type ListItemBaseProps,
   ListItemLabel,
@@ -116,23 +117,29 @@ export const DialogListItem = ({
   title,
   description,
   summary,
-  theme,
+  theme = 'default',
   ...rest
 }: DialogListItemProps) => {
   const applicableState = trashedAt ? 'trashed' : archivedAt ? 'archived' : state;
 
-  const applicableTheme = theme || selected ? 'subtle' : 'default';
+  const applicableTheme = selected ? 'subtle' : theme;
 
   if (size === 'xs' || size === 'sm' || size === 'md') {
     return (
-      <ListItemBase {...rest} size={size} selected={selected} theme={applicableTheme}>
-        <ListItemLink {...rest} size={size} className={styles.link}>
+      <ListItem
+        {...rest}
+        size={size}
+        selected={selected}
+        theme={applicableTheme}
+        label={
           <div className={styles.border} data-size={size} data-seen={seen} data-loading={loading}>
             <ListItemLabel loading={loading} size={size} title={title} description={summary || description} />
-            <DialogMetadata loading={loading} sender={sender} updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
           </div>
-        </ListItemLink>
-      </ListItemBase>
+        }
+        badge={
+          <DialogMetadata loading={loading} sender={sender} updatedAt={updatedAt} updatedAtLabel={updatedAtLabel} />
+        }
+      />
     );
   }