playbook_ui_docs 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 9ee442a9f15b539ec0ab29bb4efaaac22f644679be3f03719778bf3b02b8bcf8
-  data.tar.gz: 3011b3404ce091a1f4aeb669deb4ecd6191f59bf536d3b8577fdf694f7ef709a
+  metadata.gz: 0202d59ed4925de375ff662bf89dbc2267e4d2448dccbed8f657f67b07010788
+  data.tar.gz: ba326a997028b871950ae3c7c7dbec43191ef6796e5877944c73d4c979158a92
 SHA512:
-  metadata.gz: 0e35db9d43b40767e402c5693d27870013ef7b7e456093c4cf9b6bfffcde57457bf861dac81082007eef21edf52c823a0565e7210f79292191ec8a116704e83e
-  data.tar.gz: d2f09a6b5b8498cb4e378ebdb78236f812c241580fd6a3d046312fde7a608d62a4b8133316b85973f4ef713638fdc52de7c791a33fbf3624af5afd3804635f7c
+  metadata.gz: 21d0ffdb91a6b98437c49acc9d8b1b7b225a992d72d448a4cecc9f103013365707c70b5dd1199ef129dfde8f983e8964479597a089d493dc66c8c120a2b5e4bd
+  data.tar.gz: 0f88b7bf28a5b21475deffd253ed1e3671ff457e41b903935c067dd503a682250e809b3da56aeffa31e150c8e2710ca44a10d5c597a5d16dcb50959991db9092

data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md

@@ -1,6 +1,2 @@
 The `customOptions` prop provides comprehensive access to additional [Highcharts options](https://api.highcharts.com/highcharts/) that are not explicitly defined as props.
  It's important to note that certain options may require specific script imports to function properly.
-
-Note: If you are having trouble getting any Highcharts options to work, please match the formatting of our [staticOptions](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L85-L141). For example, `yAxis` will need to be wrapped with square brackets.
-
-You may also need to override any of the [defaults](https://github.com/powerhome/playbook/blob/master/playbook/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx#L45-L73) in order to get that options to work.

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

@@ -8,8 +8,6 @@ examples:
   - dropdown_with_custom_trigger_rails: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
-  - dropdown_default_value: Default Value
-  - dropdown_blank_selection: Blank Selection
 
   react:
   - dropdown_default: Default
@@ -20,8 +18,6 @@ examples:
   - dropdown_with_custom_trigger: Custom Trigger
   - dropdown_with_custom_padding: Custom Option Padding
   - dropdown_error: Dropdown with Error
-  - dropdown_default_value: Default Value
-  - dropdown_blank_selection: Blank Selection
   # - dropdown_with_autocomplete: Autocomplete
   # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
   # - dropdown_with_external_control: useDropdown Hook

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

@@ -9,6 +9,4 @@ export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
 export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
 export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
 export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
-export { default as DropdownError } from './_dropdown_error.jsx'
-export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
-export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
+export { default as DropdownError } from './_dropdown_error.jsx'

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

@@ -1,5 +1 @@
-<%= pb_rails("form_pill", props: {
-    text_transform: "lowercase" ,
-    text: "THIS IS A TAG",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text_transform: "lowercase" , text: "THIS IS A TAG" }) %>

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

@@ -6,7 +6,6 @@ const FormPillExample = (props) => {
     <div>
       <FormPill
           onClick={() => alert('Click!')}
-          tabIndex={0}
           text="THIS IS A TAG"
           textTransform="lowercase"
           {...props}

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

@@ -2,7 +2,6 @@
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
    size: "small",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -11,5 +10,4 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    size: "small",
-   tabindex: 0,
 }) %>

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

@@ -9,7 +9,6 @@ const FormPillSize = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillSize = (props) => {
       <FormPill
           name="Anna Black"
           size="small"
-          tabIndex={0}
           {...props}
       />
     </div>

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

@@ -1,4 +1 @@
-<%= pb_rails("form_pill", props: {
-    text: "this is a tag",
-    tabindex: 0,
-}) %>
+<%= pb_rails("form_pill", props: { text: "this is a tag" }) %>

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

@@ -6,9 +6,8 @@ const FormPillDefault = (props) => {
     <div>
       <FormPill
           onClick={() => {
-            alert('Click!')
-          }}
-          tabIndex={0}
+alert('Click!')
+}}
           text="this is a tag"
           {...props}
       />

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

@@ -1,7 +1,6 @@
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
    avatar_url: "https://randomuser.me/api/portraits/women/44.jpg",
-   tabindex: 0,
 }) %>
 
 <br />
@@ -9,5 +8,4 @@
 
 <%= pb_rails("form_pill", props: {
    name: "Anna Black",
-   tabindex: 0,
 }) %>

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

@@ -9,7 +9,6 @@ const FormPillDefault = (props) => {
           avatarUrl="https://randomuser.me/api/portraits/women/44.jpg"
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
       <br />
@@ -17,7 +16,6 @@ const FormPillDefault = (props) => {
       <FormPill
           name="Anna Black"
           onClick={() => alert('Click!')}
-          tabIndex={0}
           {...props}
       />
     </div>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb

@@ -0,0 +1,7 @@
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "info", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "frog", fixed_width: true, color: "data_4", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "vial", fixed_width: true, color: "text_lt_lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_roofing", size: "2x" }) %>
+<% end %>

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx

@@ -0,0 +1,46 @@
+import React from "react"
+import Icon from "../_icon"
+
+const IconDefault = (props) => {
+  return (
+    <div style={{ display: "flex", flexDirection: "column"}}>
+      <Icon
+          color="primary"
+          fixedWidth
+          icon="user"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="info"
+          fixedWidth
+          icon="recycle"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="data_4"
+          fixedWidth
+          icon="frog"
+          size="2x"
+          {...props}
+          />
+      <Icon
+          color="text_lt_lighter"
+          fixedWidth
+          icon="vial"
+          size="2x"
+          {...props}
+      />
+      <Icon
+          color="roofing"
+          fixedWidth
+          icon="product-roofing"
+          size="2x"
+          {...props}
+      />
+    </div>
+  )
+}
+
+export default IconDefault

data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md

@@ -0,0 +1 @@
+Pass any Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 

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

@@ -9,6 +9,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   react:
   - icon_default: Icon Default
@@ -20,6 +21,7 @@ examples:
   - icon_sizes: Icon Sizes
   - icon_custom: Icon Custom
   - icon_fa_kit: Icon with FontAwesome Kit
+  - icon_color: Icon Color
 
   swift:
   - icon_default_swift: Icon Default

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

@@ -7,3 +7,4 @@ export { default as IconBorder } from './_icon_border.jsx'
 export { default as IconSizes } from './_icon_sizes.jsx'
 export { default as IconCustom } from './_icon_custom.jsx'
 export { default as IconFaKit} from './_icon_fa_kit.jsx'
+export { default as IconColor } from './_icon_color.jsx'

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

@@ -19,7 +19,6 @@ examples:
   - block_nav: Block
   - block_no_title_nav: Without Title
   - new_tab: Open in a New Tab
-  - tab_nav: Tab Nav
 
   react:
   - default_nav: Default

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

@@ -13,4 +13,4 @@ examples:
     - star_rating_background_options: Background Options
     - star_rating_hide: Layout Options
     - star_rating_number_config: Number Config
-    - star_rating_size_options: Size Options
+    - star_rating_size_options: Size Options

data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx

@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
 import Title from '../../pb_title/_title'
 
 const TextInputDefault = (props) => {
-  const [firstName, setFirstName] = useState('')
   const handleOnChangeFirstName = ({ target }) => {
     setFirstName(target.value)
   }
   const ref = React.createRef()
 
+  const [firstName, setFirstName] = useState('')
   const [formFields, setFormFields] = useState({
     firstName: 'Jane',
     lastName: 'Doe',

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

@@ -1,5 +1,3 @@
-/* eslint-disable react/no-multi-comp */
-
 import React, { useState } from 'react'
 
 import {

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

@@ -1,28 +1,63 @@
-<%
-  options = [
-    { label: 'Orange', value: '#FFA500' },
-    { label: 'Red', value: '#FF0000' },
-    { label: 'Green', value: '#00FF00' },
-    { label: 'Blue', value: '#0000FF' },
-  ]
-%>
-
 <%= pb_rails("typeahead", props: {
-    id: "typeahead-default",
-    placeholder: "All Colors",
-    options: options,
-    label: "Colors",
-    name: :foo,
-    is_multi: false
-  })
-%>
+  label: "user",
+  name: :foo,
+  data: { typeahead_example: true },
+  input_options: {
+    classname: "my-typeahead-class",
+    data: {
+      typeahead_testing: "data field test"
+    },
+    id: "typeahead-input-id-test",
+  },
+})%>
+
+<br><br><br>
+
+<%= pb_rails("card", props: { padding: "xl", data: { typeahead_example_selected_option: true } }) do %>
+  <%= pb_rails("body") do %>
+    Use the above input to search for users on Github, and see the results as you type.
+  <% end %>
+
+  <%= pb_rails("body") do %>
+    When you make a selection, you will see it appear in the list below
+  <% end %>
+
+  <div data-selected-option></div>
+<% end %>
+
+<template data-typeahead-example-result-option>
+  <%= pb_rails("user", props: {
+    name: tag(:slot, name: "name"),
+    orientation: "horizontal",
+    align: "left",
+    avatar_url: "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR4nGP6zwAAAgcBApocMXEAAAAASUVORK5CYII=",
+    avatar: true
+    }) %>
+</template>
 
 <%= javascript_tag defer: "defer" do %>
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
-    console.log('Single Option selected')
-    console.dir(event.detail)
+  document.addEventListener("pb-typeahead-kit-search", function(event) {
+    if (!event.target.dataset || !event.target.dataset.typeaheadExample) return;
+
+    fetch(`https://api.github.com/search/users?q=${encodeURIComponent(event.detail.searchingFor)}`)
+      .then(response => response.json())
+      .then((result) => {
+        const resultOptionTemplate = document.querySelector("[data-typeahead-example-result-option]")
+
+        event.detail.setResults((result.items || []).map((user) => {
+          const wrapper = resultOptionTemplate.content.cloneNode(true)
+          wrapper.querySelector('slot[name="name"]').replaceWith(user.login)
+          wrapper.querySelector('img').dataset.src = user.avatar_url
+          return wrapper
+        }))
+      })
   })
-  document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
-    console.log('All options cleared')
+
+
+  document.addEventListener("pb-typeahead-kit-result-option-selected", function(event) {
+    if (!event.target.dataset.typeaheadExample) return;
+
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = ""
+    document.querySelector("[data-typeahead-example-selected-option] [data-selected-option]").innerHTML = event.detail.selected.innerHTML
   })
 <% end %>

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

@@ -47,6 +47,8 @@ const promiseOptions = (inputValue) =>
 
 const TypeaheadWithPillsAsync = (props) => {
   const [users, setUsers] = useState([])
+  const handleOnChange = (value) => setUsers(formatUsers(value))
+  const formatValue = (users) => formatUsers(users)
   const formatUsers = (users) => {
     const results = () => (users.map((user) => {
       if (Object.keys(user)[0] === 'name' || Object.keys(user)[1] === 'id'){
@@ -57,8 +59,6 @@ const TypeaheadWithPillsAsync = (props) => {
     }))
     return results()
   }
-  const handleOnChange = (value) => setUsers(formatUsers(value))
-  const formatValue = (users) => formatUsers(users)
 
   return (
     <>