Skip to content

Commit

Permalink
[EuiMarkdownEditor] Better styles and class names (#3697)
Browse files Browse the repository at this point in the history 
* Better styles and classnames

* md footer height

* snapshot

* preventing the text area of loosing focus when clicking on an action button
  • Loading branch information
@elizabetdev
elizabetdev authored Jul 7, 2020
1 parent 2873e60 commit 779df96
Show file tree
Hide file tree
Showing 12 changed files with 287 additions and 296 deletions.
322 changes: 157 additions & 165 deletions src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,202 +6,194 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
data-test-subj="test subject string"
>
<div
class="euiMarkdownEditor__toolbar"
class="euiMarkdownEditorToolbar"
>
<div
class="euiFlexGroup euiFlexGroup--gutterLarge euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentSpaceBetween euiFlexGroup--directionRow"
class="euiMarkdownEditorToolbar__buttons"
>
<div
class="euiFlexItem euiFlexItem--flexGrowZero euiMarkdownEditor__toolbar__buttons"
<span
class="euiToolTipAnchor"
>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Bold"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorBold"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
<button
aria-label="Bold"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Italic"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorItalic"
/>
</button>
</span>
<span
class="euiMarkdownEditor__toolbar__divider"
/>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorBold"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Italic"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Unordered list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorUnorderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorItalic"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Unordered list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Ordered list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorOrderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorUnorderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Ordered list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Task list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="MarkdownCheckmark"
/>
</button>
</span>
<span
class="euiMarkdownEditor__toolbar__divider"
/>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorOrderedList"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Task list"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Quote"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="quote"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="MarkdownCheckmark"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Quote"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Code"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorCodeBlock"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="quote"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Code"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Link"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorLink"
/>
</button>
</span>
<span
class="euiMarkdownEditor__toolbar__divider"
/>
<span
class="euiToolTipAnchor"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorCodeBlock"
/>
</button>
</span>
<span
class="euiToolTipAnchor"
>
<button
aria-label="Link"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<button
aria-label="Tooltip"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorComment"
/>
</button>
</span>
</div>
<div
class="euiFlexItem euiFlexItem--flexGrowZero"
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorLink"
/>
</button>
</span>
<span
class="euiMarkdownEditorToolbar__divider"
/>
<span
class="euiToolTipAnchor"
>
<button
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
aria-label="Tooltip"
class="euiButtonIcon euiButtonIcon--text"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="eye"
/>
<span
class="euiButtonEmpty__text"
>
Preview
</span>
</span>
<div
aria-hidden="true"
class="euiButtonIcon__icon"
data-euiicon-type="editorComment"
/>
</button>
</div>
</span>
</div>
<button
class="euiButtonEmpty euiButtonEmpty--text euiButtonEmpty--small"
type="button"
>
<span
class="euiButtonEmpty__content"
>
<div
aria-hidden="true"
class="euiButtonEmpty__icon"
data-euiicon-type="eye"
/>
<span
class="euiButtonEmpty__text"
>
Preview
</span>
</span>
</button>
</div>
<div
style="display:block"
>
<div
class="euiMarkdownEditor__dropZone"
class="euiMarkdownEditorDropZone"
>
<textarea
aria-label="aria-label"
class="euiMarkdownEditor__textArea"
class="euiMarkdownEditorTextArea"
id="editorId"
rows="6"
style="height:calc(118px"
style="height:calc(116px"
/>
<footer
class="euiMarkdownEditor__footer"
class="euiMarkdownEditorFooter"
>
<div
class="euiMarkdownEditor__footerActions"
class="euiMarkdownEditorFooter__actions"
>
<button
aria-label="Open upload files modal"
Expand All @@ -217,7 +209,7 @@ exports[`EuiMarkdownEditor is rendered 1`] = `
</div>
<button
aria-label="Show markdown help"
class="euiButtonIcon euiButtonIcon--text euiMarkdownEditor__footerHelp"
class="euiButtonIcon euiButtonIcon--text euiMarkdownEditorFooter__help"
type="button"
>
<div
Expand Down
3 changes: 3 additions & 0 deletions src/components/markdown_editor/_markdown_editor.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@
.euiMarkdownEditor {
transition:
box-shadow $euiAnimSpeedFast ease-in;

&:focus-within {
@include euiSlightShadowHover;
}
Expand Down
10 changes: 3 additions & 7 deletions src/components/markdown_editor/_markdown_editor_drop_zone.scss
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
.euiMarkdownEditor__dropZone {
.euiMarkdownEditorDropZone {
@include euiFormControlDefaultShadow;
display: flex;
position: relative;
Expand All @@ -25,13 +25,9 @@
}

&--isDragging {
.euiMarkdownEditor__textArea,
.euiMarkdownEditor__footer {
.euiMarkdownEditorTextArea,
.euiMarkdownEditorFooter {
background-color: transparentize($euiColorSecondary, .88);
}

.euiMarkdownEditor__footer {
border-top-color: $euiColorSecondary;
}
}
}
Loading

0 comments on commit 779df96

Please sign in to comment.