cds-snc / cds-snc/platform-forms-client

Inconsistencies in primary and secondary button placement

Open
#4,109 2 comments 0 reactions 0 assignees View on GitHub
app design design-system enhancement
Dominant language
TypeScript
Stars
46
Forks
16
Avg merge
1d 9h
Merged PRs (30d)
91

Description

## Description
In some modals and pages in the app, primary buttons are on the left of secondary buttons, in other places they are on the right.

To ensure consistency and predictability for users, we may want to revisit what that pattern looks like.

## Steps to reproduce
1. Go to GC Forms > Edit
2. Add a question
3. Go to "More"
4. Then go to the top of the form and click the three dots to enter the modal for branding/classification
5. Notice how both treat buttons differently
6. There are likely some other instances where we also have a difference

## Details
- **Browser**: Edge
- **Operating system**: Windows
- **Environment**: Staging
- **Language**: French
- **Viewport**: Tablet

## Expected behaviour

Reevaluate all buttons.

Display button relationship the same way throughout the app.
cc @samsadasivan @connorscarolyns should primary button be on left or right in relation to secondary?

## Screenshots or videos

![modal1](https://github.com/user-attachments/assets/e183eb92-518e-4388-a25f-b75815316977)

![modal 2](https://github.com/user-attachments/assets/476b5074-d579-48a4-a246-352cba0a29e4)

Contributor guide

Open the contributing guide

Research direction

Start with the GC Forms > Edit flow, especially the More menu and the branding/classification modal shown in the reproduction steps. Compare their primary and secondary button placement, then inspect other app pages for the same inconsistency; done means the placement is consistent throughout the app after the left-versus-right design decision is made.

Written by the indexing model from the issue text.

Assessment

Tech stack
nextjs, typescript
Domain
design, frontend
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Needs clarification
Newbie friendliness
25/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.