Skip to content

Commit

Permalink
Convert basic styles to Emotion
Browse files Browse the repository at this point in the history
  • Loading branch information
cee-chen committed Aug 15, 2024
1 parent 32271a7 commit 960d141
Show file tree
Hide file tree
Showing 5 changed files with 86 additions and 44 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@
exports[`EuiFormRow is rendered 1`] = `
<div
aria-label="aria-label"
class="euiFormRow testClass1 testClass2 emotion-euiTestCss"
class="euiFormRow testClass1 testClass2 emotion-euiFormRow-euiTestCss"
data-test-subj="test subject string"
id="generated-id-row"
>
Expand All @@ -19,7 +19,7 @@ exports[`EuiFormRow is rendered 1`] = `

exports[`EuiFormRow props describedByIds is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -35,7 +35,7 @@ exports[`EuiFormRow props describedByIds is rendered 1`] = `

exports[`EuiFormRow props display type center is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -50,7 +50,7 @@ exports[`EuiFormRow props display type center is rendered 1`] = `

exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed"
class="euiFormRow euiFormRow--compressed emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -65,7 +65,7 @@ exports[`EuiFormRow props display type centerCompressed is rendered 1`] = `

exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal"
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal emotion-euiFormRow-column"
id="generated-id-row"
>
<div
Expand All @@ -80,7 +80,7 @@ exports[`EuiFormRow props display type columnCompressed is rendered 1`] = `

exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch"
class="euiFormRow euiFormRow--compressed euiFormRow--horizontal euiFormRow--hasSwitch emotion-euiFormRow-column"
id="generated-id-row"
>
<div
Expand All @@ -95,7 +95,7 @@ exports[`EuiFormRow props display type columnCompressedSwitch is rendered 1`] =

exports[`EuiFormRow props display type row is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -110,7 +110,7 @@ exports[`EuiFormRow props display type row is rendered 1`] = `

exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `
<div
class="euiFormRow euiFormRow--compressed"
class="euiFormRow euiFormRow--compressed emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -125,7 +125,7 @@ exports[`EuiFormRow props display type rowCompressed is rendered 1`] = `

exports[`EuiFormRow props error as array is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand Down Expand Up @@ -155,7 +155,7 @@ exports[`EuiFormRow props error as array is rendered 1`] = `

exports[`EuiFormRow props error as string is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -178,7 +178,7 @@ exports[`EuiFormRow props error as string is rendered 1`] = `

exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -193,7 +193,7 @@ exports[`EuiFormRow props error is not rendered if isInvalid is false 1`] = `

exports[`EuiFormRow props fullWidth is rendered 1`] = `
<div
class="euiFormRow euiFormRow--fullWidth"
class="euiFormRow emotion-euiFormRow-fullWidth"
id="generated-id-row"
>
<div
Expand All @@ -208,7 +208,7 @@ exports[`EuiFormRow props fullWidth is rendered 1`] = `

exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `
<div
class="euiFormRow euiFormRow--hasEmptyLabelSpace"
class="euiFormRow euiFormRow--hasEmptyLabelSpace emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -223,7 +223,7 @@ exports[`EuiFormRow props hasEmptyLabelSpace is rendered 1`] = `

exports[`EuiFormRow props helpText is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -247,7 +247,7 @@ exports[`EuiFormRow props helpText is rendered 1`] = `

exports[`EuiFormRow props id is rendered 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="id-row"
>
<div
Expand All @@ -262,7 +262,7 @@ exports[`EuiFormRow props id is rendered 1`] = `

exports[`EuiFormRow props isDisabled allows a child to still be disabled manually 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -278,7 +278,7 @@ exports[`EuiFormRow props isDisabled allows a child to still be disabled manuall

exports[`EuiFormRow props isDisabled allows a child's disabled to override 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -293,7 +293,7 @@ exports[`EuiFormRow props isDisabled allows a child's disabled to override 1`] =

exports[`EuiFormRow props isDisabled is passed as disabled to child 1`] = `
<div
class="euiFormRow"
class="euiFormRow emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -309,7 +309,7 @@ exports[`EuiFormRow props isDisabled is passed as disabled to child 1`] = `

exports[`EuiFormRow props isInvalid is rendered 1`] = `
<div
class="euiFormRow euiFormRow--hasLabel"
class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -336,7 +336,7 @@ exports[`EuiFormRow props isInvalid is rendered 1`] = `

exports[`EuiFormRow props label append is rendered 1`] = `
<div
class="euiFormRow euiFormRow--hasLabel"
class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand Down Expand Up @@ -364,7 +364,7 @@ exports[`EuiFormRow props label append is rendered 1`] = `

exports[`EuiFormRow props label is rendered 1`] = `
<div
class="euiFormRow euiFormRow--hasLabel"
class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand All @@ -390,7 +390,7 @@ exports[`EuiFormRow props label is rendered 1`] = `

exports[`EuiFormRow props label renders as a legend and subsquently a fieldset wrapper 1`] = `
<fieldset
class="euiFormRow euiFormRow--hasLabel"
class="euiFormRow euiFormRow--hasLabel emotion-euiFormRow"
id="generated-id-row"
>
<div
Expand Down
19 changes: 0 additions & 19 deletions packages/eui/src/components/form/form_row/_form_row.scss
Original file line number Diff line number Diff line change
@@ -1,22 +1,6 @@
/**
* 1. Coerce inline form elements to behave as block-level elements.
* 2. For inline forms, we need to add margin if the label doesn't exist.
*/
.euiFormRow {
display: flex; /* 1 */
flex-direction: column; /* 1 */
max-width: $euiFormMaxWidth;

+ .euiFormRow,
+ .euiButton {
margin-top: $euiSize;
}
}

.euiFormRow--fullWidth {
max-width: 100%;
}

.euiFormRow--hasEmptyLabelSpace {
margin-top: $euiSize + $euiSizeXS; /* 2 */
// the following ensure that contents that aren't inherently the same height
Expand All @@ -34,9 +18,6 @@
}

.euiFormRow--horizontal {
flex-direction: row;
align-items: stretch;

.euiFormRow__label {
hyphens: auto;
}
Expand Down
51 changes: 51 additions & 0 deletions packages/eui/src/components/form/form_row/form_row.styles.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,51 @@
/*
* 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 { logicalCSS } from '../../../global_styling';
import { euiFormMaxWidth } from '../form.styles';

export const euiFormRowStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const maxWidth = euiFormMaxWidth(euiThemeContext);

return {
euiFormRow: css`
/* Coerce inline form elements to behave as block-level elements */
display: flex;
+ .euiFormRow,
+ .euiButton {
${logicalCSS('margin-top', euiTheme.size.base)}
}
`,
// Skip css`` to avoid generating an Emotion className
formWidth: `
${logicalCSS('max-width', maxWidth)}
`,
fullWidth: css`
${logicalCSS('max-width', '100%')}
`,

row: {
// Skip css`` to avoid generating an Emotion className
row: `
flex-direction: column;
`,
},

column: {
column: css`
flex-direction: row;
align-items: stretch;
`,
},
};
};
Original file line number Diff line number Diff line change
Expand Up @@ -267,7 +267,7 @@ describe('EuiFormRow', () => {
);

const row = container.querySelector('.euiFormRow');
expect(row).toHaveClass('euiFormRow--fullWidth');
expect(row!.className).toContain('fullWidth');
});
});
});
14 changes: 12 additions & 2 deletions packages/eui/src/components/form/form_row/form_row.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -20,12 +20,13 @@ import React, {
import classNames from 'classnames';
import { ExclusiveUnion, CommonProps, keysOf } from '../../common';

import { useGeneratedHtmlId } from '../../../services';
import { useGeneratedHtmlId, useEuiMemoizedStyles } from '../../../services';

import { EuiFormHelpText } from '../form_help_text';
import { EuiFormErrorText } from '../form_error_text';
import { EuiFormLabel } from '../form_label';
import { useFormContext } from '../eui_form_context';
import { euiFormRowStyles } from './form_row.styles';

const displayToClassNameMap = {
row: null,
Expand Down Expand Up @@ -138,13 +139,21 @@ export const EuiFormRow: FunctionComponent<EuiFormRowProps> = ({
'euiFormRow',
{
'euiFormRow--hasEmptyLabelSpace': hasEmptyLabelSpace,
'euiFormRow--fullWidth': fullWidth,
'euiFormRow--hasLabel': hasLabel,
},
displayToClassNameMap[display],
className
);

const styles = useEuiMemoizedStyles(euiFormRowStyles);
const cssStyles = [
styles.euiFormRow,
fullWidth ? styles.fullWidth : styles.formWidth,
...(display.startsWith('column')
? [styles.column.column]
: [styles.row.row]),
];

const optionalHelpTexts = useMemo(() => {
if (!helpText) return;
const helpTexts = Array.isArray(helpText) ? helpText : [helpText];
Expand Down Expand Up @@ -214,6 +223,7 @@ export const EuiFormRow: FunctionComponent<EuiFormRowProps> = ({

return (
<Element
css={cssStyles}
className={classes}
id={`${id}-row`}
{...(rest as HTMLAttributes<HTMLElement>)}
Expand Down

0 comments on commit 960d141

Please sign in to comment.