Skip to content

bug(#2685): Move modal GoaButtonGroup actions #464

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.

Sign up for GitHub

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
twjeffery merged 5 commits into from
Dec 5, 2025
Merged

bug(#2685): Move modal GoaButtonGroup actions #464

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
2858d23
feat(#2685): prettierjs cleanup
willcodeforcoffee Dec 1, 2025
f7f4e4f
feat(#2685): move the buttongroup into the actions
willcodeforcoffee Dec 1, 2025
1838d91
feat(#2685): remove buttongroup margins
willcodeforcoffee Dec 2, 2025
8f3f49e
bug(#2685): remove the actions bar from the sandbox demo because the …
willcodeforcoffee Dec 4, 2025
3dc2f34
bug(#2685): fix linting error
willcodeforcoffee Dec 4, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
94 changes: 27 additions & 67 deletions src/routes/components/Modal.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,11 +2,10 @@ import { Category, ComponentHeader } from "@components/component-header/Componen
import {
GoabBadge,
GoabButton,
GoabButtonGroup,
GoabModal,
GoabModalProps,
GoabTab,
GoabTabs
GoabTabs,
} from "@abgov/react-components";
import { ComponentBinding, Sandbox } from "@components/sandbox";
import { useContext, useEffect, useState } from "react";
Expand All @@ -25,7 +24,8 @@ import { AccessibilityEmpty } from "@components/empty-states/accessibility-empty

// == Page props ==

const FIGMA_LINK = "https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874";
const FIGMA_LINK =
"https://www.figma.com/design/3pb2IK8s2QUqWieH79KdN7/%E2%9D%96-Component-library-%7C-DDD?node-id=622-13874";
const componentName = "Modal";
const description =
"An overlay that appears in front of all other content, and requires a user to take an action before continuing.";
Expand All @@ -41,9 +41,9 @@ type CastingType = {
};

export default function ModalPage() {
const {language} = useContext(LanguageVersionContext);
const { language } = useContext(LanguageVersionContext);
const [componentProps, setComponentProps] = useState<ComponentPropsType>({
heading: "Are you sure you want to exit your application?",
heading: "This is important information",
});

useEffect(() => {
Expand Down Expand Up @@ -72,7 +72,7 @@ export default function ModalPage() {
type: "string",
name: "heading",
width: "40ch",
value: "Are you sure you want to exit your application?",
value: "This is important information",
},
{
label: "Max width",
Expand All @@ -81,12 +81,6 @@ export default function ModalPage() {
width: "16ch",
value: "",
},
{
label: "Closable",
type: "boolean",
name: "closable",
value: false,
},
{
label: "Open",
type: "boolean",
Expand Down Expand Up @@ -271,83 +265,50 @@ export default function ModalPage() {
<ComponentContent tocCssQuery="goa-tab[open=true] :is(h2[id], h3[id])">
<GoabTabs initialTab={1}>
<GoabTab heading="Code playground">
<h2 id="component" style={{ display: "none" }}>Playground</h2>
<h2 id="component" style={{ display: "none" }}>
Playground
</h2>
<Sandbox properties={componentBindings} onChange={onSandboxChange} allow={["p"]}>
<CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
export class SomeOtherComponent {
open = false;
onClick() {
this.open = !this.open;
}
}
`}
/>

{isClosableChecked(componentBindings) && <CodeSnippet
lang="typescript"
tags="angular"
allowCopy={true}
code={`
onClose() {
this.open = false;
}
`}
/>}

<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
const [open, setOpen] = useState(false);
function onClick() {
setOpen(!open);
}
`}
/>

{isClosableChecked(componentBindings) && <CodeSnippet
<CodeSnippet
lang="typescript"
tags="react"
allowCopy={true}
code={`
function modalOnClose() {
setOpen(false);
}
}
`}
/>}
/>

<GoabButton onClick={() => setOpen(true)}>Show Modal</GoabButton>

{!isClosableChecked(componentBindings) && (
<GoabModal {...componentProps} open={open}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
<GoabButtonGroup alignment="end" mt={"xl"}>
<GoabButton type="tertiary" onClick={() => setOpen(false)}>
Cancel
</GoabButton>
<GoabButton type="primary" onClick={() => setOpen(false)}>
Exit
</GoabButton>
</GoabButtonGroup>
</GoabModal>
)}

{isClosableChecked(componentBindings) && (
<GoabModal {...componentProps} open={open} onClose={onClose}>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
<GoabModal {...componentProps} open={open} onClose={onClose}>
<p>
Lorem ipsum dolor sit amet consectetur adipisicing elit. Mollitia obcaecati id
molestiae, natus dicta, eaque qui iusto similique, libero explicabo eligendi eius
laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.</p>
</GoabModal>
)}
laboriosam! Repellendus ducimus officia asperiores. Eos, eius numquam.
</p>
<p>
See the Examples tab for customized closing buttons and behavior using the
"actions" property.
</p>
</GoabModal>
</Sandbox>
<ComponentProperties properties={componentProperties} oldProperties={oldComponentProperties} />
<ComponentProperties
properties={componentProperties}
oldProperties={oldComponentProperties}
/>
</GoabTab>

<GoabTab
Expand All @@ -356,8 +317,7 @@ export default function ModalPage() {
Examples
<GoabBadge type="information" content="6" />
</>
}
>
}>
<ModalExamples />
</GoabTab>

Expand Down