[PLAY-1766] Icon button rails (#4141)

**What does this PR do?** A clear and concise description with your
runway ticket url.
Runway https://runway.powerhrg.com/backlog_items/PLAY-1766

Adds a new rails only kit for a square style icon button

Its very similar to the circle icon button

Its still in beta, just made a "default" and "link" variant

Check it out here
https://pr4141.playbook.beta.px.powerapp.cloud/kits/icon_button



![screenshot-pr4141_playbook_beta_px_powerapp_cloud-2025_01_21-10_09_31](https://github.com/user-attachments/assets/0d918cf3-92d8-4f86-9f6c-2acbdd893f13)

Author: markdoeswork

playbook-website/config/menu.yml

@@ -88,6 +88,12 @@ kits:
     icons_used: true
     react_rendered: false
     enhanced_element_used: false
+  - name: icon_button
+    platforms: rails_only
+    status: beta
+    icons_used: true
+    react_rendered: false
+    enhanced_element_used: false
 - category: data_visualization
   description:
   components:

playbook/app/entrypoints/playbook.scss

@@ -1,3 +1,4 @@
+
 @import 'kits/pb_advanced_table/advanced_table';
 @import 'kits/pb_avatar/avatar';
 @import 'kits/pb_avatar_action_button/avatar_action_button';
@@ -108,6 +109,7 @@
 @import 'kits/pb_user_badge/user_badge';
 @import 'kits/pb_walkthrough/walkthrough';
 @import 'kits/pb_weekday_stacked/weekday_stacked';
+@import 'kits/pb_icon_button/icon_button';
 @import 'utilities/mixins';
 @import 'utilities/spacing';
 @import 'utilities/cursor';

playbook/app/pb_kits/playbook/pb_icon_button/_icon_button.scss

@@ -0,0 +1,78 @@
+$icon_colors: (
+  default: $text_lt_default,
+  link:   $primary_action
+);
+
+@mixin icon_button_variant($variant) {
+  .icon_button_icon {
+    color: map-get($icon_colors, $variant);
+  }
+}
+
+.pb_icon_button_kit_default,
+.pb_icon_button_kit_link {
+  width: fit-content;
+  height: fit-content;
+
+  &:hover {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:active {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:hover:active {
+    [class*="pb_button_kit"] {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $text_lt_default;
+    }
+  }
+
+  &:focus {
+    outline: 2px solid $primary_action;
+    border-radius: 8px;
+  }
+
+  [class*="pb_button_kit"] {
+    min-height: 0;
+    background: none;
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    flex-shrink: 0;
+    flex-grow: 0;
+    width: fit-content;
+    height: fit-content;
+    line-height: normal;
+    flex-basis: auto;
+    min-width: 0;
+    padding: 0;
+
+    .icon_button_icon {
+      display: block;
+      vertical-align: middle;
+    }
+  }
+}
+
+.pb_icon_button_kit_default {
+  @include icon_button_variant(default);
+}
+
+.pb_icon_button_kit_link {
+  @include icon_button_variant(link);
+}

playbook/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_default.html.erb

@@ -0,0 +1,3 @@
+<%= pb_rails("icon_button") %>
+</br>
+<%= pb_rails("icon_button", props: {variant: "link"}) %>

playbook/app/pb_kits/playbook/pb_icon_button/docs/example.yml

@@ -0,0 +1,7 @@
+examples:
+  
+  rails:
+  - icon_button_default: Default
+  
+  
+  

playbook/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb

@@ -0,0 +1,16 @@
+<%= pb_content_tag do %>
+  <%= pb_rails("button", props: { type: object.type,
+                                  link: object.link,
+                                  new_window:object.new_window,
+                                  target: object.target,
+                                  dark: object.dark,
+                                  border_radius: "lg" }) do %>
+  <%= pb_rails("icon", props: { icon: object.icon,
+                                fixed_width: true,
+                                dark: object.dark,
+                                size: "2x",
+                                color: "text_lt_default",
+                                classname: "icon_button_icon",
+                                padding_x: "xxs", padding_y: "xs" }) %>
+  <% end %>
+<% end %>

playbook/app/pb_kits/playbook/pb_icon_button/icon_button.rb

@@ -0,0 +1,22 @@
+# frozen_string_literal: true
+
+module Playbook
+  module PbIconButton
+    class IconButton < ::Playbook::KitBase
+      prop :type, type: Playbook::Props::Enum,
+                  values: %w[button submit reset],
+                  default: "button"
+      prop :icon, required: false, default: "bars"
+      prop :link
+      prop :new_window, type: Playbook::Props::Boolean,
+                        default: false
+      prop :target
+      prop :variant, type: Playbook::Props::Enum,
+                     values: %w[default link],
+                     default: "default"
+      def classname
+        generate_classname("pb_icon_button_kit", variant)
+      end
+    end
+  end
+end

playbook/spec/pb_kits/playbook/kits/icon_button_spec.rb

@@ -0,0 +1,60 @@
+# frozen_string_literal: true
+
+require_relative "../../../../app/pb_kits/playbook/pb_icon_button/icon_button"
+
+RSpec.describe Playbook::PbIconButton::IconButton do
+  subject { Playbook::PbIconButton::IconButton }
+
+  # Test prop definitions
+  it { is_expected.to define_prop(:icon).with_default("bars") }
+  it { is_expected.to define_prop(:link) }
+  it { is_expected.to define_boolean_prop(:new_window).with_default(false) }
+  it {
+    is_expected.to define_enum_prop(:type)
+      .with_default("button")
+      .with_values("button", "submit", "reset")
+  }
+  it {
+    is_expected.to define_enum_prop(:variant)
+      .with_default("default")
+      .with_values("default", "link")
+  }
+
+  # Test classname generation
+  describe "#classname" do
+    it "returns the correct namespaced class name", :aggregate_failures do
+      expect(subject.new(variant: "default").classname).to eq "pb_icon_button_kit_default"
+      expect(subject.new(variant: "link").classname).to eq "pb_icon_button_kit_link"
+      expect(subject.new(classname: "additional_class").classname).to eq "pb_icon_button_kit_default additional_class"
+    end
+
+    it "raises an error when given an invalid variant" do
+      expect { subject.new(variant: "invalid_variant") }.to raise_error(Playbook::Props::Error)
+    end
+  end
+
+  # Test rendering behavior
+  describe "rendering" do
+    let(:icon) { "bars" }
+
+    it "renders the default variant with icon" do
+      result = subject.new(icon: icon).classname
+      expect(result).to eq "pb_icon_button_kit_default"
+    end
+
+    it "renders the link variant" do
+      result = subject.new(icon: icon, variant: "link").classname
+      expect(result).to eq "pb_icon_button_kit_link"
+    end
+
+    it "renders a button with type submit" do
+      result = subject.new(icon: icon, type: "submit").classname
+      expect(result).to include "pb_icon_button_kit_default"
+    end
+
+    it "renders with custom classname" do
+      result = subject.new(icon: icon, classname: "extra_class").classname
+      expect(result).to eq "pb_icon_button_kit_default extra_class"
+    end
+  end
+end