playbook_ui_docs 14.3.2.pre.alpha.revert3614PBNTR455ganttchartPOC3783 → 14.4.0.pre.alpha.PBNTR490multilevelselect3832

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",
+    }
+  ]
+}) %>

data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_bubble.jsx

@@ -0,0 +1,86 @@
+import React from 'react'
+
+import MultipleUsersStacked from '../_multiple_users_stacked'
+
+const MultipleUsersStackedBubble = (props) => {
+  return (
+    <div>
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+      ]}
+          variant="bubble"
+          {...props}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+      ]}
+          variant="bubble"
+          {...props}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+      ]}
+          variant="bubble"
+          {...props}
+      />
+      <br />
+      <br />
+      <MultipleUsersStacked
+          users={[
+        {
+          name: 'Patrick Welch',
+          imageUrl: 'https://randomuser.me/api/portraits/men/9.jpg',
+        },
+        {
+          name: 'Lucille Sanchez',
+          imageUrl: 'https://randomuser.me/api/portraits/women/6.jpg',
+        },
+        {
+          name: 'Beverly Reyes',
+          imageUrl: 'https://randomuser.me/api/portraits/women/74.jpg',
+        },
+        {
+          name: 'Keith Craig',
+          imageUrl: 'https://randomuser.me/api/portraits/men/40.jpg',
+        },
+        {
+          name: 'Alicia Cooper',
+          imageUrl: 'https://randomuser.me/api/portraits/women/46.jpg',
+        },
+      ]}
+          variant="bubble"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default MultipleUsersStackedBubble

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

@@ -2,10 +2,12 @@ examples:
 
   rails:
   - multiple_users_stacked_default: Default
+  - multiple_users_stacked_bubble: Bubble
 
 
   react:
   - multiple_users_stacked_default: Default
+  - multiple_users_stacked_bubble: Bubble
 
   swift: 
   - multiple_users_stacked_default_swift: Default

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

@@ -1 +1,2 @@
 export { default as MultipleUsersStackedDefault } from './_multiple_users_stacked_default.jsx'
+export { default as MultipleUsersStackedBubble } from './_multiple_users_stacked_bubble.jsx'

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb

@@ -0,0 +1,48 @@
+<%
+  options = [
+    { label: "Orange", value: "Orange" },
+    { label: "Red", value: "Red" },
+    { label: "Green", value: "Green" },
+    { label: "Blue", value: "Blue" },
+  ]
+%>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Select",
+  name: "Group1",
+  value: "Select",
+}) do %>
+  <%= pb_rails("select", props: {
+    min_width: "xs",
+    options: options,
+  }) %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typeahead",
+  name: "Group1",
+  value: "Typeahead",
+}) do %>
+  <%= pb_rails("typeahead", props: {
+      id: "typeahead-radio",
+      is_multi: false,
+      min_width: "xs",
+      options: options,
+      placeholder: "Select...",
+    })
+  %>
+<% end %>
+
+<%= pb_rails("radio", props: {
+  custom_children: true,
+  label: "Typography",
+  name: "Group1",
+  value: "Typography",
+}) do %>
+  <%= pb_rails("title", props: {
+      text: "Custom Typography",
+    })
+  %>
+<% end %>

data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.md

@@ -0,0 +1 @@
+Use the `custom_children` prop to enable the use of kits instead of text labels.

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

@@ -7,6 +7,7 @@ examples:
   - radio_options: With Options
   - radio_alignment: Alignment
   - radio_disabled: Disabled
+  - radio_custom_children: Custom Children
 
   react:
   - radio_default: Default

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.html.erb

@@ -0,0 +1,31 @@
+<%
+  options = [
+    { label: 'Windows', value: '#FFA500' },
+    { label: 'Siding', value: '#FF0000' },
+    { label: 'Doors', value: '#00FF00' },
+    { label: 'Roofs', value: '#0000FF' },
+  ]
+%>
+
+<%= pb_rails("typeahead", props: { id: "typeahead-pills-example1", pill_color: "neutral", default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
+
+<%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
+
+<!-- This section is an example of the available JavaScript event hooks -->
+<%= javascript_tag defer: "defer" do %>
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-select", function(event) {
+    console.log('Option selected')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-option-remove", function(event) {
+    console.log('Option removed')
+    console.dir(event.detail)
+  })
+  document.addEventListener("pb-typeahead-kit-typeahead-pills-example1-result-clear", function() {
+    console.log('All options cleared')
+  })
+
+  document.querySelector('#clear-pills').addEventListener('click', function() {
+    document.dispatchEvent(new CustomEvent('pb-typeahead-kit-typeahead-pills-example1:clear'))
+  })
+<% end %>

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_color.jsx

@@ -0,0 +1,26 @@
+import React from 'react'
+import { Typeahead } from 'playbook-ui'
+
+const options = [
+  { label: 'Windows', value: '#FFA500' },
+  { label: 'Siding', value: '#FF0000' },
+  { label: 'Doors', value: '#00FF00' },
+  { label: 'Roofs', value: '#0000FF' },
+]
+
+const TypeaheadWithPills = (props) => {
+  return (
+    <>
+      <Typeahead
+          isMulti
+          label="Colors"
+          options={options}
+          pillColor="neutral"
+          placeholder=""
+          {...props}
+      />
+    </>
+  )
+}
+
+export default TypeaheadWithPills

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_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_typeahead/docs/_typeahead_with_pills_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_typeahead/docs/example.yml

@@ -9,6 +9,7 @@ examples:
     - typeahead_inline: Inline
     - typeahead_multi_kit: Multi Kit Options
     - typeahead_error_state: Error State
+    - typeahead_with_pills_color: With Pills (Custom Color)
 
   react:
     - typeahead_default: Default
@@ -23,3 +24,4 @@ examples:
     - typeahead_async_createable: Createable (+ Async Data)
     - typeahead_error_state: Error State
     - typeahead_custom_menu_list: Custom MenuList
+    - typeahead_with_pills_color: With Pills (Custom Color)

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

@@ -10,3 +10,4 @@ export { default as TypeaheadCreateable } from './_typeahead_createable.jsx'
 export { default as TypeaheadAsyncCreateable } from './_typeahead_async_createable.jsx'
 export { default as TypeaheadErrorState } from './_typeahead_error_state.jsx'
 export { default as TypeaheadCustomMenuList } from './_typeahead_custom_menu_list.jsx'
+export { default as TypeaheadWithPillsColor } from './_typeahead_with_pills_color.jsx'