migrate MobileDialogPrimitive to Tailwind

.github/contribution/testing-conventions.md

@@ -94,13 +94,13 @@ Screenshots are OS-specific. CI runs Linux on its machines. In order to generate
 screenshots, you need to run the tests on Linux. You can do that by running the tests in Docker:
 
 - `docker run --rm --network host -v $(pwd):/work/ -w /work/ -it mcr.microsoft.com/playwright:v1.39.0-jammy /bin/bash`
-- `rm -rf playwright/.cache`
+- `rm -rf packages/orbit-components/playwright/.cache`
 - `yarn install --frozen-lockfile`
 - `yarn components test-ct --update-snapshots`
 
 After you're done, reset the environment:
 
-- `rm -rf playwright/.cache`
+- `rm -rf packages/orbit-components/playwright/.cache`
 - `yarn install --frozen-lockfile`
 
 Both `darwin` and `linux` screenshots are kept:

docs/src/data/tailwind-migration-status.yaml

@@ -106,7 +106,7 @@ Timeline: false
 TimelineStep: false
 Toast: true
 ToastRoot: false
-Tooltip: false
+Tooltip: true
 Truncate: false
 Wizard: false
 WizardStep: false

packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.ct-story.tsx

@@ -0,0 +1,31 @@
+import * as React from "react";
+
+import RandomIdProvider from "../../OrbitProvider/RandomId/Provider";
+
+import MobileDialog from ".";
+
+export function MobileDialogDefault(): JSX.Element {
+  return (
+    <RandomIdProvider useId={React.useId}>
+      <div className="h-screen">
+        <MobileDialog content={<div>Content</div>}>
+          <button type="button" data-test="button">
+            Click me
+          </button>
+        </MobileDialog>
+      </div>
+    </RandomIdProvider>
+  );
+}
+
+export function MobileDialogDisabled(): JSX.Element {
+  return (
+    <RandomIdProvider useId={React.useId}>
+      <div className="h-screen">
+        <MobileDialog content={<div>Content</div>} enabled={false}>
+          <button type="button">Click me</button>
+        </MobileDialog>
+      </div>
+    </RandomIdProvider>
+  );
+}

packages/orbit-components/src/primitives/MobileDialogPrimitive/MobileDialogPrimitive.ct.tsx

@@ -0,0 +1,19 @@
+import * as React from "react";
+import { test, expect } from "@playwright/experimental-ct-react";
+
+import { MobileDialogDefault, MobileDialogDisabled } from "./MobileDialogPrimitive.ct-story";
+
+test.describe("visual", () => {
+  test("screenshot", async ({ mount }) => {
+    const component = await mount(<MobileDialogDefault />);
+    await component.getByTestId("button").click();
+
+    await expect(component).toHaveScreenshot();
+  });
+
+  test("screenshot disabled", async ({ mount }) => {
+    const component = await mount(<MobileDialogDisabled />);
+
+    await expect(component).toHaveScreenshot();
+  });
+});

packages/orbit-components/src/primitives/MobileDialogPrimitive/README.md

@@ -3,7 +3,7 @@
 To implement MobileDialogPrimitive component into your project you'll need to add the import:
 
 ```jsx
-import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primtives/MobileDialogPrimitive";
+import MobileDialogPrimitive from "@kiwicom/orbit-components/lib/primitives/MobileDialogPrimitive";
 ```
 
 After adding import into your project you can use it simply like:

packages/orbit-components/src/primitives/MobileDialogPrimitive/components/DialogContent.tsx

@@ -1,10 +1,8 @@
 import * as React from "react";
-import styled, { css } from "styled-components";
+import cx from "clsx";
 
 import type * as Common from "../../../common/types";
-import defaultTheme from "../../../defaultTheme";
 import Button from "../../../Button";
-import transition from "../../../utils/transition";
 import FOCUSABLE_ELEMENT_SELECTORS from "../../../hooks/useFocusTrap/consts";
 import useLockScrolling from "../../../hooks/useLockScrolling";
 
@@ -17,96 +15,6 @@ interface Props extends Common.Globals {
   onClose: (ev: React.SyntheticEvent<HTMLElement>) => void;
 }
 
-const StyledDialog = styled.div`
-  width: 100%;
-`;
-
-const StyledDialogWrapper = styled.div<{ shown?: boolean }>`
-  position: fixed;
-  width: ${({ theme }) => `calc(100% - ${theme.orbit.spaceXLarge})`};
-  box-sizing: border-box;
-  border-radius: 12px;
-  background-color: ${({ theme }) => theme.orbit.paletteInkDark};
-  box-shadow: ${({ theme }) => theme.orbit.boxShadowRaisedReverse};
-  padding: ${({ theme }) => theme.orbit.spaceMedium};
-  visibility: ${({ shown }) => (shown ? "visible" : "hidden")};
-  opacity: ${({ shown }) => (shown ? "1" : "0")};
-  transition: ${({ theme, shown }) =>
-    css`
-      ${transition(["transform"], "normal", "ease-in-out")},
-      ${transition(["visibility"], "fast", "linear")},
-        ${!shown && theme.orbit.durationNormal}
-    `};
-  z-index: 10012;
-  transform: ${({ shown }) => (!shown ? "translateY(calc(100% + 16px))" : "translateY(0)")};
-  bottom: ${({ theme }) => theme.orbit.spaceMedium};
-  left: ${({ theme }) => theme.orbit.spaceMedium};
-  right: ${({ theme }) => theme.orbit.spaceMedium};
-  max-height: ${({ theme }) => `calc(100% - ${theme.orbit.spaceXLarge})`};
-  overflow-y: scroll;
-  &::-webkit-scrollbar {
-    display: none;
-  }
-
-  -ms-overflow-style: none;
-  scrollbar-width: none;
-
-  img {
-    max-width: 100%;
-  }
-`;
-
-StyledDialogWrapper.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledTooltipContent = styled.div`
-  font-family: ${({ theme }) => theme.orbit.fontFamily};
-  font-size: ${({ theme }) => theme.orbit.fontSizeTextNormal};
-  font-weight: ${({ theme }) => theme.orbit.fontWeightNormal};
-  line-height: ${({ theme }) => theme.orbit.lineHeightTextNormal};
-  color: ${({ theme }) => theme.orbit.paletteWhite};
-  margin-bottom: ${({ theme }) => theme.orbit.spaceMedium};
-
-  & .orbit-text,
-  .orbit-list-item {
-    font-size: ${({ theme }) => theme.orbit.fontSizeTextNormal};
-    font-weight: ${({ theme }) => theme.orbit.fontWeightNormal};
-    color: ${({ theme }) => theme.orbit.paletteWhite};
-  }
-
-  & .orbit-text-link {
-    color: ${({ theme }) => theme.orbit.paletteWhite};
-  }
-`;
-
-StyledTooltipContent.defaultProps = {
-  theme: defaultTheme,
-};
-
-const StyledDialogOverlay = styled.div<{ shown?: boolean }>`
-  position: fixed;
-  visibility: ${({ shown }) => (shown ? "visible" : "hidden")};
-  width: 100%;
-  height: 100%;
-  top: 0;
-  right: 0;
-  bottom: 0;
-  left: 0;
-  background-color: rgba(23, 27, 30, 0.6);
-  z-index: 10011;
-  opacity: ${({ shown }) => (shown ? "1" : "0")};
-  transition: ${({ theme, shown }) => css`
-    ${transition(["opacity"], "normal", "ease-in-out")},
-    ${transition(["visibility"], "fast", "linear")},
-    ${!shown && theme.orbit.durationNormal}
-  `};
-`;
-
-StyledDialogOverlay.defaultProps = {
-  theme: defaultTheme,
-};
-
 const DialogContent = ({
   dataTest,
   shown,
@@ -140,21 +48,40 @@ const DialogContent = ({
     [onClose],
   );
   return (
-    <StyledDialog role="dialog" id={dialogId} data-test={dataTest}>
-      <StyledDialogOverlay shown={shown} ref={overlay} onClick={handleClickOutside} />
-      <StyledDialogWrapper
-        shown={shown}
+    <div className="w-full" role="dialog" id={dialogId} data-test={dataTest}>
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions */}
+      <div
+        className={cx(
+          "fixed inset-0 z-[10011] h-full w-full bg-[rgba(23,27,30,0.6)]",
+          "[transition:opacity_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]",
+          shown ? "visible opacity-100" : "duration-normal invisible opacity-0",
+        )}
+        ref={overlay}
+        onClick={handleClickOutside}
+      />
+      {/* eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-noninteractive-element-interactions */}
+      <div
+        className={cx(
+          "bg-ink-dark shadow-raised-reverse p-md bottom-md inset-x-md fixed z-[10012] box-border max-h-[calc(100%-theme(spacing.xl))] w-[calc(100%-theme(spacing.xl))] overflow-y-scroll rounded-[12px]",
+          "[transition:transform_theme(transitionDuration.normal)_ease-in-out,_visibility_theme(transitionDuration.fast)_linear]",
+          "[-ms-overflow-style:none] [scrollbar-width:none] [&::-webkit-scrollbar]:hidden [&_img]:max-w-full",
+          shown
+            ? "visible translate-y-0 opacity-100"
+            : "duration-normal invisible translate-y-[calc(100%+theme(spacing.md))] opacity-0",
+        )}
         ref={dialog}
         role="tooltip"
         aria-hidden={!shown}
         onClick={handleInnerClick}
       >
-        <StyledTooltipContent>{children}</StyledTooltipContent>
+        <div className="font-base text-normal text-white-normal mb-md [&_.orbit-text]:text-normal [&_.orbit-list-item]:text-normal [&_.orbit-text]:text-white-normal [&_.orbit-list-item]:text-white-normal [&_.orbit-text-link]:text-white-normal font-normal leading-normal [&_.orbit-list-item]:font-normal [&_.orbit-text]:font-normal">
+          {children}
+        </div>
         <Button type="secondary" fullWidth onClick={onClose}>
           {labelClose}
         </Button>
-      </StyledDialogWrapper>
-    </StyledDialog>
+      </div>
+    </div>
   );
 };