GAUD-7147: Flag removal of old tabs structure#6948
Conversation
|
Thanks for the PR! 🎉 We've deployed an automatic preview for this PR - you can see your changes here:
Note The build needs to finish before your changes are deployed. |
| expect(el.querySelector('#all-panel').getAttribute('aria-labelledby')).to.equal('all'); | ||
| }); | ||
|
|
||
| describe('flag off', () => { |
There was a problem hiding this comment.
I kept a few tests for the case where the flag is off but the new structure should still work.
There was a problem hiding this comment.
Probably easier to review with Hide Whitespace
|
|
||
| describe('events', () => { | ||
|
|
||
| // remove after d2l-tab/d2l-tab-panel backport |
There was a problem hiding this comment.
These were moved to a separate section.
| */ | ||
| text: { type: String } | ||
| text: { type: String }, | ||
| _selected: { type: Boolean, attribute: '_selected', reflect: true } |
There was a problem hiding this comment.
Switched to an "internal" property (it's used in the css) since we wanted selection set on the tab and not the panel. Let me know if alternative ideas for this.
| * Remove this._defaultSlotBehavior and related code with GAUD-8299-core-tabs-use-new-structure flag clean up | ||
| * NOTE: remove the TRUE case of _defaultSlotBehavior | ||
| */ | ||
| this._defaultSlotBehavior = !this.#newTabsPanelStructure; |
There was a problem hiding this comment.
_defaultSlotBehavior = use the default slot (old) rather than the tab and panels slots ("new"); we don't want to enable it at all if the flag is on.
| role="tablist" | ||
| style="${styleMap(tabsContainerListStyles)}"> | ||
| ${repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html` | ||
| ${!this.#newTabsPanelStructure ? repeat(this._tabInfos, (tabInfo) => tabInfo.id, (tabInfo) => html` |
There was a problem hiding this comment.
I gated some things with the flag to ensure clean-up-ability
| } | ||
|
|
||
| // remove after d2l-tab/d2l-tab-panel backport | ||
| // remove with GAUD-8299-core-tabs-use-new-structure flag clean up |
There was a problem hiding this comment.
updated the comments for easier flag search clean up
| if (this._state === 'shown' && tabs.length < 2) { | ||
| this.#hideTabsList(); | ||
| } else if (this._state === 'hidden' && tabs.length > 1) { | ||
| this.#showTabsList(); | ||
| } else if (this._state === 'shown' && tabs.length > 1) { | ||
| // check if there are hidden tabs and tab list container should actually be hidden | ||
| this.#handleTabHiddenChange(); | ||
| } |
There was a problem hiding this comment.
This is the same as before, just renames panels to tabs.
Made the change from the comment above the function behind the flag in case there's an issue.
Can pull this into a separate PR if that would be preferred.
| const selectedPanel = this._getPanel(selectedTab.id); | ||
| if (selectedPanel) selectedPanel.selected = true; | ||
| if (selectedPanel) { | ||
| if (this.#newTabsPanelStructure) selectedPanel._selected = true; |
There was a problem hiding this comment.
Switches to use panel's "internal" _selected instead
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
1 participant
GAUD-7147
Generally in tabs.js we could rely on setting
_defaultSlotBehaviorbased on the flag, and then if the flag was false then it would never use the old behaviour. There are a couple things I hid behind the flag as well to ensure we can clean them up.TODO: