[SharedUX] SCSS migration share plugin

src/platform/packages/private/kbn-reporting/public/share/share_context_menu/reporting_panel_content/reporting_panel_content.tsx

@@ -13,6 +13,7 @@ import * as Rx from 'rxjs';
 import { CSV_REPORT_TYPE, CSV_REPORT_TYPE_V2 } from '@kbn/reporting-export-types-csv-common';
 import { PDF_REPORT_TYPE_V2 } from '@kbn/reporting-export-types-pdf-common';
 import { PNG_REPORT_TYPE_V2 } from '@kbn/reporting-export-types-png-common';
+import { css } from '@emotion/react';
 
 import {
   EuiAccordion,
@@ -23,6 +24,8 @@ import {
   EuiHorizontalRule,
   EuiSpacer,
   EuiText,
+  withEuiTheme,
+  WithEuiThemeProps,
 } from '@elastic/eui';
 
 import { i18n } from '@kbn/i18n';
@@ -54,6 +57,7 @@ export interface ReportingPanelProps {
   onClose?: () => void;
 
   startServices$: Rx.Observable<StartServices>;
+  theme: WithEuiThemeProps['theme'];
 }
 
 export type Props = ReportingPanelProps & { intl: InjectedIntl };
@@ -66,7 +70,7 @@ interface State {
   isCreatingReportJob: boolean;
 }
 
-class ReportingPanelContentUi extends Component<Props, State> {
+class ReportingPanelContentUi extends Component<Props, State, WithEuiThemeProps> {
   private mounted?: boolean;
 
   constructor(props: Props) {
@@ -157,10 +161,14 @@ class ReportingPanelContentUi extends Component<Props, State> {
 
   public render() {
     const isUnsaved: boolean = this.isNotSaved() || this.props.isDirty || this.state.isStale;
+    const { theme } = this.props;
+    const basePadding = css({
+      padding: theme.euiTheme.size.base,
+    });
 
     if (this.props.requiresSavedState && isUnsaved) {
       return (
-        <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareReportingForm">
+        <EuiForm css={basePadding} data-test-subj="shareReportingForm">
           <EuiFormRow
             helpText={
               <FormattedMessage
@@ -178,7 +186,7 @@ class ReportingPanelContentUi extends Component<Props, State> {
     const exceedsMaxLength = this.state.absoluteUrl.length >= getMaxUrlLength();
 
     return (
-      <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareReportingForm">
+      <EuiForm css={basePadding} data-test-subj="shareReportingForm">
         <EuiText size="s">
           <p>
             <FormattedMessage
@@ -343,4 +351,4 @@ class ReportingPanelContentUi extends Component<Props, State> {
   };
 }
 
-export const ReportingPanelContent = injectI18n(ReportingPanelContentUi);
+export const ReportingPanelContent = injectI18n(withEuiTheme(ReportingPanelContentUi));

src/platform/packages/private/kbn-reporting/public/share/share_context_menu/screen_capture_panel_content.tsx

@@ -13,7 +13,7 @@ import React, { Component } from 'react';
 import type { LayoutParams } from '@kbn/screenshotting-plugin/common';
 import { ReportingPanelContent, ReportingPanelProps } from './reporting_panel_content';
 
-export interface Props extends ReportingPanelProps {
+export interface Props extends Omit<ReportingPanelProps, 'theme'> {
   layoutOption?: 'canvas' | 'print';
 }
 

src/platform/plugins/shared/share/public/components/url_panel_content.tsx

@@ -21,7 +21,10 @@ import {
   EuiRadioGroup,
   EuiSwitch,
   EuiSwitchEvent,
+  withEuiTheme,
+  WithEuiThemeProps,
 } from '@elastic/eui';
+import { css } from '@emotion/react';
 
 import { format as formatUrl, parse as parseUrl } from 'url';
 
@@ -53,6 +56,7 @@ export interface UrlPanelContentProps {
   showPublicUrlSwitch?: (anonymousUserCapabilities: Capabilities) => boolean;
   urlService: BrowserUrlService;
   snapshotShareWarning?: string;
+  theme: WithEuiThemeProps['theme'];
 }
 
 export enum ExportUrlAsType {
@@ -79,7 +83,7 @@ interface State {
   showWarningButton: boolean;
 }
 
-export class UrlPanelContent extends Component<UrlPanelContentProps, State> {
+class UrlPanelContentComponent extends Component<UrlPanelContentProps, State, WithEuiThemeProps> {
   private mounted?: boolean;
   private shortUrlCache?: string;
 
@@ -149,10 +153,10 @@ export class UrlPanelContent extends Component<UrlPanelContentProps, State> {
   }
 
   public render() {
+    const { theme } = this.props;
     const shortUrlSwitch = this.renderShortUrlSwitch();
     const publicUrlSwitch = this.renderPublicUrlSwitch();
     const copyButton = this.renderCopyButton();
-
     const urlRow = (!!shortUrlSwitch || !!publicUrlSwitch) && (
       <EuiFormRow
         label={<FormattedMessage id="share.urlPanel.urlGroupTitle" defaultMessage="URL" />}
@@ -167,7 +171,7 @@ export class UrlPanelContent extends Component<UrlPanelContentProps, State> {
 
     return (
       <I18nProvider>
-        <EuiForm className="kbnShareContextMenu__finalPanel" data-test-subj="shareUrlForm">
+        <EuiForm css={css({ padding: theme.euiTheme.size.base })} data-test-subj="shareUrlForm">
           {this.renderExportAsRadioGroup()}
           {this.renderUrlParamExtensions()}
           {urlRow}
@@ -612,3 +616,6 @@ export class UrlPanelContent extends Component<UrlPanelContentProps, State> {
     );
   };
 }
+
+export const UrlPanelContent = withEuiTheme(UrlPanelContentComponent);
+UrlPanelContent.displayName = 'UrlPanelContent';

src/platform/plugins/shared/share/public/plugin.ts

@@ -7,8 +7,6 @@
  * License v3.0 only", or the "Server Side Public License, v 1".
  */
 
-import './index.scss';
-
 import type { CoreSetup, CoreStart, Plugin, PluginInitializerContext } from '@kbn/core/public';
 import { ShareMenuManager, ShareMenuManagerStart } from './services';
 import { ShareMenuRegistry, ShareMenuRegistrySetup } from './services';