The Stage-Step Indicator represents the current execution status of a process by a user. It shows the steps that have been executed, the current step where he can acts and the steps remaining to complete it.
The Stage-Step Indicator allows to navigate between executable steps and previously executed ones.
More details on its usage in the BTP Experience Toolkit : here
Look and Feel
Desktop
Mobile
Anatomy and Size
Desktop Stages
<div> <div></div> <div>Element</div> <div>Morning & Evening</div> <div>HCB & HCW (in addition to Morning & Evening)</div> </div> <div> <div>A</div> <div>Stage Title</div> <div> <pre><code>width: 100%; font-size: 14px; color: var(--sapTextColor); /* when active */ color: var(--sapContent_LabelColor); /* when inactive */ </code></pre> </div> <div></div> </div> <div> <div>B</div> <div>Stage margin</div> <div>width: 0,4375rem</div> <div></div> </div> <div> <div>C</div> <div>Spacing between Stage title and Extremity nested button</div> <div>height: 0,3125rem</div> <div></div> </div> <div> <div>D</div> <div>Nested button</div> <div>see <a href="https%3A%2F%2Fbtpx.frontify.com%2Fdocument%2F223118%23Buttons-NestedButton">Nested Button</a> (Compact)</div> <div></div> </div> <div> <div>E</div> <div>Step Name</div> <div> <p>font-size: 12px;</p> <p>color: var(--sapTextColor); /* when selected */</p> <p>color: var(--sapContent_LabelColor); /* when not selected */</p> </div> <div></div> </div> <div> <div>F</div> <div>Minimal Half Spacing between two step names</div> <div>width: 0,375rem</div> <div></div> </div> <div> <div>G</div> <div>Bar, completed</div> <div> <p>height: 0,75rem;</p> <p>border-radius: 0,375rem;</p> <p>/* when stage is normal */</p> <p>color: var(--sapProgress_Value_Background);</p> <p>/* when stage in error */</p> <p>color: var(--sapProgress_Value_NegativeBackground);</p> <p>/* when stage completed */</p> <p>color: var(–sapProgress_Value_PositiveBackground);</p> </div> <div> <p>/* when stage is normal */</p> <p>border: 1px solid var(--sapProgress_Value_BorderColor);</p> <p>/* when stage in error */</p> <p>border: 1px solid var(--sapProgress_Value_NegativeBorderColor);</p> <p>/* when stage completed */</p> <p>border: 1px solid var(–sapProgress_Value_PositiveBorderColor);</p> </div> </div> <div> <div>H</div> <div>Bar, not completed</div> <div> <p>height: 0,5rem;</p> <p>border-radius: 0,25rem;</p> <p>color: var(--sapProgress_Background);</p> </div> <div>border: 1px solid var(--sapProgress_BorderColor);</div> </div> <div> <div>I1</div> <div>Spacing between steps</div> <div>width: 100%;</div> <div></div> </div> <div> <div>I2</div> <div>Spacing between steps of inactive stage</div> <div>width: 0,125rem;</div> <div></div> </div> <div> <div>J</div> <div>Spacing between two stage</div> <div>width: 0,125rem;</div> <div></div> </div>
The following algorithm describes the logic on how the texts of the active stage's step have to be displayed:
hidden : step[i].addTextWidth = 0
truncated (and in this case what is the value, that will be common to all truncated texts) : step[i].addTextWidth = value
full size.
The first step is to find "outliers" which are texts that are very long compare to the others and the possibility of display.
We consider that we must display at least 2 or 3 text. COEF= 2.5
So the MAX_TEXT_LENGTH = remainingSpace/COEF.
As the goal of this navigator is also to display some texts, it is preferable in some edge cases to not display all the indicator in the width and provide horizontal scrolling like on mobile than forcing to display with very truncated texts.
For that there is a limit to truncation. This limit is MIN_WIDTH_FOR_TEXT_TRUNCATION. This limit is
With that, we find all the step where step[i].addTextWidth > MAX_TEXT_LENGTH and we set the value to it.
If zero or one step remains unchanged then see the stage display mode is with one and only one item.
The next iterative algorithm find which steps have to be hidden or not.
if ( visiblePreviousSteps > 0) hide the text of the first step that has not already been already hidden
elseif (visibleFutureStep>0) hide the text of the last step that has not already been hidden
recompute the remainingSpace
Mobile
The progress indicator can have two displays depending if it fits into the container or not : indicator.minWidth 2* (container.padding-4px)<= container.width
The container constraints are defined by:
container.width (ex: 374px). (A)
container.padding (ex:24px) (B)
The indicator is defined by:
cp =number of collapsed stages
es = number of steps of the expanded stage
the overlap of the first and last nested button over the container padding to have full touch area and also to have the stage vertically aligned with the other items (like the title) of the container. (4px)
The size is:
indicator.minWidth = cp*34px + es *32px - 2px;
The indicator can fit in the container: indicator.minWidth <= container.width - 2*(container.padding-4px)
The indicator cannot fit in the container: indicator.minWidth > container.width - 2*(container.padding-4px)
the indicator with the container's margins scrolls horizontally.
Interval (I2) = 0px
Interactions
Selection to select the step or to display the menu
On mobile, a menu appears on the selection of enabled collapsed stages or enabled steps of compacted stages.
On desktop, a menu appears on enabled compacted stages only. enabled steps of compacted stages and expanded stages are directly selectable.
Horizontal scroll or selection
If the indicator cannot fit inside the container, the horizontal scroll is allowed.
If the user selects a step (press event) and drags it horizontally, the scrolls works and the selection of the step is taken in account (at the release event) only if the horizontal shift is less or equal to 4 pixels.
Optional: During the move, the press state of the step remains if and only if the shift is less or equal to 4 pixels.
