Discuss the resource details layout pattern

[johanstromqvist]

Welcome to the resource details layout pattern discussion!

Here are some things you can do here:

💡 Share ideas on how to make this pattern, or its documentation, better.

❓ Ask a specific question about this pattern.

---

Tips before posting:

• Remember Polaris and our discussions are public. If you work for Shopify and have an externally sensitive topic, please reach out in #polaris in Slack
• Please report bugs here
• Contributions are always welcome
• Learn more about Polaris discussions

💜👩‍🚀✌️ the Polaris team

[themarkappleby]

What if this existed as its own component and looked something like...

<ResourceDetailsLayout
    title="Product"
    breadcrumbs={[{ content: "Products", url: "/products" }]}
    secondaryActions={[
        {
            content: "Duplicate",
            icon: DuplicateMinor,
            accessibilityLabel: "Secondary action label",
            onAction: () => alert("Duplicate action"),
        },
        {
            content: "Archive",
            icon: ArchiveMinor,
            accessibilityLabel: "Secondary action label",
            onAction: () => alert("Archive action"),
        },
        {
            content: "Delete",
            icon: DeleteMinor,
            destructive: true,
            accessibilityLabel: "Secondary action label",
            onAction: () => alert("Delete action"),
        },
    ]}
    pagination={{
        hasPrevious: true,
        hasNext: true,
    }}
    mainContent={
        <>
            <AlphaCard roundedAbove="sm">
                <SkeletonDisplayText size="small" />
            </AlphaCard>
            <AlphaCard roundedAbove="sm">
                <SkeletonDisplayText size="small" />
            </AlphaCard>
        </>
    }
    secondaryContent={
        <>
            <AlphaCard roundedAbove="sm">
                <SkeletonDisplayText size="small" />
            </AlphaCard>
            <AlphaCard roundedAbove="sm">
                <SkeletonDisplayText size="small" />
            </AlphaCard>
        </>
    }
/>

With this approach, layout details like the space between cards, the space between columns, and at what screen size columns should stack, become implementation details of the ResourceDetailsLayout component. By moving these spacing and layout concerns into the internals of the component, developers implementing this pattern will have less boilerplate code to wrangle and there would be increased consistency with regards to this pattern manifesting in the wild.

[javmah]

long table Broke this layout, Table lost the horizontal scrolling, and the UI changed to table size.

<HorizontalGrid columns={{ xs: 1, md: "2fr 1fr" }} gap="4">
     <VerticalStack gap="4">
                <Card>
                        <IndexTable
                            resourceName={resourceName}
                            itemCount={orders.length}
                            headings={[
                            {title: 'Order'},
                            {title: 'Date'},
                            {title: 'Customer'},
                            {title: 'Total', alignment: 'end'},
                            {title: 'Payment status'},
                            {title: 'Fulfillment status'},
                            {title: 'Let\' see '},
                            {title: 'Nop'},
                            {title: 'Yep'},
                            {title: 'lack of motivation'},
                            {title: 'Change the mindset'},
                            ]}
                            selectable={false}
                        >
                            {rowMarkup}
                        </IndexTable>
                    </Card>
     </VerticalStack
</HorizontalGrid>

[johanstromqvist]

Hi @javmah! The pattern docs are intended to show what experiences merchants typically expect when doing common Admin activities. The code examples are currently just examples and not copy/pastable code, as called out in the code comment. This is due to a technical constraint that we intend to fix.

If you think you've come across a component bug, please create a component bug report.

[m20io]

Hi there,

I wonder about the <Page /> and <TitleBar /> usage. This pattern shows the usage with the page component and not the app bridge TitleBar.

There is a recommendation to use the <TitleBar /> instead of the <Page /> actions.

https://shopify.dev/docs/api/app-bridge/previous-versions/actions/titlebar#using-titlebar-with-polaris

And a question was asked with the same answer.
#8648

Will this pattern stand like this, or will this change soon?

This may have already been clarified somewhere, but I could not find a defined answer.

[johanstromqvist]

Thanks for reaching out, Martin! Great observation.

The short answer is: Please refer to the guidelines on shopify.dev.

The slightly longer answer is that the pattern guidelines show what experience merchants are familiar with in a non-app experience. We are aware that this is unclear and can lead to a frustrating developer experience, so we're committed to rectify this. We appreciate your patience while we do.