Skip to content

Add ballot question alert flag#59

Merged
LexaMichaelides merged 7 commits intofeat/ballot-questionsfrom
ballot-question-alert-flag
May 4, 2026
Merged

Add ballot question alert flag#59
LexaMichaelides merged 7 commits intofeat/ballot-questionsfrom
ballot-question-alert-flag

Conversation

@tripledoublev
Copy link
Copy Markdown
Member

Summary

  • add nullable alertFlag and alertTip fields to the ballot-question YAML/schema contract
  • render alertFlag as a bright header notice with Markdown links and optional alertTip tooltip
  • add Storybook, unit test, fixture coverage, and docs for the alert fields

Verification

  • yarn check-types
  • yarn lint
  • yarn build:dev
  • yarn build-storybook
  • jest components/ballotquestions/BallotQuestionAlert.test.tsx --runInBand

Notes

  • alertFlag supports Markdown links through react-markdown; raw HTML is not enabled
  • alertTip is plain text and intended for short tooltip context

@LexaMichaelides
Copy link
Copy Markdown
Member

image image

The alignment with the tooltip and the text looks kinda ugly. Could the tooltip icon render at the end of the text? Is that a really inappropriate UX design choice?

@tripledoublev
Copy link
Copy Markdown
Member Author

image

I'm questioning the choice of yellow and switched to a more subtle blue. It doesn't feel as much as an alert but it does feel more in-line with the design. What do you think?

image

Also, added width: fit-content; so the element fits its content and doesn't take full width.

image

Finally, I brought the tooltip inline at the end of the text. It looks better. Thanks for the suggestion.

image

tripledoublev and others added 3 commits April 30, 2026 13:28
- Replace custom colors (#3d2600, #ffe08a, etc.) with semantic design tokens
  (--maple-color-blue-subtle-* palette)
- Replace custom shadow with --maple-shadow-md design token
- Change alert width from max-width: 42rem to width: fit-content
- Move QuestionTooltip inline with alert text for better layout
- Add example alert flag and tip to 25-14 ballot question for testing

This improves design consistency with the MAPLE design system and ensures
the alert component adjusts naturally to content size.

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
@LexaMichaelides
Copy link
Copy Markdown
Member

Yeah that looks a lot nicer, good choice!

@tripledoublev tripledoublev force-pushed the ballot-question-alert-flag branch from 7734eb4 to 6fd7179 Compare April 30, 2026 17:31
@tripledoublev tripledoublev force-pushed the ballot-question-alert-flag branch from 1c4f4c9 to 4e1dd5c Compare April 30, 2026 17:40
@tripledoublev
Copy link
Copy Markdown
Member Author

Added the following to all BQ YAMLs:

alertFlag: null
alertTip: null

@LexaMichaelides LexaMichaelides merged commit b79d6e5 into feat/ballot-questions May 4, 2026
8 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants