diff --git a/packages/terra-clinical-header/CHANGELOG.md b/packages/terra-clinical-header/CHANGELOG.md index f7558764e..844d1b070 100644 --- a/packages/terra-clinical-header/CHANGELOG.md +++ b/packages/terra-clinical-header/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Fixed + * Added `wrapContent` prop to make content wrapping optional. + ## 3.31.1 - (March 26, 2024) * Fixed diff --git a/packages/terra-clinical-header/src/Header.jsx b/packages/terra-clinical-header/src/Header.jsx index 488e73334..488b97e47 100644 --- a/packages/terra-clinical-header/src/Header.jsx +++ b/packages/terra-clinical-header/src/Header.jsx @@ -67,6 +67,11 @@ const propTypes = { * Sets the header title to be a hyperlink. */ onClick: PropTypes.func, + + /** + * A Boolean indicating if start and end content should be wrapped. + */ + wrapContent: PropTypes.bool, }; const defaultProps = { @@ -75,6 +80,7 @@ const defaultProps = { endContent: null, isSubheader: false, text: '', + wrapContent: false, }; const Header = ({ @@ -87,6 +93,7 @@ const Header = ({ id, isSubheader, onClick, + wrapContent, ...customProps }) => { const theme = useContext(ThemeContext); @@ -134,17 +141,18 @@ const Header = ({ ]); const renderTitle = !(!titleContent && startContent && endContent); + const contentClassNames = wrapContent ? cx('flex-end-wrap') : cx('flex-end'); return (
- {startContent &&
{startContent}
} + {startContent &&
{startContent}
} {renderTitle && (
{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 541445a69..9eff969bb 100644 --- a/packages/terra-clinical-header/src/Header.module.scss +++ b/packages/terra-clinical-header/src/Header.module.scss @@ -37,7 +37,7 @@ width: 100%; } - .flex-end { + .flex-end-wrap { display: flex; flex-flow: row wrap; justify-content: flex-start; @@ -45,6 +45,12 @@ align-content: flex-start; } + .flex-end{ + display:flex; + flex: 0 0 auto; + position: relative; + } + .title-container { position: relative; width: 100%; diff --git a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss index 1915ece0c..9cf40a8a0 100644 --- a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss +++ b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/ClinicalHeaderCommontest.module.scss @@ -23,4 +23,8 @@ padding: 0; padding-right: 10px; } + + .button { + margin: 5px; + } } diff --git a/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx new file mode 100644 index 000000000..18ac513e5 --- /dev/null +++ b/packages/terra-clinical-header/src/terra-dev-site/test/clinical-header/HeaderWrapContent.test.jsx @@ -0,0 +1,28 @@ +import React from 'react'; +import classNames from 'classnames/bind'; + +import Header from 'terra-clinical-header'; +import Button from 'terra-button'; +import styles from './ClinicalHeaderCommontest.module.scss'; + +const cx = classNames.bind(styles); + +const endContent = ( +
+
+); + +export default () => ( +