Polish Threshold Styles (#11787)

* Fix stylesheet imports

* Improve design of threshold items

* Restructure component to have defaults for optional props

ui/src/shared/components/ColorDropdown.tsx

@@ -7,28 +7,41 @@ import {Dropdown, ComponentStatus, DropdownMenuColors} from 'src/clockface'
 // Types
 import {ColorLabel} from 'src/types/colors'
 
-interface Props {
+interface PassedProps {
   selected: ColorLabel
-  disabled?: boolean
-  stretchToFit?: boolean
   colors: ColorLabel[]
   onChoose: (colors: ColorLabel) => void
 }
 
+interface DefaultProps {
+  disabled?: boolean
+  stretchToFit?: boolean
+  widthPixels?: number
+}
+
+type Props = PassedProps & DefaultProps
+
 const titleCase = (name: string) => `${name[0].toUpperCase()}${name.slice(1)}`
 
 const ColorDropdown: SFC<Props> = props => {
-  const {selected, colors, onChoose, disabled, stretchToFit} = props
+  const {
+    selected,
+    colors,
+    onChoose,
+    disabled,
+    stretchToFit,
+    widthPixels,
+  } = props
 
   const status = disabled ? ComponentStatus.Disabled : ComponentStatus.Default
-  const widthPixels = stretchToFit ? null : 124
+  const width = stretchToFit ? null : widthPixels
 
   return (
     <Dropdown
       selectedID={selected.name}
       onChange={onChoose}
       status={status}
-      widthPixels={widthPixels}
+      widthPixels={width}
       menuColor={DropdownMenuColors.Onyx}
     >
       {colors.map(color => (
@@ -46,4 +59,10 @@ const ColorDropdown: SFC<Props> = props => {
   )
 }
 
+ColorDropdown.defaultProps = {
+  stretchToFit: false,
+  disabled: false,
+  widthPixels: 100,
+}
+
 export default ColorDropdown

ui/src/timeMachine/components/view_options/ThresholdItem.tsx

@@ -37,7 +37,7 @@ interface State {
 @ErrorHandling
 class Threshold extends PureComponent<Props, State> {
   public static defaultProps: Partial<Props> = {
-    label: 'Threshold',
+    label: 'Value is <=',
     disableColor: false,
     isDeletable: true,
     isBase: false,
@@ -58,19 +58,7 @@ class Threshold extends PureComponent<Props, State> {
 
     return (
       <div className="threshold-item">
-        <div className={this.labelClass}>
-          {this.props.label}
-          {isDeletable &&
-            !isBase && (
-              <Button
-                size={ComponentSize.ExtraSmall}
-                shape={ButtonShape.Square}
-                onClick={this.handleDelete}
-                icon={IconFont.Remove}
-                type={ButtonType.Button}
-              />
-            )}
-        </div>
+        <div className="threshold-item--label">{this.props.label}</div>
         {!isBase && (
           <Input
             value={workingValue.toString()}
@@ -88,7 +76,18 @@ class Threshold extends PureComponent<Props, State> {
           onChoose={this.handleChooseColor}
           disabled={disableColor}
           stretchToFit={isBase}
+          widthPixels={this.dropdownWidthPixels}
         />
+        {isDeletable &&
+          !isBase && (
+            <Button
+              size={ComponentSize.Small}
+              shape={ButtonShape.Square}
+              onClick={this.handleDelete}
+              icon={IconFont.Remove}
+              type={ButtonType.Button}
+            />
+          )}
       </div>
     )
   }
@@ -100,6 +99,12 @@ class Threshold extends PureComponent<Props, State> {
     onChooseColor({...threshold, hex, name})
   }
 
+  private get dropdownWidthPixels(): number {
+    const {isDeletable} = this.props
+
+    return isDeletable ? 124 : 124 + 34
+  }
+
   private get selectedColor(): SeverityColor {
     const {
       threshold: {hex, name},
@@ -120,14 +125,6 @@ class Threshold extends PureComponent<Props, State> {
     return ComponentStatus.Valid
   }
 
-  private get labelClass(): string {
-    if (this.props.isDeletable) {
-      return 'threshold-item--label threshold-item--label__editable'
-    } else {
-      return 'threshold-item--label'
-    }
-  }
-
   private handleChangeWorkingValue = (e: ChangeEvent<HTMLInputElement>) => {
     const {threshold, onValidateColorValue} = this.props
     const targetValue = e.target.value

ui/src/timeMachine/components/view_options/ThresholdList.scss

@@ -5,6 +5,8 @@
   and Table type cells
 */
 
+@import 'src/style/modules';
+
 .threshold-list {
   display: flex;
   flex-direction: column;
@@ -28,7 +30,7 @@
 }
 
 .threshold-item--label {
-  flex: 0 0 106px;
+  flex: 0 0 76px;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -40,11 +42,7 @@
   border-radius: $radius;
   @include no-user-select();
   background-color: $g4-onyx;
-  color: $g9-mountain;
-
-  &.threshold-item--label__editable  {
-    color: $g13-mist;
-  }
+  color: $g13-mist;
 }
 
 .threshold-item--input {

ui/src/timeMachine/components/view_options/ThresholdList.tsx

@@ -24,7 +24,7 @@ import {
 } from 'src/shared/constants/thresholds'
 
 // Styles
-import 'src/timeMachine/components/view_options/ThresholdList'
+import 'src/timeMachine/components/view_options/ThresholdList.scss'
 
 // Types
 import {Color, ThresholdConfig} from 'src/types/colors'