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

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
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
  %>