vwc-expansion-panel / vwc-expansion-panel-list

[JoelGraham93]

Topic 1

<vwc-expansion-panel-list>
  <vwc-expansion-panel header="Item 1" open>Some content</vwc-expansion-panel>
  <vwc-expansion-panel header="Item 2" open>Some content</vwc-expansion-panel>
  <vwc-expansion-panel header="Item 3" open>Some content</vwc-expansion-panel>
</vwc-expansion-panel-list>

There are scenarios where a page may require all expansion panels to be open on render.
Currently vwc-expansion-panel supports an open attribute which can be placed on each item.
Alternatively we could also expose an openAll prop on vwc-expansion-panel-list, but this could be a conflict.

Topic 2

<vwc-expansion-panel header="Item 1">Some content</vwc-expansion-panel>
<vwc-expansion-panel header="Item 1" chevronToggle>Some content</vwc-expansion-panel>

By design our default toggle icons for expansion panel are +/-

We also have a requirement to support chevron toggles

currently chevronToggle boolean is being used. we don't have designs of more toggle types but maybe a string toggleIcon might be useful.
Please comment your thoughts on suitable prop names.

mwc-tabs have an indicatorIcon prop that takes an icon and layers over the tab icon when active, rather than placing a line below. Slightly different use case but dropping here too for ideas.

indicatoricon="donut_large"

[yinonov]

more issues noticed

• icon property overrides the indicator button unless setting trailingToggle attribute

Expansion panel list PR can be found here

[JoelGraham93]

addressed in commit 040a733

[k-paxian]

I would suggest adding capability to lazily render panel content, when opened only. This will save us some performance & issues with other components rendered when panel is closed & need to update/realign/relayout the content when panel is opened.

[yinonov]

sure, considering template and containment. any other suggestions alike? or other ideas?

[yinonov]

added to ticket https://jira.vonage.com/browse/VIV-519

[yinonov]

suggesting spec for part 1 -
openAll seems like a rare case - don't feature. if anyway consumer wants to open all expansion panel it kind of deviates from the purpose of wrapping it with accordion in the 1st place and each expansion panel should be set as open individually.

alternatively it's possible to follow angular's practice with multiple prop but again, not sure why to wrap with accordion...

[JoelGraham93]

Removed openAll in latest commits.

Dev can use alternative suggestion of multi combined with multiple open props if needed.

I think multi is useful on it's own and can be used in navigation scenarios

[yinonov]

part 2 suggestion -
indicator-icon-set="chevron | binary" this enables enhancement at a later point to add more sets

@JoelGraham93
edit: add 'none' to the predefined options

[JoelGraham93]

added suggestion to PR

[yinonov]

I think it makes more sense to default to trailingToggle=true or even better change to 'leadingIcon=false'. This is more common