From 181e27f825f6f1786503ba5df24c82bfe176246e Mon Sep 17 00:00:00 2001 From: Nathaniel Waldschmidt <77284592+NateWaldschmidt@users.noreply.github.com> Date: Wed, 17 Apr 2024 13:59:18 -0500 Subject: [PATCH] revert: textinput changes (#477) --- CHANGELOG.md | 4 + package-lock.json | 4 +- package.json | 2 +- .../{DateInput.spec.ts => DateInput.spec.js} | 35 +- src/components/TextInput/TextInput.vue | 361 ++++++++++-------- .../{TextInput.spec.ts => TextInput.spec.js} | 12 +- tsconfig.json | 2 +- 7 files changed, 242 insertions(+), 178 deletions(-) rename src/components/DateInput/__tests__/{DateInput.spec.ts => DateInput.spec.js} (82%) rename src/components/TextInput/__tests__/{TextInput.spec.ts => TextInput.spec.js} (94%) diff --git a/CHANGELOG.md b/CHANGELOG.md index 69ea6acaa..b92b547aa 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,5 +1,9 @@ # CHANGELOG +## v2.0.37 + +- Revert `` changes + ## v2.0.36 - Fix `` ref diff --git a/package-lock.json b/package-lock.json index 859062fc8..da3f4d414 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,12 +1,12 @@ { "name": "@lob/ui-components", - "version": "2.0.36", + "version": "2.0.37", "lockfileVersion": 2, "requires": true, "packages": { "": { "name": "@lob/ui-components", - "version": "2.0.36", + "version": "2.0.37", "dependencies": { "date-fns": "^2.29.3", "date-fns-holiday-us": "^0.3.1", diff --git a/package.json b/package.json index b82f67267..05b094f67 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@lob/ui-components", - "version": "2.0.36", + "version": "2.0.37", "engines": { "node": ">=20.2.0", "npm": ">=10.2.0" diff --git a/src/components/DateInput/__tests__/DateInput.spec.ts b/src/components/DateInput/__tests__/DateInput.spec.js similarity index 82% rename from src/components/DateInput/__tests__/DateInput.spec.ts rename to src/components/DateInput/__tests__/DateInput.spec.js index 8706f3472..07b80c4f7 100644 --- a/src/components/DateInput/__tests__/DateInput.spec.ts +++ b/src/components/DateInput/__tests__/DateInput.spec.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom'; -import { RenderResult, render } from '@testing-library/vue'; +import { render } from '@testing-library/vue'; import userEvent from '@testing-library/user-event'; import { translate } from '@/mixins'; import DateInput from '../DateInput.vue'; @@ -57,24 +57,21 @@ describe('DateInput', () => { expect(emittedEvent).toHaveProperty('update:open'); const length = emittedEvent['update:open'].length; - // @ts-expect-error No types. expect(emittedEvent['update:open'][length - 1][0]).toEqual(true); // last event should be an open event }); describe('selecting a date', () => { let props; - let component: RenderResult; - let dateToSelect: HTMLButtonElement | null; + let component; + let dateToSelect; const RealDate = global.Date; beforeEach(() => { props = { ...initialProps, open: true }; const oldGlobalDate = global.Date; - // @ts-expect-error Improper way of mocking dates. global.Date = vi.fn((...args) => { if (args.length) { - // @ts-expect-error Improper way of mocking dates. return new RealDate(...args); } return new Date(2021, 5, 14); @@ -88,30 +85,30 @@ describe('DateInput', () => { // which ensures the minDate and maxDate default values are set correctly vi.useRealTimers(); component = renderComponent({ props }); - const { getByText } = component; - dateToSelect = getByText(23).closest('button'); + const { queryByText } = component; + dateToSelect = queryByText(23).closest('button'); }); it('emits an update:open event with value false', async () => { const { emitted } = component; - if (dateToSelect) { - await userEvent.click(dateToSelect); - } + await userEvent.click(dateToSelect); const emittedEvent = emitted(); - expect(emittedEvent).toHaveProperty('update:open', [[false]]); + expect(emittedEvent).toHaveProperty('update:open'); + + expect(emittedEvent['update:open'][0][0]).toEqual(false); }); it('emits an update:modelValue event', async () => { const { emitted } = component; - if (dateToSelect) { - await userEvent.click(dateToSelect); - } + await userEvent.click(dateToSelect); const emittedEvent = emitted(); - expect(emittedEvent).toHaveProperty('update:modelValue', [ - [new Date(2022, 5, 23)] - ]); + expect(emittedEvent).toHaveProperty('update:modelValue'); + + expect(emittedEvent['update:modelValue'][0][0]).toEqual( + new Date(2022, 5, 23) + ); }); }); @@ -125,7 +122,7 @@ describe('DateInput', () => { const { getByText, getByTestId } = renderComponent({ props }); const textInput = getByTestId('input-container'); - expect(textInput).toHaveClass('!border-error-dark'); + expect(textInput).toHaveClass('!border-red-600'); const errorMessage = getByText('Date no longer valid'); expect(errorMessage).toBeVisible(); }); diff --git a/src/components/TextInput/TextInput.vue b/src/components/TextInput/TextInput.vue index 358593578..6ecc862f2 100644 --- a/src/components/TextInput/TextInput.vue +++ b/src/components/TextInput/TextInput.vue @@ -43,24 +43,23 @@
@@ -76,13 +75,12 @@ :max="max" :pattern="pattern" :class="[ - 'px-3 py-2', `w-full text-gray-800 type-small-400 caret-gray-300 placeholder-gray-200 placeholder:type-small-400 outline-none ${inputClass}`, { nonErrorAutofill: !disabled && !readonly }, { truncate: withCopyButton }, - { 'bg-green-50 !placeholder-success-dark': success }, + { 'bg-green-50 !placeholder-green-700': success }, { - 'bg-red-50 !placeholder-error-dark !autofill:bg-red-50 errorAutofill': + 'bg-red-50 !placeholder-red-600 !autofill:bg-red-50 errorAutofill': error }, { @@ -94,19 +92,18 @@ :required="required" :placeholder="placeholder" :readonly="readonly" - @input="handleInput" - @focus="handleFocus" - @blur="$emit('blur', $event)" - @change="$emit('change', $event)" - @invalid="$emit('invalid', $event.target)" + @input="onInput" + @focus="onFocus" + @blur="onBlur" + @change="onChange" + @invalid="onInvalid" />
@@ -135,7 +131,7 @@
- diff --git a/src/components/TextInput/__tests__/TextInput.spec.ts b/src/components/TextInput/__tests__/TextInput.spec.js similarity index 94% rename from src/components/TextInput/__tests__/TextInput.spec.ts rename to src/components/TextInput/__tests__/TextInput.spec.js index 0ac1d2998..8e54faecf 100644 --- a/src/components/TextInput/__tests__/TextInput.spec.ts +++ b/src/components/TextInput/__tests__/TextInput.spec.js @@ -1,5 +1,5 @@ import '@testing-library/jest-dom'; -import { render, fireEvent, RenderResult } from '@testing-library/vue'; +import { render, fireEvent } from '@testing-library/vue'; import TextInput from '../TextInput.vue'; import userEvent from '@testing-library/user-event'; @@ -60,7 +60,7 @@ describe('Text input', () => { }); const textInput = getByTestId('input-container'); - expect(textInput).toHaveClass('!border-error-dark'); + expect(textInput).toHaveClass('!border-red-600'); }); it('updates the v-model on text input', async () => { @@ -68,7 +68,7 @@ describe('Text input', () => { const { getByLabelText } = render(TextInput, { props }); - const textInput = getByLabelText(props.label) as HTMLInputElement; + const textInput = getByLabelText(props.label); await fireEvent.update(textInput, 'hello!'); expect(textInput.value).toEqual('hello!'); @@ -99,7 +99,7 @@ describe('Text input', () => { props }); - const textInput = getByLabelText(props.label) as HTMLInputElement; + const textInput = getByLabelText(props.label); const updatedValue = 'hello!'; await fireEvent.update(textInput, updatedValue); @@ -140,7 +140,7 @@ describe('Text input', () => { }; const { getByRole, getByLabelText } = render(TextInput, { props }); - const textInput = getByLabelText(props.label) as HTMLInputElement; + const textInput = getByLabelText(props.label); const updatedValue = 'hello!'; await fireEvent.update(textInput, updatedValue); @@ -186,7 +186,7 @@ describe('Text input', () => { }); describe('with Copy Button', () => { - let component: RenderResult; + let component; beforeEach(async () => { const props = { ...initialProps, diff --git a/tsconfig.json b/tsconfig.json index eed6ac681..d30c67cb0 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -12,7 +12,7 @@ "experimentalDecorators": true, "skipLibCheck": true, "lib": ["esnext", "dom"], - "types": ["vitest/globals", "vite/client", "jest"], + "types": ["vite/client", "jest"], "resolveJsonModule": true, "baseUrl": ".", "paths": {