[EuiMarkdownEditor] Improving markdown format styles #3534

elizabetdev · 2020-06-02T13:51:37Z

Summary

With this PR I'm trying to improve the styles of the _markdown_format.scss so it can be closer to the rest of EUI components.

A few decisions:

For now I left the code styles. Right now we're only transforming in EuiCode backticks that specify a language like ```js. I'll put in our TODO list a reminder to fix this issue and transform all MD code syntax in EuiCode.
I tried to match the sizes of the EuiText.
I think we should support use cases like canvas and visualize markdown. I left some comments in the file trying to explain why we're using ems and alpha colors. @snide I know you like to write so feel free to improve my comments.
Change the hr to be closer to EuiHorizontalRule.
The task lists that use * [ ] syntax get some classes .task-list-item. But - [ ] are using the checkbox plugin and they're not being transformed in task lists. We need to fix the code to create task list with - [ ]. After that, I can improve the styles.

Checklist

Check against all themes for compatibility in both light and dark modes
[ ] Checked in mobile
Checked in IE11 and Firefox
[ ] Props have proper autodocs
~~[ ] Added documentation examples~~
[ ] Added or updated jest tests
~~[ ] Checked for breaking changes and labeled appropriately~~
~~[ ] Checked for accessibility including keyboard-only and screenreader modes~~
~~[ ] A changelog entry exists and is marked appropriately~~

kibanamachine · 2020-06-02T14:15:36Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3534/

cchaos · 2020-06-02T17:37:45Z

A couple questions to think about...

Do we need to support multiple base text sizing?
In Kibana, the Markdown vis allows consumers to adjust the base font sizing and the rest will adjust, hence the old usage of ems. Should we support this type of optional rendering on the EUI side or at least provide a mechanism (mixin or something) for consumers to support it?

Should we reuse the euiScaleText() SASS mixin here?
We will now have two files/selectors that create similar typography styles in slightly different ways with slightly different results. The maintenance then doubles as we need to ensure updates to both places/scales. Is there any way to reuse or make the existing mixin more robust to handle what the Markdown editor needs?

elizabetdev · 2020-06-03T12:11:24Z

Thanks @cchaos for the help. I'll think about a solution based on those questions.

…markdown-format-styles

kibanamachine · 2020-06-30T16:25:19Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3534/

snide

Just some comments / questions while I was looking through the code. Know this is still in draft.

src/components/markdown_editor/_markdown_format.scss

snide · 2020-06-30T17:43:44Z

src/components/markdown_editor/_markdown_format.scss

  h1,
  h2 {


Can we get the header values closer to EuiText (doesn't need to be exact). For example. I don't know where the borders came from in this styling.

snide · 2020-06-30T17:46:01Z

src/components/markdown_editor/_markdown_format.scss

-  // Reverse grayscale for opposite of theme
-  $euiMarkdownAlphaLightestShadeReversed: rgba($euiColorEmptyShade, .05);
-  $euiMarkdownAlphaLightShadeReversed: rgba($euiColorEmptyShade, .15);
-  $euiMarkdownAlphaDarkShadeReversed: rgba($euiColorEmptyShade, .65);


We likely have a decision to make here. The alpha values are used because Canvas displays markdown on backgrounds of various colors. We can say that Canvas uses it's own styling, or we support it here. Do you have any opinions?

I think we should support these scenarios.

src/components/markdown_editor/_markdown_format.scss

…markdown-format-styles

kibanamachine · 2020-07-02T13:44:35Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3534/

kibanamachine · 2020-07-02T18:30:42Z

Preview documentation changes for this PR: https://eui.elastic.co/pr_3534/

snide

Great. This is flexible enough for out needs right now. Before this gets used widespread in Kibana (specifically canvas) I might do a PR on top when I get back to try and figure out a way to get the scales between EuiText, EuiTitle and EuiMarkdown through some sass extends / mixins.

* WIP: Add markdown_editor component * WIP: commit auto-added i18n tokens * Adding button toggle for previewing * Adding toolbar component * Adding file picker initial structure * Adding text area component * Buttons order * Moving markdown editor to docs form section * Improving file picker * Adding dropZone component and preview styles * Fixing height issue while resizing textarea * Small UI fix * Improving markdown example * remove showdown, since it wasn't being used * Adding code highlight * Better coding highlight * Replacing UglifyJsPlugin with TerserPlugin * Adding button enter key and buttons tooltips * More code highlight fixes * Markdown editor plugins (#3457) * Refactored EuiMarkdownEditor and EuiMarkdownFormat to prep for future work * pr feedback * [markdown] chart & tooltip plugins (#3479) * chart & tooltip plugins * Change tooltip markdown plugin markdown format * Fixed error with empty tooltip tag * [Markdown] Checkbox plugin (#3493) * Checkbox plugin * Better checkbox interaction formatting * Use monospace font in markdown editor * [EuiMarkdownEditor] Improve markdown editor font (#3525) * Improving font family and text area font styles * Text color and text babckground * Adding eui font family * euiFormControlText * Small fix * Refactoring some styles * Removing unecessary padding * Re-enable default markdown list parsing (#3531) * [Markdown] Allow toolbar buttons to present modals to create/edit tags (#3506) * Allow EuiMarkdownEditor's ui buttons trigger interactive modals for creating & editing tags * export two internal markdown types that are needed externally when generating eui.d.ts * Re-enable the default markdown list parsing/display, but keep EUI's checkbox override * Give EuiMarkdownEditorTextArea a displayName * Enable undo/redo for markdown editor, apart from firefox (#3582) * Enable undo/redo for markdown editor, apart from firefox * Add test-and-retry logic to insertText to account for ability to focus the text area before brute forcing * Added AST & info/fail message reporting to application; added info messages to tooltip plugin and fail message to chart configuration parsing (#3602) * Add an imperative ref to EuiMarkdownEditor (#3622) * Add an imperative ref to EuiMarkdownEditor, exposing the textarea element and replaceNode method * Remove textareaRef from two hook dependency arrays * eslint errors * Add a markdown help modal, move tooltip & checkbox plugins into src (#3636) * Move checkbox and tooltip markdown plugins into eui src, add helpText to ui plugins * Adding footer initial styles * Adding error popover * Fixing uploading files icon * wire up errors * modal help text * better modal text * blerg, react color * toggle button for editor ast * Ignoring ts errors and fixing sass lint errors * Displaying always error info * Adding checkmark button * fix markdown test * Added aria-label and aria-labelledby props to markdown editor * Fix i18n token name for markdown errors title * Reverting displaying errors Co-authored-by: miukimiu <elizabet.oliveira@elastic.co> Co-authored-by: Dave Snider <dave.snider@gmail.com> * [EuiMarkdownEditor] Improving markdown format styles (#3534) * Improving markdown format styles * Transforming px to em * Renaming variable * Adding descriptions and alpha values * hr more similar to EuiHorizontalRule * [EuiMarkdownEditor] Better styles and class names (#3697) * Better styles and classnames * md footer height * snapshot * preventing the text area of loosing focus when clicking on an action button * Add types to markdown editor (#3703) * Plugin types * Rehype / hast / unist node types * Make typescript happy with markdown editor and dependencies * Types for markdown AST nodes and errors * Don't scan any .d.ts file for internationalization strings * Adding missing types and dependency * Fixing firefox text area margin (#3802) * Markdown Format / Editor documentation + features (#3696) Separates `EuiMarkdownFormat` into its own component. Adds documentation. * [Markdown editor] drag and drop api, functionality (#3748) * Initial markdown drag-n-drop api * Properly insert multiple drag-and-drop results * Update logic for markdown supported files message display * disable upload interaction if no drop handlers are provided * Upload error button styles * pr feedback * Only accept supported file types in the markdown file selection dialog * Drag and drop animation * small changes * Add some cross-browser stability when dealing with unsupported drop files Co-authored-by: miukimiu <elizabet.oliveira@elastic.co> * Feature/markdown editor cleanup (#3830) * Sort drag&drop file extensions when displaying * mark markdown components as new and in beta * Get EuiMarkdownEditor Props to render * Update markdown's plugin prop docs based on existing writeups * Prevent markdown plugin extensions from interacting with each other (#3842) * Simplify the markdown editor's plugin API (#3843) * Add a default remark->rehype node handler to simplify plugin development * Update documentation * Add license info around markdown tag processing; Support block-level tag insertions (#3867) * changelog * Improved, and proper, types for the markdown editor's usage in downstream apps (#3893) * Fixes some ARIA issues in EuiMarkdownEditor (#3899) * Support aria-describedby to link errors. Include file support message in upload button's aria-label * Change markdown footer element to a div Co-authored-by: i-a-n <ian@union.io> Co-authored-by: Dave Snider <dave.snider@gmail.com> Co-authored-by: Chandler Prall <chandler.prall@gmail.com>

Improving markdown format styles

85ce0e8

elizabetdev added 3 commits June 30, 2020 12:13

Merge remote-tracking branch 'upstream/feature/markdown-editor' into …

dcfbffd

…markdown-format-styles

Transforming px to em

dffc88c

Renaming variable

596b004

snide reviewed Jun 30, 2020

View reviewed changes

Merge remote-tracking branch 'upstream/feature/markdown-editor' into …

e480bb3

…markdown-format-styles

elizabetdev added 2 commits July 2, 2020 18:46

Adding descriptions and alpha values

bbf06b2

hr more similar to EuiHorizontalRule

330a8b7

elizabetdev marked this pull request as ready for review July 2, 2020 18:50

elizabetdev requested a review from snide July 2, 2020 18:51

snide approved these changes Jul 2, 2020

View reviewed changes

elizabetdev merged commit 2873e60 into elastic:feature/markdown-editor Jul 3, 2020

elizabetdev mentioned this pull request Jul 31, 2020

[Feature Branch] EuiMarkdownEditor #3522

Merged

30 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[EuiMarkdownEditor] Improving markdown format styles #3534

[EuiMarkdownEditor] Improving markdown format styles #3534

elizabetdev commented Jun 2, 2020 •

edited

Loading

kibanamachine commented Jun 2, 2020

cchaos commented Jun 2, 2020

elizabetdev commented Jun 3, 2020

kibanamachine commented Jun 30, 2020

snide left a comment

snide Jun 30, 2020

snide Jun 30, 2020

elizabetdev Jul 2, 2020

kibanamachine commented Jul 2, 2020

kibanamachine commented Jul 2, 2020

snide left a comment

[EuiMarkdownEditor] Improving markdown format styles #3534

[EuiMarkdownEditor] Improving markdown format styles #3534

Conversation

elizabetdev commented Jun 2, 2020 • edited Loading

Summary

Checklist

kibanamachine commented Jun 2, 2020

cchaos commented Jun 2, 2020

elizabetdev commented Jun 3, 2020

kibanamachine commented Jun 30, 2020

snide left a comment

Choose a reason for hiding this comment

snide Jun 30, 2020

Choose a reason for hiding this comment

snide Jun 30, 2020

Choose a reason for hiding this comment

elizabetdev Jul 2, 2020

Choose a reason for hiding this comment

kibanamachine commented Jul 2, 2020

kibanamachine commented Jul 2, 2020

snide left a comment

Choose a reason for hiding this comment

elizabetdev commented Jun 2, 2020 •

edited

Loading