playbook_ui 16.9.0 → 16.10.0.pre.alpha.PLAY3053advancedtablebottompinnedrowsreact17469

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

@@ -5,50 +5,208 @@
     "disabled": false,
     "error": "",
     "hiddenInputs": false,
-    "initialCountry": "",
-    "label": "",
-    "name": "",
+    "initialCountry": "us",
+    "label": "Phone Number",
+    "name": "phone_number",
     "required": false,
     "requiredIndicator": false,
     "value": "",
     "formatAsYouType": false,
     "strictMode": false,
     "countrySearch": false,
-    "showPlaceholder": false
+    "showPlaceholder": false,
+    "id": "phone-number-playground"
   },
   "groups": [
     {
-      "name": "Props",
+      "name": "Input",
       "props": [
-        "dark",
-        "disabled",
-        "error",
-        "hiddenInputs",
-        "initialCountry",
-        "isValid",
+        "id",
         "label",
         "name",
-        "onChange",
-        "onValidate",
+        "value",
+        "disabled",
+        "onChange"
+      ]
+    },
+    {
+      "name": "Country",
+      "props": [
+        "initialCountry",
+        "preferredCountries",
         "onlyCountries",
         "excludeCountries",
-        "preferredCountries",
+        "countrySearch"
+      ]
+    },
+    {
+      "name": "Validation",
+      "props": [
         "required",
         "requiredIndicator",
-        "value",
+        "error",
+        "strictMode"
+      ]
+    },
+    {
+      "name": "Formatting",
+      "props": [
         "formatAsYouType",
-        "strictMode",
-        "countrySearch",
-        "showPlaceholder"
+        "showPlaceholder",
+        "hiddenInputs"
       ]
     }
   ],
   "presets": [
     {
       "name": "Default",
-      "props": {}
+      "props": {
+        "id": "phone-number-default",
+        "initialCountry": "us",
+        "label": "Phone Number",
+        "name": "phone_number"
+      }
+    },
+    {
+      "name": "Initial Country",
+      "props": {
+        "id": "phone-number-initial-country",
+        "initialCountry": "br",
+        "label": "Brazil Phone Number",
+        "name": "brazil_phone_number"
+      }
+    },
+    {
+      "name": "Preferred Countries",
+      "props": {
+        "id": "phone-number-preferred",
+        "initialCountry": "us",
+        "label": "Preferred Countries",
+        "name": "preferred_phone_number",
+        "preferredCountries": [
+          "us",
+          "br",
+          "ph",
+          "gb"
+        ]
+      }
+    },
+    {
+      "name": "Only Countries",
+      "props": {
+        "id": "phone-number-only-countries",
+        "initialCountry": "us",
+        "label": "North America",
+        "name": "north_america_phone_number",
+        "onlyCountries": [
+          "us",
+          "ca",
+          "mx"
+        ]
+      }
+    },
+    {
+      "name": "Exclude Countries",
+      "props": {
+        "id": "phone-number-exclude-countries",
+        "excludeCountries": [
+          "cn",
+          "ru"
+        ],
+        "initialCountry": "us",
+        "label": "Filtered Countries",
+        "name": "filtered_phone_number"
+      }
+    },
+    {
+      "name": "Formatted",
+      "props": {
+        "id": "phone-number-formatted",
+        "formatAsYouType": true,
+        "initialCountry": "us",
+        "label": "Formatted Phone Number",
+        "name": "formatted_phone_number",
+        "showPlaceholder": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "id": "phone-number-disabled",
+        "disabled": true,
+        "initialCountry": "us",
+        "label": "Disabled Phone Number",
+        "name": "disabled_phone_number",
+        "value": "2155550100"
+      }
+    },
+    {
+      "name": "Country Search",
+      "props": {
+        "id": "phone-number-country-search",
+        "countrySearch": true,
+        "initialCountry": "us",
+        "label": "Country Search",
+        "name": "country_search_phone_number"
+      }
     }
   ],
-  "conditionals": {},
-  "hints": {}
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "required"
+    },
+    "hiddenInputs": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "default": {
+      "when": {},
+      "message": "Default shows a phone number input.",
+      "type": "info"
+    },
+    "initial_country": {
+      "presetName": "Initial Country",
+      "message": "initialCountry accepts an ISO 3166-1 alpha-2 country code such as us, br, ph, or gb.",
+      "type": "info"
+    },
+    "preferred_countries": {
+      "presetName": "Preferred Countries",
+      "message": "preferredCountries moves those country codes to the top of the dropdown order.",
+      "type": "info"
+    },
+    "only_countries": {
+      "presetName": "Only Countries",
+      "message": "onlyCountries limits the dropdown to the listed country codes.",
+      "type": "info"
+    },
+    "exclude_countries": {
+      "presetName": "Exclude Countries",
+      "message": "excludeCountries removes the listed country codes from the dropdown.",
+      "type": "info"
+    },
+    "formatted": {
+      "presetName": "Formatted",
+      "message": "formatAsYouType formats the visible value as the user types; showPlaceholder asks intl-tel-input to provide an example number.",
+      "type": "info"
+    },
+    "country_search": {
+      "presetName": "Country Search",
+      "message": "countrySearch allows users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.",
+      "type": "info"
+    }
+  },
+  "customProps": {
+    "id": {
+      "type": "string",
+      "platforms": [
+        "react"
+      ],
+      "default": "phone-number-playground"
+    }
+  },
+  "hiddenProps": [
+    "isValid",
+    "onValidate"
+  ]
 }

data/app/pb_kits/playbook/pb_phone_number_input/docs/_playground.overrides.json

@@ -0,0 +1,180 @@
+{
+  "template": "<PhoneNumberInput{{props}} />",
+  "customProps": {
+    "id": {
+      "type": "string",
+      "platforms": ["react"],
+      "default": "phone-number-playground"
+    }
+  },
+  "hiddenProps": [
+    "isValid",
+    "onValidate"
+  ],
+  "defaults": {
+    "id": "phone-number-playground",
+    "initialCountry": "us",
+    "label": "Phone Number",
+    "name": "phone_number"
+  },
+  "groups": [
+    {
+      "name": "Input",
+      "props": ["id", "label", "name", "value", "disabled","onChange"]
+    },
+    {
+      "name": "Country",
+      "props": [
+        "initialCountry",
+        "preferredCountries",
+        "onlyCountries",
+        "excludeCountries",
+        "countrySearch"
+      ]
+    },
+    {
+      "name": "Validation",
+      "props": [
+        "required",
+        "requiredIndicator",
+        "error",
+        "strictMode"
+      ]
+    },
+    {
+      "name": "Formatting",
+      "props": [
+        "formatAsYouType",
+        "showPlaceholder",
+        "hiddenInputs"
+      ]
+    }
+  ],
+  "presets": [
+    {
+      "name": "Default",
+      "props": {
+        "id": "phone-number-default",
+        "initialCountry": "us",
+        "label": "Phone Number",
+        "name": "phone_number"
+      }
+    },
+    {
+      "name": "Initial Country",
+      "props": {
+        "id": "phone-number-initial-country",
+        "initialCountry": "br",
+        "label": "Brazil Phone Number",
+        "name": "brazil_phone_number"
+      }
+    },
+    {
+      "name": "Preferred Countries",
+      "props": {
+        "id": "phone-number-preferred",
+        "initialCountry": "us",
+        "label": "Preferred Countries",
+        "name": "preferred_phone_number",
+        "preferredCountries": ["us", "br", "ph", "gb"]
+      }
+    },
+    {
+      "name": "Only Countries",
+      "props": {
+        "id": "phone-number-only-countries",
+        "initialCountry": "us",
+        "label": "North America",
+        "name": "north_america_phone_number",
+        "onlyCountries": ["us", "ca", "mx"]
+      }
+    },
+    {
+      "name": "Exclude Countries",
+      "props": {
+        "id": "phone-number-exclude-countries",
+        "excludeCountries": ["cn", "ru"],
+        "initialCountry": "us",
+        "label": "Filtered Countries",
+        "name": "filtered_phone_number"
+      }
+    },
+    {
+      "name": "Formatted",
+      "props": {
+        "id": "phone-number-formatted",
+        "formatAsYouType": true,
+        "initialCountry": "us",
+        "label": "Formatted Phone Number",
+        "name": "formatted_phone_number",
+        "showPlaceholder": true
+      }
+    },
+    {
+      "name": "Disabled",
+      "props": {
+        "id": "phone-number-disabled",
+        "disabled": true,
+        "initialCountry": "us",
+        "label": "Disabled Phone Number",
+        "name": "disabled_phone_number",
+        "value": "2155550100"
+      }
+    },
+    {
+      "name": "Country Search",
+      "props": {
+        "id": "phone-number-country-search",
+        "countrySearch": true,
+        "initialCountry": "us",
+        "label": "Country Search",
+        "name": "country_search_phone_number"
+      }
+    }
+  ],
+  "conditionals": {
+    "requiredIndicator": {
+      "requires": "required"
+    },
+    "hiddenInputs": {
+      "requires": "name"
+    }
+  },
+  "hints": {
+    "default": {
+      "when": {},
+      "message": "Default shows a phone number input.",
+      "type": "info"
+    },
+    "initial_country": {
+      "presetName": "Initial Country",
+      "message": "initialCountry accepts an ISO 3166-1 alpha-2 country code such as us, br, ph, or gb.",
+      "type": "info"
+    },
+    "preferred_countries": {
+      "presetName": "Preferred Countries",
+      "message": "preferredCountries moves those country codes to the top of the dropdown order.",
+      "type": "info"
+    },
+    "only_countries": {
+      "presetName": "Only Countries",
+      "message": "onlyCountries limits the dropdown to the listed country codes.",
+      "type": "info"
+    },
+    "exclude_countries": {
+      "presetName": "Exclude Countries",
+      "message": "excludeCountries removes the listed country codes from the dropdown.",
+      "type": "info"
+    },
+    "formatted": {
+      "presetName": "Formatted",
+      "message": "formatAsYouType formats the visible value as the user types; showPlaceholder asks intl-tel-input to provide an example number.",
+      "type": "info"
+    },
+    "country_search": {
+      "presetName": "Country Search",
+      "message": "countrySearch allows users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.",
+      "type": "info"
+    }
+  }
+}

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

@@ -68,13 +68,13 @@
       "default": ""
     },
     "onChange": {
-      "type": "ReactNode",
+      "type": "function",
       "platforms": [
         "react"
       ]
     },
     "onValidate": {
-      "type": "Callback<boolean, void>",
+      "type": "function",
       "platforms": [
         "react"
       ]

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

@@ -3,7 +3,8 @@
   "propTargets": {},
   "defaults": {
     "variant": "neutral",
-    "textTransform": "lowercase"
+    "textTransform": "lowercase",
+    "text": "neutral"
   },
   "children": {
     "editable": true,
@@ -47,60 +48,26 @@
       "children": ""
     },
     {
-      "name": "Success",
+      "name": "Preserve Casing",
       "props": {
-        "text": "Success",
-        "variant": "success",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Warning",
-      "props": {
-        "text": "Warning",
-        "variant": "warning",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Error",
-      "props": {
-        "text": "Error",
-        "variant": "error",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Info",
-      "props": {
-        "text": "Info",
-        "variant": "info",
-        "textTransform": "none"
-      },
-      "children": ""
-    },
-    {
-      "name": "Lowercase label",
-      "props": {
-        "text": "draft",
+        "text": "DRAFT",
         "variant": "neutral",
-        "textTransform": "lowercase"
-      },
-      "children": ""
-    },
-    {
-      "name": "Preserve casing",
-      "props": {
-        "text": "v2.4.0",
-        "variant": "primary",
         "textTransform": "none"
       },
       "children": ""
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "variant": {
+      "when": {},
+      "message": "variant controls the visual color for the pill.",
+      "type": "info"
+    },
+    "text_transform": {
+      "presetName": "Preserve Casing",
+      "message": "Set textTransform to none when the label includes meaningful casing, versions, or abbreviations.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_pill/docs/_playground.overrides.json

@@ -1,4 +1,9 @@
 {
+  "defaults": {
+    "text": "neutral",
+    "variant": "neutral",
+    "textTransform": "lowercase"
+  },
   "groups": [
     {
       "name": "Content",
@@ -12,45 +17,43 @@
   "presets": [
     {
       "name": "Neutral",
-      "props": { "text": "neutral", "variant": "neutral", "textTransform": "lowercase" },
+      "props": {
+        "text": "neutral",
+        "variant": "neutral",
+        "textTransform": "lowercase"
+      },
       "children": ""
     },
     {
       "name": "Primary",
-      "props": { "text": "Primary", "variant": "primary", "textTransform": "none" },
+      "props": {
+        "text": "Primary",
+        "variant": "primary",
+        "textTransform": "none"
+      },
       "children": ""
     },
     {
-      "name": "Success",
-      "props": { "text": "Success", "variant": "success", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Warning",
-      "props": { "text": "Warning", "variant": "warning", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Error",
-      "props": { "text": "Error", "variant": "error", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Info",
-      "props": { "text": "Info", "variant": "info", "textTransform": "none" },
-      "children": ""
-    },
-    {
-      "name": "Lowercase label",
-      "props": { "text": "draft", "variant": "neutral", "textTransform": "lowercase" },
-      "children": ""
-    },
-    {
-      "name": "Preserve casing",
-      "props": { "text": "v2.4.0", "variant": "primary", "textTransform": "none" },
+      "name": "Preserve Casing",
+      "props": {
+        "text": "DRAFT",
+        "variant": "neutral",
+        "textTransform": "none"
+      },
       "children": ""
     }
   ],
   "conditionals": {},
-  "hints": {}
+  "hints": {
+    "variant": {
+      "when": {},
+      "message": "variant controls the visual color for the pill.",
+      "type": "info"
+    },
+    "text_transform": {
+      "presetName": "Preserve Casing",
+      "message": "Set textTransform to none when the label includes meaningful casing, versions, or abbreviations.",
+      "type": "info"
+    }
+  }
 }

data/app/pb_kits/playbook/pb_popover/_popover.scss

@@ -47,7 +47,34 @@
   background-color: $white;
   border: 0;
   box-shadow: $shadow_deeper;
+  display: flex;
+  flex-direction: column;
+  min-height: 0;
+  max-height: inherit;
 }
+
+.pb_popover_scroll_region {
+  flex: 1 1 auto;
+  min-height: 0;
+  overflow: auto;
+  -webkit-overflow-scrolling: touch;
+  display: flex;
+  flex-direction: column;
+  align-items: stretch;
+}
+
+.pb_popover_floating_root {
+  flex: 0 0 auto;
+  min-height: 0;
+  pointer-events: none;
+  position: relative;
+  z-index: 1;
+}
+
+.pb_popover_floating_root > * {
+  pointer-events: auto;
+}
+
 .overflow_handling {
   overflow: auto;
 }