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

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 +66 -46
  3. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
  4. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
  5. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
  6. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  8. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
  9. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
  10. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  11. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  13. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  14. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  15. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  16. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  17. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  18. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  19. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  20. data/dist/app/components/playbook/pb_docs/kit_example.html.erb +3 -3
  21. data/dist/playbook-doc.js +3 -3
  22. metadata +2 -4
  23. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
  24. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: aac9bebd5ccfd82e70b7a5c68491f35e66e7cd347e971953e0b79392781e4cb2
4
- data.tar.gz: 2b68f77188be927ab32d06291c37a96738c0a2a078b2f819eb1a245afeb1e79c
3
+ metadata.gz: fc63509b9914d445b8232d63a763b3124da50bbf65d94c991efa6d9481178e04
4
+ data.tar.gz: d8556675f5da05fa76cf13550a2a343ea3902ca523ddba0947586602d6877d53
5
5
  SHA512:
6
- metadata.gz: a5bab51458f976f922effba6470ca2f0bb762e9a8bc64a53d30f862bdd1dad5a5a1ccc110919af8d4873fb1dccd9159e101df7a33ecf524347ca5b159ba73223
7
- data.tar.gz: 28d87274cd6370d874146f60a7f9d5b594e51bc3a848c68767323941645c32288c38b52c7123f6b3452d4ff6dcf2c780e83a2b274c81f6ac6d203f3a43ae6557
6
+ metadata.gz: 929fbeb53c31baffe7fa87145cd22e979dd7a455fb8077ea689759d26ab9d770143e5a48fac37b967a9ce05d01aad03e38aaf59347ca069f7cd18251d323ac78
7
+ data.tar.gz: 5f463ddb6a68a95ed3360fc2409d74d6d01302a426f8ee93cf0ce5b71cb083f0003c05fc8b346e62418fed8234ae54dd5e083c455b3a541c4bd74b0f8cb9884e
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb CHANGED
@@ -1,51 +1,71 @@
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
+ }) %>
1
12
 
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
- }) %>
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
+ }) %>
13
24
 
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
- }) %>
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
+ }) %>
25
36
 
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
- }) %>
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
+ }) %>
38
48
 
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
- }) %>
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
+ }) %>
51
60
 
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,6 +4,28 @@ 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
+
7
29
  <Avatar
8
30
  componentOverlay={{
9
31
  component: "badge",
@@ -18,7 +40,7 @@ const AvatarBadgeComponentOverlay = () => {
18
40
  <Avatar
19
41
  componentOverlay={{
20
42
  component: "badge",
21
- placement: "top-left",
43
+ placement: "bottom-left",
22
44
  text: "12"
23
45
  }}
24
46
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
@@ -29,9 +51,8 @@ const AvatarBadgeComponentOverlay = () => {
29
51
  <Avatar
30
52
  componentOverlay={{
31
53
  component: "badge",
32
- placement: "top-center",
33
- text: "On Roadtip",
34
- variant: "info"
54
+ placement: "top-left",
55
+ text: "12"
35
56
  }}
36
57
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
37
58
  marginBottom="sm"
@@ -41,14 +62,14 @@ const AvatarBadgeComponentOverlay = () => {
41
62
  <Avatar
42
63
  componentOverlay={{
43
64
  component: "badge",
44
- placement: "bottom-center",
45
- text: "Out of Office",
46
- variant: "error"
65
+ placement: "top-right",
66
+ text: "12"
47
67
  }}
48
68
  imageUrl="https://randomuser.me/api/portraits/men/44.jpg"
49
69
  marginBottom="sm"
50
70
  size="xl"
51
- />
71
+ />
72
+
52
73
  </div>
53
74
  )
54
75
  }
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb CHANGED
@@ -1,9 +1,32 @@
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
+
1
25
  <%= pb_rails("avatar", props: {
2
26
  component_overlay: {
3
27
  component: "icon_circle",
4
- icon: "shield",
5
- placement: "bottom-right",
6
- variant: "royal"
28
+ icon: "plus",
29
+ placement: "bottom-right"
7
30
  },
8
31
  name: "Terry Johnson",
9
32
  size: "sm",
@@ -14,9 +37,8 @@
14
37
  <%= pb_rails("avatar", props: {
15
38
  component_overlay: {
16
39
  component: "icon_circle",
17
- icon: "check",
18
- placement: "top-right",
19
- variant: "green"
40
+ icon: "plus",
41
+ placement: "bottom-left"
20
42
  },
21
43
  name: "Terry Johnson",
22
44
  size: "md",
@@ -27,9 +49,8 @@
27
49
  <%= pb_rails("avatar", props: {
28
50
  component_overlay: {
29
51
  component: "icon_circle",
30
- icon: "lock",
31
- placement: "top-left",
32
- variant: "red"
52
+ icon: "plus",
53
+ placement: "top-left"
33
54
  },
34
55
  name: "Terry Johnson",
35
56
  size: "lg",
@@ -40,12 +61,11 @@
40
61
  <%= pb_rails("avatar", props: {
41
62
  component_overlay: {
42
63
  component: "icon_circle",
43
- icon: "star",
44
- placement: "left-center",
45
- variant: "yellow"
64
+ icon: "plus",
65
+ placement: "top-right"
46
66
  },
47
67
  name: "Terry Johnson",
48
68
  size: "xl",
49
69
  image_url: "https://randomuser.me/api/portraits/men/44.jpg",
50
70
  margin_bottom: "sm"
51
- }) %>
71
+ }) %>
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx CHANGED
@@ -4,54 +4,73 @@ import { Avatar } from '../..'
4
4
  const AvatarCircleIconComponentOverlay = () => {
5
5
  return (
6
6
  <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>
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>
55
74
  )
56
75
  }
57
76
 
data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx CHANGED
@@ -57,6 +57,26 @@ 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
+ />
60
80
  </div>
61
81
  )
62
82
  }
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: Icon Circle Component Overlay
7
+ - avatar_circle_icon_component_overlay: Circle Icon 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: Icon Circle Component Overlay
14
+ - avatar_circle_icon_component_overlay: Circle Icon 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,23 +42,3 @@
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,47 +90,7 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
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>
93
+
134
94
  </div>
135
95
  )
136
96
  }
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 and Status: Subtle Variations.
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.
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/visual_guidelines/colors" 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/utilities" 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/visual_guidelines/colors" 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/utilities" 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', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
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', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
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: "us"
8
+ id: "United-states"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "ca"
15
+ id: "canada"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pk"
22
+ id: "pakistan"
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', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
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: "us"
8
+ id: "United-states"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "πŸ‡¨πŸ‡¦",
15
- id: "ca"
15
+ id: "canada"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "πŸ‡΅πŸ‡°",
22
- id: "pk"
22
+ id: "pakistan"
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', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>