Fix bucket trigger position (#43061)

* Make accordion list item content 100% wide

* Remove unused Dot component

* Move bucket popover trigger to the end of the item

* Revert QueryColumnPicker styles to what they were before adding the info icons

* Fix the height of the bucket picker

frontend/src/metabase/common/components/QueryColumnPicker/BucketPickerPopover/BaseBucketPickerPopover.styled.tsx

@@ -9,7 +9,6 @@ import { Icon } from "metabase/ui";
 export const TriggerIcon = styled(Icon)`
   color: ${color("white")} !important;
   flex: 0 0 auto;
-  margin-left: 0.5rem;
 `;
 
 export const ChevronDown = styled(Icon)`
@@ -23,14 +22,14 @@ export const ChevronDown = styled(Icon)`
 export const TriggerButton = styled.button`
   display: flex;
   align-items: center;
-  min-width: 0;
+  min-width: 35%;
+  max-width: 50%;
+  gap: 0.5rem;
 
   color: ${alpha(color("white"), 0.5)};
   font-weight: 700;
-  border-left: 2px solid transparent;
-  padding: 0.5rem;
   border-left: 2px solid ${alpha(color("border"), 0.1)};
-  margin-left: auto;
+  padding: 0.5rem;
 
   cursor: pointer;
 
@@ -43,15 +42,6 @@ export const TriggerButton = styled.button`
   }
 `;
 
-export const Dot = styled.div`
-  width: 3px;
-  height: 3px;
-  margin-right: 0.5em;
-  background: currentColor;
-  border-radius: 100%;
-  opacity: 0.25;
-`;
-
 export const SelectListItem = styled(BaseSelectList.Item)<{
   activeColor: ColorName;
 }>`

frontend/src/metabase/common/components/QueryColumnPicker/QueryColumnPicker.styled.tsx

@@ -4,22 +4,6 @@ import AccordionList from "metabase/core/components/AccordionList";
 import { color } from "metabase/lib/colors";
 import type { ColorName } from "metabase/lib/colors/types";
 
-import { TriggerButton } from "./BucketPickerPopover/BaseBucketPickerPopover.styled";
-
 export const StyledAccordionList = styled(AccordionList)<{ color: ColorName }>`
   color: ${props => color(props.color)};
 `;
-
-export const ColumnNameContainer = styled.div`
-  display: flex;
-  align-items: center;
-  flex-shrink: 0;
-
-  ${TriggerButton} {
-    height: 100%;
-    padding: 0;
-    flex-shrink: 1;
-    white-space: nowrap;
-    overflow: hidden;
-  }
-`;

frontend/src/metabase/common/components/QueryColumnPicker/QueryColumnPicker.tsx

@@ -11,14 +11,11 @@ import {
 } from "metabase/components/MetadataInfo/ColumnInfoIcon";
 import type { ColorName } from "metabase/lib/colors/types";
 import type { IconName } from "metabase/ui";
-import { Box, DelayGroup } from "metabase/ui";
+import { DelayGroup } from "metabase/ui";
 import * as Lib from "metabase-lib";
 
 import { BucketPickerPopover } from "./BucketPickerPopover";
-import {
-  ColumnNameContainer,
-  StyledAccordionList,
-} from "./QueryColumnPicker.styled";
+import { StyledAccordionList } from "./QueryColumnPicker.styled";
 
 export type ColumnListItem = Lib.ColumnDisplayInfo & {
   column: Lib.ColumnMetadata;
@@ -143,34 +140,30 @@ export function QueryColumnPicker({
     ],
   );
 
-  const renderItemName = useCallback(
-    (item: ColumnListItem) => (
-      <ColumnNameContainer>
-        <Box mr="sm">{item.displayName}</Box>
-        {(hasBinning || hasTemporalBucketing) && (
-          <BucketPickerPopover
-            query={query}
-            stageIndex={stageIndex}
-            column={item.column}
-            isEditing={checkIsColumnSelected(item)}
-            hasBinning={hasBinning}
-            hasTemporalBucketing={hasTemporalBucketing}
-            hasChevronDown={withInfoIcons}
-            color={color}
-            onSelect={handleSelect}
-          />
-        )}
-      </ColumnNameContainer>
-    ),
+  const renderItemExtra = useCallback(
+    (item: ColumnListItem) =>
+      (hasBinning || hasTemporalBucketing) && (
+        <BucketPickerPopover
+          query={query}
+          stageIndex={stageIndex}
+          column={item.column}
+          isEditing={checkIsColumnSelected(item)}
+          hasBinning={hasBinning}
+          hasTemporalBucketing={hasTemporalBucketing}
+          hasChevronDown={withInfoIcons}
+          color={color}
+          onSelect={handleSelect}
+        />
+      ),
     [
       query,
       stageIndex,
+      checkIsColumnSelected,
       hasBinning,
       hasTemporalBucketing,
+      withInfoIcons,
       color,
-      checkIsColumnSelected,
       handleSelect,
-      withInfoIcons,
     ],
   );
 
@@ -196,9 +189,9 @@ export function QueryColumnPicker({
         itemIsSelected={checkIsColumnSelected}
         renderItemWrapper={renderItemWrapper}
         renderItemName={renderItemName}
+        renderItemExtra={renderItemExtra}
         renderItemDescription={omitItemDescription}
         renderItemIcon={renderItemIcon}
-        renderItemLabel={renderItemLabel}
         color={color}
         maxHeight={Infinity}
         data-testid={dataTestId}
@@ -216,7 +209,7 @@ export function QueryColumnPicker({
   );
 }
 
-function renderItemLabel(item: ColumnListItem) {
+function renderItemName(item: ColumnListItem) {
   return item.displayName;
 }
 

frontend/src/metabase/core/components/AccordionList/AccordionListCell.jsx

@@ -282,7 +282,7 @@ export const AccordionListCell = ({
               {icon}
             </span>
           )}
-          <div className="List-item-content">
+          <div>
             {name && (
               <h4
                 data-element-id="list-item-title"

frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.styled.tsx

@@ -11,13 +11,17 @@ export const Content = styled.div`
   flex: auto;
   align-items: center;
   border-radius: 6px;
+
+  ${BucketPickerPopover.TriggerButton} {
+    height: 100%;
+  }
 `;
 
 export const TitleContainer = styled.div`
   display: flex;
   align-items: center;
   margin-left: 0.5rem;
-  padding: 0;
+  padding: 0.5rem 0;
   flex-grow: 1;
 `;
 

frontend/src/metabase/query_builder/components/view/sidebars/SummarizeSidebar/BreakoutColumnList/BreakoutColumnListItem/BreakoutColumnListItem.tsx

@@ -78,20 +78,20 @@ export function BreakoutColumnListItem({
             size={18}
           />
           <Title data-testid="dimension-list-item-name">{displayName}</Title>
-          <BucketPickerPopover
-            query={query}
-            stageIndex={STAGE_INDEX}
-            column={item.column}
-            color="summarize"
-            isEditing={isSelected}
-            hasChevronDown
-            hasBinning
-            hasTemporalBucketing
-            onSelect={column =>
-              breakout ? onUpdateColumn(column) : onAddColumn(column)
-            }
-          />
         </TitleContainer>
+        <BucketPickerPopover
+          query={query}
+          stageIndex={STAGE_INDEX}
+          column={item.column}
+          color="summarize"
+          isEditing={isSelected}
+          hasChevronDown
+          hasBinning
+          hasTemporalBucketing
+          onSelect={column =>
+            breakout ? onUpdateColumn(column) : onAddColumn(column)
+          }
+        />
         {isSelected && (
           <RemoveButton
             onClick={handleRemoveColumn}