Make 'print all tabs' optional

[damithc]

In #1498, we made all tabs appear in the print view. In retrospect (my bad), this did not consider the case where we actually don't want some tabs to be printed (e.g., if they contained optional content).

I think we need to provide a way to opt-in or opt-out of showing a specific tab in the print view.

[damithc]

@jonahtanjz what do you think? While not urgent, I need a solution before the start of next sem, as I have to generate PDF files for the text books (at the start of Aug).

[jonahtanjz]

what do you think? While not urgent, I need a solution before the start of next sem, as I have to generate PDF files for the text books (at the start of Aug).

Yes I can work on this.

I think we need to provide a way to opt-in or opt-out of showing a specific tab in the print view.

Something like this:

<tabs>
  <tab header="First tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Second tab" no-print>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Third tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
</tabs>

In this case only first and third tabs will get printed etc. The default will print all tabs. Is this fine or do you prefer the other way around which defaults to no print unless specified?

[damithc]

In this case only first and third tabs will get printed etc. The default will print all tabs. Is this fine or do you prefer the other way around which defaults to no print unless specified?

The proposed approach sounds good @jonahtanjz Go ahead.

[ang-zeyu]

Sorry for the late reply @jonahtanjz, wonder if it'd better to just delegate this to the user with bootstrap's d-print-none class.

It's not working for <tab> / <tabgroup> right now, but fixable by simply removing the !important with our own md-d-print-block class.

<tabs>
  <tab header="First tab" class="d-print-none">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Second tab" no-print>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Third tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
</tabs>

On a related note, there's quite a few other usages of !important I realise we should try to avoid using in our components as well (for easier style overriding in general).

[jonahtanjz]

wonder if it'd better to just delegate this to the user with bootstrap's d-print-none class.

That sounds good as this can be generalised to apply to other components as well. If we are going in this direction, do you think we should also create our own custom class, no-print or something similar, so that it's easier for the user to reference compared to bootstrap's provided class? @ang-zeyu and Prof @damithc, any thoughts on this?

On a related note, there's quite a few other usages of !important I realise we should try to avoid using in our components as well (for easier style overriding in general).

Yup that sounds good. We can open another issue to resolve the other uses of !important. In the meantime, I can update the PR to make tab work with no-print first.

[damithc]

That sounds good as this can be generalised to apply to other components as well. If we are going in this direction, do you think we should also create our own custom class, no-print or something similar, so that it's easier for the user to reference compared to bootstrap's provided class? @ang-zeyu and Prof @damithc, any thoughts on this?

I'm OK with this approach too. Remember to update the documentation of the tab component to mention how to hide tabs using this generic method.

[jonahtanjz]

@ang-zeyu Turns out tabs are using inline styling to show/hide the content of each tab, which is how v-show works. This complicates things as inline styling has a really high specificity which means the only way to override it is to use !important. What do you think of sticking to the no-print attribute suggested earlier in this situation?

[ang-zeyu]

could try this (our own v-show) (with the hide scoped):

.tab-pane.hide {
  display: none;
}

[ang-zeyu]

If we are going in this direction, do you think we should also create our own custom class, no-print or something similar

sorry, missed this earlier. I think we should stick to bootstrap's d-print-none class for now as some small snippets of our documentation are already referencing bootstrap classes in bulk (badges for example) or as snippets. Bootstrap support is also documented in the home page https://markbind.org/index.html.

We can always add this on if we decide to move away from bootstrap in a later major release, on the contrary its harder to "deprecate / remove" features once supported.