feat(fluid-text-input): adds skeleton variant (#12151)

* feat(fluid-text-input): adds skeleton variant

* chore(fluid-text-input): update snapshots

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -9276,6 +9276,13 @@ Map {
       },
     },
   },
+  "unstable__FluidTextInputSkeleton" => Object {
+    "propTypes": Object {
+      "className": Object {
+        "type": "string",
+      },
+    },
+  },
   "unstable_useContextMenu" => Object {},
   "unstable_useFeatureFlag" => Object {},
   "unstable_useFeatureFlags" => Object {},

packages/react/src/__tests__/index-test.js

@@ -229,6 +229,7 @@ describe('Carbon Components React', () => {
         "unstable_TextDirection",
         "unstable__FluidTextArea",
         "unstable__FluidTextInput",
+        "unstable__FluidTextInputSkeleton",
         "unstable_useContextMenu",
         "unstable_useFeatureFlag",
         "unstable_useFeatureFlags",

packages/react/src/components/FluidTextInput/FluidTextInput.Skeleton.js

@@ -0,0 +1,39 @@
+/**
+ * Copyright IBM Corp. 2016, 2018
+ *
+ * This source code is licensed under the Apache-2.0 license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import PropTypes from 'prop-types';
+import React from 'react';
+import classnames from 'classnames';
+import { usePrefix } from '../../internal/usePrefix';
+import { FormContext } from '../FluidForm/FormContext';
+
+function FluidTextInputSkeleton({ className, ...other }) {
+  const prefix = usePrefix();
+
+  return (
+    <FormContext.Provider value={{ isFluid: true }}>
+      <div
+        className={classnames(
+          `${prefix}--form-item ${prefix}--text-input--fluid__skeleton`,
+          className
+        )}
+        {...other}>
+        <span className={`${prefix}--label ${prefix}--skeleton`} />
+        <div className={`${prefix}--skeleton ${prefix}--text-input`} />
+      </div>
+    </FormContext.Provider>
+  );
+}
+
+FluidTextInputSkeleton.propTypes = {
+  /**
+   * Specify an optional className to be applied to the outer FluidForm wrapper
+   */
+  className: PropTypes.string,
+};
+
+export default FluidTextInputSkeleton;

packages/react/src/components/FluidTextInput/FluidTextInput.stories.js

@@ -7,6 +7,7 @@
 
 import React from 'react';
 import FluidTextInput from '../FluidTextInput';
+import FluidTextInputSkeleton from './FluidTextInput.Skeleton';
 import {
   ToggletipLabel,
   Toggletip,
@@ -58,6 +59,16 @@ export const DefaultWithTooltip = () => (
   <FluidTextInput labelText={ToggleTip} placeholder="Placeholder text" />
 );
 
+export const Skeleton = () => (
+  <div style={{ width: '300px' }}>
+    <FluidTextInputSkeleton
+      labelText="Label"
+      placeholder="Placeholder text"
+      id="input-1"
+    />
+  </div>
+);
+
 export const Playground = (args) => (
   <div style={{ width: args.playgroundWidth }}>
     <FluidTextInput {...args} />

packages/react/src/components/FluidTextInput/index.js

@@ -7,3 +7,5 @@
 
 export default from './FluidTextInput';
 export FluidTextInput from './FluidTextInput';
+
+export { default as FluidTextInputSkeleton } from './FluidTextInput.Skeleton';

packages/react/src/index.js

@@ -211,7 +211,10 @@ export {
   useFeatureFlag as unstable_useFeatureFlag,
   useFeatureFlags as unstable_useFeatureFlags,
 } from './components/FeatureFlags';
-export { FluidTextInput as unstable__FluidTextInput } from './components/FluidTextInput';
+export {
+  FluidTextInput as unstable__FluidTextInput,
+  FluidTextInputSkeleton as unstable__FluidTextInputSkeleton,
+} from './components/FluidTextInput';
 export { FluidTextArea as unstable__FluidTextArea } from './components/FluidTextArea';
 export { Heading, Section } from './components/Heading';
 export { IconButton } from './components/IconButton';

packages/styles/scss/components/fluid-text-input/_fluid-text-input.scss

@@ -141,4 +141,25 @@
     width: rem(32px);
     height: rem(32px);
   }
+
+  // Skeleton
+  .#{$prefix}--text-input--fluid__skeleton {
+    position: relative;
+    height: 100%;
+    padding: $spacing-05;
+    border-bottom: 1px solid $skeleton-element;
+    background: $skeleton-background;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--skeleton {
+    height: 0.5rem;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--label {
+    margin-bottom: $spacing-04;
+  }
+
+  .#{$prefix}--text-input--fluid__skeleton .#{$prefix}--text-input {
+    width: 80%;
+  }
 }