feat(content-sidebar): Add lowercase version number badge variant

[jmcbgaston]

Description

Gate a lowercase v{versionNumber} version badge behind a new versions.versionNumberBadge.lowercase.enabled feature flag. When the flag is off the badge renders the existing uppercase V{versionNumber}, so default behavior is unchanged. The variant is selected in VersionsItemBadge via useFeatureEnabled, backed by a new versionNumberBadgeLowercase i18n message.

Also centers the versions sidebar title (.bcs-title in VersionsSidebar.scss).

Test plan

• With versions.versionNumberBadge.lowercase.enabled on, the version badge renders v7 (lowercase)
• With the feature off, the badge renders V7 (uppercase) as before
• Unit tests pass: yarn test -c scripts/jest/jest.config.js src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js

Semantic release type

• feat - New feature

Summary by CodeRabbit

• New Features
  • Version badges can now display in lowercase when the relevant feature is enabled.
• Style
  • Improved alignment of the versions sidebar header for a cleaner layout.
• Bug Fixes
  • Updated version badge text handling to ensure the correct label is shown based on the active setting.

[coderabbitai]

Important

Review skipped

Review was skipped due to path filters

⛔ Files ignored due to path filters (1)

• i18n/en-US.properties is excluded by !i18n/**

CodeRabbit blocks several paths by default. You can override this behavior by explicitly including those paths in the path filters. For example, including **/dist/** will override the default block on the dist directory, by removing the pattern from both the lists.

⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: ffc967ac-53e1-4f57-9cda-a496fb912f12

You can disable this status message by setting the reviews.review_status to false in the CodeRabbit configuration file.

Use the checkbox below for a quick retry:

• 🔍 Trigger review

Walkthrough

Adds a feature-flagged lowercase variant (v{versionNumber}) of the version number badge in VersionsItemBadge. A new i18n message versionNumberBadgeLowercase is defined, useFeatureEnabled gates the rendering path, a test covers the flag-enabled case, and .bcs-title gains align-items: center in SCSS.

Lowercase version badge feature flag

Layer / File(s)	Summary
Lowercase message, flag, and rendering src/elements/content-sidebar/versions/messages.js, src/elements/content-sidebar/versions/VersionsItemBadge.js, src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js, src/elements/content-sidebar/versions/VersionsSidebar.scss	Defines the versionNumberBadgeLowercase i18n message, imports useFeatureEnabled to derive isLowercase, conditionally selects the lowercase or default FormattedMessage, tests the flag-enabled path for v7, and sets align-items: center on .bcs-title.

Estimated code review effort

🎯 1 (Trivial) | ⏱️ ~5 minutes

Possibly related PRs

• box/box-ui-elements#4381: Modifies the same VersionsItemBadge.js component and its tests, introducing conditional feature-flag-based badge rendering logic.

Suggested reviewers

• jackiejou
• bfoxx1906

🐇 A lowercase v hops into view,
Flagged by a feature, shiny and new.
The badge now whispers instead of shouts,
With isLowercase resolving all doubts.
Hop hop hooray for version display! 🎉

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 warning)

Check name	Status	Explanation	Resolution
Description check	⚠️ Warning	The description is informative, but it does not follow the repository template about ready-to-merge and merge-queue instructions.	Rewrite the PR description to match the template by including the ready-to-merge label guidance, approvals, reviewer status, and queue notes.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title matches the main change: adding a lowercase version badge variant behind a feature flag.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch lowercase-version-number-badge

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands.}

[mergify]

Merge Queue Status

• ✅ Entered queue — 2026-06-30 16:48 UTC · Rule: Automatic strict merge · triggered by rule Automatic merge queue
• ✅ Checks skipped · PR is already up-to-date
• ✅ Merged — 2026-06-30 16:48 UTC · at 015a5d6901686b37eb45ebf572fe5a9212246e44 · squash

This pull request spent 14 seconds in the queue, including 2 seconds running CI.

Required conditions to merge

• #approved-reviews-by >= 1 [🛡 GitHub branch protection]
  • feat(content-sidebar): Add lowercase version number badge variant #4663
• #review-threads-unresolved = 0 [🛡 GitHub branch protection]
  • feat(content-sidebar): Add lowercase version number badge variant #4663
• github-review-decision = APPROVED [🛡 GitHub branch protection]
  • feat(content-sidebar): Add lowercase version number badge variant #4663
• any of [🛡 GitHub branch protection]:
  • check-success = Summary
  • check-neutral = Summary
  • check-skipped = Summary
• any of [🛡 GitHub branch protection]:
  • check-success = lint_test_build
  • check-neutral = lint_test_build
  • check-skipped = lint_test_build
• any of [🛡 GitHub branch protection]:
  • check-success = license/cla
  • check-neutral = license/cla
  • check-skipped = license/cla
• any of [🛡 GitHub branch protection]:
  • check-success = lint_pull_request
  • check-neutral = lint_pull_request
  • check-skipped = lint_pull_request