@transferwise/components 46.139.0 → 46.140.1

package/src/popover/Popover.test.story.tsx

@@ -0,0 +1,124 @@
+import type { Meta, StoryObj } from '@storybook/react-webpack5';
+import { expect, userEvent, within } from 'storybook/test';
+
+import { withVariantConfig } from '../../.storybook/helpers';
+import { Button } from '..';
+import { Position } from '../common';
+
+import Popover, { PopoverPreferredPlacement } from './Popover';
+
+const meta = {
+  title: 'Dialogs/Popover/Tests',
+  component: Popover,
+  tags: ['!autodocs', '!manifest'],
+} satisfies Meta<typeof Popover>;
+export default meta;
+
+type Story = StoryObj<typeof Popover>;
+
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
+const createPlacementStory = (
+  placement: PopoverPreferredPlacement,
+  containerStyle?: React.CSSProperties,
+): Story => ({
+  parameters: {
+    chromatic: {
+      delay: 1000,
+    },
+  },
+  render: () => (
+    <div
+      style={
+        containerStyle
+          ? { position: 'absolute', ...containerStyle }
+          : { display: 'flex', justifyContent: 'center', padding: '150px' }
+      }
+    >
+      <Popover preferredPlacement={placement} title="Info" content="Details">
+        <Button v2>{placement}</Button>
+      </Popover>
+    </div>
+  ),
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+  },
+});
+
+/**
+ * This test insures that there's no unintended page scroll after the popover
+ * is closed without selecting an option (e.g. clicking outside).
+ * It tests 2 scenarios:
+ * 1. when the popover fits naturally on the screen below the trigger
+ * 2. when there's not enough space below the trigger and it renders above it
+ */
+const generateNoScrollTest = (inverted?: boolean): Story => ({
+  render: function Render() {
+    return (
+      <div>
+        <style>
+          {`
+            .storybook-container{
+              min-height: unset;
+              height: unset;
+            }
+          `}
+        </style>
+        {inverted ? <p style={{ height: '70vh', background: 'blanchedalmond' }} /> : null}
+
+        <Popover
+          content="Popover content for testing"
+          title="Popover Title"
+          preferredPlacement="top"
+        >
+          <Button v2>Open Popover</Button>
+        </Popover>
+
+        <p style={{ margin: '1rem 0', height: '150vh', background: 'blanchedalmond' }} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Open Popover/i });
+
+    await step('Open the popover', async () => {
+      await userEvent.click(trigger);
+      await wait();
+    });
+
+    await step('Close the popover with Escape', async () => {
+      await userEvent.keyboard('{Escape}');
+      await wait();
+    });
+
+    await step('Verify the page has not scrolled', async () => {
+      const scrollParent = canvasElement.ownerDocument.documentElement;
+      await expect(scrollParent.scrollTop).toBe(0);
+    });
+  },
+});
+
+export const PlacementTop: Story = createPlacementStory(Position.TOP);
+export const PlacementRight: Story = createPlacementStory(Position.RIGHT);
+export const PlacementBottom: Story = createPlacementStory(Position.BOTTOM);
+export const PlacementLeft: Story = createPlacementStory(Position.LEFT);
+
+export const FlipTop: Story = createPlacementStory(Position.TOP, { top: 0, left: '50%' });
+export const FlipRight: Story = createPlacementStory(Position.RIGHT, { top: '50%', right: 0 });
+export const FlipBottom: Story = createPlacementStory(Position.BOTTOM, { bottom: 0, left: '50%' });
+export const FlipLeft: Story = createPlacementStory(Position.LEFT, { top: '50%', left: 0 });
+
+export const NoScrollAfterCloseTop: Story = {
+  ...generateNoScrollTest(),
+  ...withVariantConfig(['default']),
+};
+
+export const NoScrollAfterCloseBottom: Story = {
+  ...generateNoScrollTest(true),
+  ...withVariantConfig(['default']),
+};

package/src/popover/Popover.test.tsx

@@ -142,6 +142,61 @@ describe('Popover', () => {
     expect(handleOnClose).toHaveBeenCalledTimes(1);
   });
 
+  describe('className', () => {
+    describe('on desktop', () => {
+      beforeEach(() => {
+        global.innerWidth = Breakpoint.SMALL;
+      });
+
+      it('applies className to the panel container', async () => {
+        render(
+          <Popover {...props} className="custom-popover-class">
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+        await waitForPanel();
+
+        const panel = getPanel();
+        expect(panel).toHaveClass('np-popover__container');
+        expect(panel).toHaveClass('custom-popover-class');
+      });
+    });
+
+    describe('on mobile', () => {
+      beforeEach(() => {
+        global.innerWidth = Breakpoint.SMALL - 1;
+      });
+
+      it('applies className to the bottom sheet container', async () => {
+        render(
+          <Popover {...props} className="custom-popover-class">
+            <button type="button">Open</button>
+          </Popover>,
+        );
+
+        await userEvent.click(screen.getByText('Open'));
+
+        const bottomSheet = getBottomSheet();
+        expect(bottomSheet).toHaveClass('np-popover__container');
+        expect(bottomSheet).toHaveClass('custom-popover-class');
+      });
+    });
+
+    it('does not apply className to the trigger wrapper', () => {
+      const { container } = render(
+        <Popover {...props} className="custom-popover-class">
+          <button type="button">Open</button>
+        </Popover>,
+      );
+
+      const wrapper = container.firstChild;
+      expect(wrapper).toHaveClass('np-popover');
+      expect(wrapper).not.toHaveClass('custom-popover-class');
+    });
+  });
+
   const waitForPanel = async () => screen.findByText('content');
   const getDimmer = () => document.querySelector('.dimmer');
   const getPanel = () => document.querySelector('.np-panel');

package/src/popover/Popover.tsx

@@ -75,7 +75,7 @@ export default function Popover({
   };
 
   return (
-    <span className={clsx('np-popover', className)}>
+    <span className="np-popover">
       <span ref={anchorReference} className="d-inline-block">
         {isValidElement<{ onClick?: () => void }>(children)
           ? cloneElement(children, {
@@ -93,7 +93,7 @@ export default function Popover({
         anchorRef={anchorReference}
         position={resolvedPlacement}
         arrow
-        className="np-popover__container"
+        className={clsx('np-popover__container', className)}
         onClose={handleOnClose}
       >
         <div className="np-popover__content np-text-default-body">

package/src/select/Select.test.story.tsx

@@ -1,5 +1,5 @@
 import type { Meta, StoryObj } from '@storybook/react-webpack5';
-import { userEvent, within } from 'storybook/test';
+import { expect, screen, userEvent, waitFor, within } from 'storybook/test';
 import { useState } from 'react';
 
 import { withVariantConfig } from '../../.storybook/helpers';
@@ -19,6 +19,11 @@ const options: SelectOptionItem[] = Array.from({ length: 10 }, (_, i) => ({
   label: `Option ${i + 1}`,
 }));
 
+const wait = async (duration = 500) =>
+  new Promise<void>((resolve) => {
+    setTimeout(resolve, duration);
+  });
+
 /**
  * Visual regression story: Select placed at the bottom of the viewport so the dropdown
  * flips to the top when opened. The play function opens the dropdown automatically.
@@ -57,3 +62,71 @@ export const DropdownFlipsToTop: Story = {
   },
   ...withVariantConfig(['default']),
 };
+
+/**
+ * This test insures that there's no unintended page scroll after the dropdown
+ * is closed without selecting an option (e.g. clicking outside).
+ * It tests 2 scenarios:
+ * 1. when the dropdown fits naturally on the screen below the trigger
+ * 2. when there's not enough space below the trigger and it renders above it
+ */
+const generateNoScrollTest = (inverted?: boolean): Story => ({
+  render: function Render() {
+    const [selected, setSelected] = useState<SelectOptionItem>(options[0]);
+    return (
+      <div>
+        <style>
+          {`
+            .storybook-container{
+              min-height: unset;
+              height: unset;
+            }
+          `}
+        </style>
+        {inverted ? <p style={{ height: '70vh', background: 'blanchedalmond' }} /> : null}
+
+        <Select
+          id="flip-test-select"
+          size="md"
+          block
+          options={options}
+          selected={selected}
+          onChange={(option) => {
+            if (option && 'value' in option) {
+              setSelected(option as SelectOptionItem);
+            }
+          }}
+        />
+
+        <p style={{ margin: '1rem 0', height: '150vh', background: 'blanchedalmond' }} />
+      </div>
+    );
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const trigger = canvas.getByRole('button', { name: /Option 1/i });
+
+    await step('Open the combobox', async () => {
+      await userEvent.click(trigger);
+    });
+
+    await step('Check if options are displayed', async () => {
+      await waitFor(async () =>
+        expect((await screen.findAllByRole('option')).length).toBeGreaterThan(0),
+      );
+    });
+
+    await step('Close the combobox', async () => {
+      await userEvent.keyboard('{Escape}');
+      await wait();
+    });
+
+    await step('Verify the page has not scrolled', async () => {
+      const scrollParent = canvasElement.ownerDocument.documentElement;
+      await expect(scrollParent.scrollTop).toBe(0);
+    });
+  },
+});
+
+export const NoScrollAfterCloseTop: Story = generateNoScrollTest();
+export const NoScrollAfterCloseBottom: Story = generateNoScrollTest(true);

package/src/select/Select.tsx

@@ -360,9 +360,6 @@ export default function Select({
   const handleCloseOptions = () => {
     setOpen(false);
     setKeyboardFocusedOptionIndex(-1);
-    if (dropdownButtonReference.current) {
-      dropdownButtonReference.current.focus();
-    }
   };
 
   function createSelectHandlerForOption(option: SelectItemWithPlaceholder) {

package/src/styles/less/core/viewport-themes.css

@@ -1,47 +1,51 @@
 @media (max-width: 320px) {
   .np-theme-personal {
-    --delta: 2;
-    --size-4: calc(4px / var(--delta));
-    --size-5: calc(5px / var(--delta));
-    --size-8: calc(8px / var(--delta));
-    --size-10: calc(10px / var(--delta));
-    --size-12: calc(12px / var(--delta));
-    --size-14: calc(14px / var(--delta));
-    --size-16: calc(16px / var(--delta));
-    --size-24: calc(24px / var(--delta));
-    --size-32: calc(32px / var(--delta));
-    --size-40: calc(40px / var(--delta));
-    --size-48: calc(48px / var(--delta));
-    --size-52: calc(52px / var(--delta));
-    --size-56: calc(56px / var(--delta));
-    --size-60: calc(60px / var(--delta));
-    --size-64: calc(64px / var(--delta));
-    --size-72: calc(72px / var(--delta));
-    --size-80: calc(80px / var(--delta));
-    --size-88: calc(88px / var(--delta));
-    --size-96: calc(96px / var(--delta));
-    --size-104: calc(104px / var(--delta));
-    --size-112: calc(112px / var(--delta));
-    --size-120: calc(120px / var(--delta));
-    --size-126: calc(126px / var(--delta));
-    --size-128: calc(128px / var(--delta));
-    --size-146: calc(146px / var(--delta));
-    --size-154: calc(154px / var(--delta));
-    --size-x-small: calc(24px / var(--delta));
-    --size-small: calc(32px / var(--delta));
-    --size-medium: calc(40px / var(--delta));
-    --size-large: calc(48px / var(--delta));
-    --size-x-large: calc(56px / var(--delta));
-    --size-2x-large: calc(72px / var(--delta));
-    --space-content-horizontal: calc(16px / var(--delta));
-    --space-small: calc(16px / var(--delta));
-    --space-medium: calc(32px / var(--delta));
-    --space-large: calc(40px / var(--delta));
-    --space-x-large: calc(56px / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
+    --padding-x-small: 4px;
+    --padding-small: 8px;
+    --padding-medium: 12px;
+    --padding-large: 16px;
+    --size-4: 2px;
+    --size-5: 2.5px;
+    --size-8: 4px;
+    --size-10: 5px;
+    --size-12: 6px;
+    --size-14: 7px;
+    --size-16: 8px;
+    --size-24: 12px;
+    --size-32: 16px;
+    --size-40: 20px;
+    --size-48: 24px;
+    --size-52: 26px;
+    --size-56: 28px;
+    --size-60: 30px;
+    --size-64: 32px;
+    --size-72: 36px;
+    --size-80: 40px;
+    --size-88: 44px;
+    --size-96: 48px;
+    --size-104: 52px;
+    --size-112: 56px;
+    --size-120: 60px;
+    --size-126: 63px;
+    --size-128: 64px;
+    --size-146: 73px;
+    --size-154: 77px;
+    --size-160: 80px;
+    --size-x-small: 12px;
+    --size-small: 16px;
+    --size-medium: 20px;
+    --size-large: 24px;
+    --size-x-large: 28px;
+    --size-2x-large: 36px;
+    --space-content-horizontal: 8px;
+    --space-small: 8px;
+    --space-medium: 16px;
+    --space-large: 20px;
+    --space-x-large: 28px;
+  }
+}
+@media (max-width: 320px) {
+  .np-theme-personal {
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);

package/src/styles/less/core/viewport-themes.less

@@ -1,51 +1,8 @@
-@import '@transferwise/neptune-tokens/themes/personal/tokens.less';
+@import "@transferwise/neptune-tokens/themes/personal/tokens.less";
+@import "@transferwise/neptune-tokens/tiny-viewport.less";
 
 @media (--screen-400-zoom) {
   .np-theme-personal {
-    --delta: 2;
-
-    --size-4: calc(@size-4 / var(--delta));
-    --size-5: calc(@size-5 / var(--delta));
-    --size-8: calc(@size-8 / var(--delta));
-    --size-10: calc(@size-10 / var(--delta));
-    --size-12: calc(@size-12 / var(--delta));
-    --size-14: calc(@size-14 / var(--delta));
-    --size-16: calc(@size-16 / var(--delta));
-    --size-24: calc(@size-24 / var(--delta));
-    --size-32: calc(@size-32 / var(--delta));
-    --size-40: calc(@size-40 / var(--delta));
-    --size-48: calc(@size-48 / var(--delta));
-    --size-52: calc(@size-52 / var(--delta));
-    --size-56: calc(@size-56 / var(--delta));
-    --size-60: calc(@size-60 / var(--delta));
-    --size-64: calc(@size-64 / var(--delta));
-    --size-72: calc(@size-72 / var(--delta));
-    --size-80: calc(@size-80 / var(--delta));
-    --size-88: calc(@size-88 / var(--delta));
-    --size-96: calc(@size-96 / var(--delta));
-    --size-104: calc(@size-104 / var(--delta));
-    --size-112: calc(@size-112 / var(--delta));
-    --size-120: calc(@size-120 / var(--delta));
-    --size-126: calc(@size-126 / var(--delta));
-    --size-128: calc(@size-128 / var(--delta));
-    --size-146: calc(@size-146 / var(--delta));
-    --size-154: calc(@size-154 / var(--delta));
-    --size-x-small: calc(@size-x-small / var(--delta));
-    --size-small: calc(@size-small / var(--delta));
-    --size-medium: calc(@size-medium / var(--delta));
-    --size-large: calc(@size-large / var(--delta));
-    --size-x-large: calc(@size-x-large / var(--delta));
-    --size-2x-large: calc(@size-2x-large / var(--delta));
-    --space-content-horizontal: calc(@space-content-horizontal / var(--delta));
-    --space-small: calc(@space-small / var(--delta));
-    --space-medium: calc(@space-medium / var(--delta));
-    --space-large: calc(@space-large / var(--delta));
-    --space-x-large: calc(@space-x-large / var(--delta));
-    --padding-x-small: var(--size-8);
-    --padding-small: var(--size-16);
-    --padding-medium: var(--size-24);
-    --padding-large: var(--size-32);
-
     --input-height-base: var(--size-32);
     --input-height-large: var(--input-height-small);
     --input-padding: var(--input-padding-small);