[PR feedback] Reduce CSS overrides on arrow styles

- add `left` and `right` CSS keys - add open/closed CSS keys while we're here - update snapshots
elastic · Sep 8, 2023 · dbcab02 · dbcab02
1 parent e195f62
commit dbcab02
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 36 deletions.
diff --git a/src/components/accordion/__snapshots__/accordion.test.tsx.snap b/src/components/accordion/__snapshots__/accordion.test.tsx.snap
@@ -11,7 +11,7 @@ exports[`EuiAccordion behavior closes when clicked twice 1`] = `
       aria-controls="25"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -65,7 +65,7 @@ exports[`EuiAccordion behavior does not open when isDisabled 1`] = `
       aria-controls="23"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow-left-isClosed"
       disabled=""
       tabindex="-1"
       type="button"
@@ -121,7 +121,7 @@ exports[`EuiAccordion behavior opens when clicked once 1`] = `
       aria-controls="22"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-isOpen"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -174,7 +174,7 @@ exports[`EuiAccordion behavior opens when div is clicked if element is a div 1`]
       aria-controls="24"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-isOpen"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -229,7 +229,7 @@ exports[`EuiAccordion is rendered 1`] = `
       aria-controls="0"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -279,7 +279,7 @@ exports[`EuiAccordion isDisabled is rendered 1`] = `
       aria-controls="21"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-disabled-isDisabled-euiAccordion__arrow-left-isClosed"
       disabled=""
       tabindex="-1"
       type="button"
@@ -377,7 +377,7 @@ exports[`EuiAccordion props arrowDisplay right is rendered 1`] = `
       aria-controls="13"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -417,7 +417,7 @@ exports[`EuiAccordion props arrowProps is rendered 1`] = `
       aria-expanded="false"
       aria-label="aria-label"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-euiTestCss"
+      class="euiButtonIcon euiAccordion__arrow testClass1 testClass2 emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed-euiTestCss"
       data-test-subj="test subject string"
       tabindex="-1"
       type="button"
@@ -468,7 +468,7 @@ exports[`EuiAccordion props buttonContent is rendered 1`] = `
       aria-controls="3"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -522,7 +522,7 @@ exports[`EuiAccordion props buttonContentClassName is rendered 1`] = `
       aria-controls="2"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -572,7 +572,7 @@ exports[`EuiAccordion props buttonElement is rendered 1`] = `
       aria-controls="10"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="0"
       type="button"
     >
@@ -620,7 +620,7 @@ exports[`EuiAccordion props buttonProps is rendered 1`] = `
       aria-controls="4"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -672,7 +672,7 @@ exports[`EuiAccordion props buttonProps paddingSize l 1`] = `
       aria-controls="7"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -723,7 +723,7 @@ exports[`EuiAccordion props buttonProps paddingSize m 1`] = `
       aria-controls="6"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -774,7 +774,7 @@ exports[`EuiAccordion props buttonProps paddingSize s 1`] = `
       aria-controls="5"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -825,7 +825,7 @@ exports[`EuiAccordion props element is rendered 1`] = `
       aria-controls="1"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="0"
       type="button"
     >
@@ -873,7 +873,7 @@ exports[`EuiAccordion props extraAction is rendered 1`] = `
       aria-controls="11"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -930,7 +930,7 @@ exports[`EuiAccordion props forceState closed is rendered 1`] = `
       aria-controls="16"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -984,7 +984,7 @@ exports[`EuiAccordion props forceState open is rendered 1`] = `
       aria-controls="17"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-isOpen"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -1037,7 +1037,7 @@ exports[`EuiAccordion props initialIsOpen is rendered 1`] = `
       aria-controls="12"
       aria-expanded="true"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-isOpen"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isOpen"
       tabindex="-1"
       type="button"
     >
@@ -1090,7 +1090,7 @@ exports[`EuiAccordion props isLoading is rendered 1`] = `
       aria-controls="19"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -1149,7 +1149,7 @@ exports[`EuiAccordion props isLoadingMessage is rendered 1`] = `
       aria-controls="20"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-left-isClosed"
       tabindex="-1"
       type="button"
     >

diff --git a/src/components/accordion/accordion_trigger/accordion_arrow.styles.ts b/src/components/accordion/accordion_trigger/accordion_arrow.styles.ts
@@ -12,18 +12,22 @@ import { UseEuiTheme } from '../../../services';
 import { logicalCSS } from '../../../global_styling';
 
 export const euiAccordionArrowStyles = ({ euiTheme }: UseEuiTheme) => ({
-  // !important overrides EuiButtonIcon's default transforms
   euiAccordion__arrow: css`
-    /* stylelint-disable declaration-no-important */
     flex-shrink: 0;
+  `,
+  left: css`
     ${logicalCSS('margin-right', euiTheme.size.xs)}
+  `,
+  right: css`
+    ${logicalCSS('margin-left', euiTheme.size.xs)}
+  `,
+  // !important overrides EuiButtonIcon's default transforms
+  isClosed: css`
+    /* stylelint-disable-next-line declaration-no-important */
     transform: rotate(0deg) !important;
   `,
   isOpen: css`
+    /* stylelint-disable-next-line declaration-no-important */
     transform: rotate(90deg) !important;
   `,
-  right: css`
-    ${logicalCSS('margin-left', euiTheme.size.xs)}
-    ${logicalCSS('margin-right', 0)}
-  `,
 });
diff --git a/src/components/accordion/accordion_trigger/accordion_arrow.tsx b/src/components/accordion/accordion_trigger/accordion_arrow.tsx
@@ -21,7 +21,7 @@ type _EuiAccordionArrowProps = Partial<EuiButtonIconPropsForButton> &
   };
 
 export const EuiAccordionArrow: FunctionComponent<_EuiAccordionArrowProps> = ({
-  arrowDisplay,
+  arrowDisplay = 'left',
   arrowProps,
   isOpen,
   ...rest
@@ -33,8 +33,8 @@ export const EuiAccordionArrow: FunctionComponent<_EuiAccordionArrowProps> = ({
   const styles = euiAccordionArrowStyles(euiTheme);
   const cssStyles = [
     styles.euiAccordion__arrow,
-    isOpen && styles.isOpen,
-    arrowDisplay === 'right' && styles.right,
+    styles[arrowDisplay],
+    isOpen ? styles.isOpen : styles.isClosed,
     arrowProps?.css,
   ];
 

diff --git a/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap b/...s/collapsible_nav/collapsible_nav_group/__snapshots__/collapsible_nav_group.test.tsx.snap
@@ -237,7 +237,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true accepts accordion pro
       aria-controls="id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"
       type="button"
     >
@@ -302,7 +302,7 @@ exports[`EuiCollapsibleNavGroup when isCollapsible is true will render an accord
       aria-controls="id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed"
       tabindex="-1"
       type="button"
     >

diff --git a/...sible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap b/...sible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_accordion.test.tsx.snap
@@ -26,7 +26,7 @@ exports[`EuiCollapsibleNavAccordion renders as a sub item 1`] = `
       aria-controls="generated-id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-euiCollapsibleNavAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="0"
       type="button"
     >
@@ -96,7 +96,7 @@ exports[`EuiCollapsibleNavAccordion renders as a top level item 1`] = `
       aria-controls="generated-id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-euiCollapsibleNavAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="0"
       type="button"
     >

diff --git a/...ollapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap b/...ollapsible_nav_beta/collapsible_nav_item/__snapshots__/collapsible_nav_item.test.tsx.snap
@@ -54,7 +54,7 @@ exports[`EuiCollapsibleNavItem renders a top level accordion if items exist 1`]
       aria-controls="generated-id"
       aria-expanded="false"
       aria-labelledby="generated-id"
-      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-euiCollapsibleNavAccordion__arrow"
+      class="euiButtonIcon euiAccordion__arrow emotion-euiButtonIcon-xs-empty-text-euiAccordion__arrow-right-isClosed-euiCollapsibleNavAccordion__arrow"
       tabindex="0"
       type="button"
     >