Work around erroring selector

elastic · Aug 26, 2024 · b5b1579 · b5b1579
1 parent 1c6bc78
commit b5b1579
Show file tree

Hide file tree

Showing 6 changed files with 13 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.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