From 0310add935eb91fc0b97fe69ace499a051b8971c Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 25 Feb 2021 10:52:47 -0800
Subject: [PATCH] fix(TextInput): match skeleton state to other form elements
 (#7865)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
---
 .../src/components/text-input/_text-input.scss      |  7 +++++++
 .../src/components/TextInput/TextInput-story.js     | 13 +------------
 2 files changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/components/src/components/text-input/_text-input.scss b/packages/components/src/components/text-input/_text-input.scss
index dc748b4345de..97f0004cb6c0 100644
--- a/packages/components/src/components/text-input/_text-input.scss
+++ b/packages/components/src/components/text-input/_text-input.scss
@@ -214,6 +214,13 @@
     }
   }
 
+  //-----------------------------
+  // Skeleton
+  //-----------------------------
+  .#{$prefix}--skeleton.#{$prefix}--text-input {
+    @include skeleton;
+  }
+
   //-----------------------------
   // Fluid Text Input
   //-----------------------------
diff --git a/packages/react/src/components/TextInput/TextInput-story.js b/packages/react/src/components/TextInput/TextInput-story.js
index 9d0e3cf269f3..c0aa09fa84d0 100644
--- a/packages/react/src/components/TextInput/TextInput-story.js
+++ b/packages/react/src/components/TextInput/TextInput-story.js
@@ -204,18 +204,7 @@ FullyControlledTogglePasswordVisibility.parameters = {
   },
 };
 
-export const Skeleton = () => (
-  <div
-    aria-label="loading text input"
-    aria-live="assertive"
-    role="status"
-    tabIndex="0" // eslint-disable-line jsx-a11y/no-noninteractive-tabindex
-  >
-    <TextInputSkeleton />
-    <br />
-    <TextInputSkeleton hideLabel />
-  </div>
-);
+export const Skeleton = () => <TextInputSkeleton />;
 
 Skeleton.storyName = 'skeleton';