1732 - non-fixed style tabs with scrolling

[KaneFreeman]

Type: feature

The following has been addressed in the PR:

• There is a related issue
• All code matches the style guide
• Unit tests are included in the PR
• For new widgets, an entry has been added to the .dojorc
• For new widgets, theme.variant() is added to the root domnode
• Any widget variant uses theme.compose like this
• WidgetProperties are exported

Description:

• Add variable width tab style
• Add new fixed property to toggle between the two styles
• Make tables scrollable when in variable width mode

Resolves #1732

[vercel]

This pull request is being automatically deployed with Vercel (learn more).
To see the status of your deployments, click below or on the icon next to each commit.

widget-test-docs – ./

🔍 Inspect: https://vercel.com/dojo/widget-test-docs/9qczevn4naRCysFf2xGQmPbptRAf
✅ Preview: https://widget-test-do-git-fork-kanefreeman-feature-1732-non-fix-b98c33.vercel.app

dojo.widgets – ./

🔍 Inspect: https://vercel.com/dojo/dojo.widgets/Dk2NicCmjhVpvgJGMNmWdbRbXKJp
✅ Preview: https://dojowidgets-git-fork-kanefreeman-feature-1732-non-fix-f81a2c.vercel.app

[codecov]

Codecov Report

Merging #1747 (6db473f) into master (d543a3f) will increase coverage by 0.03%.
The diff coverage is 100.00%.

@@            Coverage Diff             @@
##           master    #1747      +/-   ##
==========================================
+ Coverage   90.43%   90.46%   +0.03%     
==========================================
  Files          94       94              
  Lines        5143     5152       +9     
  Branches     1403     1406       +3     
==========================================
+ Hits         4651     4661      +10     
  Misses        241      241              
+ Partials      251      250       -1     

Impacted Files	Coverage Δ
src/tab-container/index.tsx	90.56% <100.00%> (+0.87%)	⬆️
src/middleware/offscreen.ts	100.00% <0.00%> (+6.25%)	⬆️

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update d543a3f...6db473f. Read the comment docs.

[agubler]

@KaneFreeman we have a middleware (https://github.com/dojo/widgets/blob/master/src/middleware/offscreen.ts) that can be used for offscreen rendering in order to calculate dimensions call offscreen, also I think we can leverage the getOrSet icache api to make it a bit neater. I think something like this will work:

const horizontalScrollbarHeight  = icache.getOrSet('horizontalScrollbarHeight', () => {
    return offscreen(
        () => <div classes={[themeCss.scrollTest]}/>,
        (node) => node.offsetHeight - node.clientHeight
    );
});

Also I don't think the class themeTest should be a themeable class, probably should be a fixed class, which means we'll need to add a new css file for the tab-container.

[agubler]

Caveat I haven't tried it, but I think it should work.