[designer approve] Remove complex CSS with low usage/visual benefit

elastic · Aug 12, 2024 · ea5830a · ea5830a
1 parent 389935b
commit ea5830a
Show file tree

Hide file tree

Showing 3 changed files with 1 addition and 32 deletions.
diff --git a/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/.../reference/chrome_desktop_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png b/...i/reference/chrome_mobile_Forms_EuiForm_EuiFormControlLayout_Append_Prepend.png
diff --git a/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts b/packages/eui/src/components/form/form_control_layout/form_control_layout.styles.ts
@@ -104,8 +104,6 @@ export const euiFormControlLayoutSideNodeStyles = (
  );
 
  const buttons = '*:is(.euiButton, .euiButtonEmpty, .euiButtonIcon)';
- // Note: `> *` selectors below account for buttons inside popover & tooltip wrappers
-
  const text = '*:is(.euiFormLabel, .euiText)';
 
  return {
@@ -136,6 +134,7 @@ export const euiFormControlLayoutSideNodeStyles = (
  }
 
  /* Account for button padding when spacing children */
+ /* Second > * selector accounts for buttons inside popover & tooltip wrappers */
 
  &:not(:has(> ${buttons}:first-child, > *:first-child > ${buttons})) {
  ${logicalCSS('padding-left', euiTheme.size.s)}
@@ -144,44 +143,14 @@ export const euiFormControlLayoutSideNodeStyles = (
  &:not(:has(> ${buttons}:last-child, > *:last-child > ${buttons})) {
  ${logicalCSS('padding-right', euiTheme.size.s)}
  }
-
- ${text}:where(:has(+ ${buttons}, + * > ${buttons})) {
- ${logicalCSS('margin-right', `-${euiTheme.size.s}`)}
- }
-
- ${text}:where(${buttons} + ${text}, *:has(${buttons}) + ${text}) {
- ${logicalCSS('margin-left', `-${euiTheme.size.s}`)}
- }
  `,
  append: css`
  ${logicalCSS('border-top-right-radius', 'inherit')}
  ${logicalCSS('border-bottom-right-radius', 'inherit')}
-
- & > ${buttons}, & > * > ${buttons} {
- ${logicalCSS('border-top-left-radius', 0)}
- ${logicalCSS('border-bottom-left-radius', 0)}
- }
-
- & > ${buttons}:not(:last-child),
- & > *:not(:last-child) > ${buttons} {
- ${logicalCSS('border-top-right-radius', 0)}
- ${logicalCSS('border-bottom-right-radius', 0)}
- }
  `,
  prepend: css`
  ${logicalCSS('border-top-left-radius', 'inherit')}
  ${logicalCSS('border-bottom-left-radius', 'inherit')}
-
- & > ${buttons}, & > * > ${buttons} {
- ${logicalCSS('border-top-right-radius', 0)}
- ${logicalCSS('border-bottom-right-radius', 0)}
- }
-
- & > ${buttons}:not(:first-child),
- & > *:not(:first-child) > ${buttons} {
- ${logicalCSS('border-top-left-radius', 0)}
- ${logicalCSS('border-bottom-left-radius', 0)}
- }
  `,
  uncompressed: `
  ${text} {