playbook_ui 16.12.0.pre.alpha.ATtest18202 → 16.12.0.pre.alpha.PLAY3072railstextinputrequiredaddonmaskingbugs18157

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e84fbc3f83d86ebdfea1f090f7fa2e4e9d0327be6d9f5299f9e1ae76713abcd9
-  data.tar.gz: 3aa90c06a1cde5a01a74e6adff6afb04ed391074600617cbc763c609afce4cbe
+  metadata.gz: 808c3d5ab3e82537f24aeac0f1cb2e402a30d4afae94e25825bfcc0cbe8feda0
+  data.tar.gz: '084bedeca9f2498f50b6cac05965995b7cc91021f4eebd6e5e149caf79583a25'
 SHA512:
-  metadata.gz: 0aa917e55ff4285b13c44ccf8b50acd70b6aea6ec31e3316ab51880f90b86b1f16a5c62135d59cdd3545f3084806f5f3ffbb7dccbca6317e2f44d56a4c8d71d2
-  data.tar.gz: 3387ad8a04404ad1f0c3b66dc47b8ea45eccff7f2514de0ea912af94ce486210806a0e297b32eeb96ebe0a3857d66638c2eeaf1921692e8a26c0521e69c9a278
+  metadata.gz: bca00447e61c8e7ed070c1ea0fe1fa3ade2c78d3ac3a2ecc2a294d9fb25464575f299aa231f8c4808344197e741daed75e5cd7d6b408c10fe16a39327953af13
+  data.tar.gz: 52fced873ada1be081e91b4b01dbf166ed0f41e17545e86d467a1168c0d0526660e0712c04921718db3201c540c19341403873f20fe816f0205f90ae445c1cbc

data/app/pb_kits/playbook/_playbook.scss

@@ -41,6 +41,7 @@
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
 @import 'pb_icon/icon';
+@import 'pb_icon_button/icon_button';
 @import 'pb_icon_circle/icon_circle';
 @import 'pb_icon_stat_value/icon_stat_value';
 @import 'pb_icon_value/icon_value';

data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx

@@ -1,8 +1,7 @@
 import React, {useState} from "react"
 import { render, screen, waitFor } from "../utilities/test-utils"
 
-import { AdvancedTable } from "playbook-ui/advanced-table"
-import { Pill, colors } from "playbook-ui"
+import { AdvancedTable, Pill, colors } from "playbook-ui"
 
 global.ResizeObserver = class {
   observe() {}

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.json

@@ -259,11 +259,6 @@
     }
   },
   "hints": {
-    "advanced_table_import": {
-      "when": {},
-      "message": "AdvancedTable is imported from playbook-ui/advanced-table so apps can keep TanStack out of the main playbook-ui bundle until this kit is used.",
-      "type": "info"
-    },
     "sorting_info": {
       "when": {
         "enableSortingRemoval": true
@@ -321,9 +316,6 @@
       "type": "info"
     }
   },
-  "externalImports": [
-    "import { AdvancedTable } from 'playbook-ui/advanced-table'"
-  ],
   "structureModes": {
     "default": "implicit",
     "modes": {

data/app/pb_kits/playbook/pb_advanced_table/docs/_playground.overrides.json

@@ -1,7 +1,4 @@
 {
-  "externalImports": [
-    "import { AdvancedTable } from 'playbook-ui/advanced-table'"
-  ],
   "structureModes": {
     "default": "implicit",
     "modes": {
@@ -314,11 +311,6 @@
     }
   },
   "hints": {
-    "advanced_table_import": {
-      "when": {},
-      "message": "AdvancedTable is imported from playbook-ui/advanced-table so apps can keep TanStack out of the main playbook-ui bundle until this kit is used.",
-      "type": "info"
-    },
     "sorting_info": {
       "when": {
         "enableSortingRemoval": true

data/app/pb_kits/playbook/pb_advanced_table/kit.schema.json

@@ -312,7 +312,7 @@
   "globalProps": true,
   "usage": {
     "react": {
-      "import": "import { AdvancedTable } from 'playbook-ui/advanced-table'",
+      "import": "import { AdvancedTable } from 'playbook-ui'",
       "example": "<AdvancedTable columnGroupBorderColor=\"text_lt_default\" enableToggleExpansion=\"all\"></AdvancedTable>"
     },
     "rails": {

data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx

@@ -203,6 +203,7 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         : undefined;
     const errorId = error ? `${selectId}-error` : undefined;
 
+    const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
       if (variant === "quickpick" && typeof defaultValue === "string" && defaultValue) {
@@ -225,13 +226,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
       initialSelected
     );
 
-    // Autocomplete displays the selection in the input; seed from defaultValue
-    const [filterItem, setFilterItem] = useState(() => {
-      if (!autocomplete || multiSelect) return "";
-      if (Array.isArray(initialSelected)) return "";
-      return (initialSelected as GenericObject)?.label || "";
-    });
-
     const filterResetDefaultSerialized = useMemo(
         () => serializeDropdownFilterResetDefault(variant, multiSelect, defaultValue, dropdownOptions),
         [variant, multiSelect, defaultValue, dropdownOptions]
@@ -326,17 +320,10 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
     }, [optionsWithBlankSelection, selectedArray, multiSelect]);
     
     const filteredOptions = useMemo(() => {
-          // When the input shows the selected label, do not filter the list down to that one option
-          const selectedLabel =
-            !multiSelect &&
-            !Array.isArray(selected) &&
-            (selected as GenericObject)?.label;
-          const filterText =
-            selectedLabel && filterItem === selectedLabel ? "" : filterItem;
           return availableOptions.filter((opt: GenericObject) =>
-            String(opt.label).toLowerCase().includes(filterText.toLowerCase())
+            String(opt.label).toLowerCase().includes(filterItem.toLowerCase())
           );
-        }, [availableOptions, filterItem, multiSelect, selected]);
+        }, [availableOptions, filterItem]);
 
     // For keyboard accessibility: Set focus within dropdown to selected item if it exists
     useEffect(() => {
@@ -473,7 +460,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
         setSelected({});
         onSelect && onSelect(null);
         setFocusedOptionIndex(-1);
-        setFilterItem("");
         
         // Clear linked DatePickers as well if this is a quickpick variant with controls
         if (variant === "quickpick") {
@@ -607,7 +593,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     onSelect,
                     optionsWithBlankSelection,
                     selected,
-                    setFilterItem,
                     setFocusedOptionIndex,
                     setIsDropDownClosed,
                     setIsInputFocused,

data/app/pb_kits/playbook/pb_dropdown/docs/example.yml

@@ -22,7 +22,6 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
-  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_separators_hidden: Separators Hidden
@@ -64,7 +63,6 @@ examples:
   - dropdown_error: Dropdown with Error
   - dropdown_default_value: Default Value
   - dropdown_multi_select_with_default: Multi Select Default Value
-  - dropdown_default_value_with_autocomplete: Default Value with Autocomplete
   - dropdown_blank_selection: Blank Selection
   - dropdown_with_placeholder: Placeholder
   - dropdown_clear_selection: Clear Selection

data/app/pb_kits/playbook/pb_dropdown/docs/index.js

@@ -37,4 +37,3 @@ export { default as DropdownDisabledOption } from "./_dropdown_disabled_option.j
 export { default as DropdownCustomDisplayDisabledOption } from "./_dropdown_custom_display_disabled_option.jsx";
 export { default as DropdownDisabled } from "./_dropdown_disabled.jsx";
 export { default as DropdownGroupedOptions } from "./_dropdown_grouped_options.jsx";
-export { default as DropdownDefaultValueWithAutocomplete } from './_dropdown_default_value_with_autocomplete.jsx'

data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx

@@ -350,41 +350,6 @@ test("autocomplete prop to render input", () => {
   expect(input).toBeInTheDocument()
 })
 
-test("defaultValue renders in autocomplete input", () => {
-  render(
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        defaultValue={options[2]}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const input = kit.querySelector('.dropdown_input')
-  expect(input).toBeInTheDocument()
-  expect(input).toHaveValue(options[2].label)
-  expect(input).toHaveAttribute("placeholder", "")
-})
-
-test("autocomplete defaultValue still shows all options when opened", () => {
-  render(
-    <Dropdown
-        autocomplete
-        data={{ testid: testId }}
-        defaultValue={options[2]}
-        options={options}
-    />
-  )
-
-  const kit = screen.getByTestId(testId)
-  const optionEls = kit.querySelectorAll('.pb_dropdown_option_list, .pb_dropdown_option_selected')
-  expect(optionEls).toHaveLength(options.length)
-  expect(kit).toHaveTextContent(options[0].label)
-  expect(kit).toHaveTextContent(options[1].label)
-  expect(kit).toHaveTextContent(options[2].label)
-})
-
 test("searchbar prop to render TextInput in container", () => {  
   render (
     <Dropdown

data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx

@@ -6,13 +6,11 @@ export const useHandleOnKeyDown = () => {
 
 const {
   autocomplete,
-  filterItem,
   filteredOptions,
   focusedOptionIndex,
   handleBackspace,
   handleOptionClick,
   selected,
-  setFilterItem,
   setFocusedOptionIndex,
   setIsDropDownClosed,
 }= useContext(DropdownContext)
@@ -42,22 +40,7 @@ const {
   return (e: React.KeyboardEvent) => {
 
     if (e.key !== "Tab" && autocomplete && selected && selected.label) {
-      // Only when the input is showing the selected label (e.g. seeded defaultValue)
-      const replacingSelectedLabel = filterItem === selected.label;
       handleBackspace();
-
-      if (replacingSelectedLabel && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-        e.preventDefault();
-        setFilterItem?.(e.key);
-        setIsDropDownClosed(false);
-        return;
-      }
-
-      if (replacingSelectedLabel && (e.key === "Backspace" || e.key === "Delete")) {
-        e.preventDefault();
-        setFilterItem?.("");
-        return;
-      }
     }
 
     switch (e.key) {
@@ -89,4 +72,4 @@ const {
         break;
   }
 }
-};
+};

data/app/pb_kits/playbook/pb_dropdown/index.js

@@ -541,30 +541,6 @@ export default class PbDropdown extends PbEnhancedElement {
     }
   }
 
-  // Keep the selected label in the autocomplete input, but do not treat it as a search filter
-  resetOptionFilterForSelectedLabel() {
-    if (this.isMultiSelect || !this.searchInput) return;
-
-    const selectedOption = Array.from(this.queryAllOptions()).find((opt) =>
-      opt.classList.contains("pb_dropdown_option_selected"),
-    );
-    if (!selectedOption) return;
-
-    try {
-      const selectedLabel = JSON.parse(
-        selectedOption.dataset.dropdownOptionLabel,
-      ).label;
-      if (this.searchInput.value !== selectedLabel) return;
-
-      this.queryAllOptions().forEach((opt) => {
-        opt.style.display = "";
-      });
-      this.removeNoOptionsMessage();
-    } catch {
-      // ignore invalid option payloads
-    }
-  }
-
   showNoOptionsMessage() {
     if (this.target?.querySelector(".dropdown_no_options")) return;
 
@@ -947,9 +923,6 @@ export default class PbDropdown extends PbEnhancedElement {
 
   showElement(elem) {
     if (this.isDisabled) return;
-
-    // When autocomplete is showing the selected label (not an active search), show all options
-    this.resetOptionFilterForSelectedLabel();
     
     this.ensureFloatingPortalConfig();
     if (this.useMenuPortal) {
@@ -1123,13 +1096,6 @@ export default class PbDropdown extends PbEnhancedElement {
       const optionData = JSON.parse(selectedOption.dataset.dropdownOptionLabel);
       this.setTriggerElementText(optionData.label);
 
-      // Autocomplete trigger has no [data-dropdown-trigger-display]; set the input value instead
-      const autocompleteInput =
-        this.searchInput || this.element.querySelector(SEARCH_INPUT_SELECTOR);
-      if (autocompleteInput) {
-        autocompleteInput.value = optionData.label;
-      }
-
       // Handle quickpick variant: populate start/end date hidden inputs and sync DatePickers
       if (optionData.formatted_start_date && optionData.formatted_end_date) {
         const startDateId = this.element.dataset.startDateId;

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx

@@ -52,15 +52,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
   } = useContext(DropdownContext);
 
   const isItemMatchingFilter = (option: GenericObject | undefined) => {
-    // When the input is only showing the selected label (e.g. seeded defaultValue), do not filter
-    const selectedLabel =
-      !multiSelect &&
-      !Array.isArray(selected) &&
-      (selected as GenericObject)?.label;
-    const filterText =
-      selectedLabel && filterItem === selectedLabel ? "" : filterItem;
     const label = typeof option?.label === 'string' ? option.label.toLowerCase() : option?.label;
-    return String(label).toLowerCase().includes(filterText.toLowerCase());
+    return String(label).toLowerCase().includes(filterItem.toLowerCase());
   }
 
   // When multiSelect, then if an option is selected, remove from dropdown

data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx

@@ -103,9 +103,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
     "Select..."
   );
 
-  const hideJoinedLabelInBody = Boolean(autocomplete && filterItem === joinedLabels);
   const defaultDisplayPlaceholder = joinedLabels
-    ? (hideJoinedLabelInBody ? "" : joinedLabels)
+    ? joinedLabels
     : autocomplete
     ? ""
     : placeholder
@@ -253,9 +252,9 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                       }}
                       key={`${isDropDownClosed ? "chevron-down" : "chevron-up"}`}
                   >
-                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) &&
-                    clearable !== false &&
-                    selectedArray.length > 0 ? (
+                    {(!blankSelection || selected?.value !== optionsWithBlankSelection?.[0]?.value) && (
+                      <>
+                        {clearable !== false && selectedArray.length > 0 && (
                           <div onClick={(e)=>{e.stopPropagation(); !disabled && handleBackspace()}}>
                             <Icon
                                 cursor={disabled ? "default" : "pointer"}
@@ -265,8 +264,8 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
                                 size="sm"
                             />
                           </div>
-                    ) : (
-                      <></>
+                        )}
+                      </>
                     )}
                     <Icon
                         cursor={disabled ? "default" : "pointer"}

data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate_addon_currency.html.erb

@@ -0,0 +1,123 @@
+<%= pb_rails("title", props: { text: "Demo 1: Mask + Add On Hidden Input/Submission"})%>
+<%= pb_form_with(scope: :transaction, method: :get, url: "", validate: true, data: { addon_currency_example: true }) do |form| %>
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input Currency Mask + Add On",
+    name: "transaction[amount]",
+    id: "transaction_amount",
+    mask: "currency",
+    add_on: { icon: "dollar-sign", alignment: "left", border: false },
+    placeholder: "$0.00",
+    required: true,
+  }) %>
+  <%= form.text_field :fee, props: { label: "Form Builder Text Input Currency Mask + Add On", placeholder: "$0.00", mask: "currency", add_on: { icon: "percent", alignment: "right", border: true }, required: true } %>
+
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input ZIP Code Mask + Add On",
+    name: "transaction[zip_code]",
+    id: "transaction_zip_code",
+    mask: "zip_code",
+    add_on: { icon: "map-marker-alt", alignment: "left", border: false },
+    placeholder: "12345",
+    required: true,
+  }) %>
+  <%= form.text_field :zip_code_builder, props: { label: "Form Builder Text Input ZIP Code Mask + Add On", mask: "zip_code", add_on: { icon: "map-marker-alt", alignment: "right", border: true }, placeholder: "12345", required: true } %>
+
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input Postal Code Mask + Add On",
+    name: "transaction[postal_code]",
+    id: "transaction_postal_code",
+    mask: "postal_code",
+    add_on: { icon: "mail-bulk", alignment: "left", border: false },
+    placeholder: "12345-6789",
+    required: true,
+  }) %>
+  <%= form.text_field :postal_code_builder, props: { label: "Form Builder Text Input Postal Code Mask + Add On", mask: "postal_code", add_on: { icon: "mail-bulk", alignment: "right", border: true }, placeholder: "12345-6789", required: true } %>
+
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input SSN Mask + Add On",
+    name: "transaction[ssn]",
+    id: "transaction_ssn",
+    mask: "ssn",
+    add_on: { icon: "id-badge", alignment: "left", border: false },
+    placeholder: "123-45-6789",
+    required: true,
+  }) %>
+  <%= form.text_field :ssn_builder, props: { label: "Form Builder Text Input SSN Mask + Add On", mask: "ssn", add_on: { icon: "id-badge", alignment: "right", border: true }, placeholder: "123-45-6789", required: true } %>
+
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input Credit Card Mask + Add On",
+    name: "transaction[credit_card]",
+    id: "transaction_credit_card",
+    mask: "credit_card",
+    add_on: { icon: "credit-card", alignment: "left", border: false },
+    placeholder: "1234 5678 9012 3456",
+    required: true,
+  }) %>
+  <%= form.text_field :credit_card_builder, props: { label: "Form Builder Text Input Credit Card Mask + Add On", mask: "credit_card", add_on: { icon: "credit-card", alignment: "right", border: true }, placeholder: "1234 5678 9012 3456", required: true } %>
+
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input CVV Mask + Add On",
+    name: "transaction[cvv]",
+    id: "transaction_cvv",
+    mask: "cvv",
+    add_on: { icon: "lock", alignment: "left", border: false },
+    placeholder: "123",
+    required: true,
+  }) %>
+  <%= form.text_field :cvv_builder, props: { label: "Form Builder Text Input CVV Mask + Add On", mask: "cvv", add_on: { icon: "lock", alignment: "right", border: true }, placeholder: "123", required: true } %>
+
+  <%= form.text_field :reference, props: { label: "Form Builder Text Input Add On NO MASK", add_on: { icon: "frog", alignment: "left", border: true }, required: true } %>
+
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>
+<%= pb_rails("card", props: { margin_top: "sm" }) do %>
+  <%= pb_rails("caption", props: { text: "Submitted form data", margin_bottom: "xs" }) %>
+  <%= pb_rails("body", props: { text: "Submit the form to list every param the browser sends below. The same data is logged to the console. All fields are required." }) %>
+  <pre data-addon-currency-example-output></pre>
+<% end %>
+
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("submit", function(event) {
+    const form = event.target
+    if (!form.dataset || !form.dataset.addonCurrencyExample) return
+
+    // Keep the example on the page so the params stay visible.
+    event.preventDefault()
+
+    const submitted = Array.from(new FormData(form).entries())
+      .filter(([name]) => name && !["utf8", "_method", "authenticity_token"].includes(name))
+
+    const output = document.querySelector("[data-addon-currency-example-output]")
+    output.textContent = submitted.length ?
+      submitted.map(([name, value]) => `${name}: ${JSON.stringify(value)}`).join("\n") :
+      "Nothing was submitted."
+
+    console.log("Submitted form data:", Object.fromEntries(submitted))
+  })
+<% end %>
+
+<%= pb_rails("title", props: { text: "Demo 2: Location of Validation Message"})%>
+<%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
+  <%= form.text_field :example_text_field_validation, props: { label: "Form Builder Text Input Add On", add_on: { icon: "frog", alignment: 'right', border: true }, required: true } %>
+  <%= form.text_field :example_text_field_validation_2, props: { label: "Form Builder Text Input Currency Mask + Add On", mask: "currency", placeholder:"$0.00", add_on: { icon: "frog", alignment: 'left', border: false }, required: true } %>
+  <%= pb_rails("text_input", props: {
+    label: "pb_rails Text Input Add On",
+    add_on: { icon: "frog", alignment: 'left', border: false },
+    required: true,
+    }) %>
+    <%= pb_rails("text_input", props: {
+      label: "pb_rails Text Input Currency + Add On",
+      mask: "currency",
+      add_on: { icon: "frog", alignment: 'right', border: true },
+      placeholder:"$0.00",
+      required: true,
+    }) %>
+ 
+  <%= form.actions do |action| %>
+    <%= action.submit %>
+    <%= action.button props: { type: "reset", text: "Cancel", variant: "secondary" } %>
+  <% end %>
+<% end %>

data/app/pb_kits/playbook/pb_form/docs/example.yml

@@ -1,6 +1,7 @@
 examples:
 
   rails:
+  - form_form_with_validate_addon_currency: Validation + Add On + Currency Mask
   - form_form_with: Default
   - form_form_with_validate: Default + Validation
   - form_form_with_validation_msg: Validation + Custom Validation Message

data/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 {
+    .pb_button_kit {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:active {
+    .pb_button_kit {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $primary_action;
+    }
+  }
+
+  &:hover:active {
+    .pb_button_kit {
+      background-color: $bg_light;
+    }
+    .icon_button_icon {
+      color: $text_lt_default;
+    }
+  }
+
+  &:focus {
+    outline: 2px solid $primary_action;
+    border-radius: 8px;
+  }
+
+  .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);
+}

data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx

@@ -0,0 +1,75 @@
+
+import React from 'react'
+import classnames from 'classnames'
+import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
+import { globalProps } from '../utilities/globalProps'
+
+import Button from '../pb_button/_button'
+import Icon from '../pb_icon/_icon'
+import { IconSizes } from "../pb_icon/_icon"
+
+type IconButtonProps = {
+  aria?: { [key: string]: string },
+  className?: string,
+  data?: { [key: string]: string },
+  htmlType?: 'submit' | 'reset' | 'button' | undefined,
+  icon?: string,
+  id?: string,
+  link?: string,
+  newWindow?: boolean,
+  onClick?: React.MouseEventHandler<HTMLElement>,
+  size?: IconSizes,
+  target?: string,
+  variant?: 'default' | 'link',
+}
+
+const IconButton = (props: IconButtonProps) => {
+  const {
+    aria = {},
+    className,
+    data = {},
+    htmlType = 'button',
+    icon = 'bars',
+    id,
+    link,
+    newWindow = false,
+    onClick = noop,
+    size = "2x",
+    target,
+    variant = "default",
+  } = props
+
+  const ariaProps = buildAriaProps(aria)
+  const dataProps = buildDataProps(data)
+  const classes = classnames(buildCss('pb_icon_button_kit', variant), globalProps(props), className)
+
+  return (
+    <div
+        {...ariaProps}
+        {...dataProps}
+        className={classes}
+        id={id}
+    >
+      <Button
+          aria={aria}
+          borderRadius="xs"
+          htmlType={htmlType}
+          link={link}
+          newWindow={newWindow}
+          onClick={onClick}
+          target={target}
+      >
+        <Icon
+            className="icon_button_icon"
+            fixedWidth
+            icon={icon}
+            paddingX="xxs"
+            paddingY="xs"
+            size={size}
+        />
+      </Button>
+    </div>
+  )
+}
+
+export default IconButton

data/app/pb_kits/playbook/pb_icon_button/docs/_icon_button_click.jsx

@@ -0,0 +1,13 @@
+import React from 'react'
+import IconButton from '../../pb_icon_button/_icon_button'
+
+const IconButtonClick = (props) => (
+  <div>
+    <IconButton
+        {...props}
+        onClick={() => alert('Click!')}
+    />
+  </div>
+)
+
+export default IconButtonClick

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

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