🐛 nav issues (#1072)

* chore(): remove container class form the meta bar * fix: remove css util class * fix: remove css util class * fix: adjust arrow of popover for the nav * chore: add changeset * chore: wait for popup * fix: adjust container in the popup * chore(): update base images * chore: trigger build * fix(popup): container padding left and right * fix: popup toggle logic * chore(): update base images * chore: trigger build * chore: popup visual test wait before screenshot * chore: skip popup desktop * chore(): update base images * chore: trigger build * chore: adjust errorThreshold for visuals --------- Co-authored-by: mladenplaninicic <[email protected]> Co-authored-by: hirsch88 <[email protected]>
baloise · Oct 18, 2023 · d2dac07 · d2dac07
1 parent 635c59b
commit d2dac07
Show file tree

Hide file tree

Showing 49 changed files with 211 additions and 73 deletions.
diff --git a/.changeset/ninety-trains-push.md b/.changeset/ninety-trains-push.md
@@ -0,0 +1,5 @@
+---
+'@baloise/design-system-components': patch
+---
+
+The arrow position in the navigation popover has been adjusted, and the CSS utility class 'container' has been removed from the navigation component.
diff --git a/CHANGELOG_NEXT.md b/CHANGELOG_NEXT.md
@@ -559,7 +559,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 * **main nav desktop:** other test ([7cc4394](https://github.com/baloise/design-system/commit/7cc439496b2e5d3c37383853a25950f4dae74794))
 * **main nav desktop:** updated dependencies ([35973d0](https://github.com/baloise/design-system/commit/35973d002d0cdcfa49e393198a1baf1d8e609166))
 
-
 ### Bug Fixes
 
 * **input:** format according to the pattern and enable Home/End key. Closes [#243](https://github.com/baloise/design-system/issues/243) ([bb1e5a3](https://github.com/baloise/design-system/commit/bb1e5a31b00a9df3010e05d32bef74209b619dda))
@@ -701,7 +700,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.20.2](https://github.com/baloise/design-system/compare/v10.20.1...v10.20.2) (2022-09-02)
 
-
 ### Bug Fixes
 
 * fix bal-input mask when deleting last character error popped up ([db14042](https://github.com/baloise/design-system/commit/db14042311dc516a2b752b41593ae4dcdb5fba09))
@@ -712,7 +710,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
 
 ## [10.20.1](https://github.com/baloise/design-system/compare/v10.20.0...v10.20.1) (2022-09-01)
 
-
 ### Bug Fixes
 
 * **closable-popover:** fix the click outside on popover ([f44dfe0](https://github.com/baloise/design-system/commit/f44dfe0bea15bcbe42e43f8eb0d1b7dc9e4c4b7a))

diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts
@@ -2518,6 +2518,7 @@ export namespace Components {
           * Id of the reference element default is the trigger element.
          */
         "reference"?: string;
+        "setMinWidth": (value: number) => Promise<void>;
         /**
           * Triggers the popup
          */

diff --git a/packages/components/src/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.sass b/packages/components/src/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.sass
@@ -10,6 +10,31 @@
   width: 100%
   z-index: var(--bal-z-index-navigation)
   //
+  // container adjustment
+  &__container
+    flex-grow: 1
+    margin: 0 auto
+    position: relative
+    width: auto
+    width: 100% !important
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
+    &--fluid
+      max-width: var(--bal-container-size-fluid) !important
+    &--detail-page
+      max-width: var(--bal-container-size-detail-page) !important
+    &--compact
+      max-width: var(--bal-container-size-compact) !important
+    &--blog-page
+      max-width: var(--bal-container-size-blog-page) !important
+    +tablet
+      padding-left: var(--bal-container-space-tablet)
+      padding-right: var(--bal-container-space-tablet)
+    +desktop
+      padding-left: var(--bal-container-space-desktop)
+      padding-right: var(--bal-container-space-desktop)
+      max-width: var(--bal-container-size-normal)
+  //
   // hidden
   &--hidden-mobile
     +mobile
@@ -42,7 +67,7 @@
     background: transparent
     box-shadow: none
 
-.bal-nav-menu-bar__inner > .container
+.bal-nav-menu-bar__inner > .bal-nav-menu-bar__container
   min-height: 64px
   +widescreen
     background: var(--bal-nav-menu-bar-background)

diff --git a/packages/components/src/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.tsx b/packages/components/src/components/bal-nav/bal-nav-menu-bar/bal-nav-menu-bar.tsx
@@ -72,7 +72,7 @@ export class NavMenuBar implements ComponentInterface, Loggable {
         >
           <div
             class={{
-              container: true,
+              ...block.element('container').class(),
             }}
           >
             <slot></slot>

diff --git a/packages/components/src/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.sass b/packages/components/src/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.sass
@@ -15,6 +15,31 @@
   width: calc( 100% + 1rem + 1rem)
   margin-left: -1rem
   margin-right: -1rem
+  //
+  // container adjustment
+  &__container
+    flex-grow: 1
+    margin: 0 auto
+    position: relative
+    width: auto
+    width: 100% !important
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
+    &--fluid
+      max-width: var(--bal-container-size-fluid) !important
+    &--detail-page
+      max-width: var(--bal-container-size-detail-page) !important
+    &--compact
+      max-width: var(--bal-container-size-compact) !important
+    &--blog-page
+      max-width: var(--bal-container-size-blog-page) !important
+    +tablet
+      padding-left: var(--bal-container-space-tablet)
+      padding-right: var(--bal-container-space-tablet)
+    +desktop
+      padding-left: var(--bal-container-space-desktop)
+      padding-right: var(--bal-container-space-desktop)
+      max-width: var(--bal-container-size-normal)
 
   // Line
   // --------------------------------------------------

diff --git a/packages/components/src/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.tsx b/packages/components/src/components/bal-nav/bal-nav-menu-flyout/bal-nav-menu-flyout.tsx
@@ -89,7 +89,7 @@ export class NavMenuFlyout implements ComponentInterface, Loggable, BalResizeObs
         ></div>
         <div
           class={{
-            container: true,
+            ...block.element('container').class(),
           }}
         >
           <slot></slot>

diff --git a/packages/components/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.sass b/packages/components/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.sass
@@ -13,8 +13,29 @@
   z-index: var(--bal-z-index-navigation)
   //
   // container adjustment
-  .container
-    height: 100%
+  &__container
+    flex-grow: 1
+    margin: 0 auto
+    position: relative
+    width: auto
+    width: 100% !important
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
+    &--fluid
+      max-width: var(--bal-container-size-fluid) !important
+    &--detail-page
+      max-width: var(--bal-container-size-detail-page) !important
+    &--compact
+      max-width: var(--bal-container-size-compact) !important
+    &--blog-page
+      max-width: var(--bal-container-size-blog-page) !important
+    +tablet
+      padding-left: var(--bal-container-space-tablet)
+      padding-right: var(--bal-container-space-tablet)
+    +desktop
+      padding-left: var(--bal-container-space-desktop)
+      padding-right: var(--bal-container-space-desktop)
+      max-width: var(--bal-container-size-normal)
   //
   // size
   &--size-normal

diff --git a/packages/components/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx b/packages/components/src/components/bal-nav/bal-nav-meta-bar/bal-nav-meta-bar.tsx
@@ -109,7 +109,7 @@ export class NavMetaBar implements ComponentInterface, Loggable {
       >
         <div
           class={{
-            container: true,
+            ...block.element('container').class(),
           }}
         >
           <slot></slot>

diff --git a/packages/components/src/components/bal-nav/bal-nav.sass b/packages/components/src/components/bal-nav/bal-nav.sass
@@ -30,6 +30,31 @@
   +desktop
     display: none
     visibility: hidden
+  //
+  // container adjustment
+  &__container
+    flex-grow: 1
+    margin: 0 auto
+    position: relative
+    width: auto
+    width: 100% !important
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
+    &--fluid
+      max-width: var(--bal-container-size-fluid) !important
+    &--detail-page
+      max-width: var(--bal-container-size-detail-page) !important
+    &--compact
+      max-width: var(--bal-container-size-compact) !important
+    &--blog-page
+      max-width: var(--bal-container-size-blog-page) !important
+    +tablet
+      padding-left: var(--bal-container-space-tablet)
+      padding-right: var(--bal-container-space-tablet)
+    +desktop
+      padding-left: var(--bal-container-space-desktop)
+      padding-right: var(--bal-container-space-desktop)
+      max-width: var(--bal-container-size-normal)
 
 .bal-nav__flyout:not(.bal-nav__flyout--visible)
   +visually-hidden

diff --git a/packages/components/src/components/bal-nav/bal-nav.tsx b/packages/components/src/components/bal-nav/bal-nav.tsx
@@ -63,6 +63,7 @@ export class NavMetaBar
   @State() language: BalLanguage = defaultConfig.language
   @State() region: BalRegion = defaultConfig.region
   @State() isFlyoutActive = false
+  private hasRenderedWithFlyoutActive = false
   @State() activeMetaLinkValue?: string
   @State() activeMenuLinkValue?: string // only for desktop tab view
 
@@ -147,7 +148,7 @@ export class NavMetaBar
           triggerEl.classList.contains('bal-nav__popup--touch-top'),
         )
         if (isTouchMetaTopButtonClicked) {
-          this.isFlyoutActive = false
+          this.closeFlyout()
         }
       } else {
         this.onPopupClose(triggers)
@@ -158,12 +159,16 @@ export class NavMetaBar
   @Listen('click', { target: 'document', passive: true })
   async clickOnOutside(ev: UIEvent) {
     if (this.isDesktop) {
-      if (this.isFlyoutActive) {
-        const targetIsInMetaBar = this.metaBarEl?.querySelector('.container')?.contains(ev.target as Node)
-        const targetIsInMenuBar = this.menuBarEl?.querySelector('.container')?.contains(ev.target as Node)
+      if (this.hasRenderedWithFlyoutActive) {
+        const targetIsInMetaBar = this.metaBarEl
+          ?.querySelector('.bal-nav-meta-bar__container')
+          ?.contains(ev.target as Node)
+        const targetIsInMenuBar = this.menuBarEl
+          ?.querySelector('.bal-nav-menu-bar__container')
+          ?.contains(ev.target as Node)
 
         if (!targetIsInMetaBar && !targetIsInMenuBar) {
-          this.isFlyoutActive = false
+          this.closeFlyout()
           const tabs = this.menuBarEl?.querySelector('.bal-tabs') as HTMLBalTabsElement
           tabs.closeAccordion()
         }
@@ -184,7 +189,7 @@ export class NavMetaBar
       this.isTouch = breakpoints.touch
       this.isDesktop = breakpoints.desktop
       this.closeAllPopups()
-      this.isFlyoutActive = false
+      this.closeFlyout()
     }
 
     if (this.isTouch) {
@@ -237,6 +242,22 @@ export class NavMetaBar
    * ------------------------------------------------------
    */
 
+  private toggleFlyout() {
+    if (this.isFlyoutActive) {
+      this.closeFlyout()
+    } else {
+      this.openFlyout()
+    }
+  }
+
+  private closeFlyout() {
+    this.isFlyoutActive = false
+  }
+
+  private openFlyout() {
+    this.isFlyoutActive = true
+  }
+
   private async updateActiveItem(item: NavLinkItem) {
     if ('NavMetaLinkItem' === item.type) {
       this.activeMetaLinkValue = this.activeMetaLinkValue === item.value ? undefined : item.value
@@ -290,7 +311,7 @@ export class NavMetaBar
 
   private onTouchToggleFlyout = (_ev: MouseEvent) => {
     this.closeAllPopups()
-    this.isFlyoutActive = !this.isFlyoutActive
+    this.toggleFlyout()
 
     if (balBrowser.hasWindow && window.scrollY > 0) {
       window.scrollTo(0, 0)
@@ -343,9 +364,9 @@ export class NavMetaBar
 
   private onMenuBarTabChange = (value?: string): void => {
     if (this.activeMenuLinkValue === value) {
-      this.isFlyoutActive = !this.isFlyoutActive
+      this.toggleFlyout()
     } else {
-      this.isFlyoutActive = true
+      this.openFlyout()
     }
     this.activeMenuLinkValue = value
   }
@@ -359,6 +380,8 @@ export class NavMetaBar
     const block = BEM.block('nav')
     const flyoutBlock = block.element('flyout')
 
+    this.hasRenderedWithFlyoutActive = this.isFlyoutActive
+
     return (
       <Host
         id={this.navId}
@@ -468,7 +491,7 @@ export class NavMetaBar
         )}
         {this.isTouch ? (
           <div class={{ ...flyoutBlock.class(), ...flyoutBlock.modifier('visible').class(this.isFlyoutActive) }}>
-            <nav class="container">
+            <nav class={{ ...flyoutBlock.element('container').class() }}>
               <ul
                 class={{
                   ...block.element('mobile-meta-list').class(),

diff --git a/packages/components/src/components/bal-popup/bal-popup.sass b/packages/components/src/components/bal-popup/bal-popup.sass
@@ -16,7 +16,10 @@
   visibility: hidden
   padding-top: var(--bal-popup-container-padding-top)
   padding-bottom: var(--bal-popup-container-padding-bottom)
-
+  flex-grow: 1
+  margin: 0 auto
+  position: relative
+  width: auto
   //
   // variants
   &--variant-popover
@@ -33,10 +36,14 @@
     min-width: 100%
     max-width: 100% !important
     min-height: var(--bal-app-height, 100%)
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
   &--variant-drawer
     position: fixed
     border-top-left-radius: var(--bal-popup-variant-drawer-radius)
     border-top-right-radius: var(--bal-popup-variant-drawer-radius)
+    padding-left: var(--bal-container-space)
+    padding-right: var(--bal-container-space)
     width: 100%
 
 // Popup Container Inner

diff --git a/packages/components/src/components/bal-popup/bal-popup.tsx b/packages/components/src/components/bal-popup/bal-popup.tsx
@@ -59,6 +59,7 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga
   @State() activeVariant: BalProps.BalPopupVariant = 'popover'
   @State() trigger?: Element
   @State() lastTrigger?: Element
+  @State() minContainerWidth = 0
 
   log!: LogInstance
 
@@ -288,6 +289,17 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga
     }
   }
 
+  /**
+   * @internal
+   */
+  @Method()
+  async setMinWidth(value: number): Promise<void> {
+    if (this.containerEl) {
+      this.containerEl.style.minWidth = `${value}px`
+      this.minContainerWidth = value
+    }
+  }
+
   /**
    * @internal
    */
@@ -385,6 +397,7 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga
     // present or dismiss active variant
     if (this.presented && this.lastTrigger !== this.trigger) {
       this._present()
+      this.lastTrigger = this.trigger
     } else {
       this.toggle()
     }
@@ -481,6 +494,7 @@ export class Popup implements ComponentInterface, PopupComponentInterface, Logga
             ...containerBlock.modifier(`variant-${this.activeVariant}`).class(),
           }}
           ref={containerEl => (this.containerEl = containerEl)}
+          style={{ minWidth: `${this.minContainerWidth}px` }}
         >
           <div
             class={{

diff --git a/packages/components/src/components/bal-popup/variants/drawer-variant.renderer.ts b/packages/components/src/components/bal-popup/variants/drawer-variant.renderer.ts
@@ -13,7 +13,6 @@ export class DrawerVariantRenderer extends AbstractVariantRenderer implements Po
       component.containerEl.style.setProperty('inset', `auto 0px 0px 0px`)
       component.containerEl.style.setProperty('bottom', `${this.offset}px`)
       component.backdropEl.style.setProperty('bottom', `${this.offset}px`)
-      component.containerEl.classList.add('container')
 
       this.showBackdropElement(component, this.backdrop)
       this.showContainerElement(component)
@@ -34,7 +33,6 @@ export class DrawerVariantRenderer extends AbstractVariantRenderer implements Po
       this.hideContainerElement(component)
 
       component.containerEl.style.removeProperty('inset')
-      component.containerEl.classList.remove('container')
       component.containerEl.style.removeProperty('bottom')
       component.backdropEl.style.removeProperty('bottom')
       return true