diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png index 641a82d3e7d..44dc779ab3e 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index 35654f6e8fa..d5d3c96d2b2 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 665684f717c..4fdf4e693dc 100644 Binary files a/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_desktop_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png index 6931b769978..1921fd64987 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_Error.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png index 61343ce82ab..a0235bb6357 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormErrorText_Playground.png differ diff --git a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png index 83db9abe8e8..9fd1bdee25b 100644 Binary files a/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png and b/packages/eui/.loki/reference/chrome_mobile_Forms_EuiForm_EuiFormRow_Subcomponents_EuiFormHelpText_Playground.png differ diff --git a/packages/eui/changelogs/upcoming/7966.md b/packages/eui/changelogs/upcoming/7966.md new file mode 100644 index 00000000000..ecdf93a80c9 --- /dev/null +++ b/packages/eui/changelogs/upcoming/7966.md @@ -0,0 +1,3 @@ +**CSS-in-JS conversions** + +- Converted `EuiForm`, `EuiFormHelpText`, and `EuiFormErrorText` to Emotion diff --git a/packages/eui/src/components/form/__snapshots__/form.test.tsx.snap b/packages/eui/src/components/form/__snapshots__/form.test.tsx.snap index f0300518fb9..104cad69ce9 100644 --- a/packages/eui/src/components/form/__snapshots__/form.test.tsx.snap +++ b/packages/eui/src/components/form/__snapshots__/form.test.tsx.snap @@ -34,6 +34,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" 1`] = ` Please address the highlighted errors.

+
`; @@ -78,6 +81,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has mul +
`; @@ -115,6 +121,9 @@ exports[`EuiForm renders with error callout when isInvalid is "true" and has one +
`; diff --git a/packages/eui/src/components/form/_form.scss b/packages/eui/src/components/form/_form.scss deleted file mode 100644 index 087f4efcb57..00000000000 --- a/packages/eui/src/components/form/_form.scss +++ /dev/null @@ -1,8 +0,0 @@ -.euiForm__error { - @include euiFontSizeS; - list-style: disc; -} - -.euiForm__errors { - margin-bottom: $euiSize; -} diff --git a/packages/eui/src/components/form/_index.scss b/packages/eui/src/components/form/_index.scss index 226d12a5be8..a2f82046dd3 100644 --- a/packages/eui/src/components/form/_index.scss +++ b/packages/eui/src/components/form/_index.scss @@ -1,8 +1,5 @@ @import 'checkbox/index'; -@import 'form'; -@import 'form_error_text/index'; @import 'form_fieldset/index'; -@import 'form_help_text/index'; @import 'form_label/index'; @import 'form_row/index'; @import 'radio/index'; diff --git a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap index 0d938a95aa5..19e7eea0f8c 100644 --- a/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap +++ b/packages/eui/src/components/form/described_form_group/__snapshots__/described_form_group.test.tsx.snap @@ -324,20 +324,20 @@ exports[`EuiDescribedFormGroup ties together parts for accessibility 1`] = ` />
Error one
Error two
Help text diff --git a/packages/eui/src/components/form/form.tsx b/packages/eui/src/components/form/form.tsx index c37c47b87a5..d1fd1ba2ef3 100644 --- a/packages/eui/src/components/form/form.tsx +++ b/packages/eui/src/components/form/form.tsx @@ -11,12 +11,15 @@ import React, { HTMLAttributes, FormHTMLAttributes, useCallback, + useMemo, forwardRef, } from 'react'; import classNames from 'classnames'; + +import { CommonProps, ExclusiveUnion } from '../common'; import { EuiCallOut } from '../call_out'; import { EuiI18n } from '../i18n'; -import { CommonProps, ExclusiveUnion } from '../common'; +import { EuiSpacer } from '../spacer'; import { FormContext, FormContextValue } from './eui_form_context'; @@ -59,7 +62,7 @@ export const EuiForm = forwardRef( }, ref ) => { - const formContext = React.useMemo( + const formContext = useMemo( (): FormContextValue => ({ defaultFullWidth: fullWidth ?? false, }), @@ -96,17 +99,20 @@ export const EuiForm = forwardRef( default="Please address the highlighted errors." > {(addressFormErrors: string) => ( - - {optionalErrors} - + <> + + {optionalErrors} + + + )} ); diff --git a/packages/eui/src/components/form/form_error_text/__snapshots__/form_error_text.test.tsx.snap b/packages/eui/src/components/form/form_error_text/__snapshots__/form_error_text.test.tsx.snap index 71fce8f5c8a..7ee70978b22 100644 --- a/packages/eui/src/components/form/form_error_text/__snapshots__/form_error_text.test.tsx.snap +++ b/packages/eui/src/components/form/form_error_text/__snapshots__/form_error_text.test.tsx.snap @@ -4,7 +4,7 @@ exports[`EuiFormErrorText is rendered 1`] = `
This is an error. diff --git a/packages/eui/src/components/form/form_error_text/_form_error_text.scss b/packages/eui/src/components/form/form_error_text/_form_error_text.scss deleted file mode 100644 index 3d600660408..00000000000 --- a/packages/eui/src/components/form/form_error_text/_form_error_text.scss +++ /dev/null @@ -1,5 +0,0 @@ -.euiFormErrorText { - @include euiFontSizeXS; - padding-top: $euiSizeXS; - color: $euiColorDanger; -} diff --git a/packages/eui/src/components/form/form_error_text/_index.scss b/packages/eui/src/components/form/form_error_text/_index.scss deleted file mode 100644 index eb02ecea23e..00000000000 --- a/packages/eui/src/components/form/form_error_text/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'form_error_text'; diff --git a/packages/eui/src/components/form/form_error_text/form_error_text.styles.ts b/packages/eui/src/components/form/form_error_text/form_error_text.styles.ts new file mode 100644 index 00000000000..ec8ccba057c --- /dev/null +++ b/packages/eui/src/components/form/form_error_text/form_error_text.styles.ts @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; +import { euiFontSize, logicalCSS } from '../../../global_styling'; + +export const euiFormErrorTextStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiFormErrorText: css` + ${logicalCSS('padding-top', euiTheme.size.xs)} + ${euiFontSize(euiThemeContext, 'xs')} + color: ${euiTheme.colors.danger}; + `, + }; +}; diff --git a/packages/eui/src/components/form/form_error_text/form_error_text.tsx b/packages/eui/src/components/form/form_error_text/form_error_text.tsx index fc14e2822be..b83cdd15655 100644 --- a/packages/eui/src/components/form/form_error_text/form_error_text.tsx +++ b/packages/eui/src/components/form/form_error_text/form_error_text.tsx @@ -7,10 +7,13 @@ */ import React, { FunctionComponent, HTMLAttributes } from 'react'; - import classNames from 'classnames'; + +import { useEuiMemoizedStyles } from '../../../services'; import { CommonProps } from '../../common'; +import { euiFormErrorTextStyles } from './form_error_text.styles'; + export type EuiFormErrorTextProps = CommonProps & HTMLAttributes; @@ -20,9 +23,15 @@ export const EuiFormErrorText: FunctionComponent = ({ ...rest }) => { const classes = classNames('euiFormErrorText', className); + const styles = useEuiMemoizedStyles(euiFormErrorTextStyles); return ( -
+
{children}
); diff --git a/packages/eui/src/components/form/form_help_text/__snapshots__/form_help_text.test.tsx.snap b/packages/eui/src/components/form/form_help_text/__snapshots__/form_help_text.test.tsx.snap index 15cef2f2ee8..87209508a96 100644 --- a/packages/eui/src/components/form/form_help_text/__snapshots__/form_help_text.test.tsx.snap +++ b/packages/eui/src/components/form/form_help_text/__snapshots__/form_help_text.test.tsx.snap @@ -3,7 +3,7 @@ exports[`EuiFormHelpText is rendered 1`] = `
This is help text. diff --git a/packages/eui/src/components/form/form_help_text/_form_help_text.scss b/packages/eui/src/components/form/form_help_text/_form_help_text.scss deleted file mode 100644 index d449b0e2c6a..00000000000 --- a/packages/eui/src/components/form/form_help_text/_form_help_text.scss +++ /dev/null @@ -1,5 +0,0 @@ -.euiFormHelpText { - @include euiFontSizeXS; - padding-top: $euiSizeXS; - color: $euiColorDarkShade; -} diff --git a/packages/eui/src/components/form/form_help_text/_index.scss b/packages/eui/src/components/form/form_help_text/_index.scss deleted file mode 100644 index ceb9997afcf..00000000000 --- a/packages/eui/src/components/form/form_help_text/_index.scss +++ /dev/null @@ -1 +0,0 @@ -@import 'form_help_text'; diff --git a/packages/eui/src/components/form/form_help_text/form_help_text.styles.ts b/packages/eui/src/components/form/form_help_text/form_help_text.styles.ts new file mode 100644 index 00000000000..87a3271e10f --- /dev/null +++ b/packages/eui/src/components/form/form_help_text/form_help_text.styles.ts @@ -0,0 +1,24 @@ +/* + * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one + * or more contributor license agreements. Licensed under the Elastic License + * 2.0 and the Server Side Public License, v 1; you may not use this file except + * in compliance with, at your election, the Elastic License 2.0 or the Server + * Side Public License, v 1. + */ + +import { css } from '@emotion/react'; + +import { UseEuiTheme } from '../../../services'; +import { euiFontSize, logicalCSS } from '../../../global_styling'; + +export const euiFormHelpTextStyles = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + + return { + euiFormHelpText: css` + ${logicalCSS('padding-top', euiTheme.size.xs)} + ${euiFontSize(euiThemeContext, 'xs')} + color: ${euiTheme.colors.darkShade}; + `, + }; +}; diff --git a/packages/eui/src/components/form/form_help_text/form_help_text.tsx b/packages/eui/src/components/form/form_help_text/form_help_text.tsx index 9b8b3e9bf63..80bdb0392ad 100644 --- a/packages/eui/src/components/form/form_help_text/form_help_text.tsx +++ b/packages/eui/src/components/form/form_help_text/form_help_text.tsx @@ -7,10 +7,13 @@ */ import React, { FunctionComponent, HTMLAttributes } from 'react'; - import classNames from 'classnames'; + +import { useEuiMemoizedStyles } from '../../../services'; import { CommonProps } from '../../common'; +import { euiFormHelpTextStyles } from './form_help_text.styles'; + export type EuiFormHelpTextProps = CommonProps & HTMLAttributes; export const EuiFormHelpText: FunctionComponent = ({ @@ -19,9 +22,10 @@ export const EuiFormHelpText: FunctionComponent = ({ ...rest }) => { const classes = classNames('euiFormHelpText', className); + const styles = useEuiMemoizedStyles(euiFormHelpTextStyles); return ( -
+
{children}
); diff --git a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap index 7590cc16dd0..d63486f1acb 100644 --- a/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap +++ b/packages/eui/src/components/form/form_row/__snapshots__/form_row.test.tsx.snap @@ -341,14 +341,14 @@ exports[`EuiFormRow props error as array is rendered 1`] = ` />
Error
Error2 @@ -371,7 +371,7 @@ exports[`EuiFormRow props error as string is rendered 1`] = ` />
Error @@ -438,7 +438,7 @@ exports[`EuiFormRow props helpText is rendered 1`] = ` id="generated-id" />