Add size prop to FillQuery

ui/src/shared/components/FillQuery.js

@@ -19,6 +19,10 @@ class FillQuery extends Component {
     this.handleKeyUp = ::this.handleKeyUp
   }
 
+  static defaultProps = {
+    size: 'xs',
+  }
+
   handleInputBlur(e) {
     const {useCustomNumber, inputValue} = this.state
     // Prevent user from submitting an empty string as their value
@@ -54,24 +58,25 @@ class FillQuery extends Component {
   }
 
   render() {
+    const {size} = this.props
     const {selected, useCustomNumber, inputValue} = this.state
     const items = QUERY_FILL_OPTIONS.map(text => ({text}))
 
     return (
-      <div className="fill-query">
+      <div className={`fill-query fill-query--${size}`}>
         <label>Fill missing with</label>
         <Dropdown
           selected={selected}
           items={items}
           className="fill-query--dropdown"
-          buttonSize="btn-xs"
+          buttonSize={`btn-${size}`}
           buttonColor="btn-default"
           onChoose={this.handleDropdown}
         />
         {useCustomNumber
           ? <input
               type="number"
-              className="form-control monotype form-plutonium input-xs fill-query--input"
+              className={`form-control monotype form-plutonium input-${size} fill-query--input`}
               placeholder="Custom Value"
               autoFocus={true}
               value={inputValue}
@@ -85,10 +90,11 @@ class FillQuery extends Component {
   }
 }
 
-const {func} = PropTypes
+const {func, string} = PropTypes
 
 FillQuery.propTypes = {
   onSelection: func.isRequired,
+  size: string,
 }
 
 export default FillQuery

ui/src/style/components/fill-query.scss

@@ -10,27 +10,42 @@
   flex-wrap: nowrap;
 }
 .fill-query > label {
-  font-size: 12px;
   white-space: nowrap;
-  padding: 0 8px;
   margin: 0;
-  height: 22px;
-  line-height: 22px;
   @include no-user-select();
   color: $g11-sidewalk;
 }
 .fill-query--dropdown .dropdown-toggle {
-  width: 90px;
   font-family: $code-font;
 }
 .fill-query--dropdown .dropdown-menu .dropdown-item a {
   font-family: $code-font;
 }
 .fill-query--input {
-  width: 70px;
   margin-left: 4px;
   font-weight: 600;
 }
+// Size modifiers
+.fill-query--xs {
+  .fill-query--dropdown .dropdown-toggle { width: 90px; }
+  .fill-query--input {width: 70px;}
+  & > label {
+    height: 22px;
+    line-height: 22px;
+    font-size: 12px;
+    padding: 0 8px;
+  }
+}
+.fill-query--sm {
+  .fill-query--dropdown .dropdown-toggle { width: 110px; }
+  .fill-query--input {width: 90px;}
+  & > label {
+    height: 30px;
+    line-height: 30px;
+    font-size: 13px;
+    padding: 0 11px;
+  }
+}
 
 // Prevent component from being flush to edge when used in Query Editor
 .query-editor--status .fill-query {