`;
diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx
index 5c170d3c180..4443a525e3e 100644
--- a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append.stories.tsx
@@ -69,7 +69,7 @@ export const Playground: Story = {
return (
}
+ append={
}
/>
);
},
diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts
index 380710945e3..88a7e75c282 100644
--- a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts
+++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.styles.ts
@@ -9,90 +9,91 @@
import { css } from '@emotion/react';
import { UseEuiTheme } from '@elastic/eui-theme-common';
-import { logicalCSS } from '../../../../global_styling';
-import { buttonSelectors } from '../form_control_layout.styles';
-import { euiFormVariables } from '../../form.styles';
+import {
+ euiButtonDisplaysColors,
+ logicalCSS,
+} from '../../../../global_styling';
+import {
+ appendPrependSelector,
+ buttonSelector,
+ textSelector,
+} from '../form_control_layout.styles';
+import { euiFormControlFocusStyles, euiFormVariables } from '../../form.styles';
export const euiFormAppendPrependStyles = (euiThemeContext: UseEuiTheme) => {
const { euiTheme } = euiThemeContext;
const form = euiFormVariables(euiThemeContext);
- const buttons = buttonSelectors;
+ const appendPrepend = appendPrependSelector;
+ const buttons = buttonSelector;
+ const text = textSelector;
+ const buttonStyles = euiButtonDisplaysColors(euiThemeContext);
return {
side: css`
position: relative;
display: flex;
align-items: center;
- gap: ${euiTheme.size.xs};
+ gap: ${euiTheme.size.s};
block-size: 100%;
max-inline-size: 100%;
+ border-radius: ${form.controlLayoutInnerBorderRadius};
+
+ /* Focus is handled by the wrapper. This ensures correct positioning and border radius */
+ &:focus-visible {
+ outline: none;
+ }
`,
uncompressed: css`
&:not(:has(> ${buttons}:first-child, > *:first-child ${buttons})) {
- ${logicalCSS('padding-left', euiTheme.size.m)}
+ ${logicalCSS('padding-left', euiTheme.size.s)}
}
&:not(:has(> ${buttons}:last-child, > *:last-child ${buttons})) {
- ${logicalCSS('padding-right', euiTheme.size.m)}
+ ${logicalCSS('padding-right', euiTheme.size.s)}
}
`,
compressed: css`
&:not(:has(> ${buttons}:first-child, > *:first-child ${buttons})) {
- ${logicalCSS('padding-left', euiTheme.size.s)}
+ ${logicalCSS('padding-left', euiTheme.size.xs)}
}
&:not(:has(> ${buttons}:last-child, > *:last-child ${buttons})) {
- ${logicalCSS('padding-right', euiTheme.size.s)}
+ ${logicalCSS('padding-right', euiTheme.size.xs)}
}
`,
- append: css`
- border-radius: 0;
- border-start-end-radius: ${euiTheme.border.radius.small};
- border-end-end-radius: ${euiTheme.border.radius.small};
- `,
- prepend: css`
- border-radius: 0;
- border-start-start-radius: ${euiTheme.border.radius.small};
- border-end-start-radius: ${euiTheme.border.radius.small};
- `,
- isInteractive: css`
- color: ${euiTheme.colors.textPrimary};
-
- &:hover {
- background-color: ${euiTheme.colors.backgroundBaseInteractiveHover};
- }
-
- &:focus-visible {
- outline: none;
+ wrapper: css`
+ position: relative;
- /* apply a focus style that matches input focus more closely */
+ &:has(${appendPrepend}:focus-visible) {
&::after {
+ ${euiFormControlFocusStyles(euiThemeContext)}
content: '';
position: absolute;
- inset: 0;
- border: ${euiTheme.border.width.thick} solid
- ${euiTheme.components.forms.borderFocused};
- /* ensure it stays on top of hovered borders */
- z-index: 2;
+ inset: -${euiTheme.size.xs};
+ border-radius: ${form.controlLayoutBorderRadius};
pointer-events: none;
- border-radius: inherit;
}
}
+ `,
+ isInteractive: css`
+ ${buttonStyles.empty.primary};
+ background-color: ${form.backgroundColor};
- .euiFormLabel {
- color: currentColor;
+ * {
cursor: pointer;
}
- * {
+ ${text} {
+ color: currentColor;
cursor: pointer;
}
`,
disabled: css`
color: ${form.textColorDisabled};
- .euiFormLabel {
+ .euiFormLabel,
+ .euiNotificationBadge {
color: ${form.textColorDisabled};
}
`,
diff --git a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx
index dec9b1198ee..cf3e0766c09 100644
--- a/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx
+++ b/packages/eui/src/components/form/form_control_layout/append_prepend/form_append_prepend.tsx
@@ -115,14 +115,18 @@ export const EuiFormAppendPrepend: FunctionComponent<
}) => {
const styles = useEuiMemoizedStyles(euiFormAppendPrependStyles);
- const { compressed: formLayoutCompressed, inputId: formLayoutInputId } =
- useContext(EuiFormControlLayoutContext);
+ const {
+ compressed: formLayoutCompressed,
+ inputId: formLayoutInputId,
+ isDisabled: formLayoutIsDisabled,
+ } = useContext(EuiFormControlLayoutContext);
const compressed = _compressed ?? formLayoutCompressed;
const inputId = _inputId ?? formLayoutInputId;
// Adding automatic check on onClick for DevX convinience, this doesn't replace defining `element`
const isButton = element === 'button' || typeof rest.onClick === 'function';
- const isDisabled = _isDisabled || disabled;
+ const isDisabled =
+ _isDisabled || disabled || (!isButton && formLayoutIsDisabled);
const iconLeft = _iconLeft &&
;
const iconRight = _iconRight &&
;
@@ -132,7 +136,6 @@ export const EuiFormAppendPrepend: FunctionComponent<
compressed ? styles.compressed : styles.uncompressed,
isButton && !isDisabled && styles.isInteractive,
isDisabled && styles.disabled,
- isButton && styles[side],
];
const labelProps = isButton
@@ -158,8 +161,18 @@ export const EuiFormAppendPrepend: FunctionComponent<
);
+ let component = (
+
)}
+ >
+ {content}
+
+ );
+
if (isButton) {
- return (
+ component = (
)}
- >
- {content}
- ;
};
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
index f106a7511c5..04a691f2d0f 100644
--- a/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
+++ b/packages/eui/src/components/form/form_control_layout/form_control_layout.stories.tsx
@@ -43,7 +43,7 @@ import {
EuiFormControlLayoutProps,
} from './form_control_layout';
import { EuiFormAppend, EuiFormPrepend } from './append_prepend';
-import { UseEuiTheme } from '@elastic/eui-theme-common';
+import { mathWithUnits, UseEuiTheme } from '@elastic/eui-theme-common';
const meta: Meta