Update status component: new color and shape of indicator (#811)

Co-authored-by: Wojciech Adaszynski <wojciecha@spotify.com>

packages/core/src/components/Status/Status.stories.tsx

@@ -17,8 +17,7 @@
 import React from 'react';
 import {
   StatusError,
-  StatusFailed,
-  StatusNA,
+  StatusAborted,
   StatusOK,
   StatusPending,
   StatusRunning,
@@ -34,45 +33,34 @@ export default {
 
 const data = [
   {
-    status: <StatusOK />,
+    status: <StatusOK>OK</StatusOK>,
     label: 'OK',
     usage: 'Deployment successful',
   },
   {
-    status: <StatusWarning />,
-    label: 'Warning',
+    status: <StatusWarning>Warning</StatusWarning>,
     usage: 'CPU utilization at 90%',
   },
   {
-    status: <StatusError />,
-    label: 'Error',
+    status: <StatusError>Error</StatusError>,
     usage: 'Service could not be created',
   },
   {
-    status: <StatusFailed />,
-    label: 'Failed',
-    usage: 'Build for PR #34 failed',
+    status: <StatusAborted>Aborted</StatusAborted>,
+    usage: 'Build for PR #34 aborted',
   },
   {
-    status: <StatusPending />,
-    label: 'Pending',
+    status: <StatusPending>Pending</StatusPending>,
     usage: 'Job is waiting',
   },
   {
-    status: <StatusRunning />,
-    label: 'Running',
+    status: <StatusRunning>Running</StatusRunning>,
     usage: 'Job is running',
   },
-  {
-    status: <StatusNA />,
-    label: 'N/A',
-    usage: 'Not sure what to do',
-  },
 ];
 
 const columns = [
   { field: 'status', title: 'Status' },
-  { field: 'label', title: 'Label' },
   { field: 'usage', title: 'Example usage' },
 ];
 
@@ -97,7 +85,6 @@ export const Default = () => (
 export const statusOK = () => <StatusOK />;
 export const statusWarning = () => <StatusWarning />;
 export const statusError = () => <StatusError />;
-export const statusFailed = () => <StatusFailed />;
+export const statusAborted = () => <StatusAborted />;
 export const statusPending = () => <StatusPending />;
 export const statusRunning = () => <StatusRunning />;
-export const statusNA = () => <StatusNA />;

packages/core/src/components/Status/Status.tsx

@@ -21,32 +21,46 @@ import React, { FC } from 'react';
 
 const useStyles = makeStyles<BackstageTheme>((theme) => ({
   status: {
-    width: 12,
-    height: 12,
-    display: 'inline-block',
-    marginRight: 1,
+    fontWeight: 500,
+    '&::before': {
+      width: '0.7em',
+      height: '0.7em',
+      display: 'inline-block',
+      marginRight: 8,
+      borderRadius: '50%',
+      content: '""',
+    },
   },
   ok: {
-    backgroundColor: theme.palette.status.ok,
-    borderRadius: '50%',
+    '&::before': {
+      backgroundColor: theme.palette.status.ok,
+    },
   },
   warning: {
-    backgroundColor: theme.palette.status.warning,
+    '&::before': {
+      backgroundColor: theme.palette.status.warning,
+    },
   },
   error: {
-    // Use same for Failed status.
-    width: '0',
-    height: '0',
-    borderLeft: '7px solid transparent',
-    borderRight: '7px solid transparent',
-    borderBottom: `14px solid ${theme.palette.status.error}`,
+    '&::before': {
+      backgroundColor: theme.palette.status.error,
+    },
   },
   pending: {
-    backgroundColor: theme.palette.status.pending,
+    '&::before': {
+      backgroundColor: theme.palette.status.pending,
+    },
   },
   running: {
-    animation: '$blink 0.8s step-start 0s infinite',
-    backgroundColor: theme.palette.status.running,
+    '&::before': {
+      backgroundColor: theme.palette.status.running,
+      animation: '$blink 0.8s step-start 0s infinite',
+    },
+  },
+  aborted: {
+    '&::before': {
+      backgroundColor: theme.palette.status.aborted,
+    },
   },
   '@keyframes blink': {
     '50%': {
@@ -57,43 +71,23 @@ const useStyles = makeStyles<BackstageTheme>((theme) => ({
 
 export const StatusOK: FC<{}> = (props) => {
   const classes = useStyles(props);
-  return (
-    <span
-      className={classNames(classes.status, classes.ok)}
-      aria-label="Status OK"
-      {...props}
-    />
-  );
+  return <span className={classNames(classes.status, classes.ok)} {...props} />;
 };
 
 export const StatusWarning: FC<{}> = (props) => {
   const classes = useStyles(props);
   return (
-    <span
-      className={classNames(classes.status, classes.warning)}
-      aria-label="Status warning"
-      {...props}
-    />
+    <span className={classNames(classes.status, classes.warning)} {...props} />
   );
 };
 
 export const StatusError: FC<{}> = (props) => {
   const classes = useStyles(props);
   return (
-    <span
-      className={classNames(classes.status, classes.error)}
-      aria-label="Status error"
-      {...props}
-    />
+    <span className={classNames(classes.status, classes.error)} {...props} />
   );
 };
 
-export const StatusNA: FC<{}> = (props) => (
-  <span aria-label="Status N/A" {...props}>
-    N/A
-  </span>
-);
-
 export const StatusPending: FC<{}> = (props) => {
   const classes = useStyles(props);
   return (
@@ -116,12 +110,12 @@ export const StatusRunning: FC<{}> = (props) => {
   );
 };
 
-export const StatusFailed: FC<{}> = (props) => {
+export const StatusAborted: FC<{}> = (props) => {
   const classes = useStyles(props);
   return (
     <span
-      className={classNames(classes.status, classes.error)}
-      aria-label="Status failed"
+      className={classNames(classes.status, classes.aborted)}
+      aria-label="Status aborted"
       {...props}
     />
   );

packages/core/src/components/Status/index.ts

@@ -16,8 +16,7 @@
 
 export {
   StatusError,
-  StatusFailed,
-  StatusNA,
+  StatusAborted,
   StatusOK,
   StatusPending,
   StatusRunning,

packages/theme/src/themes.ts

@@ -23,11 +23,12 @@ export const lightTheme = createTheme({
     default: '#F8F8F8',
   },
   status: {
-    ok: '#1db855',
-    warning: '#f49b20',
-    error: '#CA001B',
-    running: '#BEBEBE',
-    pending: '#5BC0DE',
+    ok: '#1DB954',
+    warning: '#FF9800',
+    error: '#E22134',
+    running: '#2E77D0',
+    pending: '#FFED51',
+    aborted: '#757575',
     background: '#F8F8F8',
   },
   bursts: {
@@ -63,12 +64,13 @@ export const darkTheme = createTheme({
     default: '#333333',
   },
   status: {
-    ok: '#1db855',
-    warning: '#f49b20',
-    error: '#CA001B',
-    running: '#BEBEBE',
-    pending: '#5BC0DE',
-    background: '#282828',
+    ok: '#1DB954',
+    warning: '#FF9800',
+    error: '#E22134',
+    running: '#2E77D0',
+    pending: '#FFED51',
+    aborted: '#757575',
+    background: '#F8F8F8',
   },
   bursts: {
     fontColor: '#FEFEFE',

packages/theme/src/types.ts

@@ -27,6 +27,7 @@ type PaletteAdditions = {
     error: string;
     pending: string;
     running: string;
+    aborted: string;
     background: string;
   };
   border: string;