chore(FluidForm): add FluidDatePicker to FluidForm story, style fixes

carbon-design-system · Oct 27, 2022 · 561e51d · 561e51d
1 parent 62a8dcb
commit 561e51d
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 3 deletions.
diff --git 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
@@ -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
@@ -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,