Trailing connecting line after the last step when .top aligned

[paul4156]

Describe the bug There will be a trailing line after the last step, when alignment is .top and last step has multiple lines of text

To Reproduce

    let steps = [ Text("Cart").font(.caption),
                  Text("Delivery Address").font(.caption),
                  Text("Order Summary").font(.caption),
                  Text("Payment Method").font(.caption),
                  Text("Track\nTracking\nTracking").font(.caption)]

    let indicationTypes = [StepperIndicationType.custom(NumberedCircleView(text: "1")),
                            .custom(NumberedCircleView(text: "2")),
                            .custom(NumberedCircleView(text: "3")),
                            .custom(NumberedCircleView(text: "4")),
                            .custom(NumberedCircleView(text: "5"))]

    var body: some View {
        StepperView()
            .addSteps(steps)
            .indicators(indicationTypes)
            .stepIndicatorMode(StepperMode.vertical)
            .spacing(30)
            .alignments([StepperAlignment.top, .top, .top, .top, .top])
            .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))
    }

Expected behavior Hide the trailing line

Screenshots https://tinypng.com/web/output/08ageudqwq54yxpuu02az1vmt7gze0mt/Screen%20Shot%202021-05-24%20at%2010.06.46%20am.png

Info (please complete the following information):

• Device: iPhone 12 simulator
• OS: iOS 13
• Pod Version (What is this?)
• Xcode Version 12.5 (12E262)

Additional context None. Thanks for helping.

[badrinathvm]

Hi @paul4156 Thank you for checking out the library. U can simply set the alignments of the last one to .center

StepperView()
           .addSteps(steps)
           .indicators(indicationTypes)
           .stepIndicatorMode(StepperMode.vertical)
           .spacing(30)
           .alignments([StepperAlignment.top, .top, .top, .top, .center])
           .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))

[paul4156]

Hi @paul4156 Thank you for checking out the library. U can simply set the alignments of the last one to .center

StepperView()
           .addSteps(steps)
           .indicators(indicationTypes)
           .stepIndicatorMode(StepperMode.vertical)
           .spacing(30)
           .alignments([StepperAlignment.top, .top, .top, .top, .center])
           .lineOptions(StepperLineOptions.custom(1, Colors.blue(.teal).rawValue))

Thank you for your help.

But that is not what I needed. In my app, the first line is "step title", and the second line is "step details", which can be multi-lines. For each step, I need to align the icon to the "title" (first) line, hence cannot use .center alignment. That is the whole point I am using .top alignment for all my steps.

[badrinathvm]

Got it, let me work on a fix and get back to u shortly with updated version.

[badrinathvm]

@paul4156 I have fixed the issue and released a new version pod 'StepperView','~> 1.6.6' See the attached screenshot. Please test ur scenarios using 1.6.6. Also, i would appreciate, if u can mention the name of the app in the App store you are using this for. This would help the library to reach a wider audience.

[paul4156]

I am sorry, but I am still getting the trailing line after the last step icon. And in your above example, the last step seems to be .center aligned, not .top aligned.

Your help is greatly appreciated and I will definitely credit this wonderful package in my app.

[badrinathvm]

Thank you for the credits @paul4156. Looks like one of my commits got missed. Will generate a new version and let u know shortly.