Support opt-out of printing certain tabs #1612

jonahtanjz · 2021-06-28T15:50:55Z

What is the purpose of this pull request?

Overview of changes:
Resolves #1605.

Allow using of bootstrap display property class="d-print-none" to <tabs>, <tab-group> and <tab> which will exclude the entire tab, tab group or single tab respectively during printing. Remove usages of !important from these components to allow for overriding.

Anything you'd like to highlight / discuss:
NIL

Testing instructions:

Create tab with d-print-none class

<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" class="d-print-none">
    Additional content from third tab...
  </tab>
  <tab-group header="Example Tab Group" class="d-print-none">
    <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>

Print the page
Third tab and Example Tab Group should be excluded from the print preview

Proposed commit message: (wrap lines at 72 characters)
Support opt-out of printing certain tabs

Users may want to omit some tabs when printing.

Let's remove usages of !important in tabs so that
users are able to specify which tab components
to omit when printing using bootstrap's display
property.

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!

raysonkoh

LGTM! Have tested with some small examples and verified that it is working as intended.

Thanks @jonahtanjz!

damithc · 2021-07-04T15:49:12Z

@MarkBind/active-devs let's do a release after this PR is merged.

jonahtanjz · 2021-07-04T15:53:16Z

There's some changes to the implementation as discussed here #1605 (comment) @raysonkoh, this PR is not yet updated.

Prof @damithc, I will most likely make the changes and update the PR by tomorrow night!

damithc · 2021-07-04T16:15:14Z

Prof @damithc, I will most likely make the changes and update the PR by tomorrow night

Got it. Thanks @jonahtanjz

jonahtanjz · 2021-07-07T06:47:52Z

@ang-zeyu Noticed that we can't really remove the current usages of !important as discussed #1605 (comment). Should we go with the implementation in this PR?

jonahtanjz · 2021-07-08T14:18:36Z

@ang-zeyu Thanks for the suggestion 👍

Have changed v-show and d-print-block/flex to our own custom classes. Needed to add them individually to tab-group and tab so that we can increase the specificity from there. no-print is added to the global css file with !important so that it can be reused by other components as well once we have changed out all the other usages of !important.

ang-zeyu · 2021-07-09T14:38:17Z

packages/vue-components/src/TabGroup.vue

            text-decoration: underline;
        }
+
+        .printable-tab-group-header.tab-group-print-block {


@ang-zeyu Thanks for the suggestion 👍

Have changed v-show and d-print-block/flex to our own custom classes. Needed to add them individually to tab-group and tab so that we can increase the specificity from there. no-print is added to the global css file with !important so that it can be reused by other components as well once we have changed out all the other usages of !important.

hmm... not sure I follow, what's the addition tab-group-print-block for? (the variants in tab.vue as well)

Ahh seems like css that appear the latest will take effect anyway if same level of specificity. Initially added the tab-group-print-block so that it can help with increasing the specificity over the dispaly: none rules to ensure that it is always overriding it.

Ahh seems like css that appear the latest will take effect anyway if same level of specificity.

yes, one of the main reasons its named cascading style sheets. Let's remove it then!

ang-zeyu · 2021-07-09T14:39:45Z

packages/vue-components/src/Tab.vue

        margin: 0;
    }

+    .tab-pane.hide {


would tab-pane-hide work instead? To avoid adding empty classes below to increase the specificity

Seems like there is a css rule in bootstrap, .tab-content > .active, that is more specific than .tab-pane-hide. We can also override that by using .tab-content > .tab-pane-hide in our scoped css but that would mean having to add .tab-content > .printable-tab-pane in the print rule as well. Should we go with this as this doesn't seem to resolve the empty classes issue?

How about using <style scoped>? It adds data-****** attributes under the hood and may be sufficient to override .tab-content > .active's specificity.

Thanks this works 👍 I've updated the PR accordingly.

ang-zeyu

Lgtm 👍. Thanks for accomodating the various change requests here!

jonahtanjz changed the title ~~Add no-print attribute to tab~~ Support opt-out of printing certain tabs Jun 28, 2021

raysonkoh approved these changes Jul 4, 2021

View reviewed changes

raysonkoh added this to the v3.0.4 milestone Jul 4, 2021

jonahtanjz and others added 2 commits July 8, 2021 21:01

Add no-print attribute to tab

5c83335

Update css and classes to accomodate no-print

22089d0

jonahtanjz force-pushed the add-print-opt-out-for-tabs branch from a0baf0d to 22089d0 Compare July 8, 2021 14:13

ang-zeyu self-requested a review July 8, 2021 15:24

ang-zeyu reviewed Jul 9, 2021

View reviewed changes

jonahtanjz added 2 commits July 10, 2021 11:14

Update accprding to review

98c664f

Update to scoped styling

5666d92

ang-zeyu approved these changes Jul 17, 2021

View reviewed changes

ang-zeyu modified the milestones: v3.0.4, v3.0.5 Jul 17, 2021

ang-zeyu merged commit 1062bf1 into MarkBind:master Jul 17, 2021

Support opt-out of printing certain tabs #1612

Support opt-out of printing certain tabs #1612

Uh oh!

Conversation

jonahtanjz commented Jun 28, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

raysonkoh left a comment

Choose a reason for hiding this comment

Uh oh!

damithc commented Jul 4, 2021

Uh oh!

jonahtanjz commented Jul 4, 2021

Uh oh!

damithc commented Jul 4, 2021

Uh oh!

jonahtanjz commented Jul 7, 2021

Uh oh!

jonahtanjz commented Jul 8, 2021

Uh oh!

ang-zeyu Jul 9, 2021

Choose a reason for hiding this comment

Uh oh!

jonahtanjz Jul 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ang-zeyu Jul 17, 2021

Choose a reason for hiding this comment

Uh oh!

ang-zeyu Jul 9, 2021

Choose a reason for hiding this comment

Uh oh!

jonahtanjz Jul 9, 2021 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

ang-zeyu Jul 17, 2021

Choose a reason for hiding this comment

Uh oh!

jonahtanjz Jul 17, 2021

Choose a reason for hiding this comment

Uh oh!

ang-zeyu left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

jonahtanjz commented Jun 28, 2021 •

edited

Loading

jonahtanjz Jul 9, 2021 •

edited

Loading

jonahtanjz Jul 9, 2021 •

edited

Loading