[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>
  );
 };