playbook_ui_docs 13.19.0.pre.alpha.PBNTR207tabledivsupport2261 → 13.19.0.pre.alpha.play1141iconkitusinglibrary2264

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 371298dc24bb6261c47235a1a1fc96535f40895bf2e367d2c74a0a2f2194856b
-  data.tar.gz: 27af54cb4a1555edd946811c6a9d790f9d15a12ffb83755bde53a51814147ad6
+  metadata.gz: 936e8ee804d7efa806eb0201fe38ce302d4ba5de0e91b94ad80baca0fc0af684
+  data.tar.gz: 1e44f49da5b663f002d48a47c28cdc1cf571c6b39912305c395bc12b2e521db2
 SHA512:
-  metadata.gz: af4a307e32b77ee025b590b0c8e4c050b85c56a828d79ebdc526687503be7eaf3f609f766a7e6111294fb01d166433123de1a7481f84b9baf5eb11632fe74849
-  data.tar.gz: 00d49100858c5b291a86fb2bfe30be7bbbebaf5c7c447d07b31c8077036bf9694ee7881b4092cc23e2487a6e97b5131780515f32a1d2ff7fe5612437966cf5ac
+  metadata.gz: 7f25ed0f6d1e41a8921225fdb80a6a271a3528414dd065d45e2186ce4f3f0470e8f8bb339c11e42a65ca49e30944d8eca4799527ccd1a84ee34ee3bf4f8c5305
+  data.tar.gz: 5f77993dacb64a84dcdfe660fff1f0b03b4ef843cbbfcf47b079c3190c454b3b48c755ef999639417e48964dab228d905c0e26184d607b6a58a83f4ac5046ffd

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

@@ -2,15 +2,9 @@
 <div class="icon-wrapper">
 
   <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
-  <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
-  <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
-  <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
-  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
-
-  <%= pb_rails("body", props: {
-    text: "Custom icons are compatible with other icon props (size, rotation,
-    spin, flip, etc). Their SVG fill colors will be inherited from
-    parent element's css color properties."
-  } ) %>
+  <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
+  <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
+  <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
+  <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
 </div>

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

@@ -1,33 +1,59 @@
 import React from 'react'
 import { Icon } from '../../'
 
-// import Icons as config from 'power-icons'
 const config = {
-  moon: (
-    <svg
-        ariaHidden="true"
-        focusable="false"
-        role="img"
-        viewBox="0 0 512 512"
+  icon: (
+    <svg viewBox="0 -256 1792 1792"
         xmlns="http://www.w3.org/2000/svg"
     >
-      <path
-          d="M448 0H64C28.7 0 0 28.7 0 64v288c0 35.3 28.7 64 64 64h96v84c0 7.1 5.8 12 12 12 2.4 0 4.9-.7 7.1-2.4L304 416h144c35.3 0 64-28.7 64-64V64c0-35.3-28.7-64-64-64zm16 352c0 8.8-7.2 16-16 16H288l-12.8 9.6L208 428v-60H64c-8.8 0-16-7.2-16-16V64c0-8.8 7.2-16 16-16h384c8.8 0 16 7.2 16 16v288zM336 184h-56v-56c0-8.8-7.2-16-16-16h-16c-8.8 0-16 7.2-16 16v56h-56c-8.8 0-16 7.2-16 16v16c0 8.8 7.2 16 16 16h56v56c0 8.8 7.2 16 16 16h16c8.8 0 16-7.2 16-16v-56h56c8.8 0 16-7.2 16-16v-16c0-8.8-7.2-16-16-16z"
-          fill="currentColor"
-      />
+      <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
+          <path d="m 384,64 q 0,26 -19,45 -19,19 -45,19 -26,0 -45,-19 -19,-19 -19,-45 0,-26 19,-45 19,-19 45,-19 26,0 45,19 19,19 19,45 z m 644,420 -682,-682 q -37,-37 -90,-37 -52,0 -91,37 L 59,-90 Q 21,-54 21,0 21,53 59,91 L 740,772 Q 779,674 854.5,598.5 930,523 1028,484 z m 634,435 q 0,-39 -23,-106 Q 1592,679 1474.5,595.5 1357,512 1216,512 1031,512 899.5,643.5 768,775 768,960 q 0,185 131.5,316.5 131.5,131.5 316.5,131.5 58,0 121.5,-16.5 63.5,-16.5 107.5,-46.5 16,-11 16,-28 0,-17 -16,-28 L 1152,1120 V 896 l 193,-107 q 5,3 79,48.5 74,45.5 135.5,81 61.5,35.5 70.5,35.5 15,0 23.5,-10 8.5,-10 8.5,-25 z" />
+      </g>
     </svg>
   ),
 }
 
 const IconCustom = (props) => {
   return (
-    <div>
-      <Icon
-          customIcon={config.moon}
-          size="7x"
-          {...props}
-      />
-    </div>
+    <React.Fragment>
+      <p>
+        <Icon
+            icon={config.icon}
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            rotation={90}
+            size="2x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="3x"
+            spin
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+      <p>
+        <Icon
+            flip="horizontal"
+            icon={config.icon}
+            size="5x"
+            {...props}
+        />
+      </p>
+    </React.Fragment>
   )
 }
 

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

@@ -4,16 +4,12 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
 
 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.
+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__!
+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
-
-So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
+You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
 
 ### Rails
 
-Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
+Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.

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

@@ -1,6 +1,5 @@
 examples:
   rails:
-    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large
@@ -27,7 +26,6 @@ examples:
     - table_striped: Striped Table
 
   react:
-    - table_div: Div
     - table_sm: Small
     - table_md: Medium
     - table_lg: Large

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

@@ -21,4 +21,3 @@ export { default as TableAlignmentShiftData } from './_table_alignment_shift_dat
 export { default as TableWithBackgroundKit } from './_table_with_background_kit.jsx'
 export { default as TableVerticalBorder } from './_table_vertical_border.jsx'
 export { default as TableStriped } from './_table_striped.jsx'
-export { default as TableDiv } from './_table_div.jsx'