Pattern: ic-stepper design pattern for inclusion with ic-side-navigation (ic-stepper code tab)

[gd2910]

Summary

Add another Pattern (or modify the Page Header pattern) on the Side Nav Patterns Page to show stepper in conjunction with Side Nav

💬 Description

Using flex-grow on the parent container is a popular way to use flex-box, but unless the min-width is changed from auto the stepper increases in size but does not shrink. This would seem like an issue with ic-stepper but it is the way in which flexbox is used.

<div style="display: flex;">
      <ic-side-navigation
        app-title="Application Name"
        version="v0.0.0"
        status="BETA"
      >
      </ic-side-navigation>
      <main style="flex-grow: 1; width: 100%;">
        <ic-section-container>
          <ic-stepper>
            <ic-step step-title="Create" step-type="completed"></ic-step>
            <ic-step step-title="Read" step-type="current"></ic-step>
            <ic-step step-title="Update" step-type="active"></ic-step>
            <ic-step step-title="Delete" step-type="disabled"></ic-step>
          </ic-stepper>
        </ic-section-container>
      </main>
    </div>

💰 Use value

This would be a reference point for a popular design pattern and hopefully help stop tickets raised against ic-stepper.

Additional info

The

width can have the min-width or width set.

[gd2910]

Will need discussion on the value vs whether design patterns should be included within the code examples of a component