Consolidate EuiText and EuiMarkdownFormat styling

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 - Refactored `EuiFlyout` types ([#4940](https://github.com/elastic/eui/pull/4940))
 - Updated `pause` icon ([#4947](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiMarkdownFormat` to use `EuiHorizontalRule` and better render tables, code blocks and blockquotes ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated the `EuiMarkdownFormat` to use  `EuiText` as a wrapper to handle all the CSS styling ([#4663](https://github.com/elastic/eui/pull/4947))
+- Updated `EuiText`s `color` prop to accept `inherit` and custom colors. Updated the `size` prop to accept `relative` ([#4663](https://github.com/elastic/eui/pull/4947))
+- Added `markdownFormatProps` prop to `EuiMarkdownEditor`  to extend the props passed to the rendered `EuiMarkdownFormat` ([#4663](https://github.com/elastic/eui/pull/4947))
 
 **Bug fixes**
 

src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx

@@ -3,8 +3,6 @@ import {
   EuiMarkdownFormat,
   getDefaultEuiMarkdownProcessingPlugins,
 } from '../../../../src/components/markdown_editor';
-import { EuiText } from '../../../../src/components/text';
-import { EuiTitle } from '../../../../src/components/title';
 import { slugify } from '../../../../src/services';
 
 export type GuideMarkdownFormatProps = {
@@ -20,33 +18,14 @@ export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> =
   rehype2reactConfig.components.h2 = ({ children }) => {
     const id = slugify(children[0]);
 
-    return (
-      <EuiTitle>
-        <h2 id={id}>{children}</h2>
-      </EuiTitle>
-    );
+    return <h2 id={id}>{children}</h2>;
   };
 
-  rehype2reactConfig.components.p = ({ children }) => (
-    <EuiText grow={false}>
-      <p>{children}</p>
-    </EuiText>
-  );
-
-  rehype2reactConfig.components.ul = ({ children }) => (
-    <EuiText grow={false}>
-      <ul>{children}</ul>
-    </EuiText>
-  );
-
-  rehype2reactConfig.components.ol = ({ children }) => (
-    <EuiText grow={false}>
-      <ol>{children}</ol>
-    </EuiText>
-  );
-
   return (
-    <EuiMarkdownFormat processingPluginList={processingPlugins}>
+    <EuiMarkdownFormat
+      processingPluginList={processingPlugins}
+      className="guideMarkdownFormat"
+      textSize="m">
       {children}
     </EuiMarkdownFormat>
   );

src-docs/src/components/guide_page/_guide_page.scss

@@ -82,3 +82,10 @@ $guideSideNavWidth: 240px;
     padding: $euiSizeS;
   }
 }
+
+// pages using a markdown format
+.guideMarkdownFormat  {
+  h2 {
+    padding-top: $euiSizeL;
+  }
+}

src-docs/src/routes.js

@@ -3,14 +3,14 @@ import { slugify } from '../../src/services';
 
 import { createHashHistory } from 'history';
 
-import { GuidePage, GuideSection } from './components';
+import { GuidePage, GuideSection, GuideMarkdownFormat } from './components';
 
 import { EuiErrorBoundary } from '../../src/components';
 
 import { playgroundCreator } from './services/playground';
 
 // Guidelines
-// const GettingStarted = require('!!raw-loader!./views/guidelines/getting_started.md');
+const GettingStarted = require('!!raw-loader!./views/guidelines/getting_started.md');
 
 import AccessibilityGuidelines from './views/guidelines/accessibility';
 
@@ -293,34 +293,33 @@ const createExample = (example, customTitle) => {
   };
 };
 
-// const createMarkdownExample = (example, title) => {
-//   const headings = example.default.match(/^(##) (.*)/gm);
+const createMarkdownExample = (example, title) => {
+  const headings = example.default.match(/^(##) (.*)/gm);
 
-//   const sections = headings.map((heading) => {
-//     const title = heading.replace('## ', '');
+  const sections = headings.map((heading) => {
+    const title = heading.replace('## ', '');
 
-//     return { id: slugify(title), title: title };
-//   });
+    return { id: slugify(title), title: title };
+  });
 
-//   return {
-//     name: title,
-//     component: () => (
-//       <GuidePage title={title}>
-//         <GuideMarkdownFormat title={title}>
-//           {example.default}
-//         </GuideMarkdownFormat>
-//       </GuidePage>
-//     ),
-//     sections: sections,
-//   };
-// };
+  return {
+    name: title,
+    component: () => (
+      <GuidePage title={title}>
+        <GuideMarkdownFormat title={title}>
+          {example.default}
+        </GuideMarkdownFormat>
+      </GuidePage>
+    ),
+    sections: sections,
+  };
+};
 
 const navigation = [
   {
     name: 'Guidelines',
     items: [
-      // TODO uncomment when EuiMarkdownFormat has a better text formatting
-      // createMarkdownExample(GettingStarted, 'Getting started'),
+      createMarkdownExample(GettingStarted, 'Getting started'),
       createExample(AccessibilityGuidelines, 'Accessibility'),
       {
         name: 'Colors',

src-docs/src/views/guidelines/getting_started.md

@@ -6,7 +6,7 @@ To install the Elastic UI Framework into an existing project, use the `yarn` CLI
 yarn add @elastic/eui
 ```
 
-Note that EUI has [several `peerDependencies` requirements](package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI][consuming].
+Note that EUI has [several `peerDependencies` requirements](https://github.com/elastic/eui/package.json) that will also need to be installed if starting with a blank project. You can read more about other ways to [consume EUI](https://github.com/elastic/eui/blob/master/wiki/consuming.md).
 
 ```js
 yarn add @elastic/eui @elastic/datemath moment prop-types
@@ -17,7 +17,7 @@ yarn add @elastic/eui @elastic/datemath moment prop-types
 
 ### Node
 
-We depend upon the version of node defined in [.nvmrc](.nvmrc).
+We depend upon the version of node defined in [.nvmrc](https://github.com/elastic/eui/.nvmrc).
 
 You will probably want to install a node version manager. [nvm](https://github.com/creationix/nvm) is recommended.
 

src-docs/src/views/markdown_editor/mardown_format_example.js

@@ -8,6 +8,7 @@ import {
   EuiLink,
   EuiMarkdownFormat,
   EuiText,
+  EuiCode,
 } from '../../../../src/components';
 
 import { Link } from 'react-router-dom';
@@ -16,6 +17,10 @@ import MarkdownFormat from './markdown_format';
 const markdownFormatSource = require('!!raw-loader!./markdown_format');
 const markdownFormatHtml = renderToHtml(MarkdownFormat);
 
+import MarkdownFormatStyles from './markdown_format_styles';
+const markdownFormatStylesSource = require('!!raw-loader!./markdown_format_styles');
+const markdownFormatStylesHtml = renderToHtml(MarkdownFormatStyles);
+
 import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
 const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
@@ -59,8 +64,9 @@ export const MarkdownFormatExample = {
             Remark
           </EuiLink>{' '}
           by default. The translation layer automatically substitutes raw HTML
-          output with their EUI equivalent. This means anchor and code blocks
-          will become <strong>EuiLink</strong> and <strong>EuiCodeBlock</strong>{' '}
+          output with their EUI equivalent. This means anchor, code blocks and
+          horizontal rules will become <strong>EuiLink</strong>,{' '}
+          <strong>EuiCodeBlock</strong> and <strong>EuiHorizontalRule</strong>{' '}
           components respectively.
         </p>
       ),
@@ -69,6 +75,32 @@ export const MarkdownFormatExample = {
       },
       demo: <MarkdownFormat />,
     },
+    {
+      source: [
+        {
+          type: GuideSectionTypes.JS,
+          code: markdownFormatStylesSource,
+        },
+        {
+          type: GuideSectionTypes.HTML,
+          code: markdownFormatStylesHtml,
+        },
+      ],
+      title: 'Text sizing and coloring',
+      text: (
+        <p>
+          <strong>EuiMarkdownFormat</strong> uses the{' '}
+          <Link to="/display/text/">EuiText</Link> as a wrapper to handle all
+          the CSS styling when rendering the HTML. It also gives the ability to
+          control the text size and color with the <EuiCode>textSize</EuiCode>{' '}
+          and <EuiCode>color</EuiCode> props, respectively.
+        </p>
+      ),
+      props: {
+        EuiMarkdownFormat,
+      },
+      demo: <MarkdownFormatStyles />,
+    },
     {
       source: [
         {

src-docs/src/views/markdown_editor/markdown_format_sink.js

@@ -1,6 +1,19 @@
-import React from 'react';
-
-import { EuiMarkdownFormat } from '../../../../src';
+import React, { useState } from 'react';
+import classNames from 'classnames';
+import {
+  EuiMarkdownFormat,
+  EuiPanel,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiSpacer,
+  EuiFormRow,
+  EuiSelect,
+  EuiRange,
+  EuiColorPicker,
+  useColorPickerState,
+  EuiButtonEmpty,
+  EuiPopover,
+} from '../../../../src';
 
 const markdownContent = `# h1 Heading
 ## h2 Heading
@@ -146,5 +159,137 @@ Autoconverted link https://github.com/nodeca/pica (enable linkify to see)
 `;
 
 export default () => {
-  return <EuiMarkdownFormat>{markdownContent}</EuiMarkdownFormat>;
+  const textSizeArray = ['xs', 's', 'm', 'relative'];
+
+  const textSizeOptions = textSizeArray.map((name) => {
+    return {
+      value: name,
+      text: name,
+    };
+  });
+
+  const textColorsArray = [
+    'default',
+    'subdued',
+    'success',
+    'accent',
+    'danger',
+    'warning',
+    'ghost',
+    'inherit',
+    'custom',
+  ];
+
+  const textColorsOptions = textColorsArray.map((name) => {
+    return {
+      value: name,
+      text: name,
+    };
+  });
+
+  const [textSize, setTextSize] = useState(textSizeOptions[2].value);
+  const [fontSizeScale, setFontSizeScale] = useState(16);
+  const [textColor, setTextColor] = useState(textColorsOptions[0].value);
+  const [isPopoverOpen, setIsPopoverOpen] = useState(false);
+
+  const onChangeTextSize = (e) => {
+    setTextSize(e.target.value);
+  };
+
+  const onChangeFontSizeScale = (e) => {
+    console.log(fontSizeScale);
+    setFontSizeScale(e.target.value);
+  };
+
+  const onChangeTextColor = (e) => {
+    setTextColor(e.target.value);
+  };
+
+  const panelClasses = classNames({
+    guideDemo__ghostBackground: textColor === 'ghost',
+  });
+
+  const [color, setColor, colorErrors] = useColorPickerState('#c561dc');
+
+  const onButtonClick = () =>
+    setIsPopoverOpen((isPopoverOpen) => !isPopoverOpen);
+  const closePopover = () => setIsPopoverOpen(false);
+
+  const button = (
+    <EuiButtonEmpty
+      onClick={onButtonClick}
+      iconType="controlsVertical"
+      aria-label="Open props customization"
+      color="text"
+      size="s">
+      Customize props
+    </EuiButtonEmpty>
+  );
+
+  return (
+    <>
+      <EuiFlexGroup>
+        <EuiFlexItem grow={false}>
+          <EuiPopover
+            panelStyle={{ minWidth: 380 }}
+            button={button}
+            isOpen={isPopoverOpen}
+            closePopover={closePopover}>
+            <EuiFormRow label="Color">
+              <EuiSelect
+                options={textColorsOptions}
+                value={textColor}
+                onChange={(e) => onChangeTextColor(e)}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow
+              label="Custom color"
+              isInvalid={!!colorErrors}
+              error={colorErrors}>
+              <EuiColorPicker
+                onChange={setColor}
+                color={color}
+                isInvalid={!!colorErrors}
+                disabled={textColor !== 'custom'}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Text size">
+              <EuiSelect
+                options={textSizeOptions}
+                value={textSize}
+                onChange={(e) => onChangeTextSize(e)}
+              />
+            </EuiFormRow>
+
+            <EuiFormRow label="Relative text size">
+              <EuiRange
+                min={12}
+                max={24}
+                step={4}
+                value={fontSizeScale}
+                onChange={onChangeFontSizeScale}
+                showValue
+                disabled={textSize !== 'relative'}
+              />
+            </EuiFormRow>
+          </EuiPopover>
+        </EuiFlexItem>
+      </EuiFlexGroup>
+
+      <EuiSpacer size="s" />
+
+      <EuiPanel hasBorder={true} className={panelClasses}>
+        <EuiMarkdownFormat
+          textSize={textSize}
+          color={textColor === 'custom' ? color : textColor}
+          style={{
+            fontSize: textSize === 'relative' && `${fontSizeScale}px`,
+          }}>
+          {markdownContent}
+        </EuiMarkdownFormat>
+      </EuiPanel>
+    </>
+  );
 };