fix: App layout toolbar trigger alignment in Safari (#3547)

Author: just-boris

src/app-layout/__tests__/mobile.test.tsx

@@ -26,8 +26,6 @@ import visualRefreshRefactoredStyles from '../../../lib/components/app-layout/vi
 import toolbarNotificationsStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/notifications/styles.css.js';
 import toolbarSkeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.css.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.css.js';
-import toolbarTriggerButtonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.css.js';
-import iconStyles from '../../../lib/components/icon/styles.css.js';
 
 function AppLayoutWithControlledNavigation({
   initialNavigationOpen,
@@ -77,8 +75,6 @@ describeEachAppLayout({ sizes: ['mobile'] }, ({ theme }) => {
     classic: `.${styles['notifications-sticky']}`,
   };
 
-  const triggerBadgeClassName =
-    theme === 'refresh-toolbar' ? toolbarTriggerButtonStyles['trigger-badge-wrapper'] : iconStyles.badge;
   const isUnfocusable = (element: HTMLElement) =>
     !!findUpUntil(element, current => current.classList.contains(unfocusableClassName));
 
@@ -577,7 +573,8 @@ describeEachAppLayout({ sizes: ['mobile'] }, ({ theme }) => {
 
   test('should render badge when defined', () => {
     const { wrapper } = renderComponent(<AppLayout drawers={manyDrawers} />);
-    expect(wrapper.findDrawerTriggerById('security')!.getElement().children[0]).toHaveClass(triggerBadgeClassName);
+    expect(wrapper.findDrawerTriggerById('security')).toBeTruthy();
+    expect(wrapper.findDrawerTriggerById('security', { hasBadge: true })).toBeTruthy();
   });
 
   test('renders roles only when aria labels are not provided', () => {

src/app-layout/__tests__/runtime-drawers.test.tsx

@@ -22,11 +22,9 @@ import {
   testDrawer,
 } from './utils';
 
-import triggerStyles from '../../../lib/components/app-layout/visual-refresh/styles.selectors.js';
 import skeletonStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/skeleton/styles.selectors.js';
 import toolbarStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/styles.selectors.js';
 import toolbarTriggerStyles from '../../../lib/components/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.selectors.js';
-import iconStyles from '../../../lib/components/icon/styles.selectors.js';
 
 beforeEach(() => {
   awsuiPluginsInternal.appLayout.clearRegisteredDrawers();
@@ -64,7 +62,7 @@ const drawerDefaults: DrawerConfig = {
   unmountContent: () => {},
 };
 
-describeEachAppLayout(({ theme, size }) => {
+describeEachAppLayout(({ size }) => {
   test('does not render runtime drawers when it is explicitly disabled', async () => {
     awsuiPlugins.appLayout.registerDrawer(drawerDefaults);
     const { wrapper } = await renderComponent(<AppLayout {...({ __disableRuntimeDrawers: true } as any)} />);
@@ -111,33 +109,21 @@ describeEachAppLayout(({ theme, size }) => {
     const { wrapper } = await renderComponent(<AppLayout />);
     // the 2nd trigger is for tools
     expect(wrapper.findDrawersTriggers()).toHaveLength(2);
-    const drawerTrigger = wrapper.findDrawerTriggerById(drawerDefaults.id);
-
-    const triggerParent = drawerTrigger!.getElement().parentElement;
-    const triggerParentWrapper = createWrapper(triggerParent!);
 
     awsuiPlugins.appLayout.updateDrawer({
       id: drawerDefaults.id,
       badge: true,
     });
     await delay();
-    const badgeSelector =
-      theme === 'refresh-toolbar'
-        ? toolbarTriggerStyles.badge
-        : theme === 'refresh' && size === 'desktop'
-          ? triggerStyles.badge
-          : iconStyles.badge;
-
-    expect(triggerParentWrapper!.findByClassName(badgeSelector)!.getElement()).toBeInTheDocument();
+    expect(wrapper.findDrawerTriggerById(drawerDefaults.id, { hasBadge: true })).toBeTruthy();
 
     awsuiPlugins.appLayout.updateDrawer({
       id: drawerDefaults.id,
       badge: false,
     });
     await delay();
 
-    // re-querying the dot element
-    expect(triggerParentWrapper!.findByClassName(badgeSelector)).toBeNull();
+    expect(wrapper.findDrawerTriggerById(drawerDefaults.id, { hasBadge: false })).toBeTruthy();
   });
 
   (size === 'desktop' ? test : test.skip)('update runtime drawers config resizable validation', async () => {

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/index.tsx

@@ -217,10 +217,9 @@ function TriggerButton(
         disabled={disabled}
         className={clsx(
           styles.trigger,
-          styles['trigger-button-styles'],
           {
             [styles.selected]: selected,
-            [styles.badge]: badge,
+            [styles['trigger-with-badge']]: badge,
             [testutilStyles['drawers-trigger-with-badge']]: badge,
           },
           className
@@ -232,9 +231,7 @@ function TriggerButton(
         data-shift-focus="awsui-layout-drawer-trigger"
         {...getAnalyticsMetadataAttribute(triggerEventMetadata)}
       >
-        <span className={clsx(badge && clsx(styles['trigger-badge-wrapper'], styles['trigger-button-styles']))}>
-          {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}
-        </span>
+        {(iconName || iconSvg) && <Icon name={iconName} svg={iconSvg} />}
       </button>
       {badge && <div className={styles.dot} />}
       {tooltipVisible && (

src/app-layout/visual-refresh-toolbar/toolbar/trigger-button/styles.scss

@@ -7,31 +7,31 @@
 @use '../../../../internal/styles/tokens' as awsui;
 @use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
 
-@mixin trigger-selected-styles {
-  background: awsui.$color-background-layout-toggle-selected-default;
-  color: awsui.$color-text-layout-toggle-selected;
-
-  &:hover {
-    background: awsui.$color-background-layout-toggle-selected-hover;
-  }
-  &:active {
-    background: awsui.$color-background-layout-toggle-selected-active;
-  }
-}
+.trigger {
+  // reset native <button> tag styles
+  all: initial;
 
-.trigger-button-styles {
-  background: transparent;
+  cursor: pointer;
   color: awsui.$color-text-interactive-default;
   border-start-start-radius: 50%;
   border-start-end-radius: 50%;
   border-end-start-radius: 50%;
   border-end-end-radius: 50%;
   block-size: 30px;
   inline-size: 30px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  box-sizing: border-box;
+  text-align: center;
+
+  &-with-badge {
+    clip-path: path(
+      'M29.2862 10.4145C28.7243 10.5998 28.1238 10.7 27.4999 10.7C24.3519 10.7 21.7999 8.14803 21.7999 5C21.7999 3.92883 22.0954 2.92667 22.6093 2.07057C20.3785 0.754846 17.7774 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 13.4007 29.7497 11.8599 29.2862 10.4145Z'
+    );
+
+    @include styles.with-direction('rtl') {
+      clip-path: path(
+        'M2.21384 10.4145C2.77569 10.5998 3.37617 10.7 4.00007 10.7C7.1481 10.7 9.70007 8.14803 9.70007 5C9.70007 3.92883 9.4046 2.92667 8.89071 2.07057C11.1215 0.754846 13.7226 0 16.5 0C24.7843 0 31.5 6.71573 31.5 15C31.5 23.2843 24.7843 30 16.5 30C8.21573 30 1.5 23.2843 1.5 15C1.5 13.4007 1.75029 11.8599 2.21384 10.4145Z'
+      );
+    }
+  }
 
   &:hover {
     background: awsui.$color-background-input-disabled;
@@ -42,61 +42,30 @@
     background: awsui.$color-background-control-disabled;
     color: awsui.$color-text-interactive-hover;
   }
-}
-
-.trigger-badge-wrapper {
-  position: absolute;
-  inset-block-start: 0;
-  inset-inline-start: 0;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  clip-path: path(
-    'M29.2862 10.4145C28.7243 10.5998 28.1238 10.7 27.4999 10.7C24.3519 10.7 21.7999 8.14803 21.7999 5C21.7999 3.92883 22.0954 2.92667 22.6093 2.07057C20.3785 0.754846 17.7774 0 15 0C6.71573 0 0 6.71573 0 15C0 23.2843 6.71573 30 15 30C23.2843 30 30 23.2843 30 15C30 13.4007 29.7497 11.8599 29.2862 10.4145Z'
-  );
-
-  @include styles.with-direction('rtl') {
-    clip-path: path(
-      'M2.21384 10.4145C2.77569 10.5998 3.37617 10.7 4.00007 10.7C7.1481 10.7 9.70007 8.14803 9.70007 5C9.70007 3.92883 9.4046 2.92667 8.89071 2.07057C11.1215 0.754846 13.7226 0 16.5 0C24.7843 0 31.5 6.71573 31.5 15C31.5 23.2843 24.7843 30 16.5 30C8.21573 30 1.5 23.2843 1.5 15C1.5 13.4007 1.75029 11.8599 2.21384 10.4145Z'
-    );
-  }
-}
-
-.trigger {
-  border-block: none;
-  border-inline: none;
-  cursor: pointer;
-  pointer-events: auto;
-
-  @include focus-visible.when-visible {
-    @include styles.focus-highlight(3px);
-  }
 
   &:focus {
+    // custom outline attached on the wrapping element
     outline: none;
   }
 
   &.selected {
-    @include trigger-selected-styles();
+    background: awsui.$color-background-layout-toggle-selected-default;
+    color: awsui.$color-text-layout-toggle-selected;
 
-    > .trigger-badge-wrapper {
-      @include trigger-selected-styles();
+    &:hover {
+      background: awsui.$color-background-layout-toggle-selected-hover;
+    }
+    &:active {
+      background: awsui.$color-background-layout-toggle-selected-active;
     }
-  }
-
-  &.badge,
-  &.badge:hover,
-  &.badge:active {
-    background: transparent;
   }
 }
 
 .trigger-wrapper {
   position: relative;
-  border-start-start-radius: 50%;
-  border-start-end-radius: 50%;
-  border-end-start-radius: 50%;
-  border-end-end-radius: 50%;
+  &:has(:focus-visible) {
+    @include styles.focus-highlight(3px);
+  }
 }
 
 .dot {