playbook_ui 16.2.0.pre.alpha.play284314664 → 16.2.0.pre.rc.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 044d5e5f38ff25860322ebd1ecd3b0b485fec3c41dad28aecb5acf00900a27e7
-  data.tar.gz: 7911881ec69fd9a9da84896cc7dbc15f03dc3e5ac5b255ffe4346334d5f12cd7
+  metadata.gz: c23c9c569be92144973f36beb52b16a31324a557d8a3fce6b9662a65c3fe9495
+  data.tar.gz: 5af45dd28792072ef8c0c4ef0a237b4036d09cf324e91fa87b348df9f406d834
 SHA512:
-  metadata.gz: 28a32aac327245a7856b05d3f248e280b5dc53e19f698c4d4420732e85162ecba562488e2e13e2aac1d555d33cb532ef80e6bfde2ce60addfe8aa0fd4a92a492
-  data.tar.gz: e844f51123c5564e67ec3563333216f8329f3a19ff6852e870cc817424b1fb9e7083c4dad92c6ff0c24fd3de84e6ef814189cf2454a702624e28db4781522919
+  metadata.gz: a7dc0f4a93cc629eaac57de2a013b831479c928c4ff459af2926f38221b201e42dda67d06f20112d64ccc1c7732b47f37c2efc6301c3f7c216f11c915aa9a564
+  data.tar.gz: ca66a6db50a94ea148c6afbb58fccbb0d302f2c2ddae2aa1d6b530687809c39e3bd01849e051c56b31e4ac1301fb9fffc0987d8460f63c5e349fc05dde321f73

data/app/pb_kits/playbook/pb_advanced_table/Components/RegularTableView.tsx

@@ -66,18 +66,8 @@ const TableCellRenderer = ({
         // Find the "owning" colDefinition by accessor. Needed for multi column logic
         const colDef = findColumnDefByAccessor(columnDefinitions ?? [], column.id)
         const cellAlignment = colDef?.columnStyling?.cellAlignment ?? "right"
-        
-        // Support function-based styling for conditional rendering
-        const cellFontColorValue = colDef?.columnStyling?.fontColor
-        const cellFontColor = typeof cellFontColorValue === 'function' 
-          ? cellFontColorValue(row) 
-          : cellFontColorValue
-        
-        const cellBackgroundColorValue = colDef?.columnStyling?.cellBackgroundColor
-        const cellBackgroundColor = typeof cellBackgroundColorValue === 'function' 
-          ? cellBackgroundColorValue(row) 
-          : cellBackgroundColorValue
-        
+        const cellFontColor = colDef?.columnStyling?.fontColor
+        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
         const paddingValue = colDef?.columnStyling?.cellPadding ?? customRowStyle?.cellPadding
         const paddingClass = paddingValue ? `p_${paddingValue}` : undefined
 

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

@@ -920,39 +920,6 @@ test("columnStyling.backgroundColor works as excpected", () => {
   expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.error_subtle });
 });
 
-test("columnStyling.cellBackgroundColor works as expected with function", () => {
-  const styledColumnDefs = [
-    {
-      accessor: "year",
-      label: "Year",
-      cellAccessors: ["quarter", "month", "day"],
-    },
-    {
-      accessor: "newEnrollments",
-      label: "New Enrollments",
-      columnStyling:{
-        cellBackgroundColor: (row) => row.original.newEnrollments > 15 ? colors.success_subtle : colors.error_subtle,
-        fontColor: (row) => row.original.newEnrollments > 15 ? colors.success : colors.error,
-      },    
-    },
-    {
-      accessor: "scheduledMeetings",
-      label: "Scheduled Meetings",
-    },
-  ];
-
-  render(
-    <AdvancedTable
-        columnDefinitions={styledColumnDefs}
-        data={{ testid: testId }}
-        tableData={MOCK_DATA}
-    />
-  );
-
-  const firstEnrollmentCell = screen.getAllByText("20")[0].closest("td");
-  expect(firstEnrollmentCell).toHaveStyle({ backgroundColor: colors.success_subtle, color: colors.success });
-}); 
-
 test("columnStyling.headerBackgroundColor works as excpected", () => {
   const styledColumnDefs = [
     {

data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md

@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
 
 ### sortIcon
 
-An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide-short", "arrow-down-short-wide"]`. All strings must be valid FA icons.
+An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.

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

@@ -78,7 +78,6 @@ examples:
   - advanced_table_column_styling: Column Styling
   - advanced_table_column_styling_column_headers: Column Styling with Multiple Headers
   - advanced_table_column_styling_background: Column Styling Background Color
-  - advanced_table_column_styling_background_custom: Column Styling Background Color (Custom)
   - advanced_table_column_styling_background_multi: Column Styling Background Color with Multiple Headers
   - advanced_table_padding_control: Padding Control using Column Styling
   - advanced_table_column_border_color: Column Group Border Color

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

@@ -47,5 +47,4 @@ export { default as AdvancedTableSortPerColumnForMultiColumn } from './_advanced
 export { default as AdvancedTablePaddingControl } from './_advanced_table_padding_control.jsx'
 export { default as AdvancedTablePaddingControlPerRow } from './_advanced_table_padding_control_per_row.jsx'
 export { default as AdvancedTableColumnStylingBackground } from './_advanced_table_column_styling_background.jsx'
-export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
-export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'
+export { default as AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'

data/app/pb_kits/playbook/pb_body/_body.scss

@@ -30,7 +30,7 @@
 .pb_body_kit_error_neutral,
 .pb_body_kit_error_positive,
 .pb_body_kit_error_negative {
-  @include pb_body($text_default_color);
+  @include pb_body($text_lt_default);
   
   b,
   strong {
@@ -38,9 +38,9 @@
   }
 
   a {
-    color: $text_link;
+    color: $primary;
     &:hover {
-      color: $text_default_color;
+      color: $text_lt_default;
     }
   }
 
@@ -110,7 +110,7 @@
   @include pb_body_dark();
   
   a {
-    color: $text_link_dark;
+    color: $active_dark;
   }
 }
 

data/app/pb_kits/playbook/pb_body/_body_mixins.scss

@@ -3,38 +3,38 @@
 @import "../tokens/typography";
 
 $pb_body_colors: (
-  default: $text_default_color,
-  light: $text_light,
-  lighter: $text_lighter,
-  link: $text_link,
-  error: $text_error,
-  success: $text_success,
+  default: $text_lt_default,
+  light: $text_lt_light,
+  lighter: $text_lt_lighter,
+  link: $primary,
+  error: $error,
+  success: $text_lt_success_sm,
 );
 
 $pb_dark_body_colors: (
-  default: $text_default_dark,
-  light: $text_light_dark,
-  lighter: $text_lighter_dark,
-  link: $text_link_dark,
-  error: $text_error_dark,
-  success: $text_success_dark,
+  default: $text_dk_default,
+  light: $text_dk_light,
+  lighter: $text_dk_lighter,
+  link: $active_dark,
+  error: $error,
+  success: $text_dk_success_sm,
 );
 
 // Order is important here!
 $pb_body_status: (
-  default: $text_default_color,
-  negative: $text_error,
-  dark_error: $text_error_dark,
-  positive: $text_success,
+  default: $text_lt_default,
+  negative: $error,
+  dark_error: $error_dark_body,
+  positive: $text_lt_success_sm,
 );
 
 $pb_dark_body_status: (
-  default: $text_default_dark,
-  negative: $text_error_dark,
-  positive: $text_success_dark,
+  default: $text_dk_default,
+  negative: $error_dark,
+  positive: $text_dk_success_sm,
 );
 
-@mixin pb_body($color: $text_default_color) {
+@mixin pb_body($color: $text_lt_default) {
   line-height: $lh_tight;
   color: $color;
   font-size: $text_default;
@@ -44,34 +44,34 @@ $pb_dark_body_status: (
 
 // Colors ======================
 @mixin pb_body_light {
-  @include pb_body($text_light);
+  @include pb_body($text_lt_light);
 }
 
 @mixin pb_body_lighter {
-  @include pb_body($text_lighter);
+  @include pb_body($text_lt_lighter);
 }
 
 @mixin pb_body_dark {
-  @include pb_body($text_default_dark);
+  @include pb_body($text_dk_default);
 }
 
 @mixin pb_body_light_dark {
-  @include pb_body($text_light_dark);
+  @include pb_body($text_dk_light);
 }
 
 @mixin pb_body_lighter_dark {
-  @include pb_body($text_lighter_dark);
+  @include pb_body($text_dk_lighter);
 }
 
 // Statuses =====================
 @mixin pb_body_negative {
-  @include pb_body($text_error);
+  @include pb_body($error);
 }
 
 @mixin pb_body_dark_error {
-  @include pb_body($text_error_dark);
+  @include pb_body($error_dark_body);
 }
 
 @mixin pb_body_positive {
-  @include pb_body($text_success);
+  @include pb_body($success);
 }

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

@@ -112,46 +112,4 @@ $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: when pb_button_content is empty (no text). Do not match when content has
-  // text + icon (e.g. "Exit Fullscreen" + FA icon) which can include empty spans.
-  &.pb_button_icon_only,
-  &:has(.pb_button_content: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,13 +51,9 @@ 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}`)
@@ -67,7 +63,6 @@ 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,21 +16,17 @@
             <% end %>
         <% end %>
     <% else %>
-    <% 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 %>
+    <% 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>
     <% 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.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 %>
+    <% 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>
     <% end %>
     <% end %>
 

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

@@ -73,10 +73,6 @@ 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
@@ -86,7 +82,6 @@ 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/button.test.js

@@ -131,108 +131,3 @@ test('should render child target prop', () => {
     expect(kit).toHaveAttribute('target', 'child')
     expect(kit).not.toHaveAttribute('rel')
 })
-
-describe('icon-only button', () => {
-    test('adds pb_button_icon_only class when icon is provided without text', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-only-test' }}
-                icon="plus"
-            />
-        )
-
-        const kit = screen.getByTestId('icon-only-test')
-        expect(kit).toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when text is provided', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-with-text-test' }}
-                icon="plus"
-                text="Click me"
-            />
-        )
-
-        const kit = screen.getByTestId('icon-with-text-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when children are provided', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-with-children-test' }}
-                icon="plus"
-            >
-                Click me
-            </Button>
-        )
-
-        const kit = screen.getByTestId('icon-with-children-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('does not add pb_button_icon_only class when variant is reaction', () => {
-        render(
-            <Button
-                data={{ testid: 'reaction-icon-test' }}
-                icon="plus"
-                variant="reaction"
-            />
-        )
-
-        const kit = screen.getByTestId('reaction-icon-test')
-        expect(kit).not.toHaveClass('pb_button_icon_only')
-    })
-
-    test('adds pb_button_icon_only class with different variants', () => {
-        const variants = ['primary', 'secondary', 'link', 'danger']
-        
-        variants.forEach(variant => {
-            const { unmount } = render(
-                <Button
-                    data={{ testid: `icon-only-${variant}-test` }}
-                    icon="plus"
-                    variant={variant}
-                />
-            )
-
-            const kit = screen.getByTestId(`icon-only-${variant}-test`)
-            expect(kit).toHaveClass('pb_button_icon_only')
-            unmount()
-        })
-    })
-
-    test('adds pb_button_icon_only class with loading state', () => {
-        render(
-            <Button
-                data={{ testid: 'icon-only-loading-test' }}
-                icon="plus"
-                loading
-            />
-        )
-
-        const kit = screen.getByTestId('icon-only-loading-test')
-        expect(kit).toHaveClass('pb_button_icon_only')
-        expect(kit).toHaveClass('pb_button_loading')
-    })
-
-    test('adds pb_button_icon_only class with size variants', () => {
-        const sizes = ['sm', 'md', 'lg']
-        
-        sizes.forEach(size => {
-            const { unmount } = render(
-                <Button
-                    data={{ testid: `icon-only-${size}-test` }}
-                    icon="plus"
-                    size={size}
-                />
-            )
-
-            const kit = screen.getByTestId(`icon-only-${size}-test`)
-            expect(kit).toHaveClass('pb_button_icon_only')
-            expect(kit).toHaveClass(`pb_button_size_${size}`)
-            unmount()
-        })
-    })
-})

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

@@ -13,7 +13,6 @@ 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
@@ -28,7 +27,6 @@ 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,7 +4,6 @@ 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_caption/_caption.scss

@@ -88,7 +88,7 @@
 .pb_caption_kit_base_link,
 .pb_caption_kit_lg_link,
 .pb_caption_kit_xl_link {
-  color: $text_link;
+  color: $primary;
 }
 
 // Dark theme variants

data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss

@@ -2,33 +2,33 @@
 @import "../tokens/typography";
 
 $pb_caption_colors: (
-  default:        $text_default_color,
-  light:          $text_light,
-  link:           $text_link,
-  lighter:        $text_lighter,
-  success:        $text_success,
-  error:          $text_error,
+  default:        $text_lt_default,
+  light:          $text_lt_light,
+  link:           $primary,
+  lighter:        $text_lt_lighter,
+  success:        $text_lt_success_sm,
+  error:          $error,
 );
 
 $pb_dark_caption_colors: (
-  default:        $text_default_dark,
-  light:          $text_light_dark,
-  lighter:        $text_lighter_dark,
-  link:           $text_link_dark,
-  success:        $text_success_dark,
-  error:          $text_error_dark,
+  default:        $text_dk_default,
+  light:          $text_dk_light,
+  lighter:        $text_dk_lighter,
+  link:           $active_dark,
+  success:        $text_dk_success_sm,
+  error:          $error_dark,
 );
 
 
 @mixin caption($font_size: $font_smaller, $font_weight: $bold) {
   font-weight: $font_weight;
-  color: $text_light;
+  color: $text_lt_light;
   text-transform: uppercase;
   font-size: $font_size;
   letter-spacing: $lspace_loosest;
 }
 
-@mixin caption_color($color: $text_light) {
+@mixin caption_color($color: $text_lt_light) {
   color: $color;
 }
 
@@ -43,5 +43,5 @@ $pb_dark_caption_colors: (
 }
 
 @mixin caption_dark {
-  color: $text_light_dark;
+  color: $text_dk_light;
 }

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.html.erb

@@ -1,6 +1,4 @@
-<%= pb_rails("caption", props: { text: "Caption light" }) %>
-<%= pb_rails("caption", props: { text: "Caption default", color: "default" }) %>
-<%= pb_rails("caption", props: { text: "Caption lighter", color: "lighter" }) %>
-<%= pb_rails("caption", props: { text: "Caption success", color: "success" }) %>
-<%= pb_rails("caption", props: { text: "Caption error", color: "error" }) %>
-<%= pb_rails("caption", props: { text: "Caption link", color: "link" }) %>
+<%= pb_rails("caption", props: { text: "Test colors" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "success" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "error" }) %>
+<%= pb_rails("caption", props: { text: "Test colors", color: "link" }) %>

data/app/pb_kits/playbook/pb_caption/docs/_caption_colors.jsx

@@ -4,33 +4,23 @@ import Caption from "../../pb_caption/_caption"
 const CaptionColors = (props) => {
   return (
     <div>
-      <Caption 
-          text="Caption light"
-          {...props}
-      />
-      <Caption
-          color="default"
-          text="Caption default"
-          {...props}
-      />
       <Caption
-          color="lighter"
-          text="Caption lighter"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="success"
-          text="Caption success"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="error"
-          text="Caption error"
+          text="Test colors"
           {...props}
       />
       <Caption
           color="link"
-          text="Caption link"
+          text="Test colors"
           {...props}
       />
     </div>