[@mantine/core] Stepper: Vertical stepper with multiple lines fix

src/mantine-core/src/Stepper/Step/Step.styles.ts

@@ -7,6 +7,7 @@ export interface StepStylesParams {
   radius: MantineNumberSize;
   allowStepClick: boolean;
   iconPosition: 'right' | 'left';
+  orientation: 'vertical' | 'horizontal';
 }
 
 export const iconSizes = {
@@ -18,28 +19,63 @@ export const iconSizes = {
 };
 
 export default createStyles(
-  (theme, { color, iconSize, size, radius, allowStepClick, iconPosition }: StepStylesParams) => {
+  (
+    theme,
+    { color, iconSize, size, radius, allowStepClick, iconPosition, orientation }: StepStylesParams
+  ) => {
     const _iconSize = iconSize || theme.fn.size({ size, sizes: iconSizes });
     const iconMargin = size === 'xl' || size === 'lg' ? theme.spacing.md : theme.spacing.sm;
     const _radius = theme.fn.size({ size: radius, sizes: theme.radius });
     const colors = theme.fn.variant({ variant: 'filled', color });
     const separatorDistanceFromIcon = theme.spacing.xs / 2;
 
+    const verticalOrientationStyles = {
+      step: {
+        justifyContent: 'flex-start',
+        minHeight: `${_iconSize + theme.spacing.xl + separatorDistanceFromIcon}px`,
+        marginTop: `${separatorDistanceFromIcon}px`,
+        overflow: 'hidden',
+
+        '&:first-of-type': {
+          marginTop: 0,
+        },
+
+        '&:last-of-type': {
+          minHeight: 'auto',
+        },
+      },
+    } as const;
+
     return {
       stepLoader: {},
 
       step: {
         display: 'flex',
         flexDirection: iconPosition === 'left' ? 'row' : 'row-reverse',
         cursor: allowStepClick ? 'pointer' : 'default',
-        alignItems: 'center',
+        ...(orientation === 'vertical'
+          ? verticalOrientationStyles.step
+          : {
+              alignItems: 'center',
+            }),
       },
 
       stepWrapper: {
         position: 'relative',
-        overflow: 'hidden',
-        flexShrink: 0,
-        marginBottom: separatorDistanceFromIcon,
+      },
+
+      verticalSeparator: {
+        top: `${_iconSize + separatorDistanceFromIcon}px`,
+        left: `${_iconSize / 2}px`,
+        height: '100vh',
+        position: 'absolute',
+        borderLeft: `2px solid ${
+          theme.colorScheme === 'dark' ? theme.colors.dark[5] : theme.colors.gray[1]
+        }`,
+      },
+
+      verticalSeparatorActive: {
+        borderColor: theme.fn.variant({ variant: 'filled', color }).background,
       },
 
       stepIcon: {
@@ -85,6 +121,15 @@ export default createStyles(
         flexDirection: 'column',
         marginLeft: iconPosition === 'left' ? iconMargin : undefined,
         marginRight: iconPosition === 'right' ? iconMargin : undefined,
+
+        ...(orientation === 'vertical'
+          ? {
+              marginTop:
+                _iconSize > theme.fn.size({ size, sizes: theme.fontSizes }) * 4
+                  ? _iconSize / 4
+                  : _iconSize / 12,
+            }
+          : null),
       },
 
       stepLabel: {

src/mantine-core/src/Stepper/Step/Step.tsx

@@ -65,6 +65,9 @@ export interface StepProps
 
   /** Static selector base */
   __staticSelector?: string;
+
+  /** Component orientation */
+  orientation?: 'vertical' | 'horizontal';
 }
 
 const defaultIconSizes = {
@@ -98,12 +101,13 @@ export const Step = forwardRef<HTMLButtonElement, StepProps>(
       classNames,
       styles,
       unstyled,
+      orientation,
       ...others
     }: StepProps,
     ref
   ) => {
     const { classes, cx, theme } = useStyles(
-      { color, iconSize, size, radius, allowStepClick, iconPosition },
+      { color, iconSize, size, radius, allowStepClick, iconPosition, orientation },
       { name: __staticSelector, classNames, styles, unstyled }
     );
 
@@ -147,6 +151,13 @@ export const Step = forwardRef<HTMLButtonElement, StepProps>(
                 )
               ) : null}
             </div>
+            {orientation === 'vertical' && (
+              <div
+                className={cx(classes.verticalSeparator, {
+                  [classes.verticalSeparatorActive]: state === 'stepCompleted',
+                })}
+              />
+            )}
           </div>
         )}
 

src/mantine-core/src/Stepper/Stepper.story.tsx

@@ -122,10 +122,50 @@ storiesOf('Stepper', module)
             volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
             mi consectetur, pharetra urna et, volutpat nibh. Integer sit amet diam ligula.
             Phasellus ex purus, dictum non purus ut, viverra maximus sem. Sed luctus eget massa
-            vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor.`}
-            loading
+            vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor. Fusce lacinia lacus at sem luctus
+            accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta
+            nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a
+            volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
+            mi consectetur, pharetra urna et, volutpat nibh.`}
           />
           <Stepper.Step label="Step 3" description="Get full access" />
+          <Stepper.Step
+            label="Step 4"
+            description={`Curabitur in neque dignissim, accumsan ante et, aliquam ex. Mauris nibh tortor,
+            blandit sit amet eleifend sed, convallis in erat. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. In hac habitasse platea dictumst. Integer feugiat elit
+            vel neque tincidunt semper. Pellentesque euismod dignissim massa, ac venenatis ipsum
+            vulputate mattis. Integer a efficitur ligula. Fusce lacinia lacus at sem luctus
+            accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta
+            nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a
+            volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
+            mi consectetur, pharetra urna et, volutpat nibh. Integer sit amet diam ligula.
+            Phasellus ex purus, dictum non purus ut, viverra maximus sem. Sed luctus eget massa
+            vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor. Fusce lacinia lacus at sem luctus
+            accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta
+            nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a
+            volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
+            mi consectetur, pharetra urna et, volutpat nibh.`}
+          />
+          <Stepper.Step
+            label="Step 5"
+            description={`Curabitur in neque dignissim, accumsan ante et, aliquam ex. Mauris nibh tortor,
+            blandit sit amet eleifend sed, convallis in erat. Lorem ipsum dolor sit amet,
+            consectetur adipiscing elit. In hac habitasse platea dictumst. Integer feugiat elit
+            vel neque tincidunt semper. Pellentesque euismod dignissim massa, ac venenatis ipsum
+            vulputate mattis. Integer a efficitur ligula. Fusce lacinia lacus at sem luctus
+            accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta
+            nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a
+            volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
+            mi consectetur, pharetra urna et, volutpat nibh. Integer sit amet diam ligula.
+            Phasellus ex purus, dictum non purus ut, viverra maximus sem. Sed luctus eget massa
+            vitae dapibus. Sed ante tortor, viverra at urna et, feugiat scelerisque dolor. Fusce lacinia lacus at sem luctus
+            accumsan nec nec turpis. Fusce interdum, orci id porta viverra, sem lorem porta
+            nibh, eget bibendum ligula sapien sit amet orci. Maecenas lobortis lorem dui, a
+            volutpat nunc accumsan at. Curabitur ac auctor ante, et convallis diam. Donec eget
+            mi consectetur, pharetra urna et, volutpat nibh.`}
+          />
+          <Stepper.Step label="Step 6" description="Get full access" />
         </Stepper>
       </div>
     </div>

src/mantine-core/src/Stepper/Stepper.tsx

@@ -134,7 +134,7 @@ export const Stepper: StepperComponent = forwardRef<HTMLDivElement, StepperProps
       })
     );
 
-    if (index !== _children.length - 1) {
+    if (orientation === 'horizontal' && index !== _children.length - 1) {
       acc.push(
         <div
           className={cx(classes.separator, { [classes.separatorActive]: index < active })}

src/mantine-styles-api/src/styles-api/Stepper.styles-api.ts

@@ -4,7 +4,9 @@ export const Stepper: Record<StepperStylesNames, string> = {
   root: 'Root element',
   steps: 'Steps controls wrapper',
   separator: 'Separator line between step controls',
+  verticalSeparator: 'Vertical separator line between step controls',
   separatorActive: 'Separator active modifier',
+  verticalSeparatorActive: 'Vertical separator active modifier',
   content: 'Current step content wrapper',
   stepWrapper: 'Wrapper for the step icon and separator',
   step: 'Step control button',