Skip to content

Commit a797002

Browse files
chrisolsenchrisolsen
authored
Merge pull request #3109 from GovAlta/chris/menu-button-width-fix
2 parents 56e9d0f + 24b7489 commit a797002

File tree

25 files changed

+754
-341
lines changed

25 files changed

+754
-341
lines changed

‎apps/prs/angular/src/app/app.component.html‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@
1414
<div style="display: flex; flex: 1 1 auto">
1515
<section style="flex: 0 0 250px" role="nav">
1616
<goab-side-menu>
17+
<a href="/everything">All Components</a>
1718
<goab-side-menu-group heading="Bugs">
1819
<a href="/bugs/2152">2152</a>
1920
<a href="/bugs/2331">2331</a>
@@ -44,17 +45,17 @@
4445
<a href="/bugs/2948">2948</a>
4546
<a href="/bugs/2991">2991</a>
4647
<a href="/bugs/3072">3072</a>
48+
<a href="/bugs/3118">3118</a>
4749
<a href="/bugs/3156">3156</a>
4850
</goab-side-menu-group>
49-
<a href="/everything">All Components</a>
5051
<goab-side-menu-group heading="Features">
5152
<a href="/features/1328">1328</a>
5253
<a href="/features/1547">1547</a>
5354
<a href="/features/1813">1813</a>
54-
<a href="/features/2361">2361</a>
5555
<a href="/features/2054">2054</a>
5656
<a href="/features/2267">2267</a>
5757
<a href="/features/2440">2440</a>
58+
<a href="/features/2361">2361</a>
5859
<a href="/features/2492">2492</a>
5960
<a href="/features/2682">2682</a>
6061
<a href="/features/2722">2722</a>

‎apps/prs/angular/src/app/app.routes.ts‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ import { Bug2943Component } from "../routes/bugs/2943/bug2943.component";
3030
import { Bug2948Component } from "../routes/bugs/2948/bug2948.component";
3131
import { Bug2991Component } from "../routes/bugs/2991/bug2991.component";
3232
import { Bug3072Component } from "../routes/bugs/3072/bug3072.component";
33+
import { Bug3118Component } from "../routes/bugs/3118/bug3118.component";
3334
import { Bug3156Component } from "../routes/bugs/3156/bug3156.component";
3435
import { Feat1328Component } from "../routes/features/feat1328/feat1328.component";
3536
import { Feat1547Component } from "../routes/features/feat1547/feat1547.component";
@@ -46,6 +47,8 @@ import { Feat2829Component } from "../routes/features/feat2829/feat2829.componen
4647
import { Feat3102Component } from "../routes/features/feat3102/feat3102.component";
4748

4849
export const appRoutes: Route[] = [
50+
{ path: "everything", component: EverythingComponent },
51+
4952
{ path: "bugs/2152", component: Bug2152Component },
5053
{ path: "bugs/2331", component: Bug2331Component },
5154
{ path: "bugs/2393", component: Bug2393Component },
@@ -75,8 +78,9 @@ export const appRoutes: Route[] = [
7578
{ path: "bugs/2948", component: Bug2948Component },
7679
{ path: "bugs/2991", component: Bug2991Component },
7780
{ path: "bugs/3072", component: Bug3072Component },
81+
{ path: "bugs/3118", component: Bug3118Component },
7882
{ path: "bugs/3156", component: Bug3156Component },
79-
{ path: "everything", component: EverythingComponent },
83+
8084
{ path: "features/1328", component: Feat1328Component },
8185
{ path: "features/1547", component: Feat1547Component },
8286
{ path: "features/1813", component: Feat1813Component },

‎apps/prs/angular/src/routes/bugs/3118/bug3118.component.html‎

Lines changed: 196 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,196 @@
1+
<goab-block direction="column" gap="l">
2+
<goab-block direction="column" gap="s">
3+
<goab-text tag="h1" mb="0" mt="0">
4+
<a href="https://github.com/GovAlta/ui-components/issues/3118" target="_blank"
5+
>3118</a
6+
>
7+
- MenuButton's width is not setting the correct width on wider elements
8+
</goab-text>
9+
<goab-text tag="p" mt="0">
10+
Use these scenarios to confirm the React wrapper exposes the leading icon property
11+
and that the menu width matches the longest action label.
12+
</goab-text>
13+
</goab-block>
14+
15+
<goab-divider mt="xl" mb="xl"></goab-divider>
16+
17+
<!-- Critical Test Cases for the Fix -->
18+
<goab-text tag="h2">
19+
Long Elements aren't forced to wrap
20+
</goab-text>
21+
22+
<goab-menu-button text="Baseline actions" (onAction)="onAction($event)">
23+
<goab-menu-action
24+
key="1"
25+
text="Action 1"
26+
action="action-1"
27+
icon="search"
28+
></goab-menu-action>
29+
<goab-menu-action
30+
key="2"
31+
text="Very very very very very very very very very very very very long action"
32+
action="action-2"
33+
icon="search"
34+
></goab-menu-action>
35+
<goab-menu-action
36+
key="3"
37+
text="Action 3"
38+
action="action-2"
39+
icon="search"
40+
></goab-menu-action>
41+
</goab-menu-button>
42+
43+
<!-- Critical Test Cases for the Fix -->
44+
<goab-text tag="h2">
45+
Max width can be set forcing long elements to wrap
46+
</goab-text>
47+
48+
<goab-menu-button
49+
maxWidth="500px"
50+
text="Baseline actions"
51+
(onAction)="onAction($event)"
52+
>
53+
<goab-menu-action
54+
key="1"
55+
text="Action 1"
56+
action="action-1"
57+
icon="search"
58+
></goab-menu-action>
59+
<goab-menu-action
60+
key="2"
61+
text="Very very very very very very very very very very very very long action"
62+
action="action-2"
63+
icon="search"
64+
></goab-menu-action>
65+
<goab-menu-action
66+
key="3"
67+
text="Action 3"
68+
action="action-2"
69+
icon="search"
70+
></goab-menu-action>
71+
</goab-menu-button>
72+
73+
74+
<goab-divider mt="xl" mb="xl"></goab-divider>
75+
76+
77+
<!-- Critical Test Cases for the Fix -->
78+
<goab-text tag="h2">
79+
Components on the right side of the screen will right align the menu options
80+
</goab-text>
81+
<goab-text tag="p">
82+
You may may have to resize the browser to test this
83+
</goab-text>
84+
85+
<goab-block direction="row" gap="l" width="100%">
86+
<div style="width: 100%"></div>
87+
<goab-menu-button text="Baseline actions" (onAction)="onAction($event)">
88+
<goab-menu-action
89+
key="1"
90+
text="Action 1"
91+
action="action-1"
92+
icon="search"
93+
></goab-menu-action>
94+
<goab-menu-action
95+
key="2"
96+
text="Very very very very very very very very very very very very long action"
97+
action="action-2"
98+
icon="search"
99+
></goab-menu-action>
100+
<goab-menu-action
101+
key="3"
102+
text="Action 3"
103+
action="action-2"
104+
icon="search"
105+
></goab-menu-action>
106+
</goab-menu-button>
107+
</goab-block>
108+
109+
110+
<goab-divider mt="xl" mb="xl"></goab-divider>
111+
112+
113+
<goab-text tag="h2"> Regression tests </goab-text>
114+
115+
<goab-grid minChildWidth="320px" gap="l">
116+
<goab-block direction="column" gap="l" maxWidth="320px">
117+
<goab-text tag="p">Some text</goab-text>
118+
<goab-menu-button text="Baseline actions" (onAction)="onAction($event)">
119+
<goab-menu-action
120+
key="1"
121+
text="Action 1"
122+
action="action-1"
123+
icon="search"
124+
></goab-menu-action>
125+
<goab-menu-action
126+
key="2"
127+
text="Very very very very very very very very very very very very long action"
128+
action="action-2"
129+
icon="search"
130+
></goab-menu-action>
131+
<goab-menu-action
132+
key="3"
133+
text="Action 3"
134+
action="action-2"
135+
icon="search"
136+
></goab-menu-action>
137+
</goab-menu-button>
138+
</goab-block>
139+
140+
<goab-block direction="column" gap="l" maxWidth="320px">
141+
<goab-text tag="p">
142+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta earum ipsa ullam
143+
beatae at atque non voluptas fugiat sapiente praesentium quisquam possimus
144+
repellat, illo voluptates nisi obcaecati quos. Mollitia, recusandae.
145+
</goab-text>
146+
<goab-menu-button text="Baseline actions" (onAction)="onAction($event)">
147+
<goab-menu-action
148+
key="1"
149+
text="Action 1"
150+
action="action-1"
151+
icon="search"
152+
></goab-menu-action>
153+
<goab-menu-action
154+
key="2"
155+
text="Very very very very very very very very very very very very long action"
156+
action="action-2"
157+
icon="search"
158+
></goab-menu-action>
159+
<goab-menu-action
160+
key="3"
161+
text="Action 3"
162+
action="action-2"
163+
icon="search"
164+
></goab-menu-action>
165+
</goab-menu-button>
166+
</goab-block>
167+
168+
<goab-block direction="column" gap="l" maxWidth="320px">
169+
<goab-text tag="p">
170+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Dicta earum ipsa ullam
171+
beatae at atque non voluptas fugiat sapiente praesentium quisquam possimus
172+
repellat, illo voluptates nisi obcaecati quos. Mollitia, recusandae.
173+
</goab-text>
174+
<goab-menu-button text="Baseline actions" (onAction)="onAction($event)">
175+
<goab-menu-action
176+
key="1"
177+
text="Action 1"
178+
action="action-1"
179+
icon="search"
180+
></goab-menu-action>
181+
<goab-menu-action
182+
key="2"
183+
text="Very very very very very very very very very very very very long action"
184+
action="action-2"
185+
icon="search"
186+
></goab-menu-action>
187+
<goab-menu-action
188+
key="3"
189+
text="Action 3"
190+
action="action-2"
191+
icon="search"
192+
></goab-menu-action>
193+
</goab-menu-button>
194+
</goab-block>
195+
</goab-grid>
196+
</goab-block>

‎apps/prs/angular/src/routes/bugs/3118/bug3118.component.ts‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import { CommonModule } from "@angular/common";
2+
import { Component } from "@angular/core";
3+
import {
4+
GoabBlock,
5+
GoabDivider,
6+
GoabMenuAction,
7+
GoabMenuButton,
8+
GoabText,
9+
GoabGrid,
10+
} from "@abgov/angular-components";
11+
import { GoabMenuButtonOnActionDetail } from "@abgov/ui-components-common";
12+
13+
@Component({
14+
standalone: true,
15+
selector: "abgov-bug3118",
16+
templateUrl: "./bug3118.component.html",
17+
imports: [
18+
CommonModule,
19+
GoabBlock,
20+
GoabDivider,
21+
GoabMenuAction,
22+
GoabMenuButton,
23+
GoabText,
24+
GoabGrid,
25+
],
26+
})
27+
export class Bug3118Component {
28+
protected onAction(detail: GoabMenuButtonOnActionDetail): void {
29+
console.log(detail);
30+
}
31+
}

‎apps/prs/angular/src/routes/features/feat3102/feat3102.component.css‎

Lines changed: 0 additions & 21 deletions
This file was deleted.

0 commit comments

Comments
 (0)