fix(ListItem): Set background of disabled ListItemWrapper to transparent (#1938)

* Set background of disabled ListItemWrapperto transparent to avoid colors.background from coloring disabled items

* Luke feedback

Author: Elliot

packages/components/src/List/ListItemWrapper.tsx

@@ -77,9 +77,6 @@ export const ListItemWrapper = styled(ListItemWrapperInternal)`
   min-height: ${({ height }) => height}px;
   outline: none;
   text-decoration: none;
-  transition: ${({ theme: { easings, transitions } }) =>
-    `background ${transitions.quick}ms ${easings.ease},
-  color ${transitions.quick}ms ${easings.ease}`};
 
   & > button,
   & > a {
@@ -95,9 +92,11 @@ export const ListItemWrapper = styled(ListItemWrapperInternal)`
     font-weight: inherit;
     min-width: 0;
     outline: none;
-
     text-align: left;
     text-decoration: none;
+    transition: ${({ theme: { easings, transitions } }) =>
+      `background ${transitions.quick}ms ${easings.ease},
+  color ${transitions.quick}ms ${easings.ease}`};
     width: 100%;
 
     &:hover,
@@ -156,7 +155,6 @@ export const ListItemWrapper = styled(ListItemWrapperInternal)`
     }
 
     &:hover {
-      background: ${({ theme: { colors } }) => colors.background};
       color: ${({ theme: { colors } }) => colors.text1};
     }
   }

packages/components/src/List/utils/listItemBackgroundColor.ts

@@ -56,6 +56,6 @@ export const listItemBackgroundColor = ({
   else renderedColor = 'transparent'
 
   return css`
-    background-color: ${renderedColor};
+    background: ${renderedColor};
   `
 }