[Markdown] Replace custom css styles and native html with OUI. (#4390)

* replace custom styling Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> * update CHANGELOG Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> * Update CHANGELOG.md Co-authored-by: Miki <amoo_miki@yahoo.com> Signed-off-by: Josh Romero <rmerqg@amazon.com> --------- Signed-off-by: Sirazh Gabdullin <sirazh.gabdullin@nu.edu.kz> Signed-off-by: Josh Romero <rmerqg@amazon.com> Co-authored-by: Josh Romero <rmerqg@amazon.com> Co-authored-by: Miki <amoo_miki@yahoo.com>
opensearch-project · Jul 20, 2023 · adb538e · adb538e
1 parent f13e4c3
commit adb538e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 15 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -85,6 +85,7 @@ Inspired from [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 - Replace the use of `bluebird` in `saved_objects` plugin ([#4026](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4026))
 - [Maps Legacy] Removed KUI usage in `maps_legacy` plugin([#3998](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/3998))
 - Relocate tutorials imagery into `src/plugins/home/public/assets/tutorials/logos` ([#4382](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4382))
+- [Markdown] Replace custom CSS styles and HTML markup with OUI components ([#4390](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4390))
 - [VisBuilder] Use OUI icon ([#4446](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4446))
 - [Vis Colors] [VisLib] Update legend colors to use OUI color palette ([#4365](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4365))
 - [Vis Colors] [Region Maps] Replace hardcode color to OUI color in `region_map` plugin ([#4299](https://github.com/opensearch-project/OpenSearch-Dashboards/pull/4299))

diff --git a/src/plugins/vis_type_markdown/public/markdown_options.tsx b/src/plugins/vis_type_markdown/public/markdown_options.tsx
@@ -52,7 +52,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
 
   return (
     <EuiPanel paddingSize="s">
-      <EuiFlexGroup direction="column" gutterSize="m" className="mkdEditor">
+      <EuiFlexGroup direction="column" gutterSize="m" className="eui-fullHeight">
         <EuiFlexItem grow={false}>
           <EuiFlexGroup gutterSize="none" justifyContent="spaceBetween" alignItems="baseline">
             <EuiFlexItem grow={false}>
@@ -83,7 +83,7 @@ function MarkdownOptions({ stateParams, setValue }: VisOptionsProps<MarkdownVisP
         <EuiFlexItem>
           <EuiTextArea
             id="markdownVisInput"
-            className="visEditor--markdown__textarea"
+            className="eui-fullHeight"
             value={stateParams.markdown}
             onChange={({ target: { value } }) => onMarkdownUpdate(value)}
             fullWidth={true}

diff --git a/src/plugins/vis_type_markdown/public/markdown_vis.scss b/src/plugins/vis_type_markdown/public/markdown_vis.scss
@@ -5,18 +5,8 @@
 //   mkdChart__legend--small
 //   mkdChart__legend-isLoading
 
-.mkdVis {
-  padding: $euiSizeS;
-  width: 100%;
-}
-
 .visEditor--markdown {
-  .visEditorSidebar__config > *,
-  .visEditor--markdown__textarea {
+  .visEditorSidebar__config > * {
     flex-grow: 1;
   }
-
-  .mkdEditor {
-    height: 100%;
-  }
 }
diff --git a/src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx b/src/plugins/vis_type_markdown/public/markdown_vis_controller.tsx
@@ -29,6 +29,7 @@
  */
 
 import React, { useEffect } from 'react';
+import { EuiPanel } from '@elastic/eui';
 import { Markdown } from '../../opensearch_dashboards_react/public';
 import { MarkdownVisParams } from './types';
 
@@ -47,13 +48,18 @@ const MarkdownVisComponent = ({
   useEffect(renderComplete); // renderComplete will be called after each render to signal, that we are done with rendering.
 
   return (
-    <div className="mkdVis" style={{ fontSize: `${fontSize}pt` }}>
+    <EuiPanel
+      style={{ fontSize: `${fontSize}pt` }}
+      hasBorder={false}
+      hasShadow={false}
+      paddingSize="s"
+    >
       <Markdown
         data-test-subj="markdownBody"
         markdown={markdown}
         openLinksInNewTab={openLinksInNewTab}
       />
-    </div>
+    </EuiPanel>
   );
 };