ngb-accordion or ngb-panel type has no effect

[FrancoisM]

I expect the following to show a success style but it doesn't.
I have bootstrap v4 installed.
(Note that when I open the plunkers in the doc I can't get them to work. Adding the ng-bootstrap package fails.)

<ngb-accordion class="col-md-12" type="success">
    <ngb-panel>
        <ng-template ngbPanelTitle>
            title
        </ng-template>
        <ng-template ngbPanelContent>               
            blah blah
        </ng-template>
    </ngb-panel>
</ngb-accordion>

[pkozlowski-opensource]

I've got a perfectly working plunker here: http://plnkr.co/edit/Cnas1aOupptPQhfGZ0dx?p=preview - I've just forked it from our demo page (https://ng-bootstrap.github.io/#/components/accordion/examples)

[FrancoisM]

Tks for plunker it works (I may have done something wrong the first time). However the point is on "type" not working.

[pkozlowski-opensource]

However the point is on "type" not working.

Not sure what you mean... Please provide a minimal reproduce scenario in a plunker, as requested in the issue template.

[FrancoisM]

I'm new to plunker so I haven't found yet how to modify the plunker you sent and give you the link.
But if you take the plunker you sent and replace the html with the one of my question, you'll notice that the panel is not of type "success" of bootstrap.

[pkozlowski-opensource]

Oh, I see. Here is a reproduce scenario: http://plnkr.co/edit/Cnas1aOupptPQhfGZ0dx?p=preview

[maxokorokov]

card-warning, card-success, etc styles are not working anymore. Customization is done via utility classes: https://getbootstrap.com/docs/4.0/components/card/#card-styles

Accordion has @Input() type; that is not working anymore (it was already broken with beta.1)

From accordion.ts template:

<div role="tab" [class]="'card-header ' + (panel.type ? 'card-'+panel.type: type ? 'card-'+type : '')">
  <!-- ... -->
</div>

Now you can separately customize text, say with text-white, background with bg-primary and border with border-primary.

[bbalvanera-zz]

I'm new to the ng-bootstrap code but isn't it possible to just update the template to use 'bg-'+type : and it will continue working right?

[maxokorokov]

@bbalvanera, yes, that would do I guess, it just has 3 separate things now: background colour, text colour and border colour. Previously there was only one - card type.

[vsagarreddy]

Can any one tell me how to use isOpen flag

[maxokorokov]

Ok, this was changed between alpha.6 → beta transition of the bootstrap

Previously the possible styles were → success | info | warning | danger and the only thing it changed was the background colour of the tab header:

Ex. for type=danger

---

I'll open a PR that will use current background colour values as type → primary | secondary | success | danger | warning | info | light | dark

It will only style the header of the card to restore previously expected behaviour.

Styling of card header/body separately and border colour should be discussed as separate features outside of this issue.