playbook_ui_docs 13.18.0.pre.alpha.play1141iconkitusinglibrary2210 → 13.18.0.pre.alpha.powercentrainplaybookpt22201

Sign up to get free protection for your applications and to get access to all the features.
Files changed (6) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +11 -5
  3. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +18 -44
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +8 -4
  5. data/dist/playbook-doc.js +4 -4
  6. metadata +2 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 6d451e97cae3631f4ce6c8a41ca556d2db6bfca7cd0370c218d430da34ea886e
4
- data.tar.gz: af7f36b4c3491c097ff0e8a828470bb6ea539bd9b260414689755f43699500e7
3
+ metadata.gz: fd0fb443b85baf82b2303449ef7ae09e60de6f01df70772a4e27182558603114
4
+ data.tar.gz: d64335768d978c623fc8cd18dd1c4f201055e8cbbb58500e3b20bbad6accb6ff
5
5
  SHA512:
6
- metadata.gz: 0c80a0f761eb1b92b0a434cde90ca1670665121cb4c4b5d8a71025bae004f88fe814d7fdd17ab3e55218ff8a9e577cd24fcd411fce57ab2abdc2e7aec5a5c2a0
7
- data.tar.gz: 243dac9ebb7a15db43d65d4a6ceec400216f0c6eaa1e07f55ea127193d1c2b80c72ec3e84e6714d043ee60f22aebbd7a351cdd7d5d736ab76f31209a04b4b5fd
6
+ metadata.gz: 9c217f014ad4e701cdbaf6996a102d6b909f8fd89cda6acc65513db103828936e179c4331c2d010f989af2771c00a6251da9b09ae6973362bb20ada03d0cd3a8
7
+ data.tar.gz: 6fa99eab8ade7061730870835c7470816bf5728249fb9f61b500b08afad74c3561ce24cd06c8fafb43e34ef8fdeb37031e88c912407d6843c91f0c35472e82ff
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb CHANGED
@@ -2,9 +2,15 @@
2
2
  <div class="icon-wrapper">
3
3
 
4
4
  <% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
5
- <p><%= pb_rails("icon", props: { icon: svg_url } ) %></p>
6
- <p><%= pb_rails("icon", props: { rotation: 90, icon: svg_url, size: "2x" } ) %></p>
7
- <p><%= pb_rails("icon", props: { spin: true, icon: svg_url, size: "3x" } ) %></p>
8
- <p><%= pb_rails("icon", props: { size: "5x", icon: svg_url } ) %></p>
9
- <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", icon: svg_url } ) %></p>
5
+ <p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
6
+ <p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
7
+ <p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
8
+ <p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
9
+ <p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
10
+
11
+ <%= pb_rails("body", props: {
12
+ text: "Custom icons are compatible with other icon props (size, rotation,
13
+ spin, flip, etc). Their SVG fill colors will be inherited from
14
+ parent element's css color properties."
15
+ } ) %>
10
16
  </div>
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx CHANGED
@@ -1,59 +1,33 @@
1
1
  import React from 'react'
2
2
  import { Icon } from '../../'
3
3
 
4
+ // import Icons as config from 'power-icons'
4
5
  const config = {
5
- icon: (
6
- <svg viewBox="0 -256 1792 1792"
6
+ moon: (
7
+ <svg
8
+ ariaHidden="true"
9
+ focusable="false"
10
+ role="img"
11
+ viewBox="0 0 512 512"
7
12
  xmlns="http://www.w3.org/2000/svg"
8
13
  >
9
- <g transform="matrix(1,0,0,-1,53.152542,1217.0847)">
10
- <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" />
11
- </g>
14
+ <path
15
+ 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"
16
+ fill="currentColor"
17
+ />
12
18
  </svg>
13
19
  ),
14
20
  }
15
21
 
16
22
  const IconCustom = (props) => {
17
23
  return (
18
- <React.Fragment>
19
- <p>
20
- <Icon
21
- icon={config.icon}
22
- {...props}
23
- />
24
- </p>
25
- <p>
26
- <Icon
27
- icon={config.icon}
28
- rotation={90}
29
- size="2x"
30
- {...props}
31
- />
32
- </p>
33
- <p>
34
- <Icon
35
- icon={config.icon}
36
- size="3x"
37
- spin
38
- {...props}
39
- />
40
- </p>
41
- <p>
42
- <Icon
43
- icon={config.icon}
44
- size="5x"
45
- {...props}
46
- />
47
- </p>
48
- <p>
49
- <Icon
50
- flip="horizontal"
51
- icon={config.icon}
52
- size="5x"
53
- {...props}
54
- />
55
- </p>
56
- </React.Fragment>
24
+ <div>
25
+ <Icon
26
+ customIcon={config.moon}
27
+ size="7x"
28
+ {...props}
29
+ />
30
+ </div>
57
31
  )
58
32
  }
59
33
 
data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md CHANGED
@@ -4,12 +4,16 @@ When using custom icons it is important to introduce a "clean" SVG. In order to
4
4
 
5
5
  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>
6
6
 
7
- 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.
7
+ 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.
8
8
 
9
- 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**!
9
+ 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__!
10
10
 
11
- You must source _your own SVG into component/view_ you are working on. This can easily be done in programmatic and maintainable ways.
11
+ You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
12
+
13
+ ### React
14
+
15
+ 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.
12
16
 
13
17
  ### Rails
14
18
 
15
- Sending the absolute path to the `icon` prop results in an `<SVG>` tag within the working view.
19
+ 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.