Tag component tweaks to get rid of hardcoded tag variables (#4280)

# What this PR does - Removed the usage of `var(--` within the Tag component to help get rid of the vars file once we fully migrate to emotion - Added few other display tweaks and migrated a few stylesheets to emotion
grafana · Apr 29, 2024 · 6ed7a1e · 6ed7a1e
1 parent 0e59fad
commit 6ed7a1e
Show file tree

Hide file tree

Showing 37 changed files with 446 additions and 434 deletions.
diff --git a/grafana-plugin/package.json b/grafana-plugin/package.json
@@ -174,6 +174,7 @@
     "stylelint": "^13.13.1",
     "stylelint-config-standard": "^22.0.0",
     "throttle-debounce": "^2.1.0",
+    "tinycolor2": "^1.6.0",
     "tslib": "2.5.3"
   },
   "packageManager": "[email protected]"

diff --git a/grafana-plugin/src/components/CardButton/CardButton.styles.ts b/grafana-plugin/src/components/CardButton/CardButton.styles.ts
@@ -23,17 +23,15 @@ export const getCardButtonStyles = (theme: GrafanaTheme2) => {
     `,
 
     rootSelected: css`
-       {
-        &::before {
-          display: block;
-          content: '';
-          position: absolute;
-          left: 0;
-          top: 0;
-          bottom: 0;
-          width: 4px;
-          background-image: linear-gradient(270deg, #f55f3e 0%, #f83 100%);
-        }
+      &::before {
+        display: block;
+        content: '';
+        position: absolute;
+        left: 0;
+        top: 0;
+        bottom: 0;
+        width: 4px;
+        background-image: ${theme.colors.gradients.brandVertical};
       }
     `,
   };

diff --git a/grafana-plugin/src/components/Integrations/IntegrationTag.tsx b/grafana-plugin/src/components/Integrations/IntegrationTag.tsx
@@ -1,10 +1,9 @@
 import React, { FC } from 'react';
 
 import { css } from '@emotion/css';
-import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
 
-import { Tag } from 'components/Tag/Tag';
+import { Tag, TagColor } from 'components/Tag/Tag';
 import { Text } from 'components/Text/Text';
 
 interface IntegrationTagProps {
@@ -15,19 +14,17 @@ export const IntegrationTag: FC<IntegrationTagProps> = ({ children }) => {
   const styles = useStyles2(getStyles);
 
   return (
-    <Tag className={styles.tag}>
+    <Tag className={styles.tag} color={TagColor.SECONDARY}>
       <Text type="primary" size="small" className={styles.radius}>
         {children}
       </Text>
     </Tag>
   );
 };
 
-export const getStyles = (theme: GrafanaTheme2) => ({
+export const getStyles = () => ({
   tag: css({
     height: '25px',
-    background: theme.colors.background.secondary,
-    border: `1px solid ${theme.colors.border.weak}`,
   }),
   radius: css({
     borderRadius: '4px',

diff --git a/grafana-plugin/src/components/Policy/EscalationPolicy.tsx b/grafana-plugin/src/components/Policy/EscalationPolicy.tsx
@@ -7,6 +7,7 @@ import { observer } from 'mobx-react';
 import moment from 'moment-timezone';
 import { SortableElement } from 'react-sortable-hoc';
 import reactStringReplace from 'react-string-replace';
+import { getLabelBackgroundTextColorObject } from 'styles/utils.styles';
 
 import { PluginLink } from 'components/PluginLink/PluginLink';
 import { Text } from 'components/Text/Text';
@@ -28,7 +29,6 @@ import { UserGroup } from 'models/user_group/user_group.types';
 import { ApiSchemas } from 'network/oncall-api/api.types';
 import { SelectOption, WithStoreProps } from 'state/types';
 import { withMobXProviderContext } from 'state/withStore';
-import { getVar } from 'utils/DOM';
 import { UserActions } from 'utils/authorization/authorization';
 
 import { DragHandle } from './DragHandle';
@@ -80,12 +80,14 @@ class _EscalationPolicy extends React.Component<EscalationPolicyProps, any> {
       (escalationOption: EscalationPolicyOption) => escalationOption.value === step
     );
 
+    const { textColor: itemTextColor } = getLabelBackgroundTextColorObject('green', this.props.theme);
+
     return (
       <Timeline.Item
         key={id}
         contentClassName={cx(this.styles.root)}
         number={number}
-        textColor={isDisabled ? getVar('--tag-text-success') : undefined}
+        textColor={isDisabled ? itemTextColor : undefined}
         backgroundClassName={backgroundClassName}
         backgroundHexNumber={backgroundHexNumber}
       >

diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.styles.ts b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.styles.ts
@@ -17,27 +17,6 @@ export const getScheduleQualityStyles = (_theme: GrafanaTheme2) => {
     tag: css`
       font-size: 12px;
       padding: 5px 10px;
-
-      &--danger {
-        // TODO: emotionjs
-        background-color: var(--tag-background-danger);
-        color: var(--tag-text-danger);
-        border: 1px solid var(--tag-border-danger);
-      }
-
-      &--warning {
-        // TODO: emotionjs
-        background-color: var(--tag-background-warning);
-        color: var(--tag-text-warning);
-        border: 1px solid var(--tag-border-warning);
-      }
-
-      &--primary {
-        // TODO: emotionjs
-        background-color: var(--tag-background-success);
-        color: var(--tag-text-success);
-        border: 1px solid var(--tag-border-success);
-      }
     `,
   };
 };
diff --git a/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx b/grafana-plugin/src/components/ScheduleQuality/ScheduleQuality.tsx
@@ -3,11 +3,11 @@ import React, { FC, useEffect } from 'react';
 import { cx } from '@emotion/css';
 import { Tooltip, VerticalGroup, useStyles2 } from '@grafana/ui';
 import { observer } from 'mobx-react';
-import { bem, getUtilStyles } from 'styles/utils.styles';
+import { getUtilStyles } from 'styles/utils.styles';
 
 import { PluginLink } from 'components/PluginLink/PluginLink';
 import { ScheduleQualityDetails } from 'components/ScheduleQualityDetails/ScheduleQualityDetails';
-import { Tag } from 'components/Tag/Tag';
+import { Tag, TagColor } from 'components/Tag/Tag';
 import { Text } from 'components/Text/Text';
 import { TooltipBadge } from 'components/TooltipBadge/TooltipBadge';
 import { Schedule, ScheduleScoreQualityResult } from 'models/schedule/schedule.types';
@@ -88,7 +88,7 @@ export const ScheduleQuality: FC<ScheduleQualityProps> = observer(({ schedule })
           content={<ScheduleQualityDetails quality={quality} getScheduleQualityString={getScheduleQualityString} />}
         >
           <div className={cx(utils.cursorDefault)}>
-            <Tag className={cx(styles.tag, bem(styles.tag, getTagSeverity()))}>
+            <Tag className={cx(styles.tag)} color={getTagSeverity()}>
               Quality: <strong>{getScheduleQualityString(quality.total_score)}</strong>
             </Tag>
           </div>
@@ -115,11 +115,11 @@ export const ScheduleQuality: FC<ScheduleQualityProps> = observer(({ schedule })
 
   function getTagSeverity() {
     if (quality?.total_score < 20) {
-      return 'danger';
+      return TagColor.ERROR_LABEL;
     }
     if (quality?.total_score < 60) {
-      return 'warning';
+      return TagColor.WARNING_LABEL;
     }
-    return 'primary';
+    return TagColor.SUCCESS_LABEL;
   }
 });
diff --git a/grafana-plugin/src/components/Tag/Tag.tsx b/grafana-plugin/src/components/Tag/Tag.tsx
@@ -3,10 +3,10 @@ import React, { FC } from 'react';
 import { css, cx } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
 import { useStyles2 } from '@grafana/ui';
-import { bem } from 'styles/utils.styles';
+import { bem, getLabelCss } from 'styles/utils.styles';
 
 interface TagProps {
-  color?: string;
+  color?: string | TagColor;
   className?: string;
   border?: string;
   text?: string;
@@ -16,43 +16,89 @@ interface TagProps {
   size?: 'small' | 'medium';
 }
 
+export enum TagColor {
+  SUCCESS = 'success',
+  WARNING = 'warning',
+  ERROR = 'error',
+  SECONDARY = 'secondary',
+  INFO = 'info',
+
+  SUCCESS_LABEL = 'successLabel',
+  WARNING_LABEL = 'warningLabel',
+  ERROR_LABEL = 'errorLabel',
+}
+
 export const Tag: FC<TagProps> = (props) => {
+  const { color, children, className, onClick, size = 'medium' } = props;
+
   const styles = useStyles2(getStyles);
-  const { children, color, text, className, border, onClick, size = 'medium' } = props;
-  const style: React.CSSProperties = {
-    backgroundColor: color,
-    color: text,
-    border,
-  };
 
   return (
     <span
-      style={style}
-      className={cx(styles.root, bem(styles.root, size), className)}
+      className={cx(styles.root, bem(styles.root, size), getMatchingClass(), className)}
       onClick={onClick}
       ref={props.forwardedRef}
     >
       {children}
     </span>
   );
-};
 
-const getStyles = (_theme: GrafanaTheme2) => {
-  return {
-    root: css`
-      border-radius: 2px;
-      line-height: 100%;
-      padding: 5px 8px;
-      color: #fff;
-      display: inline-block;
-      white-space: nowrap;
-    `,
-
-    size: css`
-      &--small {
-        font-size: 12px;
-        height: 24px;
-      }
-    `,
-  };
+  function getMatchingClass() {
+    return styles[color]
+      ? // Either pick a defined style already or create one on the spot with the passed bgColor
+        styles[color]
+      : css`
+          background-color: ${color};
+          color: text;
+        `;
+  }
+
+  function getStyles(theme: GrafanaTheme2) {
+    return {
+      root: css`
+        border-radius: 2px;
+        line-height: 100%;
+        padding: 5px 8px;
+        display: inline-block;
+        white-space: nowrap;
+      `,
+
+      size: css`
+        &--small {
+          font-size: 12px;
+          height: 24px;
+        }
+      `,
+
+      success: css`
+        background-color: ${theme.colors.success.main};
+        border: solid 1px ${theme.colors.success.main};
+        color: ${theme.isDark ? '#fff' : theme.colors.success.contrastText};
+      `,
+      warning: css`
+        background-color: ${theme.colors.warning.main};
+        border: solid 1px ${theme.colors.warning.main};
+        color: #fff;
+      `,
+      error: css`
+        background-color: ${theme.colors.error.main};
+        border: solid 1px ${theme.colors.error.main};
+        color: ${theme.isDark ? '#fff' : theme.colors.error.contrastText};
+      `,
+      secondary: css`
+        background-color: ${theme.colors.secondary.main};
+        border: solid 1px ${theme.colors.secondary.main};
+        color: ${theme.isDark ? '#fff' : theme.colors.secondary.contrastText};
+      `,
+      info: css`
+        background-color: ${theme.colors.primary.main};
+        border: solid 1px ${theme.colors.primary.main};
+        color: ${theme.isDark ? '#fff' : theme.colors.info.contrastText};
+      `,
+
+      successLabel: getLabelCss('green', theme),
+      warningLabel: getLabelCss('orange', theme),
+      errorLabel: getLabelCss('red', theme),
+    };
+  }
 };
diff --git a/grafana-plugin/src/components/Text/Text.styles.ts b/grafana-plugin/src/components/Text/Text.styles.ts
@@ -7,8 +7,8 @@ export const getTextStyles = (theme: GrafanaTheme2) => {
     root: css`
       display: inline;
 
-      &:hover .icon-button {
-        display: inline-block;
+      &:hover [data-emotion='iconButton'] {
+        display: inline-flex;
       }
     `,
 

diff --git a/grafana-plugin/src/components/Text/Text.tsx b/grafana-plugin/src/components/Text/Text.tsx
@@ -91,8 +91,8 @@ export const Text: TextInterface = (props) => {
         styles.root,
         styles.text,
         { [styles.maxWidth]: Boolean(maxWidth) },
-        { [bem(styles.text, `${type}`)]: true },
-        { [bem(styles.text, `${size}`)]: true },
+        { [bem(styles.text, type)]: true },
+        { [bem(styles.text, size)]: true },
         { [bem(styles.text, `strong`)]: strong },
         { [bem(styles.text, `underline`)]: underline },
         { [bem(styles.text, 'clickable')]: clickable },
@@ -109,6 +109,7 @@ export const Text: TextInterface = (props) => {
           className={styles.iconButton}
           tooltip="Edit"
           tooltipPlacement="top"
+          data-emotion="iconButton"
           name="pen"
         />
       )}
@@ -124,6 +125,7 @@ export const Text: TextInterface = (props) => {
             className={styles.iconButton}
             tooltip="Copy to clipboard"
             tooltipPlacement="top"
+            data-emotion="iconButton"
             name="copy"
           />
         </CopyToClipboard>

diff --git a/grafana-plugin/src/components/TooltipBadge/TooltipBadge.styles.ts b/grafana-plugin/src/components/TooltipBadge/TooltipBadge.styles.ts
@@ -1,45 +1,27 @@
 import { css } from '@emotion/css';
 import { GrafanaTheme2 } from '@grafana/data';
+import { getLabelCss } from 'styles/utils.styles';
 
 export const getTooltipBadgeStyles = (theme: GrafanaTheme2) => {
   return {
+    primary: getLabelCss('blue', theme),
+    warning: getLabelCss('orange', theme),
+    success: getLabelCss('green', theme),
+    danger: getLabelCss('red', theme),
+
+    secondary: css`
+      background: ${theme.colors.background.secondary};
+      border: 1px solid ${theme.colors.border.weak};
+      color: ${theme.colors.text.primary};
+    `,
+
     element: css`
       font-size: 12px;
       line-height: 16px;
       padding: 3px 4px;
       border-radius: 2px;
       display: inline-block;
 
-      &--primary {
-        background: var(--tag-background-primary);
-        border: 1px solid var(--tag-border-primary);
-        color: var(--tag-text-primary);
-      }
-
-      &--secondary {
-        background: ${theme.colors.background.secondary};
-        border: 1px solid ${theme.colors.border.weak};
-        color: ${theme.colors.text.primary};
-      }
-
-      &--warning {
-        background: var(--tag-background-warning);
-        border: 1px solid var(--tag-border-warning);
-        color: var(--tag-text-warning);
-      }
-
-      &--success {
-        background: var(--tag-background-success);
-        border: 1px solid var(--tag-border-success);
-        color: var(--tag-text-success);
-      }
-
-      &--danger {
-        background: var(--tag-background-danger);
-        border: 1px solid var(--tag-border-danger);
-        color: var(--tag-text-danger);
-      }
-
       &--padding {
         padding: 3px 10px;
       }