-
Notifications
You must be signed in to change notification settings - Fork 270
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
refactor(ui5-form): change default columns number in XL and header te…
…xt wrapping (#10031) Updates the Form web component to latest UX design: 1. New default layout 2. Header text wrapping Related to: #9963
- Loading branch information
Showing
17 changed files
with
327 additions
and
30 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| <!DOCTYPE html> | ||
| <html> | ||
| <head> | ||
| <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"> | ||
| <meta charset="utf-8"> | ||
| <title>Form Header Text Wrapping</title> | ||
| <script src="../%VITE_BUNDLE_PATH%" type="module"></script> | ||
| <link rel="stylesheet" type="text/css" href="../styles/FormLayout.css"> | ||
|
|
||
| <script id='sap-ui-bootstrap' | ||
| src='https://openui5nightly.hana.ondemand.com/resources/sap-ui-core.js' | ||
| data-sap-ui-theme='sap_horizon' | ||
| data-sap-ui-libs='sap.m, sap.ui.core, sap.ui.layout' | ||
| data-sap-ui-preload="async" | ||
| ></script> | ||
| </head> | ||
|
|
||
| <body class="bg"> | ||
| <ui5-slider id="slider" min="1" max="100" value="100" class="slider"></ui5-slider> | ||
|
|
||
| <section id="container"> | ||
| <div class="banner"><div class="banner-inner"></div></div> | ||
|
|
||
| <section> | ||
| <ui5-form class="addressForm" header-text="Very Very Very Very Very Very Very Very Very Very long long long long long long long long text text text text text text text text text text text text text text text text text for a heading of a Form and it is wrapping"> | ||
| <ui5-form-item> | ||
| <ui5-label slot="labelContent">Name:</ui5-label> | ||
| <span class="text">Red Point Stores</span> | ||
| </ui5-form-item> | ||
|
|
||
| <ui5-form-item> | ||
| <ui5-label slot="labelContent">ZIP Code/City:</ui5-label> | ||
| <span class="text">411 Maintown</span> | ||
| </ui5-form-item> | ||
|
|
||
| <ui5-form-item> | ||
| <ui5-label slot="labelContent">Street:</ui5-label> | ||
| <span class="text">Main St 1618</span> | ||
| </ui5-form-item> | ||
|
|
||
| <ui5-form-item> | ||
| <ui5-label slot="labelContent">Country:</ui5-label> | ||
| <span class="text">Germany</span> | ||
| </ui5-form-item> | ||
| </ui5-form> | ||
| </section> | ||
| </section> | ||
|
|
||
| <script> | ||
| slider.addEventListener("ui5-input", function (event) { | ||
| container.style.width = event.target.value + '%'; | ||
| }); | ||
| </script> | ||
| </body> | ||
| </html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
4 changes: 4 additions & 0 deletions
4
packages/website/docs/_samples/main/Form/HeaderTextWrapping/HeaderTextWrapping.md
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,4 @@ | ||
| import html from '!!raw-loader!./sample.html'; | ||
| import js from '!!raw-loader!./main.js'; | ||
|
|
||
| <Editor html={html} js={js} /> |
29 changes: 29 additions & 0 deletions
29
packages/website/docs/_samples/main/Form/HeaderTextWrapping/main.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,29 @@ | ||
| import "@ui5/webcomponents/dist/Form.js"; | ||
| import "@ui5/webcomponents/dist/FormItem.js"; | ||
|
|
||
|
|
||
| // The following code is required only for the sample | ||
| import "@ui5/webcomponents/dist/Label.js"; | ||
| import "@ui5/webcomponents/dist/Text.js"; | ||
| import "@ui5/webcomponents/dist/Slider.js"; | ||
|
|
||
| const slider = document.getElementById("slider"); | ||
| const txtLayout = document.getElementById("txtLayout"); | ||
| const container = document.getElementById("container"); | ||
|
|
||
| slider.addEventListener("ui5-input", () => { | ||
| const width = (slider.value / 100 * 1500); | ||
| container.style.width = `${width}px`; | ||
| txtLayout.innerHTML = getLayoutByWidth(width); | ||
| }); | ||
|
|
||
| const getLayoutByWidth = (width) => { | ||
| if (width > 599 && width <= 1023) { | ||
| return "M"; | ||
| } else if (width >= 1024 && width <= 1439) { | ||
| return "L" | ||
| } else if (width >= 1440) { | ||
| return "XL" | ||
| } | ||
| return "S"; | ||
| }; |
Oops, something went wrong.