playbook_ui_docs 13.16.0.pre.alpha.play1141iconkitusinglibrary1995 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2037

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: d601cb3103a0f8bf607bcd0d22aa40424230ae5c63b9ff95598ebca7f23c4df6
-  data.tar.gz: f6666235b862e6d729ab9d4e44f2fc61ddd282cab7568bda17237e12e3eaa58e
+  metadata.gz: 640a5190d5977345bfdb6dd2d9faf39a2ebb1382f61c4ad099c7af0d0f64c369
+  data.tar.gz: cfdb3a49b0febce58c0f9ff830aa46512cad17f590f80893228819e7d55fc0df
 SHA512:
-  metadata.gz: 740f15bc7f33bae11242a5117cadccb9c21e173d4a4367c529b4ca1b4cf5adfe163c8afa015a0dc03f2214033e81731dd29b9d9332710bd7467faf8310412934
-  data.tar.gz: 7ba4852b340474005ddbbd18edb317aa9714ee793327985fb0333a38c9c997900c6b5b3bb61339de51b111b669ccdc1d768528564047267c732a8f6fb2950c32
+  metadata.gz: 2cfe31671e7b5a4ad57df82719c8a59fffcd6e849d0fbe1c04663594dd112e7972231781652bd860b363363ec8337f150663e716618648a1b9f2f0f926eea1bf
+  data.tar.gz: 0a55be6e793edc7620c7992936a2638bb49ec717304cf8a27933ce456b4398ace51fcb64fe25d2e7279365d244f00b1d48e22eba42847237b6a5444ee1b31158

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>
     )
   }