playbook_ui 16.4.0.pre.alpha.testingmetadata15413 → 16.4.0.pre.alpha.testingmetadata15452

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateTime",
-  "description": "Date Time is a composite kit that leverages the Date and Time kits.",
+  "description": "DateTime component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateTimeStacked",
-  "description": "Displays date and time in a vertical stacked format.",
+  "description": "DateTimeStacked component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DateYearStacked",
-  "description": "This kit is a simple option for displaying dates in a month, day",
+  "description": "DateYearStacked component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Detail",
-  "description": "Used for tables or designs with large amounts of data or text.",
+  "description": "Detail component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Dialog",
-  "description": "Modal dialog for confirmations, forms, or focused content. Supports status icons for info, caution, delete, error, and success states.",
+  "description": "Dialog component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "DistributionBar",
-  "description": "Can be used in the same way a pie chart can be used. By default,",
+  "description": "DistributionBar component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Draggable",
-  "description": "Drag and drop functionality for reordering items.",
+  "description": "Draggable component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Dropdown",
-  "description": "Customizable dropdown menu with trigger element and various option configurations.",
+  "description": "Dropdown component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "EmptyState",
-  "description": "Empty state placeholder for when no content is available.",
+  "description": "EmptyState component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "FileUpload",
-  "description": "Allows users to upload files via drag-and-drop or file browser.",
+  "description": "FileUpload component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Filter",
-  "description": "This kit can be implemented in a variety of ways. To see examples",
+  "description": "Filter component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "FixedConfirmationToast",
-  "description": "Fixed Confirmation Toast is used as an alert. Success is used when",
+  "description": "FixedConfirmationToast component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Flex",
-  "description": "This kit is used to build most of the complex interfaces. The Flex",
+  "description": "Flex component",
   "platforms": [
     "react",
     "rails"
@@ -120,6 +120,21 @@
         "rails"
       ],
       "default": false
+    },
+    "alignSelf": {
+      "type": "enum",
+      "platforms": [
+        "react",
+        "rails"
+      ],
+      "values": [
+        "start",
+        "end",
+        "center",
+        "stretch",
+        "none"
+      ],
+      "default": "none"
     }
   },
   "globalProps": true,

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Form",
-  "description": "The form kit provides consumers with a convenient, consistently styled",
+  "description": "Form component",
   "platforms": [
     "rails"
   ],

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "FormGroup",
-  "description": "Groups related form fields together with optional labels.",
+  "description": "FormGroup component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "FormPill",
-  "description": "Pill-shaped form elements for tags, selections, or filters.",
+  "description": "FormPill component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Hashtag",
-  "description": "Hashtag is used to display home, project and other forms of IDs.",
+  "description": "Hashtag component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Highlight",
-  "description": "Highlight is used to pick out or emphasize content.",
+  "description": "Highlight component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "HomeAddressStreet",
-  "description": "This kit can be used to display the address for a homeowner/project.",
+  "description": "HomeAddressStreet component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Icon",
-  "description": "An icon is a graphic symbol that represents an object (ie a file)",
+  "description": "Icon component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "IconCircle",
-  "description": "Similar to Icon, Icon Circle is a graphical symbol within a circle",
+  "description": "IconCircle component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "IconStatValue",
-  "description": "Displays a statistic value with an associated icon.",
+  "description": "IconStatValue component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "IconValue",
-  "description": "Icon Value leverages our icon kit, to display a value of some sort",
+  "description": "IconValue component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Image",
-  "description": "A responsive image component.",
+  "description": "Image component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "LabelPill",
-  "description": "This kit combines the caption and pill kit with all its variants.",
+  "description": "LabelPill component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "LabelValue",
-  "description": "This kit can be very versatile when used to display text data.",
+  "description": "LabelValue component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Layout",
-  "description": "Layouts used for positioning content inside of pages, cards, or containers.",
+  "description": "Layout component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Legend",
-  "description": "A key used to compare the variables and their value in any given",
+  "description": "Legend component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Link",
-  "description": "Text link for navigation to other pages or sections.",
+  "description": "Link component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "List",
-  "description": "Lists display a vertical set of related content.",
+  "description": "List component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "LoadingInline",
-  "description": "The loading kit is used to indicate to users that a page is still",
+  "description": "LoadingInline component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Map",
-  "description": "This kit provides a wrapping class to place around the MapLibre library.",
+  "description": "Map component",
   "platforms": [
     "react"
   ],

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Message",
-  "description": "This multi kit consist of a an avatar, a status, a caption, a body",
+  "description": "Message component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "MultiLevelSelect",
-  "description": "The MultiLevelSelect kit renders a multi leveled select dropdown",
+  "description": "MultiLevelSelect component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "MultipleUsers",
-  "description": "The multiple users kit is used to show that more than one user is",
+  "description": "MultipleUsers component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "MultipleUsersStacked",
-  "description": "Multiple users stacked is used in tight spaces, where we need to",
+  "description": "MultipleUsersStacked component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Nav",
-  "description": "The nav is a grouped set of links that take the user to another page,",
+  "description": "Nav component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "OnlineStatus",
-  "description": "Online Status is a small indicator that lets the user know the status",
+  "description": "OnlineStatus component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Overlay",
-  "description": "Full screen overlay for modals and dialogs.",
+  "description": "Overlay component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Pagination",
-  "description": "Pagination for navigating through multiple pages of content.",
+  "description": "Pagination component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Passphrase",
-  "description": "Secure password input with strength indicator and show/hide toggle.",
+  "description": "Passphrase component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Person",
-  "description": "This kit is broken down into a first name last name format with normal",
+  "description": "Person component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "PersonContact",
-  "description": "This kit can be used to display a person contact information.",
+  "description": "PersonContact component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "PhoneNumberInput",
-  "description": "International phone number input with country code selection and formatting.",
+  "description": "PhoneNumberInput component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Pill",
-  "description": "A pill uses both a keyword and a specific color to categorize an",
+  "description": "Pill component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Popover",
-  "description": "A popover is a way to toggle content on top of other content. It",
+  "description": "Popover component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "ProgressPills",
-  "description": "Progress pills indicate a specific point in time of a series of sequential",
+  "description": "ProgressPills component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "ProgressSimple",
-  "description": "Displays the current progress of an operation flow. User understanding",
+  "description": "ProgressSimple component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "ProgressStep",
-  "description": "'Progress step kit is used to show the progress of a process. There",
+  "description": "ProgressStep component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "Radio",
-  "description": "Radio is a control that allows the user to only choose one predefined",
+  "description": "Radio component",
   "platforms": [
     "react",
     "rails"

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "RichTextEditor",
-  "description": "Full-featured text editor with formatting options.",
+  "description": "RichTextEditor component",
   "platforms": [
     "react"
   ],

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

@@ -1,7 +1,7 @@
 {
   "$schema": "https://playbook.powerapp.cloud/schemas/kit-schema.json",
   "name": "SectionSeparator",
-  "description": "Section separator is a divider line that compartmentalizes content,",
+  "description": "SectionSeparator component",
   "platforms": [
     "react",
     "rails"

data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-attributes",
   attributes: {
     data: { options: "data_attribute" },
   },

data/app/pb_kits/playbook/pb_select/docs/_select_blank.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-location",
   label: "Where do you live",
   name: "location",
   blank_selection: "Select One...",

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Holiday" }) do %>
+<%= pb_rails("select", props: { id: "holiday", label: "Favorite Holiday" }) do %>
   <select name="holiday" id="holiday">
     <option value="1">Christmas</option>
     <option value="2">Thanksgiving</option>

data/app/pb_kits/playbook/pb_select/docs/_select_custom_select_subheaders.html.erb

@@ -1,4 +1,4 @@
-<%= pb_rails("select", props: { label: "Favorite Animal" }) do %>
+<%= pb_rails("select", props: { id: "animal", label: "Favorite Animal" }) do %>
   <select name="animal" id="animal">
     <optgroup label="Mammal">
       <option value="1">Cat</option>

data/app/pb_kits/playbook/pb_select/docs/_select_default.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-favorite-food",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_disabled.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-dessert-disabled",
   label: "Favorite Dessert",
   disabled: true,
   name: "dessert",

data/app/pb_kits/playbook/pb_select/docs/_select_disabled_options.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-coffee",
   label: "Favorite Coffee",
   name: "coffee",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_error.html.erb

@@ -1,5 +1,6 @@
 <%= pb_rails("select", props: {
   error: raw(pb_rails("icon", props: { icon: "warning" }) + " Please make a valid selection"),
+  id: "select-food-error",
   label: "Favorite Food",
   name: "food",
   options: [

data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb

@@ -1,4 +1,5 @@
 <%= pb_rails("select", props: {
+  id: "select-food-inline",
   label: "Favorite Food",
   name: "food",
   inline: true,