diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md
index ae263b7db..9b7aa7ca5 100644
--- a/packages/terra-clinical-header/CHANGELOG.md
+++ b/packages/terra-clinical-header/CHANGELOG.md
@@ -2,6 +2,9 @@
## Unreleased
+* Changed
+ * Removed title div when value is not provided for text prop.
+
## 3.31.2 - (April 2, 2024)
* Fixed
diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx
index 488b97e47..76c5ad286 100644
--- a/packages/terra-clinical-header/src/Header.jsx
+++ b/packages/terra-clinical-header/src/Header.jsx
@@ -140,19 +140,19 @@ const Header = ({
customProps.className,
]);
- const renderTitle = !(!titleContent && startContent && endContent);
const contentClassNames = wrapContent ? cx('flex-end-wrap') : cx('flex-end');
+ const endClassNames = cx({ 'end-content': !title });
return (
{startContent && {startContent}
}
- {renderTitle && (
+ {titleContent && (
{titleElement}
)}
{content}
- {endContent && {endContent}
}
+ {endContent && {endContent}
}
);
};
diff --git a/packages/terra-clinical-header/src/Header.module.scss b/packages/terra-clinical-header/src/Header.module.scss
index 9eff969bb..409d4075d 100644
--- a/packages/terra-clinical-header/src/Header.module.scss
+++ b/packages/terra-clinical-header/src/Header.module.scss
@@ -51,6 +51,10 @@
position: relative;
}
+ .end-content {
+ margin-left: auto;
+ }
+
.title-container {
position: relative;
width: 100%;
diff --git a/packages/terra-clinical-header/tests/jest/Header.test.jsx b/packages/terra-clinical-header/tests/jest/Header.test.jsx
index 645f92377..0a08523a3 100644
--- a/packages/terra-clinical-header/tests/jest/Header.test.jsx
+++ b/packages/terra-clinical-header/tests/jest/Header.test.jsx
@@ -41,23 +41,21 @@ it('should render a header with heading level', () => {
it('should render a header with content on the left', () => {
const startContent =
start content
;
- const flexFill = ;
const flexEnd = {startContent}
;
const header = shallow();
// ensure flex-fill title container is after start content
expect(header.find('.flex-header').props().children[0]).toEqual(flexEnd);
- expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
expect(header).toMatchSnapshot();
});
it('should render a header with content on the right', () => {
const endContent = end content
;
- const flexFill = ;
- const flexEnd = {endContent}
;
+ const flexFill = '';
+ const flexEnd = {endContent}
;
const header = shallow();
- // ensure flex-fill title container is before end content
+ // ensure flex-fill title container is not rendered if no title is provided
expect(header.find('.flex-header').props().children[1]).toEqual(flexFill);
expect(header.find('.flex-header').props().children[3]).toEqual(flexEnd);
expect(header).toMatchSnapshot();
@@ -74,7 +72,7 @@ it('should render a header with all content', () => {
);
const flexEndStart = {startContent}
;
- const flexEndEnd = {endContent}
;
+ const flexEndEnd = {endContent}
;
const header = shallow((