diff --git a/i18n/en-US.properties b/i18n/en-US.properties index 78c47e52e1..b4b8fb5f80 100644 --- a/i18n/en-US.properties +++ b/i18n/en-US.properties @@ -846,6 +846,8 @@ be.sidebarVersions.versionLimitExceeded = You are limited to the last {versionLi be.sidebarVersions.versionMaxEntries = Version history is limited to the last {maxVersions} entries. # Text to display in the version badge. be.sidebarVersions.versionNumberBadge = V{versionNumber} +# Text to display in the version badge, lowercase variant. +be.sidebarVersions.versionNumberBadgeLowercase = v{versionNumber} # Label given to the version badge for screen readers. be.sidebarVersions.versionNumberLabel = Version number {versionNumber} # Message describing when the version will be deleted due to an applied retention policy. diff --git a/src/elements/content-sidebar/versions/VersionsItemBadge.js b/src/elements/content-sidebar/versions/VersionsItemBadge.js index 9a3fa2a1ce..6666b027ff 100644 --- a/src/elements/content-sidebar/versions/VersionsItemBadge.js +++ b/src/elements/content-sidebar/versions/VersionsItemBadge.js @@ -6,6 +6,7 @@ import * as React from 'react'; import { FormattedMessage, injectIntl } from 'react-intl'; import classNames from 'classnames'; +import { useFeatureEnabled } from '../../common/feature-checking'; import messages from './messages'; import './VersionsItemBadge.scss'; @@ -17,6 +18,7 @@ type Props = { const VersionsItemBadge = ({ intl, isCurrent, versionNumber }: Props) => { const intlValues = { versionNumber }; + const isLowercase = useFeatureEnabled('versions.versionNumberBadge.lowercase.enabled'); return (
{ 'bcs-VersionsItemBadge--current': isCurrent, })} > - +
); }; diff --git a/src/elements/content-sidebar/versions/VersionsSidebar.scss b/src/elements/content-sidebar/versions/VersionsSidebar.scss index 8a8ea919eb..f48fe18ebf 100644 --- a/src/elements/content-sidebar/versions/VersionsSidebar.scss +++ b/src/elements/content-sidebar/versions/VersionsSidebar.scss @@ -9,6 +9,10 @@ padding-top: 0; } + .bcs-title { + align-items: center; + } + .bdl-BackButton { margin-right: 5px; } diff --git a/src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js b/src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js index 20644c52ed..f6c17a30e5 100644 --- a/src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js +++ b/src/elements/content-sidebar/versions/__tests__/VersionsItemBadge.test.js @@ -18,6 +18,14 @@ describe('elements/content-sidebar/versions/VersionsItemBadge', () => { expect(screen.getByLabelText('Version number 5')).toBeInTheDocument(); }); + test('should render lowercase version number badge when feature is enabled', () => { + render(, { + wrapperProps: { features: { versions: { versionNumberBadge: { lowercase: { enabled: true } } } } }, + }); + + expect(screen.getByText('v7')).toBeInTheDocument(); + }); + test.each` isCurrent | shouldHaveCurrentClass ${true} | ${true} diff --git a/src/elements/content-sidebar/versions/messages.js b/src/elements/content-sidebar/versions/messages.js index 9f072bdf9d..f19ecf0a7e 100644 --- a/src/elements/content-sidebar/versions/messages.js +++ b/src/elements/content-sidebar/versions/messages.js @@ -127,6 +127,11 @@ const messages = defineMessages({ defaultMessage: 'V{versionNumber}', description: 'Text to display in the version badge.', }, + versionNumberBadgeLowercase: { + id: 'be.sidebarVersions.versionNumberBadgeLowercase', + defaultMessage: 'v{versionNumber}', + description: 'Text to display in the version badge, lowercase variant.', + }, versionNumberLabel: { id: 'be.sidebarVersions.versionNumberLabel', defaultMessage: 'Version number {versionNumber}',