Skip to content

Commit

Permalink
Merge pull request #969 from baloise-incubator/953-bal-navbar-on-tabl…
Browse files Browse the repository at this point in the history 
…et-safari-the-popover-breaks-alignment

953 bal navbar on tablet safari the popover breaks alignment
  • Loading branch information
@hirsch88
hirsch88 authored Dec 19, 2022
2 parents 8a4ea2c + 7f09447 commit d75a0ff
Show file tree
Hide file tree
Showing 12 changed files with 62 additions and 69 deletions.
1 change: 0 additions & 1 deletion CHANGELOG_OLD.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,6 @@ See [Conventional Commits](https://conventionalcommits.org) for commit guideline
* **form:** add new form component with scroll to first invalid field ([812e967](https://github.com/baloise/design-system/commit/812e96784ac5e8fd7564e1b15f6ab4f7e32e537a))



## [10.15.0](https://github.com/baloise/design-system/compare/v10.14.0...v10.15.0) (2022-08-22)


Expand Down
Binary file modified .../cypress/snapshots/base/bal-popover.visual.cy.ts/popover-arrow-desktop-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...s/cypress/snapshots/base/bal-popover.visual.cy.ts/popover-arrow-mobile-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified .../cypress/snapshots/base/bal-popover.visual.cy.ts/popover-basic-desktop-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...ypress/snapshots/base/bal-popover.visual.cy.ts/popover-tooltip-desktop-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file modified ...cypress/snapshots/base/bal-popover.visual.cy.ts/popover-tooltip-mobile-base.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 3 additions & 1 deletion packages/components/src/components/bal-navbar/bal-navbar.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -63,7 +63,7 @@

+modifier(active)
+touch
position: fixed
position: fixed !important
display: block
background: var(--bal-color-white)

Expand Down Expand Up @@ -112,6 +112,8 @@
justify-content: flex-end
align-items: center
gap: .5rem
.button-label
word-break: keep-all !important
.bal-button-group
width: 100%
+touch
Expand Down
105 changes: 49 additions & 56 deletions packages/components/src/components/bal-navbar/test/bal-navbar.cy.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,63 +8,56 @@
<script type="module" src="/build/design-system-components.esm.js"></script>
<script nomodule src="/build/design-system-components.js"></script>
</head>

<body class="bal-app">
<div class="container">
<h2 class="title is-size-xx-large">Basic</h2>
<section>
<bal-navbar>
<bal-navbar-brand>
<bal-icon name="logo" inverted size="large"></bal-icon>
<bal-text style="margin-left: 15px"><strong>App</strong> Title</bal-text>
</bal-navbar-brand>
<bal-navbar-menu>
<bal-navbar-menu-start>
<a class="navbar-item"><bal-text>Home</bal-text></a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><bal-text>Language</bal-text></a>
<div class="navbar-dropdown">
<a class="navbar-item"><bal-text>English</bal-text></a>
<a class="navbar-item"><bal-text>German</bal-text></a>
<a class="navbar-item"><bal-text>French</bal-text></a>
<hr class="navbar-divider" />
<a class="navbar-item"><bal-text>Support</bal-text></a>
</div>
</div>
</bal-navbar-menu-start>
<bal-navbar-menu-end>
<bal-button inverted>Logout</bal-button>
</bal-navbar-menu-end>
</bal-navbar-menu>
</bal-navbar>
</section>
<header>
<bal-navbar interface="app">
<bal-navbar-brand href="/" target="_blank">App Header</bal-navbar-brand>
<bal-navbar-menu>
<bal-navbar-menu-start>
<bal-tabs interface="navbar" inverted>
<bal-tab-item value="tab-a" label="Tab A"></bal-tab-item>
<bal-tab-item value="tab-b" label="Tab B"></bal-tab-item>
<bal-tab-item value="tab-c" label="Tab C"></bal-tab-item>
</bal-tabs>
</bal-navbar-menu-start>
<bal-navbar-menu-end>
<bal-button-group>
<bal-popover id="bal-popover" value="false">
<bal-button id="bal-popover-trigger" bal-popover-trigger color="light" inverted icon="date">
DE
</bal-button>
<bal-popover-content>
<bal-list border>
<bal-list-item clickable>
<bal-list-item-content>
<bal-list-item-title>English</bal-list-item-title>
</bal-list-item-content>
</bal-list-item>
<bal-list-item clickable>
<bal-list-item-content>
<bal-list-item-title>Français</bal-list-item-title>
</bal-list-item-content>
</bal-list-item>
<bal-list-item clickable>
<bal-list-item-content>
<bal-list-item-title>Italiano</bal-list-item-title>
</bal-list-item-content>
</bal-list-item>
</bal-list>
</bal-popover-content>
</bal-popover>
<bal-button href="tel://00800 24 800 800" color="light" inverted icon="date">00800 24 800 800</bal-button>
</bal-button-group>
</bal-navbar-menu-end>
</bal-navbar-menu>
</bal-navbar>
</header>
<script>
const popover = document.getElementById('bal-popover')
const popoverTrigger = document.getElementById('bal-popover-trigger')

<h2 class="title is-size-xx-large">Light</h2>
<section>
<bal-navbar light>
<bal-navbar-brand>
<bal-icon name="logo" size="large"></bal-icon>
<bal-text style="margin-left: 15px"><strong>App</strong> Title</bal-text>
</bal-navbar-brand>
<bal-navbar-menu>
<bal-navbar-menu-start>
<a class="navbar-item"><bal-text>Home</bal-text></a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link"><bal-text>Language</bal-text></a>
<div class="navbar-dropdown">
<a class="navbar-item"><bal-text>English</bal-text></a>
<a class="navbar-item"><bal-text>German</bal-text></a>
<a class="navbar-item"><bal-text>French</bal-text></a>
<hr class="navbar-divider" />
<a class="navbar-item"><bal-text>Support</bal-text></a>
</div>
</div>
</bal-navbar-menu-start>
<bal-navbar-menu-end>
<bal-button>Logout</bal-button>
</bal-navbar-menu-end>
</bal-navbar-menu>
</bal-navbar>
</section>
</div>
popoverTrigger.addEventListener('click', () => (popover.value = !JSON.parse(popover.value)))
</script>
</body>
</html>
2 changes: 1 addition & 1 deletion packages/components/src/components/bal-popover/bal-popover-content/bal-popover-content.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@ export class PopoverContent {
}
}

componentDidLoad() {
componentWillLoad() {
this.contentHeightOnTop = window.innerHeight - 64
}

Expand Down
1 change: 1 addition & 0 deletions packages/components/src/components/bal-popover/bal-popover.sass
View file
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
+element(inner)
max-height: calc(100vh - 4.5rem)
overflow: auto
padding: 1rem
+tablet
padding: 1.5rem
+desktop
Expand Down
6 changes: 5 additions & 1 deletion packages/components/src/components/bal-popover/bal-popover.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -187,10 +187,14 @@ export class Popover {
return this.element.closest('[slot="meta-mobile-foot"]') as HTMLElement
}

componentWillLoad() {
this.backdropHeight = this.getBackdropHeight()
}

componentDidLoad() {
this.isInMainNav = this.footMobileNav !== null
this.isTouch = isPlatform('touch')
this.backdropHeight = this.getBackdropHeight()

if (this.triggerElement && this.menuElement) {
this.popperInstance = createPopper(this.triggerElement, this.menuElement, {
placement: this.tooltip ? 'bottom' : this.position,
Expand Down
12 changes: 3 additions & 9 deletions packages/components/src/components/bal-popover/test/bal-popover.visual.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,9 +32,7 @@
Trigger Popover
</bal-button>
<bal-popover-content>
<div style="padding: 1rem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</bal-popover-content>
</bal-popover>
</section>
Expand All @@ -59,9 +57,7 @@
Trigger Arrow Popover
</bal-button>
<bal-popover-content>
<div style="padding: 1rem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</bal-popover-content>
</bal-popover>
</section>
Expand All @@ -86,9 +82,7 @@
Tooltip
</bal-button>
<bal-popover-content>
<div style="padding: 1rem">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</div>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit.</p>
</bal-popover-content>
</bal-popover>
</section>
Expand Down

0 comments on commit d75a0ff

Please sign in to comment.