From 561e51dcf2d609639f21375dfc42983a8108db8e Mon Sep 17 00:00:00 2001
From: TJ Egan <tw15egan@gmail.com>
Date: Thu, 27 Oct 2022 12:43:43 -0400
Subject: [PATCH] chore(FluidForm): add FluidDatePicker to FluidForm story,
 style fixes

---
 .../components/FluidForm/FluidForm.stories.js | 38 +++++++++++++++++++
 .../fluid-date-picker/_fluid-date-picker.scss |  6 ++-
 .../fluid-text-area/_fluid-text-area.scss     |  2 +-
 3 files changed, 43 insertions(+), 3 deletions(-)

diff --git a/packages/react/src/components/FluidForm/FluidForm.stories.js b/packages/react/src/components/FluidForm/FluidForm.stories.js
index 849632a11420..e882d9f49335 100644
--- a/packages/react/src/components/FluidForm/FluidForm.stories.js
+++ b/packages/react/src/components/FluidForm/FluidForm.stories.js
@@ -8,6 +8,11 @@
 import React from 'react';
 
 import FluidForm from '.';
+import FluidDatePicker from '../FluidDatePicker';
+import FluidDatePickerInput from '../FluidDatePickerInput';
+import FluidSelect from '../FluidSelect';
+import SelectItem from '../SelectItem';
+import SelectItemGroup from '../SelectItemGroup';
 import FluidTextInput from '../FluidTextInput';
 import FluidTextArea from '../FluidTextArea';
 import ModalWrapper from '../ModalWrapper';
@@ -45,6 +50,39 @@ export default {
 export const Default = () => (
   <>
     <FluidForm {...additionalProps}>
+      <div style={{ display: 'flex' }}>
+        <FluidDatePicker datePickerType="range">
+          <FluidDatePickerInput
+            id="date-picker-input-id-start"
+            placeholder="mm/dd/yyyy"
+            labelText="Choose your dates"
+          />
+          <FluidDatePickerInput
+            id="date-picker-input-id-finish"
+            placeholder="mm/dd/yyyy"
+            labelText="End date"
+          />
+        </FluidDatePicker>
+        <FluidSelect
+          id="select-1"
+          defaultValue="placeholder-item"
+          labelText="Choose an option">
+          <SelectItem
+            disabled
+            hidden
+            value="placeholder-item"
+            text="Choose an option"
+          />
+          <SelectItemGroup label="Category 1">
+            <SelectItem value="option-1" text="Option 1" />
+            <SelectItem value="option-2" text="Option 2" />
+          </SelectItemGroup>
+          <SelectItemGroup label="Category 2">
+            <SelectItem value="option-3" text="Option 3" />
+            <SelectItem value="option-4" text="Option 4" />
+          </SelectItemGroup>
+        </FluidSelect>
+      </div>
       <FluidTextInput {...TextInputProps} />
       <FluidTextInput
         type="password"
diff --git a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
index a941cda5dcd3..391abdbbbcac 100644
--- a/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
+++ b/packages/styles/scss/components/fluid-date-picker/_fluid-date-picker.scss
@@ -24,8 +24,8 @@
 
   .#{$prefix}--date-picker--fluid .#{$prefix}--date-picker {
     position: relative;
+    width: 100%;
     height: 100%;
-    // border-bottom: 1px solid $border-strong;
     transition: background-color $duration-fast-01 motion(standard, productive),
       outline $duration-fast-01 motion(standard, productive);
   }
@@ -102,7 +102,9 @@
   .#{$prefix}--date-picker--fluid
     .#{$prefix}--date-picker--range
     .#{$prefix}--date-picker-container {
-    width: rem(144px);
+    width: 100%;
+    min-width: rem(144px);
+    min-height: rem(63px);
   }
 
   .#{$prefix}--date-picker--fluid
diff --git a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
index 8f8942c094c6..60c991f425e3 100644
--- a/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
+++ b/packages/styles/scss/components/fluid-text-area/_fluid-text-area.scss
@@ -64,7 +64,7 @@
   // invalid
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area--invalid,
   .#{$prefix}--text-area--fluid .#{$prefix}--text-area:focus {
-    border-bottom: none;
+    border-bottom: 1px solid transparent;
   }
 
   .#{$prefix}--text-area__divider,