playbook_ui 15.8.0.pre.rc.1 → 16.0.0.pre.alpha.PLAY2684iconbuttonvariant13518

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d0177497af81bb89af7b26046f27197942cb10b7a6640df32234376c1f7cedcb
-  data.tar.gz: 164f59f14bfffc0a889b4859363c311d09dafddf5c1fce518000a42c4e647623
+  metadata.gz: c9d0f9943190ec65f7767c1f1131909858fe408507a1d372dc27035b69847e76
+  data.tar.gz: 692a5f395f2c164a70e82e763d565ba9165a618de92d36f2b251cec4be8d1a43
 SHA512:
-  metadata.gz: 6c3ead358396ac6c1adf2c5a2a5af3409513bfc0a944fa7298d74135b66ea59f865e30a51167b6f81247967b5ac2be7326aa5717d5b3d0c2993a2a2a96831d48
-  data.tar.gz: 4a5d41bdcc5e01b9dc0a3ffbaba5292702873902e5325dfeba5759e54049e03c95ce6ba760a0c0e8b1c9bd35c0ca6958bbec137fe7a33da7d978148cc6bc5b2f
+  metadata.gz: 23c40516ab6c6326addb1518871fd50284ab753a827eed90b552f1520fdf6cf1e675f7b7429b28ce5c8d88315a260cfd174c8a586e404d3a21f2aedcf6825340
+  data.tar.gz: 3fa52f22147c20d6c8bcae9c7cbfe258f5cb7fe76fc983b8ae8d4dcd1b804e2277aee4987ec06ce4d45bada533c11ca552eef8dd56b8792c56f6755b0dc4cb6d

data/app/pb_kits/playbook/_playbook.scss

@@ -2,7 +2,6 @@
 @import 'pb_avatar/avatar';
 @import 'pb_background/background';
 @import 'pb_badge/badge';
-@import 'pb_bar_graph/bar_graph';
 @import 'pb_body/body';
 @import 'pb_bread_crumbs/bread_crumbs';
 @import 'pb_button/button';
@@ -10,7 +9,6 @@
 @import 'pb_caption/caption';
 @import 'pb_card/card';
 @import 'pb_checkbox/checkbox';
-@import 'pb_circle_chart/circle_chart';
 @import 'pb_circle_icon_button/circle_icon_button';
 @import 'pb_collapsible/collapsible';
 @import 'pb_contact/contact';
@@ -38,7 +36,6 @@
 @import 'pb_form/form';
 @import 'pb_form_group/form_group';
 @import 'pb_form_pill/form_pill';
-@import 'pb_gauge/gauge';
 @import 'pb_hashtag/hashtag';
 @import 'pb_highlight/highlight';
 @import 'pb_home_address_street/home_address_street';
@@ -53,7 +50,6 @@
 @import 'pb_layout/layout';
 @import 'pb_legend/legend';
 @import 'pb_lightbox/lightbox';
-@import 'pb_line_graph/line_graph';
 @import 'pb_link/link';
 @import 'pb_list/list';
 @import 'pb_loading_inline/loading_inline';

data/app/pb_kits/playbook/pb_button/_button.scss

@@ -112,4 +112,45 @@ $pb_button_sizes: (
       @include pb_button_disabled_dark;
     }
   }
+
+  // Icon-only button (icon prop set, no text) - square with equal padding
+  // Rails: uses .pb_button_icon_only class
+  // React: detects when pb_button_content has an empty text span
+  &.pb_button_icon_only,
+  &:has(.pb_button_content > span:empty) {
+    aspect-ratio: 1;
+    min-width: auto;
+    width: auto;
+    height: auto;
+    padding: $pb_button_v_padding !important;
+    min-height: ($pb_button_v_padding * 2) + $font_small;
+    
+    &.pb_button_size_sm {
+      padding: $font_smaller !important;
+      min-height: ($font_smaller * 2) + $font_smaller;
+    }
+    
+    &.pb_button_size_md {
+      padding: $font_small !important;
+      min-height: ($font_small * 2) + $font_small;
+    }
+    
+    &.pb_button_size_lg {
+      padding: ($font_large - 2px) !important;
+      min-height: (($font_large - 2px) * 2) + ($font_large - 2px);
+    }
+
+    // Remove margins from icons
+    .button_with_icon,
+    .button_with_icon_right {
+      margin-right: 0;
+      margin-left: 0;
+    }
+
+    // Remove margins from Rails icon wrapper spans
+    > span {
+      margin-right: 0 !important;
+      margin-left: 0 !important;
+    }
+  }
 }

data/app/pb_kits/playbook/pb_button/_button.tsx

@@ -51,9 +51,13 @@ const buttonClassName = (props: ButtonPropTypes) => {
     type = 'inline',
     variant = 'primary',
     size = null,
+    text,
+    children,
   } = props
 
   const classNames = ['pb_button_kit']
+  // Icon-only: has icon, no text/children, and not a reaction button (reaction buttons have count)
+  const isIconOnly = icon && !text && !children && variant !== 'reaction'
 
   if (variant) classNames.push(`pb_button_${variant}`)
   if (type) classNames.push(`pb_button_${type}`)
@@ -63,6 +67,7 @@ const buttonClassName = (props: ButtonPropTypes) => {
   if (size) classNames.push(`pb_button_size_${size}`)
   if (variant === 'reaction' && icon && !isValidEmoji(icon)) classNames.push('pb_button_reaction_default')
   if (variant === 'reaction' && highlight) classNames.push('pb_button_active')
+  if (isIconOnly) classNames.push('pb_button_icon_only')
 
   return classNames.join(' ')
 }

data/app/pb_kits/playbook/pb_button/button.html.erb

@@ -16,17 +16,21 @@
             <% end %>
         <% end %>
     <% else %>
-    <% if object.icon && !object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_right: "xs", font_style: object.icon_font_family }) %>
-        </span>
+    <% if !object.loading %>
+        <% if object.icon && !object.icon_right %>
+            <span>
+                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_right: "xs" })) %>
+            </span>
+        <% end %>
     <% end %>
     <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(spinner_path), pulse: true, fixed_width: true, classname: "loading-icon" }) %>
     <span class="pb_button_content"><%= content.presence || object.text %></span>
-    <% if object.icon && object.icon_right %>
-        <span>
-            <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, margin_left: "xs", font_style: object.icon_font_family }) %>
-        </span>
+    <% if !object.loading %>
+        <% if object.icon && object.icon_right %>
+            <span>
+                <%= pb_rails("icon", props: { icon: "#{icon}", fixed_width: true, font_style: object.icon_font_family }.merge((object.icon_only? && content.blank?) ? {} : { margin_left: "xs" })) %>
+            </span>
+        <% end %>
     <% end %>
     <% end %>
 

data/app/pb_kits/playbook/pb_button/button.rb

@@ -73,6 +73,10 @@ module Playbook
         emoji_regex.match?(icon)
       end
 
+      def icon_only?
+        icon.present? && text.blank? && variant != "reaction"
+      end
+
       def classname
         class_names = ["pb_button_kit"]
         class_names << "pb_button_#{variant}" if variant
@@ -82,6 +86,7 @@ module Playbook
         class_names << "pb_button_size_#{size}" if size
         class_names << "pb_button_reaction_default" if variant === "reaction" && icon && !valid_emoji(icon)
         class_names << "pb_button_active" if variant === "reaction" && highlight
+        class_names << "pb_button_icon_only" if icon_only?
 
         class_names.join(" ")
         generate_classname(class_names.compact.join(" "), separator: " ")

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.html.erb

@@ -0,0 +1,21 @@
+<%= pb_rails("caption", props: { margin_y: "md", text: "Small Size (sm)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "sm", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Medium Size (md)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "md", loading: true, margin_right: "lg" }) %>
+<%= pb_rails("caption", props: { margin_y: "md", text: "Large Size (lg)" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "secondary", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "link", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", variant: "danger", margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", disabled: true, margin_right: "lg" }) %>
+<%= pb_rails("button", props: { icon: "plus", size: "lg", loading: true, margin_right: "lg" }) %>

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant.jsx

@@ -0,0 +1,180 @@
+import React from 'react'
+import Button from "../../pb_button/_button"
+import Caption from "../../pb_caption/_caption"
+
+const ButtonIconVariant = (props) => (
+  <div>
+    <Caption 
+        marginY="md" 
+        text="Small Size (sm)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="sm"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Medium Size (md)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="md"
+        tabIndex={0}
+        {...props}
+    />
+    <br/>
+    <Caption 
+        marginY="md" 
+        text="Large Size (lg)" 
+    />
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="secondary"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="link"
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        variant="danger"
+        {...props}
+    />
+    {' '}
+    <Button
+        disabled
+        icon="plus"
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+    {' '}
+    <Button
+        icon="plus"
+        loading
+        marginRight='lg'
+        size="lg"
+        tabIndex={0}
+        {...props}
+    />
+  </div>
+)
+
+export default ButtonIconVariant

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_rails.md

@@ -0,0 +1 @@
+The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<%= pb_rails("button", props: { icon: "plus", variant: "secondary" }) %>` to get an icon button.

data/app/pb_kits/playbook/pb_button/docs/_button_icon_variant_react.md

@@ -0,0 +1 @@
+The icon button variant automatically renders when you provide an `icon` prop without a corresponding `text` prop. The button will only display an icon (no text) and will be wrapped with the icon button styling. This works with all button variants including "link", "primary", "secondary", etc. Simply use `<Button icon="rocket" variant="primary" />` to get an icon button.

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

@@ -13,6 +13,7 @@ examples:
   - button_form: Button Form Attribute
   - button_managed_disabled: Button Toggle Disabled State
   - button_managed_disabled_helper: Button Toggle Disabled State Helper
+  - button_icon_variant: Icon Button Variant
   
   react:
   - button_default: Button Variants
@@ -27,6 +28,7 @@ examples:
   - button_size: Button Size
   - button_form: Button Form Attribute
   - button_hover: Button Hover
+  - button_icon_variant: Icon Button Variant
 
   swift:
   - button_default_swift: Button Variants

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

@@ -4,6 +4,7 @@ export { default as ButtonLink } from './_button_link.jsx'
 export { default as ButtonLoading } from './_button_loading.jsx'
 export { default as ButtonBlockContent } from './_button_block_content.jsx'
 export { default as ButtonIconOptions } from './_button_icon_options.jsx'
+export { default as ButtonIconVariant } from './_button_icon_variant.jsx'
 export { default as ButtonAccessibility } from './_button_accessibility.jsx'
 export { default as ButtonOptions } from './_button_options.jsx'
 export { default as ButtonSize } from './_button_size.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx

@@ -358,6 +358,13 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>((pr
     const { id, value: inputText } = e.target;
     // The radio button needs a unique ID, this grabs the ID before the hyphen
     const selectedItemID = id.match(/^[^-]*/)[0];
+
+    // Check if the item is disabled - if so, don't allow selection (safety check in addition to native disabled attribute)
+    const clickedItem = filterFormattedDataById(formattedData, selectedItemID);
+    if (clickedItem.length > 0 && clickedItem[0].disabled) {
+      return;
+    }
+    
     // Reset tree checked state, triggering useEffect
     const treeWithNoSelections = modifyRecursive(formattedData, false);
     // Update tree with single selection

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_disabled_options.md

@@ -1 +1 @@
-individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
+Individual items can also be disabled by including the `disabled:true` within the object on the treeData for the `returnAllSelected`/`return_all_selected` variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_single_disabled.html.erb

@@ -0,0 +1,135 @@
+<% treeData = [
+  {
+    label: "HQ",
+    value: "hQ",
+    id: "hq2",
+  },
+  {
+    label: "Philadelphia",
+    value: "philadelphia",
+    id: "phl2",
+    disabled: true,
+    children: [
+      {
+        label: "Marketing & Sales PHL",
+        value: "marketingAndSalesPhl",
+        id: "marketingPHL2",
+      },
+      {
+        label: "Installation Office PHL",
+        value: "installationOfficePhl",
+        id: "installationPHL2",
+      },
+      {
+        label: "Warehouse PHL",
+        value: "warehousePhl",
+        id: "warehousePHL2",
+      },
+    ]
+  },
+  {
+    label: "New Jersey",
+    value: "newJersey",
+    id: "nj2",
+    children: [
+      {
+        label: "New Jersey",
+        value: "newJersey",
+        id: "nj12",
+        children: [
+          {
+            label: "Marketing & Sales NJ",
+            value: "marketingAndSalesNj",
+            id: "marketingNJ2",
+            disabled: true,
+          },
+          {
+            label: "Installation Office NJ",
+            value: "installationOfficeNj",
+            id: "installationNJ2",
+          },
+          {
+            label: "Warehouse NJ",
+            value: "warehouseNj",
+            id: "warehouseNJ2",
+          },
+        ],
+      },
+      {
+        label: "Princeton",
+        value: "princeton",
+        id: "princeton2",
+        children: [
+          {
+            label: "Marketing & Sales Princeton",
+            value: "marketingAndSalesPrinceton",
+            id: "marketingPR2",
+          },
+          {
+            label: "Installation Office Princeton",
+            value: "installationOfficePrinceton",
+            id: "installationPR2",
+            disabled: true,
+          },
+          {
+            label: "Warehouse Princeton",
+            value: "warehousePrinceton",
+            id: "warehousePR2",
+          },
+        ]
+      },
+    ]
+  },
+  {
+    label: "Maryland",
+    value: "maryland",
+    id: "MD2",
+    children: [
+      {
+        label: "Marketing & Sales MD",
+        value: "marketingAndSalesMd",
+        id: "marketingMD2",
+      },
+      {
+        label: "Installation Office MD",
+        value: "installationOfficeMd",
+        id: "installationMD2",
+      },
+      {
+        label: "Warehouse MD",
+        value: "warehouseMd",
+        id: "warehouseMD2",
+      },
+    ]
+  },
+  {
+    label: "Connecticut",
+    value: "connecticut",
+    id: "CT2",
+    children: [
+      {
+        label: "Marketing & Sales CT",
+        value: "marketingAndSalesCt",
+        id: "marketingCT2",
+      },
+      {
+        label: "Installation Office CT",
+        value: "installationOfficeCt",
+        id: "installationCT2",
+      },
+      {
+        label: "Warehouse CT",
+        value: "warehouseCt",
+        id: "warehouseCT2",
+      },
+    ]
+  },
+] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-single-disabled-rails",
+    name: "single_disabled",
+    tree_data: treeData,
+    input_name: "Power",
+    variant: "single"
+}) %>