Polish Dropdowns (#12499)

* Remove large left padding on dropdown items in action mode

No need to make room for the highlighted dot. Also prettier formatted the file

* Animate rotation of dropdown caret

* Fix autorefresh dropdown highlighting

* Add divider with label to time range dropdown

ui/src/clockface/components/dropdowns/Dropdown.scss

@@ -54,7 +54,7 @@
   &.checked {
     color: $g20-white;
   }
-  
+
   &.checked {
     padding-left: 24px;
   }
@@ -67,7 +67,11 @@
   .dropdown-wrap & {
     word-break: break-all;
     white-space: pre-wrap;
-  } 
+  }
+
+  .dropdown--action & {
+    padding-left: 11px;
+  }
 }
 
 .dropdown-item--dot {
@@ -123,12 +127,12 @@
     width: 6px;
     height: 6px;
     opacity: 0;
-    transform: translate(-50%,-50%) scale(1.5,1.5);
+    transform: translate(-50%, -50%) scale(1.5, 1.5);
   }
 
   .active &:after {
     opacity: 1;
-    transform: translate(-50%,-50%) scale(1,1);
+    transform: translate(-50%, -50%) scale(1, 1);
   }
 
   .checked &:after {
@@ -138,7 +142,17 @@
 
 /* Themes */
 
-@mixin dropdownMenuColor($backgroundA, $backgroundB, $hoverA, $hoverB, $dividerA, $dividerB, $dividerText, $scrollA, $scrollB) {
+@mixin dropdownMenuColor(
+  $backgroundA,
+  $backgroundB,
+  $hoverA,
+  $hoverB,
+  $dividerA,
+  $dividerB,
+  $dividerText,
+  $scrollA,
+  $scrollB
+) {
   @include gradient-h($backgroundA, $backgroundB);
 
   .dropdown--item:hover,
@@ -164,19 +178,59 @@
 }
 
 .dropdown--amethyst {
-  @include dropdownMenuColor($c-star, $c-pool, $c-comet, $c-laser, $c-amethyst, $c-ocean, $c-potassium, $c-neutrino, $c-hydrogen);
+  @include dropdownMenuColor(
+    $c-star,
+    $c-pool,
+    $c-comet,
+    $c-laser,
+    $c-amethyst,
+    $c-ocean,
+    $c-potassium,
+    $c-neutrino,
+    $c-hydrogen
+  );
 }
 
 .dropdown--sapphire {
-  @include dropdownMenuColor($c-ocean, $c-pool, $c-pool, $c-laser, $c-sapphire, $c-ocean, $c-laser, $c-neutrino, $c-hydrogen);
+  @include dropdownMenuColor(
+    $c-ocean,
+    $c-pool,
+    $c-pool,
+    $c-laser,
+    $c-sapphire,
+    $c-ocean,
+    $c-laser,
+    $c-neutrino,
+    $c-hydrogen
+  );
 }
 
 .dropdown--malachite {
-  @include dropdownMenuColor($c-pool, $c-rainforest, $c-laser, $c-honeydew, $c-ocean, $c-viridian, $c-krypton, $c-neutrino, $c-krypton);
+  @include dropdownMenuColor(
+    $c-pool,
+    $c-rainforest,
+    $c-laser,
+    $c-honeydew,
+    $c-ocean,
+    $c-viridian,
+    $c-krypton,
+    $c-neutrino,
+    $c-krypton
+  );
 }
 
 .dropdown--onyx {
-  @include dropdownMenuColor($g2-kevlar, $g4-onyx, $g4-onyx, $g6-smoke, $g0-obsidian, $g2-kevlar, $g11-sidewalk, $c-pool, $c-comet);
+  @include dropdownMenuColor(
+    $g2-kevlar,
+    $g4-onyx,
+    $g4-onyx,
+    $g6-smoke,
+    $g0-obsidian,
+    $g2-kevlar,
+    $g11-sidewalk,
+    $c-pool,
+    $c-comet
+  );
 }
 
 /* TODO: Make fancyscroll more customizable */

ui/src/clockface/components/dropdowns/Dropdown.tsx

@@ -103,7 +103,14 @@ class Dropdown extends Component<Props, State> {
   }
 
   private get containerClassName(): string {
-    const {buttonColor, buttonSize, status, wrapText, customClass} = this.props
+    const {
+      buttonColor,
+      buttonSize,
+      status,
+      wrapText,
+      customClass,
+      mode,
+    } = this.props
 
     return classnames(
       `dropdown dropdown-${buttonSize} dropdown-${buttonColor}`,
@@ -111,6 +118,7 @@ class Dropdown extends Component<Props, State> {
         disabled: status === ComponentStatus.Disabled,
         'dropdown-wrap': wrapText,
         [customClass]: customClass,
+        [`dropdown--${mode}`]: mode,
       }
     )
   }

ui/src/clockface/components/dropdowns/DropdownButton.scss

@@ -30,6 +30,11 @@
 .dropdown--caret {
   margin: 0;
   font-size: 0.9em;
+  transition: transform 0.25s ease;
+
+  .active & {
+    transform: translateY(-50%) rotate(-180deg);
+  }
 }
 
 /* Button Size Modifiers */

ui/src/clockface/components/dropdowns/DropdownButton.tsx

@@ -48,21 +48,11 @@ class DropdownButton extends Component<Props> {
       >
         {this.icon}
         <span className="dropdown--selected">{children}</span>
-        {this.caret}
+        <span className="dropdown--caret icon caret-down" />
       </button>
     )
   }
 
-  private get caret(): JSX.Element {
-    const {active} = this.props
-
-    if (active) {
-      return <span className="dropdown--caret icon caret-up" />
-    }
-
-    return <span className="dropdown--caret icon caret-down" />
-  }
-
   private get isDisabled(): boolean {
     const {status} = this.props
 

ui/src/shared/components/TimeRangeDropdown.tsx

@@ -10,7 +10,8 @@ import DateRangePicker from 'src/shared/components/dateRangePicker/DateRangePick
 // Constants
 import {
   TIME_RANGES,
-  CUSTOM_TIME_RANGE,
+  TIME_RANGE_LABEL,
+  CUSTOM_TIME_RANGE_LABEL,
   TIME_RANGE_FORMAT,
 } from 'src/shared/constants/timeRanges'
 
@@ -56,11 +57,16 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
             widthPixels={this.dropdownWidth}
             titleText={this.formattedCustomTimeRange}
           >
-            {TIME_RANGES.map(({label}) => (
-              <Dropdown.Item key={label} value={label} id={label}>
-                {label}
-              </Dropdown.Item>
-            ))}
+            {TIME_RANGES.map(({label}) => {
+              if (label === TIME_RANGE_LABEL) {
+                return <Dropdown.Divider key={label} text={label} id={label} />
+              }
+              return (
+                <Dropdown.Item key={label} value={label} id={label}>
+                  {label}
+                </Dropdown.Item>
+              )
+            })}
           </Dropdown>
         </div>
       </>
@@ -78,7 +84,8 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
   private get isCustomTimeRange(): boolean {
     const {timeRange} = this.props
     return (
-      get(timeRange, 'label', '') === CUSTOM_TIME_RANGE || !!timeRange.upper
+      get(timeRange, 'label', '') === CUSTOM_TIME_RANGE_LABEL ||
+      !!timeRange.upper
     )
   }
 
@@ -104,7 +111,7 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
       const lower =
         timeRange.lower && this.isCustomTimeRange ? timeRange.lower : date
       return {
-        label: CUSTOM_TIME_RANGE,
+        label: CUSTOM_TIME_RANGE_LABEL,
         lower,
         upper,
       }
@@ -143,7 +150,7 @@ class TimeRangeDropdown extends PureComponent<Props, State> {
     const {onSetTimeRange} = this.props
     const timeRange = TIME_RANGES.find(t => t.label === label)
 
-    if (label === CUSTOM_TIME_RANGE) {
+    if (label === CUSTOM_TIME_RANGE_LABEL) {
       const {top, left} = this.dropdownRef.current.getBoundingClientRect()
       const right = window.innerWidth - left
       this.setState({isDatePickerOpen: true, dropdownPosition: {top, right}})

ui/src/shared/constants/timeRanges.ts

@@ -1,12 +1,17 @@
 import {TimeRange} from 'src/types'
 
-export const CUSTOM_TIME_RANGE = 'Custom Time Range'
+export const TIME_RANGE_LABEL = 'Time Range'
+export const CUSTOM_TIME_RANGE_LABEL = 'Custom Time Range'
 export const TIME_RANGE_FORMAT = 'YYYY-MM-DD HH:mm'
 
 export const TIME_RANGES: TimeRange[] = [
   {
     lower: '',
-    label: CUSTOM_TIME_RANGE,
+    label: TIME_RANGE_LABEL,
+  },
+  {
+    lower: '',
+    label: CUSTOM_TIME_RANGE_LABEL,
   },
   {
     seconds: 300,

ui/src/shared/data/autoRefreshes.ts

@@ -13,7 +13,7 @@ export interface AutoRefreshOption {
 const autoRefreshOptions: AutoRefreshOption[] = [
   {
     id: 'auto-refresh-header',
-    milliseconds: 0,
+    milliseconds: 1,
     label: 'Refresh',
     type: AutoRefreshOptionType.Header,
   },