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}',