Add `PopoverBackButton` to Metabase UI (#36941)

* Add `PopoverBackButton`

* Use `PopoverBackButton` in `DatePicker`

* Use `PopoverBackButton` in `FilterPicker`

frontend/src/metabase/querying/components/DatePicker/BackButton/BackButton.tsx

-import type { ReactNode } from "react";
-import { t } from "ttag";
-import { Icon } from "metabase/core/components/Icon";
-import { Button } from "metabase/ui";
-
-interface BackButtonProps {
-  children?: ReactNode;
-  onClick?: () => void;
-}
-
-export function BackButton({ children, onClick }: BackButtonProps) {
-  return (
-    <Button
-      c="text.1"
-      display="block"
-      variant="subtle"
-      leftIcon={<Icon name="chevronleft" />}
-      aria-label={t`Back`}
-      onClick={onClick}
-    >
-      {children}
-    </Button>
-  );
-}

frontend/src/metabase/querying/components/DatePicker/BackButton/index.ts

-export * from "./BackButton";

frontend/src/metabase/querying/components/DatePicker/ExcludeDatePicker/ExcludeDatePicker.tsx

 import { useMemo, useState } from "react";
 import { t } from "ttag";
-import { Box, Button, Checkbox, Divider, Group, Stack } from "metabase/ui";
-import { BackButton } from "../BackButton";
+import type { PopoverBackButtonProps } from "metabase/ui";
+import {
+  Box,
+  Button,
+  Checkbox,
+  Divider,
+  Group,
+  PopoverBackButton,
+  Stack,
+} from "metabase/ui";
 import { MIN_WIDTH } from "../constants";
 import type {
   DatePickerExtractionUnit,
@@ -218,3 +226,7 @@ function ExcludeValuePicker({
     </Box>
   );
 }
+
+function BackButton(props: PopoverBackButtonProps) {
+  return <PopoverBackButton px="md" py="sm" {...props} />;
+}

frontend/src/metabase/querying/components/DatePicker/RelativeDatePicker/RelativeDatePicker.tsx

 import { useState } from "react";
-import { Divider, Flex, Tabs } from "metabase/ui";
-import { BackButton } from "../BackButton";
+import { Divider, Flex, PopoverBackButton, Tabs } from "metabase/ui";
 import type { RelativeDatePickerValue } from "../types";
 import { DEFAULT_VALUE, TABS } from "./constants";
 import {
@@ -46,7 +45,7 @@ export function RelativeDatePicker({
   return (
     <Tabs value={direction} onTabChange={handleTabChange}>
       <Flex>
-        <BackButton onClick={onBack} />
+        <PopoverBackButton p="sm" onClick={onBack} />
         <TabList>
           {TABS.map(tab => (
             <Tabs.Tab key={tab.direction} value={tab.direction}>

frontend/src/metabase/querying/components/DatePicker/SpecificDatePicker/SpecificDatePicker.tsx

 import { useMemo, useState } from "react";
-import { Divider, Flex, Tabs } from "metabase/ui";
-import { BackButton } from "../BackButton";
+import { Divider, Flex, PopoverBackButton, Tabs } from "metabase/ui";
 import type { DatePickerOperator, SpecificDatePickerValue } from "../types";
 import { SingleDatePicker } from "./SingleDatePicker";
 import { DateRangePicker } from "./DateRangePicker";
@@ -59,7 +58,7 @@ export function SpecificDatePicker({
   return (
     <Tabs value={value.operator} onTabChange={handleTabChange}>
       <Flex>
-        <BackButton onClick={onBack} />
+        <PopoverBackButton p="sm" onClick={onBack} />
         <TabList>
           {tabs.map(tab => (
             <Tabs.Tab key={tab.operator} value={tab.operator}>

frontend/src/metabase/querying/components/FilterPicker/BackButton/index.ts

-export * from "./BackButton";

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

 import { useMemo } from "react";
+import { PopoverBackButton } from "metabase/ui";
 import type { DatePickerValue } from "metabase/querying/components/DatePicker";
 import { DatePicker } from "metabase/querying/components/DatePicker";
 import { useDateFilter } from "metabase/querying/hooks/use-date-filter";
 import * as Lib from "metabase-lib";
-import { BackButton } from "../BackButton";
 import type { FilterPickerWidgetProps } from "../types";
 
 export function DateFilterPicker({
@@ -39,9 +39,9 @@ export function DateFilterPicker({
         availableUnits={availableUnits}
         backButton={
           onBack && (
-            <BackButton pl="sm" onClick={onBack}>
+            <PopoverBackButton p="sm" onClick={onBack}>
               {columnInfo.longDisplayName}
-            </BackButton>
+            </PopoverBackButton>
           )
         }
         canUseRelativeOffsets

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

 import type { ReactNode } from "react";
-import { BackButton } from "../BackButton";
+import { PopoverBackButton } from "metabase/ui";
 import { FilterHeaderRoot } from "./FilterPickerHeader.styled";
 
 interface FilterPickerHeaderProps {
@@ -15,7 +15,9 @@ export function FilterPickerHeader({
 }: FilterPickerHeaderProps) {
   return (
     <FilterHeaderRoot p="sm" justify="space-between">
-      {onBack && <BackButton onClick={onBack}>{columnName}</BackButton>}
+      {onBack && (
+        <PopoverBackButton onClick={onBack}>{columnName}</PopoverBackButton>
+      )}
       {children}
     </FilterHeaderRoot>
   );

frontend/src/metabase/ui/components/buttons/PopoverBackButton/PopoverBackButton.stories.mdx

+import { useState } from "react";
+import { Canvas, Story, Meta } from "@storybook/addon-docs";
+import { Box, Button, Flex, Menu, PopoverBackButton } from "metabase/ui";
+
+export const args = {
+  children: "Back",
+};
+
+export const argTypes = {
+  children: { type: "string" },
+};
+
+<Meta
+  title="Buttons/PopoverBackButton"
+  component={PopoverBackButton}
+  args={args}
+  argTypes={argTypes}
+/>
+
+# PopoverBackButton
+
+## Examples
+
+export const DefaultTemplate = args => {
+  const [isNestedPopoverOpen, setIsNestedPopoverOpen] = useState(false);
+  return (
+    <Flex justify="center">
+      <Menu>
+        <Menu.Target>
+          <Button variant="filled">Click to open</Button>
+        </Menu.Target>
+        <Menu.Dropdown>
+          {isNestedPopoverOpen ? (
+            <Box h="5rem">
+              <PopoverBackButton
+                {...args}
+                onClick={() => setIsNestedPopoverOpen(false)}
+              />
+            </Box>
+          ) : (
+            <>
+              <Menu.Item>Regular item</Menu.Item>
+              <Menu.Item
+                closeMenuOnClick={false}
+                onClick={() => setIsNestedPopoverOpen(true)}
+              >
+                Nested item
+              </Menu.Item>
+            </>
+          )}
+        </Menu.Dropdown>
+      </Menu>
+    </Flex>
+  );
+};
+
+export const Default = DefaultTemplate.bind(args);
+
+<Canvas>
+  <Story name="Default">{Default}</Story>
+</Canvas>

frontend/src/metabase/querying/components/FilterPicker/BackButton/BackButton.tsx → frontend/src/metabase/ui/components/buttons/PopoverBackButton/PopoverBackButton.tsx

 import type { ButtonHTMLAttributes } from "react";
 import { t } from "ttag";
 import { Icon } from "metabase/core/components/Icon";
-import { Button } from "metabase/ui";
-import type { ButtonProps } from "metabase/ui";
+import type { BoxProps } from "../../utils";
+import { Button } from "../Button";
 
-type BackButtonProps = ButtonProps & ButtonHTMLAttributes<HTMLButtonElement>;
+export type PopoverBackButtonProps = BoxProps &
+  ButtonHTMLAttributes<HTMLButtonElement>;
 
-export function BackButton(props: BackButtonProps) {
+export function PopoverBackButton(props: PopoverBackButtonProps) {
   return (
     <Button
+      p={0}
+      aria-label={t`Back`}
       c="text.2"
       fz="1rem"
+      lh="1.25rem"
+      {...props}
       variant="subtle"
       leftIcon={<Icon name="chevronleft" />}
-      aria-label={t`Back`}
-      {...props}
     />
   );
 }

frontend/src/metabase/ui/components/buttons/PopoverBackButton/index.ts

+export * from "./PopoverBackButton";

frontend/src/metabase/ui/components/buttons/index.ts

 export * from "./Button";
+export * from "./PopoverBackButton";