docs: update fress-style form sample (#10207)

Show-case how applications can apply styles to get better alignment in specific scenarios. By default, you get this misalignment due to the touch areas of these kind of components - Switch, CheckBox, Radio. While the components are implemented by design, the misalignment, shown below, should be definitely addressed. With few lines of CSS, applying small negative margins to shift the components to the left, you can get the perfect alignment.
SAP · Nov 18, 2024 · 1e440f4 · 1e440f4
1 parent b3625ac
commit 1e440f4
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md b/packages/website/docs/_samples/main/Form/FreeStyleForm/FreeStyleForm.md
@@ -1,4 +1,5 @@
 import html from '!!raw-loader!./sample.html';
 import js from '!!raw-loader!./main.js';
+import css from '!!raw-loader!./main.css';
 
-<Editor html={html} js={js} />
+<Editor html={html} js={js} css={css} />
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css b/packages/website/docs/_samples/main/Form/FreeStyleForm/main.css
@@ -0,0 +1,13 @@
+:root {
+	--my-margin: -0.6875rem;
+}
+.ui5-content-density-compact {
+	--my-margin: -0.5rem;
+}
+
+.margin--density-aware {
+	margin-inline-start: var(--my-margin);
+}
+.margin--fixed {
+	margin-inline-start: -0.5rem;
+}
diff --git a/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html b/packages/website/docs/_samples/main/Form/FreeStyleForm/sample.html
@@ -6,6 +6,7 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Sample</title>
+    <link rel="stylesheet" href="./main.css">
 </head>
 
 <body style="background-color: var(--sapBackgroundColor)">
@@ -59,21 +60,22 @@
 
             <ui5-form-group header-text="Group2 (Cb, Rb, Switch)">
                 <ui5-form-item>
-                    <ui5-checkbox text="Here comes your checkbox text"></ui5-checkbox>
+                    <ui5-label required slot="labelContent" for="rbGroup">Label:</ui5-label>
+                    <ui5-checkbox class="margin--density-aware" text="Here comes your checkbox text"></ui5-checkbox>
                 </ui5-form-item>
 
                 <ui5-form-item>
                     <ui5-label required slot="labelContent" for="rbGroup">Label:</ui5-label>
 
-                    <div role="radiogroup">
+                    <div role="radiogroup" class="margin--density-aware">
                         <ui5-radio-button id="rbGroup" text="With Text" name="test"></ui5-radio-button>
                         <ui5-radio-button text="With Tex" name="test"></ui5-radio-button>
                     </div>
                 </ui5-form-item>
 
                 <ui5-form-item>
                     <ui5-label required slot="labelContent" for="swGroup">Label:</ui5-label>
-                    <ui5-switch id="swGrou" checked></ui5-switch>
+                    <ui5-switch id="swGrou" class="margin--fixed" checked></ui5-switch>
                 </ui5-form-item>
             </ui5-form-group>