Can I nest headers in a stackview using Clarity

Question

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.

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

Ruan Mendes · Accepted Answer · 2020-06-05T19:56:02.140

2

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

edited Jun 05 '20 at 19:56

answered Jun 05 '20 at 18:37

Ruan Mendes

90,375
31
153
217

1

This should be the fix for the workaround. It may be a regression but we would need to investigate more. There was a change to the nested stack-block-component last year that looks like it makes nested stack-content components theme-able. This should be the answer. – hippeelee Jun 05 '20 at 18:40
Is there any other fix for this? I am facing a similar issue while nesting `clr-stack-block` and adding the CSS did not help. – nomadev95 Aug 11 '21 at 14:49
@nomadev95 Sounds like a separate question. May be related but it's different. Please ask it separately so it can be more helpful to others. – Ruan Mendes Aug 11 '21 at 15:40

Can I nest headers in a stackview using Clarity

1 Answers1