Fixes loading element icon color (#24551) (#24566)

* Fixed loading element icon color

* Fixed package.json

* Fixed loading component test

* Revert "Fixed package.json"

This reverts commit 033fc84.

x-pack/plugins/canvas/common/lib/hex_to_rgb.js

@@ -0,0 +1,18 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License;
+ * you may not use this file except in compliance with the Elastic License.
+ */
+
+export const hexToRgb = hex => {
+  const shorthandHexColor = /^#?([a-f\d]{1})([a-f\d]{1})([a-f\d]{1})$/i;
+  const hexColor = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i;
+
+  const shorthandMatches = shorthandHexColor.exec(hex);
+  if (shorthandMatches) return shorthandMatches.slice(1, 4).map(hex => parseInt(hex + hex, 16));
+
+  const hexMatches = hexColor.exec(hex);
+  if (hexMatches) return hexMatches.slice(1, 4).map(hex => parseInt(hex, 16));
+
+  return null;
+};

x-pack/plugins/canvas/public/components/loading/__tests__/loading.js

@@ -8,7 +8,7 @@ import React from 'react';
 import expect from 'expect.js';
 import { shallow } from 'enzyme';
 import { EuiLoadingSpinner, EuiIcon } from '@elastic/eui';
-import { Loading } from '../';
+import { Loading } from '../loading';
 
 describe('<Loading />', () => {
   it('uses EuiIcon by default', () => {

x-pack/plugins/canvas/public/components/loading/index.js

@@ -4,7 +4,12 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { pure } from 'recompose';
+import { connect } from 'react-redux';
+import { getSelectedPage, getPageById } from '../../state/selectors/workpad';
 import { Loading as Component } from './loading';
 
-export const Loading = pure(Component);
+const mapStateToProps = state => ({
+  backgroundColor: getPageById(state, getSelectedPage(state)).style.background,
+});
+
+export const Loading = connect(mapStateToProps)(Component);

x-pack/plugins/canvas/public/components/loading/loading.js

@@ -6,9 +6,10 @@
 
 import React from 'react';
 import PropTypes from 'prop-types';
-import { EuiLoadingSpinner, EuiIcon } from '@elastic/eui';
+import { EuiLoadingSpinner, EuiIcon, isColorDark } from '@elastic/eui';
+import { hexToRgb } from '../../../common/lib/hex_to_rgb';
 
-export const Loading = ({ animated, text }) => {
+export const Loading = ({ animated, text, backgroundColor }) => {
   if (animated) {
     return (
       <div className="canvasLoading">
@@ -23,6 +24,8 @@ export const Loading = ({ animated, text }) => {
     );
   }
 
+  const rgb = hexToRgb(backgroundColor);
+
   return (
     <div className="canvasLoading">
       {text && (
@@ -31,14 +34,15 @@ export const Loading = ({ animated, text }) => {
           &nbsp;
         </span>
       )}
-      <EuiIcon type="clock" />
+      <EuiIcon color={rgb && isColorDark(...rgb) ? 'ghost' : 'text'} type="clock" />
     </div>
   );
 };
 
 Loading.propTypes = {
   animated: PropTypes.bool,
   text: PropTypes.string,
+  backgroundColor: PropTypes.string,
 };
 
 Loading.defaultProps = {