Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(ui5-wizard): stacked Wizard Steps are aligned properly #10250

Merged
merged 2 commits into from
Nov 27, 2024
Merged

fix(ui5-wizard): stacked Wizard Steps are aligned properly #10250

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2c99dc3
fix(ui5-wizard): stacked Wizard Steps are aligned properly
StefanDimitrov04 Nov 25, 2024
6a99e53
fix(ui5-wizard): fixed wizard steps with long titles example
StefanDimitrov04 Nov 26, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion packages/fiori/src/WizardTab.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,7 +20,9 @@
{{#if hasTexts}}
<div class="ui5-wiz-step-texts">
<div class="ui5-wiz-step-title-text">{{titleText}}</div>
<div class="ui5-wiz-step-subtitle-text">{{subtitleText}}</div>
{{#if subtitleText}}
<div class="ui5-wiz-step-subtitle-text">{{subtitleText}}</div>
{{/if}}
</div>
{{/if}}
</div>
Expand Down
74 changes: 74 additions & 0 deletions packages/fiori/test/pages/Wizard.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -673,6 +673,80 @@ <h2>Wizard non-standard 3</h2>
</ui5-wizard>
</ui5-dialog>

<h1>FIX EXAMPLE</h1>
StefanDimitrov04 marked this conversation as resolved.
Show resolved Hide resolved
<ui5-wizard id="wiz">
StefanDimitrov04 marked this conversation as resolved.
Show resolved Hide resolved
<ui5-wizard-step icon="product" title-text="Product type">
<div>
Sed fermentum, mi et tristique ullamcorper, sapien sapien faucibus
sem, quis pretium nibh lorem malesuada diam. Nulla quis arcu aliquet,
feugiat massa semper, volutpat diam. Nam vitae ante posuere, molestie
neque sit amet, dapibus velit. Maecenas eleifend tempor lorem. Mauris
vitae elementum mi, sed eleifend ligula. Nulla tempor vulputate dolor,
nec dignissim quam convallis ut. Praesent vitae commodo felis, ut
iaculis felis. Fusce quis eleifend sapien, eget facilisis nibh.
Suspendisse est velit, scelerisque ut commodo eget, dignissim quis
metus. Cras faucibus consequat gravida. Curabitur vitae quam felis.
Phasellus ac leo eleifend, commodo tortor et, varius quam. Aliquam
erat volutpat.
</div>
</ui5-wizard-step>
<ui5-wizard-step icon="product" title-text="Overview">
<div>Content for Overview step.</div>
</ui5-wizard-step>

<ui5-wizard-step icon="product" title-text="Details">
<div>Content for Details step.</div>
</ui5-wizard-step>

<ui5-wizard-step
icon="product"
title-text="Specifications and Requirements"
subtitle-text="(Optional)"
>
<div>Content for Specifications and Requirements step.</div>
</ui5-wizard-step>

<ui5-wizard-step
icon="product"
title-text="User Instructions and Guidelines for Installation"
>
<div>
Content for User Instructions and Guidelines for Installation step.
</div>
</ui5-wizard-step>

<ui5-wizard-step icon="product" title-text="Testing">
<div>Content for Testing step.</div>
</ui5-wizard-step>

<ui5-wizard-step icon="product" title-text="Validation">
<div>Content for Validation step.</div>
</ui5-wizard-step>

<ui5-wizard-step icon="product" title-text="Deployment Plan">
<div>Content for Deployment Plan step.</div>
</ui5-wizard-step>

<ui5-wizard-step
icon="product"
title-text="Maintenance and Support Overview"
>
<div>Content for Maintenance and Support Overview step.</div>
</ui5-wizard-step>

<ui5-wizard-step icon="product" title-text="Feedback and Improvements">
<div>Content for Feedback and Improvements step.</div>
</ui5-wizard-step>

<ui5-wizard-step
icon="product"
title-text="Final Review and Conclusion for the Entire Process"
>
<div>
Content for Final Review and Conclusion for the Entire Process step.
</div>
</ui5-wizard-step>
</ui5-wizard>
<script>
var wiz = document.getElementById("wiz");

Expand Down