fix(list, list-item, list-item-group): honor hidden attribute on list-item and list-item-group

[driskull]

Related Issue: #8539

Summary

• Adds internal filterHidden property to list-item and list-item-group
  • This property is used to hide an item when it is filtered out instead of the native hidden attribute
  • This allows the hidden attribute to be set by an end user
• Renames internal vars
• Adds screenshot tests
• Add e2e tests
• Added a developer discussion topic to consider not modifying global hidden attribute on host elements.

[driskull]

These other components modify the hidden attribute of host elements:

src/components/combobox/combobox.tsx:
  1041          const hidden = !find(item, filteredData);
  1042:         item.hidden = hidden;
  1043          const [parent, grandparent] = item.ancestors;

  1045          if (find(parent, filteredData) || find(grandparent, filteredData)) {
  1046:           item.hidden = false;
  1047          }

  1049          if (!hidden) {
  1050:           item.ancestors.forEach((ancestor) => (ancestor.hidden = false));
  1051          }

src/components/flow/flow.tsx:
  164          itemNode.showBackButton = itemNode === activeItem && newItemCount > 1;
  165:         itemNode.hidden = itemNode !== activeItem;
  166        });

src/components/stepper/stepper.tsx:
  412          if (index !== activePosition) {
  413:           item.hidden = true;
  414          } else {
  415:           item.hidden = false;
  416            item.multipleViewMode = false;

  426        this.items.forEach((item: HTMLCalciteStepperItemElement) => {
  427:         item.hidden = false;
  428          item.multipleViewMode = true;

src/components/table/table.tsx:
  355        const inView = rowPos >= this.pageStartRow && rowPos < this.pageStartRow + this.pageSize;
  356:       row.hidden = this.pageSize > 0 && !inView && !this.footRows.includes(row);
  357        row.lastVisibleRow =

src/components/tip-manager/tip-manager.tsx:
  201        tip.selected = isSelected;
  202:       tip.hidden = !isSelected;
  203      });

[jcfranco]

Nice! I like this approach very much since it frees up hidden for developers. Naming-wise, maybe filtered would avoid reading the prop as affecting a filter in the component?

I think we could extend this to other filtering components once we add a convention, and possibly some shareable utils, for it.

[driskull]

Nice! I like this approach very much since it frees up hidden for developers. Naming-wise, maybe filtered would avoid reading the prop as affecting a filter in the component?

Wouldn't filtered mean visible though?

[driskull]

Added issue: #8623