Consolidate EuiText and EuiMarkdownFormat styling (#4663)

* Wrapping the EuiMarkdownFormat content with EuiText * Comments * Unnecessary comment * Initial markdown format styles example * Getting started page matching other guideline pages * wip * Improving euiScaleText mixin to also return `em` sizes * Better amsterdam scaling * Move mixins to appropriate files. Renaming mixins. * Just one EM class * Moving functions to typography variables file * marginToRemOrEm * Adding relative class name and inherit text color * Fixing jest test * Ghost colors * Adding components theme * Changing GuideMarkdownFormat to medium text size * Using `currentColor` to adjust bg and border colors. * Adding better comments * Better comments * Adding docs examples for md format styling. * Extending EuiFormatProps into the editor. * Adding CL * Better comment for color prop * Replacing example with color success instead of secondary. * Addressing PR review * Better text styles for text color * Adding `CSSProperties['color']` type * retain fenced block styles * Adding home page getting started link * Updating CL * Update CL * CL again :D Co-authored-by: Greg Thompson <thompson.glowe@gmail.com>
elastic · Jul 22, 2021 · 3e4beeb · 3e4beeb
1 parent 1e5ff27
commit 3e4beeb
Show file tree

Hide file tree

Showing 27 changed files with 663 additions and 435 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,6 +1,11 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Fixed color of `html` scrollbar in dark mode ([#4969](https://github.com/elastic/eui/pull/4969))
+- 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))
+- Updated `EuiText`s `blockquote` font-size/line-height to match the base font-size/line-height which is the same as paragraphs ([#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))
 
 ## [`36.0.0`](https://github.com/elastic/eui/tree/v36.0.0)
 

diff --git a/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx b/src-docs/src/components/guide_markdown_format/guide_markdown_format.tsx
@@ -1,52 +1,30 @@
 import React, { FunctionComponent } from 'react';
 import {
   EuiMarkdownFormat,
+  EuiMarkdownFormatProps,
   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 = {
-  children: any;
-};
-
-export const GuideMarkdownFormat: FunctionComponent<GuideMarkdownFormatProps> = ({
+export const GuideMarkdownFormat: FunctionComponent<EuiMarkdownFormatProps> = ({
   children,
+  ...rest
 }) => {
   const processingPlugins = getDefaultEuiMarkdownProcessingPlugins();
   const rehype2reactConfig = processingPlugins[1][1];
 
   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"
+      {...rest}>
       {children}
     </EuiMarkdownFormat>
   );

diff --git a/src-docs/src/routes.js b/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} grow={false}>
+          {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',

diff --git a/src-docs/src/views/guidelines/getting_started.md b/src-docs/src/views/guidelines/getting_started.md
@@ -2,11 +2,11 @@
 
 To install the Elastic UI Framework into an existing project, use the `yarn` CLI (`npm` is not supported).
 
-```js
+```
 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.
 
@@ -29,7 +29,7 @@ nvm install
 
 ### Documentation
 
-You can run the documentation locally at [http://localhost:8030/](http://localhost:8030/) by running the following.
+You can run the documentation locally at `http://localhost:8030/` by running the following.
 
 ```js
 yarn

diff --git a/src-docs/src/views/home/home_view.js b/src-docs/src/views/home/home_view.js
@@ -58,9 +58,9 @@ export const HomeView = () => (
               </p>
               <EuiFlexGroup gutterSize="xl" wrap responsive={false}>
                 <EuiFlexItem grow={false}>
-                  <EuiLink href="https://github.com/elastic/eui/blob/master/wiki/consuming.md">
+                  <Link to="/guidelines/getting-started">
                     <strong>Getting started</strong>
-                  </EuiLink>
+                  </Link>
                 </EuiFlexItem>
                 <EuiFlexItem grow={false}>
                   <Link to="/package/changelog">

diff --git a/src-docs/src/views/markdown_editor/mardown_format_example.js b/src-docs/src/views/markdown_editor/mardown_format_example.js
@@ -1,24 +1,23 @@
 import React, { Fragment } from 'react';
-
-import { renderToHtml } from '../../services';
-
 import { GuideSectionTypes } from '../../components';
 
 import {
   EuiLink,
   EuiMarkdownFormat,
   EuiText,
+  EuiCode,
 } from '../../../../src/components';
 
 import { Link } from 'react-router-dom';
 
 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');
 
 import MarkdownFormatSink from './markdown_format_sink';
 const markdownFormatSinkSource = require('!!raw-loader!./markdown_format_sink');
-const markdownFormatSinkHtml = renderToHtml(MarkdownFormatSink);
 
 export const MarkdownFormatExample = {
   title: 'Markdown format',
@@ -45,10 +44,6 @@ export const MarkdownFormatExample = {
           type: GuideSectionTypes.JS,
           code: markdownFormatSource,
         },
-        {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatHtml,
-        },
       ],
       title: 'Built in plugins',
       text: (
@@ -59,8 +54,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>
       ),
@@ -73,11 +69,29 @@ export const MarkdownFormatExample = {
       source: [
         {
           type: GuideSectionTypes.JS,
-          code: markdownFormatSinkSource,
+          code: markdownFormatStylesSource,
         },
+      ],
+      title: 'Text sizing and coloring',
+      text: (
+        <p>
+          <strong>EuiMarkdownFormat</strong> uses{' '}
+          <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: [
         {
-          type: GuideSectionTypes.HTML,
-          code: markdownFormatSinkHtml,
+          type: GuideSectionTypes.JS,
+          code: markdownFormatSinkSource,
         },
       ],
       title: 'Kitchen sink',