playbook_ui_docs 13.16.0.pre.alpha.play1141iconkitusinglibrary1995 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2038

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d601cb3103a0f8bf607bcd0d22aa40424230ae5c63b9ff95598ebca7f23c4df6
-  data.tar.gz: f6666235b862e6d729ab9d4e44f2fc61ddd282cab7568bda17237e12e3eaa58e
+  metadata.gz: 28f5c1f1d141bab451d9254bbf89271080d43e3c4711b34ad217606803434f65
+  data.tar.gz: be38c2201d96439699602986fa0984bdeef653f5281389964d3192620e64e15f
 SHA512:
-  metadata.gz: 740f15bc7f33bae11242a5117cadccb9c21e173d4a4367c529b4ca1b4cf5adfe163c8afa015a0dc03f2214033e81731dd29b9d9332710bd7467faf8310412934
-  data.tar.gz: 7ba4852b340474005ddbbd18edb317aa9714ee793327985fb0333a38c9c997900c6b5b3bb61339de51b111b669ccdc1d768528564047267c732a8f6fb2950c32
+  metadata.gz: 44a9d7c236f644faaf61007d95cf574ea26e7e1b646db7755ea8bcc05b7e4e68911fab22282a3873295adcd23f696de71379c2e9d07c22471fcb0e95eae983a6
+  data.tar.gz: 923f31ce50f43a63c121a1de094dac50490387b1ad67a8274735086e7446dc4cdb2ae8296dc112524fbcab38e0994d4ffdf78a9dd8586a99755a51cc5ad27d68

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

@@ -1,5 +1,15 @@
 # Tips for Custom Icons
 
+When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
+
+Attributes must be React compatible e.g. <code>xmlns:xlink</code> should be <code>xmlnsXlink</code> and so on. <strong>There should be no hyphenated attributes and no semi-colons!.</strong>
+
+Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <code>fill="black"</code>, should be replaced with <code>currentColor</code> ala <code>fill="currentColor"</code>. Your mileage may vary depending on the complexity of your SVG.
+
+Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point **when designing instead of trying to retrofit the viewbox afterwards**!
+
+You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
+
 ### React
 
 - Providing a valid React `<SVG>` element to the `icon` prop results in an `<SVG>` node within the working view.

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

@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
     Option: (highlightProps: OptionProps) => (
       <components.Option {...highlightProps}/>
     ),
-    SingleValue: ({ data }: any) => (
-      <span>{data.name}</span>
+    SingleValue: ({ ...props }) => (
+      <components.SingleValue {...props}>
+        <span>{props.data.name}</span>
+      </components.SingleValue>
     )
   }