kiso 0.6.1.pre → 0.6.3.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b28c57b532dc53dad377cca677637615db58881e3109d6a6a5ecbbd1cce5b02e
-  data.tar.gz: eca25e39e3e60d918dac9df9c4bbd2b696c558649bb48d8bc74f156e5171f56b
+  metadata.gz: fc54430908619f2cb1581ca13089cfceb7b9c527f7050a0079cfced84ed088ea
+  data.tar.gz: ea34c1970ff36648de7571bac67bec65cf5a57083a4afb4afe933c89eb27d1b2
 SHA512:
-  metadata.gz: ab5fd9a21f185c579e8fd745b5709915e5e4aa30c2fcc38126c616ecbaa08495dce298997bb247ccc077205f84d82f2b33bb8cff764bfc7ce6a33527396dff8b
-  data.tar.gz: d83b4e694f3559f20c0da252dbb631224fcd23a5514595a8d57f9631dd68a65f79d6377e0594afe4c07968df9330c906b444f9e83a882b82fcf540fbcc364158
+  metadata.gz: '02761138a1d470cec63228c7d3e5ffe2d9d93d271427814059cb6193450492051755bba4514f945c225a669276540b9a6bd223469ec6eb0b05b13ae361ef2601'
+  data.tar.gz: 2bc1f27fc05aa8da6aecf7e3b6eaae668e02afc45caa3636ebc55270738588dd4dc61102554e0cadfe33e99cba0a72a9e4e56decb3094b4646d5955a28e03ca3

data/app/assets/tailwind/kiso/button.css

@@ -1,16 +1,15 @@
 /* ── Button ──────────────────────────────────────────────────────────────────
    Default display value for the Button component.
 
-   Why CSS instead of a Tailwind class?
-   The theme module applies `inline-flex` via Tailwind, but Tailwind utilities
-   live in @layer utilities — the highest-priority layer. That means when JS
-   removes a `hidden` class, the button's `inline-flex` (also in utilities)
-   has no cascade advantage to restore visibility. Placing the default display
-   in @layer components (lower priority) lets utility classes like `hidden`
-   override it naturally, while still restoring inline-flex when `hidden` is
-   removed.
+   Why CSS in addition to the theme class?
+   The theme module includes `inline-flex` so the class string is
+   self-contained (works on link_to, button_to, etc. without data-slot).
+   This @layer components rule provides a lower-priority fallback for
+   kui(:button) elements so that utility classes like `hidden` can override
+   display naturally, restoring inline-flex when `hidden` is removed.
 
-   Fixes: https://github.com/steveclarke/kiso/issues/200 */
+   Fixes: https://github.com/steveclarke/kiso/issues/200
+   See also: https://github.com/steveclarke/kiso/issues/229 */
 
 @layer components {
   [data-slot="button"] {

data/app/javascript/controllers/kiso/button_loading_controller.js

@@ -0,0 +1,120 @@
+import { Controller } from "@hotwired/stimulus"
+
+/**
+ * Automatic loading state for buttons inside Turbo forms.
+ *
+ * When the button's form submits via Turbo, the controller saves the button's
+ * original content, injects an animated spinner SVG, and disables the button.
+ * On `turbo:submit-end`, the original content and state are restored.
+ *
+ * Attach via `data-controller="kiso--button-loading"` on the `<button>` element.
+ * The Button partial adds this automatically when `loading_auto: true`.
+ *
+ * @example
+ *   <form action="/save" method="post" data-turbo="true">
+ *     <button type="submit"
+ *             data-controller="kiso--button-loading"
+ *             data-slot="button"
+ *             class="...">
+ *       Save
+ *     </button>
+ *   </form>
+ *
+ * @fires kiso--button-loading:loading - When the button enters loading state
+ * @fires kiso--button-loading:complete - When the button exits loading state
+ */
+export default class extends Controller {
+  connect() {
+    this._form = this.element.closest("form")
+    if (!this._form) return
+
+    this._handleSubmitStart = this._handleSubmitStart.bind(this)
+    this._handleSubmitEnd = this._handleSubmitEnd.bind(this)
+
+    this._form.addEventListener("turbo:submit-start", this._handleSubmitStart)
+    this._form.addEventListener("turbo:submit-end", this._handleSubmitEnd)
+  }
+
+  disconnect() {
+    if (!this._form) return
+
+    this._form.removeEventListener("turbo:submit-start", this._handleSubmitStart)
+    this._form.removeEventListener("turbo:submit-end", this._handleSubmitEnd)
+    this._restore()
+  }
+
+  /**
+   * Saves original button content and enters loading state.
+   *
+   * @param {CustomEvent} event - turbo:submit-start event
+   * @private
+   */
+  _handleSubmitStart(event) {
+    // Only react if this button triggered the submission
+    if (event.detail?.formSubmission?.submitter !== this.element) return
+
+    this._savedNodes = Array.from(this.element.childNodes).map((n) => n.cloneNode(true))
+    this._wasDisabled = this.element.disabled
+
+    // Create spinner SVG via DOM APIs (safe, no innerHTML)
+    const spinner = document.createElementNS("http://www.w3.org/2000/svg", "svg")
+    spinner.setAttribute("viewBox", "0 0 24 24")
+    spinner.setAttribute("fill", "none")
+    spinner.setAttribute("stroke", "currentColor")
+    spinner.setAttribute("stroke-width", "2")
+    spinner.setAttribute("stroke-linecap", "round")
+    spinner.setAttribute("stroke-linejoin", "round")
+    spinner.setAttribute("class", "animate-spin shrink-0 pointer-events-none size-4")
+
+    const path = document.createElementNS("http://www.w3.org/2000/svg", "path")
+    path.setAttribute("d", "M21 12a9 9 0 1 1-6.219-8.56")
+    spinner.appendChild(path)
+
+    // Replace content: spinner + original text
+    const textContent = this.element.textContent?.trim()
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild)
+    }
+    this.element.appendChild(spinner)
+    if (textContent) {
+      this.element.appendChild(document.createTextNode(` ${textContent}`))
+    }
+
+    this.element.disabled = true
+    this.element.setAttribute("aria-busy", "true")
+
+    this.dispatch("loading")
+  }
+
+  /**
+   * Restores original button content and state on turbo:submit-end.
+   *
+   * @private
+   */
+  _handleSubmitEnd() {
+    this._restore()
+    this.dispatch("complete")
+  }
+
+  /**
+   * Restores the button to its pre-loading state.
+   *
+   * @private
+   */
+  _restore() {
+    if (!this._savedNodes) return
+
+    while (this.element.firstChild) {
+      this.element.removeChild(this.element.firstChild)
+    }
+    for (const node of this._savedNodes) {
+      this.element.appendChild(node)
+    }
+
+    this.element.disabled = this._wasDisabled
+    this.element.removeAttribute("aria-busy")
+
+    this._savedNodes = undefined
+    this._wasDisabled = undefined
+  }
+}

data/app/javascript/controllers/kiso/dropdown_menu_controller.js

@@ -158,7 +158,10 @@ export default class extends Controller {
     if (item.dataset.disabled === "true") return
 
     this.dispatch("select", { detail: { item } })
-    this.close()
+    // Defer close to the next frame so other click handlers on the item
+    // (e.g. dialog triggers, custom actions) complete before the menu
+    // hides and removes elements from view. See #233.
+    requestAnimationFrame(() => this.close())
   }
 
   /**

data/app/javascript/controllers/kiso/index.d.ts

@@ -6,6 +6,7 @@ declare const KisoUi: {
 
 export default KisoUi
 export const KisoAlertController: typeof Controller
+export const KisoButtonLoadingController: typeof Controller
 export const KisoComboboxController: typeof Controller
 export const KisoCommandController: typeof Controller
 export const KisoCommandDialogController: typeof Controller

data/app/javascript/controllers/kiso/index.js

@@ -19,6 +19,7 @@
  */
 
 import KisoAlertController from "./alert_controller.js"
+import KisoButtonLoadingController from "./button_loading_controller.js"
 import KisoComboboxController from "./combobox_controller.js"
 import KisoCommandController from "./command_controller.js"
 import KisoCommandDialogController from "./command_dialog_controller.js"
@@ -43,6 +44,7 @@ const KisoUi = {
    */
   start(application) {
     application.register("kiso--alert", KisoAlertController)
+    application.register("kiso--button-loading", KisoButtonLoadingController)
     application.register("kiso--combobox", KisoComboboxController)
     application.register("kiso--command", KisoCommandController)
     application.register("kiso--command-dialog", KisoCommandDialogController)
@@ -64,6 +66,7 @@ const KisoUi = {
 export default KisoUi
 export {
   KisoAlertController,
+  KisoButtonLoadingController,
   KisoComboboxController,
   KisoCommandController,
   KisoCommandDialogController,

data/app/views/kiso/components/_button.html.erb

@@ -1,14 +1,20 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
              type: :button, href: nil, method: nil, disabled: false,
-             form: {}, css_classes: "", **component_options) %>
+             loading: false, loading_auto: false, form: {}, css_classes: "", **component_options) %>
 <%# Polymorphic button that renders as <button>, <a>, or button_to depending on props.
     With href: renders an anchor tag. With href: + method: (non-GET) renders a Rails
-    button_to form for safe non-GET navigation. Without href: renders a plain <button>. %>
+    button_to form for safe non-GET navigation. Without href: renders a plain <button>.
+    With loading: true, prepends an animated spinner and disables the button.
+    With loading_auto: true, attaches kiso--button-loading Stimulus controller for
+    automatic loading state on Turbo form submissions. %>
 <%
   css = Kiso::Themes::Button.render(
     color: color, variant: variant, size: size, block: block, class: css_classes)
-  data = kiso_prepare_options(component_options, slot: "button")
+  data = kiso_prepare_options(component_options, slot: "button",
+    **(loading_auto ? { controller: "kiso--button-loading" } : {}))
   use_button_to = href.present? && method.present? && method.to_s != "get"
+  is_disabled = disabled || loading
+  component_options[:"aria-busy"] = true if loading
 %>
 <% if use_button_to %>
   <%= button_to href,
@@ -16,21 +22,24 @@
       class: css,
       form_class: "contents",
       data: data,
-      disabled: disabled || nil,
+      disabled: is_disabled || nil,
       form: form.presence,
       **component_options do %>
+    <%= kiso_component_icon(:spinner, class: "animate-spin") if loading %>
     <%= yield %>
   <% end %>
 <% elsif href.present? %>
   <% component_options[:href] = href
-     component_options[:"aria-disabled"] = true if disabled %>
+     component_options[:"aria-disabled"] = true if is_disabled %>
   <%= content_tag :a, class: css, data: data, **component_options do %>
+    <%= kiso_component_icon(:spinner, class: "animate-spin") if loading %>
     <%= yield %>
   <% end %>
 <% else %>
   <% component_options[:type] = type
-     component_options[:disabled] = true if disabled %>
+     component_options[:disabled] = true if is_disabled %>
   <%= content_tag :button, class: css, data: data, **component_options do %>
+    <%= kiso_component_icon(:spinner, class: "animate-spin") if loading %>
     <%= yield %>
   <% end %>
 <% end %>

data/app/views/kiso/components/dropdown_menu/_item.html.erb

@@ -1,15 +1,40 @@
-<%# locals: (variant: :default, inset: false, disabled: false, css_classes: "", **component_options) %>
-<%= content_tag :div,
-    class: Kiso::Themes::DropdownMenuItem.render(variant: variant, class: css_classes),
-    role: "menuitem",
-    tabindex: "-1",
-    data: kiso_prepare_options(component_options, slot: "dropdown-menu-item",
-      kiso__dropdown_menu_target: "item",
-      action: "click->kiso--dropdown-menu#selectItem",
-      inset: (inset ? "" : nil),
-      variant: (variant == :destructive ? "destructive" : nil),
-      disabled: (disabled ? "true" : nil)),
-    aria: {disabled: (disabled || nil)},
-    **component_options do %>
-  <%= yield %>
+<%# locals: (variant: :default, inset: false, disabled: false,
+             href: nil, method: nil, form: {},
+             css_classes: "", **component_options) %>
+<%# Clickable menu action. Polymorphic tag: <div> by default, <a> when href:
+    is provided, button_to form when href: + method: (non-GET). %>
+<%
+  css = Kiso::Themes::DropdownMenuItem.render(variant: variant, class: css_classes)
+  data = kiso_prepare_options(component_options, slot: "dropdown-menu-item",
+    kiso__dropdown_menu_target: "item",
+    action: "click->kiso--dropdown-menu#selectItem",
+    inset: (inset ? "" : nil),
+    variant: (variant == :destructive ? "destructive" : nil),
+    disabled: (disabled ? "true" : nil))
+  component_options[:role] = "menuitem"
+  component_options[:tabindex] = "-1"
+  component_options[:aria] = { disabled: (disabled || nil) }
+  use_button_to = href.present? && method.present? && method.to_s != "get"
+%>
+<% if use_button_to %>
+  <%= button_to href,
+      method: method,
+      class: css,
+      form_class: "contents w-full",
+      data: data,
+      disabled: disabled || nil,
+      form: form.presence,
+      **component_options do %>
+    <%= yield %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
+<% else %>
+  <%= content_tag :div, class: css, data: data, **component_options do %>
+    <%= yield %>
+  <% end %>
 <% end %>

data/lib/kiso/themes/button.rb

@@ -14,7 +14,7 @@ module Kiso
     # - +size+ — :xs, :sm, :md (default), :lg, :xl
     # - +block+ — +true+ for full-width, +false+ (default)
     Button = ClassVariants.build(
-      base: "items-center justify-center gap-2 font-medium whitespace-nowrap shrink-0 " \
+      base: "inline-flex items-center justify-center gap-2 font-medium whitespace-nowrap shrink-0 " \
             "transition-all " \
             "focus-visible:outline-2 focus-visible:outline-offset-2 " \
             "disabled:pointer-events-none disabled:opacity-50 " \

data/lib/kiso/version.rb

@@ -5,5 +5,5 @@ module Kiso
   # Updated by +bin/release+.
   #
   # @return [String]
-  VERSION = "0.6.1.pre"
+  VERSION = "0.6.3.pre"
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.6.1.pre
+  version: 0.6.3.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -100,6 +100,7 @@ files:
 - app/helpers/kiso/theme_helper.rb
 - app/helpers/kiso/ui_context_helper.rb
 - app/javascript/controllers/kiso/alert_controller.js
+- app/javascript/controllers/kiso/button_loading_controller.js
 - app/javascript/controllers/kiso/combobox_controller.js
 - app/javascript/controllers/kiso/command_controller.js
 - app/javascript/controllers/kiso/command_dialog_controller.js