diff --git a/cypress/component/TextArea.spec.tsx b/cypress/component/TextArea.spec.tsx
index 2cee35ac5f..8b327c5a5f 100644
--- a/cypress/component/TextArea.spec.tsx
+++ b/cypress/component/TextArea.spec.tsx
@@ -1,12 +1,54 @@
+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';
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 TextArea has grow enabled directly', () => {
+ beforeEach(() => {
+ cy.mount();
+ });
+
+ it('should preserve the default resize behavior', () => {
+ getTextArea().should('have.css', 'resize', 'both');
+ });
+ });
+
+ 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 (
+
+
+
+
+ );
+};