search

christianblais / triggerify

When X, if Y, do Z - Powerful event pipeline for your Shopify store
32 stars 8 forks source link

Fix UI bug #120

Closed christianblais closed 2 years ago

christianblais commented 2 years ago

Fixes a bug where Polaris cards would stick to each other when they should definitely be separated.

Screen Shot 2022-03-01 at 10 27 48 PM

The problem stems from a mix between fields_for and Polaris. For cards to be separated, Polaris expects them to be next to each other in the DOM, with this CSS snippet. The + sign here meaning adjacent siblings.

Screen Shot 2022-03-01 at 10 28 59 PM

Unfortunately, when using fields_for in Rails, it injects a hidden id field at the very end of the block, which means that if we do;

3.times do
  form.fields_for :foo, :bar do
    <Polaris.Card>
  end
end

We'll actually end up with;

<Card>
<input type="hidden" name="id" value="1">
<Card>
<input type="hidden" name="id" value="2">
<Card>
<input type="hidden" name="id" value="3">

Meaning the CSS selector won't kick in. With this PR, I'm tweaking the way we generate the fields as to extract the Polaris card out of it, so that the inserted ID doesn't mess things up. There probably would have been a better way, but it's late...

Best reviewed with w=1.

christianblais commented 2 years ago

@tjoyal