-
Notifications
You must be signed in to change notification settings - Fork 34
fix(#3455,#3450): Updated top and bottom positioning for Popover #3477
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Open
ArakTaiRoth
wants to merge
1
commit into
dev
Choose a base branch
from
dustin/3455
base: dev
Could not load branches
Branch not found: {{ refName }}
Loading
Could not load tags
Nothing to show
Loading
Are you sure you want to change the base?
Some commits from the old base branch may be removed from the timeline,
and old review comments may become outdated.
Open
Changes from all commits
Commits
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
40 changes: 40 additions & 0 deletions
40
apps/prs/angular/src/routes/bugs/3450/bug3450.component.html
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,40 @@ | ||
| <div> | ||
| <h1>Bug 3450 - Dropdown expanding inside Container</h1> | ||
|
|
||
| <goab-block gap="m" direction="row"> | ||
| <goab-container> | ||
| <p>The GoabDropdown below should expand outside of the container.</p> | ||
|
|
||
| <goab-form-item label="Basic GoabDropdown"> | ||
| <goab-dropdown placeholder="-- Watch me Expand --"> | ||
| <goab-dropdown-item value="1" label="Option 1"></goab-dropdown-item> | ||
| <goab-dropdown-item value="2" label="Option 2"></goab-dropdown-item> | ||
| <goab-dropdown-item value="3" label="Option 3"></goab-dropdown-item> | ||
| </goab-dropdown> | ||
| </goab-form-item> | ||
| </goab-container> | ||
| <goab-container> | ||
| <p>The GoabDatePicker below should expand outside of the container.</p> | ||
|
|
||
| <goab-form-item label="Basic GoabDatePicker"> | ||
| <goab-date-picker></goab-date-picker> | ||
| </goab-form-item> | ||
| </goab-container> | ||
| </goab-block> | ||
|
|
||
| <h2>Testing Directions</h2> | ||
| <p>This is a test of GoabPopover not GoabDropdown or GoabDatePicker.</p> | ||
| <ul> | ||
| <li> | ||
| Open the GoabDropdown and GoabDatePicker and verify that they expand outside of the | ||
| container. | ||
| </li> | ||
| <li> | ||
| Verify that the GoabDropdown and GoabDatePicker are not cut off by the container. | ||
| </li> | ||
| <li> | ||
| Shrink and expand the window to cause the GoabDropdown and GoabDatePicker to expand | ||
| upwards instead. | ||
| </li> | ||
| </ul> | ||
| </div> |
26 changes: 26 additions & 0 deletions
26
apps/prs/angular/src/routes/bugs/3450/bug3450.component.ts
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,26 @@ | ||
| import { Component } from "@angular/core"; | ||
| import { CommonModule } from "@angular/common"; | ||
| import { | ||
| GoabBlock, | ||
| GoabContainer, | ||
| GoabDatePicker, | ||
| GoabDropdown, | ||
| GoabDropdownItem, | ||
| GoabFormItem, | ||
| } from "@abgov/angular-components"; | ||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: "abgov-bug3450", | ||
| templateUrl: "./bug3450.component.html", | ||
| imports: [ | ||
| CommonModule, | ||
| GoabBlock, | ||
| GoabContainer, | ||
| GoabDatePicker, | ||
| GoabDropdown, | ||
| GoabDropdownItem, | ||
| GoabFormItem, | ||
| ], | ||
| }) | ||
| export class Bug3450Component {} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,54 @@ | ||
| import { | ||
| GoabBlock, | ||
| GoabContainer, | ||
| GoabDatePicker, | ||
| GoabDropdown, | ||
| GoabDropdownItem, | ||
| GoabFormItem, | ||
| } from "@abgov/react-components"; | ||
|
|
||
| export function Bug3450Route() { | ||
| return ( | ||
| <div> | ||
| <h1>Bug 3450 - Dropdown expanding inside Container</h1> | ||
|
|
||
| <GoabBlock gap="m" direction="row"> | ||
| <GoabContainer> | ||
| <p>The GoabDropdown below should expand outside of the container.</p> | ||
|
|
||
| <GoabFormItem label="Basic GoabDropdown"> | ||
| <GoabDropdown placeholder="-- Watch me Expand --"> | ||
| <GoabDropdownItem value="1" label="Option 1" /> | ||
| <GoabDropdownItem value="2" label="Option 2" /> | ||
| <GoabDropdownItem value="3" label="Option 3" /> | ||
| </GoabDropdown> | ||
| </GoabFormItem> | ||
| </GoabContainer> | ||
| <GoabContainer> | ||
| <p>The GoabDatePicker below should expand outside of the container.</p> | ||
|
|
||
| <GoabFormItem label="Basic GoabDatePicker"> | ||
| <GoabDatePicker></GoabDatePicker> | ||
| </GoabFormItem> | ||
| </GoabContainer> | ||
| </GoabBlock> | ||
|
|
||
| <h2>Testing Directions</h2> | ||
| <p>This is a test of GoabPopover not GoabDropdown or GoabDatePicker.</p> | ||
| <ul> | ||
| <li> | ||
| Open the GoabDropdown and GoabDatePicker and verify that they expand outside of | ||
| the container. | ||
| </li> | ||
| <li> | ||
| Verify that the GoabDropdown and GoabDatePicker are not cut off by the | ||
| container. | ||
| </li> | ||
| <li> | ||
| Shrink and expand the window to cause the GoabDropdown and GoabDatePicker to | ||
| expand upwards instead. | ||
| </li> | ||
| </ul> | ||
| </div> | ||
| ); | ||
| } |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change | ||||||
|---|---|---|---|---|---|---|---|---|
|
|
@@ -409,6 +409,8 @@ | |||||||
| : null; | ||||||||
|
|
||||||||
| const popoverRect = getBoundingClientRectWithMargins(_popoverEl); | ||||||||
| const offsetParent = _popoverEl.offsetParent as HTMLElement | null; | ||||||||
| const offsetParentTop = offsetParent?.getBoundingClientRect().top || 0; | ||||||||
|
|
||||||||
| // exit if the popover hasn't yet been filled | ||||||||
| if (popoverRect.height < 20) return; | ||||||||
|
|
@@ -432,9 +434,12 @@ | |||||||
| : position === "above"; | ||||||||
|
|
||||||||
| if (displayOnTop) { | ||||||||
| _popoverEl.style.bottom = `${targetRect.height}px`; | ||||||||
| const topPos = targetRect.top - popoverRect.height - offsetParentTop; | ||||||||
| _popoverEl.style.top = `${topPos}px`; | ||||||||
| } else { | ||||||||
| _popoverEl.style.bottom = "auto"; // In case this is triggered by _sectionHeight is changed | ||||||||
| // Clear top/bottom to keep default below-target static positioning. | ||||||||
|
||||||||
| // Clear top/bottom to keep default below-target static positioning. | |
| // Clear top/bottom so the popover uses its default absolute positioning | |
| // relative to its offsetParent, which places it below the target. |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Inconsistent component name: This line uses 'goa-app-header-menu' instead of 'goab-app-header-menu'. All other instances in this file use the 'goab-' prefix. This should be changed to 'goab-app-header-menu' to match the consistent naming convention used throughout the file.