[EuiMarkdownFormat] Removed emoticon support and extra rendered <div>

CHANGELOG.md

@@ -1,6 +1,7 @@
 ## [`master`](https://github.com/elastic/eui/tree/master)
 
 - Added optional line numbers to `EuiCodeBlock` ([#4993](https://github.com/elastic/eui/pull/4993))
+- Removed `emoticon` support and removed rendered `<div>` from `EuiMarkdownFormat` ([#5176](https://github.com/elastic/eui/pull/5176))
 
 ## [`37.7.0`](https://github.com/elastic/eui/tree/v37.7.0)
 
@@ -15,7 +16,7 @@
 - Removed Sass variables for `EuiTabs` font size (`$euiTabFontSize, $euiTabFontSizeS, $euiTabFontSizeL`) ([#5135](https://github.com/elastic/eui/pull/5135))
 - Extended all `EuiTabProps` for each `EuiTabbedContentTab` ([#5135](https://github.com/elastic/eui/pull/5135))
 - Changed `EuiPopover`'s `repositionOnScroll` function to prevent popover and input elements from separating on scroll when nested in `EuiFlyout` ([#5155](https://github.com/elastic/eui/pull/5155))
-- Added the `repositionOnScroll` prop to `EuiSuperSelect` ([#5155](https://github.com/elastic/eui/pull/5155)) 
+- Added the `repositionOnScroll` prop to `EuiSuperSelect` ([#5155](https://github.com/elastic/eui/pull/5155))
 - Added `useGeneratedHtmlId` utility, which memoizes the randomly generated ID on mount and prevents regenerated IDs on component rerender ([#5133](https://github.com/elastic/eui/pull/5133))
 - Fixed `z-index` styles that were causing parts of `EuiResizableContainer` to overlap `EuiHeader` ([#5164](https://github.com/elastic/eui/pull/5164))
 

src-docs/src/views/button/button_group.js

@@ -4,6 +4,7 @@ import {
   EuiButtonGroup,
   EuiSpacer,
   EuiTitle,
+  EuiButton,
 } from '../../../../src/components';
 
 import { htmlIdGenerator } from '../../../../src/services';
@@ -94,6 +95,11 @@ export default () => {
         <h3>Primary &amp; multi select</h3>
       </EuiTitle>
       <EuiSpacer size="s" />
+
+      <EuiButton size="s" color="primary">
+        Option 1
+      </EuiButton>
+      <br />
       <EuiButtonGroup
         legend="This is a primary group"
         options={toggleButtonsMulti}

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

@@ -4,7 +4,7 @@ import { EuiMarkdownFormat } from '../../../../src';
 
 const markdownContent = `Beyond Remark's base syntax, **EuiMarkdownFormat** bundles these abilities by default:
 
-\`:smile:\` we support emojis :smile:!
+\`:smile:\` we support emojis :smile:! But not x)
 
 \`!{tooltip[anchor text](Tooltip content)}\` syntax can render !{tooltip[tooltips like this](I am Jack's helpful tooltip content)}
 

src/components/markdown_editor/plugins/markdown_default_plugins/parsing_plugins.ts

@@ -32,7 +32,7 @@ import { markdownLinkValidator } from '../markdown_link_validator';
 export const getDefaultEuiMarkdownParsingPlugins = (): PluggableList => [
   [markdown, {}],
   [highlight, {}],
-  [emoji, { emoticon: true }],
+  [emoji, { emoticon: false }],
   [MarkdownTooltip.parser, {}],
   [MarkdownCheckbox.parser, {}],
   [markdownLinkValidator, {}],

src/components/markdown_editor/plugins/markdown_default_plugins/processing_plugins.tsx

@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { createElement } from 'react';
+import React, { Fragment, createElement } from 'react';
 // Importing seemingly unused types from `unified` because the definitions
 // are exported for two versions of TypeScript (3.4, 4.0) and implicit
 // imports during eui.d.ts generation default to the incorrect version (3.4).
@@ -60,7 +60,8 @@ export const getDefaultEuiMarkdownProcessingPlugins = (): [
   [
     rehype2react,
     {
-      createElement: createElement,
+      createElement,
+      Fragment,
       components: {
         a: EuiLink,
         code: (props: any) =>

src/themes/eui-amsterdam/overrides/_button_group.scss

@@ -9,6 +9,8 @@
 .euiButtonGroup--small {
   .euiButtonGroupButton {
     border: none !important; // sass-lint:disable-line no-important
+    border-radius: 0 !important; // sass-lint:disable-line no-important
+    font-weight: $euiButtonFontWeight;
 
     // Complicated set of focus states depending on whether it's a button and can receive :focus,
     // or an input and uses focus-within, and browser support for :focus-visible