Workaround for :has CSS selector that nwsapi/jest can't parse (#7981)

elastic · Aug 26, 2024 · 0ae8fc8 · 0ae8fc8
1 parent b69409b
commit 0ae8fc8
Show file tree

Hide file tree

Showing 7 changed files with 24 additions and 8 deletions.
diff --git 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
@@ -57,6 +57,7 @@ export const EuiCheckbox: FunctionComponent<EuiCheckboxProps> = ({
   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
@@ -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
@@ -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
@@ -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.test.tsx b/packages/eui/src/components/form/radio/radio.test.tsx
@@ -7,6 +7,7 @@
  */
 
 import React from 'react';
+import { fireEvent } from '@testing-library/react';
 import { requiredProps } from '../../../test';
 import { shouldRenderCustomStyles } from '../../../test/internal';
 import { render } from '../../../test/rtl';
@@ -72,5 +73,15 @@ describe('EuiRadio', () => {
 
       expect(container.firstChild).toMatchSnapshot();
     });
+
+    test('onChange is fired', () => {
+      const onChange = jest.fn();
+      const { getByRole } = render(
+        <EuiRadio id="id" onChange={onChange} label="test" />
+      );
+      fireEvent.click(getByRole('radio', { name: 'test' }));
+
+      expect(onChange).toHaveBeenCalledTimes(1);
+    });
   });
 });
diff --git 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<EuiRadioProps> = ({
   const styles = useEuiMemoizedStyles(euiRadioStyles);
   const inputStyles = [
     styles.input.euiRadio__circle,
+    !!label && styles.input.hasLabel,
     disabled
       ? checked
         ? styles.input.disabled.selected