Default z-index alignment needed with design system #1351
Description
Describe the bug
The default z-index values for several of the web-components are not aligned with the proper component hierarchy for the design system. For example, the classification marking appears below the dialog modal background. We should revisit this hierarchy and ensure that the default styles reflect the proper visual hierarchy.
To Reproduce
Current behavior
The default hierarchy for components meant to overlap other components appears to be as follows:
RuxDialog
RuxTooltip
RuxToast
RuxPopUp
RuxClassificationMarking
RuxNotificationBanner/RuxGlobalStatusBar
Expected behavior
To align with standards it should be:
RuxTooltip
RuxClassificationMarking
RuxDialog
RuxPopUp
RuxToast
RuxGlobalStatusBar/RuxNotificationBanner
With the general rule of any component should appear over its parent container. For example, a tooltip on text within a toast message should appear over the toast.
Screenshots
CodeSandbox
https://codesandbox.io/p/sandbox/astro-z-index-issue-nn4dw3
Environment (please complete the following information):
- Browser = chrome
- @astrouxds/astro-web-components version = 7.23.0
- Framework = React
- Framework wrapper version = @astrouxds/react
Additional context
None