Extract SelectList component (#16814)

frontend/src/metabase/components/select-list/SelectList.jsx

+import React from "react";
+import PropTypes from "prop-types";
+
+import { SelectListItem } from "./SelectListItem";
+
+const propTypes = {
+  children: PropTypes.node,
+  className: PropTypes.string,
+};
+
+export function SelectList({ children, className }) {
+  return (
+    <ul role="menu" className={className}>
+      {children}
+    </ul>
+  );
+}
+
+SelectList.propTypes = propTypes;
+
+SelectList.Item = SelectListItem;

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionPickerItem.jsx → frontend/src/metabase/components/select-list/SelectListItem.jsx

 import React from "react";
 import PropTypes from "prop-types";
 
-import { ItemRoot, ItemIcon, ItemTitle } from "./QuestionPickerItem.styled";
+import { ItemRoot, ItemIcon, ItemTitle } from "./SelectListItem.styled";
 
-QuestionPickerItem.propTypes = {
+const propTypes = {
   id: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   icon: PropTypes.string.isRequired,
-  isCollection: PropTypes.bool,
   onSelect: PropTypes.func.isRequired,
+  isHighlighted: PropTypes.bool,
+  hasRightArrow: PropTypes.bool,
+  size: PropTypes.oneOf(["small", "medium"]),
 };
 
-export function QuestionPickerItem({ id, name, icon, isCollection, onSelect }) {
+export function SelectListItem({
+  id,
+  name,
+  icon,
+  onSelect,
+  isHighlighted = false,
+  hasRightArrow = false,
+  size = "medium",
+}) {
   return (
     <ItemRoot
       role="menuitem"
       tabIndex={0}
+      size={size}
       onClick={() => onSelect(id)}
       onKeyDown={e => e.key === "Enter" && onSelect(id)}
     >
-      <ItemIcon name={icon} isHighlighted={!isCollection} />
+      <ItemIcon name={icon} isHighlighted={isHighlighted} />
       <ItemTitle>{name}</ItemTitle>
-      {isCollection && <ItemIcon name="chevronright" />}
+      {hasRightArrow && <ItemIcon name="chevronright" />}
     </ItemRoot>
   );
 }
+
+SelectListItem.propTypes = propTypes;

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionPickerItem.styled.jsx → frontend/src/metabase/components/select-list/SelectListItem.styled.jsx

@@ -15,11 +15,16 @@ export const ItemIcon = styled(Icon)`
     props.isHighlighted ? colors["brand"] : colors["text-light"]};
 `;
 
+const VERTICAL_PADDING_BY_SIZE = {
+  small: "0.5rem",
+  medium: "0.75rem",
+};
+
 export const ItemRoot = styled.li`
   display: flex;
   align-items: center;
   cursor: pointer;
-  padding: 0.75rem 0.5rem;
+  padding: ${props => VERTICAL_PADDING_BY_SIZE[props.size]} 0.5rem;
   border-radius: 6px;
 
   &:hover {

frontend/src/metabase/components/select-list/index.js

+export * from "./SelectList";

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionList.jsx

@@ -4,8 +4,7 @@ import { t } from "ttag";
 
 import EmptyState from "metabase/components/EmptyState";
 import Search from "metabase/entities/search";
-
-import { QuestionPickerItem } from "./QuestionPickerItem";
+import { SelectList } from "metabase/components/select-list";
 
 import { EmptyStateContainer } from "./QuestionList.styled";
 
@@ -52,9 +51,10 @@ export function QuestionList({
         }
 
         return (
-          <ul role="menu">
+          <SelectList>
             {list.map(item => (
-              <QuestionPickerItem
+              <SelectList.Item
+                isHighlighted
                 key={item.id}
                 id={item.id}
                 name={item.getName()}
@@ -62,7 +62,7 @@ export function QuestionList({
                 onSelect={onSelect}
               />
             ))}
-          </ul>
+          </SelectList>
         );
       }}
     </Search.ListLoader>

frontend/src/metabase/dashboard/components/add-card-sidebar/QuestionPicker.jsx

@@ -11,11 +11,11 @@ import { entityListLoader } from "metabase/entities/containers/EntityListLoader"
 import Collections, { ROOT_COLLECTION } from "metabase/entities/collections";
 import { useDebouncedValue } from "metabase/hooks/use-debounced-value";
 
-import { QuestionPickerItem } from "./QuestionPickerItem";
 import { QuestionList } from "./QuestionList";
 
 import { BreadcrumbsWrapper, SearchInput } from "./QuestionPicker.styled";
 import { SEARCH_DEBOUNCE_DURATION } from "metabase/lib/constants";
+import { SelectList } from "metabase/components/select-list";
 
 QuestionPicker.propTypes = {
   onSelect: PropTypes.func.isRequired,
@@ -76,10 +76,10 @@ function QuestionPicker({
             <Breadcrumbs crumbs={crumbs} />
           </BreadcrumbsWrapper>
 
-          <ul role="menu">
+          <SelectList>
             {collections.map(collection => (
-              <QuestionPickerItem
-                isCollection
+              <SelectList.Item
+                hasRightArrow
                 key={collection.id}
                 id={collection.id}
                 name={collection.name}
@@ -87,7 +87,7 @@ function QuestionPicker({
                 onSelect={collectionId => setCurrentCollectionId(collectionId)}
               />
             ))}
-          </ul>
+          </SelectList>
         </React.Fragment>
       )}