From 187e72c4ed0f619505fc093b6c3e12b9cd4927bf Mon Sep 17 00:00:00 2001 From: Minwook Shin <163576506+minwookshin@users.noreply.github.com> Date: Sat, 3 Oct 2026 05:26:03 -0400 Subject: [PATCH 1/2] fix(text-input): avoid resizing growing inputs --- cypress/component/TextArea.spec.tsx | 30 ++++++++++++++ cypress/component/TextInput.spec.tsx | 40 +++++++++++++++++++ modules/react/text-input/lib/TextInput.tsx | 1 - .../text-input/stories/TextInput.stories.ts | 4 ++ .../stories/examples/StandaloneGrow.tsx | 13 ++++++ 5 files changed, 87 insertions(+), 1 deletion(-) create mode 100644 modules/react/text-input/stories/examples/StandaloneGrow.tsx diff --git a/cypress/component/TextArea.spec.tsx b/cypress/component/TextArea.spec.tsx index 2cee35ac5f..ab76173b79 100644 --- a/cypress/component/TextArea.spec.tsx +++ b/cypress/component/TextArea.spec.tsx @@ -1,12 +1,42 @@ import {Basic} from '../../modules/react/text-area/stories/examples/Basic'; import {Disabled} from '../../modules/react/text-area/stories/examples/Disabled'; +import {Grow} from '../../modules/react/text-area/stories/examples/Grow'; import {Placeholder} from '../../modules/react/text-area/stories/examples/Placeholder'; +import {ResizeConstraints} from '../../modules/react/text-area/stories/examples/ResizeConstraints'; const getTextArea = () => { return cy.get(`textarea`); }; describe('Text Area', () => { + context(`given the 'Grow' story is rendered`, () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should remain resizable in both directions', () => { + getTextArea().should('have.css', 'resize', 'both'); + }); + }); + + context(`given the 'ResizeConstraints' story is rendered`, () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should respect the vertical resize constraint', () => { + getTextArea().should('have.css', 'resize', 'vertical'); + }); + }); + context(`given the 'Basic' story is rendered`, () => { beforeEach(() => { cy.mount(); diff --git a/cypress/component/TextInput.spec.tsx b/cypress/component/TextInput.spec.tsx index 32cf9c113b..f7369d0003 100644 --- a/cypress/component/TextInput.spec.tsx +++ b/cypress/component/TextInput.spec.tsx @@ -1,12 +1,52 @@ import {Basic} from '../../modules/react/text-input/stories/examples/Basic'; import {Disabled} from '../../modules/react/text-input/stories/examples/Disabled'; +import {Grow} from '../../modules/react/text-input/stories/examples/Grow'; import {Placeholder} from '../../modules/react/text-input/stories/examples/Placeholder'; +import {StandaloneGrow} from '../../modules/react/text-input/stories/examples/StandaloneGrow'; const getTextInput = () => { return cy.get(`[type="text"]`); }; describe('TextInput', () => { + context(`given the 'StandaloneGrow' story is rendered`, () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should fill its container without becoming resizable', () => { + getTextInput().should('have.css', 'resize', 'none'); + getTextInput().then($input => { + expect($input[0].getBoundingClientRect().width).to.equal( + $input[0].parentElement!.getBoundingClientRect().width + ); + }); + }); + }); + + context(`given the 'Grow' story is rendered`, () => { + beforeEach(() => { + cy.mount(); + }); + + it('should not have any axe errors', () => { + cy.checkA11y(); + }); + + it('should fill the field without becoming resizable', () => { + getTextInput().should('have.css', 'resize', 'none'); + getTextInput().then($input => { + expect($input[0].getBoundingClientRect().width).to.equal( + $input[0].parentElement!.getBoundingClientRect().width + ); + }); + }); + }); + context(`given the 'Basic' story is rendered`, () => { beforeEach(() => { cy.mount(); diff --git a/modules/react/text-input/lib/TextInput.tsx b/modules/react/text-input/lib/TextInput.tsx index 0be099c370..7c50a206a2 100644 --- a/modules/react/text-input/lib/TextInput.tsx +++ b/modules/react/text-input/lib/TextInput.tsx @@ -68,7 +68,6 @@ export const textInputStencil = createStencil({ grow: { true: { width: '100%', - resize: 'vertical', }, false: { width: 'initial', diff --git a/modules/react/text-input/stories/TextInput.stories.ts b/modules/react/text-input/stories/TextInput.stories.ts index fd60a45796..b4307f3c8b 100644 --- a/modules/react/text-input/stories/TextInput.stories.ts +++ b/modules/react/text-input/stories/TextInput.stories.ts @@ -11,6 +11,7 @@ import {LabelPosition as LabelPositionExample} from './examples/LabelPosition'; import {Placeholder as PlaceholderExample} from './examples/Placeholder'; import {RefForwarding as RefForwardingExample} from './examples/RefForwarding'; import {Required as RequiredExample} from './examples/Required'; +import {StandaloneGrow as StandaloneGrowExample} from './examples/StandaloneGrow'; export default { title: 'Components/Inputs/Text Input', @@ -34,6 +35,9 @@ export const Disabled: Story = { export const Grow: Story = { render: GrowExample, }; +export const StandaloneGrow: Story = { + render: StandaloneGrowExample, +}; export const LabelPosition: Story = { render: LabelPositionExample, }; diff --git a/modules/react/text-input/stories/examples/StandaloneGrow.tsx b/modules/react/text-input/stories/examples/StandaloneGrow.tsx new file mode 100644 index 0000000000..e74f43862a --- /dev/null +++ b/modules/react/text-input/stories/examples/StandaloneGrow.tsx @@ -0,0 +1,13 @@ +import {useUniqueId} from '@workday/canvas-kit-react/common'; +import {TextInput} from '@workday/canvas-kit-react/text-input'; + +export const StandaloneGrow = () => { + const id = useUniqueId(); + + return ( +
+ + +
+ ); +}; From f17ad752acfdc10a73f600c400dadc0989e80300 Mon Sep 17 00:00:00 2001 From: Minwook Shin <163576506+minwookshin@users.noreply.github.com> Date: Sat, 3 Oct 2026 06:59:00 -0400 Subject: [PATCH 2/2] test(text-area): Cover direct grow resize behavior --- cypress/component/TextArea.spec.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/cypress/component/TextArea.spec.tsx b/cypress/component/TextArea.spec.tsx index ab76173b79..8b327c5a5f 100644 --- a/cypress/component/TextArea.spec.tsx +++ b/cypress/component/TextArea.spec.tsx @@ -1,3 +1,5 @@ +import {TextArea} from '@workday/canvas-kit-react/text-area'; + import {Basic} from '../../modules/react/text-area/stories/examples/Basic'; import {Disabled} from '../../modules/react/text-area/stories/examples/Disabled'; import {Grow} from '../../modules/react/text-area/stories/examples/Grow'; @@ -9,6 +11,16 @@ const getTextArea = () => { }; describe('Text Area', () => { + context('given TextArea has grow enabled directly', () => { + beforeEach(() => { + cy.mount(