[PLAY-1858] Icon Button Sizes (#4218)

**What does this PR do?** A clear and concise description with your
runway ticket url.
This PR adds the `size` prop to the `icon_button_kit` in Rails and
allows the developer to specify the size of an Icon Button.
[Story](https://runway.powerhrg.com/backlog_items/PLAY-1858)

**Screenshots:** Screenshots to visualize your addition/change
![Screenshot 2025-02-03 at 1 17
55 PM](https://github.com/user-attachments/assets/ab429e1f-1c0a-4e61-9e95-a384fadbb21c)

**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

Author: yuriyivanenko

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

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

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

@@ -0,0 +1,27 @@
+<%= pb_rails("flex", props: { align: "center"}) do %>
+  <%= pb_rails("icon_button", props: {size: "lg"}) %> <span>Large</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "sm"}) %> <span>Small</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "xs"}) %> <span>XSmall</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center", margin_top: "md" }) do %>
+  <%= pb_rails("icon_button", props: {size: "1x"}) %> <span>1x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "2x"}) %> <span>2x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "3x"}) %> <span>3x</span>
+<% end %>
+
+<%= pb_rails("flex", props: { align: "center" }) do %>
+  <%= pb_rails("icon_button", props: {size: "4x"}) %> <span>4x</span>
+<% end %>

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

@@ -2,6 +2,4 @@ examples:
 
   rails:
   - icon_button_default: Default
-  
-  
-  
+  - icon_button_sizes: Sizes

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

@@ -8,7 +8,7 @@
   <%= pb_rails("icon", props: { icon: object.icon,
                                 fixed_width: true,
                                 dark: object.dark,
-                                size: "2x",
+                                size: object.size,
                                 color: "text_lt_default",
                                 classname: "icon_button_icon",
                                 padding_x: "xxs", padding_y: "xs" }) %>

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

@@ -14,6 +14,9 @@ class IconButton < ::Playbook::KitBase
       prop :variant, type: Playbook::Props::Enum,
                      values: %w[default link],
                      default: "default"
+      prop :size, type: Playbook::Props::Enum,
+                  values: %w[1x 2x 3x 4x 5x 6x 7x 8x 9x 10x xs sm lg],
+                  default: "2x"
       def classname
         generate_classname("pb_icon_button_kit", variant)
       end

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

@@ -19,6 +19,11 @@
       .with_default("default")
       .with_values("default", "link")
   }
+  it {
+    is_expected.to define_enum_prop(:size)
+      .with_default("2x")
+      .with_values("1x", "2x", "3x", "4x", "5x", "6x", "7x", "8x", "9x", "10x", "xs", "sm", "lg")
+  }
 
   # Test classname generation
   describe "#classname" do