playbook_ui 16.5.0 → 16.6.0.pre.rc.2

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 6dad913791ba83c1e16dae3cd53432e9dc72caa341c7086baeb9e7ace1180758
-  data.tar.gz: b8ff8d057a8497d69729707b76afb2387d5392d40f0f45a7dc23e3c0dec18cd9
+  metadata.gz: 0241a7424fee89393c3ca82262e22d714fd04ab5f2b97875c2753c5ce7718190
+  data.tar.gz: afdc40a7c200a413984f782045860916b5b7bf9d16dfd1b66c0f5ca55281e81c
 SHA512:
-  metadata.gz: 1a36e248676fabee8d0f16be45c18956cddd8bfb044b6074e8f1c1c1ddd4f6dc39891a1a410590a78b65fab06b2c07224ea4e140b1d806f958737496dbcee428
-  data.tar.gz: 53551eb53cff2019980003ac0cd9ffa4b7ef3d31d2292e4162234aa392146b4bb57308aaec81371203803e77384c4ea14796c5b2fc304a5c8d3dae3275e05444
+  metadata.gz: d3a2788e7b6b60d30c2e3d4bf3ff44a62b882c1ffed409d6348e332f91f644f9ef4c0f03a5d765734162d02b94d0f93a350a025818a6b4019e629ed816fe2be0
+  data.tar.gz: 7c29e7c8ca1734cb4b04cc79cfc64e4f783837108e969bec29fd254ed355dd74786851cf40470526c7cab32503a11e7eafd01c3930e09526fd48c963c2668117

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

@@ -0,0 +1,278 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "AdvancedTable",
+  "description": "AdvancedTable component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "actions": {
+      "type": "React.ReactNode[] | React.ReactNode",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "cascadeCollapse": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "columnDefinitions": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "columnGroupBorderColor": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "text_lt_default",
+        "text_lt_light",
+        "text_lt_lighter",
+        "text_dk_default",
+        "text_dk_light",
+        "text_dk_lighter"
+      ],
+      "default": "none"
+    },
+    "columnVisibilityControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "customSort": {
+      "type": "boolean;",
+      "platforms": [
+        "react"
+      ]
+    },
+    "enableToggleExpansion": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "all",
+        "header",
+        "none"
+      ],
+      "default": "header"
+    },
+    "enableSortingRemoval": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "expandedControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "expandByDepth": {
+      "type": "{ [key: string]: string | number }",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onExpandByDepthClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "initialLoadingRowsCount": {
+      "type": "number",
+      "platforms": [
+        "react"
+      ]
+    },
+    "inlineRowLoading": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "loading": {
+      "type": "boolean | string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "onRowToggleClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onToggleExpansionClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "pagination": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "paginationProps": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "responsive": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "scroll",
+        "none"
+      ],
+      "default": "scroll"
+    },
+    "rowStyling": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "scrollBarNone": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "selectableRows": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "showActionsBar": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": true
+    },
+    "persistToggleExpansionButton": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "sortControl": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "sortParentOnly": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "tableData": {
+      "type": "array",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "tableOptions": {
+      "type": "GenericObject",
+      "platforms": [
+        "react"
+      ]
+    },
+    "tableProps": {
+      "type": "GenericObject",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "toggleExpansionIcon": {
+      "type": "string | string[]",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onRowSelectionChange": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "onCustomSortClick": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "virtualizedRows": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "allowFullScreen": {
+      "type": "boolean",
+      "platforms": [
+        "react"
+      ]
+    },
+    "fullScreenControl": {
+      "type": "function",
+      "platforms": [
+        "react"
+      ]
+    },
+    "pinnedRows": {
+      "platforms": [
+        "rails"
+      ],
+      "type": "string"
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { AdvancedTable } from 'playbook-ui'",
+      "example": "<AdvancedTable columnGroupBorderColor=\"text_lt_default\" enableToggleExpansion=\"all\"></AdvancedTable>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"advanced_table\", props: { column_group_border_color: \"text_lt_default\", enable_toggle_expansion: \"all\" }) %>"
+    }
+  }
+}

data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb

@@ -7,7 +7,7 @@
       <% header_row.each_with_index do |cell, cell_index| %>
         <% header_component = object.header_component_info(cell, cell_index, row_index) %>
         <%= pb_rails(header_component[:name], props: header_component[:props]) do %>
-          <%= pb_rails("flex", props: { align: "center", justify: cell_index.zero? ? "start" : row_index === header_rows.size - 1 ? "end" : "center", text_align: (cell[:header_alignment] || "end") }) do %>
+          <%= pb_rails("flex", props: { align: "center", justify: object.header_flex_justify(cell, cell_index, row_index), text_align: object.header_flex_text_align(cell) }) do %>
             <% if cell_index.zero? && row_index === header_rows.size - 1 %>
               <% if object.selectable_rows && object.enable_toggle_expansion != "none" %>
                 <%= pb_rails("flex/flex_item", props: { padding_right: "xs" }) do %>

data/app/pb_kits/playbook/pb_advanced_table/table_header.rb

@@ -192,6 +192,19 @@ module Playbook
         { name: component_name, props: component_props }
       end
 
+      # Flex justify for header cells: column_styling header_alignment when present (otherwisedefault by column/row index)
+      def header_flex_justify(cell, cell_index, row_index)
+        ha = cell[:header_alignment]
+        return header_alignment_to_justify(ha) if ha.present?
+
+        default_header_flex_justify(cell_index, row_index)
+      end
+
+      # Flex text_align from column_styling header_alignment (default is end)
+      def header_flex_text_align(cell)
+        (cell[:header_alignment].presence || "end").to_s
+      end
+
     private
 
       # Find the original column definition for a cell
@@ -351,6 +364,26 @@ module Playbook
           row[:children] || row["children"]
         end
       end
+
+      # 2 header alignment helper methods
+      def header_alignment_to_justify(header_alignment)
+        case header_alignment.to_s
+        when "left" then "start"
+        when "center" then "center"
+        when "right" then "end"
+        else "end"
+        end
+      end
+
+      def default_header_flex_justify(cell_index, row_index)
+        if cell_index.zero?
+          "start"
+        elsif row_index == header_rows.size - 1
+          "end"
+        else
+          "center"
+        end
+      end
     end
   end
 end

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

@@ -0,0 +1,86 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "Avatar",
+  "description": "Avatar component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "grayscale": {
+      "type": "boolean",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": false
+    },
+    "imageAlt": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": ""
+    },
+    "imageUrl": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "name": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": ""
+    },
+    "size": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "md",
+        "lg",
+        "sm",
+        "xl",
+        "xs",
+        "xxs"
+      ],
+      "default": "md"
+    },
+    "status": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "away",
+        "offline",
+        "online"
+      ]
+    },
+    "componentOverlay": {
+      "platforms": [
+        "rails"
+      ]
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { Avatar } from 'playbook-ui'",
+      "example": "<Avatar size=\"md\" status=\"away\"></Avatar>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"avatar\", props: { size: \"md\", status: \"away\" }) %>"
+    }
+  }
+}

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

@@ -0,0 +1,208 @@
+{
+  "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
+  "name": "Background",
+  "description": "Background component",
+  "platforms": [
+    "react",
+    "rails"
+  ],
+  "props": {
+    "alt": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ]
+    },
+    "backgroundColor": {
+      "type": "ResponsiveProp<BackgroundColors> | BackgroundColors",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "gradient",
+        "dark",
+        "light",
+        "white",
+        "success",
+        "warning",
+        "error",
+        "info",
+        "neutral",
+        "primary",
+        "shadow",
+        "category_1",
+        "category_2",
+        "category_3",
+        "category_4",
+        "category_5",
+        "category_6",
+        "category_7",
+        "category_8",
+        "category_9",
+        "category_10",
+        "category_11",
+        "category_12",
+        "category_13",
+        "category_14",
+        "category_15",
+        "category_16",
+        "category_17",
+        "category_18",
+        "category_19",
+        "category_20",
+        "category_21",
+        "success_secondary",
+        "error_secondary",
+        "info_secondary",
+        "warning_secondary",
+        "neutral_secondary",
+        "primary_secondary",
+        "text_lt_default",
+        "text_lt_light",
+        "text_lt_lighter",
+        "text_dk_default",
+        "text_dk_light",
+        "text_dk_lighter",
+        "card_light",
+        "card_dark",
+        "data_1",
+        "data_2",
+        "data_3",
+        "data_4",
+        "data_5",
+        "data_6",
+        "data_7",
+        "data_8",
+        "border_light",
+        "border_dark",
+        "success_subtle",
+        "warning_subtle",
+        "error_subtle",
+        "info_subtle",
+        "neutral_subtle"
+      ],
+      "default": "light"
+    },
+    "backgroundSize": {
+      "type": "ResponsiveProp<BackgroundSizes> | BackgroundSizes",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "contain",
+        "cover",
+        "auto"
+      ],
+      "default": "cover"
+    },
+    "backgroundPosition": {
+      "type": "ResponsiveProp<string> | string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": null
+    },
+    "backgroundRepeat": {
+      "type": "ResponsiveProp<BackgroundRepeat> | BackgroundRepeat",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "repeat",
+        "repeat-x",
+        "repeat-y",
+        "no-repeat",
+        "space",
+        "round",
+        "initial",
+        "inherit"
+      ],
+      "default": "initial"
+    },
+    "imageUrl": {
+      "type": "ResponsiveProp<string> | string",
+      "platforms": [
+        "react",
+        "rails"
+      ]
+    },
+    "imageOverlay": {
+      "type": "enum",
+      "platforms": [
+        "react"
+      ],
+      "values": [
+        "opacity_1",
+        "opacity_2",
+        "opacity_3",
+        "opacity_4",
+        "opacity_5",
+        "opacity_6",
+        "opacity_7",
+        "opacity_8",
+        "opacity_9",
+        "opacity_10"
+      ]
+    },
+    "customColor": {
+      "type": "string",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "default": null
+    },
+    "tag": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "h1",
+        "h2",
+        "h3",
+        "h4",
+        "h5",
+        "h6",
+        "p",
+        "span",
+        "div",
+        "tr",
+        "th",
+        "td",
+        "thead",
+        "col"
+      ],
+      "default": "div"
+    },
+    "transition": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "fade",
+        "blur",
+        "scale"
+      ],
+      "default": null
+    }
+  },
+  "globalProps": true,
+  "usage": {
+    "react": {
+      "import": "import { Background } from 'playbook-ui'",
+      "example": "<Background backgroundColor=\"gradient\" backgroundSize=\"contain\"></Background>"
+    },
+    "rails": {
+      "import": null,
+      "example": "<%= pb_rails(\"background\", props: { background_color: \"gradient\", background_size: \"contain\" }) %>"
+    }
+  }
+}