Skip to content

Commit ba0028c

Browse files
nielslyngsoenielslyngsoe
authored
Feature: Use uui invalid color (Awaiting new UUI version) (#18273)
* display validation on save + use uui-color-invalid * update css vars * use standalone color for property layout * remove color from label * fix badge * fix create button color * clean up * correct badge colors
1 parent 6f38a57 commit ba0028c

File tree

20 files changed

+205
-157
lines changed

20 files changed

+205
-157
lines changed

‎src/Umbraco.Web.UI.Client/examples/validation-context/validation-context-dashboard.ts

Lines changed: 120 additions & 109 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,10 @@
11
import { html, customElement, css, state, when } from '@umbraco-cms/backoffice/external/lit';
22
import { UmbLitElement } from '@umbraco-cms/backoffice/lit-element';
33
import { UMB_VALIDATION_CONTEXT, umbBindToValidation, UmbValidationContext } from '@umbraco-cms/backoffice/validation';
4+
import type { UmbValidationMessage } from '@umbraco-cms/backoffice/validation';
45

56
@customElement('umb-example-validation-context-dashboard')
6-
export class UmbExampleValidationContextDashboard extends UmbLitElement {
7-
7+
export class UmbExampleValidationContextDashboardElement extends UmbLitElement {
88
readonly validation = new UmbValidationContext(this);
99

1010
@state()
@@ -20,7 +20,7 @@ export class UmbExampleValidationContextDashboard extends UmbLitElement {
2020
country = '';
2121

2222
@state()
23-
messages? : any[]
23+
messages?: UmbValidationMessage[];
2424

2525
@state()
2626
totalErrorCount = 0;
@@ -32,188 +32,199 @@ export class UmbExampleValidationContextDashboard extends UmbLitElement {
3232
tab2ErrorCount = 0;
3333

3434
@state()
35-
tab = "1";
35+
tab = '1';
3636

3737
constructor() {
3838
super();
3939

40-
this.consumeContext(UMB_VALIDATION_CONTEXT,(validationContext)=>{
41-
42-
this.observe(validationContext.messages.messages,(messages)=>{
43-
this.messages = messages;
44-
},'observeValidationMessages')
40+
this.consumeContext(UMB_VALIDATION_CONTEXT, (validationContext) => {
41+
this.observe(
42+
validationContext.messages.messages,
43+
(messages) => {
44+
this.messages = messages;
45+
},
46+
'observeValidationMessages',
47+
);
4548

4649
// Observe all errors
47-
this.validation.messages.messagesOfPathAndDescendant('$.form').subscribe((value)=>{
48-
this.totalErrorCount = [...new Set(value.map(x=>x.path))].length;
50+
this.validation.messages.messagesOfPathAndDescendant('$.form').subscribe((value) => {
51+
this.totalErrorCount = [...new Set(value.map((x) => x.path))].length;
4952
});
5053

5154
// Observe errors for tab1, note that we only use part of the full JSONPath
52-
this.validation.messages.messagesOfPathAndDescendant('$.form.tab1').subscribe((value)=>{
53-
this.tab1ErrorCount = [...new Set(value.map(x=>x.path))].length;
55+
this.validation.messages.messagesOfPathAndDescendant('$.form.tab1').subscribe((value) => {
56+
this.tab1ErrorCount = [...new Set(value.map((x) => x.path))].length;
5457
});
5558

5659
// Observe errors for tab2, note that we only use part of the full JSONPath
57-
this.validation.messages.messagesOfPathAndDescendant('$.form.tab2').subscribe((value)=>{
58-
this.tab2ErrorCount = [...new Set(value.map(x=>x.path))].length;
60+
this.validation.messages.messagesOfPathAndDescendant('$.form.tab2').subscribe((value) => {
61+
this.tab2ErrorCount = [...new Set(value.map((x) => x.path))].length;
5962
});
60-
61-
});
63+
});
6264
}
6365

64-
#onTabChange(e:Event) {
66+
#onTabChange(e: Event) {
6567
this.tab = (e.target as HTMLElement).getAttribute('data-tab') as string;
6668
}
6769

6870
#handleSave() {
69-
7071
// fake server validation-errors for all fields
71-
if(this.name == '')
72-
this.validation.messages.addMessage('server','$.form.tab1.name','Name server-error message','4875e113-cd0c-4c57-ac92-53d677ba31ec');
73-
if(this.email == '')
74-
this.validation.messages.addMessage('server','$.form.tab1.email','Email server-error message','a47e287b-4ce6-4e8b-8e05-614e7cec1a2a');
75-
if(this.city == '')
76-
this.validation.messages.addMessage('server','$.form.tab2.city','City server-error message','8dfc2f15-fb9a-463b-bcec-2c5d3ba2d07d');
77-
if(this.country == '')
78-
this.validation.messages.addMessage('server','$.form.tab2.country','Country server-error message','d98624f6-82a2-4e94-822a-776b44b01495');
72+
if (this.name == '')
73+
this.validation.messages.addMessage(
74+
'server',
75+
'$.form.tab1.name',
76+
'Name server-error message',
77+
'4875e113-cd0c-4c57-ac92-53d677ba31ec',
78+
);
79+
if (this.email == '')
80+
this.validation.messages.addMessage(
81+
'server',
82+
'$.form.tab1.email',
83+
'Email server-error message',
84+
'a47e287b-4ce6-4e8b-8e05-614e7cec1a2a',
85+
);
86+
if (this.city == '')
87+
this.validation.messages.addMessage(
88+
'server',
89+
'$.form.tab2.city',
90+
'City server-error message',
91+
'8dfc2f15-fb9a-463b-bcec-2c5d3ba2d07d',
92+
);
93+
if (this.country == '')
94+
this.validation.messages.addMessage(
95+
'server',
96+
'$.form.tab2.country',
97+
'Country server-error message',
98+
'd98624f6-82a2-4e94-822a-776b44b01495',
99+
);
79100
}
80101

81102
override render() {
82103
return html`
83104
<uui-box>
84-
This is a demo of how the Validation Context can be used to validate a form with multiple steps. Start typing in the form or press Save to trigger validation.
85-
<hr/>
105+
This is a demo of how the Validation Context can be used to validate a form with multiple steps. Start typing in
106+
the form or press Save to trigger validation.
107+
<hr />
86108
Total errors: ${this.totalErrorCount}
87-
<hr/>
109+
<hr />
88110
<uui-tab-group @click=${this.#onTabChange}>
89-
<uui-tab ?active=${this.tab == '1'} data-tab="1">
111+
<uui-tab ?active=${this.tab == '1'} data-tab="1">
90112
Tab 1
91-
${when(this.tab1ErrorCount,()=>html`
92-
<uui-badge color="danger">${this.tab1ErrorCount}</uui-badge>
93-
`)}
113+
${when(this.tab1ErrorCount, () => html` <uui-badge color="invalid">${this.tab1ErrorCount}</uui-badge> `)}
94114
</uui-tab>
95-
<uui-tab ?active=${this.tab == '2'} data-tab="2">
115+
<uui-tab ?active=${this.tab == '2'} data-tab="2">
96116
Tab 2
97-
${when(this.tab2ErrorCount,()=>html`
98-
<uui-badge color="danger">${this.tab2ErrorCount}</uui-badge>
99-
`)}
117+
${when(this.tab2ErrorCount, () => html` <uui-badge color="invalid">${this.tab2ErrorCount}</uui-badge> `)}
100118
</uui-tab>
101-
</uui-tab-group>
119+
</uui-tab-group>
102120
103-
${when(this.tab=='1',()=>html`
104-
${this.#renderTab1()}
105-
`)}
106-
${when(this.tab=='2',()=>html`
107-
${this.#renderTab2()}
108-
`)}
121+
${when(this.tab == '1', () => html` ${this.#renderTab1()} `)}
122+
${when(this.tab == '2', () => html` ${this.#renderTab2()} `)}
109123
110124
<uui-button look="primary" color="positive" @click=${this.#handleSave}>Save</uui-button>
111-
<hr/>
125+
<hr />
112126
<h3>Validation Context Messages</h3>
113-
<pre>${JSON.stringify(this.messages ?? [],null,3)}</pre>
127+
<pre>${JSON.stringify(this.messages ?? [], null, 3)}</pre>
114128
</uui-box>
115-
`
129+
`;
116130
}
117131

118132
#renderTab1() {
119133
return html`
120134
<uui-form>
121135
<form>
122136
<div>
123-
<label>Name</label>
124-
<uui-form-validation-message>
125-
<uui-input
126-
type="text"
127-
.value=${this.name}
128-
@input=${(e: InputEvent)=>this.name = (e.target as HTMLInputElement).value}
129-
${umbBindToValidation(this,'$.form.tab1.name',this.name)}
130-
required></uui-input>
131-
</uui-form-validation-message>
137+
<label>Name</label>
138+
<uui-form-validation-message>
139+
<uui-input
140+
type="text"
141+
.value=${this.name}
142+
@input=${(e: InputEvent) => (this.name = (e.target as HTMLInputElement).value)}
143+
${umbBindToValidation(this, '$.form.tab1.name', this.name)}
144+
required></uui-input>
145+
</uui-form-validation-message>
132146
</div>
133147
<label>E-mail</label>
134148
<uui-form-validation-message>
135149
<uui-input
136150
type="email"
137151
.value=${this.email}
138-
@input=${(e: InputEvent)=>this.email = (e.target as HTMLInputElement).value}
139-
${umbBindToValidation(this,'$.form.tab1.email',this.email)}
152+
@input=${(e: InputEvent) => (this.email = (e.target as HTMLInputElement).value)}
153+
${umbBindToValidation(this, '$.form.tab1.email', this.email)}
140154
required></uui-input>
141155
</uui-form-validation-message>
142156
</form>
143157
</uui-form>
144-
`
158+
`;
145159
}
146160

147161
#renderTab2() {
148162
return html`
149163
<uui-form>
150164
<form>
151165
<div>
152-
<label>City</label>
153-
<uui-form-validation-message>
154-
<uui-input
155-
type="text"
156-
.value=${this.city}
157-
@input=${(e: InputEvent)=>this.city = (e.target as HTMLInputElement).value}
158-
${umbBindToValidation(this,'$.form.tab2.city',this.city)}
159-
required></uui-input>
160-
</uui-form-validation-message>
166+
<label>City</label>
167+
<uui-form-validation-message>
168+
<uui-input
169+
type="text"
170+
.value=${this.city}
171+
@input=${(e: InputEvent) => (this.city = (e.target as HTMLInputElement).value)}
172+
${umbBindToValidation(this, '$.form.tab2.city', this.city)}
173+
required></uui-input>
174+
</uui-form-validation-message>
161175
</div>
162176
<label>Country</label>
163177
<uui-form-validation-message>
164178
<uui-input
165179
type="text"
166180
.value=${this.country}
167-
@input=${(e: InputEvent)=>this.country = (e.target as HTMLInputElement).value}
168-
${umbBindToValidation(this,'$.form.tab2.country',this.country)}
181+
@input=${(e: InputEvent) => (this.country = (e.target as HTMLInputElement).value)}
182+
${umbBindToValidation(this, '$.form.tab2.country', this.country)}
169183
required></uui-input>
170184
</uui-form-validation-message>
171185
</form>
172186
</uui-form>
173-
`
187+
`;
174188
}
175189

176-
177-
178-
static override styles = [css`
179-
180-
uui-badge {
181-
top:0;
182-
right:0;
183-
font-size:10px;
184-
min-width:17px;
185-
min-height:17px;
186-
187-
}
188-
189-
label {
190-
display:block;
191-
}
192-
193-
uui-box {
194-
margin:20px;
195-
}
196-
197-
uui-button {
198-
margin-top:1rem;
199-
}
200-
201-
pre {
202-
text-align:left;
203-
padding:10px;
204-
border:1px dotted #6f6f6f;
205-
background: #f2f2f2;
206-
font-size: 11px;
207-
line-height: 1.3em;
208-
}
209-
210-
`]
190+
static override styles = [
191+
css`
192+
uui-badge {
193+
top: 0;
194+
right: 0;
195+
font-size: 10px;
196+
min-width: 17px;
197+
min-height: 17px;
198+
}
199+
200+
label {
201+
display: block;
202+
}
203+
204+
uui-box {
205+
margin: 20px;
206+
}
207+
208+
uui-button {
209+
margin-top: 1rem;
210+
}
211+
212+
pre {
213+
text-align: left;
214+
padding: 10px;
215+
border: 1px dotted #6f6f6f;
216+
background: #f2f2f2;
217+
font-size: 11px;
218+
line-height: 1.3em;
219+
}
220+
`,
221+
];
211222
}
212223

213-
export default UmbExampleValidationContextDashboard;
224+
export default UmbExampleValidationContextDashboardElement;
214225

215226
declare global {
216227
interface HTMLElementTagNameMap {
217-
'umb-example-validation-context-dashboard': UmbExampleValidationContextDashboard;
228+
'umb-example-validation-context-dashboard': UmbExampleValidationContextDashboardElement;
218229
}
219230
}

‎src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entries/block-grid-entries.element.ts

Lines changed: 1 addition & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,7 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
427427
return html`
428428
<uui-button
429429
look="placeholder"
430+
color=${this.pristine === false && this.validity.valid === false ? 'invalid' : 'default'}
430431
label=${this._configCreateLabel ?? this._createLabel ?? ''}
431432
href=${this.#context.getPathForCreateBlock(-1) ?? ''}
432433
?disabled=${this._isReadOnly}></uui-button>
@@ -492,13 +493,6 @@ export class UmbBlockGridEntriesElement extends UmbFormControlMixin(UmbLitElemen
492493
--umb-block-grid--create-button--is-dragging--variable: var(--umb-block-grid--is-dragging) none;
493494
display: var(--umb-block-grid--create-button--is-dragging--variable, grid);
494495
}
495-
:host(:not([pristine]):invalid) #createButton {
496-
--uui-button-contrast: var(--uui-color-danger);
497-
--uui-button-contrast-hover: var(--uui-color-danger);
498-
--uui-color-default-emphasis: var(--uui-color-danger);
499-
--uui-button-border-color: var(--uui-color-danger);
500-
--uui-button-border-color-hover: var(--uui-color-danger);
501-
}
502496
503497
.umb-block-grid__layout-container[data-area-length='0'] {
504498
--umb-block-grid--layout-container--is-dragging--variable: var(--umb-block-grid--is-dragging) 1;

‎src/Umbraco.Web.UI.Client/src/packages/block/block-grid/components/block-grid-entry/block-grid-entry.element.ts

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -456,7 +456,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
456456
>
457457
${this.#renderActionBar()}
458458
${!this._showContentEdit && this._contentInvalid
459-
? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
459+
? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
460460
: nothing}
461461
${this._invalidLocation
462462
? html`<uui-tag id="invalidLocation" color="danger"
@@ -562,7 +562,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
562562
href=${this._workspaceEditContentPath}>
563563
<uui-icon name=${this._exposed === false ? 'icon-add' : 'icon-edit'}></uui-icon>
564564
${this._contentInvalid
565-
? html`<uui-badge attention color="danger" label="Invalid content">!</uui-badge>`
565+
? html`<uui-badge attention color="invalid" label="Invalid content">!</uui-badge>`
566566
: nothing}
567567
</uui-button>`
568568
: this._showContentEdit === false && this._exposed === false
@@ -581,11 +581,11 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
581581
? html`<uui-button
582582
label="Edit settings"
583583
look="secondary"
584-
color=${this._settingsInvalid ? 'danger' : ''}
584+
color=${this._settingsInvalid ? 'invalid' : ''}
585585
href=${this._workspaceEditSettingsPath}>
586586
<uui-icon name="icon-settings"></uui-icon>
587587
${this._settingsInvalid
588-
? html`<uui-badge attention color="danger" label="Invalid settings">!</uui-badge>`
588+
? html`<uui-badge attention color="invalid" label="Invalid settings">!</uui-badge>`
589589
: nothing}
590590
</uui-button>`
591591
: nothing}
@@ -638,7 +638,7 @@ export class UmbBlockGridEntryElement extends UmbLitElement implements UmbProper
638638
:host([location-invalid])::after,
639639
:host([settings-invalid])::after,
640640
:host([content-invalid])::after {
641-
border-color: var(--uui-color-danger);
641+
border-color: var(--uui-color-invalid);
642642
}
643643
644644
#invalidLocation {

0 commit comments

Comments
 (0)