[EuiBeacon] Add color prop (#6420)

* [EuiBeacon] Add color prop * Add CL entry * Omit color field from HTMLAttributes * Remove color parameter from Emotion style function and return styles with individual color keys instead Co-authored-by: Constance Chen <constance.chen.3@gmail.com>
elastic · Nov 23, 2022 · bf20f2a · bf20f2a
1 parent 3f7bd87
commit bf20f2a
Show file tree

Hide file tree

Showing 6 changed files with 124 additions and 21 deletions.
diff --git a/src/components/beacon/__snapshots__/beacon.test.tsx.snap b/src/components/beacon/__snapshots__/beacon.test.tsx.snap
@@ -1,19 +1,73 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`EuiBeacon accepts size 1`] = `
+exports[`EuiBeacon is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2 emotion-euiBeacon"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success"
   data-test-subj="test subject string"
-  style="height:14px;width:14px"
+  style="height:12px;width:12px"
 />
 `;
 
-exports[`EuiBeacon is rendered 1`] = `
+exports[`EuiBeacon props color accent is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-accent"
+  data-test-subj="test subject string"
+  style="height:12px;width:12px"
+/>
+`;
+
+exports[`EuiBeacon props color danger is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-danger"
+  data-test-subj="test subject string"
+  style="height:12px;width:12px"
+/>
+`;
+
+exports[`EuiBeacon props color primary is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-primary"
+  data-test-subj="test subject string"
+  style="height:12px;width:12px"
+/>
+`;
+
+exports[`EuiBeacon props color subdued is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-subdued"
+  data-test-subj="test subject string"
+  style="height:12px;width:12px"
+/>
+`;
+
+exports[`EuiBeacon props color success is rendered 1`] = `
 <div
   aria-label="aria-label"
-  class="euiBeacon testClass1 testClass2 emotion-euiBeacon"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success"
   data-test-subj="test subject string"
   style="height:12px;width:12px"
 />
 `;
+
+exports[`EuiBeacon props color warning is rendered 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-warning"
+  data-test-subj="test subject string"
+  style="height:12px;width:12px"
+/>
+`;
+
+exports[`EuiBeacon props size accepts size 1`] = `
+<div
+  aria-label="aria-label"
+  class="euiBeacon testClass1 testClass2 emotion-euiBeacon-success"
+  data-test-subj="test subject string"
+  style="height:14px;width:14px"
+/>
+`;
diff --git a/src/components/beacon/beacon.styles.ts b/src/components/beacon/beacon.styles.ts
@@ -7,14 +7,22 @@
  */
 
 import { keyframes, css } from '@emotion/react';
-import { euiPaletteColorBlind } from '../../services';
+import { UseEuiTheme } from '../../services';
 import {
   euiCanAnimate,
   logicalCSS,
   logicalSizeCSS,
 } from '../../global_styling';
 
-const visColors = euiPaletteColorBlind();
+const _colorCSS = (color: string) => {
+  return `
+    background-color: ${color};
+    &:before,
+    &:after {
+      box-shadow: 0 0 1px 1px ${color};
+    }
+  `;
+};
 
 const euiBeaconPulseLarge = keyframes`
  0% {
@@ -48,11 +56,10 @@ const euiBeaconPulseSmall = keyframes`
   }
 `;
 
-export const euiBeaconStyles = () => ({
+export const euiBeaconStyles = ({ euiTheme }: UseEuiTheme) => ({
   // Base
   euiBeacon: css`
     position: relative;
-    background-color: ${visColors[0]};
     border-radius: 50%;
 
     &:before,
@@ -64,7 +71,6 @@ export const euiBeaconStyles = () => ({
       ${logicalCSS('top', 0)}
       background-color: transparent;
       border-radius: 50%;
-      box-shadow: 0 0 1px 1px ${visColors[0]};
     }
 
     // Without the animation, we only display one ring around the circle
@@ -88,4 +94,10 @@ export const euiBeaconStyles = () => ({
       }
     }
   `,
+  subdued: css(_colorCSS(euiTheme.colors.subduedText)),
+  primary: css(_colorCSS(euiTheme.colors.primary)),
+  success: css(_colorCSS(euiTheme.colors.success)),
+  warning: css(_colorCSS(euiTheme.colors.warning)),
+  danger: css(_colorCSS(euiTheme.colors.danger)),
+  accent: css(_colorCSS(euiTheme.colors.accent)),
 });
diff --git a/src/components/beacon/beacon.test.tsx b/src/components/beacon/beacon.test.tsx
@@ -11,7 +11,7 @@ import { render } from 'enzyme';
 import { requiredProps } from '../../test/required_props';
 import { shouldRenderCustomStyles } from '../../test/internal';
 
-import { EuiBeacon } from './beacon';
+import { EuiBeacon, COLORS } from './beacon';
 
 describe('EuiBeacon', () => {
   shouldRenderCustomStyles(<EuiBeacon />);
@@ -22,9 +22,24 @@ describe('EuiBeacon', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('accepts size', () => {
-    const component = render(<EuiBeacon size={14} {...requiredProps} />);
+  describe('props', () => {
+    describe('color', () => {
+      COLORS.forEach((color) => {
+        it(`${color} is rendered`, () => {
+          const component = render(
+            <EuiBeacon color={color} {...requiredProps} />
+          );
 
-    expect(component).toMatchSnapshot();
+          expect(component).toMatchSnapshot();
+        });
+      });
+    });
+    describe('size', () => {
+      it('accepts size', () => {
+        const component = render(<EuiBeacon size={14} {...requiredProps} />);
+
+        expect(component).toMatchSnapshot();
+      });
+    });
   });
 });
diff --git a/src/components/beacon/beacon.tsx b/src/components/beacon/beacon.tsx
@@ -11,24 +11,45 @@ import { CommonProps } from '../common';
 import classNames from 'classnames';
 
 import { euiBeaconStyles } from './beacon.styles';
+import { useEuiTheme } from '../../services';
 
-export type EuiBeaconProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'> &
+export const COLORS = [
+  'subdued',
+  'primary',
+  'success',
+  'accent',
+  'danger',
+  'warning',
+] as const;
+
+export type EuiBeaconColor = typeof COLORS[number];
+
+export type EuiBeaconProps = Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'children' | 'color'
+> &
   CommonProps & {
     /**
      * Height and width of the center circle. Value is passed directly to the `style` attribute
      */
     size?: number | string;
+    /**
+     * Any of the named color palette options.
+     */
+    color?: EuiBeaconColor;
   };
 
 export const EuiBeacon: FunctionComponent<EuiBeaconProps> = ({
   className,
   size = 12,
+  color = 'success',
   style,
   ...rest
 }) => {
+  const euiTheme = useEuiTheme();
   const classes = classNames('euiBeacon', className);
-  const styles = euiBeaconStyles();
-  const cssStyles = [styles.euiBeacon];
+  const styles = euiBeaconStyles(euiTheme);
+  const cssStyles = [styles.euiBeacon, styles[color]];
 
   const beaconStyle = {
     ...style,

diff --git a/src/components/tour/__snapshots__/tour_step.test.tsx.snap b/src/components/tour/__snapshots__/tour_step.test.tsx.snap
@@ -52,7 +52,7 @@ exports[`EuiTourStep can change the minWidth and maxWidth 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -150,7 +150,7 @@ exports[`EuiTourStep can have subtitle 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -253,7 +253,7 @@ exports[`EuiTourStep can override the footer action 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>
@@ -433,7 +433,7 @@ exports[`EuiTourStep is rendered 1`] = `
         style="left: 0px; top: 10px;"
       >
         <div
-          class="euiBeacon euiTour__beacon emotion-euiBeacon-euiTourBeacon-isOpen-left"
+          class="euiBeacon euiTour__beacon emotion-euiBeacon-success-euiTourBeacon-isOpen-left"
           style="height: 12px; width: 12px;"
         />
       </div>

diff --git a/upcoming_changelogs/6420.md b/upcoming_changelogs/6420.md
@@ -0,0 +1 @@
+- Added `color` prop to `EuiBeacon`