grafana/ui: Add synced timepickers styling to TimePicker (#21598)

packages/grafana-ui/src/components/TimePicker/TimePicker.tsx

@@ -1,7 +1,6 @@
 // Libraries
 import React, { PureComponent, memo, FormEvent } from 'react';
-import { css } from 'emotion';
-import classNames from 'classnames';
+import { css, cx } from 'emotion';
 
 // Components
 import { Tooltip } from '../Tooltip/Tooltip';
@@ -70,6 +69,23 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
         font-size: ${theme.typography.size.md};
       }
     `,
+    syncedTimePicker: css`
+      label: syncedTimePicker;
+      border-color: ${theme.colors.orangeDark};
+      background-image: none;
+      background-color: transparent;
+      color: ${theme.colors.orangeDark};
+      &:focus,
+      :hover {
+        color: ${theme.colors.orangeDark};
+        background-image: none;
+        background-color: transparent;
+      }
+    `,
+    noRightBorderStyle: css`
+      label: noRightBorderStyle;
+      border-right: 0;
+    `,
   };
 });
 
@@ -140,6 +156,12 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
     const { isOpen } = this.state;
     const styles = getStyles(theme);
     const hasAbsolute = isDateTime(value.raw.from) || isDateTime(value.raw.to);
+    const syncedTimePicker = timeSyncButton && isSynced;
+    const timePickerIconClass = cx('fa fa-clock-o fa-fw', { ['icon-brand-gradient']: syncedTimePicker });
+    const timePickerButtonClass = cx('btn navbar-button navbar-button--zoom', {
+      [`btn--radius-right-0 ${styles.noRightBorderStyle}`]: !!timeSyncButton,
+      [`explore-active-button-glow ${styles.syncedTimePicker}`]: syncedTimePicker,
+    });
 
     return (
       <div className={styles.container}>
@@ -151,12 +173,8 @@ export class UnthemedTimePicker extends PureComponent<Props, State> {
           )}
           <div>
             <Tooltip content={<TimePickerTooltip timeRange={value} />} placement="bottom">
-              <button
-                aria-label="TimePicker Open Button"
-                className="btn navbar-button navbar-button--zoom"
-                onClick={this.onOpen}
-              >
-                <i className={classNames('fa fa-clock-o fa-fw', isSynced && timeSyncButton && 'icon-brand-gradient')} />
+              <button aria-label="TimePicker Open Button" className={timePickerButtonClass} onClick={this.onOpen}>
+                <i className={timePickerIconClass} />
                 <TimePickerButtonLabel {...this.props} />
                 <span className={styles.caretIcon}>
                   {isOpen ? <i className="fa fa-caret-up fa-fw" /> : <i className="fa fa-caret-down fa-fw" />}

public/app/features/explore/TimeSyncButton.tsx

@@ -24,6 +24,14 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
       label: noRightBorderStyle;
       border-right: 0;
     `,
+    /*
+     * Required top-padding, otherwise is fa-link icon in active state
+     * cut off on top due to fontAwesome icon position
+     */
+    topPadding: css`
+      label: topPadding;
+      padding-top: 1px;
+    `,
   };
 });
 
@@ -52,7 +60,7 @@ export function TimeSyncButton(props: TimeSyncButtonProps) {
         aria-label={isSynced ? 'Synced times' : 'Unsynced times'}
         onClick={() => onClick()}
       >
-        <i className={classNames('fa fa-link', isSynced && 'icon-brand-gradient')} />
+        <i className={classNames('fa fa-link', styles.topPadding, isSynced && 'icon-brand-gradient')} />
       </button>
     </Tooltip>
   );

public/app/features/explore/__snapshots__/TimeSyncButton.test.tsx.snap

@@ -21,7 +21,7 @@ exports[`TimeSyncButton should render component 1`] = `
         onMouseLeave={[Function]}
       >
         <i
-          className="fa fa-link icon-brand-gradient"
+          className="fa fa-link css-xmj56l-topPadding icon-brand-gradient"
         />
       </button>
     </PopoverController>