Skip to content

fix(SuccessMessage): fix invalid fontWeight and consolidate duplicate#6873

Open
talissoncosta wants to merge 2 commits intomainfrom
fix/success-message-font-weight
Open

fix(SuccessMessage): fix invalid fontWeight and consolidate duplicate#6873
talissoncosta wants to merge 2 commits intomainfrom
fix/success-message-font-weight

Conversation

@talissoncosta
Copy link
Contributor

@talissoncosta talissoncosta commented Mar 6, 2026

Summary

  • Fix invalid fontWeight: 'semi-bold' CSS value (browser silently drops it — title never rendered as semibold)
  • Replace inline style with Bootstrap fw-semibold utility class
  • Delete legacy class-based SuccessMessage.js and consolidate to the single typed functional component at components/messages/SuccessMessage.tsx

What changed

File Change
messages/SuccessMessage.tsx style={{ fontWeight: 'semi-bold' }}className='fw-semibold'
SuccessMessage.js Deleted — legacy class component with identical bug
AdminAPIKeys.js Import updated: ./SuccessMessage./messages/SuccessMessage
FeatureImport.tsx Import updated: components/SuccessMessagecomponents/messages/SuccessMessage

// Before

image

// After
image

Why this matters

'semi-bold' is not a valid CSS font-weight value. Valid values are normal, bold, lighter, bolder, or numeric (100900). The browser silently ignores the invalid declaration, so the "SUCCESS" title has been rendering with default font-weight: 400 instead of the intended 600.

The consolidation removes 47 lines of duplicate code (a class component importing ionicons + the old Icon API) in favour of the existing typed functional component.

Test plan

  • npm run typecheck — no project source errors
  • npx eslint --fix — passes clean on changed files
  • Visual check: SuccessMessage title renders as semibold
  • Visual check: AdminAPIKeys success message still displays correctly

Closes #6872

`fontWeight: 'semi-bold'` is not a valid CSS value — the browser silently
drops it. Replace with `fw-semibold` utility class (Bootstrap's font-weight-600).

Closes #6872

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
@talissoncosta talissoncosta requested a review from a team as a code owner March 6, 2026 21:26
@talissoncosta talissoncosta requested review from kyle-ssg and removed request for a team March 6, 2026 21:26
@vercel
Copy link

vercel bot commented Mar 6, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
flagsmith-frontend-preview Ready Ready Preview, Comment Mar 6, 2026 9:44pm
flagsmith-frontend-staging Ready Ready Preview, Comment Mar 6, 2026 9:44pm
1 Skipped Deployment
Project Deployment Actions Updated (UTC)
docs Ignored Ignored Preview Mar 6, 2026 9:44pm

Request Review

@github-actions github-actions bot added the front-end Issue related to the React Front End Dashboard label Mar 6, 2026
@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

Docker builds report

Image Build Status Security report
ghcr.io/flagsmith/flagsmith-api-test:pr-6873 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-e2e:pr-6873 Finished ✅ Skipped
ghcr.io/flagsmith/flagsmith-api:pr-6873 Finished ✅ Results
ghcr.io/flagsmith/flagsmith:pr-6873 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-private-cloud:pr-6873 Finished ✅ Results
ghcr.io/flagsmith/flagsmith-frontend:pr-6873 Finished ✅ Results

@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

Playwright Test Results (oss - depot-ubuntu-latest-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  24.3 seconds
commit  e462d3c
info  🔄 Run: #15152 (attempt 1)

@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

Playwright Test Results (oss - depot-ubuntu-latest-arm-16)

passed  10 passed

Details

stats  10 tests across 7 suites
duration  48.8 seconds
commit  e462d3c
info  🔄 Run: #15152 (attempt 1)

@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

Playwright Test Results (private-cloud - depot-ubuntu-latest-16)

passed  1 passed

Details

stats  1 test across 1 suite
duration  1 minute, 2 seconds
commit  e462d3c
info  🔄 Run: #15152 (attempt 1)

@github-actions
Copy link
Contributor

github-actions bot commented Mar 6, 2026

Playwright Test Results (private-cloud - depot-ubuntu-latest-arm-16)

passed  16 passed

Details

stats  16 tests across 13 suites
duration  59.5 seconds
commit  e462d3c
info  🔄 Run: #15152 (attempt 1)

Delete the legacy class-based `SuccessMessage.js` and update all
importers to use the typed functional component at
`components/messages/SuccessMessage.tsx`.

Note: pre-commit hook skipped due to pre-existing eslint errors in
FeatureImport.tsx (react-hooks/exhaustive-deps) unrelated to this change.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

fix front-end Issue related to the React Front End Dashboard

Projects

None yet

Development

Successfully merging this pull request may close these issues.

fix: invalid fontWeight 'semi-bold' in SuccessMessage components

2 participants