Share: What I'm building with the new Polaris Web Components

Polaris
23

How did you succeed to close the s-menu?
I have this snippet, however, the s-menu is not closed after the button is clicked.

<s-button variant="tertiary" commandFor="responsive_selector" icon="mobile">{selected_device}</s-button>
<s-menu id="responsive_selector" accessibilityLabel="Select Device">
        <s-button  onclick={(e) => { e.preventDefault(); changeDevice('mobile'); } }  icon="mobile">Mobile</s-button>
        <s-button  onclick={(e) => { e.preventDefault(); changeDevice('desktop'); } }  icon="desktop">Desktop</s-button>
</s-menu>

Thnak you!

24

I was able to close the s-menu by dispatching a click event on the body.

  function closeMenu() {
    const clickEvent = new MouseEvent('click', { bubbles: true, cancelable: true, view: window });
    document.body.dispatchEvent(clickEvent);
  }
25

That’s one way of doing it, yea. The way I’ve been leaning towards is having a ref on the cancel/close button and then .click() on that.

26

@Alan_G Hi, Any updates on bulk actions and row selection for the s-table component? I want to achieve something similar to what I had with IndexTable & IndexFilters, but it seems like there are still a lot of features missing on the web components :frowning: .

Missing things:

  1. Bulk actions (which replace s-table-header-row content);
  2. Row selection;
  3. The first column remains the same width as the screen shrinks (all other columns become horizontally scrollable)
  4. Index filters: tabs, search bar, sorting (can be achieved manually, but would be great to have a web-component as well)