{hasLeftIcon && (
),
},
+ render: ({ startControl, endControl, ...args }) => {
+ const { isInvalid, isDisabled, readOnly } = args;
+ const clonedControlProps = { isInvalid, disabled: isDisabled, readOnly };
+ return (
+
+ );
+ },
+};
+
+export const KitchenSink: Story = {
+ tags: ['vrt-only'],
+ render: function Render() {
+ const isDesktop = useIsWithinMinBreakpoint('xl');
+ return (
+
+ }
+ endControl={}
+ />
+ }
+ endControl={}
+ />
+ }
+ endControl={}
+ />
+ }
+ endControl={}
+ />
+ {} }}
+ isLoading
+ startControl={}
+ endControl={}
+ />
+ }
+ delimiter="+"
+ endControl={}
+ />
+ }
+ delimiter={}
+ endControl={}
+ />
+ }
+ endControl={}
+ />
+ }
+ endControl={}
+ />
+
+ }
+ endControl={
+
+ }
+ />
+
+ );
+ },
};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
new file mode 100644
index 00000000000..f6cff7c3cb1
--- /dev/null
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.styles.ts
@@ -0,0 +1,66 @@
+/*
+ * 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 {
+ euiFormControlDisabledStyles,
+ euiFormControlReadOnlyStyles,
+ euiFormControlDefaultShadow,
+ euiFormControlInvalidStyles,
+} from '../form.styles';
+
+export const euiFormControlLayoutDelimitedStyles = (
+ euiThemeContext: UseEuiTheme
+) => {
+ return {
+ // Appended onto existing `euiFormControlLayout` styles
+ delimited: css(
+ // Transition smoothly between disabled/readOnly background color changes
+ euiFormControlDefaultShadow(euiThemeContext, {
+ withBorder: false,
+ withBackground: false,
+ withBackgroundAnimation: true,
+ })
+ ),
+ disabled: css(euiFormControlDisabledStyles(euiThemeContext)),
+ readOnly: css(euiFormControlReadOnlyStyles(euiThemeContext)),
+
+ // Appended onto existing `euiFormControlLayout__childrenWrapper` styles
+ childrenWrapper: {
+ delimited: css`
+ display: flex;
+ `,
+ invalid: css(
+ euiFormControlDefaultShadow(euiThemeContext, {
+ withBorder: false,
+ withBackgroundColor: false,
+ withBackgroundAnimation: false,
+ }),
+ euiFormControlInvalidStyles(euiThemeContext)
+ ),
+ },
+ };
+};
+
+export const euiFormControlLayoutDelimited__delimiter = css`
+ align-self: stretch;
+ flex-grow: 0;
+ display: flex;
+ align-items: center;
+ line-height: 1; /* Override EuiText line-height */
+`;
+
+export const euiFormControlLayoutDelimited__input = css`
+ box-shadow: none;
+ border-radius: 0;
+ text-align: center;
+ ${logicalCSS('height', '100%')}
+`;
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.test.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.test.tsx
index 9d67f323582..0654758ed8c 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.test.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.test.tsx
@@ -8,12 +8,23 @@
import React from 'react';
import { render } from '../../../test/rtl';
+import { shouldRenderCustomStyles } from '../../../test/internal';
import { requiredProps } from '../../../test/required_props';
-import { EuiFormControlLayoutDelimited } from './form_control_layout_delimited';
import { EuiIcon } from '../../icon';
+import { EuiForm } from '../form';
+
+import { EuiFormControlLayoutDelimited } from './form_control_layout_delimited';
describe('EuiFormControlLayoutDelimited', () => {
+ shouldRenderCustomStyles(
+
start}
+ endControl={end}
+ />,
+ { childProps: ['wrapperProps'] }
+ );
+
test('is rendered', () => {
const { container } = render(
{
});
});
});
+
+ describe('inherits', () => {
+ test('fullWidth from ', () => {
+ const { baseElement } = render(
+
+ start}
+ endControl={end}
+ />
+
+ );
+
+ const layout = baseElement.querySelector(
+ '.euiFormControlLayoutDelimited'
+ );
+ expect(layout!.className).toContain('fullWidth');
+ });
+ });
});
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
index f6c5919976c..d4d2ba2180e 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout_delimited.tsx
@@ -6,22 +6,24 @@
* Side Public License, v 1.
*/
-import React, {
- FunctionComponent,
- ReactElement,
- cloneElement,
- ReactNode,
-} from 'react';
+import React, { FunctionComponent, ReactElement, ReactNode } from 'react';
import classNames from 'classnames';
+import { useEuiMemoizedStyles, cloneElementWithCss } from '../../../services';
import { useEuiI18n } from '../../i18n';
import { EuiIcon } from '../../icon';
import { EuiText } from '../../text';
+import { FormContext, useFormContext } from '../eui_form_context';
import {
EuiFormControlLayout,
EuiFormControlLayoutProps,
} from './form_control_layout';
+import {
+ euiFormControlLayoutDelimitedStyles,
+ euiFormControlLayoutDelimited__delimiter,
+ euiFormControlLayoutDelimited__input,
+} from './form_control_layout_delimited.styles';
export type EuiFormControlLayoutDelimitedProps =
Partial & {
@@ -43,7 +45,17 @@ export type EuiFormControlLayoutDelimitedProps =
export const EuiFormControlLayoutDelimited: FunctionComponent<
EuiFormControlLayoutDelimitedProps
-> = ({ startControl, endControl, delimiter, className, ...rest }) => {
+> = ({
+ startControl,
+ endControl,
+ delimiter,
+ className,
+ fullWidth: _fullWidth,
+ ...rest
+}) => {
+ const { defaultFullWidth } = useFormContext();
+ const fullWidth = _fullWidth ?? defaultFullWidth;
+
const { isInvalid, isDisabled, readOnly } = rest;
const showInvalidState = isInvalid && !isDisabled && !readOnly;
@@ -51,25 +63,52 @@ export const EuiFormControlLayoutDelimited: FunctionComponent<
'euiFormControlLayoutDelimited--isInvalid': showInvalidState,
});
+ const styles = useEuiMemoizedStyles(euiFormControlLayoutDelimitedStyles);
+ const cssStyles = [
+ styles.delimited,
+ rest.isDisabled && styles.disabled,
+ rest.readOnly && styles.readOnly,
+ ];
+ const wrapperStyles = [
+ styles.childrenWrapper.delimited,
+ showInvalidState && styles.childrenWrapper.invalid,
+ rest.wrapperProps?.css,
+ ];
+
return (
-
- {addClassesToControl(startControl)}
-
- {addClassesToControl(endControl)}
+
+
+ {addClassesToControl(startControl)}
+
+ {addClassesToControl(endControl)}
+
);
};
const addClassesToControl = (control: ReactElement) => {
- return cloneElement(control, {
- className: classNames(
- control.props.className,
- 'euiFormControlLayoutDelimited__input'
- ),
- });
+ return cloneElementWithCss(
+ control,
+ {
+ css: euiFormControlLayoutDelimited__input,
+ className: classNames(
+ control.props.className,
+ 'euiFormControlLayoutDelimited__input'
+ ),
+ },
+ 'before'
+ );
};
const EuiFormControlDelimiter = ({
@@ -86,6 +125,7 @@ const EuiFormControlDelimiter = ({
return (
({
inline-size: auto;
min-inline-size: ${euiTheme.base * 4}px;
- .euiRange__popover & {
- margin: 0;
+ .euiRange__popover &,
+ .euiDualRange__popover & {
inline-size: 100%;
}
`,
diff --git a/packages/eui/src/services/emotion/clone_element.test.tsx b/packages/eui/src/services/emotion/clone_element.test.tsx
index c1509d865e0..a7d1ce02daa 100644
--- a/packages/eui/src/services/emotion/clone_element.test.tsx
+++ b/packages/eui/src/services/emotion/clone_element.test.tsx
@@ -101,4 +101,50 @@ describe('cloneElementWithCss', () => {
`);
expect(container.firstChild).not.toHaveStyleRule('color', 'red');
});
+
+ it('does not error with or without `key` props', () => {
+ const cloned = ;
+ const KeyTest = () => (
+ <>
+ {cloneElementWithCss(cloned, { css: { color: 'red' } })}
+ {cloneElementWithCss(cloned, { css: { color: 'blue' } })}
+ {cloneElementWithCss(cloned, { key: 'someKey' })}
+
+ );
+ const { container } = render();
+
+ expect(container.children[0]).toHaveStyleRule('color', 'red');
+ expect(container.children[1]).toHaveStyleRule('color', 'blue');
+ expect(container.children[2]).not.toHaveStyleRule('color');
+ });
+
+ describe('cssOrder', () => {
+ it('after', () => {
+ const { container } = render(
+ <>
+ {cloneElementWithCss(
+ ,
+ { css: { label: 'bar' } },
+ 'after'
+ )}
+
+ );
+
+ expect(container.firstElementChild!.className).toContain('foo-bar');
+ });
+
+ it('before', () => {
+ const { container } = render(
+ <>
+ {cloneElementWithCss(
+ ,
+ { css: { label: 'bar' } },
+ 'before'
+ )}
+
+ );
+
+ expect(container.firstElementChild!.className).toContain('bar-foo');
+ });
+ });
});
diff --git a/packages/eui/src/services/emotion/clone_element.tsx b/packages/eui/src/services/emotion/clone_element.tsx
index a090e5d4713..f734653ad1e 100644
--- a/packages/eui/src/services/emotion/clone_element.tsx
+++ b/packages/eui/src/services/emotion/clone_element.tsx
@@ -16,20 +16,25 @@ import { jsx } from '@emotion/react';
*/
export const cloneElementWithCss = (
element: any,
- props: any
+ props: any,
+ // The order affects the className(s) that Emotion outputs
+ cssOrder: 'before' | 'after' = 'after'
): React.ReactElement => {
const clonedElement =
element.props.__EMOTION_TYPE_PLEASE_DO_NOT_USE__ || element.type; // EMOTION_TYPE handles non-React elements (native JSX/HTML nodes)
const clonedProps = {
- key: element.key,
+ ...(element.key ? { key: element.key } : {}),
ref: element.ref,
...element.props,
...props,
};
if (props.css || element.props.css) {
- clonedProps.css = [element.props.css, props.css];
+ clonedProps.css =
+ cssOrder === 'before'
+ ? [props.css, element.props.css]
+ : [element.props.css, props.css];
}
return jsx(clonedElement, clonedProps);
diff --git a/packages/eui/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss b/packages/eui/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss
deleted file mode 100644
index cbd87d08438..00000000000
--- a/packages/eui/src/themes/amsterdam/overrides/_form_control_layout_delimited.scss
+++ /dev/null
@@ -1,42 +0,0 @@
-// TODO: Address nesting during Emotion conversion, if possible
-// stylelint-disable max-nesting-depth
-
-.euiFormControlLayoutDelimited {
- border-radius: $euiFormControlBorderRadius;
-
- &.euiFormControlLayout--group {
- .euiFormControlLayout__childrenWrapper:first-child {
- border-radius: $euiFormControlBorderRadius 0 0 $euiFormControlBorderRadius;
- }
- }
-
- .euiFormControlLayout__childrenWrapper:only-child {
- border-radius: $euiFormControlBorderRadius;
- overflow: hidden;
- }
-
- .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
- &:last-child {
- border-radius: 0 $euiFormControlBorderRadius $euiFormControlBorderRadius 0;
- }
- }
-
- &.euiFormControlLayout--compressed {
- &.euiFormControlLayout--group {
- .euiFormControlLayout__childrenWrapper:first-child {
- border-radius: $euiFormControlCompressedBorderRadius 0 0 $euiFormControlCompressedBorderRadius;
- }
- }
-
- .euiFormControlLayout__childrenWrapper:only-child {
- border-radius: $euiFormControlCompressedBorderRadius;
- overflow: hidden;
- }
-
- .euiFormControlLayout__prepend + .euiFormControlLayout__childrenWrapper {
- &:last-child {
- border-radius: 0 $euiFormControlCompressedBorderRadius $euiFormControlCompressedBorderRadius 0;
- }
- }
- }
-}
diff --git a/packages/eui/src/themes/amsterdam/overrides/_index.scss b/packages/eui/src/themes/amsterdam/overrides/_index.scss
index 517e6936bf2..7fc02729ee9 100644
--- a/packages/eui/src/themes/amsterdam/overrides/_index.scss
+++ b/packages/eui/src/themes/amsterdam/overrides/_index.scss
@@ -1,3 +1,2 @@
@import 'data_grid';
-@import 'form_control_layout_delimited';
@import 'form_controls';