From b2f43026bd1647a574dc788b542f993751932d13 Mon Sep 17 00:00:00 2001
From: Alex Inkin <alexander@inkin.ru>
Date: Mon, 23 Dec 2024 15:02:10 +0400
Subject: [PATCH] chore(demo): improve form example (#10037)

---
 .../components/form/examples/2/index.html     | 483 +++++++-----------
 .../components/form/examples/2/index.less     | 119 +----
 .../components/form/examples/2/index.ts       |   2 +-
 .../demo/src/modules/components/form/index.ts |   2 +-
 4 files changed, 197 insertions(+), 409 deletions(-)

diff --git a/projects/demo/src/modules/components/form/examples/2/index.html b/projects/demo/src/modules/components/form/examples/2/index.html
index b8dc70016d7e..a24c03341e92 100644
--- a/projects/demo/src/modules/components/form/examples/2/index.html
+++ b/projects/demo/src/modules/components/form/examples/2/index.html
@@ -1,315 +1,206 @@
-<div class="tui-container">
-    <div class="stepper">
-        <tui-stepper [activeItemIndex]="0">
-            <button
-                tuiStep
-                type="button"
-            >
-                First step
-            </button>
-            <button
-                tuiStep
-                type="button"
-                [disabled]="true"
-            >
-                Second step
-            </button>
-            <button
-                tuiStep
-                type="button"
-                [disabled]="true"
-            >
-                Third step
-            </button>
-            <button
-                tuiStep
-                type="button"
-                [disabled]="true"
-            >
-                Fourth step
-            </button>
-        </tui-stepper>
-    </div>
+<tui-stepper
+    class="stepper"
+    [activeItemIndex]="0"
+>
+    <button
+        tuiStep
+        type="button"
+    >
+        First step
+    </button>
+    <button
+        tuiStep
+        type="button"
+        [disabled]="true"
+    >
+        Second step
+    </button>
+    <button
+        tuiStep
+        type="button"
+        [disabled]="true"
+    >
+        Third step
+    </button>
+    <button
+        tuiStep
+        type="button"
+        [disabled]="true"
+    >
+        Fourth step
+    </button>
+</tui-stepper>
 
-    <form
-        tuiForm="l"
-        class="example2-form"
-        [formGroup]="testForm"
-        [style.max-width.rem]="45"
+<form
+    tuiForm="l"
+    [formGroup]="testForm"
+    [style.max-width.rem]="35"
+>
+    <header tuiHeader>
+        <h3 tuiTitle>
+            A header
+            <span tuiSubtitle>Form with large controls</span>
+        </h3>
+    </header>
+
+    <tui-input
+        formControlName="nameValue"
+        tuiHintContent="A tooltip"
     >
-        <header tuiHeader>
-            <h3 tuiTitle>A header</h3>
-        </header>
+        Textfield
+        <input
+            placeholder="Field placeholder"
+            tuiTextfieldLegacy
+        />
+    </tui-input>
+    <tui-error
+        formControlName="nameValue"
+        [error]="[] | tuiFieldError | async"
+    />
 
-        <tui-input
-            formControlName="nameValue"
-            tuiHintContent="A tooltip"
-        >
-            Textfield
-            <input
-                placeholder="Field placeholder"
-                tuiTextfieldLegacy
-            />
-            <span class="tui-required"></span>
-        </tui-input>
-        <tui-error
-            formControlName="nameValue"
-            [error]="[] | tuiFieldError | async"
+    <tui-input-date formControlName="periodValue">
+        Input date
+        <input
+            placeholder="Placeholder"
+            tuiTextfieldLegacy
         />
+    </tui-input-date>
+    <tui-error
+        formControlName="periodValue"
+        [error]="[] | tuiFieldError | async"
+    />
 
-        <tui-input-date formControlName="periodValue">
-            Input date
-            <input
-                placeholder="Placeholder"
-                tuiTextfieldLegacy
+    <div class="grid">
+        <div class="stack">
+            <tui-input-password formControlName="passwordValue">Input password</tui-input-password>
+            <tui-error
+                formControlName="passwordValue"
+                [error]="[] | tuiFieldError | async"
             />
-            <span class="tui-required"></span>
-        </tui-input-date>
-        <tui-error
-            formControlName="periodValue"
-            [error]="[] | tuiFieldError | async"
-        />
-        <div class="multi-fields">
-            <div class="multi-field">
-                <tui-input-password formControlName="passwordValue">Input password</tui-input-password>
-                <tui-error
-                    formControlName="passwordValue"
-                    class="tui-space-top-none"
-                    [error]="[] | tuiFieldError | async"
-                />
-            </div>
-            <div class="multi-field">
-                <tui-input-number
-                    formControlName="moneyValue"
-                    [tuiTextfieldPostfix]="'RUB' | tuiCurrency"
-                >
-                    Input money
-                </tui-input-number>
-                <tui-error
-                    formControlName="moneyValue"
-                    class="tui-space-top-none"
-                    [error]="[] | tuiFieldError | async"
-                />
-            </div>
         </div>
-        <div class="slider">
-            <tui-input-slider
-                formControlName="quantityValue"
-                tuiTextfieldPostfix="₽"
-                [max]="3000000"
-                [min]="50000"
-                [segments]="1"
+        <div class="stack">
+            <tui-input-number
+                formControlName="moneyValue"
+                [tuiTextfieldPostfix]="'RUB' | tuiCurrency"
             >
-                Some slider
-            </tui-input-slider>
-            <div class="ticks-labels">
-                <span>from 50 000 ₽</span>
-                <span>to 3 000 000 ₽</span>
-            </div>
-            <div class="field-note">Some additional text</div>
+                Input money
+            </tui-input-number>
             <tui-error
-                formControlName="quantityValue"
+                formControlName="moneyValue"
                 [error]="[] | tuiFieldError | async"
             />
         </div>
-        <div class="multi-fields tui-space_top-5">
-            <div class="multi-field">
-                <tui-select
-                    formControlName="personValue"
-                    [valueContent]="personValueContent"
-                >
-                    Choose a person
-                    <tui-data-list-wrapper
-                        *tuiDataList
-                        [items]="persons"
-                    />
-                </tui-select>
-                <ng-template
-                    #personValueContent
-                    let-data
-                >
-                    <div class="uppercase-name">{{ data.firstName }} {{ data.lastName }}</div>
-                </ng-template>
-                <tui-error
-                    formControlName="personValue"
-                    class="tui-space-top-none"
-                    [error]="[] | tuiFieldError | async"
-                />
-            </div>
-            <div class="multi-field">
-                <tui-input-phone formControlName="phoneValue">Input phone</tui-input-phone>
-                <tui-error
-                    formControlName="phoneValue"
-                    class="tui-space-top-none"
-                    [error]="[] | tuiFieldError | async"
-                />
-            </div>
-        </div>
-        <header tuiHeader>
-            <h3 tuiTitle>Header</h3>
-        </header>
-        <div
-            tuiGroup
-            [collapsed]="true"
-        >
-            <label tuiBlock>
-                One option
-                <input
-                    formControlName="radioValue"
-                    tuiRadio
-                    type="radio"
-                    value="with-commission"
-                    [style.margin-left]="'auto'"
-                />
-            </label>
-            <label tuiBlock>
-                An alternative one
-                <input
-                    formControlName="radioValue"
-                    tuiRadio
-                    type="radio"
-                    value="without-commission"
-                    [style.margin-left]="'auto'"
-                />
-            </label>
-        </div>
-        <div class="half-width">
-            <tui-input-time formControlName="timeValue">Input time</tui-input-time>
-        </div>
-        <div class="checkboxes">
-            <label
-                tuiLabel
-                class="checkbox"
-            >
-                <input
-                    formControlName="osnoValue"
-                    tuiCheckbox
-                    type="checkbox"
-                />
-                First option
-            </label>
-            <label
-                tuiLabel
-                class="checkbox"
-            >
-                <input
-                    formControlName="usnValue"
-                    tuiCheckbox
-                    type="checkbox"
-                />
-                Cool option
-            </label>
-            <label
-                tuiLabel
-                class="checkbox"
-            >
-                <input
-                    formControlName="eshnValue"
-                    tuiCheckbox
-                    type="checkbox"
-                />
-                Boring option
-            </label>
-            <label
-                tuiLabel
-                class="checkbox"
-            >
-                <input
-                    formControlName="envdValue"
-                    tuiCheckbox
-                    type="checkbox"
-                />
-                Interesting option
-            </label>
-        </div>
-        <header tuiHeader>
-            <h3 tuiTitle>Header</h3>
-        </header>
-        <label class="text-normal">
-            From
-            <tui-select
-                formControlName="accountWherefrom"
-                class="accounts-select"
-                [tuiTextfieldLabelOutside]="true"
-                [valueContent]="accountContent"
-            >
-                Choose an account
-                <tui-data-list-wrapper
-                    *tuiDataList
-                    [itemContent]="accountContent"
-                    [items]="accounts"
-                />
-            </tui-select>
-        </label>
-        <label class="text-normal">
-            To
-            <tui-select
-                formControlName="accountWhere"
-                class="accounts-select"
-                [tuiTextfieldLabelOutside]="true"
-                [valueContent]="accountContent"
-            >
-                Choose an account
+    </div>
+
+    <tui-input-slider
+        formControlName="quantityValue"
+        tuiTextfieldPostfix="₽"
+        [max]="3000000"
+        [min]="50000"
+        [segments]="1"
+    >
+        Some slider
+    </tui-input-slider>
+    <div class="ticks-labels">
+        <span>from 50 000 ₽</span>
+        <span>to 3 000 000 ₽</span>
+    </div>
+
+    <div class="grid">
+        <div class="stack">
+            <tui-select formControlName="personValue">
+                Choose a person
                 <tui-data-list-wrapper
                     *tuiDataList
-                    [itemContent]="accountContent"
-                    [items]="accounts"
+                    [items]="persons"
                 />
             </tui-select>
-        </label>
-        <header tuiHeader>
-            <h3 tuiTitle>Header</h3>
-        </header>
-        <div class="select-with-checkbox">
-            <tui-input
-                formControlName="textValue"
-                tuiHintContent="A tooltip"
-            >
-                Textfield
-                <input
-                    placeholder="Placeholder"
-                    tuiTextfieldLegacy
-                />
-            </tui-input>
-            <label
-                tuiLabel
-                class="tui-space_top-2"
-            >
-                <input
-                    formControlName="checkboxValue"
-                    tuiCheckbox
-                    type="checkbox"
-                />
-                Try this
-            </label>
+            <tui-error
+                formControlName="personValue"
+                [error]="[] | tuiFieldError | async"
+            />
         </div>
-        <div class="buttons">
-            <button
-                size="l"
-                tuiButton
-                type="submit"
-                class=""
-            >
-                Submit
-            </button>
-            <button
-                appearance="flat"
-                size="l"
-                tuiButton
-                type="button"
-                class=""
-            >
-                Cancel
-            </button>
+        <div class="stack">
+            <tui-input-phone formControlName="phoneValue">Input phone</tui-input-phone>
+            <tui-error
+                formControlName="phoneValue"
+                [error]="[] | tuiFieldError | async"
+            />
         </div>
-        <ng-template
-            #accountContent
-            let-account
+    </div>
+    <div
+        tuiGroup
+        [collapsed]="true"
+    >
+        <label tuiBlock>
+            Option 1
+            <input
+                formControlName="radioValue"
+                tuiRadio
+                type="radio"
+                value="with-commission"
+                [style.margin-left]="'auto'"
+            />
+        </label>
+        <label tuiBlock>
+            Option 2
+            <input
+                formControlName="radioValue"
+                tuiRadio
+                type="radio"
+                value="without-commission"
+                [style.margin-left]="'auto'"
+            />
+        </label>
+    </div>
+    <div class="grid">
+        <label tuiLabel>
+            <input
+                formControlName="osnoValue"
+                tuiCheckbox
+                type="checkbox"
+            />
+            First option
+        </label>
+        <label tuiLabel>
+            <input
+                formControlName="usnValue"
+                tuiCheckbox
+                type="checkbox"
+            />
+            Cool option
+        </label>
+        <label tuiLabel>
+            <input
+                formControlName="eshnValue"
+                tuiCheckbox
+                type="checkbox"
+            />
+            Boring option
+        </label>
+        <label tuiLabel>
+            <input
+                formControlName="envdValue"
+                tuiCheckbox
+                type="checkbox"
+            />
+            Interesting option
+        </label>
+    </div>
+
+    <footer>
+        <button
+            tuiButton
+            type="submit"
+        >
+            Submit
+        </button>
+        <button
+            appearance="flat"
+            tuiButton
+            type="button"
         >
-            <span class="account">
-                {{ account.name }}
-                <span>{{ account.amount | tuiAmount: 'RUB' | async }}</span>
-            </span>
-        </ng-template>
-    </form>
-</div>
+            Cancel
+        </button>
+    </footer>
+</form>
diff --git a/projects/demo/src/modules/components/form/examples/2/index.less b/projects/demo/src/modules/components/form/examples/2/index.less
index 67edd78faf28..8710a452a216 100644
--- a/projects/demo/src/modules/components/form/examples/2/index.less
+++ b/projects/demo/src/modules/components/form/examples/2/index.less
@@ -1,127 +1,24 @@
 @import '@taiga-ui/core/styles/taiga-ui-local';
 
-@fields-space: 1.25rem;
-@fields-space-mobile: 1rem;
-@fields-space-large: 0.75rem;
-@fields-space-large-mobile: 1.5rem;
-
-:host {
-    display: block;
-}
-
 .stepper {
     margin-bottom: 2rem;
 }
 
-.uppercase-name {
-    text-transform: uppercase;
+.grid {
+    display: grid;
+    gap: inherit;
+    grid-template-columns: 1fr 1fr;
 }
 
-.account {
+.stack {
     display: flex;
-    flex: 1;
-    justify-content: space-between;
+    gap: inherit;
+    flex-direction: column;
 }
 
 .ticks-labels {
     .tui-slider-ticks-labels();
 
     color: var(--tui-text-secondary);
-    margin-top: 0.25rem;
-}
-
-.example2-form {
-    .multi-fields {
-        display: flex;
-
-        @media @tui-mobile {
-            flex-wrap: wrap;
-        }
-
-        .multi-field {
-            flex: 1 1 0;
-            min-inline-size: 0;
-            margin-left: @fields-space;
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            @media @tui-mobile {
-                flex-basis: 100%;
-                margin-top: @fields-space-mobile;
-                margin-left: 0;
-
-                &:first-child {
-                    margin-top: 0;
-                }
-            }
-        }
-    }
-
-    .field-note {
-        font: var(--tui-font-text-s);
-        margin-top: 0.25rem;
-        color: var(--tui-text-secondary);
-    }
-
-    .half-width {
-        inline-size: ~'calc(50% - (@{fields-space} / 2))';
-
-        @media @tui-mobile {
-            inline-size: 100%;
-        }
-    }
-
-    .checkboxes {
-        display: flex;
-        flex-wrap: wrap;
-
-        .checkbox {
-            flex: ~'1 1 calc(50% - 0.625rem)';
-
-            &:nth-child(even) {
-                margin-left: 1.25rem;
-            }
-
-            &:nth-child(n + 3) {
-                margin-top: 1rem;
-            }
-        }
-    }
-
-    .text-normal {
-        font: var(--tui-font-text-s);
-    }
-
-    .buttons {
-        display: flex;
-        margin-top: @fields-space-large;
-
-        &_align_end {
-            justify-content: flex-end;
-        }
-
-        &_align_center {
-            justify-content: center;
-        }
-
-        @media @tui-mobile {
-            flex-direction: column;
-            margin-top: @fields-space-large-mobile;
-        }
-
-        .button {
-            margin-left: 0.75rem;
-
-            &:first-child {
-                margin-left: 0;
-            }
-
-            @media @tui-mobile {
-                margin-top: 0.5rem;
-                margin-left: 0;
-            }
-        }
-    }
+    margin-block-start: -1rem;
 }
diff --git a/projects/demo/src/modules/components/form/examples/2/index.ts b/projects/demo/src/modules/components/form/examples/2/index.ts
index e77bbf869053..3d22eb12aae7 100644
--- a/projects/demo/src/modules/components/form/examples/2/index.ts
+++ b/projects/demo/src/modules/components/form/examples/2/index.ts
@@ -125,7 +125,7 @@ export default class Example {
         periodValue: new FormControl(new TuiDay(2017, 2, 15), Validators.required),
         timeValue: new FormControl(new TuiTime(12, 30), Validators.required),
         personValue: new FormControl(this.persons[0]),
-        quantityValue: new FormControl(50_000, Validators.required),
+        quantityValue: new FormControl(50_000),
         radioValue: new FormControl('with-commission'),
         accountWherefrom: new FormControl<Account | null>(null),
         accountWhere: new FormControl<Account | null>(null),
diff --git a/projects/demo/src/modules/components/form/index.ts b/projects/demo/src/modules/components/form/index.ts
index ef62ae263633..845d6eded67f 100644
--- a/projects/demo/src/modules/components/form/index.ts
+++ b/projects/demo/src/modules/components/form/index.ts
@@ -10,5 +10,5 @@ import {TuiDemo} from '@demo/utils';
     changeDetection,
 })
 export default class Page {
-    protected readonly examples = ['Basic', 'Custom Layout'];
+    protected readonly examples = ['Basic', 'Expansive'];
 }