Skip to content

fix(ui): YPE-3871 - secondary buttons no longer read as disabled - #318

Merged
cameronapak merged 3 commits into
mainfrom
ype-3871-react-sdk-biblecard-version-button-label-uses-muted-text-color-and-reads-as-disabled
Aug 4, 2026
Merged

fix(ui): YPE-3871 - secondary buttons no longer read as disabled#318
cameronapak merged 3 commits into
mainfrom
ype-3871-react-sdk-biblecard-version-button-label-uses-muted-text-color-and-reads-as-disabled

Conversation

@cameronapak

@cameronapak cameronapak commented Aug 4, 2026

Copy link
Copy Markdown
Collaborator
fix.ui._.YPE-3871.-.secondary.buttons.no.longer.read.as.disabled.mp4

Summary

Secondary buttons paired bg-muted with text-muted-foreground, so active controls like the BibleCard version picker read as disabled. The variant now uses the normal foreground color, taking the light-theme label from 5.6:1 to 17.1:1 against the button surface.

YPE-3871 - https://lifechurch.atlassian.net/browse/YPE-3871

Changes

  1. Secondary buttons read as active controls — the variant pairs bg-muted with the normal foreground color instead of the muted one.
  2. The BibleCard version picker's loading spinner inherits the button label color rather than forcing its own muted one.
  3. The BibleCard and Verse of the Day demo pages cap their width, so the cards render in a realistic container instead of stretching to the viewport.

Start here: change 1 — it repaints every secondary button, not just BibleCard's.

Test plan

  • pnpm typecheck — passed
  • pnpm lint — passed
  • pnpm --filter @youversion/platform-react-ui test — 401 passed
  • pnpm --filter @youversion/platform-react-hooks test — 289 passed
  • @youversion/platform-core tests not run: .env.local is absent locally, and no core files changed
  • Needs manual check: the version button in light and dark themes, and the RN Expo SDK's BibleCard — the dark theme's muted-foreground is near-white, so it hid this bug, and the Expo SDK lives in another repo.

cameronapak and others added 2 commits August 4, 2026 15:29
The `secondary` variant paired `bg-muted` with `text-muted-foreground`,
so active secondary buttons read as disabled controls. In the light theme
the label sat at 5.6:1 against the button surface instead of 17.1:1.

The BibleCard version picker button is where this was most visible, since
it is the one secondary button consumers surface prominently. The dark
theme hid the problem because `muted-foreground` there is near-white.

Also drops the muted class from the BibleCard version picker's loading
spinner so it inherits the button label color.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
Both pages let their card stretch to the full viewport width, which is
not how consumers embed these components. Cap them at `max-w-screen-sm`
and center them so the demos show a realistic container.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@changeset-bot

changeset-bot Bot commented Aug 4, 2026

Copy link
Copy Markdown

🦋 Changeset detected

Latest commit: 1d59ea7

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@youversion/platform-react-ui Patch
vite-react Patch
@youversion/platform-core Patch
@youversion/platform-react-hooks Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

@cameronapak cameronapak changed the title fix(ui): secondary buttons no longer read as disabled fix(ui): YPE-3871 - secondary buttons no longer read as disabled Aug 4, 2026
@cameronapak cameronapak self-assigned this Aug 4, 2026
Comment thread examples/vite-react/src/pages/BibleCardPage.tsx
Comment thread examples/vite-react/src/pages/VotdPage.tsx
Comment thread packages/ui/src/components/ui/button.test.tsx
Review feedback: the guard is unnecessary.

Co-Authored-By: Claude Opus 5 <noreply@anthropic.com>
@cameronapak
cameronapak merged commit 9a2b3e9 into main Aug 4, 2026
20 checks passed
@cameronapak
cameronapak deleted the ype-3871-react-sdk-biblecard-version-button-label-uses-muted-text-color-and-reads-as-disabled branch August 4, 2026 20:44
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