playbook_ui_docs 16.10.0.pre.alpha.PLAY3088figmacodeconnecttrial17604 → 16.10.0.pre.alpha.play3040dropdownkitdisableoptions17375

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e41427b065be326b7f39a9c50c7646bb37c8ba6e468a2bac3bb56251c12cbc05
-  data.tar.gz: 6c8b2e841fa09acb651b1d5d3eaeb94c0d9b9bbdae92327e8cd14b394ac499e8
+  metadata.gz: 46df9960ac3a725146e8bd548c573dde9ccfea623d1828b1e60de1a5d8470e2f
+  data.tar.gz: 38b340bb6f84093cc315a3e2360bc1b1735367f648f4d2a8352bb4be67c31f67
 SHA512:
-  metadata.gz: f979696ac74d9016cdb550585dd4233b39a6fb0f13fbe0b02976d67cf4ee89b0c634c7e277ae2e7547d3bdbdb712425bb4c9be18ab7f56a2d1f6528b3e6d817c
-  data.tar.gz: f3e4112c27741620a58b203ec014fa716cdfaf5599e7e424986f3e8c4661f3430ec59b0f5d34ef8d26e918f21f94957d6e59d9de6b9638c98979f9f8451abded
+  metadata.gz: c6fa92505aa9352e36c25083e28b705d7f7fe13dea8367c7cf83e7ad80c5e05d1ceb1b5e689f62d3f7f5e3087ef65ee1acf9f1ed612483babc6cbad35813db6a
+  data.tar.gz: 6023d492200076c7127bca4838e8169b510a9b3ffa564d1c7ef68c039e217bebebdc244f650a34d2b1889b7cb1b6651214771753c0dc94e6499cb6c703b86aed

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

@@ -1,7 +1,7 @@
-Use the `pinnedRows` prop to pin specific rows to the top or bottom of an Advanced Table. Pinned rows will remain at the top or bottom when scrolling through table data and will not change position if sorting is used.
+Use the `pinnedRows` prop to pin specific rows to the top of an Advanced Table. Pinned rows will remain at the top when scrolling through table data and will not change position if sorting is used.
 
 **NOTE:** 
 - Sticky header required: Pinned rows must be used with `sticky: true` via `tableProps` (works with both responsive and non-responsive tables)
 - Row ids required: Each object within the `tableData` Array must contain a unique id in order to attach an id to all Rows for this to function. 
-- `pinnedRows` takes an array of row ids to the `top` or `bottom` property, or both. `top` is shown in the code snippet below.
+- `pinnedRows` takes an array of row ids to the `top` property as shown in the code snippet below. 
 - For expandable rows, use the parent id in `pinnedRows`, all its children will automatically be pinned with it. If id for a child is passed in without parent being pinned, nothing will be pinned. 

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

@@ -67,9 +67,7 @@ examples:
   - advanced_table_column_headers_custom_cell: Multi-Header Columns with Custom Cells
   - advanced_table_column_headers_vertical_border: Multi-Header Columns with Vertical Borders
   - advanced_table_no_subrows: Table with No Subrows or Expansion
-  - advanced_table_pinned_rows: Pinned Rows (Top)
-  - advanced_table_pinned_rows_bottom: Pinned Rows (Bottom)
-  - advanced_table_pinned_rows_both: Pinned Rows (Both)
+  - advanced_table_pinned_rows: Pinned Rows
   - advanced_table_selectable_rows: Selectable Rows
   - advanced_table_selectable_rows_no_subrows_react: Selectable Rows (No Subrows)
   - advanced_table_selectable_rows_actions: Selectable Rows (With Actions)
@@ -91,4 +89,5 @@ examples:
   - 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
+  - advanced_table_fullscreen: Fullscreen
   - advanced_table_infinite_scroll: Infinite Scroll

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

@@ -52,6 +52,4 @@ export { default as AdvancedTableColumnStylingBackground } from './_advanced_tab
 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 AdvancedTableCascadeCollapse } from './_advanced_table_cascade_collapse.jsx'
-export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'
-export { default as AdvancedTablePinnedRowsBottom } from './_advanced_table_pinned_rows_bottom.jsx'
-export { default as AdvancedTablePinnedRowsBoth } from './_advanced_table_pinned_rows_both.jsx'
+export { default as AdvancedTableSortParentOnly } from './_advanced_table_sort_parent_only.jsx'

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

@@ -7,7 +7,6 @@
     "clearable": true,
     "closeOnClick": "any",
     "constrainHeight": false,
-    "disabled": false,
     "multiSelect": false,
     "separators": true,
     "variant": "default",
@@ -26,59 +25,12 @@
       {
         "label": "Canada",
         "value": "canada",
-        "id": "ca",
-        "disabled": true
+        "id": "ca"
       },
       {
         "label": "Pakistan",
         "value": "pakistan",
         "id": "pk"
-      },
-      {
-        "label": "Mexico",
-        "value": "mexico",
-        "id": "mx",
-        "disabled": true
-      },
-      {
-        "label": "United Kingdom",
-        "value": "unitedKingdom",
-        "id": "gb"
-      },
-      {
-        "label": "India",
-        "value": "india",
-        "id": "in"
-      },
-      {
-        "label": "Australia",
-        "value": "australia",
-        "id": "au"
-      },
-      {
-        "label": "New Zealand",
-        "value": "newZealand",
-        "id": "nz"
-      },
-      {
-        "label": "Italy",
-        "value": "italy",
-        "id": "it"
-      },
-      {
-        "label": "Germany",
-        "value": "germany",
-        "id": "de"
-      },
-      {
-        "label": "Brazil",
-        "value": "brazil",
-        "id": "br"
-      },
-      {
-        "label": "Philippines",
-        "value": "philippines",
-        "id": "ph"
       }
     ],
     "placeholder": "Select a country"
@@ -123,8 +75,7 @@
         "separators",
         "formPillProps",
         "activeStyle",
-        "dark",
-        "disabled"
+        "dark"
       ]
     },
     {
@@ -139,28 +90,72 @@
       "name": "Default trigger",
       "props": {
         "variant": "default",
-        "placeholder": "Select a country"
+        "placeholder": "Select a country",
+        "options": [
+          {
+            "label": "United States",
+            "value": "unitedStates",
+            "id": "us"
+          },
+          {
+            "label": "Canada",
+            "value": "canada",
+            "id": "ca"
+          },
+          {
+            "label": "Mexico",
+            "value": "mexico",
+            "id": "mx"
+          }
+        ]
       }
     },
     {
       "name": "With label",
       "props": {
         "label": "Select a Country",
-        "placeholder": "Choose a country"
-      }
-    },
-    {
-      "name": "Disabled options",
-      "props": {
-        "label": "Select a Country",
-        "placeholder": "Choose a country"
+        "placeholder": "Choose a country",
+        "options": [
+          {
+            "label": "United States",
+            "value": "unitedStates",
+            "id": "us"
+          },
+          {
+            "label": "Canada",
+            "value": "canada",
+            "id": "ca"
+          },
+          {
+            "label": "Pakistan",
+            "value": "pakistan",
+            "id": "pk"
+          }
+        ]
       }
     },
     {
       "name": "Subtle Variant",
       "props": {
         "variant": "subtle",
-        "separators": false
+        "separators": false,
+        "options": [
+          {
+            "label": "Alpha",
+            "value": "alpha",
+            "id": "a"
+          },
+          {
+            "label": "Beta",
+            "value": "beta",
+            "id": "b"
+          },
+          {
+            "label": "Gamma",
+            "value": "gamma",
+            "id": "g"
+          }
+        ]
       }
     },
     {
@@ -227,7 +222,29 @@
       "props": {
         "variant": "default",
         "multiSelect": true,
-        "placeholder": "Select countries"
+        "placeholder": "Select regions",
+        "options": [
+          {
+            "label": "North",
+            "value": "north",
+            "id": "n"
+          },
+          {
+            "label": "South",
+            "value": "south",
+            "id": "s"
+          },
+          {
+            "label": "East",
+            "value": "east",
+            "id": "e"
+          },
+          {
+            "label": "West",
+            "value": "west",
+            "id": "w"
+          }
+        ]
       }
     },
     {
@@ -249,6 +266,48 @@
             "label": "Italy",
             "value": "italy"
           }
+        ],
+        "options": [
+          {
+            "label": "United States",
+            "value": "unitedStates",
+            "id": "us"
+          },
+          {
+            "label": "United Kingdom",
+            "value": "unitedKingdom",
+            "id": "gb"
+          },
+          {
+            "label": "Canada",
+            "value": "canada",
+            "id": "ca"
+          },
+          {
+            "label": "Pakistan",
+            "value": "pakistan",
+            "id": "pk"
+          },
+          {
+            "label": "India",
+            "value": "india",
+            "id": "in"
+          },
+          {
+            "label": "Australia",
+            "value": "australia",
+            "id": "au"
+          },
+          {
+            "label": "New Zealand",
+            "value": "newZealand",
+            "id": "nz"
+          },
+          {
+            "label": "Italy",
+            "value": "italy",
+            "id": "it"
+          }
         ]
       }
     },
@@ -258,7 +317,19 @@
         "variant": "default",
         "label": "Required field",
         "placeholder": "Required field",
-        "error": "Please make a selection."
+        "error": "Please make a selection.",
+        "options": [
+          {
+            "label": "Option A",
+            "value": "a",
+            "id": "a"
+          },
+          {
+            "label": "Option B",
+            "value": "b",
+            "id": "b"
+          }
+        ]
       }
     },
     {
@@ -266,14 +337,93 @@
       "props": {
         "variant": "default",
         "autocomplete": true,
-        "placeholder": "Search..."
+        "placeholder": "Search…",
+        "options": [
+          {
+            "label": "Apple",
+            "value": "apple",
+            "id": "1"
+          },
+          {
+            "label": "Apricot",
+            "value": "apricot",
+            "id": "2"
+          },
+          {
+            "label": "Banana",
+            "value": "banana",
+            "id": "3"
+          }
+        ]
       }
     },
     {
       "name": "Constrained height",
       "props": {
         "label": "Choose an Option",
-        "constrainHeight": true
+        "constrainHeight": true,
+        "options": [
+          {
+            "label": "Option 1",
+            "value": "option_1",
+            "id": "opt_1"
+          },
+          {
+            "label": "Option 2",
+            "value": "option_2",
+            "id": "opt_2"
+          },
+          {
+            "label": "Option 3",
+            "value": "option_3",
+            "id": "opt_3"
+          },
+          {
+            "label": "Option 4",
+            "value": "option_4",
+            "id": "opt_4"
+          },
+          {
+            "label": "Option 5",
+            "value": "option_5",
+            "id": "opt_5"
+          },
+          {
+            "label": "Option 6",
+            "value": "option_6",
+            "id": "opt_6"
+          },
+          {
+            "label": "Option 7",
+            "value": "option_7",
+            "id": "opt_7"
+          },
+          {
+            "label": "Option 8",
+            "value": "option_8",
+            "id": "opt_8"
+          },
+          {
+            "label": "Option 9",
+            "value": "option_9",
+            "id": "opt_9"
+          },
+          {
+            "label": "Option 10",
+            "value": "option_10",
+            "id": "opt_10"
+          },
+          {
+            "label": "Option 11",
+            "value": "option_11",
+            "id": "opt_11"
+          },
+          {
+            "label": "Option 12",
+            "value": "option_12",
+            "id": "opt_12"
+          }
+        ]
       }
     }
   ],
@@ -342,11 +492,6 @@
       "message": "constrainHeight restricts the height of the dropdown menu and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.",
       "type": "info"
     },
-    "disabled_options_info": {
-      "presetName": "Disabled options",
-      "message": "Set disabled: true on individual option objects to keep them visible while preventing selection.",
-      "type": "info"
-    },
     "subcomponent_structure_info": {
       "message": "Switch Structure to “With Subcomponents” to see the explicit Dropdown.Trigger, Dropdown.Container, and Dropdown.Option composition API.",
       "type": "info"
@@ -357,90 +502,33 @@
     "modes": {
       "simple": {
         "label": "Simple",
-        "template": "<Dropdown options={options}{{props}} />",
+        "template": "<Dropdown{{props}} />",
         "children": ""
       },
       "subcomponents": {
         "label": "With Subcomponents",
-        "template": "<Dropdown options={options}{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    {options.map((option) => (\n      <Dropdown.Option key={option.id} option={option} />\n    ))}\n  </Dropdown.Container>\n</Dropdown>",
-        "children": ""
+        "template": "<Dropdown{{props}}>\n  <Dropdown.Trigger />\n  <Dropdown.Container>\n    <Dropdown.Option option={({ label: 'United States', value: 'unitedStates', id: 'us' })} />\n    <Dropdown.Option option={({ label: 'Canada', value: 'canada', id: 'ca' })} />\n    <Dropdown.Option option={({ label: 'Pakistan', value: 'pakistan', id: 'pk' })} />\n  </Dropdown.Container>\n</Dropdown>",
+        "children": "",
+        "props": {
+          "options": [
+            {
+              "label": "United States",
+              "value": "unitedStates",
+              "id": "us"
+            },
+            {
+              "label": "Canada",
+              "value": "canada",
+              "id": "ca"
+            },
+            {
+              "label": "Pakistan",
+              "value": "pakistan",
+              "id": "pk"
+            }
+          ]
+        }
       }
     }
-  },
-  "customProps": {
-    "options": {
-      "type": "array",
-      "platforms": [
-        "react",
-        "rails"
-      ],
-      "description": "Dropdown option data with label, value, id, and optional disabled state."
-    }
-  },
-  "requiredProps": {
-    "options": [
-      {
-        "label": "United States",
-        "value": "unitedStates",
-        "id": "us"
-      },
-      {
-        "label": "Canada",
-        "value": "canada",
-        "id": "ca",
-        "disabled": true
-      },
-      {
-        "label": "Pakistan",
-        "value": "pakistan",
-        "id": "pk"
-      },
-      {
-        "label": "Mexico",
-        "value": "mexico",
-        "id": "mx",
-        "disabled": true
-      },
-      {
-        "label": "United Kingdom",
-        "value": "unitedKingdom",
-        "id": "gb"
-      },
-      {
-        "label": "India",
-        "value": "india",
-        "id": "in"
-      },
-      {
-        "label": "Australia",
-        "value": "australia",
-        "id": "au"
-      },
-      {
-        "label": "New Zealand",
-        "value": "newZealand",
-        "id": "nz"
-      },
-      {
-        "label": "Italy",
-        "value": "italy",
-        "id": "it"
-      },
-      {
-        "label": "Germany",
-        "value": "germany",
-        "id": "de"
-      },
-      {
-        "label": "Brazil",
-        "value": "brazil",
-        "id": "br"
-      },
-      {
-        "label": "Philippines",
-        "value": "philippines",
-        "id": "ph"
-      }
-    ]
   }
 }