-
Notifications
You must be signed in to change notification settings - Fork 37
fix(#3630): drawer exit animation, close button alignment, docs updates #3813
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
Merged
Merged
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
107 changes: 107 additions & 0 deletions
107
apps/prs/angular/src/routes/bugs/3630/bug3630.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,107 @@ | ||
| <div> | ||
| <h1>Bug #3630: Drawer refinements</h1> | ||
| <p> | ||
| <a | ||
| href="https://github.com/GovAlta/ui-components/issues/3630" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| View on GitHub | ||
| </a> | ||
| </p> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h2>Test Cases</h2> | ||
|
|
||
| <h3>Test 1: Right drawer (animation + alignment)</h3> | ||
| <p> | ||
| Open and close. Check slide-in and slide-out animation. Check heading and close button | ||
| vertical alignment. | ||
| </p> | ||
| <goab-button (onClick)="rightOpen = true">Open right drawer</goab-button> | ||
|
|
||
| <goab-drawer | ||
| heading="Right drawer" | ||
| position="right" | ||
| maxSize="400px" | ||
| [open]="rightOpen" | ||
| (onClose)="rightOpen = false" | ||
| > | ||
| <p> | ||
| Check the slide-out animation when closing. The close button should align well with | ||
| the heading text. | ||
| </p> | ||
| </goab-drawer> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h3>Test 2: Right drawer with actions</h3> | ||
| <p>Actions should use start alignment with compact buttons.</p> | ||
| <goab-button (onClick)="rightActionsOpen = true">Open right drawer with actions</goab-button> | ||
|
|
||
| <ng-template #rightActionsTemplate> | ||
| <goab-button-group alignment="start"> | ||
| <goab-button type="primary" size="compact">Save</goab-button> | ||
| <goab-button type="tertiary" size="compact" (onClick)="rightActionsOpen = false">Cancel</goab-button> | ||
| </goab-button-group> | ||
| </ng-template> | ||
|
|
||
| <goab-drawer | ||
| heading="Edit settings" | ||
| position="right" | ||
| maxSize="400px" | ||
| [open]="rightActionsOpen" | ||
| [actions]="rightActionsTemplate" | ||
| (onClose)="rightActionsOpen = false" | ||
| > | ||
| <p>The action buttons below should be left-aligned and compact.</p> | ||
| </goab-drawer> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h3>Test 3: Left drawer</h3> | ||
| <p>Check slide-in from left and slide-out animation.</p> | ||
| <goab-button (onClick)="leftOpen = true">Open left drawer</goab-button> | ||
|
|
||
| <goab-drawer | ||
| heading="Left drawer" | ||
| position="left" | ||
| maxSize="400px" | ||
| [open]="leftOpen" | ||
| (onClose)="leftOpen = false" | ||
| > | ||
| <p>Check the slide-out animation when closing from the left side.</p> | ||
| </goab-drawer> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h3>Test 4: Bottom drawer</h3> | ||
| <p>Check slide-up from bottom and slide-down animation.</p> | ||
| <goab-button (onClick)="bottomOpen = true">Open bottom drawer</goab-button> | ||
|
|
||
| <goab-drawer | ||
| heading="Bottom drawer" | ||
| position="bottom" | ||
| [open]="bottomOpen" | ||
| (onClose)="bottomOpen = false" | ||
| > | ||
| <p>Check the slide-down animation when closing from the bottom.</p> | ||
| </goab-drawer> | ||
|
|
||
| <hr /> | ||
|
|
||
| <h3>Test 5: Long heading</h3> | ||
| <p>Check alignment when the heading wraps to two lines.</p> | ||
| <goab-button (onClick)="longHeadingOpen = true">Open drawer with long heading</goab-button> | ||
|
|
||
| <goab-drawer | ||
| heading="This is a much longer heading that should wrap to two lines in the drawer" | ||
| position="right" | ||
| maxSize="400px" | ||
| [open]="longHeadingOpen" | ||
| (onClose)="longHeadingOpen = false" | ||
| > | ||
| <p>Check that the close button stays aligned properly when the heading wraps.</p> | ||
| </goab-drawer> | ||
| </div> | ||
17 changes: 17 additions & 0 deletions
17
apps/prs/angular/src/routes/bugs/3630/bug3630.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,17 @@ | ||
| import { Component, CUSTOM_ELEMENTS_SCHEMA } from "@angular/core"; | ||
| import { GoabDrawer, GoabButton, GoabButtonGroup } from "@abgov/angular-components"; | ||
|
ArakTaiRoth marked this conversation as resolved.
|
||
|
|
||
| @Component({ | ||
| standalone: true, | ||
| selector: "abgov-bug3630", | ||
| templateUrl: "./bug3630.component.html", | ||
| imports: [GoabDrawer, GoabButton, GoabButtonGroup], | ||
| schemas: [CUSTOM_ELEMENTS_SCHEMA], | ||
| }) | ||
| export class Bug3630Component { | ||
| rightOpen = false; | ||
| rightActionsOpen = false; | ||
| leftOpen = false; | ||
| bottomOpen = false; | ||
| longHeadingOpen = false; | ||
| } | ||
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,6 @@ | ||
| { | ||
| "title": "Drawer refinements", | ||
| "path": "bugs/3630", | ||
| "id": "3630", | ||
| "type": "bug" | ||
| } |
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,9 @@ | ||
| import { Bug3630Route } from "../../../routes/bugs/bug3630"; | ||
| import type { PrRouteDefinition } from "../../route-manifest"; | ||
| export default { | ||
| type: "bug", | ||
| id: "3630", | ||
| path: "bugs/3630", | ||
| title: "Drawer refinements", | ||
| component: Bug3630Route, | ||
| } satisfies PrRouteDefinition; |
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,174 @@ | ||
| import { useState } from "react"; | ||
| import { | ||
| GoabBlock, | ||
| GoabButton, | ||
| GoabButtonGroup, | ||
| GoabDetails, | ||
| GoabDivider, | ||
| GoabDrawer, | ||
| GoabLink, | ||
| GoabText, | ||
| } from "@abgov/react-components"; | ||
|
|
||
| export function Bug3630Route() { | ||
| const [rightOpen, setRightOpen] = useState(false); | ||
| const [rightActionsOpen, setRightActionsOpen] = useState(false); | ||
| const [leftOpen, setLeftOpen] = useState(false); | ||
| const [bottomOpen, setBottomOpen] = useState(false); | ||
| const [longHeadingOpen, setLongHeadingOpen] = useState(false); | ||
|
|
||
| return ( | ||
| <div> | ||
| <GoabText tag="h1" mt="m"> | ||
| Bug #3630: Drawer refinements | ||
| </GoabText> | ||
|
|
||
| <GoabBlock> | ||
| <GoabLink trailingIcon="open"> | ||
| <a | ||
| href="https://github.com/GovAlta/ui-components/issues/3630" | ||
| target="_blank" | ||
| rel="noopener" | ||
| > | ||
| View on GitHub | ||
| </a> | ||
| </GoabLink> | ||
|
|
||
| <GoabDetails heading="Issue Description"> | ||
| <GoabText tag="p"> | ||
| 1. Exit animation should slide out (not just disappear). 2. Close button | ||
| alignment with heading. 3. Actions should use start alignment with compact | ||
| buttons. 4. Move category from content-layout to structure-navigation. | ||
| </GoabText> | ||
| </GoabDetails> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDivider mt="l" mb="l" /> | ||
|
|
||
| <GoabText tag="h2">Test Cases</GoabText> | ||
|
|
||
| <GoabText tag="h3">Test 1: Right drawer (animation + alignment)</GoabText> | ||
| <GoabText tag="p"> | ||
| Open and close. Check slide-in and slide-out animation. Check heading and close | ||
| button vertical alignment. | ||
| </GoabText> | ||
| <GoabBlock gap="s" direction="column" mb="l"> | ||
| <GoabButton onClick={() => setRightOpen(true)}>Open right drawer</GoabButton> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDrawer | ||
| open={rightOpen} | ||
| position="right" | ||
| heading="Right drawer" | ||
| maxSize="400px" | ||
| onClose={() => setRightOpen(false)} | ||
| > | ||
| <GoabText mt="none" mb="none"> | ||
| Check the slide-out animation when closing. The close button should align well | ||
| with the heading text. | ||
| </GoabText> | ||
| </GoabDrawer> | ||
|
|
||
| <GoabDivider mt="l" mb="l" /> | ||
|
|
||
| <GoabText tag="h3">Test 2: Right drawer with actions</GoabText> | ||
| <GoabText tag="p"> | ||
| Actions should use start alignment with compact buttons. | ||
| </GoabText> | ||
| <GoabBlock gap="s" direction="column" mb="l"> | ||
| <GoabButton onClick={() => setRightActionsOpen(true)}> | ||
| Open right drawer with actions | ||
| </GoabButton> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDrawer | ||
| open={rightActionsOpen} | ||
| position="right" | ||
| heading="Edit settings" | ||
| maxSize="400px" | ||
| onClose={() => setRightActionsOpen(false)} | ||
| actions={ | ||
| <GoabButtonGroup alignment="start"> | ||
| <GoabButton type="primary" size="compact"> | ||
| Save | ||
| </GoabButton> | ||
| <GoabButton | ||
| type="tertiary" | ||
| size="compact" | ||
| onClick={() => setRightActionsOpen(false)} | ||
| > | ||
| Cancel | ||
| </GoabButton> | ||
| </GoabButtonGroup> | ||
| } | ||
| > | ||
| <GoabText mt="none" mb="none"> | ||
| The action buttons below should be left-aligned and compact. | ||
| </GoabText> | ||
| </GoabDrawer> | ||
|
|
||
| <GoabDivider mt="l" mb="l" /> | ||
|
|
||
| <GoabText tag="h3">Test 3: Left drawer</GoabText> | ||
| <GoabText tag="p">Check slide-in from left and slide-out animation.</GoabText> | ||
| <GoabBlock gap="s" direction="column" mb="l"> | ||
| <GoabButton onClick={() => setLeftOpen(true)}>Open left drawer</GoabButton> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDrawer | ||
| open={leftOpen} | ||
| position="left" | ||
| heading="Left drawer" | ||
| maxSize="400px" | ||
| onClose={() => setLeftOpen(false)} | ||
| > | ||
| <GoabText mt="none" mb="none"> | ||
| Check the slide-out animation when closing from the left side. | ||
| </GoabText> | ||
| </GoabDrawer> | ||
|
|
||
| <GoabDivider mt="l" mb="l" /> | ||
|
|
||
| <GoabText tag="h3">Test 4: Bottom drawer</GoabText> | ||
| <GoabText tag="p">Check slide-up from bottom and slide-down animation.</GoabText> | ||
| <GoabBlock gap="s" direction="column" mb="l"> | ||
| <GoabButton onClick={() => setBottomOpen(true)}>Open bottom drawer</GoabButton> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDrawer | ||
| open={bottomOpen} | ||
| position="bottom" | ||
| heading="Bottom drawer" | ||
| onClose={() => setBottomOpen(false)} | ||
| > | ||
| <GoabText mt="none" mb="none"> | ||
| Check the slide-down animation when closing from the bottom. | ||
| </GoabText> | ||
| </GoabDrawer> | ||
|
|
||
| <GoabDivider mt="l" mb="l" /> | ||
|
|
||
| <GoabText tag="h3">Test 5: Long heading</GoabText> | ||
| <GoabText tag="p">Check alignment when the heading wraps to two lines.</GoabText> | ||
| <GoabBlock gap="s" direction="column" mb="l"> | ||
| <GoabButton onClick={() => setLongHeadingOpen(true)}> | ||
| Open drawer with long heading | ||
| </GoabButton> | ||
| </GoabBlock> | ||
|
|
||
| <GoabDrawer | ||
| open={longHeadingOpen} | ||
| position="right" | ||
| heading="This is a much longer heading that should wrap to two lines in the drawer" | ||
| maxSize="400px" | ||
| onClose={() => setLongHeadingOpen(false)} | ||
| > | ||
| <GoabText mt="none" mb="none"> | ||
| Check that the close button stays aligned properly when the heading wraps. | ||
| </GoabText> | ||
| </GoabDrawer> | ||
| </div> | ||
| ); | ||
| } | ||
|
|
||
| export default Bug3630Route; |
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
Oops, something went wrong.
Oops, something went wrong.
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.
Uh oh!
There was an error while loading. Please reload this page.