[Graph/SCSS] Migrate /graph/public/_main.scss file to Emotion (#215280)

mariairiartef · web-flow · commit c84380fe0137 · 2025-04-22T18:45:42.000+02:00
## Summary Part of #208908 ### Screenshots #### .gphAppWrapper <img width="1752" alt="Screenshot 2025-03-20 at 10 19 47" src="https://github.com/user-attachments/assets/79bce260-b286-4951-8005-540c5528580b" /> #### .gphColorPicker__color <img width="1752" alt="Screenshot 2025-03-20 at 10 18 17" src="https://github.com/user-attachments/assets/a10ccb3a-fcd1-49bb-8e1b-024cf08f9c78" /> #### .gphFormGroup--small <img width="1752" alt="Screenshot 2025-03-20 at 10 10 17" src="https://github.com/user-attachments/assets/b029965e-de0e-4e85-88f2-62c341298ea6" /> <img width="1753" alt="Screenshot 2025-03-20 at 10 12 52" src="https://github.com/user-attachments/assets/88bbeb52-c822-44f3-a6f2-aa7cbce09ebf" /> ### Checklist - [x] The PR description includes the appropriate Release Notes section, and the correct `release_note:*` label is applied per the [guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
diff --git a/x-pack/platform/plugins/private/graph/public/_main.scss b/x-pack/platform/plugins/private/graph/public/_main.scss
diff --git a/x-pack/platform/plugins/private/graph/public/application.tsx b/x-pack/platform/plugins/private/graph/public/application.tsx
@@ -28,12 +28,11 @@ import { Storage } from '@kbn/kibana-utils-plugin/public';
 import { FormattedRelative } from '@kbn/i18n-react';
 import { Start as InspectorPublicPluginStart } from '@kbn/inspector-plugin/public';
 import { TableListViewKibanaProvider } from '@kbn/content-management-table-list-view-table';
-
-import './index.scss';
 import { SpacesApi } from '@kbn/spaces-plugin/public';
 import { KibanaRenderContextProvider } from '@kbn/react-kibana-context-render';
 import { SavedObjectsManagementPluginStart } from '@kbn/saved-objects-management-plugin/public';
 import { ContentClient, ContentManagementPublicStart } from '@kbn/content-management-plugin/public';
+
 import { GraphSavePolicy } from './types';
 import { graphRouter } from './router';
 import { checkLicense } from '../common/check_license';
@@ -128,7 +127,6 @@ export const renderApp = ({ history, element, ...deps }: GraphDependencies) => {
     </KibanaRenderContextProvider>
   );
   ReactDOM.render(app, element);
-  element.setAttribute('class', 'gphAppWrapper');
 
   return () => {
     licenseSubscription.unsubscribe();
diff --git a/x-pack/platform/plugins/private/graph/public/components/control_panel/control_plane.styles.ts b/x-pack/platform/plugins/private/graph/public/components/control_panel/control_plane.styles.ts
@@ -0,0 +1,14 @@
+/*
+ * 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 { css } from '@emotion/react';
+import type { UseEuiTheme } from '@elastic/eui';
+
+export const gphFormGroupSmallStyles = ({ euiTheme }: UseEuiTheme) =>
+  css`
+    margin-bottom: ${euiTheme.size.s};
+  `;
diff --git a/x-pack/platform/plugins/private/graph/public/components/control_panel/select_style.tsx b/x-pack/platform/plugins/private/graph/public/components/control_panel/select_style.tsx
@@ -7,9 +7,11 @@
 
 import React from 'react';
 import { i18n } from '@kbn/i18n';
-import { EuiIcon } from '@elastic/eui';
+import { EuiIcon, UseEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
 import { Workspace } from '../../types';
 import { gphSidebarHeaderStyles, gphSidebarPanelStyles } from '../../styles';
+import { gphFormGroupSmallStyles } from './control_plane.styles';
 
 interface SelectStyleProps {
   workspace: Workspace;
@@ -26,7 +28,7 @@ export const SelectStyle = ({ colors, workspace }: SelectStyleProps) => {
         })}
       </div>
 
-      <div className="form-group form-group-sm gphFormGroup--small">
+      <div className="form-group form-group-sm" css={gphFormGroupSmallStyles}>
         {colors.map((c) => {
           const onSelectColor = () => {
             workspace.colorSelected(c);
@@ -36,7 +38,7 @@ export const SelectStyle = ({ colors, workspace }: SelectStyleProps) => {
             <EuiIcon
               type="stopFilled"
               color={c}
-              className="gphColorPicker__color"
+              css={colorPickerIconStyles}
               aria-hidden="true"
               onClick={onSelectColor}
             />
@@ -46,3 +48,13 @@ export const SelectStyle = ({ colors, workspace }: SelectStyleProps) => {
     </div>
   );
 };
+
+const colorPickerIconStyles = ({ euiTheme }: UseEuiTheme) =>
+  css({
+    margin: euiTheme.size.xs,
+    cursor: 'pointer',
+
+    '&:hover, &:focus': {
+      transform: 'scale(1.4)',
+    },
+  });
diff --git a/x-pack/platform/plugins/private/graph/public/components/control_panel/selected_node_editor.tsx b/x-pack/platform/plugins/private/graph/public/components/control_panel/selected_node_editor.tsx
@@ -12,6 +12,7 @@ import { FormattedMessage } from '@kbn/i18n-react';
 import { Workspace, WorkspaceNode } from '../../types';
 import { IconRenderer } from '../icon_renderer';
 import { gphSidebarHeaderStyles, gphSidebarPanelStyles } from '../../styles';
+import { gphFormGroupSmallStyles } from './control_plane.styles';
 
 interface SelectedNodeEditorProps {
   workspace: Workspace;
@@ -68,7 +69,7 @@ export const SelectedNodeEditor = ({ workspace, selectedNode }: SelectedNodeEdit
       )}
 
       <form className="form-horizontal">
-        <div className="form-group form-group-sm gphFormGroup--small">
+        <div className="form-group form-group-sm" css={gphFormGroupSmallStyles}>
           <label htmlFor="labelEdit" className="col-sm-3 control-label">
             {i18n.translate('xpack.graph.sidebar.displayLabelLabel', {
               defaultMessage: 'Display label',
diff --git a/x-pack/platform/plugins/private/graph/public/index.scss b/x-pack/platform/plugins/private/graph/public/index.scss
