The latest update seems to have broken the primary button on modals
To repro
<s-button
slot="secondary-actions"
icon="delete"
tone="critical"
accessibilityLabel="Delete rule"
commandFor="delete-rule-modal"
command="--show"
/>
<s-modal id="delete-rule-modal" heading="Delete rule">
<s-text>
Are you sure you want to delete this rule? This action cannot be
undone.
</s-text>
<s-button
slot="primary-action"
variant="primary"
tone="critical"
commandFor="delete-rule-modal"
command="--hide"
onClick={confirmDelete}
>
Delete
</s-button>
<s-button
slot="secondary-actions"
variant="secondary"
commandFor="delete-rule-modal"
command="--hide"
onClick={cancelDelete}
>
Cancel
</s-button>
</s-modal>
Only “Cancel” appears and in the console log it says “Only Button elements with a variant of primary are allowed in the primary-action slot.“
Note: in the codepen it worked as expected but I have confirmed this on two apps and from users
Hmm strange. As you mentioned, it works fine in the codepen. https://codepen.io/afrehner/pen/GgNRBNQ?editors=1010
What do your actual dom look like through browser devtools? Is there a chance that there’s some attributes being removed or something?
If I change the slot to secondary-actions and variant to secondary then it works so I’m guessing it’s an issue with primary-slot and or variant=primary on the button
While I dig into this, I have a side question:
Are you using SSR / RSC / lazy-loading the route that renders the modal?
there is all sorts in this new version going wrong with slots when elements are rendered as part of a hide/show in react components. if the component is visible first load, everything is right, but hide/show e.g. in a collapse container, then the slots aren’t re-rendered. so e.g. all buttons in a button group just simply disappear. I’m talking about client-side only code here. not server components.
Interesting, thanks! Do you have a reproduction to look at? A codesandbox or something?
My modal broke as well in the new update.
<s-modal id={modalId} heading={t("variants.table.pricingStrategy.adjust")} padding="none">
...
<s-button
slot="secondary-actions"
variant="secondary"
commandFor={modalId}
command="--hide"
>
{t("variants.table.pricingStrategy.cancel")}
</s-button>
<s-button
slot="secondary-actions"
variant="secondary"
onClick={handleTest}
disabled={!isFormValid || !selectedStrategyId || !idealoListingId}
>
{t("variants.table.pricingStrategy.test")}
</s-button>
<s-button
slot="secondary-actions"
variant="secondary"
onClick={handleCreateTemplate}
disabled={!isFormValid || !selectedStrategyId}
>
{t("variants.table.pricingStrategy.createTemplate", {
defaultValue: "Create template",
})}
</s-button>
<s-button
slot="primary-action"
variant="primary"
commandFor={modalId}
command="--hide"
onClick={handleSave}
disabled={!isFormValid}
>
{t("variants.table.pricingStrategy.save")}
</s-button>
</s-modal>
I would like to do a rollback, but first I really need a reproduction example – otherwise I won’t be able to debug as easily.
ok was able to replicate the button not appearing in Stackblitz since codesandbox is down. https://stackblitz.com/edit/react-playground-practice-gsdlfywr?file=index.js
I’ll start a rollback now
So, the changelog you recently posted is not valid anymore? It’s getting hard to keep track of the status.
hey Anthony, thanks for looking at this.
your stack blitz actually worked fine for me! and I can’t get any codepen, sandbox or anytihng like that to reproduce it been trying for an hour or so, despite it still going wrong every time in my app. something very weird is going on in the way it hooks into react lifecycle events I think
Hm yeah super weird. It’s also weird because we use React internally to render our components as well, so you would think that we would see this internally first (especially since, as noted in the changelog, we soak it ourselves before releasing to the CDN now).
But I’ll dig into it and see what I can find. Thanks for your patience.
can confirm that my app is now no longer showing the failed behaviour as soon as the rolled back version was downloaded
is there a way we can get notified in advance before you make changes to web components like we get for the API? its kind of a big deal if a stealth change we never hear about breaks every UI we have across our app catalog.
@gruntlord6 There is currently no way. App devs really need to able to lock a specific version, see: How can we lock the version of Polaris Web Components loaded from the CDN?
Oh I know, I was requesting it from them since shopify does this for API changes and even emails you if your app will break.
