feat(PinField): wrap to next line when digits don't fit in viewport (#1359)

https://jira.tid.es/browse/WEB-2146

Author: atabel

src/__screenshot_tests__/__image_snapshots__/inline-screenshot-test-tsx-inline-wrap-vertical-space-1-snap.png

@@ -32,6 +32,13 @@ test('Inline wrap', async () => {
     expect(image).toMatchImageSnapshot();
 });
 
+test('Inline wrap vertical space', async () => {
+    const page = await openStoryPage({id: 'layout-inline--wrap', args: {verticalSpace: 16}});
+
+    const image = await page.screenshot();
+    expect(image).toMatchImageSnapshot();
+});
+
 // This test is unstable (https://jira.tid.es/browse/WEB-1648)
 // eslint-disable-next-line jest/no-disabled-tests
 test.skip('Inline negative space', async () => {

src/__screenshot_tests__/__image_snapshots__/input-fields-screenshot-test-tsx-pin-field-increased-font-size-1-snap.png

@@ -107,13 +107,14 @@ Default.storyName = 'Inline';
 
 type Args = {
     space: React.ComponentProps<typeof Inline>['space'];
+    verticalSpace: React.ComponentProps<typeof Inline>['verticalSpace'];
     numItems: number;
 };
 
-export const Wrap: StoryComponent<Args> = ({space, numItems}) => {
+export const Wrap: StoryComponent<Args> = ({space, verticalSpace, numItems}) => {
     const tagTypes = ['active', 'inactive', 'success', 'warning', 'error', 'promo', 'info'] as const;
     return (
-        <Inline space={space} wrap>
+        <Inline space={space} verticalSpace={verticalSpace} wrap>
             {Array.from({length: numItems}, (_, i) => {
                 const type = tagTypes[i % tagTypes.length];
                 return (
@@ -128,6 +129,7 @@ export const Wrap: StoryComponent<Args> = ({space, numItems}) => {
 
 Wrap.args = {
     space: 8,
+    verticalSpace: 8,
     numItems: 50,
 };
 
@@ -136,6 +138,10 @@ Wrap.argTypes = {
         options: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64],
         control: {type: 'select'},
     },
+    verticalSpace: {
+        options: [0, 2, 4, 8, 12, 16, 24, 32, 40, 48, 56, 64],
+        control: {type: 'select'},
+    },
 };
 
 Wrap.storyName = 'Inline wrap';

src/__screenshot_tests__/inline-screenshot-test.tsx

@@ -6,25 +6,42 @@ const spaceMobile = createVar();
 const spaceTablet = createVar();
 const spaceDesktop = createVar();
 
-export const vars = {space, spaceMobile, spaceTablet, spaceDesktop};
+const verticalSpace = createVar();
+const verticalSpaceMobile = createVar();
+const verticalSpaceTablet = createVar();
+const verticalSpaceDesktop = createVar();
+
+export const vars = {
+    space,
+    spaceMobile,
+    spaceTablet,
+    spaceDesktop,
+    verticalSpace,
+    verticalSpaceMobile,
+    verticalSpaceTablet,
+    verticalSpaceDesktop,
+};
 
 export const marginInline = style({
-    marginTop: `calc(${space} * -1)`,
+    marginTop: `calc(${verticalSpace} * -1)`,
     marginLeft: `calc(${space} * -1)`,
     '@media': {
         [mq.mobile]: {
             vars: {
                 [space]: spaceMobile,
+                [verticalSpace]: verticalSpaceMobile,
             },
         },
         [mq.tablet]: {
             vars: {
                 [space]: fallbackVar(spaceTablet, spaceMobile),
+                [verticalSpace]: fallbackVar(verticalSpaceTablet, verticalSpaceMobile),
             },
         },
         [mq.desktopOrBigger]: {
             vars: {
                 [space]: spaceDesktop,
+                [verticalSpace]: verticalSpaceDesktop,
             },
         },
     },
@@ -39,14 +56,15 @@ const supportsFlexGap = '(display: flex) and (gap: 0px)';
 export const inline = style({
     pointerEvents: 'none', // to prevent negative margins from affecting clickable areas
     gridAutoFlow: 'column',
-    marginTop: `calc(${space} * -1)`,
+    marginTop: `calc(${fallbackVar(verticalSpace, space)} * -1)`,
     marginLeft: `calc(${space} * -1)`,
     '@supports': {
         [supportsFlexGap]: {
             margin: 0, // restore
             pointerEvents: 'auto', // restore
             flexDirection: 'row',
             gap: space,
+            rowGap: fallbackVar(verticalSpace, space),
         },
     },
 });
@@ -82,7 +100,7 @@ export const stringSpaceWithWrap = style({
 
 globalStyle(`${marginInline} > div`, {
     marginLeft: space,
-    marginTop: space,
+    marginTop: fallbackVar(verticalSpace, space),
 });
 
 globalStyle(`${inline} > div`, {

src/__stories__/inline-story.tsx

@@ -20,24 +20,56 @@ const calcSpaceValue = (space: NumericSpace | FlexSpace) => {
     }
 };
 
-const calcInlineVars = (space: FlexSpace | ByBreakpoint<NumericSpace>) => {
-    if (typeof space === 'number' || typeof space === 'string') {
-        return {
-            [styles.vars.space]: calcSpaceValue(space),
+const calcInlineVars = (
+    space: FlexSpace | ByBreakpoint<NumericSpace>,
+    verticalSpace?: ByBreakpoint<NumericSpace>
+) => {
+    const calcSpaceVars = (
+        space: FlexSpace | ByBreakpoint<NumericSpace>,
+        varNames: {default: string; mobile: string; tablet: string; desktop: string}
+    ) => {
+        if (typeof space === 'number' || typeof space === 'string') {
+            return {
+                [varNames.default]: calcSpaceValue(space),
+            };
+        }
+        const vars = {
+            [varNames.mobile]: calcSpaceValue(space.mobile),
+            [varNames.desktop]: calcSpaceValue(space.desktop),
         };
-    }
-    const vars = {
-        [styles.vars.spaceMobile]: calcSpaceValue(space.mobile),
-        [styles.vars.spaceDesktop]: calcSpaceValue(space.desktop),
+        if (space.tablet) {
+            vars[varNames.tablet] = calcSpaceValue(space.tablet);
+        }
+        return vars;
     };
-    if (space.tablet) {
-        vars[styles.vars.spaceTablet] = calcSpaceValue(space.tablet);
+
+    const spaceVars = calcSpaceVars(space, {
+        default: styles.vars.space,
+        mobile: styles.vars.spaceMobile,
+        tablet: styles.vars.spaceTablet,
+        desktop: styles.vars.spaceDesktop,
+    });
+
+    if (verticalSpace) {
+        const verticalSpaceVars = calcSpaceVars(verticalSpace, {
+            default: styles.vars.verticalSpace,
+            mobile: styles.vars.verticalSpaceMobile,
+            tablet: styles.vars.verticalSpaceTablet,
+            desktop: styles.vars.verticalSpaceDesktop,
+        });
+
+        return {
+            ...spaceVars,
+            ...verticalSpaceVars,
+        };
     }
-    return vars;
+
+    return spaceVars;
 };
 
 type Props = {
     space: FlexSpace | ByBreakpoint<NumericSpace>;
+    verticalSpace?: ByBreakpoint<NumericSpace>;
     alignItems?: 'flex-start' | 'flex-end' | 'center' | 'stretch' | 'baseline';
     children: React.ReactNode;
     className?: string;
@@ -51,6 +83,7 @@ type Props = {
 
 const Inline = ({
     space,
+    verticalSpace,
     className,
     children,
     role,
@@ -72,7 +105,7 @@ const Inline = ({
                 wrap ? styles.wrap : fullWidth ? styles.fullWidth : styles.noFullWidth,
                 isStringSpace ? (wrap ? styles.stringSpaceWithWrap : styles.stringSpace) : styles.marginInline
             )}
-            style={{...applyCssVars(calcInlineVars(space)), alignItems}}
+            style={{...applyCssVars(calcInlineVars(space, verticalSpace)), alignItems}}
             role={role}
             aria-label={ariaLabel}
             aria-labelledby={ariaLabel ? undefined : ariaLabelledBy}

src/inline.css.ts

@@ -152,7 +152,7 @@ const PinInput = ({
     };
 
     return (
-        <Inline space={8}>
+        <Inline space={8} wrap verticalSpace={16}>
             {Array.from({length}).map((_, index) => (
                 <div
                     key={index}