playbook_ui 16.1.0.pre.alpha.play276813969 → 16.1.0.pre.alpha.play277814027

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 387f03d299bddebe2e4ac7e9800fddf28bb00cdeceb0ffcd9a5c4ea1ed211d20
-  data.tar.gz: 03b9b1cbcb66afd3afd4d28eb8c0226dc4d7a2ddc883dadb0844bc427f857831
+  metadata.gz: 1ba1ccdd547ffbb9a3028c4f7ebe9c545e978f3a156cb09f8d23f72be12ca8e5
+  data.tar.gz: c99e2ee648ba1e7a07f2312a927705a23b2c0d231d25e6d9f7ff896c1994cc47
 SHA512:
-  metadata.gz: e4f7c1a63a205b06dadc63869cbfb9f761d88775d9d625efe37bd896d1cbd5269107b71fc0c24714bb781c2b314e949aa5a37bcab80eed8689fe0d90b72796f9
-  data.tar.gz: 7933fda91c7fe525372cb559bcc56147fe86bc877cac737603ee0694b62f34fdef93cd2e40b88860de6a51f0c389e21ac2ae6d858cd1cb14531a31083e78bd7c
+  metadata.gz: d3cd8f6f1ce697e21eba5d9e2825d2b9e405282cde1f2944dae69b6bf159c643e10ed0726cd88015fbf15c4da6727408afb25b318c8196bcc58457c976cb7bf2
+  data.tar.gz: 2d7b6db05ed92ce9a0d2c0f8a4bfcb374f4bea28e4807b1591d38a1a792902ba45bd086e4b36dc696330187142185f6995f566bec7d4b3e851363571bd2d7c76

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

@@ -66,8 +66,18 @@ 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"
-        const cellFontColor = colDef?.columnStyling?.fontColor
-        const cellBackgroundColor = colDef?.columnStyling?.cellBackgroundColor
+        
+        // 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 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,6 +920,39 @@ 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_column_styling_background_custom.jsx

@@ -0,0 +1,71 @@
+import React from "react"
+import AdvancedTable from '../_advanced_table'
+import colors from '../../tokens/exports/_colors.module.scss'
+import MOCK_DATA from "./advanced_table_mock_data.json"
+import  Flex  from '../../pb_flex/_flex'
+import  Title  from '../../pb_title/_title'
+import  Body  from '../../pb_body/_body'
+
+
+const AdvancedTableColumnStylingBackgroundCustom = (props) => {
+  const columnDefinitions = [
+{
+      accessor: "year",
+      label: "Year",
+      cellAccessors: ["quarter", "month", "day"],
+      customRenderer: (row, value) => (
+        <Flex flexDirection="column">
+          <Title size={4}
+              text={value} 
+          />
+          <Body text="lorem ipsum" />
+          <Body text="lorem ipsum" />
+        </Flex>
+      ), 
+    },
+    {
+      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",
+      columnStyling:{
+        cellBackgroundColor: (row) => row.original.scheduledMeetings >= 15 ? colors.info_subtle : colors.warning_subtle
+      },
+    },
+    {
+      accessor: "attendanceRate",
+      label: "Attendance Rate",
+      columnStyling:{cellBackgroundColor: colors.info, headerBackgroundColor: colors.info, fontColor: colors.white, headerFontColor: colors.white},
+    },
+    {
+      accessor: "completedClasses",
+      label: "Completed Classes",
+    },
+    {
+      accessor: "classCompletionRate",
+      label: "Class Completion Rate",
+    },
+    {
+      accessor: "graduatedStudents",
+      label: "Graduated Students",
+    },
+  ]
+
+  return (
+    <div>
+      <AdvancedTable
+          columnDefinitions={columnDefinitions}
+          tableData={MOCK_DATA}
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default AdvancedTableColumnStylingBackgroundCustom

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

@@ -0,0 +1,4 @@
+`cellBackgroundColor` and `fontColor` can also accept functions for conditional styling based on row data. The function receives the row object and returns a color value.
+
+See the code snippet below for more details.
+

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

@@ -78,6 +78,7 @@ 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,4 +47,5 @@ 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 AdvancedTableColumnStylingBackgroundMulti } from './_advanced_table_column_styling_background_multi.jsx'
+export { default as AdvancedTableColumnStylingBackgroundCustom } from './_advanced_table_column_styling_background_custom.jsx'

data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx

@@ -40,7 +40,7 @@ type DatePickerProps = {
   maxDate: string,
   minDate: string,
   name: string,
-  pickerId?: string,
+  pickerId: string,
   placeholder?: string,
   positionElement?: HTMLElement | null,
   scrollContainer?: string,
@@ -196,6 +196,8 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
   const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
 
+  const errorId = error ? `${pickerId}-error` : undefined
+
   return (
     <div
         {...ariaProps}
@@ -211,14 +213,18 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
       >
 
         {!hideLabel && (
-          <Caption
-              className="pb_date_picker_kit_label"
-              text={label}
-          />
+           <label htmlFor={pickerId}>
+            <Caption
+                className="pb_date_picker_kit_label"
+                text={label}
+            />
+          </label>
         )}
           <>
             <div className="date_picker_input_wrapper">
               <input
+                  aria-describedby={errorId}
+                  aria-invalid={!!error}
                   autoComplete="off"
                   className="date_picker_input"
                   disabled={disableInput}
@@ -232,6 +238,9 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
 
               {error &&
                   <Body
+                      aria={{ atomic: "true", live: "polite" }}
+                      htmlOptions={{ role: "alert" }}
+                      id={errorId}
                       status="negative"
                       text={error}
                       variant={null}

data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_default.md

@@ -0,0 +1 @@
+`pickerId`/`picker_id` is a **required prop** to instantiate the Date Picker. The presence of `pickerId`/`picker_id` in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.

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

@@ -119,16 +119,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const [isDropDownClosed, setIsDropDownClosed, toggleDropdown] = useDropdown(isClosed);
 
-    // Use a suffix for the trigger ID to avoid conflict with the outer div's id
-    const sanitizeForId = (str: string) =>
-      str.toLowerCase().replace(/\s+/g, "_").replace(/[^a-z0-9_]/g, "");
-    const selectId = id
-      ? `${id}_trigger`
-      : label
-        ? sanitizeForId(label)
-        : undefined;
-    const errorId = error ? `${selectId}-error` : undefined;
-
     const [filterItem, setFilterItem] = useState("");
     const initialSelected = useMemo(() => {
       // Handle quickpick variant with string defaultValue (e.g., "This Month")
@@ -161,19 +151,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
 
     const dropdownRef = useRef(null);
     const inputRef = useRef<HTMLInputElement>(null);
-    const inputWrapperRef = useRef<HTMLDivElement | null>(null);
+    const inputWrapperRef = useRef(null);
     const dropdownContainerRef = useRef(null);
 
-    const handleLabelClick = (e: React.MouseEvent) => {
-      e.stopPropagation();
-      if (selectId) {
-        const trigger = document.getElementById(selectId);
-        if (trigger) trigger.focus();
-      }
-      setIsInputFocused(true);
-      toggleDropdown();
-    };
-
     const selectedArray = Array.isArray(selected)
     ? selected
     : selected && Object.keys(selected).length
@@ -431,12 +411,9 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     autocomplete,
                     clearable,
                     dropdownContainerRef,
-                    error,
-                    errorId,
-                    filterItem,
                     filteredOptions,
+                    filterItem,
                     focusedOptionIndex,
-                    label,
                     formPillProps,
                     handleBackspace,
                     handleChange,
@@ -446,7 +423,6 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     inputWrapperRef,
                     isDropDownClosed,
                     isInputFocused,
-                    selectId,
                     multiSelect,
                     onSelect,
                     optionsWithBlankSelection,
@@ -458,20 +434,13 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                     toggleDropdown
                 }}
             >
-                {label && (
-                    <label
-                        data-dropdown="pb-dropdown-label"
-                        htmlFor={selectId}
-                        onClick={handleLabelClick}
-                    >
-                        <Caption
-                            className="pb_dropdown_kit_label"
-                            dark={dark}
-                            marginBottom="xs"
-                            text={label}
-                        />
-                    </label>
-                )}
+                {label &&
+                    <Caption
+                        dark={dark}
+                        marginBottom="xs"
+                        text={label}
+                    />
+                }
                 <div className={`dropdown_wrapper ${error ? 'error' : ''}`}
                     onBlur={() => {
                         // Debounce to delay the execution to prevent jumpiness in Focus state
@@ -504,16 +473,12 @@ let Dropdown = (props: DropdownProps, ref: any): React.ReactElement | null => {
                         </>
                     )}
 
-                    {error && (
+                    {error &&
                         <Body
-                            aria={{ atomic: "true", live: "polite" }}
-                            dark={dark}
-                            htmlOptions={{ role: "alert" }}
-                            id={errorId}
                             status="negative"
                             text={error}
                         />
-                    )}
+                    }
                 </div>
             </DropdownContext.Provider>
         </div>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb

@@ -1,13 +1,10 @@
-<%
+<% 
   options = [
     { label: 'United States', value: 'unitedStates', id: 'us' },
     { label: 'Canada', value: 'canada', id: 'ca' },
     { label: 'Pakistan', value: 'pakistan', id: 'pk' },
   ]
+
 %>
 
-<%= pb_rails("dropdown", props: {
-  id: "select_a_country",
-  label: "Select a Country",
-  options: options
-}) %>
+<%= pb_rails("dropdown", props: {options: options, label: "Select a Country"}) %>

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx

@@ -25,7 +25,6 @@ const DropdownDefault = (props) => {
   return (
   <div>
     <Dropdown
-        id="select_a_country"
         label="Select a Country"
         options={options}
         {...props}

data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md

@@ -1,3 +1 @@
-The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element. 
-
-Add an `id` to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.
+The top-level Dropdown component optionally accepts any string through a `label` prop to produce a label above your trigger element.

data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb

@@ -1,8 +1,6 @@
 <%= pb_content_tag do %>
     <% if object.label.present? %>
-        <label for="<%= object.select_id %>" data-dropdown="pb-dropdown-label">
-            <%= pb_rails("caption", props: { text: object.label, margin_bottom: "xs", classname: "pb_dropdown_kit_label", dark: object.dark }) %>
-        </label>
+        <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
     <% end %>
     <div class="dropdown_wrapper<%= error_class %>" style="position: relative">
         <input
@@ -18,11 +16,9 @@
         <% end %>
         <% if content.present? %>
             <%= content.presence %>
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% else %>
-            <%= pb_rails("dropdown/dropdown_trigger", props: { autocomplete: object.autocomplete, multi_select: object.multi_select, placeholder: object.placeholder, select_id: object.select_id, label: object.label, error_id: object.error_id, error: object.error }) %>
+            <%= pb_rails("dropdown/dropdown_trigger", props:{ autocomplete: object.autocomplete, multi_select:object.multi_select, placeholder: object.placeholder }) %>
             <%= pb_rails("dropdown/dropdown_container", props: { searchbar: object.searchbar, constrain_height: object.constrain_height }) do %>
                 <% if options_with_blank.present? %>
                     <% options_with_blank.each do |option| %>
@@ -31,9 +27,7 @@
                 <% end %>
             <% end %>
 
-            <% if object.error.present? %>
-                <%= pb_rails("body", props: { status: "negative", text: object.error, id: object.error_id, aria: { atomic: "true", live: "polite" }, html_options: { role: "alert" }, dark: object.dark }) %>
-            <% end %>
+            <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
         <% end %>
     </div>
 <% end %>

data/app/pb_kits/playbook/pb_dropdown/dropdown.rb

@@ -10,7 +10,6 @@ module Playbook
       prop :label, type: Playbook::Props::String
       prop :name, type: Playbook::Props::String
       prop :error, type: Playbook::Props::String
-      prop :id, type: Playbook::Props::String
       prop :required, type: Playbook::Props::Boolean,
                       default: false
       prop :default_value
@@ -69,14 +68,6 @@ module Playbook
         generate_classname("pb_dropdown", variant, separators_class)
       end
 
-      def select_id
-        id.presence || (label.present? ? label.downcase.gsub(/\s+/, "_").gsub(/[^a-z0-9_]/, "") : nil)
-      end
-
-      def error_id
-        error.present? ? "#{select_id || 'dropdown_trigger'}-error" : nil
-      end
-
     private
 
       def error_class

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb

@@ -1,10 +1,6 @@
 <%= pb_content_tag do %>
     <% if content.present? %>
-        <div style="display: inline-block" tabindex="0" data-dropdown="pb-dropdown-trigger" data-dropdown-custom-trigger aria-invalid="<%= object.error.present? %>"
-            <% if object.label.present? %> aria-label="<%= [object.label, object.default_display_placeholder].join(', ') %>"<% end %>
-            <% if object.select_id.present? %> id="<%= object.select_id %>"<% end %>
-            <% if object.error_id.present? %> aria-describedby="<%= object.error_id %>"<% end %>
-        >
+        <div style="display: inline-block" tabindex="0" data-dropdown-custom-trigger>
           <%= content.presence %>
         </div>
     <% else %>
@@ -13,11 +9,10 @@
         border_radius:"lg",
         classname: object.trigger_wrapper_classes,
         cursor: object.autocomplete ? "text" : "pointer",
-        id: object.select_id,
         justify: "between",
         padding_x:"sm",
         padding_y:"xs",
-        html_options: { tabindex: "0", "aria-label": object.label.present? ? [object.label, object.default_display_placeholder].join(", ") : nil, "aria-describedby": object.error_id, "aria-invalid": object.error.present?, "data-dropdown": "pb-dropdown-trigger" }
+        html_options: {tabindex:"0"}
         }) do %>
         <%= pb_rails("flex/flex_item", props: { fixed_size: object.multi_select ? "85%" : "" }) do %>
             <%= pb_rails("flex", props: {align: "center"}) do %>

data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb

@@ -13,10 +13,6 @@ module Playbook
                           default: false
       prop :multi_select, type: Playbook::Props::Boolean,
                           default: false
-      prop :select_id, type: Playbook::Props::String
-      prop :label, type: Playbook::Props::String
-      prop :error_id, type: Playbook::Props::String
-      prop :error, type: Playbook::Props::String
 
       def data
         Hash(prop(:data)).merge(dropdown_trigger: true, dropdown_placeholder: default_display_placeholder)