ActionHeader Port from clinical

Summary

There exists an action header in the terra-clinical repo already. We would like to push this into terra-core and deprecate the clinical package. To make upgrading easiest, we would like to try to maintain the api for passivity.

Existing Props

Prop	Type	Required	Default	Description
title	string	optional	undefined	Text to be displayed as the title in the header bar
level	number	optional	1	Sets the heading level. One of 1, 2, 3, 4, 5, 6. (ADDED)
onClose	func	optional	undefined	Callback function for when the close button is clicked. The back button will not display if this is not set. On small viewports a back button will be displayed instead of a close button when a separate onBack callback is not set.
onBack	func	optional	undefined	Callback function for when the back button is clicked. The back button will not display if this is not set.
onMaximize	func	optional	undefined	Callback function for when the expand button is clicked. The expand button will not display if this is not set or on small viewports. Only the expand button will be rendered if onMaximize and onMinimize are set.
onMinimize	func	optional	undefined	Callback function for when the minimize button is clicked. The minimize button will not display if this is not set or on small viewports. Only the expand button will be rendered if both onMaximize and onMinimize are set.
onNext	func	optional	undefined	Callback function for when the next button is clicked. The previous-next button group will not display if neither this or onPrevious are set.
onPrevious	func	optional	undefined	Callback function for when the previous button is clicked. The previous-next button group will not display if neither this or onNext are set.
keepCloseButton	bool	optional	undefined	A Boolean indicating if close button should be displayed on small viewports when separate onBack callback is not set.
children	element	optional	undefined	Child element to be displayed on the right end of the header. This is intended to be used with the CollapsibleMenuView.

Changes

• Currently the back button, and the expand/collapse buttons appear to be mutually exclusive as they share the same spot and change based off screen size https://github.com/cerner/terra-clinical/blob/master/packages/terra-clinical-action-header/src/ActionHeader.jsx#L129 . They will no longer be mutually exclusive as the back button, and expand/collapse will now be in 2 different sockets.
• The existing action header uses functions specific to each special button (maximize, minimize, next, previous) to determine if they should be shown. These props will be kept for passivity, but it will be documented that they will be removed in the next major release, and instead the consumer should be passing them into their collapsible menu as children.
• Button styles have been changed to utility
• @mjhenkes , we discussed with @neilpfeiffer, and he thought we should put the buttons from legacy function props in their same existing position (between the back button and title) for now.

How to deprecate the props

Seen here, https://discuss.reactjs.org/t/proposal-add-isdeprecated-to-react-proptypes/4037 something like this would work

import React from 'react';

class Component extends React.Component {
  render() {
    const {oldProp, newProp} = this.props;
    if (process.env.NODE_ENV !== 'production' && typeof oldProp !== 'undefined') {
      console.warn('oldProp is deprecated, use newProp instead');
    }
    ...
  }
}

React chose not to add an isDeprecated function for prop-types https://github.com/facebook/react/pull/6357 . Dan Abramov did make a package for this https://github.com/Aweary/react-is-deprecated but its not worth pulling in

Questions

• Do the buttons’ icon need to be themable? I’m assuming atleast some of them do since I see a vertical … and a horizontal version in different spots.
• Digging in more now, I see ActionHeader has a dependency on the terra-clinical-header. Is this also a component we want ported over directly (I don’t see anything about it in callouts)? I assume we don’t want a dependency from core -> clinical. We could probably get most of the functionality we need utilizing arrange, heading, and truncating the text.

[ChaseSinclair]

Just to clarify, we are NOT planning to create a core version of terra-clinical-header, but rather integrate it as part of the action-header component itself. Is this correct?

[bjankord]

@ChaseSinclair We are not planning on creating a core version of terra-clinical-header. Anything terra-clinical-header provided terra-clincal-action-header should be coded directly into terra-action-header.

Do the buttons’ icon need to be themable?

Yeah, let’s assume so and make the icons like the back, close, more, prev, next, etc icons themable.

+1 on tech design.