chore(Fluid): add fluid skeletons as subcomponents in story files

carbon-design-system · Dec 8, 2022 · baa5922 · baa5922
1 parent ccd1668
commit baa5922
Show file tree

Hide file tree

Showing 10 changed files with 42 additions and 1 deletion.
diff --git a/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js b/packages/react/src/components/FluidComboBox/FluidComboBox.stories.js
@@ -18,6 +18,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidComboBox',
   component: FluidComboBox,
+  subcomponents: {
+    FluidComboBoxSkeleton,
+  },
 };
 
 const items = [

diff --git a/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js b/packages/react/src/components/FluidDatePicker/FluidDatePicker.stories.js
@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidDatePicker',
   component: FluidDatePicker,
+  subcomponents: {
+    FluidDatePickerSkeleton,
+  },
 };
 
 const ToggleTip = (

diff --git a/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js b/packages/react/src/components/FluidDropdown/FluidDropdown.stories.js
@@ -18,6 +18,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidDropdown',
   component: FluidDropdown,
+  subcomponents: {
+    FluidDropdownSkeleton,
+  },
 };
 
 const items = [

diff --git a/packages/react/src/components/FluidForm/FluidForm.stories.js b/packages/react/src/components/FluidForm/FluidForm.stories.js
@@ -17,6 +17,7 @@ import FluidTextInput from '../FluidTextInput';
 import FluidTextArea from '../FluidTextArea';
 import FluidTimePicker from '../FluidTimePicker';
 import FluidTimePickerSelect from '../FluidTimePickerSelect';
+import FluidNumberInput from '../FluidNumberInput';
 import ModalWrapper from '../ModalWrapper';
 
 const additionalProps = {
@@ -100,7 +101,19 @@ export const Default = () => (
           </SelectItemGroup>
         </FluidSelect>
       </div>
-      <FluidTextInput {...TextInputProps} />
+      <div style={{ display: 'flex' }}>
+        <FluidTextInput {...TextInputProps} />
+        <FluidNumberInput
+          label="Number Input Label"
+          placeholder="Placeholder text"
+          id="input-default"
+          step={10}
+          min={0}
+          max={100}
+          defaultValue={50}
+        />
+      </div>
+
       <FluidTextInput
         type="password"
         pattern="(?=.*\d)(?=.*[a-z])(?=.*[A-Z]).{6,}"

diff --git a/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js b/packages/react/src/components/FluidMultiSelect/FluidMultiSelect.stories.js
@@ -21,6 +21,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidMultiSelect',
   component: FluidMultiSelect,
+  subcomponents: {
+    FluidMultiSelectSkeleton,
+  },
 };
 
 const items = [

diff --git a/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js b/packages/react/src/components/FluidNumberInput/FluidNumberInput.stories.js
@@ -18,6 +18,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidNumberInput',
   component: FluidNumberInput,
+  subcomponents: {
+    FluidNumberInputSkeleton,
+  },
 };
 
 const ToggleTip = (

diff --git a/packages/react/src/components/FluidSelect/FluidSelect.stories.js b/packages/react/src/components/FluidSelect/FluidSelect.stories.js
@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidSelect',
   component: FluidSelect,
+  subcomponents: {
+    FluidSelectSkeleton,
+  },
   argTypes: {
     onChange: {
       action: 'onChange',

diff --git a/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js b/packages/react/src/components/FluidTextArea/FluidTextArea.stories.js
@@ -20,6 +20,9 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidTextArea',
   component: FluidTextArea,
+  subcomponents: {
+    FluidTextAreaSkeleton,
+  },
   argTypes: {
     hideLabel: {
       table: {

diff --git a/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js b/packages/react/src/components/FluidTextInput/FluidTextInput.stories.js
@@ -20,6 +20,9 @@ import './test.scss';
 export default {
   title: 'Experimental/unstable__FluidTextInput',
   component: FluidTextInput,
+  subcomponents: {
+    FluidTextInputSkeleton,
+  },
 };
 
 export const Default = () => (

diff --git a/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js b/packages/react/src/components/FluidTimePicker/FluidTimePicker.stories.js
@@ -21,6 +21,10 @@ import { Information } from '@carbon/icons-react';
 export default {
   title: 'Experimental/unstable__FluidTimePicker',
   component: FluidTimePicker,
+  subcomponents: {
+    FluidTimePickerSelect,
+    FluidTimePickerSkeleton,
+  },
 };
 
 const ToggleTip = (