kiso 0.6.6.pre → 0.7.0.pre

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 37ad37d5141bb1b542e4e44cdd206772ad63c60b66d83cb24c02fb9e21fe451e
-  data.tar.gz: 67d62e3a1879e40cb52b99e18d720c07ed7b390067c38a306230966e5bd3855f
+  metadata.gz: 53a2af001d842909751b3494e9fd0978a60c7cb62bf028a7a3461f195ebd6988
+  data.tar.gz: 5a6ce4a5958a2460be62ac17d2cc315b8e185f801c6d1801778f9b88e609cccc
 SHA512:
-  metadata.gz: 8212fb15a724a219925764fcb5d95ef4b3eb98e261e35ede25086575f5f6ef718aea5579449477bdca4a9d340093bf671762755204f88626adcb6bb11a5d98b9
-  data.tar.gz: e076abe507c3f6e880f63fda2fd0ece8af98457f908c2b6f92814d8e391feacde16f6761b3204ea4a21da974f1af4a9eb5fe1e79a6a80fcc3fd0986a3e1d0aa4
+  metadata.gz: 85ff1d9bbc10faa32d096149260d86ccb3feafa9a91673e8e8a8f9e479196166b4b244faa4d6f64db194a801ed33e25760c06b3673407038e845807b2dca1565
+  data.tar.gz: 86192d62578427cdf67dfc1e21028f8bf1f4accc208fdc2f65b3eb3179a780a244b40e39673fa214b9bf54b562bf466cb614ae5ca00a7f0a18846e40e84e23d4

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

@@ -461,13 +461,16 @@ export default class extends Controller {
   }
 
   /**
-   * Positions the dropdown content relative to the trigger.
+   * Positions the dropdown content relative to the trigger using fixed
+   * positioning to escape ancestor overflow clipping (e.g., DashboardToolbar).
    * Starts auto-updating on scroll/resize.
    *
    * @private
    */
   _positionContent() {
-    this._cleanupPosition = startPositioning(this.triggerTarget, this.contentTarget)
+    this._cleanupPosition = startPositioning(this.triggerTarget, this.contentTarget, {
+      strategy: "fixed",
+    })
   }
 
   /**

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

@@ -0,0 +1,45 @@
+<%# locals: (icon:, size: :sm, title: nil, href: nil, method: nil, disabled: false, css_classes: "", **component_options) %>
+<%# Inline icon-only action trigger. Polymorphic tag: <button> by default,
+    <a> with href:, or button_to with href: + method: (non-GET).
+    No fixed height — flows inline with surrounding text. %>
+<%
+  css = Kiso::Themes::ActionIcon.render(size: size, class: css_classes)
+  label = title || t("kiso.action_icon.action")
+  data = kiso_prepare_options(component_options, slot: "action-icon")
+  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",
+      data: data,
+      disabled: disabled || nil,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% elsif href.present? %>
+  <% component_options[:href] = href
+     component_options[:"aria-disabled"] = true if disabled %>
+  <%= content_tag :a,
+      class: css,
+      data: data,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% else %>
+  <%= content_tag :button,
+      class: css,
+      data: data,
+      type: "button",
+      disabled: disabled || nil,
+      title: title,
+      aria: { label: label },
+      **component_options do %>
+    <%= kiso_icon(icon) %>
+  <% end %>
+<% end %>

data/config/locales/en.yml

@@ -1,5 +1,7 @@
 en:
   kiso:
+    action_icon:
+      action: "Action"
     alert:
       dismiss: "Dismiss"
     breadcrumb:

data/lib/kiso/presets/rounded.rb

@@ -10,6 +10,9 @@ module Kiso
     # - Checkbox — uses rounded-[4px] for checkmark alignment
     # - Shared::CHECKABLE_ITEM — uses rounded-sm for menu items (structural)
     ROUNDED = {
+      # ActionIcon: rounded-md → rounded-full
+      action_icon: {base: "rounded-full"},
+
       # Buttons: rounded-md → rounded-full (pill shape)
       button: {
         variants: {

data/lib/kiso/presets/sharp.rb

@@ -5,6 +5,9 @@ module Kiso
     # No border-radius anywhere — geometric, brutalist aesthetic.
     # Applies rounded-none to every component that has border-radius.
     SHARP = {
+      # ActionIcon: rounded-md → rounded-none
+      action_icon: {base: "rounded-none"},
+
       # Buttons: rounded-md → rounded-none
       button: {
         variants: {

data/lib/kiso/themes/action_icon.rb

@@ -0,0 +1,38 @@
+module Kiso
+  module Themes
+    # Inline icon-only action trigger for table cells, card headers,
+    # and text rows.
+    #
+    # Quiet by default — muted foreground that brightens on hover with
+    # a subtle background. No fixed height; flows inline with
+    # surrounding text.
+    #
+    # @example
+    #   ActionIcon.render(size: :sm)
+    #
+    # Variants:
+    # - +size+ — :xs, :sm (default), :md
+    #
+    # shadcn base: n/a (no shadcn equivalent — inspired by Mantine ActionIcon
+    # and Outport's appui(:icon_action))
+    ActionIcon = ClassVariants.build(
+      base: "inline-flex items-center justify-center " \
+            "text-muted-foreground hover:text-foreground " \
+            "hover:bg-accent rounded-md " \
+            "cursor-pointer transition-colors duration-150 " \
+            "disabled:pointer-events-none disabled:opacity-50 " \
+            "aria-disabled:cursor-not-allowed aria-disabled:opacity-50 " \
+            "focus-visible:outline-2 focus-visible:outline-offset-2 " \
+            "focus-visible:outline-inverted " \
+            "#{Shared::SVG_BASE}",
+      variants: {
+        size: {
+          xs: "p-0.5 [&_svg:not([class*='size-'])]:size-3",
+          sm: "p-1 [&_svg:not([class*='size-'])]:size-3.5",
+          md: "p-1.5 [&_svg:not([class*='size-'])]:size-4"
+        }
+      },
+      defaults: {size: :sm}
+    )
+  end
+end

data/lib/kiso/themes/dashboard.rb

@@ -75,7 +75,7 @@ module Kiso
 
     # Right-aligned content area within {DashboardToolbar}.
     DashboardToolbarRight = ClassVariants.build(
-      base: "flex items-center gap-1.5"
+      base: "ml-auto flex items-center gap-1.5"
     )
   end
 end

data/lib/kiso/themes/pagination.rb

@@ -37,7 +37,7 @@ module Kiso
 
     # Flex row container for pagination items.
     PaginationContent = ClassVariants.build(
-      base: "flex flex-row items-center gap-1"
+      base: "flex flex-row flex-wrap items-center justify-center gap-1"
     )
 
     # Wrapper for a single pagination element (link, ellipsis, etc.).

data/lib/kiso/version.rb

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

data/lib/kiso.rb

@@ -11,6 +11,7 @@ require "kiso/propshaft_tailwind_stub_filter"
 require "kiso/engine"
 require "kiso/themes/shared"
 require "kiso/themes/badge"
+require "kiso/themes/action_icon"
 require "kiso/themes/alert"
 require "kiso/themes/aspect_ratio"
 require "kiso/themes/button"

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: kiso
 version: !ruby/object:Gem::Version
-  version: 0.6.6.pre
+  version: 0.7.0.pre
 platform: ruby
 authors:
 - Steve Clarke
@@ -124,6 +124,7 @@ files:
 - app/javascript/kiso/utils/positioning.js
 - app/javascript/kiso/vendor/floating-ui-core.js
 - app/javascript/kiso/vendor/floating-ui-dom.js
+- app/views/kiso/components/_action_icon.html.erb
 - app/views/kiso/components/_alert.html.erb
 - app/views/kiso/components/_alert_dialog.html.erb
 - app/views/kiso/components/_app.html.erb
@@ -358,6 +359,7 @@ files:
 - lib/kiso/presets/sharp.rb
 - lib/kiso/propshaft_tailwind_stub_filter.rb
 - lib/kiso/theme_overrides.rb
+- lib/kiso/themes/action_icon.rb
 - lib/kiso/themes/alert.rb
 - lib/kiso/themes/alert_dialog.rb
 - lib/kiso/themes/aspect_ratio.rb