[terra-action-header] Removed default heading level.

packages/terra-action-header/CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## Unreleased
 
+* Breaking Changes
+  * Renamed `title` prop as `text` to avoid confusion with HTML attribute `title`.
+  * Removed default `h1` heading level.
+
 ## 2.74.2 - (February 24, 2022)
 
 * Changed

packages/terra-action-header/src/ActionHeader.jsx

@@ -62,12 +62,12 @@ const propTypes = {
   /**
    * Text to be displayed as the title in the header bar.
    */
-  title: PropTypes.string,
+  text: PropTypes.string,
 };
 
 const defaultProps = {
-  title: undefined,
-  level: 1,
+  text: undefined,
+  level: undefined,
   onClose: undefined,
   onBack: undefined,
   onMaximize: undefined,
@@ -78,7 +78,7 @@ const defaultProps = {
 };
 
 const ActionHeader = ({
-  title,
+  text,
   intl,
   level,
   onClose,
@@ -191,7 +191,7 @@ const ActionHeader = ({
     <ActionHeaderContainer
       {...customProps}
       startContent={leftButtons}
-      title={title}
+      text={text}
       endContent={rightButtons}
       level={level}
     >

packages/terra-action-header/src/_ActionHeaderContainer.jsx

@@ -22,7 +22,7 @@ const propTypes = {
   /**
    * Text to be displayed as the title in the header bar.
    */
-  title: PropTypes.string,
+  text: PropTypes.string,
 
   /**
    * Content to be displayed at the end of the header.
@@ -37,28 +37,31 @@ const propTypes = {
 };
 
 const defaultProps = {
-  title: undefined,
+  text: undefined,
   startContent: undefined,
   endContent: undefined,
 };
 
 const ActionHeaderContainer = ({
-  children, title, startContent, endContent, level, ...customProps
+  children, text, startContent, endContent, level, ...customProps
 }) => {
   const theme = React.useContext(ThemeContext);
-  const HeaderElement = `h${level}`;
 
   const content = React.Children.map(children, child => (
     React.cloneElement(child, { className: cx(['flex-collapse', children.props.className]) })
   ));
 
-  const titleElement = title ? (
-    <div className={cx('title-container')}>
-      <HeaderElement className={cx('title')}>
-        {title}
-      </HeaderElement>
-    </div>
-  ) : undefined;
+  let titleElement;
+  if (text && level) {
+    const HeaderElement = `h${level}`;
+    titleElement = (
+      <div className={cx('title-container')}>
+        <HeaderElement className={cx('title')}>
+          {text}
+        </HeaderElement>
+      </div>
+    );
+  }
 
   return (
     <div {...customProps} className={classNames(cx(['flex-header', theme.className]), customProps.className)}>

packages/terra-action-header/tests/jest/ActionHeader.test.jsx

@@ -13,26 +13,26 @@ describe('ActionHeader', () => {
     expect(wrapper).toMatchSnapshot();
   });
 
-  it('should render an action header with title', () => {
-    const actionHeader = <ActionHeader title="Action Header" />;
+  it('should render an action header with title and heading level', () => {
+    const actionHeader = <ActionHeader level={1} title="Action Header" />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with back button and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onBack={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onBack={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with close button and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onClose={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onClose={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with back and close buttons and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onBack={() => {}} onClose={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onBack={() => {}} onClose={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
@@ -44,14 +44,14 @@ describe('ActionHeader', () => {
   });
 
   it('should render an action header with custom button and title', () => {
-    const actionHeader = <ActionHeader title="Action Header"><Button text="Custom Button" onClick={() => alert('You clicked me!')} /></ActionHeader>;
+    const actionHeader = <ActionHeader level={1} title="Action Header"><Button text="Custom Button" onClick={() => alert('You clicked me!')} /></ActionHeader>;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with multiple custom buttons and title', () => {
     const actionHeader = (
-      <ActionHeader title="Action Header">
+      <ActionHeader level={1} title="Action Header">
         <span>
           <Button text="Custom Button" onClick={() => alert('You clicked me!')} />
           <Button text="Custom Button" onClick={() => alert('You clicked me!')} />
@@ -63,31 +63,31 @@ describe('ActionHeader', () => {
   });
 
   it('should render an action header with maximize button and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onMaximize={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onMaximize={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with minimize button and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onMinimize={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onMinimize={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with next and previous buttons and title', () => {
-    const actionHeader = <ActionHeader title="Action Header" onNext={() => {}} onPrevious={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onNext={() => {}} onPrevious={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with title, enabled next button, and disabled previous button', () => {
-    const actionHeader = <ActionHeader title="Action Header" onNext={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onNext={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
 
   it('should render an action header with title, enabled previous button, and disabled next button', () => {
-    const actionHeader = <ActionHeader title="Action Header" onPrevious={() => {}} />;
+    const actionHeader = <ActionHeader level={1} title="Action Header" onPrevious={() => {}} />;
     const wrapper = shallowWithIntl(actionHeader).dive();
     expect(wrapper).toMatchSnapshot();
   });
@@ -104,6 +104,7 @@ describe('ActionHeader', () => {
         className="customClassName"
         onMaximize={() => {}}
         onClose={() => {}}
+        level={1}
       />
     );
     const wrapper = shallowWithIntl(actionHeader);

packages/terra-action-header/tests/jest/__snapshots__/ActionHeader.test.jsx.snap

@@ -3,6 +3,7 @@
 exports[`ActionHeader correctly applies the theme context className 1`] = `
 <div
   className="flex-header orion-fusion-theme customClassName"
+  title="Action Header"
 >
   <div
     className="flex-end"
@@ -32,17 +33,7 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
   </div>
   <div
     className="flex-fill"
-  >
-    <div
-      className="title-container"
-    >
-      <h1
-        className="title"
-      >
-        Action Header
-      </h1>
-    </div>
-  </div>
+  />
   <div
     className="flex-end"
   >
@@ -75,7 +66,6 @@ exports[`ActionHeader correctly applies the theme context className 1`] = `
 exports[`ActionHeader should render a default action header 1`] = `
 <ActionHeaderContainer
   endContent={null}
-  level={1}
   startContent={null}
 />
 `;
@@ -381,7 +371,7 @@ exports[`ActionHeader should render an action header with next and previous butt
 />
 `;
 
-exports[`ActionHeader should render an action header with title 1`] = `
+exports[`ActionHeader should render an action header with title and heading level 1`] = `
 <ActionHeaderContainer
   endContent={null}
   level={1}

packages/terra-core-docs/CHANGELOG.md

@@ -16,6 +16,8 @@
   * Added Accessibility guide for `terra-icon`.
   * Added upgrade guide for `terra-icon` from 3 to 4.
   * Added test for programmatic focus of hyperlink.
+  * Added `level` prop to `terra-action-header` tests and examples.
+  * Added upgrade guide for `terra-action-header`.
 
 * Fixed
   * Updated broken links in terra-form-select and action-footer.

packages/terra-core-docs/src/terra-dev-site/doc/action-header/UpgradeGuide.2.doc.mdx

@@ -4,6 +4,12 @@ import { Badge } from 'terra-action-header/package.json?dev-site-package';
 
 # Terra Action Header Upgrade Guide
 
+## Changes from 2.0 to 3.0
+
+### Breaking Changes
+* Renamed `title` prop as `text` to avoid confusion with HTML attribute `title`.
+* Removed default `h1` heading level so consumers must pass value for `level` prop to render the heading text.
+
 ## Changes from 1.0 to 2.0
 
 ### Changes to CSS Custom Properties

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackActionHeader.jsx

@@ -6,8 +6,9 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Back Action Header"
+      text="Back Action Header"
       onBack={() => alert('You clicked back!')}
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackCloseActionHeader.jsx

@@ -6,9 +6,10 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Back Close Action Header"
+      text="Back Close Action Header"
       onClose={() => alert('You clicked close!')}
       onBack={() => alert('You clicked back!')}
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/BackPreviousNextCloseActionHeader.jsx

@@ -6,11 +6,12 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Back Close Previous Next Action Header"
+      text="Back Close Previous Next Action Header"
       onClose={() => alert('You clicked close!')}
       onBack={() => alert('You clicked back!')}
       onPrevious={() => alert('You clicked previous!')}
       onNext={() => alert('You clicked next!')}
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/CloseActionHeader.jsx

@@ -6,8 +6,9 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Close Action Header"
+      text="Close Action Header"
       onClose={() => alert('You clicked close!')}
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/DefaultActionHeader.jsx

@@ -5,7 +5,8 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Default Action Header"
+      text="Default Action Header"
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/LongWrappingTextHeader.jsx

@@ -11,13 +11,14 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien.
+      text="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla orci dolor, dignissim vitae risus vel, tristique egestas sapien.
       Vivamus blandit augue justo, id tincidunt justo luctus et. Morbi lacinia porttitor lacus, ac fermentum mauris tempus dapibus. Donec fringilla est ut ullamcorper consequat.
       Aliquam ornare efficitur ornare. Curabitur facilisis urna a congue gravida.
       Nulla accumsan non nisl sed elementum.
       Lorem ipsum dolor sit amet, consectetur adipiscing elit."
       onMinimize={() => alert('You clicked minimize!')}
       onClose={() => alert('You clicked close!')}
+      level={3}
     >
       <Placeholder className={cx('placeholder-wrapper')} title="Collapsible Menu View" />
     </ActionHeader>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/MaximizeCloseActionHeader.jsx

@@ -6,9 +6,10 @@ const ActionHeaderExample = () => (
   <div>
     <br />
     <ActionHeader
-      title="Maximize Close Action Header"
+      text="Maximize Close Action Header"
       onClose={() => alert('You clicked close!')}
       onMaximize={() => alert('You clicked maximize!')}
+      level={3}
     />
     <br />
   </div>

packages/terra-core-docs/src/terra-dev-site/doc/action-header/example/MinimizeCustomButtonActionHeader.jsx

@@ -10,7 +10,7 @@ const cx = classNames.bind(styles);
 const ActionHeaderExample = () => (
   <div>
     <br />
-    <ActionHeader title="Minimize Custom Button Action Header" onMinimize={() => alert('You clicked minimize!')} onClose={() => alert('You clicked close!')}>
+    <ActionHeader level={3} text="Minimize Custom Button Action Header" onMinimize={() => alert('You clicked minimize!')} onClose={() => alert('You clicked close!')}>
       <Placeholder className={cx('placeholder-wrapper')} title="Collapsible Menu View" />
     </ActionHeader>
     <br />

packages/terra-core-docs/src/terra-dev-site/test/action-header/BackActionHeader.test.jsx

@@ -4,8 +4,9 @@ import ActionHeader from 'terra-action-header/lib/ActionHeader';
 
 const ActionHeaderExample = () => (
   <ActionHeader
-    title="Back Action Header"
+    text="Back Action Header"
     onBack={() => alert('You clicked back!')}
+    level={1}
   />
 );
 

packages/terra-core-docs/src/terra-dev-site/test/action-header/BackCloseActionHeader.test.jsx

@@ -4,9 +4,10 @@ import ActionHeader from 'terra-action-header/lib/ActionHeader';
 
 const ActionHeaderExample = () => (
   <ActionHeader
-    title="Back Close Action Header"
+    text="Back Close Action Header"
     onBack={() => alert('You clicked back!')}
     onClose={() => alert('You clicked close!')}
+    level={1}
   />
 );
 

packages/terra-core-docs/src/terra-dev-site/test/action-header/BackClosePreviousNextActionHeader.test.jsx

@@ -4,11 +4,12 @@ import ActionHeader from 'terra-action-header/lib/ActionHeader';
 
 const ActionHeaderExample = () => (
   <ActionHeader
-    title="Back Close Previous Next Action Header"
+    text="Back Close Previous Next Action Header"
     onBack={() => alert('You clicked back!')}
     onClose={() => alert('You clicked close!')}
     onPrevious={() => alert('You clicked previous!')}
     onNext={() => alert('You clicked next!')}
+    level={1}
   />
 );
 

packages/terra-core-docs/src/terra-dev-site/test/action-header/CloseActionHeader.test.jsx

@@ -4,8 +4,9 @@ import ActionHeader from 'terra-action-header/lib/ActionHeader';
 
 const ActionHeaderExample = () => (
   <ActionHeader
-    title="Close Action Header"
+    text="Close Action Header"
     onClose={() => alert('You clicked close!')}
+    level={1}
   />
 );