Search code examples
vmware-claritystackview

Can I nest headers in a stackview using Clarity

In Clarity 2, we used the following code to generate a stack view with nested block headers.

<clr-stack-view>
    <clr-stack-block [clrSbExpanded]="true">
        <clr-stack-label>Leases</clr-stack-label>
        <clr-stack-block [clrSbExpanded]="true">
            <clr-stack-label>vApp leases</clr-stack-label>
            <clr-stack-content></clr-stack-content>
            <clr-stack-block>
                <clr-stack-label>Runtime expiry action</clr-stack-label>
                <clr-stack-content>Never expires</clr-stack-content>
            </clr-stack-block>
            <clr-stack-block>
                <clr-stack-label>Runtime Expiry Action</clr-stack-label>
                <clr-stack-content>Content</clr-stack-content>
            </clr-stack-block>
        </clr-stack-block>
    </clr-stack-block>
</clr-stack-view>

After upgrading to Clarity 3, I'm getting a glitch on my sub header where the right part of it is white instead of the background color.

Glitch on sub header

This seems to be because of the following CSS rule. I can probably workaround it...

.stack-view .stack-children .stack-block-label, .stack-view .stack-children .stack-block-content {
    background-color: #fff;
    background-color: var(--clr-stack-view-stack-children-stack-block-label-and-content-bg-color, white);
}

The question is whether this a bug? Or was I just using unsupported behavior in Clarity 2? You can play with it here

Solution

  • I can't say whether it's a bug, but the following CSS override fixes it.

    .stack-view .stack-children .stack-block-content {
  background-color: inherit;
}

    Moreover, if I remove that style declaration completely (from dev tools), everything seems to work fine, so it seems like that rule was left there by mistake to try to make sure the clr-stack-content|label was white in the body. Heck if I know...

    See https://stackblitz.com/edit/stack-view-nested-header-fixed?file=src%2Findex.html