[Emotion] Convert EuiMarkdownEditor

changelogs/upcoming/7738.md

@@ -0,0 +1,9 @@
+**Bug fixes**
+
+- Fixed `EuiMarkdownEditor` not disabling the upload dropzone when in `readOnly` mode
+- Fixed `EuiMarkdownEditor` not showing an invalid underline on the editor when `errors` are present
+
+**CSS-in-JS conversions**
+
+- Converted `EuiMarkdownEditor` to Emotion; Removed `$euiMarkdownEditorMinHeight`
+- Fully converted `EuiMarkdownFormat` to Emotion

src/components/form/checkbox/_checkbox.scss

@@ -50,6 +50,29 @@
       }
     }
 
+    &:focus {
+      + .euiCheckbox__square {
+        @include euiCustomControlFocused;
+      }
+    }
+
+    // Readonly checkboxes are used by EuiMarkdownEditor
+    &[readonly] {
+      cursor: default !important; // stylelint-disable-line declaration-no-important
+
+      ~ .euiCheckbox__label {
+        cursor: default !important; // stylelint-disable-line declaration-no-important
+      }
+
+      // maintain the initial color to enforce that clicks are not doing anything
+      &:focus {
+        + .euiCheckbox__square {
+          outline-color: $euiFormCustomControlBorderColor !important; // stylelint-disable-line declaration-no-important
+          border-color: $euiFormCustomControlBorderColor;
+        }
+      }
+    }
+
     &[disabled] {
       cursor: not-allowed !important; // stylelint-disable-line declaration-no-important
 
@@ -74,12 +97,6 @@
         @include euiCustomControlDisabled($type: 'square');
       }
     }
-
-    &:focus {
-      + .euiCheckbox__square {
-        @include euiCustomControlFocused;
-      }
-    }
   }
 
   &.euiCheckbox--inList,

src/components/form/form.styles.test.tsx

@@ -26,6 +26,7 @@ describe('euiFormVariables', () => {
     const { result } = renderHook(() => euiFormVariables(useEuiTheme()));
     expect(result.current).toMatchInlineSnapshot(`
       Object {
+        "animationTiming": "150ms ease-in",
         "backgroundColor": "#f9fbfd",
         "backgroundDisabledColor": "#eceff5",
         "backgroundReadOnlyColor": "#FFF",
@@ -187,7 +188,7 @@ describe('euiCustomControl', () => {
 
           @media screen and (prefers-reduced-motion: no-preference) {
             transition: background-color 150ms ease-in,
-                    border-color 150ms ease-in;
+              border-color 150ms ease-in;
           }
         "
     `);
@@ -206,7 +207,7 @@ describe('euiCustomControl', () => {
 
           @media screen and (prefers-reduced-motion: no-preference) {
             transition: background-color 150ms ease-in,
-                    border-color 150ms ease-in;
+              border-color 150ms ease-in;
           }
         "
     `);
@@ -225,7 +226,7 @@ describe('euiCustomControl', () => {
 
           @media screen and (prefers-reduced-motion: no-preference) {
             transition: background-color 150ms ease-in,
-                    border-color 150ms ease-in;
+              border-color 150ms ease-in;
           }
         "
     `);
@@ -244,7 +245,7 @@ describe('euiCustomControl', () => {
 
           @media screen and (prefers-reduced-motion: no-preference) {
             transition: background-color 150ms ease-in,
-                    border-color 150ms ease-in;
+              border-color 150ms ease-in;
           }
         "
     `);
@@ -263,7 +264,7 @@ describe('euiCustomControl', () => {
 
           @media screen and (prefers-reduced-motion: no-preference) {
             transition: background-color 150ms ease-in,
-                    border-color 150ms ease-in;
+              border-color 150ms ease-in;
           }
         "
     `);

src/components/form/form.styles.ts

@@ -14,7 +14,11 @@ import {
   transparentize,
   makeHighContrastColor,
 } from '../../services';
-import { mathWithUnits, euiCanAnimate } from '../../global_styling';
+import {
+  mathWithUnits,
+  euiCanAnimate,
+  euiFontSize,
+} from '../../global_styling';
 
 export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
   const { euiTheme, colorMode } = euiThemeContext;
@@ -88,6 +92,7 @@ export const euiFormVariables = (euiThemeContext: UseEuiTheme) => {
     ...customControlColors,
     ...iconSizes,
     ...controlLayout,
+    animationTiming: `${euiTheme.animation.fast} ease-in`,
   };
 };
 
@@ -151,8 +156,71 @@ export const euiCustomControl = (
     background: ${euiTheme.colors.emptyShade} no-repeat center;
 
     ${euiCanAnimate} {
-      transition: background-color ${euiTheme.animation.fast} ease-in,
-              border-color ${euiTheme.animation.fast} ease-in;
+      transition: background-color ${form.animationTiming},
+        border-color ${form.animationTiming};
+    }
+  `;
+};
+
+export const euiFormControlText = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const { fontSize } = euiFontSize(euiThemeContext, 's');
+  const { controlPlaceholderText } = euiFormVariables(euiThemeContext);
+
+  return `
+    font-family: ${euiTheme.font.family};
+    font-size: ${fontSize};
+    color: ${euiTheme.colors.text};
+
+    ${euiPlaceholderPerBrowser(`color: ${controlPlaceholderText}`)}
+  `;
+};
+
+export const euiFormControlDefaultShadow = (euiThemeContext: UseEuiTheme) => {
+  const { euiTheme } = euiThemeContext;
+  const form = euiFormVariables(euiThemeContext);
+
+  return `
+    box-shadow: inset 0 0 0 1px ${form.borderColor};
+    background-color: ${form.backgroundColor};
+
+    background-repeat: no-repeat;
+    background-size: 0% 100%;
+    background-image: linear-gradient(to top,
+      var(--euiFormStateColor),
+      var(--euiFormStateColor) ${euiTheme.border.width.thick},
+      transparent ${euiTheme.border.width.thick},
+      transparent 100%
+    );
+
+    ${euiCanAnimate} {
+      transition:
+        box-shadow ${form.animationTiming},
+        background-image ${form.animationTiming},
+        background-size ${form.animationTiming},
+        background-color ${form.animationTiming};
     }
   `;
 };
+
+export const euiFormControlFocusStyles = ({
+  euiTheme,
+  colorMode,
+}: UseEuiTheme) => `
+  --euiFormStateColor: ${euiTheme.colors.primary};
+  background-color: ${
+    colorMode === 'DARK'
+      ? shade(euiTheme.colors.emptyShade, 0.4)
+      : euiTheme.colors.emptyShade
+  };
+  background-size: 100% 100%;
+  outline: none; /* Remove all outlines and rely on our own bottom border gradient */
+`;
+
+const euiPlaceholderPerBrowser = (content: string) => `
+  &::-webkit-input-placeholder { ${content}; opacity: 1; }
+  &::-moz-placeholder { ${content}; opacity: 1; }
+  &:-ms-input-placeholder { ${content}; opacity: 1; }
+  &:-moz-placeholder { ${content}; opacity: 1; }
+  &::placeholder { ${content}; opacity: 1; }
+`;

src/components/index.scss

@@ -5,5 +5,4 @@
 @import 'date_picker/index';
 @import 'datagrid/index';
 @import 'form/index';
-@import 'markdown_editor/index';
 @import 'selectable/index';