Skip to main content

View trees

Two view trees ship, and you pick one in configuration.

Plain (the default) is framework-free: one small stylesheet, no Tailwind, no build step. @include('visual-feedback::style') in your layout is all it needs, and every color is a --vf-* custom property you can override to match your app.

WireKit renders the same widget with WireKit components, so it inherits your design tokens. Choose it with one key:

// config/visual-feedback.php
'ui' => [
    'variant' => 'wirekit',   // auto | plain | wirekit
],

Or leave it at the shipped auto, which serves the WireKit tree when a new enough WireKit is installed and the framework-free tree when it is not — so an application that has WireKit gets the token-styled widget without configuring anything.

With the WireKit tree you do not include the plain stylesheet, and you no longer have to remember that: visual-feedback::style renders nothing while that tree is being served.

The visual-feedback-wirekit publish tag still exists and still overwrites the plain stubs, which is why it is not part of the umbrella tag. Its job is different now, and smaller: publish when you want to EDIT these templates. Publishing to merely SELECT the tree meant keeping a copy of them in your application, and a copy is what package updates leave behind.

Three practical notes, none of which is guessable from the tag name:

  • WireKit has to be installed. This package does not require it — it is a suggest, so a lean install never drags a component library in — and the published views render real <x-wirekit::modal>, <x-wirekit::card> and <x-wirekit::fab.button> tags. Publish this tree without the package and every page carrying the widget throws on the first tag.
  • Nothing else in the layout changes. @livewire('visual-feedback.report-widget') and <x-visual-feedback::scripts /> stay exactly as they are; the capture bundle is shared by both trees. Only the @include('visual-feedback::style') line goes.
  • To switch back, delete the published widget views under resources/views/vendor/visual-feedback/ and publish visual-feedback-views again. There is no un-publish command, in this package or in Laravel.
WireKit 2.21 or newer

A floor, not a preference. The WireKit tree builds its floating trigger from <x-wirekit::fab.button>, using the placement prop and the accessible-name path that release introduced. On an older WireKit the trigger lands in the wrong corner and announces nothing to a screen reader — and because the tree is published into your application, nothing at install time can stop you. Check the installed version.

Two things read differently in this tree, both deliberate:

  • The trigger is an icon button, where the plain tree's is a text button. That is the point of the tree — it looks like your design system. Its accessible name is the widget heading either way.
  • ui.position is logical here. bottom-right follows the writing direction, so a right-to-left application mirrors it; the plain tree keeps the physical reading. In any left-to-right application the two agree exactly.