Convert Dashboard Header buttons to Mantine (#46632)

frontend/src/metabase/dashboard/components/DashboardActions.styled.tsx

-import styled from "@emotion/styled";
-
-import FullscreenIcon from "metabase/components/icons/FullscreenIcon";
-import NightModeIcon from "metabase/components/icons/NightModeIcon";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
-import { RefreshWidget } from "metabase/dashboard/components/RefreshWidget";
-import { color } from "metabase/lib/colors";
-
-interface ShareButtonProps {
-  canShareDashboard?: boolean;
-}
-
-export const ShareButton = styled(DashboardHeaderButton)<ShareButtonProps>`
-  color: ${props => !props.canShareDashboard && color("text-light")};
-
-  &:hover {
-    color: ${props => props.canShareDashboard && color("brand")};
-  }
-`;
-
-export const FullScreenButtonIcon = styled(FullscreenIcon)`
-  &:hover {
-    color: var(--mb-color-brand);
-  }
-`;
-
-export const NightModeButtonIcon = styled(NightModeIcon)`
-  cursor: pointer;
-
-  &:hover {
-    color: var(--mb-color-brand);
-  }
-`;
-
-export const RefreshWidgetButton = styled(RefreshWidget)`
-  &:hover {
-    color: var(--mb-color-brand);
-  }
-`;

frontend/src/metabase/dashboard/components/DashboardEmbedAction/DashboardEmbedAction.unit.spec.tsx

-import userEvent from "@testing-library/user-event";
+import userEvent, {
+  PointerEventsCheckLevel,
+} from "@testing-library/user-event";
 import { indexBy } from "underscore";
 
 import { renderWithProviders, screen } from "__support__/ui";
@@ -115,7 +117,10 @@ describe("DashboardEmbedAction", () => {
           isAdmin: false,
         });
 
-        await userEvent.hover(screen.getByLabelText("share icon"));
+        await userEvent.hover(screen.getByLabelText("share icon"), {
+          // The button is disabled so pointer events should be disabled
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        });
         expect(
           await screen.findByText("Public links are disabled"),
         ).toBeInTheDocument();
@@ -128,7 +133,10 @@ describe("DashboardEmbedAction", () => {
           publicLinksEnabled: true,
         });
 
-        await userEvent.hover(screen.getByLabelText("share icon"));
+        await userEvent.hover(screen.getByLabelText("share icon"), {
+          // The button is disabled so pointer events should be disabled
+          pointerEventsCheck: PointerEventsCheckLevel.Never,
+        });
         expect(
           await screen.findByText("Ask your admin to create a public link"),
         ).toBeInTheDocument();

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeader.styled.tsx

-import { css } from "@emotion/react";
-import styled from "@emotion/styled";
-
-import Button from "metabase/core/components/Button";
-import { color, darken } from "metabase/lib/colors";
-import { breakpointMaxSmall } from "metabase/styled-components/theme";
-import { Menu } from "metabase/ui";
-
-export const DashboardHeaderActionDivider = styled.div`
-  height: 1.25rem;
-  padding-left: 0.5rem;
-  margin-left: 0.5rem;
-  width: 0;
-  border-left: 1px solid var(--mb-color-border);
-`;
-
-export const DashboardHeaderButton = styled(Button)<{
-  isActive?: boolean;
-  visibleOnSmallScreen?: boolean;
-  hasBackground?: boolean;
-}>`
-  ${({ hasBackground }) =>
-    hasBackground
-      ? css`
-          padding: 0.25rem 0.5rem;
-          height: 2rem;
-          min-width: 2rem;
-        `
-      : css`
-          padding: 0;
-        `}
-
-  color: ${props => (props.isActive ? color("brand") : color("text-dark"))};
-  font-size: 1rem;
-
-  &:hover {
-    color: var(--mb-color-brand);
-    background: ${({ hasBackground }) =>
-      hasBackground ? "var(--mb-color-bg-medium)" : "transparent"};
-  }
-
-  svg {
-    vertical-align: middle;
-  }
-
-  ${breakpointMaxSmall} {
-    ${props =>
-      !props.visibleOnSmallScreen &&
-      css`
-        display: none;
-      `}
-  }
-`;
-
-DashboardHeaderButton.defaultProps = {
-  onlyIcon: true,
-  iconSize: 16,
-  visibleOnSmallScreen: true,
-  hasBackground: true,
-};
-
-export const SectionMenuItem = styled(Menu.Item)`
-  background-color: ${() => darken(color("bg-medium"), 0.1)};
-
-  &:hover {
-    background-color: var(--mb-color-brand);
-  }
-`;

frontend/src/metabase/dashboard/components/DashboardHeader/DashboardHeaderButtonRow/action-buttons.tsx

 import { withRouter } from "react-router";
 
-import { RefreshWidgetButton } from "../../DashboardActions.styled";
+import { RefreshWidget } from "metabase/dashboard/components/RefreshWidget";
+import { Center, Divider } from "metabase/ui";
+
 import { DashboardBookmark } from "../../DashboardBookmark";
 import { DashboardEmbedAction } from "../../DashboardEmbedAction";
 import { ExtraEditButtonsMenu } from "../../ExtraEditButtonsMenu";
-import { DashboardHeaderActionDivider } from "../DashboardHeader.styled";
 import {
   AddActionElementButton,
   AddFilterParameterButton,
@@ -133,7 +134,7 @@ export const dashboardActionButtons: Record<
       setRefreshElapsedHook,
       onRefreshPeriodChange,
     }) => (
-      <RefreshWidgetButton
+      <RefreshWidget
         period={refreshPeriod}
         setRefreshElapsedHook={setRefreshElapsedHook}
         onChangePeriod={onRefreshPeriodChange}
@@ -236,7 +237,11 @@ export const dashboardActionButtons: Record<
 
   //   UTILITY
   [DASHBOARD_ACTION.DASHBOARD_HEADER_ACTION_DIVIDER]: {
-    component: () => <DashboardHeaderActionDivider />,
+    component: () => (
+      <Center h="1.25rem" px="sm">
+        <Divider orientation="vertical" />
+      </Center>
+    ),
     enabled: () => true,
   },
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddActionElementButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { addActionToDashboard } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { getDashboard, getSelectedTabId } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Icon, Tooltip } from "metabase/ui";
 
 export const AddActionElementButton = () => {
   const dispatch = useDispatch();
@@ -25,10 +24,11 @@ export const AddActionElementButton = () => {
   };
 
   return (
-    <Tooltip label={t`Add action button`}>
-      <DashboardHeaderButton onClick={onAddAction} aria-label={t`Add action`}>
-        <Icon name="click" size={18} />
-      </DashboardHeaderButton>
-    </Tooltip>
+    <ToolbarButton
+      aria-label={t`Add action`}
+      onClick={onAddAction}
+      icon="click"
+      tooltipLabel={t`Add action button`}
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddFilterParameterButton.tsx

 import { t } from "ttag";
 
-import TippyPopover from "metabase/components/Popover/TippyPopover";
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import {
   addParameter,
   hideAddParameterPopover,
   showAddParameterPopover,
 } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { ParametersPopover } from "metabase/dashboard/components/ParametersPopover";
 import { getIsAddParameterPopoverOpen } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
+import { Popover } from "metabase/ui";
 
 export const AddFilterParameterButton = () => {
   const dispatch = useDispatch();
   const isAddParameterPopoverOpen = useSelector(getIsAddParameterPopoverOpen);
 
   return (
-    <span>
-      <TippyPopover
-        placement="bottom-start"
-        onClose={() => dispatch(hideAddParameterPopover())}
-        visible={isAddParameterPopoverOpen}
-        content={
-          <ParametersPopover
-            onAddParameter={parameter => dispatch(addParameter(parameter))}
-            onClose={() => dispatch(hideAddParameterPopover())}
-          />
-        }
-      >
-        <div>
-          <Tooltip label={t`Add a filter`}>
-            <DashboardHeaderButton
-              icon="filter"
-              onClick={() => dispatch(showAddParameterPopover())}
-              aria-label={t`Add a filter`}
-            />
-          </Tooltip>
-        </div>
-      </TippyPopover>
-    </span>
+    <Popover opened={isAddParameterPopoverOpen} position="bottom-end">
+      <Popover.Target>
+        <ToolbarButton
+          icon="filter"
+          onClick={() =>
+            isAddParameterPopoverOpen
+              ? dispatch(hideAddParameterPopover())
+              : dispatch(showAddParameterPopover())
+          }
+          aria-label={t`Add a filter`}
+          tooltipLabel={t`Add a filter`}
+        />
+      </Popover.Target>
+      <Popover.Dropdown>
+        <ParametersPopover
+          onAddParameter={parameter => dispatch(addParameter(parameter))}
+          onClose={() => dispatch(hideAddParameterPopover())}
+        />
+      </Popover.Dropdown>
+    </Popover>
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddHeadingOrTextButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import {
   addHeadingDashCardToDashboard,
   addMarkdownDashCardToDashboard,
 } from "metabase/dashboard/actions";
-import { TextOptionsButton } from "metabase/dashboard/components/TextOptions/TextOptionsButton";
 import { getDashboard, getSelectedTabId } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
+import { Group, Icon, Menu, Text } from "metabase/ui";
 
 export const AddHeadingOrTextButton = () => {
   const dispatch = useDispatch();
@@ -36,14 +36,41 @@ export const AddHeadingOrTextButton = () => {
     }
   };
 
+  const TEXT_OPTIONS = [
+    {
+      title: t`Heading`,
+      action: onAddHeading,
+    },
+    {
+      title: t`Text`,
+      action: onAddMarkdownBox,
+    },
+  ];
+
   return (
-    <Tooltip label={t`Add a heading or text`}>
-      <span>
-        <TextOptionsButton
-          onAddMarkdown={onAddMarkdownBox}
-          onAddHeading={onAddHeading}
-        />
-      </span>
-    </Tooltip>
+    <Menu position="bottom-end">
+      <Menu.Target>
+        <ToolbarButton
+          tooltipLabel={t`Add a heading or text`}
+          w="3rem"
+          data-element-id={t`Add a heading or text`}
+          aria-label={t`Add a heading or text box`}
+        >
+          <Group spacing="xs" noWrap>
+            <Icon name="string" size={18} />
+            <Icon name="chevrondown" size={10} />
+          </Group>
+        </ToolbarButton>
+      </Menu.Target>
+      <Menu.Dropdown miw="auto">
+        {TEXT_OPTIONS.map(({ title, action }) => (
+          <Menu.Item key={title} onClick={action}>
+            <Text pr="xl" fw="bold">
+              {title}
+            </Text>
+          </Menu.Item>
+        ))}
+      </Menu.Dropdown>
+    </Menu>
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddLinkCardButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { addLinkDashCardToDashboard } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { getDashboard, getSelectedTabId } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Icon, Tooltip } from "metabase/ui";
 
 export const AddLinkCardButton = () => {
   const dispatch = useDispatch();
   const dashboard = useSelector(getDashboard);
   const selectedTabId = useSelector(getSelectedTabId);
-
   const onAddLinkCard = () => {
     if (dashboard) {
       dispatch(
@@ -23,11 +21,13 @@ export const AddLinkCardButton = () => {
   };
 
   const addLinkLabel = t`Add link card`;
+
   return (
-    <Tooltip label={addLinkLabel}>
-      <DashboardHeaderButton aria-label={addLinkLabel} onClick={onAddLinkCard}>
-        <Icon name="link" size={18} />
-      </DashboardHeaderButton>
-    </Tooltip>
+    <ToolbarButton
+      tooltipLabel={addLinkLabel}
+      icon="link"
+      aria-label={addLinkLabel}
+      onClick={onAddLinkCard}
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddQuestionButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { toggleSidebar } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { SIDEBAR_NAME } from "metabase/dashboard/constants";
 import { getSidebar } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
 
 export const AddQuestionButton = () => {
   const dispatch = useDispatch();
-
   const sidebar = useSelector(getSidebar);
-
   const addQuestionButtonHint =
     sidebar.name === SIDEBAR_NAME.addQuestion
       ? t`Close sidebar`
       : t`Add questions`;
 
   return (
-    <Tooltip label={addQuestionButtonHint}>
-      <DashboardHeaderButton
-        icon="add"
-        isActive={sidebar.name === SIDEBAR_NAME.addQuestion}
-        onClick={() => dispatch(toggleSidebar(SIDEBAR_NAME.addQuestion))}
-        aria-label={addQuestionButtonHint}
-      />
-    </Tooltip>
+    <ToolbarButton
+      tooltipLabel={addQuestionButtonHint}
+      icon="add"
+      isActive={sidebar.name === SIDEBAR_NAME.addQuestion}
+      onClick={() => dispatch(toggleSidebar(SIDEBAR_NAME.addQuestion))}
+      aria-label={addQuestionButtonHint}
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddSectionButton/AddSectionButton.module.css

+/* We have to explicitly hit the data-hovered tag to override its styles on the default Mantine menu item */
+.AddSectionButton > button[data-hovered="true"] {
+  background-color: var(--mb-color-brand);
+}

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddSectionButton.tsx → frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddSectionButton/AddSectionButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { addSectionToDashboard } from "metabase/dashboard/actions";
-import {
-  DashboardHeaderButton,
-  SectionMenuItem,
-} from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { SectionLayoutPreview } from "metabase/dashboard/components/DashboardHeader/SectionLayoutPreview";
 import { layoutOptions, type SectionLayout } from "metabase/dashboard/sections";
 import { getDashboard, getSelectedTabId } from "metabase/dashboard/selectors";
+import { darken } from "metabase/lib/colors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Flex, Icon, Menu, Tooltip } from "metabase/ui";
+import { Flex, Menu } from "metabase/ui";
+
+import AddSectionButtonS from "./AddSectionButton.module.css";
 
 export const AddSectionButton = () => {
   const dispatch = useDispatch();
   const dashboard = useSelector(getDashboard);
   const selectedTabId = useSelector(getSelectedTabId);
-
   const onAddSection = (sectionLayout: SectionLayout) => {
     if (dashboard) {
       dispatch(
@@ -27,29 +26,33 @@ export const AddSectionButton = () => {
       );
     }
   };
-
   return (
     <Menu position="bottom-end">
       <Menu.Target>
-        <span>
-          <Tooltip label={t`Add section`}>
-            <DashboardHeaderButton aria-label={t`Add section`}>
-              <Icon name="section" size={18} />
-            </DashboardHeaderButton>
-          </Tooltip>
-        </span>
+        <ToolbarButton
+          tooltipLabel={t`Add section`}
+          aria-label={t`Add section`}
+          icon="section"
+        />
       </Menu.Target>
       <Menu.Dropdown miw="100px">
-        <Flex direction="column" align="center" gap="md" p="12px">
+        <Flex
+          direction="column"
+          align="center"
+          gap="md"
+          p="12px"
+          className={AddSectionButtonS.AddSectionButton}
+        >
           {layoutOptions.map(layout => (
-            <SectionMenuItem
+            <Menu.Item
               key={layout.id}
+              bg={darken("bg-medium", 0.1)}
               onClick={() => onAddSection(layout)}
               aria-label={layout.label}
               p="14px"
             >
               <SectionLayoutPreview layout={layout} />
-            </SectionMenuItem>
+            </Menu.Item>
           ))}
         </Flex>
       </Menu.Dropdown>

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddSectionButton/index.ts

+export * from "./AddSectionButton";

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/AddTemporalUnitButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { addTemporalUnitParameter } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { useDispatch } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
 
 export const AddTemporalUnitButton = () => {
   const dispatch = useDispatch();
   return (
-    <Tooltip label={t`Add a Unit of Time widget`}>
-      <DashboardHeaderButton
-        icon="clock"
-        aria-label={t`Add a Unit of Time widget`}
-        onClick={() => dispatch(addTemporalUnitParameter())}
-      />
-    </Tooltip>
+    <ToolbarButton
+      tooltipLabel={t`Add a Unit of Time widget`}
+      icon="clock"
+      aria-label={t`Add a Unit of Time widget`}
+      onClick={() => dispatch(addTemporalUnitParameter())}
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/DashboardInfoButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { closeSidebar, setSidebar } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { SIDEBAR_NAME } from "metabase/dashboard/constants";
 import { getIsShowDashboardInfoSidebar } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
 
 export const DashboardInfoButton = () => {
   const dispatch = useDispatch();
-
   const isShowingDashboardInfoSidebar = useSelector(
     getIsShowDashboardInfoSidebar,
   );
 
   return (
-    <Tooltip label={t`More info`}>
-      <DashboardHeaderButton
-        icon="info"
-        isActive={isShowingDashboardInfoSidebar}
-        onClick={() =>
-          isShowingDashboardInfoSidebar
-            ? dispatch(closeSidebar())
-            : dispatch(setSidebar({ name: SIDEBAR_NAME.info }))
-        }
-      />
-    </Tooltip>
+    <ToolbarButton
+      aria-label={t`More info`}
+      tooltipLabel={t`More info`}
+      icon="info"
+      isActive={isShowingDashboardInfoSidebar}
+      onClick={() =>
+        isShowingDashboardInfoSidebar
+          ? dispatch(closeSidebar())
+          : dispatch(setSidebar({ name: SIDEBAR_NAME.info }))
+      }
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/DashboardSubscriptionButton.tsx

 import { t } from "ttag";
 
-import Tooltip from "metabase/core/components/Tooltip";
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { setSharing } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { getIsSharing } from "metabase/dashboard/selectors";
 import { useDispatch, useSelector } from "metabase/lib/redux";
 import { canManageSubscriptions as canManageSubscriptionsSelector } from "metabase/selectors/user";
@@ -16,17 +15,25 @@ export const DashboardSubscriptionButton = () => {
     dispatch(setSharing(!isSharing));
   };
   return (
-    <Tooltip tooltip={t`Subscriptions`} key="dashboard-subscriptions">
-      <DashboardHeaderButton
-        icon="subscription"
-        disabled={!isSubscriptionsEnabled}
-        onClick={toggleSharing}
-        aria-label="subscriptions"
-      />
-    </Tooltip>
+    <ToolbarButton
+      tooltipLabel={t`Subscriptions`}
+      icon="subscription"
+      disabled={!isSubscriptionsEnabled}
+      onClick={toggleSharing}
+      aria-label="subscriptions"
+    />
   );
 };
 
+type ShouldRenderSubscriptionButtonProps = {
+  dashboard: Dashboard;
+  canManageSubscriptions: boolean;
+  formInput: any;
+  isAdmin: boolean;
+  isEditing: boolean;
+  isFullscreen: boolean;
+};
+
 export function shouldRenderSubscriptionButton({
   dashboard,
   canManageSubscriptions,
@@ -34,14 +41,7 @@ export function shouldRenderSubscriptionButton({
   isAdmin,
   isEditing,
   isFullscreen,
-}: {
-  dashboard: Dashboard;
-  canManageSubscriptions: boolean;
-  formInput: any;
-  isAdmin: boolean;
-  isEditing: boolean;
-  isFullscreen: boolean;
-}) {
+}: ShouldRenderSubscriptionButtonProps) {
   const isLoaded = !!dashboard;
   const hasCards = isLoaded && dashboard.dashcards.length > 0;
 
@@ -52,15 +52,11 @@ export function shouldRenderSubscriptionButton({
       (dashCard: DashboardCard) =>
         !["text", "heading"].includes(dashCard.card.display),
     );
-
   const canCreateSubscription = hasDataCards && canManageSubscriptions;
-
   const emailConfigured = formInput?.channels?.email?.configured || false;
   const slackConfigured = formInput?.channels?.slack?.configured || false;
-
   const shouldShowSubscriptionsButton =
     emailConfigured || slackConfigured || isAdmin;
-
   return (
     !isEditing &&
     !dashboard?.archived &&

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/EditDashboardButton.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import { setEditingDashboard } from "metabase/dashboard/actions";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import { getDashboardComplete } from "metabase/dashboard/selectors";
 import type { DashboardRefreshPeriodControls } from "metabase/dashboard/types";
 import { useDispatch, useSelector } from "metabase/lib/redux";
-import { Tooltip } from "metabase/ui";
 
 export const EditDashboardButton = ({
   onRefreshPeriodChange,
 }: Pick<DashboardRefreshPeriodControls, "onRefreshPeriodChange">) => {
   const dispatch = useDispatch();
   const dashboard = useSelector(getDashboardComplete);
-
   const onBeginEditing = () => {
     if (dashboard) {
       onRefreshPeriodChange(null);
@@ -21,14 +19,13 @@ export const EditDashboardButton = ({
   };
 
   return (
-    <Tooltip key="edit-dashboard" label={t`Edit dashboard`}>
-      <DashboardHeaderButton
-        visibleOnSmallScreen={false}
-        key="edit"
-        aria-label={t`Edit dashboard`}
-        icon="pencil"
-        onClick={onBeginEditing}
-      />
-    </Tooltip>
+    <ToolbarButton
+      tooltipLabel={t`Edit dashboard`}
+      visibleOnSmallScreen={false}
+      key="edit"
+      aria-label={t`Edit dashboard`}
+      icon="pencil"
+      onClick={onBeginEditing}
+    />
   );
 };

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/FullscreenAnalyticsDashboard.tsx

 import { t } from "ttag";
 
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import CS from "metabase/css/core/index.css";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
 import type { DashboardFullscreenControls } from "metabase/dashboard/types";
 
 export const FullscreenAnalyticsDashboard = ({
   isFullscreen,
   onFullscreenChange,
 }: DashboardFullscreenControls) => (
-  <DashboardHeaderButton
+  <ToolbarButton
     key="expand"
     aria-label={t`Enter Fullscreen`}
     icon="expand"

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/FullscreenToggle.tsx

 import { t } from "ttag";
 
-import Tooltip from "metabase/core/components/Tooltip";
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import type { DashboardFullscreenControls } from "metabase/dashboard/types";
 
-import { FullScreenButtonIcon } from "../../DashboardActions.styled";
-import { DashboardHeaderButton } from "../DashboardHeader.styled";
-
 export const FullscreenToggle = ({
   isFullscreen,
   onFullscreenChange,
-}: DashboardFullscreenControls) => (
-  <Tooltip tooltip={isFullscreen ? t`Exit fullscreen` : t`Enter fullscreen`}>
-    <span>
-      <DashboardHeaderButton
-        icon={<FullScreenButtonIcon isFullscreen={isFullscreen} />}
-        onClick={e => onFullscreenChange(!isFullscreen, !e.altKey)}
-      />
-    </span>
-  </Tooltip>
-);
+}: DashboardFullscreenControls) => {
+  const label = isFullscreen ? t`Exit fullscreen` : t`Enter fullscreen`;
+  return (
+    <ToolbarButton
+      tooltipLabel={label}
+      icon={isFullscreen ? "contract" : "expand"}
+      onClick={e => onFullscreenChange(!isFullscreen, !e.altKey)}
+      aria-label={label}
+    />
+  );
+};

frontend/src/metabase/dashboard/components/DashboardHeader/buttons/NightModeToggleButton.tsx

 import { t } from "ttag";
 
-import Tooltip from "metabase/core/components/Tooltip";
-import { NightModeButtonIcon } from "metabase/dashboard/components/DashboardActions.styled";
-import { DashboardHeaderButton } from "metabase/dashboard/components/DashboardHeader/DashboardHeader.styled";
+import { ToolbarButton } from "metabase/components/ToolbarButton";
 import type { DashboardNightModeControls } from "metabase/dashboard/types";
 
 export const NightModeToggleButton = ({
   isNightMode,
   onNightModeChange,
-}: Pick<DashboardNightModeControls, "isNightMode" | "onNightModeChange">) => (
-  <Tooltip tooltip={isNightMode ? t`Daytime mode` : t`Nighttime mode`}>
-    <span>
-      <DashboardHeaderButton
-        icon={
-          <NightModeButtonIcon
-            isNightMode={isNightMode}
-            onClick={() => onNightModeChange(!isNightMode)}
-          />
-        }
-      />
-    </span>
-  </Tooltip>
-);
+}: Pick<DashboardNightModeControls, "isNightMode" | "onNightModeChange">) => {
+  const label = isNightMode ? t`Daytime mode` : t`Nighttime mode`;
+  return (
+    <ToolbarButton
+      icon={isNightMode ? "sun" : "moon"}
+      onClick={() => onNightModeChange?.(!isNightMode)}
+      tooltipLabel={label}
+      aria-label={label}
+    />
+  );
+};

frontend/src/metabase/dashboard/components/EmbedMenu/NonAdminEmbedMenu.unit.spec.tsx

-import userEvent from "@testing-library/user-event";
+import userEvent, {
+  PointerEventsCheckLevel,
+} from "@testing-library/user-event";
 
 import { setupDashboardPublicLinkEndpoints } from "__support__/server-mocks";
 import { mockSettings } from "__support__/settings";
@@ -80,7 +82,10 @@ describe("NonAdminEmbedMenu", () => {
     });
 
     it("should render a disabled button with a `Ask your admin to create a public link` tooltip", async () => {
-      await userEvent.hover(screen.getByLabelText("share icon"));
+      await userEvent.hover(screen.getByLabelText("share icon"), {
+        // The button is disabled so pointer events should be disabled
+        pointerEventsCheck: PointerEventsCheckLevel.Never,
+      });
       expect(
         screen.getByText("Ask your admin to create a public link"),
       ).toBeInTheDocument();
@@ -93,7 +98,10 @@ describe("NonAdminEmbedMenu", () => {
     });
 
     it("should render a disabled button with a `Public links are disabled` tooltip", async () => {
-      await userEvent.hover(screen.getByLabelText("share icon"));
+      await userEvent.hover(screen.getByLabelText("share icon"), {
+        // The button is disabled so pointer events should be disabled
+        pointerEventsCheck: PointerEventsCheckLevel.Never,
+      });
       expect(screen.getByText("Public links are disabled")).toBeInTheDocument();
     });
   });