Hey,
I’m trying to replicate the customer segment picker modal. I’ve been using the new Polaris web components where possible.
If I conditionally render a Polaris web component it doesn’t seem to mount properly so loses all of its slot/styling.
The components is effectively something like this:
export function CustomerSegmentPickerModal () {
const fetcher = useFetcher()
return (
<s-box>
<Scrollable>
{typeof fetcher.data !== "undefined" && fetcher.data.segments.length > 0 && (
<s-box>
{fetcher.data.segments.map(segment => {
return (
<s-clickable
key={segment.id}
inlineSize="100%"
onClick={() => {
setDraftSelectedCustomerSegments(draftSelectedCustomerSegments => {
if (draftSelectedCustomerSegments.some(draftSegment => draftSegment.id === segment.id)) {
return draftSelectedCustomerSegments.filter(draftSegment => draftSegment.id !== segment.id);
}
return [
...draftSelectedCustomerSegments,
segment,
];
});
}}
>
<s-box
padding="small-200 base"
borderWidth="none none base none"
borderColor="subdued"
>
<InlineStack wrap={false} gap="300">
<Checkbox
label={segment.name}
labelHidden
checked={draftSelectedCustomerSegments.some(draftSegment => draftSegment.id === segment.id)}
/>
<Text as="p">{segment.name}</Text>
</InlineStack>
</s-box>
</s-clickable>
);
})}
</s-box>
)}
{typeof fetcher.data !== "undefined" && fetcher.data.segments.length === 0 && query !== "" && (
<s-box padding="base" inlineSize="100%">
<Text as="p" tone="subdued">No results found for "<Text as="span" tone="base">{query}</Text>"</Text>
</s-box>
)}
</Scrollable>
</s-box>
)
}
On mount:
After search:
After clearing search:
