Skip to content

Commit cd24246

Browse files
nielslyngsoeiOvergaard
nielslyngsoe
and
iOvergaard
authored
feat: New color 'invalid' (#1009)
* ability to overwrite the required asterisk color * change to --uui-validation-color * implementing --uui-color-invalid * adjust for stories --------- Co-authored-by: Jacob Overgaard <[email protected]>
1 parent b299735 commit cd24246

File tree

25 files changed

+82
-34
lines changed

25 files changed

+82
-34
lines changed

‎packages/uui-action-bar/lib/uui-action-bar.story.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -21,7 +21,7 @@ const meta: Meta = {
2121
},
2222
color: {
2323
control: { type: 'select' },
24-
options: ['default', 'positive', 'warning', 'danger'],
24+
options: ['default', 'positive', 'warning', 'danger', 'invalid'],
2525
},
2626
},
2727
parameters: {
@@ -67,7 +67,7 @@ export const LooksAndColors: Story = {
6767
render: () => {
6868
const buttons = ['copy', 'remove', 'delete'];
6969
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
70-
const colors = ['default', 'positive', 'warning', 'danger'];
70+
const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
7171

7272
const uppercaseFirstLetter = (str: string) =>
7373
str.charAt(0).toUpperCase() + str.slice(1);

‎packages/uui-badge/lib/uui-badge.element.ts

+5
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,11 @@ export class UUIBadgeElement extends LitElement {
9191
--color-standalone: var(--uui-color-danger-standalone);
9292
--color-contrast: var(--uui-color-danger-contrast);
9393
}
94+
:host([color='invalid']) {
95+
--color: var(--uui-color-invalid);
96+
--color-standalone: var(--uui-color-invalid-standalone);
97+
--color-contrast: var(--uui-color-invalid-contrast);
98+
}
9499
95100
:host {
96101
background-color: var(--uui-color-surface);

‎packages/uui-badge/lib/uui-badge.story.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,7 @@ const meta: Meta = {
1616
options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
1717
},
1818
color: {
19-
options: ['default', 'positive', 'warning', 'danger'],
19+
options: ['default', 'positive', 'warning', 'danger', 'invalid'],
2020
},
2121
},
2222

@@ -63,7 +63,7 @@ export const Icon: Story = {
6363
export const LooksAndColors: Story = {
6464
render: () => {
6565
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
66-
const colors = ['default', 'positive', 'warning', 'danger'];
66+
const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
6767

6868
const uppercaseFirstLetter = (str: string) =>
6969
str.charAt(0).toUpperCase() + str.slice(1);

‎packages/uui-base/lib/types/InterfaceColor.ts

+3-1
Original file line numberDiff line numberDiff line change
@@ -3,11 +3,13 @@ export const UUIInterfaceColorValues: Readonly<UUIInterfaceColor[]> = [
33
'positive',
44
'warning',
55
'danger',
6+
'invalid',
67
] as const;
78

89
export type UUIInterfaceColor =
910
| ''
1011
| 'default'
1112
| 'positive'
1213
| 'warning'
13-
| 'danger';
14+
| 'danger'
15+
| 'invalid';

‎packages/uui-button/lib/uui-button.element.ts

+6
Original file line numberDiff line numberDiff line change
@@ -435,6 +435,12 @@ export class UUIButtonElement extends UUIFormControlMixin(
435435
--color-emphasis: var(--uui-color-danger-emphasis);
436436
--color-contrast: var(--uui-color-danger-contrast);
437437
}
438+
:host([color='invalid']) #button {
439+
--color: var(--uui-color-invalid);
440+
--color-standalone: var(--uui-color-invalid-standalone);
441+
--color-emphasis: var(--uui-color-invalid-emphasis);
442+
--color-contrast: var(--uui-color-invalid-contrast);
443+
}
438444
:host([disabled]) #button {
439445
--color: var(--uui-color-disabled);
440446
--color-standalone: var(--uui-color-disabled-contrast);

‎packages/uui-button/lib/uui-button.story.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,7 @@ const meta: Meta = {
2020
options: ['default', 'primary', 'secondary', 'outline', 'placeholder'],
2121
},
2222
color: {
23-
options: ['default', 'positive', 'warning', 'danger'],
23+
options: ['default', 'positive', 'warning', 'danger', 'invalid'],
2424
},
2525
type: {
2626
options: ['button', 'submit', 'reset'],
@@ -150,7 +150,13 @@ export const LooksAndColors: Story = {
150150
'outline',
151151
'placeholder',
152152
] as const;
153-
const colors = ['default', 'positive', 'warning', 'danger'] as const;
153+
const colors = [
154+
'default',
155+
'positive',
156+
'warning',
157+
'danger',
158+
'invalid',
159+
] as const;
154160

155161
const uppercaseFirstLetter = (str: string) =>
156162
str.charAt(0).toUpperCase() + str.slice(1);

‎packages/uui-card/lib/uui-card.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ export class UUICardElement extends SelectOnlyMixin(
125125
height: 100%;
126126
z-index: 1;
127127
box-sizing: border-box;
128-
border: var(--uui-card-border-width) solid var(--uui-color-danger);
128+
border: var(--uui-card-border-width) solid var(--uui-color-invalid);
129129
border-radius: var(--uui-border-radius);
130130
}
131131

‎packages/uui-checkbox/lib/uui-checkbox.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -187,7 +187,7 @@ export class UUICheckboxElement extends UUIBooleanInputElement {
187187
:host(:not([pristine])[internals-invalid]) label:hover input:indeterminate:not([disabled]) + #ticker,
188188
:host(:not([pristine])[internals-invalid]) label:focus input:checked + #ticker,
189189
:host(:not([pristine])[internals-invalid]) label:focus input:indeterminate + #ticker {
190-
border: 1px solid var(--uui-color-danger-standalone);
190+
border: 1px solid var(--uui-color-invalid-standalone);
191191
}
192192
193193
:host([disabled]) #ticker {

‎packages/uui-css/lib/custom-properties.story.ts

+1
Original file line numberDiff line numberDiff line change
@@ -115,6 +115,7 @@ export const InterfaceColors = () => {
115115
'--uui-color-positive',
116116
'--uui-color-warning',
117117
'--uui-color-danger',
118+
'--uui-color-invalid',
118119
'--uui-color-disabled',
119120
];
120121
const universal = ['--uui-color-header'];

‎packages/uui-css/lib/custom-properties/colors.css

+5
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,11 @@
6262
--uui-color-danger-standalone: var(--uui-palette-maroon-flush-dark);
6363
--uui-color-danger-contrast: white;
6464

65+
--uui-color-invalid: var(--uui-palette-maroon-flush);
66+
--uui-color-invalid-emphasis: var(--uui-palette-maroon-flush-light);
67+
--uui-color-invalid-standalone: var(--uui-palette-maroon-flush-dark);
68+
--uui-color-invalid-contrast: white;
69+
6570
--uui-color-positive: var(--uui-palette-forest-green);
6671
--uui-color-positive-emphasis: var(--uui-palette-forest-green-light);
6772
--uui-color-positive-standalone: var(--uui-palette-forest-green-dark);

‎packages/uui-form-validation-message/lib/uui-form-validation-message.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -105,7 +105,7 @@ export class UUIFormValidationMessageElement extends LitElement {
105105
static styles = [
106106
css`
107107
#messages {
108-
color: var(--uui-color-danger-standalone);
108+
color: var(--uui-color-invalid-standalone);
109109
}
110110
`,
111111
];

‎packages/uui-input/lib/uui-input.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -432,7 +432,7 @@ export class UUIInputElement extends UUIFormControlMixin(
432432
:host(:not([pristine]):invalid),
433433
/* polyfill support */
434434
:host(:not([pristine])[internals-invalid]) {
435-
border-color: var(--uui-color-danger);
435+
border-color: var(--uui-color-invalid);
436436
}
437437
438438
input {

‎packages/uui-label/lib/uui-label.element.ts

+2-1
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { property } from 'lit/decorators.js';
66
* Label element for Custom Element
77
* @element uui-label
88
* @slot - for the label text.
9+
* @cssprop --uui-validation-color - Color property for the required asterisk.
910
*/
1011
@defineElement('uui-label')
1112
export class UUILabelElement extends LitElement {
@@ -79,7 +80,7 @@ export class UUILabelElement extends LitElement {
7980
}
8081
#required {
8182
display: inline;
82-
color: var(--uui-color-danger);
83+
color: var(--uui-color-invalid);
8384
font-weight: 900;
8485
}
8586
`,

‎packages/uui-radio/lib/uui-radio-group.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -338,7 +338,7 @@ export class UUIRadioGroupElement extends UUIFormControlMixin(LitElement, '') {
338338
:host(:not([pristine]):invalid),
339339
/* polyfill support */
340340
:host(:not([pristine])[internals-invalid]) {
341-
border: 1px solid var(--uui-color-danger-standalone);
341+
border: 1px solid var(--uui-color-invalid-standalone);
342342
}
343343
`,
344344
];

‎packages/uui-range-slider/lib/uui-range-slider.element.ts

+5-5
Original file line numberDiff line numberDiff line change
@@ -734,8 +734,8 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
734734
}
735735
736736
:host([error]) {
737-
--color-interactive: var(--uui-color-danger-standalone);
738-
--color-hover: var(--uui-color-danger);
737+
--color-interactive: var(--uui-color-invalid-standalone);
738+
--color-hover: var(--uui-color-invalid);
739739
}
740740
741741
#range-slider {
@@ -812,11 +812,11 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
812812
}
813813
814814
:host([error]) .color {
815-
background-color: var(--uui-color-danger-standalone);
815+
background-color: var(--uui-color-invalid-standalone);
816816
}
817817
:host([error]) #inner-color-thumb:hover ~ .color,
818818
:host([error]) #inner-color-thumb:focus ~ .color {
819-
background-color: var(--uui-color-danger-emphasis);
819+
background-color: var(--uui-color-invalid-emphasis);
820820
}
821821
822822
/** Steps */
@@ -844,7 +844,7 @@ export class UUIRangeSliderElement extends UUIFormControlMixin(LitElement, '') {
844844
}
845845
846846
:host([error]) .track-step.filled {
847-
fill: var(--uui-color-danger-emphasis);
847+
fill: var(--uui-color-invalid-emphasis);
848848
}
849849
850850
:host #inner-color-thumb.active ~ .step-wrapper .track-step.filled,

‎packages/uui-ref/lib/uui-ref.element.ts

+3-3
Original file line numberDiff line numberDiff line change
@@ -85,10 +85,10 @@ export class UUIRefElement extends SelectOnlyMixin(
8585
}
8686
8787
:host([error]) {
88-
border: 2px solid var(--uui-color-danger);
88+
border: 2px solid var(--uui-color-invalid);
8989
box-shadow:
90-
0 0 4px 0 var(--uui-color-danger),
91-
inset 0 0 2px 0 var(--uui-color-danger);
90+
0 0 4px 0 var(--uui-color-invalid),
91+
inset 0 0 2px 0 var(--uui-color-invalid);
9292
}
9393
9494
:host([standalone]) {

‎packages/uui-select/lib/uui-select.element.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -334,11 +334,11 @@ export class UUISelectElement extends UUIFormControlMixin(LitElement, '') {
334334
}
335335
336336
:host([error]) #native {
337-
border: 1px solid var(--uui-color-danger-standalone);
337+
border: 1px solid var(--uui-color-invalid-standalone);
338338
}
339339
340340
:host([error]) #native[disabled] {
341-
border: 1px solid var(--uui-color-danger-standalone);
341+
border: 1px solid var(--uui-color-invalid-standalone);
342342
}
343343
`,
344344
];

‎packages/uui-slider/lib/uui-slider.element.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -467,10 +467,10 @@ export class UUISliderElement extends UUIFormControlMixin(LitElement, '') {
467467
}
468468
469469
:host(:not([pristine]):invalid) #thumb {
470-
border-color: var(--uui-color-danger-standalone);
470+
border-color: var(--uui-color-invalid-standalone);
471471
}
472472
:host(:not([pristine]):invalid) #thumb:after {
473-
background-color: var(--uui-color-danger);
473+
background-color: var(--uui-color-invalid);
474474
}
475475
476476
// readonly

‎packages/uui-symbol-file-dropzone/lib/uui-symbol-file-dropzone.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@ export class UUISymbolFileDropzoneElement extends LitElement {
4646
}
4747
4848
:host([error]) #upload-icon {
49-
fill: var(--uui-color-danger);
49+
fill: var(--uui-color-invalid);
5050
}
5151
`,
5252
];

‎packages/uui-tag/lib/uui-tag.element.ts

+5
Original file line numberDiff line numberDiff line change
@@ -84,6 +84,11 @@ export class UUITagElement extends LitElement {
8484
--color-standalone: var(--uui-color-danger-standalone);
8585
--color-contrast: var(--uui-color-danger-contrast);
8686
}
87+
:host([color='invalid']) {
88+
--color: var(--uui-color-invalid);
89+
--color-standalone: var(--uui-color-invalid-standalone);
90+
--color-contrast: var(--uui-color-invalid-contrast);
91+
}
8792
8893
:host {
8994
background-color: var(--uui-color-surface);

‎packages/uui-tag/lib/uui-tag.story.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -39,7 +39,7 @@ export const Sizing: Story = {
3939
export const LooksAndColors: Story = {
4040
render: () => {
4141
const looks = ['default', 'primary', 'secondary', 'outline', 'placeholder'];
42-
const colors = ['default', 'positive', 'warning', 'danger'];
42+
const colors = ['default', 'positive', 'warning', 'danger', 'invalid'];
4343

4444
function uppercaseFirstLetter(s: string) {
4545
return s.charAt(0).toUpperCase() + s.slice(1);

‎packages/uui-textarea/lib/uui-textarea.element.ts

+2-2
Original file line numberDiff line numberDiff line change
@@ -278,12 +278,12 @@ export class UUITextareaElement extends UUIFormControlMixin(LitElement, '') {
278278
}
279279
:host([error]) textarea,
280280
:host([error]) textarea[disabled] {
281-
border: 1px solid var(--uui-color-danger) !important;
281+
border: 1px solid var(--uui-color-invalid) !important;
282282
}
283283
:host(:not([pristine]):invalid) textarea,
284284
/* polyfill support */
285285
:host(:not([pristine])[internals-invalid]) textarea {
286-
border-color: var(--uui-color-danger);
286+
border-color: var(--uui-color-invalid);
287287
}
288288
:host([auto-height]) textarea {
289289
resize: none;

‎packages/uui-toast-notification/lib/uui-toast-notification.element.ts

+8-2
Original file line numberDiff line numberDiff line change
@@ -6,6 +6,7 @@ import { css, html, LitElement } from 'lit';
66
import { property, query, state } from 'lit/decorators.js';
77

88
import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
9+
import { UUIInterfaceColor } from '@umbraco-ui/uui-base';
910

1011
/**
1112
* @element uui-toast-notification
@@ -20,12 +21,12 @@ import { UUIToastNotificationEvent } from './UUIToastNotificationEvent';
2021
export class UUIToastNotificationElement extends LitElement {
2122
/**
2223
* Changes the color of the notification to one of the predefined, symbolic colors. Example: set this to danger to indicate errors.
23-
* @type {'' | 'default' | 'positive' | 'warning' | 'danger'}
24+
* @type {UUIInterfaceColor}
2425
* @attr
2526
* @default ""
2627
*/
2728
@property({ reflect: true })
28-
color: '' | 'default' | 'positive' | 'warning' | 'danger' = '';
29+
color: UUIInterfaceColor = '';
2930

3031
private _autoClose: number | null = null;
3132
/**
@@ -351,6 +352,11 @@ export class UUIToastNotificationElement extends LitElement {
351352
color: var(--uui-color-danger-contrast);
352353
border-color: var(--uui-color-danger-standalone);
353354
}
355+
:host([color='invalid']) #toast > div {
356+
background-color: var(--uui-color-invalid);
357+
color: var(--uui-color-invalid-contrast);
358+
border-color: var(--uui-color-invalid-standalone);
359+
}
354360
`,
355361
];
356362
}

‎packages/uui-toast-notification/lib/uui-toast-notification.story.ts

+13-2
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const meta: Meta = {
1515
},
1616
argTypes: {
1717
color: {
18-
options: ['', 'default', 'positive', 'warning', 'danger'],
18+
options: ['', 'default', 'positive', 'warning', 'danger', 'invalid'],
1919
},
2020
headline: { control: { type: 'text' } },
2121
},
@@ -42,7 +42,7 @@ export const Default: Story = {
4242
},
4343
};
4444

45-
export const ErrorStyle: Story = {
45+
export const DangerStyle: Story = {
4646
args: {
4747
headline: 'Document could not be published!',
4848
slot: html`An error occurred while attempting to contact the server. Please
@@ -54,6 +54,17 @@ export const ErrorStyle: Story = {
5454
},
5555
};
5656

57+
export const ErrorStyle: Story = {
58+
args: {
59+
headline: 'Document could not be published!',
60+
slot: html`The data is not valid. Please correct data corrdingly.
61+
<uui-button slot="actions" look="primary" color="invalid"
62+
>Retry</uui-button
63+
>`,
64+
color: 'invalid',
65+
},
66+
};
67+
5768
export const PositiveStyle: Story = {
5869
args: {
5970
headline: 'Document published!',

‎packages/uui-toggle/lib/uui-toggle.element.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -190,7 +190,7 @@ export class UUIToggleElement extends UUIBooleanInputElement {
190190
/* polyfill support */
191191
:host(:not([pristine])[internals-invalid]) #toggle,
192192
:host(:not([pristine])[internals-invalid]) label:hover #toggle {
193-
border: 1px solid var(--uui-color-danger-standalone);
193+
border: 1px solid var(--uui-color-invalid-standalone);
194194
}
195195
`,
196196
];

0 commit comments

Comments
 (0)