From 2274458688609230f665fc2b0dad41a4c6dbd430 Mon Sep 17 00:00:00 2001 From: Cee Chen Date: Thu, 15 Aug 2024 10:34:31 -0700 Subject: [PATCH 1/8] Convert `@euiFormLabel` mixin to an equivalent JS fn - do something new/slightly clever with the returned title style obj --- .../form/form_fieldset/_form_legend.scss | 2 - .../form/form_fieldset/form_legend.styles.ts | 20 ++++++++++ .../form/form_fieldset/form_legend.tsx | 12 +++++- .../form/form_label/_form_label.scss | 1 - .../form/form_label/form_label.styles.ts | 37 +++++++++++++++++++ .../components/form/form_label/form_label.tsx | 9 +++++ .../eui/src/global_styling/mixins/_form.scss | 8 ---- 7 files changed, 76 insertions(+), 13 deletions(-) create mode 100644 packages/eui/src/components/form/form_fieldset/form_legend.styles.ts create mode 100644 packages/eui/src/components/form/form_label/form_label.styles.ts diff --git a/packages/eui/src/components/form/form_fieldset/_form_legend.scss b/packages/eui/src/components/form/form_fieldset/_form_legend.scss index 0b79ffc6f06..74310fc9cd8 100644 --- a/packages/eui/src/components/form/form_fieldset/_form_legend.scss +++ b/packages/eui/src/components/form/form_fieldset/_form_legend.scss @@ -1,6 +1,4 @@ .euiFormLegend { - @include euiFormLabel; - &:not(.euiFormLegend-isHidden) { margin-bottom: $euiSizeS; diff --git a/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts b/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts new file mode 100644 index 00000000000..f40a2fa9304 --- /dev/null +++ b/packages/eui/src/components/form/form_fieldset/form_legend.styles.ts @@ -0,0 +1,20 @@ +/* + * 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 { euiFormLabel } from '../form_label/form_label.styles'; + +export const euiFormLegendStyles = (euiThemeContext: UseEuiTheme) => { + return { + euiFormLegend: css` + ${euiFormLabel(euiThemeContext)} + `, + }; +}; diff --git a/packages/eui/src/components/form/form_fieldset/form_legend.tsx b/packages/eui/src/components/form/form_fieldset/form_legend.tsx index 70f2aba97c7..fd504daebcd 100644 --- a/packages/eui/src/components/form/form_fieldset/form_legend.tsx +++ b/packages/eui/src/components/form/form_fieldset/form_legend.tsx @@ -7,10 +7,14 @@ */ import React, { HTMLAttributes, FunctionComponent, ReactNode } from 'react'; -import { CommonProps } from '../../common'; import classNames from 'classnames'; + +import { useEuiMemoizedStyles } from '../../../services'; +import { CommonProps } from '../../common'; import { EuiScreenReaderOnly } from '../../accessibility'; +import { euiFormLegendStyles } from './form_legend.styles'; + export type EuiFormLegendProps = HTMLAttributes & CommonProps & { /** @@ -32,6 +36,10 @@ export const EuiFormLegend: FunctionComponent = ({ ...rest }) => { const isLegendHidden = display === 'hidden'; + + const styles = useEuiMemoizedStyles(euiFormLegendStyles); + const cssStyles = [styles.euiFormLegend]; + const classes = classNames( 'euiFormLegend', { @@ -42,7 +50,7 @@ export const EuiFormLegend: FunctionComponent = ({ ); return ( - + {isLegendHidden ? ( {children} diff --git a/packages/eui/src/components/form/form_label/_form_label.scss b/packages/eui/src/components/form/form_label/_form_label.scss index 20157b715a8..60c28f4edd7 100644 --- a/packages/eui/src/components/form/form_label/_form_label.scss +++ b/packages/eui/src/components/form/form_label/_form_label.scss @@ -3,7 +3,6 @@ * 2. Disabled state overrides pointer. */ .euiFormLabel { - @include euiFormLabel; display: inline-block; transition: all $euiAnimSpeedFast $euiAnimSlightResistance; diff --git a/packages/eui/src/components/form/form_label/form_label.styles.ts b/packages/eui/src/components/form/form_label/form_label.styles.ts new file mode 100644 index 00000000000..1c4971934b2 --- /dev/null +++ b/packages/eui/src/components/form/form_label/form_label.styles.ts @@ -0,0 +1,37 @@ +/* + * 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 { serializeStyles, type CSSObject } from '@emotion/serialize'; + +import { UseEuiTheme } from '../../../services'; +import { euiTextBreakWord } from '../../../global_styling'; +import { euiTitle } from '../../title/title.styles'; + +export const euiFormLabel = (euiThemeContext: UseEuiTheme) => { + const { euiTheme } = euiThemeContext; + // Exclude the fontWeight from the title, since we're setting our own later + const { fontWeight: _, ..._titleStyles } = euiTitle(euiThemeContext, 'xxxs'); + // Since we're not returning a css`` string (to avoid generating an extra Emotion + // className), we need to manually serialize the style object into a string + const titleStyles = serializeStyles([_titleStyles as CSSObject]).styles; + + return ` + ${titleStyles} + font-weight: ${euiTheme.font.weight.semiBold}; + ${euiTextBreakWord()} + `; +}; + +export const euiFormLabelStyles = (euiThemeContext: UseEuiTheme) => { + return { + euiFormLabel: css` + ${euiFormLabel(euiThemeContext)} + `, + }; +}; diff --git a/packages/eui/src/components/form/form_label/form_label.tsx b/packages/eui/src/components/form/form_label/form_label.tsx index 85248a42ab1..855ecc9b011 100644 --- a/packages/eui/src/components/form/form_label/form_label.tsx +++ b/packages/eui/src/components/form/form_label/form_label.tsx @@ -12,8 +12,12 @@ import React, { HTMLAttributes, } from 'react'; import classNames from 'classnames'; + +import { useEuiMemoizedStyles } from '../../../services'; import { CommonProps, ExclusiveUnion } from '../../common'; +import { euiFormLabelStyles } from './form_label.styles'; + interface EuiFormLabelCommonProps { isFocused?: boolean; isInvalid?: boolean; @@ -54,6 +58,9 @@ export const EuiFormLabel: FunctionComponent = ({ className, ...rest }: EuiFormLabelProps) => { + const styles = useEuiMemoizedStyles(euiFormLabelStyles); + const cssStyles = [styles.euiFormLabel]; + const classes = classNames('euiFormLabel', className, { 'euiFormLabel-isFocused': isFocused, 'euiFormLabel-isInvalid': isInvalid, @@ -63,6 +70,7 @@ export const EuiFormLabel: FunctionComponent = ({ if (type === 'legend') { return ( )} > @@ -72,6 +80,7 @@ export const EuiFormLabel: FunctionComponent = ({ } else { return (