Info icon design update (#42557)

* Render item icon inline with column icon

* Use inline info icon in field picker

* Use new QueryColumnInfoIcon on filter columns picker

* Use new QueryColumnInfoIcon on suggestions dropdown

* Use new QueryColumnInfoIcon aggregations dropdown

* Use new QueryColumnInfoIcon filter modal

* Use new QueryColumnInfoIcon in BreakoutColumnListItem

* Use new QueryColumnInfoIcon in FieldList

* Use new QueryColumnInfoIcon in DataSelectorFieldPicker

* Update TableInfoIcon to render fallback too

* Use new TableInfoIcon in DataSelector

* Use new TableInfoIcon in ViewHeader

* Fix types in breakout column

* Move aria-label to wrapper

* Move binning back to the right

* Always give info icon full opacity

* Remove asDot props everywhere

frontend/src/metabase/querying/components/FilterModal/FilterTitle/FilterTitle.tsx

@@ -5,13 +5,11 @@ import {
   QueryColumnInfoIcon,
 } from "metabase/components/MetadataInfo/ColumnInfoIcon";
 import type { IconName } from "metabase/ui";
-import { Flex, Icon } from "metabase/ui";
+import { Flex } from "metabase/ui";
 import type * as Lib from "metabase-lib";
 
 import { FilterColumnName } from "../FilterColumnName";
 
-import { InfoIconWrapper } from "./FilterTitle.styled";
-
 type FilterTitleProps = {
   children?: ReactNode;
   column: Lib.ColumnMetadata;
@@ -32,16 +30,14 @@ export function FilterTitle({
   stageIndex,
 }: FilterTitleProps) {
   return (
-    <Flex h="100%" align="center" gap="sm">
-      <InfoIconWrapper>
-        <QueryColumnInfoIcon
-          query={query}
-          stageIndex={stageIndex}
-          column={column}
-          position="left"
-        />
-      </InfoIconWrapper>
-      <Icon name={columnIcon} />
+    <Flex h="100%" align="center" gap="sm" pl="md">
+      <QueryColumnInfoIcon
+        query={query}
+        stageIndex={stageIndex}
+        column={column}
+        icon={columnIcon}
+        position="left"
+      />
       <FilterColumnName
         query={query}
         stageIndex={stageIndex}

frontend/src/metabase/querying/components/FilterPicker/FilterColumnPicker/FilterColumnPicker.tsx

@@ -5,7 +5,6 @@ import {
   getColumnGroupIcon,
   getColumnGroupName,
 } from "metabase/common/utils/column-groups";
-import { getColumnIcon } from "metabase/common/utils/columns";
 import {
   QueryColumnInfoIcon,
   HoverParent,
@@ -119,7 +118,6 @@ export function FilterColumnPicker({
         renderItemName={renderItemName}
         renderItemDescription={omitItemDescription}
         renderItemIcon={renderItemIcon}
-        renderItemExtra={renderItemExtra}
         // disable scrollbars inside the list
         style={{ overflow: "visible" }}
         maxHeight={Infinity}
@@ -148,26 +146,19 @@ function renderItemIcon(item: ColumnListItem | SegmentListItem) {
   }
 
   if (item.column) {
-    return <Icon name={getColumnIcon(item.column)} size={18} />;
+    const { query, stageIndex, column } = item;
+    return (
+      <QueryColumnInfoIcon
+        query={query}
+        stageIndex={stageIndex}
+        column={column}
+        position="top-start"
+        size={18}
+      />
+    );
   }
 }
 
 function renderItemWrapper(content: React.ReactNode) {
   return <HoverParent>{content}</HoverParent>;
 }
-
-function renderItemExtra(item: ColumnListItem | SegmentListItem) {
-  if (isSegmentListItem(item)) {
-    return null;
-  }
-
-  const { query, stageIndex, column } = item;
-  return (
-    <QueryColumnInfoIcon
-      query={query}
-      stageIndex={stageIndex}
-      column={column}
-      position="right"
-    />
-  );
-}