diff --git a/packages/terra-core-docs/CHANGELOG.md b/packages/terra-core-docs/CHANGELOG.md index ee67c5e58c8..52e06ea1faa 100644 --- a/packages/terra-core-docs/CHANGELOG.md +++ b/packages/terra-core-docs/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Added + * Added test to `terra-section-header` for the sticky section header title. + ## 1.58.0 - (February 20, 2024) * Changed diff --git a/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx b/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx new file mode 100644 index 00000000000..d4c2bd5ebdb --- /dev/null +++ b/packages/terra-core-docs/src/terra-dev-site/test/section-header/StickyTitleSectionHeader.test.jsx @@ -0,0 +1,29 @@ +/* eslint-disable react/forbid-dom-props */ +import React from 'react'; +import SectionHeader from 'terra-section-header'; + +export default () => ( +
+
+ {}} + /> +
+ {}} + /> +
+ +
+
+); diff --git a/packages/terra-section-header/CHANGELOG.md b/packages/terra-section-header/CHANGELOG.md index ac6471a6978..afce86cd1d8 100644 --- a/packages/terra-section-header/CHANGELOG.md +++ b/packages/terra-section-header/CHANGELOG.md @@ -2,6 +2,9 @@ ## Unreleased +* Changed + * Allow the title of the `terra-section-header` to be sticky. + ## 2.66.0 - (February 15, 2024) * Changed diff --git a/packages/terra-section-header/src/SectionHeader.jsx b/packages/terra-section-header/src/SectionHeader.jsx index fbddbf6586a..a87f6865357 100644 --- a/packages/terra-section-header/src/SectionHeader.jsx +++ b/packages/terra-section-header/src/SectionHeader.jsx @@ -166,7 +166,7 @@ class SectionHeader extends React.Component { return ( - + {headerText}} diff --git a/packages/terra-section-header/src/SectionHeader.module.scss b/packages/terra-section-header/src/SectionHeader.module.scss index 83678c2d3d4..063019a6c2b 100644 --- a/packages/terra-section-header/src/SectionHeader.module.scss +++ b/packages/terra-section-header/src/SectionHeader.module.scss @@ -156,5 +156,12 @@ &.title-fixed { position: absolute; } + + // Make the section header title sticky + &.title-sticky { + position: sticky; + left: 12px; + width: auto; + } } } diff --git a/packages/terra-section-header/tests/jest/SectionHeader.test.jsx b/packages/terra-section-header/tests/jest/SectionHeader.test.jsx index c7ba3c08d52..efe14e315be 100644 --- a/packages/terra-section-header/tests/jest/SectionHeader.test.jsx +++ b/packages/terra-section-header/tests/jest/SectionHeader.test.jsx @@ -147,4 +147,17 @@ describe('SectionHeader', () => { const sectionHeader = wrapper.find('.arrange-wrapper.title-fixed').at(0); expect(sectionHeader).toHaveLength(1); }); + + it('verifies that section header with a sticky title has appropriate classes', () => { + const wrapper = enzyme.shallow( + , + ); + + const sectionHeader = wrapper.find('.arrange-wrapper.title-sticky').at(0); + expect(sectionHeader).toHaveLength(1); + }); });