ref(pill): Update pill border/bg color (#21379)

Author: priscilawebdev

src/sentry/static/sentry/app/components/deviceName.tsx

@@ -1,5 +1,6 @@
 import PropTypes from 'prop-types';
 import React from 'react';
+import styled from '@emotion/styled';
 
 import {IOSDeviceList} from 'app/types/iOSDeviceList';
 
@@ -79,9 +80,13 @@ export default class DeviceName extends React.Component<Props, State> {
     const deviceName = deviceNameMapper(value, iOSDeviceList);
 
     return (
-      <span data-test-id="loaded-device-name">
+      <Wrapper data-test-id="loaded-device-name">
         {children ? children(deviceName) : deviceName}
-      </span>
+      </Wrapper>
     );
   }
 }
+
+const Wrapper = styled('span')`
+  vertical-align: middle;
+`;

src/sentry/static/sentry/app/components/pill.tsx

@@ -2,103 +2,103 @@ import React from 'react';
 import styled from '@emotion/styled';
 
 import space from 'app/styles/space';
+import {Theme} from 'app/utils/theme';
 
-type PillProps = {
+enum PILL_TYPE {
+  POSITIVE = 'positive',
+  NEGATIVE = 'negative',
+}
+
+type Props = {
   name: string;
   value: string | boolean | undefined | null;
+  children?: React.ReactNode;
 };
 
-class Pill extends React.PureComponent<PillProps> {
-  getRenderTypeAndValue = () => {
-    const {value} = this.props;
+const Pill = React.memo(({name, value, children}: Props) => {
+  const getTypeAndValue = (): Partial<{type: PILL_TYPE; renderValue: string}> => {
     if (value === undefined) {
       return {};
     }
 
-    let type: PillValueProps['type'];
-    let renderValue: string | undefined;
-
     switch (value) {
       case 'true':
       case true:
-        type = 'positive';
-        renderValue = 'true';
-        break;
+        return {
+          type: PILL_TYPE.POSITIVE,
+          renderValue: 'true',
+        };
       case 'false':
       case false:
-        type = 'negative';
-        renderValue = 'false';
-        break;
+        return {
+          type: PILL_TYPE.NEGATIVE,
+          renderValue: 'false',
+        };
       case null:
       case undefined:
-        type = 'negative';
-        renderValue = 'n/a';
-        break;
+        return {
+          type: PILL_TYPE.NEGATIVE,
+          renderValue: 'n/a',
+        };
       default:
-        renderValue = value.toString();
+        return {
+          type: undefined,
+          renderValue: String(value),
+        };
     }
-
-    return {type, renderValue};
   };
 
-  render() {
-    const {name, children} = this.props;
-    const {type, renderValue} = this.getRenderTypeAndValue();
+  const {type, renderValue} = getTypeAndValue();
+
+  return (
+    <StyledPill type={type}>
+      <PillName>{name}</PillName>
+      <PillValue>{children ?? renderValue}</PillValue>
+    </StyledPill>
+  );
+});
 
-    return (
-      <StyledPill>
-        <PillName>{name}</PillName>
-        <PillValue type={type}>{children || renderValue}</PillValue>
-      </StyledPill>
-    );
+const getPillBorder = ({type, theme}: {type?: PILL_TYPE; theme: Theme}) => {
+  switch (type) {
+    case PILL_TYPE.POSITIVE:
+      return `
+        background: ${theme.green100};
+        border: 1px solid ${theme.green400};
+      `;
+    case PILL_TYPE.NEGATIVE:
+      return `
+        background: ${theme.red100};
+        border: 1px solid ${theme.red400};
+      `;
+    default:
+      return '';
   }
-}
+};
 
-const StyledPill = styled('li')`
-  white-space: nowrap;
-  margin: 0 10px 10px 0;
-  display: flex;
-  border: 1px solid ${p => p.theme.borderDark};
-  border-radius: ${p => p.theme.button.borderRadius};
-  box-shadow: ${p => p.theme.dropShadowLightest};
-  line-height: 1.2;
-  max-width: 100%;
-  &:last-child {
-    margin-right: 0;
+const getPillValueColor = ({type, theme}: {type?: PILL_TYPE; theme: Theme}) => {
+  switch (type) {
+    case PILL_TYPE.POSITIVE:
+      return `
+        border-left-color: ${theme.green400};
+      `;
+    case PILL_TYPE.NEGATIVE:
+      return `
+        border-left-color: ${theme.red400};
+      `;
+    default:
+      return `background: ${theme.gray100};`;
   }
-`;
+};
 
 const PillName = styled('span')`
   padding: ${space(0.5)} ${space(1)};
   min-width: 0;
   white-space: nowrap;
+  display: flex;
+  align-items: center;
 `;
 
-type PillValueProps = {
-  type: 'positive' | 'negative' | undefined;
-};
-const PillValue = styled(PillName)<PillValueProps>`
-  ${p => {
-    switch (p.type) {
-      case 'positive':
-        return `
-          background: ${p.theme.green100};
-          border: 1px solid ${p.theme.green400};
-          margin: -1px;
-        `;
-      case 'negative':
-        return `
-          background: ${p.theme.red100};
-          border: 1px solid ${p.theme.red400};
-          margin: -1px;
-        `;
-      default:
-        return `
-          background: ${p.theme.gray100};
-        `;
-    }
-  }}
-
+const PillValue = styled(PillName)`
   border-left: 1px solid ${p => p.theme.borderDark};
   border-radius: ${p =>
     `0 ${p.theme.button.borderRadius} ${p.theme.button.borderRadius} 0`};
@@ -127,4 +127,24 @@ const PillValue = styled(PillName)<PillValueProps>`
   }
 `;
 
+const StyledPill = styled('li')<{type?: PILL_TYPE}>`
+  white-space: nowrap;
+  margin: 0 10px 10px 0;
+  display: flex;
+  border: 1px solid ${p => p.theme.borderDark};
+  border-radius: ${p => p.theme.button.borderRadius};
+  box-shadow: ${p => p.theme.dropShadowLightest};
+  line-height: 1;
+  max-width: 100%;
+  :last-child {
+    margin-right: 0;
+  }
+
+  ${getPillBorder};
+
+  ${PillValue} {
+    ${getPillValueColor};
+  }
+`;
+
 export default Pill;