fix: Partially controllable tools (#2793)

cloudscape-design · Oct 4, 2024 · 227dd63 · 227dd63
1 parent 3202255
commit 227dd63
Show file tree

Hide file tree

Showing 6 changed files with 40 additions and 5 deletions.
diff --git a/src/app-layout/__tests__/tools.test.tsx b/src/app-layout/__tests__/tools.test.tsx
@@ -6,7 +6,7 @@ import { act, waitFor } from '@testing-library/react';
 import { describeEachAppLayout, renderComponent, isDrawerClosed } from './utils';
 import AppLayout, { AppLayoutProps } from '../../../lib/components/app-layout';
 
-describeEachAppLayout({ themes: ['classic', 'refresh', 'refresh-toolbar'] }, () => {
+describeEachAppLayout({ themes: ['classic', 'refresh', 'refresh-toolbar'] }, ({ theme }) => {
   test('opens tools drawer', () => {
     let ref: AppLayoutProps.Ref | null = null;
     const { wrapper } = renderComponent(<AppLayout ref={newRef => (ref = newRef)} />);
@@ -56,4 +56,24 @@ describeEachAppLayout({ themes: ['classic', 'refresh', 'refresh-toolbar'] }, ()
       expect(wrapper.find('#custom-button')!.getElement()).toEqual(document.activeElement);
     });
   });
+
+  test('should not open partially controllable tools', () => {
+    const { wrapper } = renderComponent(
+      <AppLayout tools={<button id="custom-button">Click me</button>} toolsOpen={false} />
+    );
+
+    wrapper.findToolsToggle()!.click();
+
+    if (theme === 'refresh-toolbar') {
+      expect(wrapper.findTools()).toBeFalsy();
+    }
+
+    if (theme === 'refresh') {
+      expect(wrapper.findTools().getElement()).toHaveAttribute('aria-hidden', 'true');
+    }
+
+    if (theme === 'classic') {
+      expect(wrapper.findTools().getElement().style).not.toContain('width');
+    }
+  });
 });
diff --git a/src/app-layout/utils/use-drawers.ts b/src/app-layout/utils/use-drawers.ts
@@ -198,7 +198,9 @@ export function useDrawers(
   }
 
   function onActiveDrawerChange(newDrawerId: string | null) {
-    setActiveDrawerId(newDrawerId);
+    if (newDrawerId !== TOOLS_DRAWER_ID) {
+      setActiveDrawerId(newDrawerId);
+    }
     if (newDrawerId) {
       onAddNewActiveDrawer?.(newDrawerId);
     }

diff --git a/src/app-layout/visual-refresh-toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/index.tsx
@@ -332,6 +332,8 @@ const AppLayoutVisualRefreshToolbar = React.forwardRef<AppLayoutProps.Ref, AppLa
       onNavigationToggle,
       onActiveDrawerChange: onActiveDrawerChangeHandler,
       onActiveDrawerResize,
+      toolsOpen,
+      onToolsToggle,
     };
 
     const splitPanelInternals: SplitPanelProviderProps = {

diff --git a/src/app-layout/visual-refresh-toolbar/interfaces.ts b/src/app-layout/visual-refresh-toolbar/interfaces.ts
@@ -52,4 +52,6 @@ export interface AppLayoutInternals {
   onActiveDrawerChange: (newDrawerId: string | null) => void;
   onActiveDrawerResize: (detail: { id: string; size: number }) => void;
   onActiveGlobalDrawersChange: (newDrawerId: string) => void;
+  toolsOpen: boolean;
+  onToolsToggle: (value: boolean) => void;
 }
diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/drawer-triggers.tsx
@@ -38,6 +38,9 @@ interface DrawerTriggersProps {
   globalDrawers: ReadonlyArray<AppLayoutProps.Drawer>;
   onActiveGlobalDrawersChange?: (newDrawerId: string) => void;
 
+  toolsOpen: boolean;
+  onToolsToggle: (value: boolean) => void;
+
   splitPanelOpen?: boolean;
   splitPanelPosition?: AppLayoutProps.SplitPanelPreferences['position'];
   splitPanelToggleProps: SplitPanelToggleProps | undefined;
@@ -62,6 +65,7 @@ export function DrawerTriggers({
   globalDrawers,
   globalDrawersFocusControl,
   onActiveGlobalDrawersChange,
+  toolsOpen,
 }: DrawerTriggersProps) {
   const isMobile = useMobile();
   const hasMultipleTriggers = drawers.length > 1;
@@ -152,11 +156,12 @@ export function DrawerTriggers({
         )}
         {visibleItems.slice(0, globalDrawersStartIndex).map(item => {
           const isForPreviousActiveDrawer = previousActiveLocalDrawerId?.current === item.id;
+          const isActive = item.id === TOOLS_DRAWER_ID ? toolsOpen : item.id === activeDrawerId;
           return (
             <TriggerButton
               ariaLabel={item.ariaLabels?.triggerButton}
-              ariaExpanded={item.id === activeDrawerId}
-              ariaControls={activeDrawerId === item.id ? item.id : undefined}
+              ariaExpanded={isActive}
+              ariaControls={isActive ? item.id : undefined}
               className={clsx(
                 styles['drawers-trigger'],
                 !toolsOnlyMode && testutilStyles['drawers-trigger'],
@@ -167,7 +172,7 @@ export function DrawerTriggers({
               key={item.id}
               onClick={() => onActiveDrawerChange?.(activeDrawerId !== item.id ? item.id : null)}
               ref={item.id === previousActiveLocalDrawerId.current ? drawersFocusRef : undefined}
-              selected={item.id === activeDrawerId}
+              selected={isActive}
               badge={item.badge}
               testId={`awsui-app-layout-trigger-${item.id}`}
               hasTooltip={true}

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -95,6 +95,8 @@ export function AppLayoutToolbarImplementation({
     setToolbarState,
     setToolbarHeight,
     globalDrawersFocusControl,
+    toolsOpen,
+    onToolsToggle,
   } = appLayoutInternals;
   const {
     ariaLabels,
@@ -219,6 +221,8 @@ export function AppLayoutToolbarImplementation({
               globalDrawers={globalDrawers?.filter(item => !!item.trigger) ?? []}
               activeGlobalDrawersIds={activeGlobalDrawersIds ?? []}
               onActiveGlobalDrawersChange={onActiveGlobalDrawersChange}
+              toolsOpen={toolsOpen}
+              onToolsToggle={onToolsToggle}
             />
           </div>
         )}