Code Action: Add missing Stimulus CSS Class to `static classes` array on Controller
Opened this issue · 0 comments
marcoroth commented
This depends on #165
Given this controller:
// app/javascript/controllers/search_controller.js
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
static classes = ["loaded"]
}
and this HTML, it givens you the following diagnostic. We can implement a Code-Action to add the missing Stimulus CSS Class to the controller:
<form data-controller="search" data-search-loading-class="search--busy"></form>
<!-- ^^^^^^^
┌────────────────────────────────────────────────────────────────────────────────────────────────┐
│ "loading" isn't a valid Stimulus CSS Class on the "search" controller. Did you mean "loaded"? │
│ Stimulus LSP (stimulus.controller.class.missing) │
├────────────────────────────────────────────────────────────────────────────────────────────────┤
│ View Problem (⌥F8) Quick-Fix... (⌘.) │
└────────────────────────────────────────────────────────────────────────────────────────────────┘
┌────────────────────────────────────────────────────────────────┐
│ Quick-Fix │
├────────────────────────────────────────────────────────────────┤
│ Add "loading" Stimulus CSS class to the "search" controller. │
└────────────────────────────────────────────────────────────────┘
Executing that action would update the controller accordingly and resolve the diagnostic:
import { Controller } from "@hotwired/stimulus"
export default class extends Controller {
- static classes = ["loaded"]
+ static classes = ["loaded", "loading"]
}