kiso 0.6.1.pre → 0.6.2.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: b28c57b532dc53dad377cca677637615db58881e3109d6a6a5ecbbd1cce5b02e
-  data.tar.gz: eca25e39e3e60d918dac9df9c4bbd2b696c558649bb48d8bc74f156e5171f56b
+  metadata.gz: 8e190287bffc19365594567c518032deea302c6dc22ef9a3e7aa4a5b5131c602
+  data.tar.gz: f22a684ad94ee787f066f886ff0dd611846dd09aef7d38a89488515f1eb55f19
 SHA512:
-  metadata.gz: ab5fd9a21f185c579e8fd745b5709915e5e4aa30c2fcc38126c616ecbaa08495dce298997bb247ccc077205f84d82f2b33bb8cff764bfc7ce6a33527396dff8b
-  data.tar.gz: d83b4e694f3559f20c0da252dbb631224fcd23a5514595a8d57f9631dd68a65f79d6377e0594afe4c07968df9330c906b444f9e83a882b82fcf540fbcc364158
+  metadata.gz: c892bfb57c5155239295cc7ce5cd9f3a6747504a57883b4fa49ea7b1e9f637c164285af0a8c98824972121d13c9f57f691d95f808351bacebc176255641583d0
+  data.tar.gz: 215260ab8612f8521cc8f95357cc527968cb90be8886db63867441e7cf75714dce789b0d40fd48d624bb864bc129afb782defdaef74cb8cb554249b7b73729c5

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/views/kiso/components/_button.html.erb

@@ -1,14 +1,17 @@
 <%# locals: (color: :primary, variant: :solid, size: :md, block: false,
              type: :button, href: nil, method: nil, disabled: false,
-             form: {}, css_classes: "", **component_options) %>
+             loading: 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. %>
 <%
   css = Kiso::Themes::Button.render(
     color: color, variant: variant, size: size, block: block, class: css_classes)
   data = kiso_prepare_options(component_options, slot: "button")
   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 +19,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.2.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.2.pre
 platform: ruby
 authors:
 - Steve Clarke