[IRN-5018][BpkNavigationBar][BpkBottomSheet] Add handling for long ti…

…tle text (#3393) [IRN-5018][BpkNavigationBar][BpkBottomSheet] Add handling for long title text (#3393) * Add example heading which doesn't wrap properly * Add example of issue as navigation bar story * Adjust navbar and bottom sheet based on design * Fix alignment for graphic header Fix clamp for BottomSheet h2 * Apply correct sizings and margins Make story names consistent * Update snaps * Move additional padding to BottomSheet only * Generate missing typedefs * PR feedback - prop defaults * PR feedback - prop default
Skyscanner · May 2, 2024 · eb556ae · eb556ae
1 parent 6835caf
commit eb556ae
Show file tree

Hide file tree

Showing 17 changed files with 439 additions and 145 deletions.
diff --git a/examples/bpk-component-bottom-sheet/examples.tsx b/examples/bpk-component-bottom-sheet/examples.tsx
@@ -184,6 +184,26 @@ const OverflowingExample = () => (
   </BottomSheetContainer>
 );
 
+const LongHeaderTextExample = () => (
+  <BottomSheetContainer
+    title="Bottom Sheet title which is long"
+    closeLabel="Close Bottom Sheet"
+  >
+    This is a default bottom sheet. You can put anything you want in here.
+  </BottomSheetContainer>
+);
+
+const LongHeaderTextWithActionButtonExample = () => (
+  <BottomSheetContainer
+    title="Bottom Sheet title which is long"
+    closeLabel="Close Bottom Sheet"
+    actionText="Action"
+    onAction={action('Action clicked')}
+  >
+    This is a default bottom sheet. You can put anything you want in here.
+  </BottomSheetContainer>
+);
+
 const NoHeaderExample = () => (
   <BottomSheetContainer
     closeLabel="Close Bottom Sheet"
@@ -219,8 +239,8 @@ const NestedExample = () => (
     wide
     closeOnEscPressed
     closeOnScrimClick
-    >
-      Outer Bottom Sheet
+  >
+    Outer Bottom Sheet
     <BottomSheetContainer
       title="Inner Bottom Sheet"
       closeLabel="Close Inner Bottom Sheet"
@@ -274,6 +294,8 @@ export {
   BackdropClickCloseExample,
   EscapeCloseExample,
   OverflowingExample,
+  LongHeaderTextExample,
+  LongHeaderTextWithActionButtonExample,
   NoHeaderExample,
   NoHeaderWithActionButtonExample,
   ActionButtonExample,

diff --git a/examples/bpk-component-bottom-sheet/stories.js b/examples/bpk-component-bottom-sheet/stories.js
@@ -23,12 +23,14 @@ import {
   BackdropClickCloseExample,
   EscapeCloseExample,
   OverflowingExample,
+  LongHeaderTextExample,
+  LongHeaderTextWithActionButtonExample,
   NoHeaderExample,
   NoHeaderWithActionButtonExample,
   ActionButtonExample,
   WideExample,
   NestedExample,
-  MultipleBottomSheetsExample
+  MultipleBottomSheetsExample,
 } from './examples';
 
 export default {
@@ -41,6 +43,10 @@ export const BackdropClickClose = BackdropClickCloseExample;
 export const EscapeClose = EscapeCloseExample;
 export const Overflowing = OverflowingExample;
 
+export const LongHeaderText = LongHeaderTextExample;
+export const LongHeaderTextWithActionButton =
+  LongHeaderTextWithActionButtonExample;
+
 export const NoHeader = NoHeaderExample;
 export const NoHeaderWithActionButton = NoHeaderWithActionButtonExample;
 

diff --git a/examples/bpk-component-navigation-bar/examples.js b/examples/bpk-component-navigation-bar/examples.js
@@ -59,6 +59,29 @@ const DefaultExample = () => (
   </div>
 );
 
+const LongTitleTextExample = () => (
+  <div className={getClassNames('bpk-navigation-bar-story')}>
+    <BpkNavigationBar
+      id="test"
+      title="Backpack navigation bar long title example"
+      leadingButton={
+        <BpkNavigationBarIconButton
+          onClick={action('back clicked')}
+          icon={ArrowIconWithRtl}
+          label="back"
+        />
+      }
+      trailingButton={
+        <BpkNavigationBarIconButton
+          onClick={action('close clicked')}
+          icon={CloseIcon}
+          label="close"
+        />
+      }
+    />
+  </div>
+);
+
 const OnDarkExample = () => (
   <div className={getClassNames('bpk-navigation-bar-story')}>
     <BpkNavigationBar
@@ -241,16 +264,17 @@ const VisualTestExample = () => (
     <OnDarkExample />
     <WithLinksOnDarkExample />
   </div>
-)
+);
 
 export {
   DefaultExample,
+  LongTitleTextExample,
   OnDarkExample,
   LeadingIconOnlyExample,
   TrailingIconOnlyExample,
   WithLinksExample,
   WithLogoExample,
   WithLinksOnDarkExample,
   StickyExample,
-  VisualTestExample
+  VisualTestExample,
 };
diff --git a/examples/bpk-component-navigation-bar/stories.js b/examples/bpk-component-navigation-bar/stories.js
@@ -16,13 +16,13 @@
  * limitations under the License.
  */
 
-
 import BpkNavigationBar from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBar';
 import BpkNavigationBarButtonLink from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarButtonLink';
 import BpkNavigationBarIconButton from '../../packages/bpk-component-navigation-bar/src/BpkNavigationBarIconButton';
 
 import {
   DefaultExample,
+  LongTitleTextExample,
   LeadingIconOnlyExample,
   TrailingIconOnlyExample,
   WithLinksExample,
@@ -43,6 +43,7 @@ export default {
 };
 
 export const Default = DefaultExample;
+export const LongTitleText = LongTitleTextExample;
 export const OnDark = OnDarkExample;
 export const LeadingIconOnly = LeadingIconOnlyExample;
 
@@ -57,5 +58,5 @@ export const Sticky = StickyExample;
 export const VisualTest = VisualTestExample;
 export const VisualTestWithZoom = VisualTest.bind({});
 VisualTestWithZoom.args = {
-  zoomEnabled: true
+  zoomEnabled: true,
 };
diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.module.scss
@@ -30,8 +30,6 @@
   animation-timing-function: ease-in-out;
 }
 
-$close-button-width: tokens.bpk-spacing-lg() * 2;
-
 .bpk-bottom-sheet {
   z-index: tokens.$bpk-zindex-modal;
   width: 100%;
@@ -114,8 +112,13 @@ $close-button-width: tokens.bpk-spacing-lg() * 2;
     position: sticky;
     top: 0;
     z-index: tokens.$bpk-zindex-tooltip - 1;
+    padding: tokens.bpk-spacing-sm() 0;
 
-    @include borders.bpk-border-bottom-sm(tokens.$bpk-line-day);
+    @include utils.bpk-themeable-property(
+      background-color,
+      --bpk-navigation-bar-background-color,
+      tokens.$bpk-surface-default-day
+    );
   }
 
   @keyframes slide-up {

diff --git a/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx b/packages/bpk-component-bottom-sheet/src/BpkBottomSheet.tsx
@@ -24,7 +24,7 @@ import BpkCloseButton from '../../bpk-component-close-button';
 // @ts-expect-error Untyped import. See `decisions/imports-ts-suppressions.md`.
 import { BpkButtonLink } from '../../bpk-component-link';
 import BpkNavigationBar from "../../bpk-component-navigation-bar";
-import BpkText, { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
+import { TEXT_STYLES } from "../../bpk-component-text/src/BpkText";
 import { BpkDialogWrapper, cssModules } from "../../bpk-react-utils";
 
 import STYLES from './BpkBottomSheet.module.scss';
@@ -87,63 +87,63 @@ const BpkBottomSheet = ({
   const dialogClassName = getClassName(
     'bpk-bottom-sheet',
     wide && 'bpk-bottom-sheet--wide'
-    );
+  );
 
-    return <BpkBreakpoint query={BREAKPOINTS.ABOVE_MOBILE}>
-      {(isAboveMobile: boolean) =>
+  return <BpkBreakpoint query={BREAKPOINTS.ABOVE_MOBILE}>
+    {(isAboveMobile: boolean) =>
       <BpkDialogWrapper
-      ariaLabelledby={ariaLabelledby}
-      dialogClassName={dialogClassName}
-      id={id}
-      isOpen={isOpen}
-      onClose={(
-        arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>,
-        arg1?: {
-          source: 'ESCAPE' | 'DOCUMENT_CLICK';
-        }) => handleClose( isAboveMobile ? 0 : animationTimeout, arg0, arg1)}
-      exiting={exiting}
-      transitionClassNames={{
-        appear: getClassName('bpk-bottom-sheet--appear'),
-        appearActive: getClassName('bpk-bottom-sheet--appear-active'),
-        exit: getClassName('bpk-bottom-sheet--exit')
-      }}
-      closeOnEscPressed={closeOnEscPressed}
-      closeOnScrimClick={closeOnScrimClick}
-      timeout={{appear: animationTimeout, exit: isAboveMobile ? 0 : animationTimeout}}
+        ariaLabelledby={ariaLabelledby}
+        dialogClassName={dialogClassName}
+        id={id}
+        isOpen={isOpen}
+        onClose={(
+          arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>,
+          arg1?: {
+            source: 'ESCAPE' | 'DOCUMENT_CLICK';
+          }) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)}
+        exiting={exiting}
+        transitionClassNames={{
+          appear: getClassName('bpk-bottom-sheet--appear'),
+          appearActive: getClassName('bpk-bottom-sheet--appear-active'),
+          exit: getClassName('bpk-bottom-sheet--exit')
+        }}
+        closeOnEscPressed={closeOnEscPressed}
+        closeOnScrimClick={closeOnScrimClick}
+        timeout={{ appear: animationTimeout, exit: isAboveMobile ? 0 : animationTimeout }}
       >
-      <>
-        <header className={getClassName('bpk-bottom-sheet--header')}>
-          <BpkNavigationBar
-            id={headingId}
-            title={title &&
-              <BpkText id={headingId} textStyle={TEXT_STYLES.label1} tagName="h2">{title}</BpkText>
-            }
-            leadingButton={
-              <BpkCloseButton
-                label={closeLabel}
-                onClick={(
-                  arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>,
-                  arg1?: {
-                    source: 'ESCAPE' | 'DOCUMENT_CLICK';
-                  }) => handleClose( isAboveMobile ? 0 : animationTimeout, arg0, arg1)}
-              />
-            }
-            trailingButton={
-              actionText && onAction ? (
-                <BpkButtonLink
-                  onClick={onAction}
-                >
-                  {actionText}
-                </BpkButtonLink>
-              ) :
-              null
-            }
-          />
-        </header>
-        <div className={getClassName('bpk-bottom-sheet--content')}>{children}</div>
-    </>
-    </BpkDialogWrapper>
-  }
+        <>
+          <header className={getClassName('bpk-bottom-sheet--header')}>
+            <BpkNavigationBar
+              id={headingId}
+              title={title}
+              titleTextStyle={TEXT_STYLES.label1}
+              titleTagName={title ? "h2" : "span"}
+              leadingButton={
+                <BpkCloseButton
+                  label={closeLabel}
+                  onClick={(
+                    arg0?: TouchEvent | MouseEvent | KeyboardEvent | SyntheticEvent<HTMLDialogElement, Event>,
+                    arg1?: {
+                      source: 'ESCAPE' | 'DOCUMENT_CLICK';
+                    }) => handleClose(isAboveMobile ? 0 : animationTimeout, arg0, arg1)}
+                />
+              }
+              trailingButton={
+                actionText && onAction ? (
+                  <BpkButtonLink
+                    onClick={onAction}
+                  >
+                    {actionText}
+                  </BpkButtonLink>
+                ) :
+                  null
+              }
+            />
+          </header>
+          <div className={getClassName('bpk-bottom-sheet--content')}>{children}</div>
+        </>
+      </BpkDialogWrapper>
+    }
   </BpkBreakpoint>
 }
 

diff --git a/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap b/packages/bpk-component-bottom-sheet/src/__snapshots__/BpkBottomSheet-test.tsx.snap
@@ -52,7 +52,7 @@ exports[`BpkBottomSheet renders correctly with action props 1`] = `
               class="bpk-navigation-bar__title bpk-navigation-bar__title--default"
             >
               <span
-                class="bpk-text bpk-text--heading-5"
+                class="bpk-text bpk-text--label-1"
                 id="bpk-bottom-sheet-heading-my-bottom-sheet-bpk-navigation-bar-title"
               />
             </span>
@@ -131,7 +131,7 @@ exports[`BpkBottomSheet renders correctly with minimum prop 1`] = `
               class="bpk-navigation-bar__title bpk-navigation-bar__title--default"
             >
               <span
-                class="bpk-text bpk-text--heading-5"
+                class="bpk-text bpk-text--label-1"
                 id="bpk-bottom-sheet-heading-my-bottom-sheet-bpk-navigation-bar-title"
               />
             </span>
@@ -200,7 +200,7 @@ exports[`BpkBottomSheet renders correctly with wide prop 1`] = `
               class="bpk-navigation-bar__title bpk-navigation-bar__title--default"
             >
               <span
-                class="bpk-text bpk-text--heading-5"
+                class="bpk-text bpk-text--label-1"
                 id="bpk-bottom-sheet-heading-my-bottom-sheet-bpk-navigation-bar-title"
               />
             </span>

diff --git a/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap b/packages/bpk-component-modal/src/__snapshots__/BpkModal-test.tsx.snap
@@ -30,12 +30,16 @@ exports[`BpkModal should render correctly in the given target if renderTarget is
               aria-labelledby="bpk-modal-heading-my-modal"
               class="bpk-navigation-bar bpk-navigation-bar--default bpk-modal__navigation"
             >
-              <h2
-                class="bpk-modal__heading"
-                id="bpk-modal-heading-my-modal"
+              <div
+                class="bpk-navigation-bar__title-container"
               >
-                Modal title
-              </h2>
+                <h2
+                  class="bpk-modal__heading"
+                  id="bpk-modal-heading-my-modal"
+                >
+                  Modal title
+                </h2>
+              </div>
               <div
                 class="bpk-navigation-bar__trailing-item bpk-navigation-bar__trailing-item-default"
               >