From bed5dd5f2f68fe6262228c2d6dd6f427fa2ecdaa Mon Sep 17 00:00:00 2001 From: Matheus Date: Mon, 24 Jun 2024 15:21:06 -0300 Subject: [PATCH 01/18] feat: add text area component --- src/components/TextArea/index.js | 67 ++++++++++++++++++++++++++++++ src/components/TextArea/index.scss | 55 ++++++++++++++++++++++++ src/stories/TextArea.stories.js | 26 ++++++++++++ 3 files changed, 148 insertions(+) create mode 100644 src/components/TextArea/index.js create mode 100644 src/components/TextArea/index.scss create mode 100644 src/stories/TextArea.stories.js diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js new file mode 100644 index 00000000..ac44c6d5 --- /dev/null +++ b/src/components/TextArea/index.js @@ -0,0 +1,67 @@ +import { Component } from 'pet-dex-utilities'; +import './index.scss'; + +const events = [ + 'setName', + 'setPlaceholder', + 'setMaxLength', + 'setRequired', + 'error', +]; + +const html = ` +
+ + +
+`; + +export default function TextArea({ name, placeholder, maxLength, required }) { + Component.call(this, { html, events }); + const $textarea = this.selected.get('textarea'); + + this.setName(name); + this.setPlaceholder(placeholder); + this.setMaxLength(maxLength); + this.setRequired(required); + + $textarea.addEventListener('focus', () => + $textarea.classList.remove('error'), + ); + $textarea.addEventListener('input', () => this.autoResize()); + window.addEventListener('resize', () => this.autoResize()); +} + +TextArea.prototype = Object.assign(TextArea, Component.prototype, { + setName(name = '') { + this.selected.get('textarea').name = name; + this.emit('setName', name); + }, + setPlaceholder(placeholder = '') { + this.selected.get('textarea').placeholder = placeholder; + this.emit('setPlaceholder', placeholder); + }, + setMaxLength(maxLength) { + if (maxLength) { + this.selected.get('textarea').maxLength = maxLength; + } + this.emit('setMaxLength', maxLength); + }, + setRequired(required = false) { + this.selected.get('textarea').required = required; + this.emit('setRequired', required); + }, + error() { + this.selected.get('textarea').classList.add('error'); + this.emit('error'); + }, + autoResize() { + const { value } = this.selected.get('textarea'); + + this.selected.get('resize-trigger').innerText = value; + + this.selected.get('textarea').style.height = 'auto'; + this.selected.get('textarea').style.height = + `${this.selected.get('resize-trigger').offsetHeight}px`; + }, +}); diff --git a/src/components/TextArea/index.scss b/src/components/TextArea/index.scss new file mode 100644 index 00000000..6c7409a9 --- /dev/null +++ b/src/components/TextArea/index.scss @@ -0,0 +1,55 @@ +@use '~styles/fonts.scss' as fonts; +@use '~styles/colors.scss' as colors; + +.textarea-container { + position: relative; + + &__textarea, + &__resize-trigger { + width: 100%; + + font-family: 'Poppins', sans-serif; + font-size: fonts.$sm; + line-height: 1; + } + + &__textarea { + position: relative; + z-index: 1; + + padding-bottom: 1.4rem; + + outline-color: transparent; + + border: unset; + border-bottom: 0.1rem solid colors.$gray400; + + overflow: hidden; + + resize: none; + + transition: 0.2s ease-in-out outline; + + &::placeholder { + color: colors.$gray400; + } + + &:focus { + outline-color: colors.$primary200; + } + + &.error { + background: colors.$error100; + color: rgb(255, 255, 255); + } + } + + &__resize-trigger { + position: absolute; + top: 0; + + display: block; + + visibility: hidden; + } +} diff --git a/src/stories/TextArea.stories.js b/src/stories/TextArea.stories.js new file mode 100644 index 00000000..ba3f69d0 --- /dev/null +++ b/src/stories/TextArea.stories.js @@ -0,0 +1,26 @@ +import Textarea from '../components/TextArea'; + +export default { + title: 'Components/TextArea', + render: (args) => { + const textarea = new Textarea(args); + const $container = document.createElement('div'); + textarea.mount($container); + + return $container; + }, + argTypes: { + name: { control: 'text', default: '' }, + placeholder: { control: 'text', default: '' }, + maxLength: { control: 'number', default: '' }, + required: { control: 'boolean', default: false }, + }, +}; + +export const Default = { + args: { + name: 'textarea', + placeholder: 'Escreva o cuidado especial', + required: true, + }, +}; From 9a3d2c7bca935b1ebb94f7054f21bf497fe3e185 Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 25 Jun 2024 11:20:25 -0300 Subject: [PATCH 02/18] refactor: use existing color from color file --- src/components/TextArea/index.scss | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/src/components/TextArea/index.scss b/src/components/TextArea/index.scss index 6c7409a9..82251e78 100644 --- a/src/components/TextArea/index.scss +++ b/src/components/TextArea/index.scss @@ -14,22 +14,22 @@ } &__textarea { - position: relative; - z-index: 1; + overflow: hidden; padding-bottom: 1.4rem; - outline-color: transparent; - border: unset; border-bottom: 0.1rem solid colors.$gray400; - overflow: hidden; + position: relative; + z-index: 1; - resize: none; + outline-color: transparent; transition: 0.2s ease-in-out outline; + resize: none; + &::placeholder { color: colors.$gray400; } @@ -39,17 +39,18 @@ } &.error { + color: colors.$secondary100; + background: colors.$error100; - color: rgb(255, 255, 255); } } &__resize-trigger { + display: block; + position: absolute; top: 0; - display: block; - visibility: hidden; } } From 4875cc3ddcee04af0009fcd61a6bb7629aadeeb1 Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 20:33:47 -0300 Subject: [PATCH 03/18] refactor: remove container class --- src/components/TextArea/index.js | 6 +++--- src/components/TextArea/index.scss | 10 +++++----- 2 files changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index ac44c6d5..942faf38 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -10,9 +10,9 @@ const events = [ ]; const html = ` -
- - +
+ +
`; diff --git a/src/components/TextArea/index.scss b/src/components/TextArea/index.scss index 82251e78..3358b6f7 100644 --- a/src/components/TextArea/index.scss +++ b/src/components/TextArea/index.scss @@ -1,11 +1,11 @@ @use '~styles/fonts.scss' as fonts; @use '~styles/colors.scss' as colors; -.textarea-container { +.textarea { position: relative; - &__textarea, - &__resize-trigger { + &__input, + &__trigger { width: 100%; font-family: 'Poppins', sans-serif; @@ -13,7 +13,7 @@ line-height: 1; } - &__textarea { + &__input { overflow: hidden; padding-bottom: 1.4rem; @@ -45,7 +45,7 @@ } } - &__resize-trigger { + &__trigger { display: block; position: absolute; From 6022d6b5cb21dc9a1efb04793a83569c4aa016b3 Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 20:37:39 -0300 Subject: [PATCH 04/18] =?UTF-8?q?refactor:=20add=20default=20values=20?= =?UTF-8?q?=E2=80=8B=E2=80=8Bfor=20parameters?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/components/TextArea/index.js | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 942faf38..f01cc146 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -16,7 +16,12 @@ const html = `
`; -export default function TextArea({ name, placeholder, maxLength, required }) { +export default function TextArea({ + name = '', + placeholder = '', + maxLength = 524288, + required = false, +}) { Component.call(this, { html, events }); const $textarea = this.selected.get('textarea'); From 0ec3f34647ea674575257dbe829ccbf9988ab5c0 Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 20:40:36 -0300 Subject: [PATCH 05/18] refactor: fix object assign --- src/components/TextArea/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index f01cc146..e19cf508 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -37,7 +37,7 @@ export default function TextArea({ window.addEventListener('resize', () => this.autoResize()); } -TextArea.prototype = Object.assign(TextArea, Component.prototype, { +TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { setName(name = '') { this.selected.get('textarea').name = name; this.emit('setName', name); From d68b5557f97ba3300c112f295f7b930d6302f9fb Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 21:16:18 -0300 Subject: [PATCH 06/18] refactor: clear events --- src/components/TextArea/index.js | 20 +++++++++++++++----- 1 file changed, 15 insertions(+), 5 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index e19cf508..58bf1230 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -30,11 +30,21 @@ export default function TextArea({ this.setMaxLength(maxLength); this.setRequired(required); - $textarea.addEventListener('focus', () => - $textarea.classList.remove('error'), - ); - $textarea.addEventListener('input', () => this.autoResize()); - window.addEventListener('resize', () => this.autoResize()); + this.listen('mount', () => { + $textarea.addEventListener('focus', () => + $textarea.classList.remove('error'), + ); + $textarea.addEventListener('input', () => this.autoResize()); + window.addEventListener('resize', () => this.autoResize()); + }); + + this.listen('unmount', () => { + $textarea.removeEventListener('focus', () => + $textarea.classList.remove('error'), + ); + $textarea.removeEventListener('input', () => this.autoResize()); + window.removeEventListener('resize', () => this.autoResize()); + }); } TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { From 5a59be046f0561fe94deece68413477f0675a39f Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 21:20:37 -0300 Subject: [PATCH 07/18] refactor: add the font family to the font style file --- src/components/TextArea/index.scss | 2 +- src/styles/fonts.scss | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/src/components/TextArea/index.scss b/src/components/TextArea/index.scss index 3358b6f7..f2ed4352 100644 --- a/src/components/TextArea/index.scss +++ b/src/components/TextArea/index.scss @@ -8,7 +8,7 @@ &__trigger { width: 100%; - font-family: 'Poppins', sans-serif; + font-family: fonts.$fifthFont; font-size: fonts.$sm; line-height: 1; } diff --git a/src/styles/fonts.scss b/src/styles/fonts.scss index 6c510fff..e63a9c76 100644 --- a/src/styles/fonts.scss +++ b/src/styles/fonts.scss @@ -2,6 +2,7 @@ $primaryFont: 'Montserrat', sans-serif; $secondaryFont: 'Wix Madefor Display', sans-serif; $tertiaryFont: 'Helvetica', sans-serif; $fourthFont: 'Noto Sans', sans-serif; +$fifthFont: 'Poppins', sans-serif; $xs: 1.4rem; $sm: 1.6rem; From b8833e5ba25cbca767dcf7bd5069dff3722d0c6d Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 21:22:54 -0300 Subject: [PATCH 08/18] refactor: fix storybook argTypes --- src/stories/TextArea.stories.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/stories/TextArea.stories.js b/src/stories/TextArea.stories.js index ba3f69d0..096deadd 100644 --- a/src/stories/TextArea.stories.js +++ b/src/stories/TextArea.stories.js @@ -12,7 +12,7 @@ export default { argTypes: { name: { control: 'text', default: '' }, placeholder: { control: 'text', default: '' }, - maxLength: { control: 'number', default: '' }, + maxLength: { control: 'number', default: 524288 }, required: { control: 'boolean', default: false }, }, }; From 13231c13f5b879641966808345660b0fb61ee8fc Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 21:24:35 -0300 Subject: [PATCH 09/18] refactor: fix default args to max length --- src/components/TextArea/index.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 58bf1230..05eadde4 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -56,7 +56,7 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.selected.get('textarea').placeholder = placeholder; this.emit('setPlaceholder', placeholder); }, - setMaxLength(maxLength) { + setMaxLength(maxLength = 524288) { if (maxLength) { this.selected.get('textarea').maxLength = maxLength; } From eedc40f4b5e9d71c5d6b51fe7aabff6ba793a2e7 Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 22:25:19 -0300 Subject: [PATCH 10/18] refactor: change event names to follow the pattern --- src/components/TextArea/index.js | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 05eadde4..19b60071 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -2,10 +2,10 @@ import { Component } from 'pet-dex-utilities'; import './index.scss'; const events = [ - 'setName', - 'setPlaceholder', - 'setMaxLength', - 'setRequired', + 'name:change', + 'placeholder:change', + 'maxLength:change', + 'required:change', 'error', ]; @@ -50,21 +50,21 @@ export default function TextArea({ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { setName(name = '') { this.selected.get('textarea').name = name; - this.emit('setName', name); + this.emit('name:change', name); }, setPlaceholder(placeholder = '') { this.selected.get('textarea').placeholder = placeholder; - this.emit('setPlaceholder', placeholder); + this.emit('placeholder:change', placeholder); }, setMaxLength(maxLength = 524288) { if (maxLength) { this.selected.get('textarea').maxLength = maxLength; } - this.emit('setMaxLength', maxLength); + this.emit('maxLength:change', maxLength); }, setRequired(required = false) { this.selected.get('textarea').required = required; - this.emit('setRequired', required); + this.emit('required:change', required); }, error() { this.selected.get('textarea').classList.add('error'); From 3efa25b6ee413b58a9588d06e07bef18a61e803f Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 22:34:10 -0300 Subject: [PATCH 11/18] refactor: fix BEM --- src/components/TextArea/index.js | 6 +++--- src/components/TextArea/index.scss | 2 +- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 19b60071..3ba2060b 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -32,7 +32,7 @@ export default function TextArea({ this.listen('mount', () => { $textarea.addEventListener('focus', () => - $textarea.classList.remove('error'), + $textarea.classList.remove('textarea__input--error'), ); $textarea.addEventListener('input', () => this.autoResize()); window.addEventListener('resize', () => this.autoResize()); @@ -40,7 +40,7 @@ export default function TextArea({ this.listen('unmount', () => { $textarea.removeEventListener('focus', () => - $textarea.classList.remove('error'), + $textarea.classList.remove('textarea__input--error'), ); $textarea.removeEventListener('input', () => this.autoResize()); window.removeEventListener('resize', () => this.autoResize()); @@ -67,7 +67,7 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.emit('required:change', required); }, error() { - this.selected.get('textarea').classList.add('error'); + this.selected.get('textarea').classList.add('textarea__input--error'); this.emit('error'); }, autoResize() { diff --git a/src/components/TextArea/index.scss b/src/components/TextArea/index.scss index f2ed4352..f9912465 100644 --- a/src/components/TextArea/index.scss +++ b/src/components/TextArea/index.scss @@ -38,7 +38,7 @@ outline-color: colors.$primary200; } - &.error { + &--error { color: colors.$secondary100; background: colors.$error100; From 58ce7dc702fabce2911a2c79a2d1083a446e1fa6 Mon Sep 17 00:00:00 2001 From: Matheus Date: Wed, 26 Jun 2024 22:40:09 -0300 Subject: [PATCH 12/18] refactor: remove public method --- src/components/TextArea/index.js | 25 ++++++++++++------------- 1 file changed, 12 insertions(+), 13 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 3ba2060b..7d06d022 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -24,26 +24,34 @@ export default function TextArea({ }) { Component.call(this, { html, events }); const $textarea = this.selected.get('textarea'); + const $resizeTrigger = this.selected.get('resize-trigger'); this.setName(name); this.setPlaceholder(placeholder); this.setMaxLength(maxLength); this.setRequired(required); + function autoResize() { + $resizeTrigger.innerText = $textarea.value; + + $textarea.style.height = 'auto'; + $textarea.style.height = `${$resizeTrigger.offsetHeight}px`; + } + this.listen('mount', () => { $textarea.addEventListener('focus', () => $textarea.classList.remove('textarea__input--error'), ); - $textarea.addEventListener('input', () => this.autoResize()); - window.addEventListener('resize', () => this.autoResize()); + $textarea.addEventListener('input', autoResize); + window.addEventListener('resize', autoResize); }); this.listen('unmount', () => { $textarea.removeEventListener('focus', () => $textarea.classList.remove('textarea__input--error'), ); - $textarea.removeEventListener('input', () => this.autoResize()); - window.removeEventListener('resize', () => this.autoResize()); + $textarea.removeEventListener('input', autoResize); + window.removeEventListener('resize', autoResize); }); } @@ -70,13 +78,4 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.selected.get('textarea').classList.add('textarea__input--error'); this.emit('error'); }, - autoResize() { - const { value } = this.selected.get('textarea'); - - this.selected.get('resize-trigger').innerText = value; - - this.selected.get('textarea').style.height = 'auto'; - this.selected.get('textarea').style.height = - `${this.selected.get('resize-trigger').offsetHeight}px`; - }, }); From 67a3baf5b6361c9cbb00a2dd29449171015a4c66 Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 2 Jul 2024 14:32:45 -0300 Subject: [PATCH 13/18] refactor: remove max length check --- src/components/TextArea/index.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 7d06d022..fd637923 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -65,9 +65,7 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.emit('placeholder:change', placeholder); }, setMaxLength(maxLength = 524288) { - if (maxLength) { - this.selected.get('textarea').maxLength = maxLength; - } + this.selected.get('textarea').maxLength = maxLength; this.emit('maxLength:change', maxLength); }, setRequired(required = false) { From 6d692bbfdf5b0c32518be5a97f607469e1927114 Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 2 Jul 2024 14:35:44 -0300 Subject: [PATCH 14/18] refactor: add require to true by default --- src/components/TextArea/index.js | 4 ++-- src/stories/TextArea.stories.js | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index fd637923..00cc32b5 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -20,7 +20,7 @@ export default function TextArea({ name = '', placeholder = '', maxLength = 524288, - required = false, + required = true, }) { Component.call(this, { html, events }); const $textarea = this.selected.get('textarea'); @@ -68,7 +68,7 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.selected.get('textarea').maxLength = maxLength; this.emit('maxLength:change', maxLength); }, - setRequired(required = false) { + setRequired(required = true) { this.selected.get('textarea').required = required; this.emit('required:change', required); }, diff --git a/src/stories/TextArea.stories.js b/src/stories/TextArea.stories.js index 096deadd..7d30561a 100644 --- a/src/stories/TextArea.stories.js +++ b/src/stories/TextArea.stories.js @@ -13,7 +13,7 @@ export default { name: { control: 'text', default: '' }, placeholder: { control: 'text', default: '' }, maxLength: { control: 'number', default: 524288 }, - required: { control: 'boolean', default: false }, + required: { control: 'boolean', default: true }, }, }; From 57c758c08955ce2ae4f5e13b92432cffa40b3b46 Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 2 Jul 2024 15:23:56 -0300 Subject: [PATCH 15/18] refactor: add default max length value for Infinity --- src/components/TextArea/index.js | 12 +++++++----- 1 file changed, 7 insertions(+), 5 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 00cc32b5..7904c323 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -19,7 +19,7 @@ const html = ` export default function TextArea({ name = '', placeholder = '', - maxLength = 524288, + maxLength, required = true, }) { Component.call(this, { html, events }); @@ -28,8 +28,8 @@ export default function TextArea({ this.setName(name); this.setPlaceholder(placeholder); - this.setMaxLength(maxLength); this.setRequired(required); + if (maxLength) this.setMaxLength(maxLength); function autoResize() { $resizeTrigger.innerText = $textarea.value; @@ -64,9 +64,11 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.selected.get('textarea').placeholder = placeholder; this.emit('placeholder:change', placeholder); }, - setMaxLength(maxLength = 524288) { - this.selected.get('textarea').maxLength = maxLength; - this.emit('maxLength:change', maxLength); + setMaxLength(maxLength = Infinity) { + if (maxLength) { + this.selected.get('textarea').maxLength = maxLength; + this.emit('maxLength:change', maxLength); + } }, setRequired(required = true) { this.selected.get('textarea').required = required; From 8fa8f2e1154ca4f0e2376db610db3c3b94b4f42e Mon Sep 17 00:00:00 2001 From: Matheus Date: Mon, 8 Jul 2024 13:10:08 -0300 Subject: [PATCH 16/18] refactor: remove infinite as maximum size for textarea --- src/components/TextArea/index.js | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 7904c323..71a0bc20 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -64,11 +64,13 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.selected.get('textarea').placeholder = placeholder; this.emit('placeholder:change', placeholder); }, - setMaxLength(maxLength = Infinity) { - if (maxLength) { - this.selected.get('textarea').maxLength = maxLength; - this.emit('maxLength:change', maxLength); + setMaxLength(maxLength) { + if (!maxLength) { + this.selected.get('textarea').removeAttribute('maxlength'); } + + this.selected.get('textarea').maxLength = maxLength; + this.emit('maxLength:change', maxLength); }, setRequired(required = true) { this.selected.get('textarea').required = required; From bc6f3638beab4c62c030b5ace87155080f87c212 Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 9 Jul 2024 15:00:27 -0300 Subject: [PATCH 17/18] chore: fix parsing error eslint --- .eslintrc.json | 3 +++ 1 file changed, 3 insertions(+) diff --git a/.eslintrc.json b/.eslintrc.json index 87bdb6a9..c061d105 100644 --- a/.eslintrc.json +++ b/.eslintrc.json @@ -12,6 +12,9 @@ } } }, + "parserOptions": { + "ecmaVersion": 2024 + }, "rules": { "no-console": [ "warn", From 6a546be6a68e5db37499154bcd3e0d10a1355c1d Mon Sep 17 00:00:00 2001 From: Matheus Date: Tue, 9 Jul 2024 15:11:14 -0300 Subject: [PATCH 18/18] refactor: fix logic to set maximum input size --- src/components/TextArea/index.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/components/TextArea/index.js b/src/components/TextArea/index.js index 71a0bc20..6730b85f 100644 --- a/src/components/TextArea/index.js +++ b/src/components/TextArea/index.js @@ -65,12 +65,12 @@ TextArea.prototype = Object.assign(TextArea.prototype, Component.prototype, { this.emit('placeholder:change', placeholder); }, setMaxLength(maxLength) { - if (!maxLength) { - this.selected.get('textarea').removeAttribute('maxlength'); - } + const $textArea = this.selected.get('textarea'); - this.selected.get('textarea').maxLength = maxLength; - this.emit('maxLength:change', maxLength); + if (maxLength) $textArea.maxLength = maxLength; + else $textArea.removeAttribute('maxlength'); + + this.emit('maxLength:change', maxLength ?? Infinity); }, setRequired(required = true) { this.selected.get('textarea').required = required;