fix: Restore Flashbar fixes with workaround for postcss-calc issue (#790

)
cloudscape-design · Feb 28, 2023 · b3f260b · b3f260b
1 parent f99714a
commit b3f260b
Show file tree

Hide file tree

Showing 9 changed files with 302 additions and 97 deletions.
diff --git a/pages/app-layout/with-stacked-notifications-and-no-paddings.page.tsx b/pages/app-layout/with-stacked-notifications-and-no-paddings.page.tsx
diff --git a/pages/app-layout/with-stacked-notifications-and-table.page.tsx b/pages/app-layout/with-stacked-notifications-and-table.page.tsx
@@ -0,0 +1,155 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+import ScreenshotArea from '../utils/screenshot-area';
+import labels from './utils/labels';
+import { FlashbarProps } from '~components/flashbar';
+import { AppLayout, Box, Button, Flashbar, Header, SpaceBetween, SplitPanel, Table, Toggle } from '~components';
+
+export default function () {
+  const [notifications, setNotifications] = useState<ReadonlyArray<FlashbarProps.MessageDefinition>>([]);
+  const [nextId, setNextId] = useState(0);
+  const [disableContentPaddings, setDisableContentPaddings] = useState(true);
+  const [stackItems, setStackItems] = useState(true);
+  const [stickyNotifications, setStickyNotifications] = useState(false);
+  const [stickyTableHeader, setStickyTableHeader] = useState(true);
+  const [splitPanelOpen, setSplitPanelOpen] = useState(true);
+
+  const addNotification = () => {
+    setNotifications(notifications => {
+      const id = nextId.toString();
+      return [
+        {
+          statusIconAriaLabel: 'Info',
+          content:
+            'Considerably long notification message to verify that the notifications bar in the Flashbar does not overlap the text.',
+          id,
+          dismissible: true,
+          onDismiss: () => dismissNotification(id),
+        },
+        ...notifications,
+      ];
+    });
+    setNextId(nextId + 1);
+  };
+
+  const dismissNotification = (id: string): void =>
+    setNotifications(notifications => notifications.filter(item => item.id !== id));
+
+  return (
+    <ScreenshotArea gutters={false}>
+      <AppLayout
+        ariaLabels={labels}
+        stickyNotifications={stickyNotifications}
+        notifications={
+          <Flashbar
+            items={notifications}
+            stackItems={stackItems}
+            i18nStrings={{
+              ariaLabel: 'Notifications',
+              notificationBarText: 'Notifications',
+              notificationBarAriaLabel: 'View all notifications',
+              errorIconAriaLabel: 'Error',
+              successIconAriaLabel: 'Success',
+              warningIconAriaLabel: 'Warning',
+              infoIconAriaLabel: 'Information',
+              inProgressIconAriaLabel: 'In progress',
+            }}
+          />
+        }
+        disableContentPaddings={disableContentPaddings}
+        content={
+          <Table
+            header={
+              <Header
+                variant="h2"
+                actions={
+                  <SpaceBetween direction="horizontal" size="xs">
+                    <Button>Dummy secondary button</Button>
+                    <Button>Dummy secondary button</Button>
+                    <Button>Dummy secondary button</Button>
+                    <Button variant="primary" onClick={addNotification} data-id="add-notification">
+                      Add notification
+                    </Button>
+                  </SpaceBetween>
+                }
+              >
+                Table Header
+              </Header>
+            }
+            footer={
+              <div style={{ height: '150vh' }}>
+                <h1>Table Footer</h1>
+                <p>Long footer to make the main content scrollable.</p>
+                <p>
+                  Use the controls in the Tools panel on the right and the checkboxes at the top in order to test the
+                  integration of the Flashbar with App layout in different settings.
+                </p>
+              </div>
+            }
+            items={[]}
+            columnDefinitions={[]}
+            stickyHeader={stickyTableHeader}
+          />
+        }
+        tools={
+          <Box padding="xl">
+            <SpaceBetween direction="vertical" size="l">
+              <Toggle
+                checked={disableContentPaddings}
+                onChange={event => setDisableContentPaddings(event.detail.checked)}
+                data-id="toggle-content-paddings"
+              >
+                Disable content paddings
+              </Toggle>
+              <Toggle
+                checked={stickyNotifications}
+                onChange={event => setStickyNotifications(event.detail.checked)}
+                data-id="toggle-sticky-notifications"
+              >
+                Sticky Notifications
+              </Toggle>
+              <Toggle
+                checked={stickyTableHeader}
+                onChange={event => setStickyTableHeader(event.detail.checked)}
+                data-id="toggle-sticky-table-header"
+              >
+                Sticky Table header
+              </Toggle>
+              <Toggle
+                checked={stackItems}
+                onChange={event => setStackItems(event.detail.checked)}
+                data-id="toggle-stack-items"
+              >
+                Stack notifications
+              </Toggle>
+            </SpaceBetween>
+          </Box>
+        }
+        toolsOpen={true}
+        splitPanelOpen={splitPanelOpen}
+        onSplitPanelToggle={event => setSplitPanelOpen(event.detail.open)}
+        splitPanel={
+          <SplitPanel
+            header={'Split Panel'}
+            i18nStrings={{
+              preferencesTitle: 'Split panel preferences',
+              preferencesPositionLabel: 'Split panel position',
+              preferencesPositionDescription: 'Choose the default split panel position for the service.',
+              preferencesPositionSide: 'Side',
+              preferencesPositionBottom: 'Bottom',
+              preferencesConfirm: 'Confirm',
+              preferencesCancel: 'Cancel',
+              closeButtonAriaLabel: 'Close panel',
+              openButtonAriaLabel: 'Open panel',
+              resizeHandleAriaLabel: 'Resize split panel',
+            }}
+          >
+            <p>Split panel content</p>
+          </SplitPanel>
+        }
+        splitPanelPreferences={{ position: 'bottom' }}
+      />
+    </ScreenshotArea>
+  );
+}
diff --git a/src/app-layout/index.tsx b/src/app-layout/index.tsx
@@ -453,6 +453,7 @@ const OldAppLayout = React.forwardRef(
               >
                 {notifications && (
                   <Notifications
+                    disableContentPaddings={disableContentPaddings}
                     testUtilsClassName={testutilStyles.notifications}
                     labels={ariaLabels}
                     topOffset={disableBodyScroll ? 0 : headerHeight}

diff --git a/src/app-layout/notifications/index.tsx b/src/app-layout/notifications/index.tsx
@@ -10,24 +10,33 @@ interface NotificationsProps {
   children?: React.ReactNode;
   labels: AppLayoutProps.Labels | undefined;
   topOffset: number | undefined;
+  disableContentPaddings?: boolean;
 }
 interface NotificationWrapperProps extends NotificationsProps {
   sticky: boolean | undefined;
 }
 
 export const Notifications = React.forwardRef(
-  ({ sticky, ...props }: NotificationWrapperProps, ref: React.Ref<HTMLDivElement>) => {
+  ({ sticky, disableContentPaddings, ...props }: NotificationWrapperProps, ref: React.Ref<HTMLDivElement>) => {
     return sticky ? (
       <div ref={ref} className={styles['notifications-sticky']} style={{ top: props.topOffset }}>
-        <div role="region" className={props.testUtilsClassName} aria-label={props.labels?.notifications}>
+        <div
+          role="region"
+          className={clsx(props.testUtilsClassName, disableContentPaddings && styles['no-content-paddings'])}
+          aria-label={props.labels?.notifications}
+        >
           {props.children}
         </div>
       </div>
     ) : (
       <div
         role="region"
         ref={ref}
-        className={clsx(props.testUtilsClassName, styles.notifications)}
+        className={clsx(
+          props.testUtilsClassName,
+          styles.notifications,
+          disableContentPaddings && styles['no-content-paddings']
+        )}
         aria-label={props.labels?.notifications}
       >
         {props.children}

diff --git a/src/app-layout/notifications/styles.scss b/src/app-layout/notifications/styles.scss
@@ -21,3 +21,11 @@
   position: sticky;
   #{custom-props.$flashbarStickyBottomMargin}: #{awsui.$space-xxl};
 }
+
+.no-content-paddings {
+  /*
+  When using the disableContentPaddings option, the Flashbar will use this custom property to add additional space
+  when the notification bar is rendered, to prevent it from overlapping the content.
+   */
+  #{custom-props.$stackedNotificationsBottomMargin}: #{awsui.$space-scaled-l};
+}
diff --git a/src/app-layout/visual-refresh/notifications.tsx b/src/app-layout/visual-refresh/notifications.tsx
@@ -25,6 +25,11 @@ export default function Notifications() {
     return null;
   }
 
+  /*
+  The notificationsElement ref is assigned to an inner div to prevent internal bottom margin from affecting the
+  calculated height, which is used for sticky elements below.
+   */
+
   return (
     <div
       role="region"
@@ -39,9 +44,8 @@ export default function Notifications() {
         testutilStyles.notifications,
         'awsui-context-content-header'
       )}
-      ref={notificationsElement}
     >
-      {notifications}
+      <div ref={notificationsElement}>{notifications}</div>
     </div>
   );
 }
diff --git a/src/flashbar/collapsible-flashbar.tsx b/src/flashbar/collapsible-flashbar.tsx
@@ -20,6 +20,7 @@ import { sendToggleMetric } from './internal/analytics';
 import { useFlashbar } from './common';
 import { throttle } from '../internal/utils/throttle';
 import { scrollElementIntoView } from '../internal/utils/scrollable-containers';
+import { findUpUntil } from '../internal/utils/dom';
 
 export { FlashbarProps };
 
@@ -112,7 +113,7 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
           const windowHeight = window.innerHeight;
           // Take the parent region into account if using the App Layout, because it might have additional margins.
           // Otherwise we use the Flashbar component for this calculation.
-          const outerElement = flashbar.parentElement?.parentElement || flashbar;
+          const outerElement = findUpUntil(flashbar, element => element.getAttribute('role') === 'region') || flashbar;
           const applySpacing =
             isFlashbarStackExpanded && Math.ceil(outerElement.getBoundingClientRect().bottom) >= windowHeight;
           if (!applySpacing) {
@@ -285,7 +286,10 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
         styles.flashbar,
         styles[`breakpoint-${breakpoint}`],
         styles.stack,
+        isCollapsible && styles.collapsible,
+        items.length === 2 && styles['short-list'],
         isFlashbarStackExpanded && styles.expanded,
+        isVisualRefresh && styles['visual-refresh'],
         getVisualContextClassname('flashbar')
       )}
       ref={mergedRef}
@@ -298,7 +302,8 @@ export default function CollapsibleFlashbar({ items, ...restProps }: FlashbarPro
               styles['notification-bar'],
               isVisualRefresh && styles['visual-refresh'],
               isFlashbarStackExpanded ? styles.expanded : styles.collapsed,
-              transitioning && styles['animation-running']
+              transitioning && styles['animation-running'],
+              items.length === 2 && styles['short-list']
             )}
             onClick={toggleCollapseExpand}
             ref={notificationBarRef}