Skip to content

Commit 0b48907

Browse files
jpzwartejpzwarte
authored
Various form fixes (#2086)
1 parent 17fbc40 commit 0b48907

35 files changed

+854
-487
lines changed

‎.changeset/afraid-pots-guess.md‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
---
2+
'@sl-design-system/select': patch
3+
---
4+
5+
Various fixes:
6+
- Fix built-in validation bug when there already is a custom error
7+
- Fix disabled select getting keyboard focus
8+
- Fix missing label in `<sl-form-validation-errors>`

‎.changeset/bright-games-hug.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@sl-design-system/dialog': patch
3+
---
4+
5+
Various fixes:
6+
- Fix unexpected closing of dialog due to click events "leaking"
7+
- Fix scroll indicators not updating due to dialog resizing

‎.changeset/giant-lies-behave.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
---
2+
'@sl-design-system/form': minor
3+
---
4+
5+
Various improvements & fixes
6+
- Add support for more than 1 form control per form-field
7+
- Add `for` property to `<sl-error>` so it is linked to the form control
8+
- Add `controls` getter to `FormController` that returns a record when the form control name as key
9+
- Add `controls` part to the form-field template so you can customize the layout
10+
- Fix missing label in `<sl-form-validation-errors>` for `<sl-select>`
11+
- Refactored `updateValidity()` to add `updateInternalValidity()` hook that components can implement for *internal* custom validation logic

‎.changeset/moody-ties-post.md‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
---
2+
'@sl-design-system/inline-message': patch
3+
---
4+
5+
Remove slide-up animation
6+
7+
This fixes a bug where the `scrollHeight` of the dialog body was increased while the slide-up animation was running. This caused the dialog to incorrectly show the scroll indicator when it shouldn't have. It was not possible to use `overflow` to prevent this from happening in the dialog. So from now on, the inline message will simply fade in and out without any sliding motion.

‎.changeset/olive-knives-give.md‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,6 @@
1+
---
2+
'@sl-design-system/text-field': patch
3+
---
4+
5+
- Refactor internals to help fix `<sl-number-field>` behavior
6+
- Adding warning when `type="number"` is used that points to `<sl-number-field>`

‎.changeset/silver-animals-send.md‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
---
2+
'@sl-design-system/number-field': patch
3+
---
4+
5+
- Fix issue where the form value wasn't being set correctly when the value was a number.
6+
- Fix number parser to remove any non essentials characters before parsing
7+
- Fix missing `sl-change` and `sl-validate` events
8+
- Change behavior so the formatted value is only updated when the value is programmatically changed, or when the input is blurred
9+
- Move validation to new `updateInternalValidity()` hook

‎examples/lit/src/composite-form/composite-form.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,6 @@ sl-form-field[name='lastName'] {
1919
grid-column: span 1;
2020
}
2121

22-
sl-text-field[name='otherAge'] {
22+
sl-number-field[name='otherAge'] {
2323
margin-inline-start: 2rem;
2424
}

‎examples/lit/src/composite-form/composite-form.ts‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Button } from '@sl-design-system/button';
33
import { ButtonBar } from '@sl-design-system/button-bar';
44
import { Checkbox, CheckboxGroup } from '@sl-design-system/checkbox';
55
import { Form, FormController, FormField, FormValidationErrors } from '@sl-design-system/form';
6+
import { NumberField } from '@sl-design-system/number-field';
67
import { Radio, RadioGroup } from '@sl-design-system/radio-group';
78
import { Switch } from '@sl-design-system/switch';
89
import { TextArea } from '@sl-design-system/text-area';
@@ -21,6 +22,7 @@ export class CompositeForm extends ScopedElementsMixin(LitElement) {
2122
'sl-form': Form,
2223
'sl-form-field': FormField,
2324
'sl-form-validation-errors': FormValidationErrors,
25+
'sl-number-field': NumberField,
2426
'sl-radio': Radio,
2527
'sl-radio-group': RadioGroup,
2628
'sl-switch': Switch,
@@ -76,14 +78,14 @@ export class CompositeForm extends ScopedElementsMixin(LitElement) {
7678
<sl-radio value="under-18">Between 12 and 18</sl-radio>
7779
<sl-radio value="other">Other</sl-radio>
7880
</sl-radio-group>
79-
<sl-text-field
81+
<sl-number-field
8082
?disabled=${this.#form.value?.age !== 'other'}
8183
aria-label="Your own age"
8284
input-size="8"
8385
name="otherAge"
8486
placeholder="Your age"
8587
required
86-
></sl-text-field>
88+
></sl-number-field>
8789
</sl-form-field>
8890
8991
<sl-form-field label="Remarks">

‎examples/lit/src/form-in-dialog/form-in-dialog.scss‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,5 +3,31 @@ dialog {
33
}
44

55
sl-form {
6+
display: grid;
7+
grid-template-columns: 1fr 1fr;
68
padding-block: var(--sl-size-100);
79
}
10+
11+
sl-form-field,
12+
sl-form-validation-errors,
13+
sl-inline-message {
14+
grid-column: 1 / -1;
15+
}
16+
17+
.rental-period::part(controls) {
18+
display: grid;
19+
gap: 0 var(--sl-size-100);
20+
grid-template-columns: 1fr 3fr;
21+
}
22+
23+
sl-switch {
24+
grid-column: 1 / -1;
25+
}
26+
27+
.amount {
28+
grid-column: 1 / 2;
29+
}
30+
31+
.deposit {
32+
grid-column: 2 / 3;
33+
}

‎examples/lit/src/form-in-dialog/form-in-dialog.ts‎

Lines changed: 110 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,36 @@
11
import { type ScopedElementsMap } from '@open-wc/scoped-elements/lit-element.js';
22
import { Dialog } from '@sl-design-system/dialog';
3-
import { Form, FormController, FormField, FormValidationErrors } from '@sl-design-system/form';
3+
import { Error, Form, FormController, FormField, FormValidationErrors, Label } from '@sl-design-system/form';
4+
import { FormatNumber } from '@sl-design-system/format-number';
5+
import { Icon } from '@sl-design-system/icon';
6+
import { InlineMessage } from '@sl-design-system/inline-message';
7+
import { Option } from '@sl-design-system/listbox';
8+
import { NumberField } from '@sl-design-system/number-field';
9+
import { Select } from '@sl-design-system/select';
10+
import { Switch } from '@sl-design-system/switch';
11+
import { TextArea } from '@sl-design-system/text-area';
412
import { TextField } from '@sl-design-system/text-field';
5-
import { type CSSResultGroup, type TemplateResult, html } from 'lit';
13+
import { type CSSResultGroup, type PropertyValues, type TemplateResult, html, nothing } from 'lit';
614
import styles from './form-in-dialog.scss.js';
715

816
export class FormInDialog extends Dialog {
917
/** @internal */
1018
static override get scopedElements(): ScopedElementsMap {
1119
return {
1220
...super.scopedElements,
21+
'sl-error': Error,
1322
'sl-form': Form,
1423
'sl-form-field': FormField,
1524
'sl-form-validation-errors': FormValidationErrors,
25+
'sl-format-number': FormatNumber,
26+
'sl-icon': Icon,
27+
'sl-inline-message': InlineMessage,
28+
'sl-label': Label,
29+
'sl-number-field': NumberField,
30+
'sl-option': Option,
31+
'sl-select': Select,
32+
'sl-switch': Switch,
33+
'sl-text-area': TextArea,
1634
'sl-text-field': TextField
1735
};
1836
}
@@ -21,21 +39,92 @@ export class FormInDialog extends Dialog {
2139
static override styles: CSSResultGroup = [Dialog.styles, styles];
2240

2341
/** Controller for managing form state. */
24-
#form = new FormController(this);
42+
#form = new FormController<{
43+
type: string;
44+
description?: string;
45+
indefinitely: boolean;
46+
rentalPeriodAmount?: number;
47+
rentalPeriodUnit?: string;
48+
amount: number;
49+
deposit: number;
50+
}>(this);
51+
52+
override firstUpdated(changes: PropertyValues<this>): void {
53+
super.firstUpdated(changes);
54+
55+
this.#form.value = {
56+
type: 'Small',
57+
indefinitely: true,
58+
amount: 15,
59+
deposit: 15
60+
};
61+
}
2562

2663
override renderHeader(): TemplateResult {
27-
return super.renderHeader('Form in dialog');
64+
return super.renderHeader('Change locker type');
2865
}
2966

3067
override renderBody(): TemplateResult {
3168
return html`
32-
<sl-form>
33-
<sl-form-field label="First name">
34-
<sl-text-field autofocus name="firstName" required></sl-text-field>
69+
<sl-form @sl-update-state=${this.#onUpdateState}>
70+
<sl-form-field label="Type">
71+
<sl-text-field autofocus name="type" required></sl-text-field>
72+
</sl-form-field>
73+
<sl-form-field label="Description">
74+
<sl-text-area name="description"></sl-text-area>
75+
</sl-form-field>
76+
<sl-form-field class="rental-period">
77+
<sl-label mark="required">Rental period</sl-label>
78+
<sl-switch name="indefinitely" reverse>Indefinitely, until the student leaves school.</sl-switch>
79+
<sl-number-field
80+
aria-label="Rental period amount"
81+
?disabled=${this.#form.value?.indefinitely}
82+
name="rentalPeriodAmount"
83+
placeholder="0"
84+
?required=${!this.#form.value?.indefinitely}
85+
></sl-number-field>
86+
<sl-select
87+
aria-label="Rental period unit"
88+
?disabled=${this.#form.value?.indefinitely}
89+
name="rentalPeriodUnit"
90+
placeholder="Select unit"
91+
?required=${!this.#form.value?.indefinitely}
92+
>
93+
<sl-option value="day">Day</sl-option>
94+
<sl-option value="week">Week</sl-option>
95+
<sl-option value="month">Month</sl-option>
96+
<sl-option value="year">Year</sl-option>
97+
</sl-select>
3598
</sl-form-field>
36-
<sl-form-field label="Last name">
37-
<sl-text-field name="lastName" required></sl-text-field>
99+
<sl-form-field class="amount" label="Amount">
100+
<sl-number-field
101+
format-options='{ "style": "currency", "currency": "EUR" }'
102+
min="0"
103+
name="amount"
104+
required
105+
></sl-number-field>
38106
</sl-form-field>
107+
<sl-form-field class="deposit" label="Deposit">
108+
<sl-number-field
109+
format-options='{ "style": "currency", "currency": "EUR" }'
110+
min="0"
111+
name="deposit"
112+
required
113+
></sl-number-field>
114+
</sl-form-field>
115+
116+
${this.#form.controls.amount?.dirty
117+
? html`
118+
<sl-inline-message type="info">
119+
The rental amount for <strong>already rented</strong> lockers will remain
120+
<sl-format-number
121+
.formatOptions=${{ style: 'currency', currency: 'EUR' }}
122+
.number=${15}
123+
></sl-format-number
124+
>.
125+
</sl-inline-message>
126+
`
127+
: nothing}
39128
40129
<sl-form-validation-errors .controller=${this.#form}></sl-form-validation-errors>
41130
</sl-form>
@@ -54,4 +143,16 @@ export class FormInDialog extends Dialog {
54143
this.close();
55144
}
56145
}
146+
147+
#onUpdateState(): void {
148+
const { indefinitely, rentalPeriodAmount, rentalPeriodUnit } = this.#form.value || {};
149+
150+
this.#form.controls.rentalPeriodAmount?.setCustomValidity(
151+
indefinitely || rentalPeriodAmount ? '' : 'Please enter a rental period amount.'
152+
);
153+
154+
this.#form.controls.rentalPeriodUnit?.setCustomValidity(
155+
indefinitely || rentalPeriodUnit ? '' : 'Please select a rental period unit.'
156+
);
157+
}
57158
}

0 commit comments

Comments
 (0)