Moved sidebar_pop to styles.

x-pack/plugins/canvas/public/components/sidebar/element_settings/element_settings.component.tsx

@@ -7,7 +7,7 @@
 
 import React, { FunctionComponent } from 'react';
 import PropTypes from 'prop-types';
-import { EuiTabbedContent } from '@elastic/eui';
+import { useEuiTheme, EuiTabbedContent } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 
 // @ts-expect-error unconverted component
@@ -15,6 +15,7 @@ import { Datasource } from '../../datasource';
 // @ts-expect-error unconverted component
 import { FunctionFormList } from '../../function_form_list';
 import { PositionedElement } from '../../../../types';
+import { sidebarPopStylesFactory } from '../sidebar_pop.styles';
 
 const strings = {
   getDataTabLabel: () =>
@@ -39,23 +40,22 @@ interface Props {
 }
 
 export const ElementSettings: FunctionComponent<Props> = ({ element }) => {
+  const { euiTheme } = useEuiTheme();
   const tabs = [
     {
       id: 'edit',
       name: strings.getDisplayTabLabel(),
       content: (
-        <div className="canvasSidebar__pop">
-          <div className="canvasSidebar--args">
+        <div css={sidebarPopStylesFactory(euiTheme)}>
           <FunctionFormList element={element} />
         </div>
-        </div>
       ),
     },
     {
       id: 'data',
       name: strings.getDataTabLabel(),
       content: (
-        <div className="canvasSidebar__pop">
+        <div css={sidebarPopStylesFactory(euiTheme)}>
           <Datasource />
         </div>
       ),

x-pack/plugins/canvas/public/components/sidebar/global_config/global_config.tsx

@@ -6,10 +6,11 @@
  */
 
 import React, { Fragment, FC } from 'react';
-import { EuiTabbedContent, EuiTitle, EuiSpacer } from '@elastic/eui';
+import { useEuiTheme, EuiTabbedContent, EuiTitle, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { GeneralConfig } from './general_config';
 import { FilterConfig } from './filter_config';
+import { sidebarPopStylesFactory } from '../sidebar_pop.styles';
 
 const strings = {
   getTitle: () =>
@@ -27,12 +28,14 @@ const strings = {
 };
 
 export const GlobalConfig: FC = () => {
+  const { euiTheme } = useEuiTheme();
+
   const tabs = [
     {
       id: 'general',
       name: strings.getGeneralLabel(),
       content: (
-        <div className="canvasSidebar__pop">
+        <div css={sidebarPopStylesFactory(euiTheme)}>
           <EuiSpacer size="m" />
           <GeneralConfig />
         </div>
@@ -42,7 +45,7 @@ export const GlobalConfig: FC = () => {
       id: 'filter',
       name: strings.getFilterLabel(),
       content: (
-        <div className="canvasSidebar__pop">
+        <div css={sidebarPopStylesFactory(euiTheme)}>
           <FilterConfig />
         </div>
       ),

x-pack/plugins/canvas/public/components/sidebar/sidebar.scss

@@ -9,21 +9,3 @@
   top: 0;
   bottom: 0;
 }
-
-.canvasSidebar__pop {
-  animation: sidebarPop $euiAnimSpeedFast $euiAnimSlightResistance;
-}
-
-@keyframes sidebarPop {
-  0% {
-    opacity: 0;
-  }
-
-  1% {
-    opacity: 0;
-  }
-
-  100% {
-    opacity: 1;
-  }
-}

x-pack/plugins/canvas/public/components/sidebar/sidebar_pop.styles.ts

@@ -0,0 +1,32 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import { EuiThemeComputed } from '@elastic/eui';
+import { css, keyframes } from '@emotion/react';
+
+export const sidebarPanelClassName = 'canvasSidebar__panel';
+export const sidebarAccordionClassName = 'canvasSidebar__accordion';
+export const sidebarExpandableClassName = 'canvasSidebar__expandable';
+export const sidebarFiltersClassName = 'filtersSidebar__accordion';
+
+const sidebarPopKeyFrames = keyframes`
+ 0% {
+    opacity: 0;
+  }
+
+  1% {
+    opacity: 0;
+  }
+
+  100% {
+    opacity: 1;
+  }
+`;
+
+export const sidebarPopStylesFactory = (theme: EuiThemeComputed) => css`
+  animation: ${sidebarPopKeyFrames} ${theme.animation.fast} ${theme.animation.resistance};
+`;