diff --git a/packages/eui/src/components/form/checkbox/checkbox.styles.ts b/packages/eui/src/components/form/checkbox/checkbox.styles.ts index 77d713ba1d1..88c3910f438 100644 --- a/packages/eui/src/components/form/checkbox/checkbox.styles.ts +++ b/packages/eui/src/components/form/checkbox/checkbox.styles.ts @@ -29,6 +29,7 @@ export const euiCheckboxStyles = (euiThemeContext: UseEuiTheme) => { ${controlStyles.input.fauxInput} border-radius: ${euiTheme.border.radius.small}; `, + hasLabel: controlStyles.input.hasLabel, // Skip css`` className generation enabled: { selected: css(controlStyles.input.enabled.selected), unselected: css(controlStyles.input.enabled.unselected), diff --git a/packages/eui/src/components/form/checkbox/checkbox.tsx b/packages/eui/src/components/form/checkbox/checkbox.tsx index 8e5ee9cefca..079e6702650 100644 --- a/packages/eui/src/components/form/checkbox/checkbox.tsx +++ b/packages/eui/src/components/form/checkbox/checkbox.tsx @@ -57,6 +57,7 @@ export const EuiCheckbox: FunctionComponent = ({ const styles = useEuiMemoizedStyles(euiCheckboxStyles); const inputStyles = [ styles.input.euiCheckbox__square, + !!label && styles.input.hasLabel, disabled ? checked || indeterminate ? styles.input.disabled.selected diff --git a/packages/eui/src/components/form/form.styles.test.tsx b/packages/eui/src/components/form/form.styles.test.tsx index 4fd5cddcb96..57af8d78585 100644 --- a/packages/eui/src/components/form/form.styles.test.tsx +++ b/packages/eui/src/components/form/form.styles.test.tsx @@ -258,10 +258,6 @@ describe('euiFormCustomControlStyles', () => { justify-content: center; align-items: center; - &:has(+ label) { - margin-block-start: 4px; - } - &:has(input:focus-visible) { outline: 2px solid #07C; outline-offset: 2px; @@ -273,6 +269,9 @@ describe('euiFormCustomControlStyles', () => { transition-timing-function: ease-in; } ", + "hasLabel": " + margin-block-start: 4px; + ", "hiddenInput": " position: absolute; inset: 0; diff --git a/packages/eui/src/components/form/form.styles.ts b/packages/eui/src/components/form/form.styles.ts index 3fb08bd23ce..df283452f0d 100644 --- a/packages/eui/src/components/form/form.styles.ts +++ b/packages/eui/src/components/form/form.styles.ts @@ -388,10 +388,6 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => { justify-content: center; align-items: center; - &:has(+ label) { - ${logicalCSS('margin-top', centerWithLabel)} - } - &:has(input:focus-visible) { outline: ${euiTheme.focus.width} solid ${controlVars.colors.selected}; outline-offset: ${euiTheme.focus.width}; @@ -403,6 +399,12 @@ export const euiFormCustomControlStyles = (euiThemeContext: UseEuiTheme) => { transition-timing-function: ${controlVars.animation.easing}; } `, + // TODO: Revert https://github.com/elastic/eui/pull/7981 + // once https://github.com/dperini/nwsapi/issues/123 + // has been fixed, and restore `&:has(+ label)` selector + hasLabel: ` + ${logicalCSS('margin-top', centerWithLabel)} + `, enabled: { selected: ` color: ${controlVars.colors.selectedIcon}; diff --git a/packages/eui/src/components/form/radio/radio.styles.ts b/packages/eui/src/components/form/radio/radio.styles.ts index 5970b6d7986..e29f6ccaad4 100644 --- a/packages/eui/src/components/form/radio/radio.styles.ts +++ b/packages/eui/src/components/form/radio/radio.styles.ts @@ -22,6 +22,7 @@ export const euiRadioStyles = (euiThemeContext: UseEuiTheme) => { ${controlStyles.input.fauxInput} border-radius: 50%; `, + hasLabel: controlStyles.input.hasLabel, // Skip css`` className generation enabled: { selected: css(controlStyles.input.enabled.selected), unselected: css(controlStyles.input.enabled.unselected), diff --git a/packages/eui/src/components/form/radio/radio.tsx b/packages/eui/src/components/form/radio/radio.tsx index f3b81b21b8a..932da3f2051 100644 --- a/packages/eui/src/components/form/radio/radio.tsx +++ b/packages/eui/src/components/form/radio/radio.tsx @@ -65,6 +65,7 @@ export const EuiRadio: FunctionComponent = ({ const styles = useEuiMemoizedStyles(euiRadioStyles); const inputStyles = [ styles.input.euiRadio__circle, + !!label && styles.input.hasLabel, disabled ? checked ? styles.input.disabled.selected