fix(TextInput): match skeleton state to other form elements (#7865)

Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>
carbon-design-system · Feb 25, 2021 · 0310add · 0310add
1 parent 3688fec
commit 0310add
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 12 deletions.
diff --git 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
@@ -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';