Skip to content

Commit e960d3f

Browse files
hobbitronicshobbitronics
authored
Merge pull request #263 from silinternational/develop
v11.2.0
2 parents d5c9b16 + 8017412 commit e960d3f

File tree

12 files changed

+140
-72
lines changed

12 files changed

+140
-72
lines changed

‎CHANGELOG.md‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,17 @@
22
All notable changes to this project will be documented in this file.
33
The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/) and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html), enforced with [semantic-release](https://github.com/semantic-release/semantic-release).
44

5+
## [11.2.0](https://github.com/silinternational/ui-components/compare/v11.1.2...v11.2.0) (2024-04-09)
6+
7+
8+
### Added
9+
10+
* **TextInputs:** add showError, showWarn props to MoneyInput, TextArea and TextField ([c143895](https://github.com/silinternational/ui-components/commit/c143895280c354e586e20c614919b1130d3e66e6))
11+
12+
### Fixed
13+
14+
* **TextInputs:** use latest material docs to fix icon spacing issues on TextField and MoneyInput ([2df920b](https://github.com/silinternational/ui-components/commit/2df920bf89df513213bc99067a565112850d5439))
15+
516
### [11.1.2](https://github.com/silinternational/ui-components/compare/v11.1.1...v11.1.2) (2024-04-08)
617

718

‎components/mdc/TextInput/MoneyInput.svelte‎

Lines changed: 27 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<!-- https://github.com/material-components/material-components-web/tree/master/packages/mdc-textfield -->
22
<script>
33
/** A Svelte component that represents a text input for money values. */
4-
import { getDecimalPlacesLength } from './helpers'
4+
import { addOrRemoveInvalidClass, getDecimalPlacesLength } from './helpers'
55
import { generateRandomID } from '../../../random'
66
import { MDCTextField } from '@material/textfield'
77
import { afterUpdate, onMount } from 'svelte'
@@ -28,6 +28,10 @@ export let disabled = false
2828
export let required = false
2929
/** @type {string} The description to display below the input. */
3030
export let description = ''
31+
/** @type {boolean} lets the component know to use error class. */
32+
export let showError = false
33+
/** @type {boolean} lets the component know to use warn class. */
34+
export let showWarn = false
3135
3236
const labelID = generateRandomID('text-label-')
3337
@@ -49,6 +53,9 @@ $: valueHasTooManyDecPlaces = getDecimalPlacesLength(internalValue) > getDecimal
4953
$: valueNotDivisibleByStep =
5054
(internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0) || valueHasTooManyDecPlaces
5155
$: internalValue = Number(value) || 0
56+
$: warn = showWarn
57+
$: value, addOrRemoveInvalidClass(error, element)
58+
$: addOrRemoveInvalidClass(showError || showWarn, element)
5259
5360
onMount(() => {
5461
mdcTextField = new MDCTextField(element)
@@ -60,29 +67,29 @@ afterUpdate(() => (width = `${element?.offsetWidth}px`))
6067
const focus = (node) => autofocus && node.focus()
6168
</script>
6269
63-
<style>
64-
.material-icons {
65-
color: rgb(133, 140, 148);
66-
position: relative;
67-
top: 0.4rem;
68-
right: 0.6rem;
69-
}
70-
.label-margin {
71-
margin-left: 1.1rem;
72-
}
73-
.mdc-text-field--label-floating .mdc-floating-label {
74-
margin-left: 0;
75-
}
76-
</style>
77-
7870
<label
79-
class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
71+
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon {$$props.class ||
72+
''} textfield-radius"
8073
class:mdc-text-field--no-label={!label}
8174
class:mdc-text-field--disabled={disabled}
82-
class:mdc-text-field--invalid={error}
75+
class:warn
76+
class:showError
8377
bind:this={element}
8478
>
85-
<i class="material-icons" class:error aria-hidden="true">attach_money</i>
79+
<span class="mdc-notched-outline">
80+
<span class="mdc-notched-outline__leading" />
81+
{#if label}
82+
<span class="mdc-notched-outline__notch">
83+
<span class="mdc-floating-label" class:error id={labelID}>
84+
{label}
85+
</span>
86+
</span>
87+
{/if}
88+
<span class="mdc-notched-outline__trailing" />
89+
</span>
90+
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
91+
attach_money
92+
</i>
8693
<input
8794
{step}
8895
type="number"
@@ -107,21 +114,8 @@ const focus = (node) => autofocus && node.focus()
107114
{required}
108115
/>
109116
{#if showErrorIcon}
110-
<span class="mdc-text-field__affix mdc-text-field__affix--suffix">
111-
<i class="material-icons error" aria-hidden="true"> error</i>
112-
</span>
117+
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true"> error</i>
113118
{/if}
114-
<span class="mdc-notched-outline">
115-
<span class="mdc-notched-outline__leading" />
116-
{#if label}
117-
<span class="mdc-notched-outline__notch">
118-
<span class="mdc-floating-label label-margin" class:error id={labelID}>
119-
{label}
120-
</span>
121-
</span>
122-
{/if}
123-
<span class="mdc-notched-outline__trailing" />
124-
</span>
125119
</label>
126120
<div class="mdc-text-field-helper-line" style="width: {width};">
127121
<div

‎components/mdc/TextInput/TextArea.svelte‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export let required = false
2525
export let description = ''
2626
/** @type {string} The name of the textarea field. */
2727
export let name = ''
28+
/** @type {boolean} lets the component know to use error class. */
29+
export let showError = false
30+
/** @type {boolean} lets the component know to use warn class. */
31+
export let showWarn = false
2832
2933
const labelID = generateRandomID('textarea-label-')
3034
@@ -37,7 +41,9 @@ let hasBlurred = false
3741
$: hasExceededMaxLength = maxlength && value.length > maxlength
3842
$: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && valueIsEmpty)
3943
$: valueIsEmpty = value === ' ' || !value
44+
$: warn = showWarn
4045
$: !valueIsEmpty && addOrRemoveInvalidClass(error, element)
46+
$: addOrRemoveInvalidClass(showError || showWarn, element)
4147
4248
onMount(() => {
4349
resize()
@@ -78,6 +84,8 @@ label {
7884
class:mdc-text-field--no-label={!label}
7985
class:mdc-text-field--label-floating={label}
8086
class:mdc-text-field--with-internal-counter={maxlength}
87+
class:warn
88+
class:showError
8189
bind:this={element}
8290
>
8391
<textarea

‎components/mdc/TextInput/TextField.svelte‎

Lines changed: 27 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,10 @@ export let icon = ''
2525
export let description = ''
2626
/** @type {string} The name of the text input field. */
2727
export let name = ''
28+
/** @type {boolean} lets the component know to use error class. */
29+
export let showError = false
30+
/** @type {boolean} lets the component know to use warn class. */
31+
export let showWarn = false
2832
2933
const labelID = generateRandomID('text-label-')
3034
@@ -37,8 +41,10 @@ let hasBlurred = false
3741
$: mdcTextField.value = value
3842
$: hasExceededMaxLength = maxlength && value.length > maxlength
3943
$: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && !value)
44+
$: warn = showWarn
4045
$: showCounter = maxlength && value.length / maxlength > 0.85
41-
$: value && addOrRemoveInvalidClass(error, element)
46+
$: value, addOrRemoveInvalidClass(error, element)
47+
$: addOrRemoveInvalidClass(showError || showWarn, element)
4248
4349
onMount(() => {
4450
mdcTextField = new MDCTextField(element)
@@ -52,28 +58,31 @@ afterUpdate(() => {
5258
const focus = (node) => autofocus && node.focus()
5359
</script>
5460
55-
<style>
56-
.material-icons {
57-
color: rgb(133, 140, 148);
58-
position: relative;
59-
top: 0.4rem;
60-
right: 0.6rem;
61-
}
62-
.label-margin {
63-
margin-left: 1.1rem;
64-
}
65-
.mdc-text-field--label-floating .mdc-floating-label {
66-
margin-left: 0;
67-
}
68-
</style>
69-
7061
<label
7162
class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
7263
class:mdc-text-field--no-label={!label}
7364
class:mdc-text-field--disabled={disabled}
65+
class:warn
66+
class:showError
67+
class:mdc-text-field--with-leading-icon={icon}
7468
bind:this={element}
7569
>
76-
<i class="material-icons" class:error aria-hidden="true">{icon}</i>
70+
<span class="mdc-notched-outline">
71+
<span class="mdc-notched-outline__leading" />
72+
{#if label}
73+
<span class="mdc-notched-outline__notch">
74+
<span class="mdc-floating-label" class:error id={labelID}>
75+
{label}
76+
</span>
77+
</span>
78+
{/if}
79+
<span class="mdc-notched-outline__trailing" />
80+
</span>
81+
{#if icon}
82+
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
83+
{icon}</i
84+
>
85+
{/if}
7786
<input
7887
type="text"
7988
class="mdc-text-field__input"
@@ -96,22 +105,8 @@ const focus = (node) => autofocus && node.focus()
96105
{placeholder}
97106
/>
98107
{#if hasExceededMaxLength}
99-
<span class="mdc-text-field__affix mdc-text-field__affix--suffix"
100-
><i class="material-icons error" aria-hidden="true">error</i></span
101-
>
108+
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true">error</i>
102109
{/if}
103-
104-
<span class="mdc-notched-outline">
105-
<span class="mdc-notched-outline__leading" />
106-
{#if label}
107-
<span class="mdc-notched-outline__notch">
108-
<span class="mdc-floating-label" class:label-margin={icon} class:error id={labelID}>
109-
{label}
110-
</span>
111-
</span>
112-
{/if}
113-
<span class="mdc-notched-outline__trailing" />
114-
</span>
115110
</label>
116111
<div class="mdc-text-field-helper-line" style="width: {width};">
117112
<div

‎components/mdc/TextInput/_index.scss‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,10 +2,19 @@
22
//@use "@material/line-ripple/mdc-line-ripple"; // Only needed if using ripple.
33
@use '@material/notched-outline/mdc-notched-outline';
44
@use '@material/textfield';
5+
@use '@material/textfield/icon';
56

67
@include textfield.core-styles;
8+
@include icon.icon-core-styles;
9+
10+
:root {
11+
--mdc-theme-error: #c30000;
12+
--mdc-theme-warn: #f48c03;
13+
}
714

815
$radius: 8px !default;
16+
$error: var(--mdc-theme-status-error, var(--mdc-theme-error)) !default;
17+
$warn: var(--mdc-theme-status-warn, var(--mdc-theme-warn)) !default;
918

1019
/* TODO should be cleaned up later, this code is in multiple files but only needs to be in the master css*/
1120

@@ -20,6 +29,30 @@ $radius: 8px !default;
2029
.error {
2130
color: var(--mdc-theme-status-error, var(--mdc-theme-error)) !important;
2231
}
32+
.showError.mdc-text-field--invalid {
33+
@include textfield.outline-color($error);
34+
@include textfield.hover-outline-color($error);
35+
@include textfield.ink-color($error);
36+
@include textfield.placeholder-color($error);
37+
@include textfield.label-color($error);
38+
@include icon.leading-icon-color($error);
39+
@include icon.trailing-icon-color($error);
40+
@include textfield.caret-color($error);
41+
@include textfield.prefix-color($error);
42+
@include textfield.suffix-color($error);
43+
}
44+
.warn.mdc-text-field--invalid {
45+
@include textfield.outline-color($warn);
46+
@include textfield.hover-outline-color($warn);
47+
@include textfield.ink-color($warn);
48+
@include textfield.placeholder-color($warn);
49+
@include textfield.label-color($warn);
50+
@include icon.leading-icon-color($warn);
51+
@include icon.trailing-icon-color($warn);
52+
@include textfield.caret-color($warn);
53+
@include textfield.prefix-color($warn);
54+
@include textfield.suffix-color($warn);
55+
}
2356
.required {
2457
color: var(--mdc-required-input, rgba(0, 0, 0, 0.6));
2558
}

‎index.d.ts‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -217,6 +217,8 @@ declare module '@silintl/ui-components' {
217217
step?: number | string
218218
description?: string
219219
class?: string
220+
showWarn?: boolean
221+
showError?: boolean
220222
}
221223
export class MoneyInput extends SvelteComponentTyped<MoneyInputProps> {}
222224

@@ -285,6 +287,8 @@ declare module '@silintl/ui-components' {
285287
rtl?: boolean
286288
description?: string
287289
class?: string
290+
showWarn?: boolean
291+
showError?: boolean
288292
}
289293
export class TextArea extends SvelteComponentTyped<TextAreaProps> {}
290294

@@ -300,6 +304,8 @@ declare module '@silintl/ui-components' {
300304
required?: boolean
301305
description?: string
302306
class?: string
307+
showWarn?: boolean
308+
showError?: boolean
303309
}
304310
export class TextField extends SvelteComponentTyped<TextFieldProps> {}
305311

‎package-lock.json‎

Lines changed: 14 additions & 5 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@silintl/ui-components",
3-
"version": "11.1.2",
3+
"version": "11.2.0",
44
"description": "Reusable Svelte components for some internal applications",
55
"main": "index.mjs",
66
"module": "index.mjs",

0 commit comments

Comments
 (0)