fix(text-input): Avoid resizing growing inputs

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(<TextArea grow aria-label="Description" />);
+    });
+
+    it('should preserve the default resize behavior', () => {
+      getTextArea().should('have.css', 'resize', 'both');
+    });
+  });
+
+  context(`given the 'Grow' story is rendered`, () => {
+    beforeEach(() => {
+      cy.mount(<Grow />);
+    });
+
+    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(<ResizeConstraints />);
+    });
+
+    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(<Basic />);

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(<StandaloneGrow />);
+    });
+
+    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(<Grow />);
+    });
+
+    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(<Basic />);

modules/react/text-input/lib/TextInput.tsx

@@ -68,7 +68,6 @@ export const textInputStencil = createStencil({
     grow: {
       true: {
         width: '100%',
-        resize: 'vertical',
       },
       false: {
         width: 'initial',

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,
 };

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 (
+    <div>
+      <label htmlFor={id}>Street Address</label>
+      <TextInput id={id} grow />
+    </div>
+  );
+};