playbook_ui_docs 15.3.0.pre.alpha.PLAY2577reactpopoverappendToPOC11730 → 15.3.0.pre.alpha.PLAY2596datestackedcurrentyear12147

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

@@ -0,0 +1,64 @@
+<%
+  grouped_options = [
+    {
+      label: "Warm Colors",
+      options: [
+        { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+%>
+<br />
+<%= pb_rails("typeahead", props: {
+    id: "typeahead-custom-options",
+    options: grouped_options,
+    label: "Colors",
+    name: :foo,
+    placeholder: "Select a Color...",
+    is_multi: false
+  })
+%>

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

@@ -0,0 +1,70 @@
+import React from 'react'
+
+import Typeahead from '../_typeahead'
+
+const groupedOptions = [
+  {
+    label: "Warm Colors",
+    options: [
+      { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+
+const TypeaheadCustomOptions = (props) => {
+  return (
+    <Typeahead
+        label="Colors"
+        options={groupedOptions}
+        placeholder="Select a Color..."
+        {...props}
+    />
+  )
+}
+
+export default TypeaheadCustomOptions
+

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_options.md

@@ -0,0 +1 @@
+Grouped options can be rendered via structuring the options in the way shown in the code snippet below.

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

@@ -25,11 +25,77 @@
   ]
 %>
 
+<%
+  grouped_options = [
+    {
+      label: "Warm Colors",
+      options: [
+        { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+%>
+
+
 <%= pb_rails("typeahead", props: {
     default_options: [{ label: 'Gray', value: '#808080' }],
     id: "typeahead-default-value",
     options: options,
-    label: "Colors",
+    label: "Default Value with basic options",
+    name: :foo,
+    is_multi: false
+  })
+%>
+
+<%= pb_rails("typeahead", props: {
+    default_options:[{ label: "Pink", value: "#FFC0CB" }],
+    id: "typeahead-default-value-grouped-options",
+    options: grouped_options,
+    label: "Default Value with grouped options",
     name: :foo,
     is_multi: false
   })

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

@@ -27,14 +27,76 @@ const options = [
   { label: 'Coral', value: '#FF7F50' }
 ]
 
+const groupedOptions = [
+  {
+    label: "Warm Colors",
+    options: [
+      { label: "Red", value: "#FF0000" },
+        { label: "Orange", value: "#FFA500" },
+        { label: "Yellow", value: "#FFFF00" },
+        { label: "Coral", value: "#FF7F50" },
+        { label: "Gold", value: "#FFD700" }
+      ]
+    },
+    {
+      label: "Cool Colors",
+      options: [
+        { label: "Blue", value: "#0000FF" },
+        { label: "Teal", value: "#008080" },
+        { label: "Cyan", value: "#00FFFF" },
+        { label: "Navy", value: "#000080" },
+        { label: "Turquoise", value: "#40E0D0" }
+      ]
+    },
+    {
+      label: "Neutrals",
+      options: [
+        { label: "White", value: "#FFFFFF" },
+        { label: "Black", value: "#000000" },
+        { label: "Gray", value: "#808080" },
+        { label: "Beige", value: "#F5F5DC" },
+        { label: "Silver", value: "#C0C0C0" }
+      ]
+    },
+    {
+      label: "Earth Tones",
+      options: [
+        { label: "Brown", value: "#A52A2A" },
+        { label: "Olive", value: "#808000" },
+        { label: "Forest Green", value: "#228B22" },
+        { label: "Tan", value: "#D2B48C" },
+        { label: "Maroon", value: "#800000" }
+      ]
+    },
+    {
+      label: "Fun Shades",
+      options: [
+        { label: "Pink", value: "#FFC0CB" },
+        { label: "Magenta", value: "#FF00FF" },
+        { label: "Lime", value: "#00FF00" },
+        { label: "Purple", value: "#800080" },
+        { label: "Indigo", value: "#4B0082" }
+      ]
+    }
+  ]
+
 const TypeaheadDefaultValue = (props) => {
   return (
-    <Typeahead
-        defaultValue={options[10]}
-        label="Colors"
-        options={options}
-        {...props}
-    />
+    <>
+      <Typeahead
+          defaultValue={options[10]}
+          label="Default Value with basic options"
+          options={options}
+          {...props}
+      />
+      <br />
+      <Typeahead
+          defaultValue={{ label: "Pink", value: "#FFC0CB" }}
+          label="Default Value with grouped options"
+          options={groupedOptions}
+          {...props}
+      />
+    </>
   )
 }
 

data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_truncated_text.md

@@ -1 +1 @@
-For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/visual_guidelines/truncate) for more information on the truncate global prop.
+For Form Pills with longer text, the `truncate` global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See [here](https://playbook.powerapp.cloud/global_props/truncate) for more information on the truncate global prop.

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

@@ -1,6 +1,7 @@
 examples:
   rails:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
     - typeahead_default_options: With Default Options
     - typeahead_with_context: With Context
     - typeahead_with_pills: With Pills
@@ -20,6 +21,7 @@ examples:
 
   react:
     - typeahead_default: Default
+    - typeahead_custom_options: With Grouped Options
     - typeahead_default_value: With Default Value
     - typeahead_react_hook: React Hook
     - typeahead_with_highlight: With Highlight

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

@@ -16,4 +16,5 @@ export { default as TypeaheadTruncatedText } from './_typeahead_truncated_text.j
 export { default as TypeaheadReactHook } from './_typeahead_react_hook.jsx'
 export { default as TypeaheadDisabled } from './_typeahead_disabled.jsx'
 export { default as TypeaheadPreserveInput } from './_typeahead_preserve_input.jsx'
-export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
+export { default as TypeaheadDefaultValue } from './_typeahead_default_value.jsx'
+export { default as TypeaheadCustomOptions } from './_typeahead_custom_options.jsx'