Show all tabs when printing

[jonahtanjz]

What is the purpose of this pull request?

• Documentation update
• Bug fix
• Feature addition or enhancement
• Code maintenance
• Others, please explain:

Overview of changes:
Resolves #1491.

1. Show all the content and display the header of the tabs when printing.
2. Tabs in tab-group will be grouped together.
3. The tab navigation is hidden when printing to prevent repetition as the header is already added to the top of each section.

Anything you'd like to highlight / discuss:

1. Should disabled tabs be printed as well? The current implementation will print out all tabs regardless of whether they are disabled or not.
2. Is the current format of the tab-group fine? Do let me know if this can be improved on.

Testing instructions:

1. Create a few tabs and tab-group

<tabs>
  <tab header="First tab">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla ullamcorper ultrices lobortis.
  </tab>
  <tab header="Second tab">
    Some content of the second tab...
  </tab>
  <tab header="Third tab">
    Additional content from third tab...
  </tab>
  <tab-group header="Example Tab Group">
    <tab header="Tab Group 1">
      Some content in a tab group 1...
    </tab>
    <tab header="Tab Group 2">
      Some content in a tab group 2...
    </tab>
  </tab-group>
</tabs>

2. Print the page
3. All tabs should be shown in the preview

Proposed commit message: (wrap lines at 72 characters)
Support printing of all tabs

Tabs are supposed to contain alternative contents.
Readers can click on each tab to see its content. However,
when a page is printed or converted to PDF, the reader can
only see the content of the active tab.

Let's display all the tabs and its content when it is printed.

---

Checklist: ☑️

• Updated the documentation for feature additions and enhancements
• Added tests for bug fixes or features
• Linked all related issues
• No blatantly unrelated changes
• Pinged someone for a review!

[wxwxwxwx9]

Hi @jonahtanjz thanks for your work on this PR!

Should disabled tabs be printed as well? The current implementation will print out all tabs regardless of whether they are disabled or not.

Actually I don't have a strong opinion of whether it should be printed, because I'm not sure why a tab would be disabled in the first place (can't really think of a use-case). So I think for brevity sake, I'm alright with them being printed. Since if the user wants to show the tab to the viewers in the first place (although disabled), the user probably wants the viewer to be aware of the tab's existence so I think it makes sense for the disabled tab to appear in the print.

Is the current format of the tab-group fine? Do let me know if this can be improved on.

I think it looks decent! I think the font bolding for each tab's header and the underlining of the tab group header makes sense. I didn't have any trouble discerning between tab groups and tabs, and their respective content. Seems quite clear to me.

Overall everything looks good to me, just have some suggestions on how to make things a little more succinct using bootstrap's display utilities.

The implementation seems to be working well. Good job! :-)

[damithc]

@jonahtanjz can provide some screenshots for the feature in action?

[wxwxwxwx9]

@damithc posting on behalf of @jonahtanjz since I still have the page open.

Web view

Print view

[damithc]

Thanks for the screenshots @wxwxwxwx9
Is it possible to style the content to show each as a single tab? So that the reader can immediately recognize these as tabs being spread out.

[jonahtanjz]

Overall everything looks good to me, just have some suggestions on how to make things a little more succinct using bootstrap's display utilities.

Thanks @wxwxwxwx9 for the review and posting the screenshots 👍 Yup, agree that using bootstrap's display utilities will make things more succinct. Will make the changes accordingly :)

Is it possible to style the content to show each as a single tab? So that the reader can immediately recognize these as tabs being spread out.

I think it's possible to do it for normal tabs but I'm not very sure if this format will work well with tab groups. Maybe for tab groups we can keep the current formatting with the box but each of the tabs will be displayed as a single tab inside the box. What do you think about this @damithc?

[damithc]

I think it's possible to do it for normal tabs but I'm not very sure if this format will work well with tab groups. Maybe for tab groups we can keep the current formatting with the box but each of the tabs will be displayed as a single tab inside the box. What do you think about this @damithc?

Need to see how it looks. The goal is to visually indicate to the reader that the content came from separate tabs, as there was a reason for them to be in tabs in the first place (most likely because they were alternatives) and that additional information should be preserved if possible.

[jonahtanjz]

Need to see how it looks.

I've come up with something like this. Using the same example from the screenshot provided above, each of the tab will be displayed as a single tab inside a box so that reader can recognize that all these are part of the same set of tabs. Tab groups will further have another box with the header underlined.

[damithc]

I've come up with something like this. Using the same example from the screenshot provided above, each of the tab will be displayed as a single tab inside a box so that reader can recognize that all these are part of the same set of tabs. Tab groups will further have another box with the header underlined.

Looks good @jonahtanjz I don't think the tab group font should be bigger than the top level tab names, to preserve the hierarchy.

[jonahtanjz]

I don't think the tab group font should be bigger than the top level tab names, to preserve the hierarchy.

Alright noted. I have changed the font size to match with the rest of the headers :)

[ang-zeyu]

Thanks!

Just one question: could we merge this with the existing header below? similar to what you did for TabGroup

[jonahtanjz]

Yup it's possible. Thanks for the suggestion and I've made the changes accordingly :)

[ang-zeyu]

Lgtm 👍