WRR-3137: Fixed Panels.Header to show title and subtitle properly i…

…n `WizardPanels` (#1686)

* WRR-3137: Fixed to draw title and subtitle after slotSize is fixed in WizardPanels

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Modified the header to render according to conditions when it is a wizard type

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Modified it to determine render based on the visible value of the slot In the case of the WizardPanels

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Fixed travis error and lint warning

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Removed number conversion code

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Added a fixed log in CHANGELOG

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Modified the change log properly

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Added a testable story with long subtitle to qa-sampler and Modified the
change log

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

* Modified the added story to a functional component

Enact-DCO-1.0-Signed-off-by: Hyelyn Kim (myelyn.kim@lge.com)

CHANGELOG.md

@@ -15,6 +15,7 @@ The following is a curated list of changes in the Enact sandstone module, newest
 
 ### Fixed
 
+- `sandstone/Panels.Header` to show title and subtitle properly in `sandstone/WizardPanels`
 - `sandstone/Scroller`, `sandstone/Slider`, and `sandstone/VirtualList` to have default prop when `undefined` prop is passed
 - `sandstone/Scroller` to show scroll indicator when `focusableScrollbar` prop is `true`
 - `sandstone/Steps` prop `size` to accept number type

Panels/Header.js

@@ -438,6 +438,7 @@ const HeaderBase = kind({
 		slotBeforeRef,
 		slotSize,
 		titleCell,
+		type,
 		...rest
 	}) => {
 		delete rest.arranger;
@@ -447,7 +448,6 @@ const HeaderBase = kind({
 		delete rest.subtitleId;
 		delete rest.title;
 		delete rest.titleId;
-		delete rest.type;
 
 		// Set up the back button
 		const backButton = (backButtonAvailable && !noBackButton ? (
@@ -483,7 +483,7 @@ const HeaderBase = kind({
 		// Hide slots for the first render to avoid unexpected positioning when 'centered' is given.
 		// After the first render, HeaderMeasurementDecorator measures widths of slots and set right 'slotSize'.
 		const hideSlots = {
-			opacity: centered && (!slotBeforeRef.current || !slotAfterRef.current) ? '0' : null
+			opacity: centered && slotSize === '0rem' ? '0' : null
 		};
 
 		// The side Cells are always present, even if empty, to support the measurement ref.
@@ -496,7 +496,7 @@ const HeaderBase = kind({
 							{backButton}{slotBefore}
 						</span>
 					</Cell>
-					{titleCell}
+					{(type === 'wizard' && (slotBefore?.props?.visible || slotAfter?.props?.visible) && slotSize === '0rem') ? null : titleCell}
 					<Cell className={css.slotAfter} shrink={!syncCellSize} size={syncCellSize} style={hideSlots}>
 						<span ref={slotAfterRef} className={css.slotSizer}>
 							{slotAfter}{closeButton}

samples/sampler/stories/qa/WizardPanels.js

@@ -360,3 +360,33 @@ _WizardPanelsWithAlert.parameters = {
 		noPanel: true
 	}
 };
+
+const WizardPanelsWithLongSubtitle = () => {
+	return (
+		<WizardPanels
+			total={2}
+			noAnimation
+		>
+			<Panel
+				title="title 0"
+				subtitle="This is very long text. It is very very long. This is very long text. It is very very long. This is very long text. It is very very long. This is very long text. It is very very long."
+			>
+				<Button>Button1</Button>
+				<Button>Button2</Button>
+			</Panel>
+			<Panel title="title 1">
+				<Button>Button3</Button>
+				<Button>Button4</Button>
+			</Panel>
+		</WizardPanels>
+	);
+};
+
+export const _WizardPanelsWithLongSubtitle = () => <WizardPanelsWithLongSubtitle />;
+
+_WizardPanelsWithLongSubtitle.storyName = 'with long subtitle';
+_WizardPanelsWithLongSubtitle.parameters = {
+	props: {
+		noPanel: true
+	}
+};