Add a markdown help modal, move tooltip & checkbox plugins into src by chandlerprall · Pull Request #3636 · elastic/eui

chandlerprall · 2020-06-18T20:18:53Z

Summary

Adds some types at various levels
Moves the tooltip and checkbox plugins into src, leaving only chart as an example plugin
Creates a (?) button at the bottom of the editor, triggering a completely unformatted help modal
Adds helpText value to UI plugins allowing them to provide help text

Decision to be made: should other built-in markdown tags like bold, italic have help text hard-coded into that modal, or should we give them a helpText value via their toolbar button definitions?

~~### Checklist~~

… to ui plugins

kibanamachine · 2020-06-18T20:42:08Z

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

myasonik · 2020-06-18T20:59:34Z

Decision to be made: should other built-in markdown tags like bold, italic have help text hard-coded into that modal, or should we give them a helpText value via their toolbar button definitions?

It'd be nice to document our flavor of markdown, even the basic stuff. I feel like there are so many, that something invariably differs between the one you're using now and the one you used last.

I wonder if the best way to provide our own help text and let plugins add their own, while also being friendly to users and not just allowing anything/nothing, is to have plugins register their pattern and help text ahead of time and EUI builds the help text without exposing a blank slate to consumers.

kibanamachine · 2020-06-26T18:52:33Z

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

kibanamachine · 2020-06-26T19:18:33Z

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

snide · 2020-06-29T05:04:53Z

@miukimiu I wired up the errors into your design. Made a slight change to make the error button the danger color to call it out. @chandlerprall error stuff looks good. Didn't know what the final types for these errors should be (since you were making them up in the example), so I left a chain of anys on that prop down through the component tree for now.

kibanamachine · 2020-06-29T05:25:17Z

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

snide · 2020-06-29T06:14:19Z

Syntax help styling. I think this kind of layout should scale OK.

…com/chandlerprall/eui into feature/markdown-editor-plugin-text

chandlerprall · 2020-06-30T21:20:15Z

@myasonik @snide CI now fails on yarn test-a11y because the editor's textarea doesn't have an accompanying label element. Should we disable that check somehow for this element, or find a way to label it?

myasonik · 2020-06-30T22:51:22Z

We should definitely label it 🙂

I'd recommend requiring users pass in either an aria-label or aria-labelledby, same was as we do for EuiDataGrid I think.

kibanamachine · 2020-07-01T17:40:03Z

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

elizabetdev · 2020-07-01T18:41:13Z

@snide and @chandlerprall,

I reverted the code to only show the icon + number of errors the way @snide initially did it. Now, the errors only show when we have at least one. The VS Code way icon + 0 was too distractive.

kibanamachine · 2020-07-01T18:41:29Z

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

* 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>

Move checkbox and tooltip markdown plugins into eui src, add helpText…

127eabc

… to ui plugins

chandlerprall added the markdown editor label Jun 18, 2020

chandlerprall requested a review from snide June 18, 2020 20:18

elizabetdev added 2 commits June 26, 2020 14:56

Adding footer initial styles

452cb31

Adding error popover

475afcc

Fixing uploading files icon

a544171

wire up errors

24e5666

snide added 2 commits June 28, 2020 22:57

modal help text

4b364c7

better modal text

3711b8b

snide and others added 7 commits June 28, 2020 23:15

blerg, react color

9ea68aa

toggle button for editor ast

8b1e325

Ignoring ts errors and fixing sass lint errors

33d9aab

Merge branch 'feature/markdown-editor-plugin-text' of https://github.…

901678c

…com/chandlerprall/eui into feature/markdown-editor-plugin-text

Displaying always error info

b70f4de

Adding checkmark button

56264e4

fix markdown test

a0c3309

chandlerprall added 2 commits July 1, 2020 08:40

Added aria-label and aria-labelledby props to markdown editor

7753b1f

Fix i18n token name for markdown errors title

46b9e8f

Reverting displaying errors

fb8a5c2

chandlerprall merged commit 59c623d into elastic:feature/markdown-editor Jul 1, 2020

chandlerprall deleted the feature/markdown-editor-plugin-text branch July 1, 2020 19:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add a markdown help modal, move tooltip & checkbox plugins into src#3636

Add a markdown help modal, move tooltip & checkbox plugins into src#3636
chandlerprall merged 17 commits intoelastic:feature/markdown-editorfrom
chandlerprall:feature/markdown-editor-plugin-text

chandlerprall commented Jun 18, 2020

Uh oh!

kibanamachine commented Jun 18, 2020

Uh oh!

myasonik commented Jun 18, 2020

Uh oh!

kibanamachine commented Jun 26, 2020

Uh oh!

kibanamachine commented Jun 26, 2020

Uh oh!

snide commented Jun 29, 2020

Uh oh!

kibanamachine commented Jun 29, 2020

Uh oh!

snide commented Jun 29, 2020

Uh oh!

chandlerprall commented Jun 30, 2020

Uh oh!

myasonik commented Jun 30, 2020

Uh oh!

kibanamachine commented Jul 1, 2020

Uh oh!

elizabetdev commented Jul 1, 2020

Uh oh!

kibanamachine commented Jul 1, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

Conversation

chandlerprall commented Jun 18, 2020

Summary

Uh oh!

kibanamachine commented Jun 18, 2020

Uh oh!

myasonik commented Jun 18, 2020

Uh oh!

kibanamachine commented Jun 26, 2020

Uh oh!

kibanamachine commented Jun 26, 2020

Uh oh!

snide commented Jun 29, 2020

Uh oh!

kibanamachine commented Jun 29, 2020

Uh oh!

snide commented Jun 29, 2020

Uh oh!

chandlerprall commented Jun 30, 2020

Uh oh!

myasonik commented Jun 30, 2020

Uh oh!

kibanamachine commented Jul 1, 2020

Uh oh!

elizabetdev commented Jul 1, 2020

Uh oh!

kibanamachine commented Jul 1, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants