Replace all old tooltips with new one from macaw (#3485)

2023-04-12 15:55:42 +02:00 · 2023-04-12 15:55:42 +02:00 · 5da48b07af
commit 5da48b07af
parent 548c10676e
21 changed files with 297 additions and 215 deletions
--- a/package-lock.json
+++ b/package-lock.json
@ -26,7 +26,7 @@
        "@material-ui/lab": "^4.0.0-alpha.61",
        "@material-ui/styles": "^4.11.4",
        "@reach/auto-id": "^0.16.0",
-        "@saleor/macaw-ui": "^0.8.0-pre.66",
+        "@saleor/macaw-ui": "^0.8.0-pre.68",
        "@saleor/sdk": "^0.4.6",
        "@sentry/react": "^6.0.0",
        "@types/faker": "^5.1.6",
@ -7988,9 +7988,9 @@
      }
    },
    "node_modules/@saleor/macaw-ui": {
-      "version": "0.8.0-pre.66",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.66.tgz",
-      "integrity": "sha512-7iBMoevVsVlGwBIFXUVjIUnuVzKjUph6yMbLy6N5jTxiKOlFK75atRf254er5K4U7cjkTjVw3HorRfvWm7MpeA==",
+      "version": "0.8.0-pre.68",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.68.tgz",
+      "integrity": "sha512-4P1Ec4dpNk0MyejtosBZLd0EHl3pOBY1aFt09/R0Qpdiyu2+O7Jh/O1pwG+cpaG7J6hcrtMGsfYfLl24PwIAAA==",
      "dependencies": {
        "@dessert-box/react": "^0.4.0",
        "@floating-ui/react-dom-interactions": "^0.5.0",
@ -43153,9 +43153,9 @@
      }
    },
    "@saleor/macaw-ui": {
-      "version": "0.8.0-pre.66",
-      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.66.tgz",
-      "integrity": "sha512-7iBMoevVsVlGwBIFXUVjIUnuVzKjUph6yMbLy6N5jTxiKOlFK75atRf254er5K4U7cjkTjVw3HorRfvWm7MpeA==",
+      "version": "0.8.0-pre.68",
+      "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.8.0-pre.68.tgz",
+      "integrity": "sha512-4P1Ec4dpNk0MyejtosBZLd0EHl3pOBY1aFt09/R0Qpdiyu2+O7Jh/O1pwG+cpaG7J6hcrtMGsfYfLl24PwIAAA==",
      "requires": {
        "@dessert-box/react": "^0.4.0",
        "@floating-ui/react-dom-interactions": "^0.5.0",
--- a/package.json
+++ b/package.json
@ -33,7 +33,7 @@
    "@material-ui/lab": "^4.0.0-alpha.61",
    "@material-ui/styles": "^4.11.4",
    "@reach/auto-id": "^0.16.0",
-    "@saleor/macaw-ui": "^0.8.0-pre.66",
+    "@saleor/macaw-ui": "^0.8.0-pre.68",
    "@saleor/sdk": "^0.4.6",
    "@sentry/react": "^6.0.0",
    "@types/faker": "^5.1.6",
--- a/src/apps/components/AppListRow/AppListCardActions.tsx
+++ b/src/apps/components/AppListRow/AppListCardActions.tsx
@ -2,8 +2,7 @@ import { appInstallationStatusMessages } from "@dashboard/apps/messages";
 import { IS_CLOUD_INSTANCE } from "@dashboard/config";
 import { AppInstallationFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
-import { Tooltip } from "@material-ui/core";
-import { Box, Button, Text } from "@saleor/macaw-ui/next";
+import { Box, Button, Text, Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";

@ -74,20 +73,24 @@ const AppListCardActions: React.FC<AppListCardActionsProps> = ({
        </Button>
      )}
      {installHandler && !IS_CLOUD_INSTANCE && (
-        <Tooltip
-          placement="top"
-          title={intl.formatMessage(messages.installationCloudOnly)}
-        >
-          <div>
-            <Button
-              variant="primary"
-              onClick={installHandler}
-              data-test-id="app-install-button"
-              disabled
-            >
-              <FormattedMessage {...buttonMessages.install} />
-            </Button>
-          </div>
+        <Tooltip>
+          <Tooltip.Trigger>
+            <span tabIndex={0}>
+              <Button
+                variant="primary"
+                onClick={installHandler}
+                data-test-id="app-install-button"
+                style={{ pointerEvents: "none" }}
+                disabled
+              >
+                <FormattedMessage {...buttonMessages.install} />
+              </Button>
+            </span>
+          </Tooltip.Trigger>
+          <Tooltip.Content>
+            <Tooltip.Arrow />
+            {intl.formatMessage(messages.installationCloudOnly)}
+          </Tooltip.Content>
        </Tooltip>
      )}
      {installationPending && (
--- a/src/apps/components/AppListRow/ErrorInstallAction.tsx
+++ b/src/apps/components/AppListRow/ErrorInstallAction.tsx
@ -2,12 +2,8 @@ import { appInstallationStatusMessages } from "@dashboard/apps/messages";
 import { AppInstallationFragment } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { Typography } from "@material-ui/core";
-import {
-  Button,
-  Indicator,
-  Tooltip,
-  TooltipMountWrapper,
-} from "@saleor/macaw-ui";
+import { Button, Indicator, TooltipMountWrapper } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";

@ -37,10 +33,16 @@ const InstallErrorAction = ({
        data-test-id="app-installation-failed"
      >
        <FormattedMessage {...appInstallationStatusMessages.failed} />
-        <Tooltip title={appInstallation?.message} variant="error">
-          <TooltipMountWrapper>
-            <Indicator icon="error" />
-          </TooltipMountWrapper>
+        <Tooltip>
+          <Tooltip.Trigger>
+            <TooltipMountWrapper>
+              <Indicator icon="error" />
+            </TooltipMountWrapper>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow />
+            {appInstallation?.message}
+          </Tooltip.Content>
        </Tooltip>
      </Typography>
      {retryInstall && (
--- a/src/apps/components/AppManifestTableDisplay/AppManifestTableDisplay.tsx
+++ b/src/apps/components/AppManifestTableDisplay/AppManifestTableDisplay.tsx
@ -1,6 +1,7 @@
 import { appsMessages } from "@dashboard/apps/messages";
 import { Typography } from "@material-ui/core";
-import { CopyIcon, Tooltip } from "@saleor/macaw-ui";
+import { CopyIcon } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React, { useState } from "react";
 import { useIntl } from "react-intl";
@ -21,35 +22,40 @@ export const AppManifestTableDisplay = ({
  const [copied, setCopied] = useState(false);

  return (
-    <Tooltip
-      placement="top"
-      title={manifestUrl}
-      header={intl.formatMessage(appsMessages.appManifestUrl)}
-    >
-      <Typography
-        onMouseOut={() => setCopied(false)}
-        className={styles.manifestText}
-        onClick={e => {
-          try {
-            e.stopPropagation();
-            e.preventDefault();
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Typography
+          onMouseOut={() => setCopied(false)}
+          className={styles.manifestText}
+          onClick={e => {
+            try {
+              e.stopPropagation();
+              e.preventDefault();

-            navigator.clipboard.writeText(manifestUrl);
-            setCopied(true);
-          } catch (e) {
-            // Copy not supported, ignore
-          }
-        }}
-      >
-        {getAppDomainFromManifest(manifestUrl)}
-        {!!navigator.clipboard && (
-          <CopyIcon
-            className={clsx(styles.copyIcon, {
-              [styles.copyIconColorful]: copied,
-            })}
-          />
-        )}
-      </Typography>
+              navigator.clipboard.writeText(manifestUrl);
+              setCopied(true);
+            } catch (e) {
+              // Copy not supported, ignore
+            }
+          }}
+        >
+          {getAppDomainFromManifest(manifestUrl)}
+          {!!navigator.clipboard && (
+            <CopyIcon
+              className={clsx(styles.copyIcon, {
+                [styles.copyIconColorful]: copied,
+              })}
+            />
+          )}
+        </Typography>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="top">
+        <Tooltip.Arrow />
+        <Tooltip.ContentHeading>
+          {intl.formatMessage(appsMessages.appManifestUrl)}
+        </Tooltip.ContentHeading>
+        {manifestUrl}
+      </Tooltip.Content>
    </Tooltip>
  );
 };
--- a/src/apps/components/AppPermissions/AppPermissions.tsx
+++ b/src/apps/components/AppPermissions/AppPermissions.tsx
@ -1,6 +1,5 @@
 import { AppPermissionFragment } from "@dashboard/graphql";
-import { Tooltip } from "@saleor/macaw-ui";
-import { Box, InfoIcon } from "@saleor/macaw-ui/next";
+import { Box, InfoIcon, Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";

@ -17,9 +16,17 @@ export const AppPermissions: React.FC<AppPermissionsProps> = ({
  const classes = useStyles();

  return (
-    <Tooltip
-      header={<FormattedMessage {...messages.appPermissions} />}
-      title={
+    <Tooltip>
+      <Tooltip.Trigger>
+        <Box display="flex" placeItems="center">
+          <InfoIcon color="iconNeutralSubdued" size="large" />
+        </Box>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">
+        <Tooltip.Arrow />
+        <Tooltip.ContentHeading>
+          <FormattedMessage {...messages.appPermissions} />
+        </Tooltip.ContentHeading>
        <ul className={classes.list}>
          {permissions?.length ? (
            permissions?.map(permission => (
@ -31,11 +38,7 @@ export const AppPermissions: React.FC<AppPermissionsProps> = ({
            </li>
          )}
        </ul>
-      }
-    >
-      <Box display="flex" placeItems="center">
-        <InfoIcon color="iconNeutralSubdued" size="large" />
-      </Box>
+      </Tooltip.Content>
    </Tooltip>
  );
 };
--- a/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
+++ b/src/apps/components/InstalledAppListRow/AppManifestUrl.tsx
@ -1,7 +1,9 @@
-import { Tooltip } from "@saleor/macaw-ui";
-import { Box, CopyIcon, Text } from "@saleor/macaw-ui/next";
+import { Box, CopyIcon, Text, Tooltip } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React, { useState } from "react";
+import { FormattedMessage } from "react-intl";
+
+import { appsMessages } from "../../messages";

 interface AppManifestUrlProps {
  manifestUrl: string;
@ -27,12 +29,21 @@ export const AppManifestUrl: React.FC<AppManifestUrlProps> = ({
        }
      }}
    >
-      <Tooltip title={manifestUrl} header="App Manifest URL">
-        <Box __maxWidth="300px" className="ellipsis">
-          <Text variant="caption" color="textNeutralSubdued">
-            {new URL(manifestUrl).host}
-          </Text>
-        </Box>
+      <Tooltip>
+        <Tooltip.Trigger>
+          <Box __maxWidth="300px" className="ellipsis">
+            <Text variant="caption" color="textNeutralSubdued">
+              {new URL(manifestUrl).host}
+            </Text>
+          </Box>
+        </Tooltip.Trigger>
+        <Tooltip.Content side="bottom">
+          <Tooltip.Arrow />
+          <Tooltip.ContentHeading>
+            <FormattedMessage {...appsMessages.appManifestUrl} />
+          </Tooltip.ContentHeading>
+          {manifestUrl}
+        </Tooltip.Content>
      </Tooltip>
      <CopyIcon
        color="iconNeutralSubdued"
--- a/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
+++ b/src/apps/components/NotInstalledAppListRow/NotInstalledAppListRow.tsx
@ -8,13 +8,13 @@ import TableButtonWrapper from "@dashboard/components/TableButtonWrapper/TableBu
 import { JobStatusEnum } from "@dashboard/graphql";
 import { buttonMessages } from "@dashboard/intl";
 import { CircularProgress } from "@material-ui/core";
-import { Tooltip } from "@saleor/macaw-ui";
 import {
  Box,
  Button,
  Chip,
  List,
  Text,
+  Tooltip,
  TrashBinIcon,
  WarningIcon,
 } from "@saleor/macaw-ui/next";
@ -73,18 +73,26 @@ export const NotInstalledAppListRow: React.FC<AppInstallation> = props => {
        )}
        {appInstallation?.status === JobStatusEnum.FAILED && (
          <>
-            <Tooltip title={appInstallation.message} variant="error">
-              <Box display="flex" placeItems="center" gap={3} marginX={3}>
-                <WarningIcon size="small" color="iconCriticalSubdued" />
-                <Text
-                  variant="caption"
-                  size="small"
-                  color="textCriticalSubdued"
-                  data-test-id="app-failed-label"
-                >
-                  <FormattedMessage {...appInstallationStatusMessages.failed} />
-                </Text>
-              </Box>
+            <Tooltip>
+              <Tooltip.Trigger>
+                <Box display="flex" placeItems="center" gap={3} marginX={3}>
+                  <WarningIcon size="small" color="iconCriticalSubdued" />
+                  <Text
+                    variant="caption"
+                    size="small"
+                    color="textCriticalSubdued"
+                    data-test-id="app-failed-label"
+                  >
+                    <FormattedMessage
+                      {...appInstallationStatusMessages.failed}
+                    />
+                  </Text>
+                </Box>
+              </Tooltip.Trigger>
+              <Tooltip.Content>
+                <Tooltip.Arrow />
+                {appInstallation.message}
+              </Tooltip.Content>
            </Tooltip>
            <Button
              variant="secondary"
--- a/src/channels/components/ChannelAllocationStrategy/ChannelAllocationStrategy.tsx
+++ b/src/channels/components/ChannelAllocationStrategy/ChannelAllocationStrategy.tsx
@ -4,7 +4,7 @@ import RadioGroupField from "@dashboard/components/RadioGroupField";
 import { AllocationStrategyEnum, StockSettingsInput } from "@dashboard/graphql";
 import { Card, CardContent, Typography } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { FormattedMessage } from "react-intl";

@ -52,26 +52,26 @@ const ChannelAllocationStrategy: React.FC<ChannelAllocationStrategyProps> = ({
          label={
            <Typography>
              <FormattedMessage {...messages.allocationStrategyDescription} />
-              <Tooltip
-                title={
-                  <>
-                    <FormattedMessage {...messages.allocaationMayOccur} />
-                    <ul>
-                      <li>
-                        <FormattedMessage
-                          {...messages.allocaationMayOccurWithTrackInventory}
-                        />
-                      </li>
-                      <li>
-                        <FormattedMessage
-                          {...messages.allocaationMayOccurWithReservationTime}
-                        />
-                      </li>
-                    </ul>
-                  </>
-                }
-              >
-                <HelpOutline className={classes.tooltipIcon} />
+              <Tooltip>
+                <Tooltip.Trigger>
+                  <HelpOutline className={classes.tooltipIcon} />
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow />
+                  <FormattedMessage {...messages.allocaationMayOccur} />
+                  <ul>
+                    <li>
+                      <FormattedMessage
+                        {...messages.allocaationMayOccurWithTrackInventory}
+                      />
+                    </li>
+                    <li>
+                      <FormattedMessage
+                        {...messages.allocaationMayOccurWithReservationTime}
+                      />
+                    </li>
+                  </ul>
+                </Tooltip.Content>
              </Tooltip>
            </Typography>
          }
--- a/src/components/Attributes/BasicAttributeRow.tsx
+++ b/src/components/Attributes/BasicAttributeRow.tsx
@ -1,7 +1,7 @@
 import Grid from "@dashboard/components/Grid";
 import { Typography } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";

@ -30,8 +30,14 @@ const BasicAttributeRow: React.FC<BasicAttributeRowProps> = ({
        <Typography>
          {label}
          {description && (
-            <Tooltip title={description}>
-              <HelpOutline className={classes.tooltipIcon} />
+            <Tooltip>
+              <Tooltip.Trigger>
+                <HelpOutline className={classes.tooltipIcon} />
+              </Tooltip.Trigger>
+              <Tooltip.Content side="bottom">
+                <Tooltip.Arrow />
+                {description}
+              </Tooltip.Content>
            </Tooltip>
          )}
        </Typography>
--- a/src/components/Datagrid/components/TooltipContainer.tsx
+++ b/src/components/Datagrid/components/TooltipContainer.tsx
@ -1,5 +1,4 @@
-import { Tooltip } from "@saleor/macaw-ui";
-import { Box } from "@saleor/macaw-ui/next";
+import { Box, Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";

 interface TooltipContainerProps {
@ -48,9 +47,14 @@ export const TooltipContainer: React.FC<TooltipContainerProps> = ({
        __left={x + width / 2}
        zIndex="2"
      >
-        {/* TODO: use tooltip from new macaw when it will be ready */}
-        <Tooltip open={true} title={title} placement="top">
-          <span></span>
+        <Tooltip open={true}>
+          <Tooltip.Trigger>
+            <span></span>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="top">
+            <Tooltip.Arrow />
+            {title}
+          </Tooltip.Content>
        </Tooltip>
      </Box>
    </>
--- a/src/components/Date/Date.tsx
+++ b/src/components/Date/Date.tsx
@ -1,5 +1,5 @@
 import useDateLocalize from "@dashboard/hooks/useDateLocalize";
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import moment from "moment-timezone";
 import React from "react";

@ -15,9 +15,7 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
  const localizeDate = useDateLocalize();

  const getHumanized = (value: string, locale: string, currentDate: number) =>
-    moment(value)
-      .locale(locale)
-      .from(currentDate);
+    moment(value).locale(locale).from(currentDate);

  return (
    <LocaleConsumer>
@ -27,10 +25,16 @@ export const Date: React.FC<DateProps> = ({ date, plain }) => {
            plain ? (
              localizeDate(date)
            ) : (
-              <Tooltip title={localizeDate(date)}>
-                <time dateTime={date} data-test-id="dateTime">
-                  {getHumanized(date, locale, currentDate)}
-                </time>
+              <Tooltip>
+                <Tooltip.Trigger>
+                  <time dateTime={date} data-test-id="dateTime">
+                    {getHumanized(date, locale, currentDate)}
+                  </time>
+                </Tooltip.Trigger>
+                <Tooltip.Content side="bottom">
+                  <Tooltip.Arrow />
+                  {localizeDate(date)}
+                </Tooltip.Content>
              </Tooltip>
            )
          }
--- a/src/components/Date/DateTime.tsx
+++ b/src/components/Date/DateTime.tsx
@ -1,4 +1,4 @@
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import moment from "moment-timezone";
 import React from "react";
 import ReactMoment from "react-moment";
@ -31,12 +31,18 @@ export const DateTime: React.FC<DateTimeProps> = ({ date, plain }) => {
                plain ? (
                  getTitle(date, locale, tz)
                ) : (
-                  <Tooltip title={getTitle(date, locale, tz)}>
-                    <div>
-                      <ReactMoment from={currentDate} locale={locale} tz={tz}>
-                        {date}
-                      </ReactMoment>
-                    </div>
+                  <Tooltip>
+                    <Tooltip.Trigger>
+                      <div>
+                        <ReactMoment from={currentDate} locale={locale} tz={tz}>
+                          {date}
+                        </ReactMoment>
+                      </div>
+                    </Tooltip.Trigger>
+                    <Tooltip.Content side="bottom">
+                      <Tooltip.Arrow />
+                      {getTitle(date, locale, tz)}
+                    </Tooltip.Content>
                  </Tooltip>
                )
              }
--- a/src/components/OverflowTooltip/OverflowTooltip.tsx
+++ b/src/components/OverflowTooltip/OverflowTooltip.tsx
@ -1,5 +1,5 @@
 import { makeStyles } from "@material-ui/core";
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";

@ -41,11 +41,26 @@ const OverflowTooltip: React.FC<OverflowTooltipProps> = ({
    vertical: checkVertical,
  });

-  return (
-    <Tooltip title={title ?? children} header={header} disabled={!isOverflow}>
+  if (!isOverflow) {
+    return (
      <div ref={ref} className={clsx(classes.wrapper, className)}>
        {children}
      </div>
+    );
+  }
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <div ref={ref} className={clsx(classes.wrapper, className)}>
+          {children}
+        </div>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="top">
+        <Tooltip.Arrow />
+        <Tooltip.ContentHeading>{header}</Tooltip.ContentHeading>
+        {title ?? children}
+      </Tooltip.Content>
    </Tooltip>
  );
 };
--- a/src/components/TooltipTableCellHeader/TooltipTableCellHeader.tsx
+++ b/src/components/TooltipTableCellHeader/TooltipTableCellHeader.tsx
@ -1,4 +1,4 @@
-import { Tooltip } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";

 import TableCellHeader, { TableCellHeaderProps } from "../TableCellHeader";
@ -7,7 +7,9 @@ interface TooltipTableCellHeaderProps extends TableCellHeaderProps {
  tooltip?: string | React.ReactNodeArray;
 }

-export const TooltipTableCellHeader: React.FC<TooltipTableCellHeaderProps> = props => {
+export const TooltipTableCellHeader: React.FC<
+  TooltipTableCellHeaderProps
+> = props => {
  const { children, tooltip, disabled, ...rest } = props;

  const tooltipDisabled = () => {
@ -17,11 +19,25 @@ export const TooltipTableCellHeader: React.FC<TooltipTableCellHeaderProps> = pro
    return !disabled;
  };

-  return (
-    <Tooltip title={tooltip} placement="top" disabled={tooltipDisabled()}>
+  if (tooltipDisabled()) {
+    return (
      <TableCellHeader disabled={disabled} {...rest}>
        {children}
      </TableCellHeader>
+    );
+  }
+
+  return (
+    <Tooltip>
+      <Tooltip.Trigger>
+        <TableCellHeader disabled={disabled} {...rest}>
+          {children}
+        </TableCellHeader>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="top">
+        <Tooltip.Arrow />
+        {tooltip}
+      </Tooltip.Content>
    </Tooltip>
  );
 };
--- a/src/orders/components/OrderDraftDetailsProducts/TableLineAlert.tsx
+++ b/src/orders/components/OrderDraftDetailsProducts/TableLineAlert.tsx
@ -1,8 +1,5 @@
-import {
-  IndicatorOutlined,
-  Tooltip,
-  TooltipMountWrapper,
-} from "@saleor/macaw-ui";
+import { IndicatorOutlined, TooltipMountWrapper } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";

 import OrderAlerts from "../OrderAlerts";
@ -20,10 +17,16 @@ const TableLineAlert: React.FC<TableLineAlertProps> = ({ alerts, variant }) => {
  const title = <OrderAlerts alerts={alerts} />;

  return (
-    <Tooltip title={title} variant={variant}>
-      <TooltipMountWrapper>
-        <IndicatorOutlined icon={variant} />
-      </TooltipMountWrapper>
+    <Tooltip>
+      <Tooltip.Trigger>
+        <TooltipMountWrapper>
+          <IndicatorOutlined icon={variant} />
+        </TooltipMountWrapper>
+      </Tooltip.Trigger>
+      <Tooltip.Content side="bottom">
+        <Tooltip.Arrow />
+        {title}
+      </Tooltip.Content>
    </Tooltip>
  );
 };
--- a/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
+++ b/src/orders/components/OrderFulfillLine/OrderFulfillLine.tsx
@ -10,12 +10,8 @@ import {
  OrderFulfillLineFormData,
 } from "@dashboard/orders/utils/data";
 import { TableCell, TextField, Typography } from "@material-ui/core";
-import {
-  ChevronIcon,
-  IconButton,
-  Tooltip,
-  WarningIcon,
-} from "@saleor/macaw-ui";
+import { ChevronIcon, IconButton, WarningIcon } from "@saleor/macaw-ui";
+import { Box, Tooltip } from "@saleor/macaw-ui/next";
 import clsx from "clsx";
 import React from "react";
 import { useIntl } from "react-intl";
@ -32,13 +28,8 @@ interface OrderFulfillLineProps {
 }

 export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
-  const {
-    line,
-    lineIndex,
-    formsetData,
-    formsetChange,
-    onWarehouseChange,
-  } = props;
+  const { line, lineIndex, formsetData, formsetChange, onWarehouseChange } =
+    props;
  const classes = useStyles();
  const intl = useIntl();

@ -88,21 +79,24 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
        thumbnail={line?.thumbnail?.url}
        badge={
          isPreorder || !line?.variant ? (
-            <Tooltip
-              variant="warning"
-              title={intl.formatMessage(
-                isPreorder
-                  ? messages.preorderWarning
-                  : messages.deletedVariantWarning,
-              )}
-            >
-              <div className={classes.warningIcon}>
-                <WarningIcon />
-              </div>
+            <Tooltip>
+              <Tooltip.Trigger>
+                <div className={classes.warningIcon}>
+                  <WarningIcon />
+                </div>
+              </Tooltip.Trigger>
+              <Tooltip.Content side="bottom">
+                <Tooltip.Arrow />
+                <Box __maxWidth={350}>
+                  {intl.formatMessage(
+                    isPreorder
+                      ? messages.preorderWarning
+                      : messages.deletedVariantWarning,
+                  )}
+                </Box>
+              </Tooltip.Content>
            </Tooltip>
-          ) : (
-            undefined
-          )
+          ) : undefined
        }
      >
        {line.productName}
@ -122,8 +116,8 @@ export const OrderFulfillLine: React.FC<OrderFulfillLineProps> = props => {
            type="number"
            inputProps={{
              className: clsx(classes.quantityInnerInput, {
-                [classes.quantityInnerInputNoRemaining]: !line.variant
-                  ?.trackInventory,
+                [classes.quantityInnerInputNoRemaining]:
+                  !line.variant?.trackInventory,
              }),
              min: 0,
              style: { textAlign: "right" },
--- a/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx
+++ b/src/orders/components/OrderTransaction/components/TransactionEvents/components/EventType.tsx
@ -1,7 +1,7 @@
 import { transactionEventTypeMap } from "@dashboard/orders/messages";
 import { TransactionEventType } from "@dashboard/orders/types";
-import { makeStyles, Tooltip } from "@saleor/macaw-ui";
-import { Box, InfoIcon } from "@saleor/macaw-ui/next";
+import { makeStyles } from "@saleor/macaw-ui";
+import { Box, InfoIcon, Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

@ -34,10 +34,16 @@ export const EventType = ({ type, message }: EventTypeProps) => {
    <Box display="flex" alignItems="center">
      {displayType}
      {type !== null && message && (
-        <Tooltip title={message}>
-          <div className={classes.tooltipWrapper}>
-            <InfoIcon />
-          </div>
+        <Tooltip>
+          <Tooltip.Trigger>
+            <div className={classes.tooltipWrapper}>
+              <InfoIcon />
+            </div>
+          </Tooltip.Trigger>
+          <Tooltip.Content side="bottom">
+            <Tooltip.Arrow />
+            {message}
+          </Tooltip.Content>
        </Tooltip>
      )}
    </Box>
--- a/src/plugins/components/PluginSettings/PluginSettings.tsx
+++ b/src/plugins/components/PluginSettings/PluginSettings.tsx
@ -6,14 +6,9 @@ import {
 } from "@dashboard/graphql";
 import { UserError } from "@dashboard/types";
 import { getFieldError } from "@dashboard/utils/errors";
-import {
-  Card,
-  CardContent,
-  TextField,
-  Tooltip,
-  Typography,
-} from "@material-ui/core";
+import { Card, CardContent, TextField } from "@material-ui/core";
 import InfoIcon from "@material-ui/icons/Info";
+import { Box, Tooltip } from "@saleor/macaw-ui/next";
 import React from "react";
 import { useIntl } from "react-intl";

@ -69,14 +64,14 @@ const PluginSettings: React.FC<PluginSettingsProps> = ({
                    disabled={disabled}
                  />
                  {fieldData.helpText && (
-                    <Tooltip
-                      title={
-                        <Typography variant="body2" className={classes.tooltip}>
-                          {fieldData.helpText}
-                        </Typography>
-                      }
-                    >
-                      <InfoIcon />
+                    <Tooltip>
+                      <Tooltip.Trigger>
+                        <InfoIcon />
+                      </Tooltip.Trigger>
+                      <Tooltip.Content>
+                        <Tooltip.Arrow />
+                        <Box __maxWidth={350}>{fieldData.helpText}</Box>
+                      </Tooltip.Content>
                    </Tooltip>
                  )}
                </>
--- a/src/plugins/components/PluginSettings/styles.ts
+++ b/src/plugins/components/PluginSettings/styles.ts
@ -21,9 +21,6 @@ export const useStyles = makeStyles(
    spacer: {
      flex: 1,
    },
-    tooltip: {
-      color: theme.palette.saleor.active[5],
-    },
  }),
  { name: "PluginSettings" },
 );
--- a/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
+++ b/src/productTypes/components/ProductTypeVariantAttributes/ProductTypeVariantAttributes.tsx
@ -19,7 +19,8 @@ import { maybe, renderCollection } from "@dashboard/misc";
 import { ListActions, ReorderAction } from "@dashboard/types";
 import { Card, CardContent, TableCell } from "@material-ui/core";
 import HelpOutline from "@material-ui/icons/HelpOutline";
-import { DeleteIcon, IconButton, makeStyles, Tooltip } from "@saleor/macaw-ui";
+import { DeleteIcon, IconButton, makeStyles } from "@saleor/macaw-ui";
+import { Tooltip } from "@saleor/macaw-ui/next";
 import capitalize from "lodash/capitalize";
 import React, { useEffect } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
@ -261,8 +262,14 @@ const ProductTypeVariantAttributes: React.FC<
                          }
                        />
                        {!!variantSelectionDisabled && (
-                          <Tooltip
-                            title={
+                          <Tooltip>
+                            <Tooltip.Trigger>
+                              <HelpOutline
+                                className={classes.colVariantDisabled}
+                              />
+                            </Tooltip.Trigger>
+                            <Tooltip.Content side="bottom">
+                              <Tooltip.Arrow />
                              <FormattedMessage
                                id="vlLyvk"
                                defaultMessage="{inputType} attributes cannot be used as variant selection attributes."
@ -270,11 +277,7 @@ const ProductTypeVariantAttributes: React.FC<
                                  inputType: readableAttributeInputType,
                                }}
                              />
-                            }
-                          >
-                            <HelpOutline
-                              className={classes.colVariantDisabled}
-                            />
+                            </Tooltip.Content>
                          </Tooltip>
                        )}
                      </div>