chore: Misc p0 bug fixes for testing (#2483)

cloudscape-design · Jul 19, 2024 · df4cffb · df4cffb
1 parent b5981ca
commit df4cffb
Show file tree

Hide file tree

Showing 6 changed files with 18 additions and 17 deletions.
diff --git a/src/app-layout/visual-refresh-toolbar/drawer/index.tsx b/src/app-layout/visual-refresh-toolbar/drawer/index.tsx
@@ -71,15 +71,17 @@ export function AppLayoutDrawerImplementation({ appLayoutInternals }: AppLayoutD
       }}
     >
       {!isMobile && activeDrawer?.resizable && (
-        <PanelResizeHandle
-          ref={drawersFocusControl.refs.slider}
-          position="side"
-          className={testutilStyles['drawers-slider']}
-          ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}
-          ariaValuenow={resizeProps.relativeSize}
-          onKeyDown={resizeProps.onKeyDown}
-          onPointerDown={resizeProps.onPointerDown}
-        />
+        <div className={styles['drawer-slider']}>
+          <PanelResizeHandle
+            ref={drawersFocusControl.refs.slider}
+            position="side"
+            className={testutilStyles['drawers-slider']}
+            ariaLabel={activeDrawer?.ariaLabels?.resizeHandle}
+            ariaValuenow={resizeProps.relativeSize}
+            onKeyDown={resizeProps.onKeyDown}
+            onPointerDown={resizeProps.onPointerDown}
+          />
+        </div>
       )}
       <div className={styles['drawer-content-container']}>
         <div className={clsx(styles['drawer-close-button'])}>

diff --git a/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx b/src/app-layout/visual-refresh-toolbar/toolbar/index.tsx
@@ -42,7 +42,7 @@ export function AppLayoutToolbarImplementation({ appLayoutInternals }: AppLayout
     onActiveDrawerChange,
   } = appLayoutInternals;
   // TODO: expose configuration property
-  const pinnedToolbar = false;
+  const pinnedToolbar = true;
   const ref = useRef<HTMLElement>(null);
   useResizeObserver(ref, entry => setToolbarHeight(entry.borderBoxHeight));
   useEffect(() => {

diff --git a/src/container/internal.tsx b/src/container/internal.tsx
@@ -14,7 +14,6 @@ import { useFunnelSubStep } from '../internal/analytics/hooks/use-funnel';
 import { useModalContext } from '../internal/context/modal-context';
 import { useUniqueId } from '../internal/hooks/use-unique-id';
 import { ContainerHeaderContextProvider } from '../internal/context/container-header';
-import { getGlobalFlag } from '../internal/utils/global-flags';
 
 export interface InternalContainerProps extends Omit<ContainerProps, 'variant'>, InternalBaseComponentProps {
   __stickyHeader?: boolean;
@@ -100,7 +99,6 @@ export default function InternalContainer({
   const shouldHaveStickyStyles = isSticky && !isMobile;
 
   const hasMedia = !!media?.content;
-  const hasToolbar = getGlobalFlag('appLayoutWidget');
   const mediaPosition = media?.position ?? 'top';
   return (
     <div
@@ -140,7 +138,6 @@ export default function InternalContainer({
                   [styles['header-dynamic-height']]: hasDynamicHeight,
                   [styles['header-stuck']]: isStuck,
                   [styles['with-paddings']]: !disableHeaderPaddings,
-                  [styles['with-toolbar']]: hasToolbar,
                   [styles['with-hidden-content']]: !children || __hiddenContent,
                   [styles['header-with-media']]: hasMedia,
                   [styles['header-full-page']]: __fullPage && isRefresh,

diff --git a/src/container/styles.scss b/src/container/styles.scss
@@ -205,10 +205,6 @@
   }
 
   &-variant-full-page {
-    &.with-toolbar {
-      padding-block-start: awsui.$space-scaled-s;
-    }
-
     &.header-stuck {
       box-shadow: none;
 

diff --git a/src/split-panel/bottom.tsx b/src/split-panel/bottom.tsx
@@ -11,6 +11,7 @@ import { useVisualRefresh } from '../internal/hooks/use-visual-mode';
 import { useResizeObserver } from '@cloudscape-design/component-toolkit/internal';
 import styles from './styles.css.js';
 import testUtilStyles from './test-classes/styles.css.js';
+import { getGlobalFlag } from '../internal/utils/global-flags';
 
 interface SplitPanelContentBottomProps extends SplitPanelContentProps {
   state: TransitionStatus;
@@ -33,6 +34,7 @@ export function SplitPanelContentBottom({
   onToggle,
 }: SplitPanelContentBottomProps) {
   const isRefresh = useVisualRefresh();
+  const hasToolbar = getGlobalFlag('appLayoutWidget');
   const { bottomOffset, leftOffset, rightOffset, disableContentPaddings, contentWrapperPaddings, reportHeaderHeight } =
     useSplitPanelContext();
   const transitionContentBottomRef = useMergeRefs(splitPanelRef || null, transitioningElementRef);
@@ -62,6 +64,7 @@ export function SplitPanelContentBottom({
         [styles['drawer-disable-content-paddings']]: disableContentPaddings,
         [styles.animating]: isRefresh && (state === 'entering' || state === 'exiting'),
         [styles.refresh]: isRefresh,
+        [styles['with-toolbar']]: hasToolbar,
       })}
       onClick={() => !isOpen && onToggle()}
       style={{

diff --git a/src/split-panel/styles.scss b/src/split-panel/styles.scss
@@ -69,6 +69,9 @@ $app-layout-drawer-width: calc(#{awsui.$space-layout-toggle-diameter} + 2 * #{aw
   }
   &.drawer-closed {
     overflow: hidden;
+    &.with-toolbar {
+      display: none;
+    }
   }
   &.drawer-closed:hover {
     background: awsui.$color-background-layout-panel-hover;