fix: fix button width in InputGroup, fix DatePicker example, fixes #399 (#431)

also fixes the dash overlapping the quiet datepicker, fixes #394

Author: lazd

components/inputgroup/index.css

@@ -22,6 +22,8 @@ governing permissions and limitations under the License.
   --spectrum-datepicker-range-dash-margin-left: calc(-0.5 * var(--spectrum-global-dimension-static-font-size-100));
   --spectrum-datepicker-range-dash-padding-top: 0;
   --spectrum-datepicker-range-dash-line-height: calc(var(--spectrum-textfield-height) - var(--spectrum-global-dimension-size-100));
+
+  --spectrum-combobox-button-width: calc(var(--spectrum-global-dimension-size-400) + var(--spectrum-global-dimension-size-25));
 }
 
 .spectrum-InputGroup {
@@ -33,7 +35,8 @@ governing permissions and limitations under the License.
   border-radius: var(--spectrum-border-radius);
 
   .spectrum-FieldButton {
-    padding: 0 var(--spectrum-dropdown-padding-x);
+    padding: 0;
+    width: var(--spectrum-combobox-button-width);
     border-top-left-radius: var(--spectrum-combobox-fieldbutton-border-top-left-radius);
     border-bottom-left-radius: var(--spectrum-combobox-fieldbutton-border-bottom-left-radius);
   }
@@ -48,12 +51,16 @@ governing permissions and limitations under the License.
 
 .spectrum-InputGroup--quiet {
   border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
-  .spectrum-FieldButton {
-    border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
 
+  .spectrum-FieldButton {
+    width: auto;
     position: relative;
+
+    padding-left: var(--spectrum-dropdown-padding-x);
     padding-right: var(--spectrum-combobox-quiet-fieldbutton-padding-right);
+
     border-bottom: var(--spectrum-textfield-quiet-affixed-border-size) solid;
+    border-radius: var(--spectrum-combobox-quiet-fieldbutton-border-radius);
 
     /* More hitarea */
     &:after {

components/inputgroup/metadata/datepicker.yml

@@ -95,7 +95,7 @@ examples:
       <div class="spectrum-InputGroup spectrum-InputGroup--quiet spectrum-Datepicker spectrum-Datepicker--range" role="combobox" aria-expanded="false" aria-haspopup="dialog">
         <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="start" value="2018-10-01">
         <div class="spectrum-Datepicker--rangeDash"></div>
-        <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-startField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
+        <input type="text" class="spectrum-Textfield spectrum-Textfield--quiet spectrum-InputGroup-field spectrum-Datepicker-endField" placeholder="mm/dd/yyyy" name="end" value="2018-10-30">
         <button type="button" class="spectrum-FieldButton spectrum-FieldButton--quiet" tabindex="-1" aria-label="Calendar">
           <svg class="spectrum-Icon spectrum-UIIcon-ChevronDownMedium spectrum-Dropdown-icon" focusable="false" aria-hidden="true">
             <use xlink:href="#spectrum-css-icon-ChevronDownMedium" />