diff --git a/changelogs/upcoming/7738.md b/changelogs/upcoming/7738.md new file mode 100644 index 00000000000..a793785b84f --- /dev/null +++ b/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 diff --git a/src/components/form/checkbox/_checkbox.scss b/src/components/form/checkbox/_checkbox.scss index 849637d6dc3..5f3fad51018 100644 --- a/src/components/form/checkbox/_checkbox.scss +++ b/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, diff --git a/src/components/form/form.styles.test.tsx b/src/components/form/form.styles.test.tsx index ba96ffd6f3a..dcf015f0142 100644 --- a/src/components/form/form.styles.test.tsx +++ b/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; } " `); diff --git a/src/components/form/form.styles.ts b/src/components/form/form.styles.ts index 82b2323fde5..57834bafb09 100644 --- a/src/components/form/form.styles.ts +++ b/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; } +`; diff --git a/src/components/index.scss b/src/components/index.scss index 79063613970..e878de77884 100644 --- a/src/components/index.scss +++ b/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'; diff --git a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap index 50a063e762d..d2865f723b4 100644 --- a/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap +++ b/src/components/markdown_editor/__snapshots__/markdown_editor.test.tsx.snap @@ -1,242 +1,16 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`EuiMarkdownEditor custom plugins are excluded and popover is rendered 1`] = ` -
-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - -
- -
-
-
-