fix(TextInput): remove clear input button if TextInput is disabled

src/components/TextInput/TextInput.tsx

@@ -81,7 +81,7 @@ const TextInput = (props: Props, ref: RefObject<HTMLInputElement>): ReactElement
           maxLength={inputMaxLen}
           aria-describedby={messages && !!messages.length ? messageId.current : undefined}
         />
-        {!!state.value && (
+        {!!state.value && !isDisabled && (
           <ButtonSimple
             className="clear-icon"
             aria-label={clearAriaLabel}

src/components/TextInput/TextInput.unit.test.tsx

@@ -111,6 +111,14 @@ describe('<TextInput/>', () => {
 
       expect(container).toMatchSnapshot();
     });
+
+    it('should match snapshot with isDisabled', async () => {
+      expect.assertions(1);
+
+      const container = await mountComponent(<TextInput aria-label="text-input" isDisabled />);
+
+      expect(container).toMatchSnapshot();
+    });
   });
 
   describe('attributes', () => {
@@ -211,6 +219,36 @@ describe('<TextInput/>', () => {
 
       expect(textInputComponent.props()['aria-describedby']).toBe(undefined);
     });
+
+    it('should not have the clear input button displayed when value is empty', async () => {
+      const textInputComponent = (
+        await mountAndWait(<TextInput aria-label="text-input" value="" />)
+      ).find(TextInput);
+
+      expect(textInputComponent.find('.clear-icon').exists()).toBe(false);
+    });
+
+    it.each(['hello world', '0', '123', ' '])(
+      'should have the clear input button displayed when not disabled (value = "%s")',
+      async (value) => {
+        const textInputComponent = (
+          await mountAndWait(<TextInput aria-label="text-input" value={value} />)
+        ).find(TextInput);
+
+        expect(textInputComponent.find('.clear-icon').exists()).toBe(true);
+      }
+    );
+
+    it.each(['', 'hello world', '0', '123', ' '])(
+      'should not have the clear input button displayed when isDisabled (value = "%s")',
+      async (value) => {
+        const textInputComponent = (
+          await mountAndWait(<TextInput aria-label="text-input" value={value} isDisabled />)
+        ).find(TextInput);
+
+        expect(textInputComponent.find('.clear-icon').exists()).toBe(false);
+      }
+    );
   });
 
   describe('actions', () => {

src/components/TextInput/TextInput.unit.test.tsx.snap

@@ -327,6 +327,38 @@ exports[`<TextInput/> snapshot should match snapshot with inputMaxLen 1`] = `
 </SSRProvider>
 `;
 
+exports[`<TextInput/> snapshot should match snapshot with isDisabled 1`] = `
+<SSRProvider>
+  <TextInput
+    aria-label="text-input"
+    isDisabled={true}
+  >
+    <div
+      className="md-text-input-wrapper"
+      data-disabled={true}
+      data-focus={false}
+      data-level="none"
+      onClick={[Function]}
+    >
+      <div
+        className="md-text-input-container"
+      >
+        <input
+          aria-label="text-input"
+          disabled={true}
+          id="test-ID"
+          onBlur={[Function]}
+          onChange={[Function]}
+          onFocus={[Function]}
+          readOnly={false}
+          type="text"
+        />
+      </div>
+    </div>
+  </TextInput>
+</SSRProvider>
+`;
+
 exports[`<TextInput/> snapshot should match snapshot with label 1`] = `
 <SSRProvider>
   <TextInput