fix(ListBox): make style changes based on feedback

Author: tw15egan

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

@@ -65,8 +65,8 @@ const ToggleTip = (
 export const Default = () => (
   <div style={{ width: '400px' }}>
     <FluidComboBox
+      placeholder="Filter..."
       onChange={() => {}}
-      initialSelectedItem={items[2]}
       id="default"
       titleText="Label"
       label="Choose an option"
@@ -79,6 +79,7 @@ export const Default = () => (
 export const Condensed = () => (
   <div style={{ width: '400px' }}>
     <FluidComboBox
+      placeholder="Filter..."
       onChange={() => {}}
       id="default"
       isCondensed
@@ -93,6 +94,7 @@ export const Condensed = () => (
 export const Playground = (args) => (
   <div style={{ width: args.playgroundWidth }}>
     <FluidComboBox
+      placeholder="Filter..."
       onChange={() => {}}
       id="default"
       titleText="Label"
@@ -103,6 +105,7 @@ export const Playground = (args) => (
     />
     <br />
     <FluidComboBox
+      placeholder="Filter..."
       {...args}
       onChange={() => {}}
       id="default-3"

packages/styles/scss/components/fluid-list-box/_fluid-list-box.scss

@@ -95,6 +95,12 @@
     outline-offset: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid
+    :not(.#{$prefix}--list-box--up)
+    .#{$prefix}--list-box__menu {
+    top: calc(100% + rem(3px));
+  }
+
   // Invalid / Warning styles
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid:not(.#{$prefix}--list-box__wrapper--fluid--focus) {
     @include focus-outline('invalid');
@@ -146,6 +152,12 @@
     margin-top: 0;
   }
 
+  .#{$prefix}--list-box__wrapper--fluid
+    .#{$prefix}--list-box--warning
+    ~ .#{$prefix}--form-requirement {
+    border-bottom: 1px solid $border-strong;
+  }
+
   .#{$prefix}--list-box__wrapper--fluid.#{$prefix}--list-box__wrapper--fluid--invalid
     .#{$prefix}--list-box__invalid-icon,
   .#{$prefix}--list-box__wrapper--fluid