playbook_ui_docs 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844 β†’ 13.27.0.pre.alpha.PLAY1342DRYcontenttagRailssimplekits2896

Sign up to get free protection for your applications and to get access to all the features.
Files changed (24) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  9. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  11. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  15. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  20. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  21. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  22. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  23. data/dist/playbook-doc.js +3 -3
  24. metadata +4 -2
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: fc63509b9914d445b8232d63a763b3124da50bbf65d94c991efa6d9481178e04
4
- data.tar.gz: d8556675f5da05fa76cf13550a2a343ea3902ca523ddba0947586602d6877d53
3
+ metadata.gz: a0267f5484779fb07b6aba31bdfdd378d05df2060018512dfb695f0a7ee223c6
4
+ data.tar.gz: 50c001971aa8d1e96f8f4d3d364ba760742c9598a4d0534448b32e7effa880d0
5
5
  SHA512:
6
- metadata.gz: 929fbeb53c31baffe7fa87145cd22e979dd7a455fb8077ea689759d26ab9d770143e5a48fac37b967a9ce05d01aad03e38aaf59347ca069f7cd18251d323ac78
7
- data.tar.gz: 5f463ddb6a68a95ed3360fc2409d74d6d01302a426f8ee93cf0ce5b71cb083f0003c05fc8b346e62418fed8234ae54dd5e083c455b3a541c4bd74b0f8cb9884e
6
+ metadata.gz: 40872da1deea3551a90e8ad1be0adeeb732f1d4cc96789ad795900f2dc45b3e7946f15c1cf9101b73db327f6bf9656945972b99fb929084038c67dba674ac956
7
+ data.tar.gz: f46eae90558ab75dc1e2a7b4aed4ab76cf7512b7a5533e1a2ee8b0e3707dc30eed32f9ada05523c4ea038a0ce0404b9f81fb7f90bd88152af5fcb02628260fae
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb CHANGED
@@ -1,71 +1,51 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "badge",
4
- text: "12",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
1
 
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "badge",
16
- text: "12",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
2
+ <%= pb_rails("avatar", props: {
3
+ component_overlay: {
4
+ component: "badge",
5
+ text: "12",
6
+ placement: "bottom-right"
7
+ },
8
+ name: "Terry Johnson",
9
+ size: "sm",
10
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
11
+ margin_bottom: "sm"
12
+ }) %>
24
13
 
25
- <%= pb_rails("avatar", props: {
26
- component_overlay: {
27
- component: "badge",
28
- text: "12",
29
- placement: "bottom-right"
30
- },
31
- name: "Terry Johnson",
32
- size: "sm",
33
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
34
- margin_bottom: "sm"
35
- }) %>
14
+ <%= pb_rails("avatar", props: {
15
+ component_overlay: {
16
+ component: "badge",
17
+ text: "12",
18
+ placement: "top-left"
19
+ },
20
+ name: "Terry Johnson",
21
+ size: "md",
22
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
23
+ margin_bottom: "sm"
24
+ }) %>
36
25
 
37
- <%= pb_rails("avatar", props: {
38
- component_overlay: {
39
- component: "badge",
40
- text: "12",
41
- placement: "bottom-left"
42
- },
43
- name: "Terry Johnson",
44
- size: "md",
45
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
46
- margin_bottom: "sm"
47
- }) %>
26
+ <%= pb_rails("avatar", props: {
27
+ component_overlay: {
28
+ component: "badge",
29
+ text: "On Roadtrip",
30
+ placement: "top-center",
31
+ variant: "info"
32
+ },
33
+ name: "Terry Johnson",
34
+ size: "lg",
35
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
36
+ margin_bottom: "sm"
37
+ }) %>
48
38
 
49
- <%= pb_rails("avatar", props: {
50
- component_overlay: {
51
- component: "badge",
52
- text: "12",
53
- placement: "top-left"
54
- },
55
- name: "Terry Johnson",
56
- size: "lg",
57
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
58
- margin_bottom: "sm"
59
- }) %>
39
+ <%= pb_rails("avatar", props: {
40
+ component_overlay: {
41
+ component: "badge",
42
+ text: "Out of Office",
43
+ placement: "bottom-center",
44
+ variant: "error"
45
+ },
46
+ name: "Terry Johnson",
47
+ size: "xl",
48
+ image_url: "https://randomuser.me/api/portraits/men/44.jpg",
49
+ margin_bottom: "sm"
50
+ }) %>
60
51
 
61
- <%= pb_rails("avatar", props: {
62
- component_overlay: {
63
- component: "badge",
64
- text: "12",
65
- placement: "top-right"
66
- },
67
- name: "Terry Johnson",
68
- size: "xl",
69
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
- margin_bottom: "sm"
71
- }) %>
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx CHANGED
@@ -4,28 +4,6 @@ import { Avatar } from '../..'
4
4
  const AvatarBadgeComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "badge",
10
- placement: "top-left",
11
- text: "12"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "badge",
21
- placement: "top-right",
22
- text: "12"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
7
  <Avatar
30
8
  componentOverlay={{
31
9
  component: "badge",
@@ -40,7 +18,7 @@ const AvatarBadgeComponentOverlay = () => {
40
18
  <Avatar
41
19
  componentOverlay={{
42
20
  component: "badge",
43
- placement: "bottom-left",
21
+ placement: "top-left",
44
22
  text: "12"
45
23
  }}
46
24
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -51,8 +29,9 @@ const AvatarBadgeComponentOverlay = () => {
51
29
  <Avatar
52
30
  componentOverlay={{
53
31
  component: "badge",
54
- placement: "top-left",
55
- text: "12"
32
+ placement: "top-center",
33
+ text: "On Roadtip",
34
+ variant: "info"
56
35
  }}
57
36
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
37
  marginBottom="sm"
@@ -62,14 +41,14 @@ const AvatarBadgeComponentOverlay = () => {
62
41
  <Avatar
63
42
  componentOverlay={{
64
43
  component: "badge",
65
- placement: "top-right",
66
- text: "12"
44
+ placement: "bottom-center",
45
+ text: "Out of Office",
46
+ variant: "error"
67
47
  }}
68
48
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
49
  marginBottom="sm"
70
50
  size="xl"
71
- />
72
-
51
+ />
73
52
  </div>
74
53
  )
75
54
  }
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md ADDED
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `badge` component as an overlay, you must also specify its text content,and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/badge#colors) as a `variant`.
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb CHANGED
@@ -1,32 +1,9 @@
1
- <%= pb_rails("avatar", props: {
2
- component_overlay: {
3
- component: "icon_circle",
4
- icon: "plus",
5
- placement: "top-left"
6
- },
7
- name: "Terry Johnson",
8
- size: "xxs",
9
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
10
- margin_bottom: "sm"
11
- }) %>
12
-
13
- <%= pb_rails("avatar", props: {
14
- component_overlay: {
15
- component: "icon_circle",
16
- icon: "plus",
17
- placement: "top-right"
18
- },
19
- name: "Terry Johnson",
20
- size: "xs",
21
- image_url: "https://randomuser.me/api/portraits/men/44.jpg",
22
- margin_bottom: "sm"
23
- }) %>
24
-
25
1
  <%= pb_rails("avatar", props: {
26
2
  component_overlay: {
27
3
  component: "icon_circle",
28
- icon: "plus",
29
- placement: "bottom-right"
4
+ icon: "shield",
5
+ placement: "bottom-right",
6
+ variant: "royal"
30
7
  },
31
8
  name: "Terry Johnson",
32
9
  size: "sm",
@@ -37,8 +14,9 @@
37
14
  <%= pb_rails("avatar", props: {
38
15
  component_overlay: {
39
16
  component: "icon_circle",
40
- icon: "plus",
41
- placement: "bottom-left"
17
+ icon: "check",
18
+ placement: "top-right",
19
+ variant: "green"
42
20
  },
43
21
  name: "Terry Johnson",
44
22
  size: "md",
@@ -49,8 +27,9 @@
49
27
  <%= pb_rails("avatar", props: {
50
28
  component_overlay: {
51
29
  component: "icon_circle",
52
- icon: "plus",
53
- placement: "top-left"
30
+ icon: "lock",
31
+ placement: "top-left",
32
+ variant: "red"
54
33
  },
55
34
  name: "Terry Johnson",
56
35
  size: "lg",
@@ -61,11 +40,12 @@
61
40
  <%= pb_rails("avatar", props: {
62
41
  component_overlay: {
63
42
  component: "icon_circle",
64
- icon: "plus",
65
- placement: "top-right"
43
+ icon: "star",
44
+ placement: "left-center",
45
+ variant: "yellow"
66
46
  },
67
47
  name: "Terry Johnson",
68
48
  size: "xl",
69
49
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
70
50
  margin_bottom: "sm"
71
- }) %>
51
+ }) %>
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx CHANGED
@@ -4,73 +4,54 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <div>
7
- <Avatar
8
- componentOverlay={{
9
- component: "iconCircle",
10
- icon: "plus",
11
- placement: "top-left"
12
- }}
13
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
14
- marginBottom="sm"
15
- size="xxs"
16
- />
17
-
18
- <Avatar
19
- componentOverlay={{
20
- component: "iconCircle",
21
- icon: "plus",
22
- placement: "top-right"
23
- }}
24
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
25
- marginBottom="sm"
26
- size="xs"
27
- />
28
-
29
- <Avatar
30
- componentOverlay={{
31
- component: "iconCircle",
32
- icon: "plus",
33
- placement: "bottom-right",
34
- }}
35
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
36
- marginBottom="sm"
37
- size="sm"
38
- />
39
-
40
- <Avatar
41
- componentOverlay={{
42
- component: "iconCircle",
43
- icon: "plus",
44
- placement: "bottom-left"
45
- }}
46
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
47
- marginBottom="sm"
48
- size="md"
49
- />
50
-
51
- <Avatar
52
- componentOverlay={{
53
- component: "iconCircle",
54
- icon: "plus",
55
- placement: "top-left"
56
- }}
57
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
58
- marginBottom="sm"
59
- size="lg"
60
- />
61
-
62
- <Avatar
63
- componentOverlay={{
64
- component: "iconCircle",
65
- icon: "plus",
66
- placement: "top-right"
67
- }}
68
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
69
- marginBottom="sm"
70
- size="xl"
71
- />
72
-
73
- </div>
7
+ <Avatar
8
+ componentOverlay={{
9
+ component: "iconCircle",
10
+ placement: "bottom-right",
11
+ icon: "shield",
12
+ variant: "royal"
13
+ }}
14
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
15
+ marginBottom="sm"
16
+ size="sm"
17
+ />
18
+
19
+ <Avatar
20
+ componentOverlay={{
21
+ component: "iconCircle",
22
+ placement: "bottom-right",
23
+ icon: "check",
24
+ variant: "green"
25
+ }}
26
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
27
+ marginBottom="sm"
28
+ size="md"
29
+ />
30
+
31
+ <Avatar
32
+ componentOverlay={{
33
+ component: "iconCircle",
34
+ placement: "top-left",
35
+ icon: "lock",
36
+ variant: "red"
37
+ }}
38
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
39
+ marginBottom="sm"
40
+ size="lg"
41
+ />
42
+
43
+ <Avatar
44
+ componentOverlay={{
45
+ component: "iconCircle",
46
+ placement: "left-center",
47
+ icon: "star",
48
+ variant: "yellow"
49
+ }}
50
+ imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
51
+ marginBottom="sm"
52
+ size="xl"
53
+ />
54
+ </div>
74
55
  )
75
56
  }
76
57
 
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md ADDED
@@ -0,0 +1,3 @@
1
+ NOTE: All `componentOverlay` implementations require a `placement` prop, that accepts any of the following values: `top-right`, `top-left`, `bottom-right`, `bottom-left`, `top-center`, `bottom-center`, `left-center`, and `right-center`.
2
+
3
+ When passing the `iconCircle` component as an overlay, you must also specify an `icon`, and you may optionally control the color by passing an [approved value](https://playbook.powerapp.cloud/kits/icon_circle/rails#color) as a `variant`.
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx CHANGED
@@ -57,26 +57,6 @@ const AvatarDefault = (props) => {
57
57
  status="offline"
58
58
  {...props}
59
59
  />
60
- <br/>
61
- <Avatar
62
- imageAlt="Terry Johnson Standing"
63
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
64
- name="Terry Johnson"
65
- overlay={{component:"badge", text: "6", variant: "notification", placement:"top-right"}}
66
- size="lg"
67
- status="offline"
68
- {...props}
69
- />
70
- <br/>
71
- <Avatar
72
- imageAlt="Terry Johnson Standing"
73
- imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
74
- name="Terry Johnson"
75
- overlay={{component:"icon", icon:"plus", variant:"royal", placement:"bottom-left"}}
76
- size="xl"
77
- status="offline"
78
- {...props}
79
- />
80
60
  </div>
81
61
  )
82
62
  }
data/app/pb_kits/playbook/pb_avatar/docs/example.yml CHANGED
@@ -4,14 +4,14 @@ examples:
4
4
  - avatar_monogram: Monogram
5
5
  - avatar_no_image: "Bad Image Link"
6
6
  - avatar_status: Status
7
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
7
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
8
8
  - avatar_badge_component_overlay: Badge Component Overlay
9
9
  react:
10
10
  - avatar_default: Default
11
11
  - avatar_monogram: Monogram
12
12
  - avatar_no_image: "Bad Image Link"
13
13
  - avatar_status: Status
14
- - avatar_circle_icon_component_overlay: Circle Icon Component Overlay
14
+ - avatar_circle_icon_component_overlay: Icon Circle Component Overlay
15
15
  - avatar_badge_component_overlay: Badge Component Overlay
16
16
  swift:
17
17
  - avatar_default_swift: Default
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -42,3 +42,23 @@
42
42
  dark: true
43
43
  }) %>
44
44
  <% end %>
45
+
46
+ <%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
47
+
48
+ <%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" }) do %>
49
+ <%= pb_rails("body", props: {
50
+ text: "Success Subtle"
51
+ }) %>
52
+ <% end %>
53
+
54
+ <%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" }) do %>
55
+ <%= pb_rails("body", props: {
56
+ text: "Warning Subtle"
57
+ }) %>
58
+ <% end %>
59
+
60
+ <%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" }) do %>
61
+ <%= pb_rails("body", props: {
62
+ text: "Info Subtle"
63
+ }) %>
64
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -90,7 +90,47 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
93
+
94
+ <Title
95
+ {...props}
96
+ marginBottom="sm"
97
+ size={4}
98
+ tag="h4"
99
+ text="Subtle Status Colors"
100
+ />
101
+
102
+ <Card
103
+ background="success_subtle"
104
+ marginBottom="sm"
105
+ {...props}
106
+ >
107
+ <Body
108
+ text="Success Subtle"
109
+ {...props}
110
+ />
111
+ </Card>
112
+
113
+ <Card
114
+ background="warning_subtle"
115
+ marginBottom="sm"
116
+ {...props}
117
+ >
118
+ <Body
119
+ text="Warning Subtle"
120
+ {...props}
121
+ />
122
+ </Card>
123
+
124
+ <Card
125
+ background="info_subtle"
126
+ marginBottom="sm"
127
+ {...props}
128
+ >
129
+ <Body
130
+ text="Info Subtle"
131
+ {...props}
132
+ />
133
+ </Card>
94
134
  </div>
95
135
  )
96
136
  }
data/app/pb_kits/playbook/pb_card/docs/_card_background.md CHANGED
@@ -1 +1 @@
1
- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
1
+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -67,4 +67,4 @@
67
67
  <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
68
  Body
69
69
  <% end %>
70
- <% end %>
70
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED
@@ -1 +1 @@
1
- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md CHANGED
@@ -1 +1 @@
1
- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
1
+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb CHANGED
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "πŸ‡ΊπŸ‡Έ",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb CHANGED
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "πŸ‡ΊπŸ‡Έ",
8
- id: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pakistan"
22
+ id: "pk"
23
23
  }
24
24
  ]
25
25
 
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>