test(#3609): add modal actions padding playground pages and test

apps/prs/angular/src/routes/bugs/3609/bug3609.component.html

@@ -0,0 +1,50 @@
+<goab-text tag="h1" mt="m" mb="m">
+  Bug 3609 - Modal scroll area clipping and footer actions padding
+</goab-text>
+<goab-text tag="p" mb="l">
+  Open the modal. The scrollable content should not be clipped at the top or bottom,
+  and the Cancel / Save action buttons should have adequate padding between them and
+  the bottom edge of the pinned footer.
+</goab-text>
+
+<goab-button (onClick)="openModal()">Add another item</goab-button>
+
+<goab-modal
+  heading="Add a new item"
+  [open]="open"
+  (onClose)="closeModal()"
+  [actions]="modalActions"
+>
+  <goab-text tag="p" mt="none">Fill in the information to create a new item</goab-text>
+
+  <goab-form-item label="Type" mb="l">
+    <goab-dropdown name="type">
+      <goab-dropdown-item value="a" label="Type A"></goab-dropdown-item>
+      <goab-dropdown-item value="b" label="Type B"></goab-dropdown-item>
+      <goab-dropdown-item value="c" label="Type C"></goab-dropdown-item>
+    </goab-dropdown>
+  </goab-form-item>
+
+  <goab-form-item label="Name" mb="l">
+    <goab-input name="name"></goab-input>
+  </goab-form-item>
+
+  <goab-form-item label="Description" mb="l">
+    <goab-textarea name="description"></goab-textarea>
+  </goab-form-item>
+
+  <goab-form-item label="Notes" mb="l">
+    <goab-textarea name="notes"></goab-textarea>
+  </goab-form-item>
+
+  <goab-form-item label="Additional details" mb="none">
+    <goab-textarea name="details"></goab-textarea>
+  </goab-form-item>
+</goab-modal>
+
+<ng-template #modalActions>
+  <goab-button-group alignment="end">
+    <goab-button type="secondary" (onClick)="closeModal()">Cancel</goab-button>
+    <goab-button type="primary" (onClick)="closeModal()">Save new item</goab-button>
+  </goab-button-group>
+</ng-template>

apps/prs/angular/src/routes/bugs/3609/bug3609.component.ts

@@ -0,0 +1,40 @@
+import { Component } from "@angular/core";
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+  GoabModal,
+  GoabText,
+  GoabTextArea,
+} from "@abgov/angular-components";
+
+@Component({
+  standalone: true,
+  selector: "abgov-bug3609",
+  templateUrl: "./bug3609.component.html",
+  imports: [
+    GoabButton,
+    GoabButtonGroup,
+    GoabDropdown,
+    GoabDropdownItem,
+    GoabFormItem,
+    GoabInput,
+    GoabModal,
+    GoabText,
+    GoabTextArea,
+  ],
+})
+export class Bug3609Component {
+  open = false;
+
+  openModal(): void {
+    this.open = true;
+  }
+
+  closeModal(): void {
+    this.open = false;
+  }
+}

apps/prs/angular/src/routes/bugs/3609/bug3609.route.json

@@ -0,0 +1,6 @@
+{
+  "type": "bug",
+  "id": "3609",
+  "path": "bugs/3609",
+  "title": "Modal scroll clipping and actions padding"
+}

apps/prs/react/src/app/routes/bugs/bug3609.route.ts

@@ -0,0 +1,10 @@
+import { Bug3609Route } from "../../../routes/bugs/bug3609";
+import type { PrRouteDefinition } from "../../route-manifest";
+
+export default {
+  type: "bug",
+  id: "3609",
+  path: "bugs/3609",
+  title: "Modal scroll clipping and actions padding",
+  component: Bug3609Route,
+} satisfies PrRouteDefinition;

apps/prs/react/src/routes/bugs/bug3609.tsx

@@ -0,0 +1,77 @@
+import { useState } from "react";
+import {
+  GoabButton,
+  GoabButtonGroup,
+  GoabDropdown,
+  GoabDropdownItem,
+  GoabFormItem,
+  GoabInput,
+  GoabModal,
+  GoabTextarea,
+  GoabText,
+} from "@abgov/react-components";
+
+export function Bug3609Route() {
+  const [open, setOpen] = useState(false);
+
+  return (
+    <div>
+      <GoabText tag="h1" mt="m" mb="m">
+        Bug #3609: Modal scroll area clipping and footer actions padding
+      </GoabText>
+      <GoabText tag="p" mb="l">
+        Open the modal. The scrollable content should not be clipped at the top or
+        bottom, and the Cancel / Save action buttons should have adequate padding
+        between them and the bottom edge of the pinned footer.
+      </GoabText>
+
+      <GoabButton onClick={() => setOpen(true)}>Add another item</GoabButton>
+
+      <GoabModal
+        heading="Add a new item"
+        open={open}
+        onClose={() => setOpen(false)}
+        actions={
+          <GoabButtonGroup alignment="end">
+            <GoabButton type="secondary" onClick={() => setOpen(false)}>
+              Cancel
+            </GoabButton>
+            <GoabButton type="primary" onClick={() => setOpen(false)}>
+              Save new item
+            </GoabButton>
+          </GoabButtonGroup>
+        }
+      >
+        <GoabText tag="p" mt="none">
+          Fill in the information to create a new item
+        </GoabText>
+
+        <GoabFormItem label="Type" mb="l">
+          <GoabDropdown name="type">
+            <GoabDropdownItem value="a" label="Type A" />
+            <GoabDropdownItem value="b" label="Type B" />
+            <GoabDropdownItem value="c" label="Type C" />
+          </GoabDropdown>
+        </GoabFormItem>
+
+        <GoabFormItem label="Name" mb="l">
+          <GoabInput name="name" />
+        </GoabFormItem>
+
+        <GoabFormItem label="Description" mb="l">
+          <GoabTextarea name="description" />
+        </GoabFormItem>
+
+        <GoabFormItem label="Notes" mb="l">
+          <GoabTextarea name="notes" />
+        </GoabFormItem>
+
+        <GoabFormItem label="Additional details" mb="none">
+          <GoabTextarea name="details" />
+        </GoabFormItem>
+      </GoabModal>
+    </div>
+  );
+}
+
+export default Bug3609Route;