From afa51eeadf9f0cd5560a0cabc6dbdc457491e4c9 Mon Sep 17 00:00:00 2001 From: Matej Ocovsky Date: Sat, 31 Dec 2022 11:07:44 +0000 Subject: [PATCH 01/26] feat(react): enable textarea to limit text input to set amount of words Co-authored-by: SamChinellato <49278203+SamChinellato@users.noreply.github.com> Co-authored-by: stevenpatrick009 <106097350+stevenpatrick009@users.noreply.github.com> --- .all-contributorsrc | 27 ++++++++ README.md | 3 + e2e/components/TextArea/TextArea-test.e2e.js | 8 +++ package.json | 2 +- .../__snapshots__/PublicAPI-test.js.snap | 10 +++ .../src/components/TextArea/TextArea-test.js | 22 ++++++ .../react/src/components/TextArea/TextArea.js | 67 +++++++++++++++++-- .../components/TextArea/TextArea.stories.js | 12 ++++ .../TextArea/__tests__/TextArea-test.js | 54 +++++++++++++++ .../internal/__tests__/useAnnouncer-test.js | 31 +++++++++ packages/react/src/internal/useAnnouncer.js | 5 +- 11 files changed, 233 insertions(+), 8 deletions(-) create mode 100644 packages/react/src/internal/__tests__/useAnnouncer-test.js diff --git a/.all-contributorsrc b/.all-contributorsrc index c7e861f5680a..f1dd0a01b7ad 100644 --- a/.all-contributorsrc +++ b/.all-contributorsrc @@ -977,6 +977,33 @@ "contributions": [ "code" ] + }, + { + "login": "matejoslav", + "name": "Matej Ocovsky", + "avatar_url": "https://avatars.githubusercontent.com/u/8973672?v=4", + "profile": "https://github.com/matejoslav", + "contributions": [ + "code" + ] + }, + { + "login": "SamChinellato", + "name": "SamChinellato", + "avatar_url": "https://avatars.githubusercontent.com/u/49278203?v=4", + "profile": "https://samuelechinellato.com/#/", + "contributions": [ + "code" + ] + }, + { + "login": "stevenpatrick009", + "name": "stevenpatrick009", + "avatar_url": "https://avatars.githubusercontent.com/u/106097350?v=4", + "profile": "https://github.com/stevenpatrick009", + "contributions": [ + "code" + ] } ], "commitConvention": "none" diff --git a/README.md b/README.md index 88836687934e..0c77bffaaca1 100644 --- a/README.md +++ b/README.md @@ -212,6 +212,9 @@ check out our [Contributing Guide](/.github/CONTRIBUTING.md) and our
ShankarV-CodeJunkie

πŸ’»
dario platania

πŸ’» +
Matej Ocovsky

πŸ’» +
SamChinellato

πŸ’» +
stevenpatrick009

πŸ’» diff --git a/e2e/components/TextArea/TextArea-test.e2e.js b/e2e/components/TextArea/TextArea-test.e2e.js index c919450eec16..36a29b001228 100644 --- a/e2e/components/TextArea/TextArea-test.e2e.js +++ b/e2e/components/TextArea/TextArea-test.e2e.js @@ -29,6 +29,14 @@ test.describe('TextArea', () => { theme, }); }); + + test('with word counter @vrt', async ({ page }) => { + await snapshotStory(page, { + component: 'TextArea', + id: 'components-textarea--with-word-counter', + theme, + }); + }); }); }); diff --git a/package.json b/package.json index dddfb70633c6..c123c70dde70 100644 --- a/package.json +++ b/package.json @@ -90,7 +90,7 @@ "body-max-line-length": [ 2, "always", - 80 + 90 ], "scope-case": [ 0, diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 7322a1dccb03..56d4669b0e2d 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -7796,6 +7796,7 @@ Map { "TextArea" => Object { "$$typeof": Symbol(react.forward_ref), "defaultProps": Object { + "counterMode": "default", "disabled": false, "enableCounter": false, "helperText": "", @@ -7814,6 +7815,15 @@ Map { "cols": Object { "type": "number", }, + "counterMode": Object { + "args": Array [ + Array [ + "default", + "words", + ], + ], + "type": "oneOf", + }, "defaultValue": Object { "args": Array [ Array [ diff --git a/packages/react/src/components/TextArea/TextArea-test.js b/packages/react/src/components/TextArea/TextArea-test.js index bee02c651684..1912a5991aaf 100644 --- a/packages/react/src/components/TextArea/TextArea-test.js +++ b/packages/react/src/components/TextArea/TextArea-test.js @@ -79,6 +79,12 @@ describe('TextArea', () => { wrapper.setProps({ maxCount: 5 }); expect(wrapper.props().maxCount).toEqual(5); }); + + it('should set counterMode as expected', () => { + expect(wrapper.props().counterMode).toEqual('default'); + wrapper.setProps({ counterMode: 'words' }); + expect(wrapper.props().counterMode).toEqual('words'); + }); }); describe('label', () => { @@ -160,6 +166,22 @@ describe('TextArea', () => { }); }); }); + + describe('word counter', () => { + const wordCounterTestWrapper1 = mount( +