Skip to content

fix(TextInputs): use latest material docs to fix icon spacing issues … #262

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Apr 10, 2024
Merged

fix(TextInputs): use latest material docs to fix icon spacing issues … #262

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
2df920b
fix(TextInputs): use latest material docs to fix icon spacing issues …
hobbitronics Apr 10, 2024
2e503e0
remove maxValue default from story
hobbitronics Apr 10, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
50 changes: 18 additions & 32 deletions components/mdc/TextInput/MoneyInput.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,6 +54,7 @@ $: valueNotDivisibleByStep =
(internalValue && (internalValue / Number(step)).toFixed(2) % 1 !== 0) || valueHasTooManyDecPlaces
$: internalValue = Number(value) || 0
$: warn = showWarn
$: value, addOrRemoveInvalidClass(error, element)
$: addOrRemoveInvalidClass(showError || showWarn, element)

onMount(() => {
Expand All @@ -66,31 +67,29 @@ afterUpdate(() => (width = `${element?.offsetWidth}px`))
const focus = (node) => autofocus && node.focus()
</script>

<style>
.material-icons {
color: rgb(133, 140, 148);
position: relative;
top: 0.4rem;
right: 0.6rem;
}
.label-margin {
margin-left: 1.1rem;
}
.mdc-text-field--label-floating .mdc-floating-label {
margin-left: 0;
}
</style>

<label
class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
class="mdc-text-field mdc-text-field--outlined mdc-text-field--with-leading-icon {$$props.class ||
''} textfield-radius"
class:mdc-text-field--no-label={!label}
class:mdc-text-field--disabled={disabled}
class:mdc-text-field--invalid={error}
class:warn
class:showError
bind:this={element}
>
<i class="material-icons mdc-text-field__icon--leading" class:error aria-hidden="true">attach_money</i>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading" />
{#if label}
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" class:error id={labelID}>
{label}
</span>
</span>
{/if}
<span class="mdc-notched-outline__trailing" />
</span>
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
attach_money
</i>
<input
{step}
type="number"
Expand All @@ -115,21 +114,8 @@ const focus = (node) => autofocus && node.focus()
{required}
/>
{#if showErrorIcon}
<span class="mdc-text-field__affix mdc-text-field__affix--suffix">
<i class="material-icons error" aria-hidden="true"> error</i>
</span>
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true"> error</i>
{/if}
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading" />
{#if label}
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label label-margin" class:error id={labelID}>
{label}
</span>
</span>
{/if}
<span class="mdc-notched-outline__trailing" />
</span>
</label>
<div class="mdc-text-field-helper-line" style="width: {width};">
<div
Expand Down
51 changes: 19 additions & 32 deletions components/mdc/TextInput/TextField.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ $: hasExceededMaxLength = maxlength && value.length > maxlength
$: error = hasExceededMaxLength || (hasFocused && hasBlurred && required && !value)
$: warn = showWarn
$: showCounter = maxlength && value.length / maxlength > 0.85
$: value && addOrRemoveInvalidClass(error, element)
$: value, addOrRemoveInvalidClass(error, element)
$: addOrRemoveInvalidClass(showError || showWarn, element)

onMount(() => {
Expand All @@ -58,30 +58,31 @@ afterUpdate(() => {
const focus = (node) => autofocus && node.focus()
</script>

<style>
.material-icons {
color: rgb(133, 140, 148);
position: relative;
top: 0.4rem;
right: 0.6rem;
}
.label-margin {
margin-left: 1.1rem;
}
.mdc-text-field--label-floating .mdc-floating-label {
margin-left: 0;
}
</style>

<label
class="mdc-text-field mdc-text-field--outlined {$$props.class || ''} textfield-radius"
class:mdc-text-field--no-label={!label}
class:mdc-text-field--disabled={disabled}
class:warn
class:showError
class:mdc-text-field--with-leading-icon={icon}
bind:this={element}
>
<i class="material-icons mdc-text-field__icon--leading" class:error aria-hidden="true"> {icon}</i>
<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading" />
{#if label}
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" class:error id={labelID}>
{label}
</span>
</span>
{/if}
<span class="mdc-notched-outline__trailing" />
</span>
{#if icon}
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--leading" class:error aria-hidden="true">
{icon}</i
>
{/if}
<input
type="text"
class="mdc-text-field__input"
Expand All @@ -104,22 +105,8 @@ const focus = (node) => autofocus && node.focus()
{placeholder}
/>
{#if hasExceededMaxLength}
<span class="mdc-text-field__affix mdc-text-field__affix--suffix"
><i class="material-icons mdc-text-field__icon--trailing error" aria-hidden="true">error</i></span
>
<i class="material-icons mdc-text-field__icon mdc-text-field__icon--trailing error" aria-hidden="true">error</i>
{/if}

<span class="mdc-notched-outline">
<span class="mdc-notched-outline__leading" />
{#if label}
<span class="mdc-notched-outline__notch">
<span class="mdc-floating-label" class:label-margin={icon} class:error id={labelID}>
{label}
</span>
</span>
{/if}
<span class="mdc-notched-outline__trailing" />
</span>
</label>
<div class="mdc-text-field-helper-line" style="width: {width};">
<div
Expand Down
1 change: 0 additions & 1 deletion stories/MoneyInput.stories.svelte
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,6 @@ const args = {
'on:keypress': (event) => (lastKey = event.key),
'on:keyup': (event) => console.log('keyup', event),
class: '', //will only work with global class
maxValue: 100,
step: '.01',
}
$: arrayOfValues.forEach((v) =>
Expand Down