Storybook inconsistency for dialog

[gobarcanin]

Which UI Kit version is this bug for?

v5.x

Latest version

• I have tested the latest version

No Hitachi confidential content

• I'm not including any Hitachi confidential content

Current behavior 😯

When on storybook setting variant "warning" for dialog I'm getting following result

import { useState } from "react";
import {
  HvButton,
  HvDialog,
  HvDialogActions,
  HvDialogContent,
  HvDialogProps,
  HvDialogTitle,
} from "@hitachivantara/uikit-react-core";

export const MainStory = (props: HvDialogProps) => {
  const [open, setOpen] = useState(false);

  return (
    <div>
      <HvButton style={{ width: "120px" }} onClick={() => setOpen(true)}>
        Open Dialog
      </HvButton>
      <HvDialog open={open} onClose={() => setOpen(false)} {...props}>
        <HvDialogTitle variant="warning">Switch model view?</HvDialogTitle>
        <HvDialogContent indentContent>
          Switching to model view will clear all the fields in your
          visualization. You will need to re-select your fields.
        </HvDialogContent>
        <HvDialogActions>
          <HvButton variant="secondaryGhost" onClick={() => setOpen(false)}>
            Apply
          </HvButton>
          <HvButton
            autoFocus
            variant="secondaryGhost"
            onClick={() => setOpen(false)}
          >
            Cancel
          </HvButton>
        </HvDialogActions>
      </HvDialog>
    </div>
  );
};

but it should be used as following

<HvDialog maxWidth="xl" onClose={onClose29618327} open={open29618327} variant="warning">
	<HvDialogTitle />
	<HvDialogContent>
	<HvTypography id="HvTypography_29618341" className={classes.typographyComponent} variant="title1">
		Typography
	</HvTypography>
	</HvDialogContent>
	<HvDialogActions>
		<HvButton id="HvButton_29618346" variant="primary" size="md" radius="none">
			Button
		</HvButton>
		<HvButton id="HvButton_29618343" onClick={onClick29618343} variant="primary" size="md" radius="none">
			Button
		</HvButton>
	</HvDialogActions>
</HvDialog>

Expected behavior 🤔

If you set variant in HvDialogTitle nothing happens, styling is applied only when variant is set in HvDialog

Steps to reproduce 🕹

Pretty much described in current behaviour and expected behaviour

Context 🔦

Style dialog

Your Environment 🌎

Build tool: (e.g. Vite 4, Webpack 5)
Device & OS: (e.g. Windows 11 laptop, iPhone 13 iOS15)
Browser: (e.g. Chrome 112, Safari 15.4)
Other details (e.g. 4K resolution, ...)

[MEsteves22]

Hello @gobarcanin 👋

I'm not sure if I understood the problem but adding variant to HvDialogTitle adds an icon on the left side of the dialog title. Adding this property to HvDialog adds a status bar to the top of the dialog. They are two different properties and do different things.

Is it not working on your side?

On Storybook you are only able to the change the variant for HvDialog using the Storybook controls.