playbook_ui_docs 14.3.2.pre.alpha.PBNTR515typeaheadmarginbottomredux3785 → 14.3.2.pre.alpha.pbntr523enablekitsforradiofix3809

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 18b501ccd35415549a34476ecbf3063d5203b14d1389f21b0d2aab4a9370c3bc
-  data.tar.gz: d5790649664cf22cfbe6b47e791c2cbaf1a9f5470359cf0c3f63b8afbf78b6f6
+  metadata.gz: 7920979473102aa5384dd214ced0c4848f0237ba5ec0b0e67a67c74eba12f54b
+  data.tar.gz: d53d24c3b7e5f0d00f9df44dcfcceabcf770ad68b7dd99c5c660e1705651130a
 SHA512:
-  metadata.gz: e03029e381786be1369623467a6abeb79761245dd543c3820fe1d4714cb87ca0f2d2970e31303a77b7e8950a26ae20295550f85a220fbe202181001f82ea8f48
-  data.tar.gz: ccea3277cd4885d8bb1b742303d1df968eb647b1e4b3670338dbb32b6a136722baa595bbf4126be0757a20070b4fed58403d004aae00b65272f8c68ba1d84ea5
+  metadata.gz: 91ac6c801cb1dd100b222532a1176c8db76afe5702521edb1f88881cfdbc00b5270aa52bf2553f7e548136c845b902602be4d8eb569c1f00571bf33092d52a19
+  data.tar.gz: 96f1549fc1dd03c4ad09a96ef83833e2e2285fe89bdc554c41ecfc0d2f469daa7867c762705a034d37c9b0624a35b704e8d13773416dcd753191ccce97ada307

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.html.erb

@@ -0,0 +1,117 @@
+<%= pb_rails("title", props: { text: "Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
+
+<%= pb_rails("form_pill", props: {
+    text: "Primary",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "neutral",
+    text: "Neutral",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "success",
+    text: "Success",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "warning",
+    text: "Warning",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "error",
+    text: "Error",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "info",
+    text: "Info",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Data Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "data_1",
+    text: "Data 1",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_2",
+    text: "Data 2",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_3",
+    text: "Data 3",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_4",
+    text: "Data 4",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_5",
+    text: "Data 5",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_6",
+    text: "Data 6",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_7",
+    text: "Data 7",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "data_8",
+    text: "Data 8",
+    tabindex: 0,
+}) %>
+
+<%= pb_rails("title", props: { text: "Product Colors", tag: "h4", size: 4, margin_bottom: "sm", margin_top: "md" }) %>
+
+<%= pb_rails("form_pill", props: {
+    color: "windows",
+    text: "Windows",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "siding",
+    text: "Siding",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "roofing",
+    text: "Roofing",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "doors",
+    text: "Doors",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "gutters",
+    text: "Gutters",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "solar",
+    text: "Solar",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "insulation",
+    text: "Insulation",
+    tabindex: 0,
+}) %>
+<%= pb_rails("form_pill", props: {
+    color: "accessories",
+    text: "Accessories",
+    tabindex: 0,
+}) %>

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.jsx

@@ -0,0 +1,227 @@
+import React from 'react'
+import { FormPill, Title } from 'playbook-ui'
+
+const FormPillColors = (props) => {
+  return (
+    <div>
+      <Title
+          marginBottom="sm"
+          size={4}
+          text="Status Colors"
+          {...props}
+      />
+      <FormPill
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Primary"
+          {...props}
+      />
+      <FormPill
+          color="neutral"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Neutral"
+          {...props}
+      />
+      <FormPill
+          color="success"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Success"
+          {...props}
+      />
+      <FormPill
+          color="warning"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Warning"
+          {...props}
+      />
+      <FormPill
+          color="error"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Error"
+          {...props}
+      />
+      <FormPill
+          color="info"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Info"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Data Colors"
+          {...props}
+      />
+      <FormPill
+          color="data_1"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 1"
+          {...props}
+      />
+      <FormPill
+          color="data_2"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 2"
+          {...props}
+      />
+      <FormPill
+          color="data_3"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 3"
+          {...props}
+      />
+      <FormPill
+          color="data_4"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 4"
+          {...props}
+      />
+      <FormPill
+          color="data_5"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 5"
+          {...props}
+      />
+      <FormPill
+          color="data_6"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 6"
+          {...props}
+      />
+      <FormPill
+          color="data_7"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 7"
+          {...props}
+      />
+      <FormPill
+          color="data_8"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Data 8"
+          {...props}
+      />
+      <Title
+          marginBottom="sm"
+          marginTop="md"
+          size={4}
+          text="Product Colors"
+          {...props}
+      />
+      <FormPill
+          color="windows"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Windows"
+          {...props}
+      />
+      <FormPill
+          color="siding"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Siding"
+          {...props}
+      />
+      <FormPill
+          color="roofing"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Roofing"
+          {...props}
+      />
+      <FormPill
+          color="doors"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Doors"
+          {...props}
+      />
+      <FormPill
+          color="gutters"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Gutters"
+          {...props}
+      />
+      <FormPill
+          color="solar"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Solar"
+          {...props}
+      />
+      <FormPill
+          color="insulation"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Insulation"
+          {...props}
+      />
+      <FormPill
+          color="accessories"
+          onClick={() => {
+            alert('Click!')
+          }}
+          tabIndex={0}
+          text="Accessories"
+          {...props}
+      />
+    </div>
+  )
+}
+export default FormPillColors

data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_colors.md

@@ -0,0 +1 @@
+The Status, Data, and Product colors highlighted above can be passed to the `color` prop. Primary is the default color. Form pills with a text tag, an avatar, or an icon with text tag can all receive the `color` prop. 

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

@@ -6,6 +6,7 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors
 
   react:
   - form_pill_user: Form Pill User
@@ -13,3 +14,4 @@ examples:
   - form_pill_tag: Form Pill Tag
   - form_pill_example: Example
   - form_pill_icon: Form Pill Icon
+  - form_pill_colors: Form Pill Colors

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

@@ -3,3 +3,4 @@ export { default as FormPillSize } from './_form_pill_size.jsx'
 export { default as FormPillTag } from './_form_pill_tag.jsx'
 export { default as FormPillExample } from './_form_pill_example.jsx'
 export { default as FormPillIcon } from './_form_pill_icon.jsx'
+export { default as FormPillColors } from './_form_pill_colors.jsx'

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.html.erb

@@ -0,0 +1,72 @@
+<% treeData = [{
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "100",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "101",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "102",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "103",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "104",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "105",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "106",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "107",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "108",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "109",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "110",
+          },
+        ],
+      },
+    ],
+}] %>
+
+<%= pb_rails("multi_level_select", props: {
+    id: "multi-level-select-default-rails",
+    name: "my_array",
+    tree_data: treeData,
+    pill_color: "neutral"
+}) %>

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color.jsx

@@ -0,0 +1,91 @@
+import React from "react";
+import MultiLevelSelect from "../_multi_level_select";
+
+const treeData = [
+  {
+    label: "Power Home Remodeling",
+    value: "Power Home Remodeling",
+    id: "powerhome1",
+    expanded: true,
+    children: [
+      {
+        label: "People",
+        value: "People",
+        id: "people1",
+        expanded: true,
+        children: [
+          {
+            label: "Talent Acquisition",
+            value: "Talent Acquisition",
+            id: "talent1",
+          },
+          {
+            label: "Business Affairs",
+            value: "Business Affairs",
+            id: "business1",
+            children: [
+              {
+                label: "Initiatives",
+                value: "Initiatives",
+                id: "initiative1",
+              },
+              {
+                label: "Learning & Development",
+                value: "Learning & Development",
+                id: "development1",
+              },
+            ],
+          },
+          {
+            label: "People Experience",
+            value: "People Experience",
+            id: "experience1",
+          },
+        ],
+      },
+      {
+        label: "Contact Center",
+        value: "Contact Center",
+        id: "contact1",
+        children: [
+          {
+            label: "Appointment Management",
+            value: "Appointment Management",
+            id: "appointment1",
+          },
+          {
+            label: "Customer Service",
+            value: "Customer Service",
+            id: "customer1",
+          },
+          {
+            label: "Energy",
+            value: "Energy",
+            id: "energy1",
+          },
+        ],
+      },
+    ],
+  },
+];
+
+const MultiLevelSelectColor = (props) => {
+  return (
+    <div>
+      <MultiLevelSelect
+          id='multiselect-color'
+          onSelect={(selectedNodes) =>
+            console.log(
+              "Selected Items",
+              selectedNodes
+            )
+          }
+          pillColor="neutral"
+          treeData={treeData}
+          {...props}
+      />
+    </div>
+  )
+};
+
+export default MultiLevelSelectColor;

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_rails.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `pill_color` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_color_react.md

@@ -0,0 +1 @@
+Change the form pill color by passing the optional `pillColor` prop. Product, Data, and Status colors are available options. Check them out <a href="https://playbook.powerapp.cloud/kits/form_pill/react#form-pill-colors" target="_blank">here</a> in the Form Pill colors example.

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

@@ -6,6 +6,7 @@ examples:
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids: Selected Ids
   - multi_level_select_with_form: With Form
+  - multi_level_select_color: With Pills (Custom Color)
 
   react:
   - multi_level_select_default: Default
@@ -13,3 +14,4 @@ examples:
   - multi_level_select_single_children_only: Single Select w/ Hidden Radios
   - multi_level_select_return_all_selected: Return All Selected
   - multi_level_select_selected_ids_react: Selected Ids
+  - multi_level_select_color: With Pills (Custom Color)

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

@@ -3,3 +3,4 @@ export { default as MultiLevelSelectSingle } from './_multi_level_select_single.
 export { default as MultiLevelSelectSingleChildrenOnly } from './_multi_level_select_single_children_only.jsx'
 export { default as MultiLevelSelectReturnAllSelected } from './_multi_level_select_return_all_selected.jsx'
 export { default as MultiLevelSelectSelectedIdsReact } from "./_multi_level_select_selected_ids_react.jsx"
+export { default as MultiLevelSelectColor } from './_multi_level_select_color.jsx'

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.html.erb

@@ -0,0 +1,73 @@
+<%= pb_rails("multiple_users_stacked", props: {
+  variant: "bubble",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  variant: "bubble",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    }
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  variant: "bubble",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+  ]
+}) %>
+
+<br/><br/>
+
+<%= pb_rails("multiple_users_stacked", props: {
+  variant: "bubble",
+  users: [
+    {
+      name: "Patrick Welch",
+      image_url: "https://randomuser.me/api/portraits/men/9.jpg",
+    },
+    {
+      name: "Lucille Sanchez",
+      image_url: "https://randomuser.me/api/portraits/women/6.jpg",
+    },
+    {
+      name: "Beverly Reyes",
+      image_url: "https://randomuser.me/api/portraits/women/74.jpg",
+    },
+    {
+      name: "Keith Craig",
+      image_url: "https://randomuser.me/api/portraits/men/40.jpg",
+    },
+    {
+      name: "Alicia Cooper",
+      image_url: "https://randomuser.me/api/portraits/women/46.jpg",
+    }
+  ]
+}) %>