[Visual Refresh] Button style cleanup

packages/eui/changelogs/upcoming/8736.md

@@ -0,0 +1,7 @@
+- Updated `EuiResizableCollapseButton` to use an empty button
+
+**Bug fixes**
+
+- Fixed visual positioning issue for notifications in `EuiHeaderSectionItemButton`
+- Fixed a visual issue where `EuiCollabsibleNavItem` did not have a visible selected state
+

packages/eui/src/components/collapsible_nav_beta/collapsible_nav_item/collapsible_nav_item.styles.ts

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme } from '../../../services';
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services';
 import {
   logicalCSS,
   mathWithUnits,
@@ -23,6 +23,10 @@ export const euiCollapsibleNavItemVariables = (
   euiThemeContext: UseEuiTheme
 ) => {
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'buttonVariant'
+  );
 
   return {
     height: euiTheme.size.xl,
@@ -31,8 +35,9 @@ export const euiCollapsibleNavItemVariables = (
     animation: `${euiTheme.animation.normal} ease-in-out`, // Matches EuiButton
     borderRadius: euiTheme.border.radius.small,
     backgroundHoverColor: euiTheme.colors.lightestShade,
-    backgroundSelectedColor: euiButtonColor(euiThemeContext, 'text')
-      .backgroundColor,
+    backgroundSelectedColor: isRefreshVariant
+      ? euiTheme.colors.backgroundBaseInteractiveSelect
+      : euiButtonColor(euiThemeContext, 'text').backgroundColor,
     color: euiTheme.colors.textParagraph,
     rightIconColor: euiTheme.colors.textDisabled,
   };

packages/eui/src/components/header/header_section/header_section_item_button.styles.ts

@@ -8,7 +8,7 @@
 
 import { css } from '@emotion/react';
 
-import { UseEuiTheme } from '../../../services';
+import { isEuiThemeRefreshVariant, UseEuiTheme } from '../../../services';
 import {
   logicalCSS,
   logicalSizeCSS,
@@ -23,12 +23,25 @@ export const euiHeaderSectionItemButtonStyles = (
 ) => {
   const { childHeight } = euiHeaderVariables(euiThemeContext);
   const { euiTheme } = euiThemeContext;
+  const isRefreshVariant = isEuiThemeRefreshVariant(
+    euiThemeContext,
+    'buttonVariant'
+  );
+
+  const dotSize = euiTheme.size.base;
+  const dotOffset = isRefreshVariant
+    ? mathWithUnits(dotSize, (x) => x * -0.5)
+    : 0;
+  const badgeOffset = isRefreshVariant
+    ? mathWithUnits(euiTheme.size.s, (x) => x * -0.5)
+    : '9%';
 
   return {
     euiHeaderSectionItemButton: css`
       position: relative; /* For positioning the notification */
       ${logicalCSS('height', childHeight)}
       ${logicalCSS('min-width', childHeight)}
+      ${logicalCSS('padding-horizontal', euiTheme.size.s)}
       text-align: center;
       font-size: 0; /* Aligns icons better vertically */
 
@@ -49,17 +62,17 @@ export const euiHeaderSectionItemButtonStyles = (
       `,
       dot: css`
         ${logicalCSS('top', 0)}
-        ${logicalCSS('right', 0)}
+        ${logicalCSS('right', dotOffset)}
         stroke: ${euiTheme.colors.emptyShade};
 
         ${euiMaxBreakpoint(euiThemeContext, 's')} {
-          ${logicalSizeCSS(euiTheme.size.base)}
+          ${logicalSizeCSS(dotSize)}
           ${logicalCSS('top', '9%')}
         }
       `,
       badge: css`
         ${logicalCSS('top', '9%')}
-        ${logicalCSS('right', '9%')}
+        ${logicalCSS('right', badgeOffset)}
         box-shadow: 0 0 0 ${euiTheme.border.width.thin} ${euiTheme.colors
           .emptyShade};
       `,

packages/eui/src/components/resizable_container/__snapshots__/resizable_container.test.tsx.snap

@@ -233,7 +233,7 @@ exports[`EuiResizableContainer can have toggleable panels 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-middle"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-empty-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-middle"
       type="button"
     >
       <span
@@ -325,7 +325,7 @@ exports[`EuiResizableContainer toggleable panels can be configurable 1`] = `
   >
     <button
       aria-label="Press to toggle this panel"
-      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-base-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-top"
+      class="euiButtonIcon euiResizableCollapseButton emotion-euiButtonIcon-xs-empty-text-euiResizableCollapseButton-euiScreenReaderOnly-showOnFocus-collapsible-before-top"
       data-test-subj="panel-toggle"
       type="button"
     >

packages/eui/src/components/resizable_container/resizable_collapse_button.tsx

@@ -9,7 +9,10 @@
 import React, { FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { useEuiMemoizedStyles } from '../../services';
+import {
+  useEuiMemoizedStyles,
+  useEuiThemeRefreshVariant,
+} from '../../services';
 import { EuiButtonIcon, EuiButtonIconPropsForButton } from '../button';
 import { euiScreenReaderOnlyStyles } from '../accessibility/screen_reader_only/screen_reader_only.styles';
 
@@ -53,6 +56,7 @@ export const EuiResizableCollapseButton: FunctionComponent<
   const isHorizontal = direction === 'horizontal';
   const showOnFocus = !isCollapsed && !isVisible;
 
+  const isRefreshVariant = useEuiThemeRefreshVariant('buttonVariant');
   const styles = useEuiMemoizedStyles(euiResizableCollapseButtonStyles);
 
   const collapsedStyles = [
@@ -89,7 +93,7 @@ export const EuiResizableCollapseButton: FunctionComponent<
 
   return (
     <EuiButtonIcon
-      display={isCollapsed ? 'empty' : 'base'}
+      display={isRefreshVariant ? 'empty' : isCollapsed ? 'empty' : 'base'}
       color="text"
       className={classes}
       css={cssStyles}