How to use field wrappers for inline edit

[pjmuller]

Feature

I added inline edit feature but in a dirty way, I believe that I can do it better via https://docs.avohq.io/3.0/field-wrappers.html but can't connect the dots yet.

See https://www.loom.com/share/179e5d4f3a914879b09f6dd29be33698

Current workarounds

I'm adding the html in the name part of a field via a block, and then aligning it to the right

field :foobar, as: :text, name: -> {
  path, data = Avo::Actions::SingleEdit.link_arguments(resource: resource)
  ActionController::Base.helpers.content_tag(:span, "my field") +
                   ActionController::Base.helpers.link_to('✎', path,
                                                          data: data,
                                                          class: 'ml-auto',
                                                          style: 'position: absolute; right: 1.5rem')
}

and styling

[data-slot="label"] a {
  position: absolute;
  right: 1.5rem;  /* 24px, matching the parent's padding-x of 6 */
  top: 50%;
  transform: translateY(-50%);
  z-index: 1;
}

[Paul-Bob]

Hi @pjmuller. Field wrapper extra "it's there just to fill some horizontal space so the content doesn't span to the whole width".

It is not a slot where you can pass custom content to be rendered.

Even if hacky, interesting workaround that you have there, is it behaving wrong in any scenario?

[adrianthedev]

You should polish and PR some of these changes into Avo 🙌

[github-actions]

This issue has been marked as stale because there was no activity for the past 15 days.