playbook_ui 13.16.0.pre.alpha.play1141iconkitusinglibrary1995 → 13.16.0.pre.alpha.play1141iconkitusinglibrary2037

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_icon/_icon.scss +48 -6
  3. data/app/pb_kits/playbook/pb_icon/_icon.tsx +89 -30
  4. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +10 -0
  5. data/app/pb_kits/playbook/pb_icon/icon.rb +22 -0
  6. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  7. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  8. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  9. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  10. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  11. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  13. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  14. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  15. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  17. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  18. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  19. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  20. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  21. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  22. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  24. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  25. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  26. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  27. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  28. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  29. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  30. data/dist/playbook-rails.js +14 -6
  31. data/lib/playbook/version.rb +1 -1
  32. metadata +2 -2
data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx CHANGED
@@ -37,18 +37,18 @@ const LoadingInline = (props: LoadingInlineProps) => {
37
37
 
38
38
  return (
39
39
  <div
40
- {...ariaProps}
41
- {...dataProps}
42
- {...htmlProps}
43
- className={classes}
44
- id={id}
40
+ {...ariaProps}
41
+ {...dataProps}
42
+ {...htmlProps}
43
+ className={classes}
44
+ id={id}
45
45
  >
46
46
  <Body color="light">
47
47
  <Icon
48
- aria={{ label: 'loading icon' }}
49
- fixedWidth
50
- icon="spinner"
51
- pulse
48
+ aria={{ label: 'loading icon' }}
49
+ fixedWidth
50
+ icon="spinner"
51
+ pulse
52
52
  />
53
53
  {' Loading'}
54
54
  </Body>
data/app/pb_kits/playbook/pb_map/_map.tsx CHANGED
@@ -14,9 +14,9 @@ type MapProps = {
14
14
  id?: string,
15
15
  zoomBtns?: boolean,
16
16
  flyTo?: boolean,
17
- zoomInClick?: () => {},
18
- zoomOutClick?: () => {},
19
- flyToClick?: () => {},
17
+ zoomInClick?: () => void,
18
+ zoomOutClick?: () => void,
19
+ flyToClick?: () => void,
20
20
  } & GlobalProps
21
21
 
22
22
  const Map = (props: MapProps) => {
@@ -51,11 +51,11 @@ const Map = (props: MapProps) => {
51
51
  {
52
52
  zoomBtns ? (
53
53
  <Map.Controls
54
- flyTo={flyTo}
55
- flyToClick={flyToClick}
56
- zoomBtns={zoomBtns}
57
- zoomInClick={zoomInClick}
58
- zoomOutClick={zoomOutClick}
54
+ flyTo={flyTo}
55
+ flyToClick={flyToClick}
56
+ zoomBtns={zoomBtns}
57
+ zoomInClick={zoomInClick}
58
+ zoomOutClick={zoomOutClick}
59
59
  />
60
60
  ) : null
61
61
  }
data/app/pb_kits/playbook/pb_map/_map_controls.tsx CHANGED
@@ -6,9 +6,9 @@ import Flex from "../pb_flex/_flex";
6
6
  type MapControlTypes = {
7
7
  zoomBtns?: boolean,
8
8
  flyTo?: boolean,
9
- zoomInClick?: () => {},
10
- zoomOutClick?: () => {},
11
- flyToClick?: () => {},
9
+ zoomInClick?: () => void,
10
+ zoomOutClick?: () => void,
11
+ flyToClick?: () => void,
12
12
  children?: React.ReactNode | React.ReactNode[]
13
13
  }
14
14
 
@@ -21,19 +21,27 @@ const MapControls = ({
21
21
  children,
22
22
  }: MapControlTypes) => {
23
23
  return (
24
- <Flex className="custom-nav-control" orientation="column">
24
+ <Flex className="custom-nav-control"
25
+ orientation="column"
26
+ >
25
27
  {zoomBtns ? (
26
28
  <>
27
29
  <div className="custom-nav-control-zoom">
28
- <Button className="map-zoom-in-button" onClick={zoomInClick}>
30
+ <Button className="map-zoom-in-button"
31
+ onClick={zoomInClick}
32
+ >
29
33
  <Icon icon="plus" />
30
34
  </Button>
31
- <Button className="map-zoom-out-button" onClick={zoomOutClick}>
35
+ <Button className="map-zoom-out-button"
36
+ onClick={zoomOutClick}
37
+ >
32
38
  <Icon icon="minus" />
33
39
  </Button>
34
40
  </div>
35
41
  {flyTo ? (
36
- <Button className="map-flyto-button" onClick={flyToClick}>
42
+ <Button className="map-flyto-button"
43
+ onClick={flyToClick}
44
+ >
37
45
  <Icon icon="eye" />
38
46
  </Button>
39
47
  ) : null}
data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx CHANGED
@@ -3,13 +3,15 @@ import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
 
5
5
  type MapCustomButtonTypes = {
6
- onClick?: () => {};
6
+ onClick?: () => void;
7
7
  icon?: string;
8
8
  };
9
9
 
10
10
  const MapCustomButton = ({ onClick, icon }: MapCustomButtonTypes) => {
11
11
  return (
12
- <Button className="pb_map-custom-button" onClick={onClick}>
12
+ <Button className="pb_map-custom-button"
13
+ onClick={onClick}
14
+ >
13
15
  <Icon icon={icon} />
14
16
  </Button>
15
17
  );
data/app/pb_kits/playbook/pb_message/_message.tsx CHANGED
@@ -20,7 +20,7 @@ type MessageProps = {
20
20
  avatarUrl?: string,
21
21
  children?: React.ReactChild[] | React.ReactChild,
22
22
  className?: string,
23
- data?: object,
23
+ data?: Record<string, unknown>,
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
25
25
  id?: string,
26
26
  label?: string,
data/app/pb_kits/playbook/pb_message/_message_mention.tsx CHANGED
@@ -7,7 +7,7 @@ type MessageMentionProps = {
7
7
  aria: { [key: string]: string },
8
8
  children?: React.ReactChild[] | React.ReactChild,
9
9
  className?: string,
10
- data?: object,
10
+ data?: Record<string, unknown>,
11
11
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
12
12
  id?: string,
13
13
  variant: 'user' | 'self',
@@ -34,11 +34,11 @@ const MessageMention = (props: MessageMentionProps) => {
34
34
 
35
35
  return (
36
36
  <div
37
- {...ariaProps}
38
- {...dataProps}
39
- {...htmlProps}
40
- className={classes}
41
- id={id}
37
+ {...ariaProps}
38
+ {...dataProps}
39
+ {...htmlProps}
40
+ className={classes}
41
+ id={id}
42
42
  >
43
43
  {children}
44
44
  </div>
data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx CHANGED
@@ -86,6 +86,50 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
86
86
  item: []
87
87
  })
88
88
 
89
+ const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
90
+ if (!Array.isArray(tree)) {
91
+ return
92
+ }
93
+ return tree.map((item: { [key: string]: any }) => {
94
+ item.checked = check
95
+ item.children = modifyRecursive(item.children, check)
96
+ return item
97
+ })
98
+ }
99
+
100
+ // Function to map over data and add parent_id + depth property to each item
101
+ const addCheckedAndParentProperty = (
102
+ treeData: { [key: string]: any }[],
103
+ selectedIds: string[],
104
+ parent_id: string = null,
105
+ depth = 0,
106
+ ) => {
107
+ if (!Array.isArray(treeData)) {
108
+ return
109
+ }
110
+ return treeData.map((item: { [key: string]: any } | any) => {
111
+ const newItem = {
112
+ ...item,
113
+ checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
114
+ parent_id,
115
+ depth,
116
+ }
117
+ if (newItem.children && newItem.children.length > 0) {
118
+ const children =
119
+ item.checked && !returnAllSelected
120
+ ? modifyRecursive(item.children, true)
121
+ : item.children
122
+ newItem.children = addCheckedAndParentProperty(
123
+ children,
124
+ selectedIds,
125
+ newItem.id,
126
+ depth + 1
127
+ )
128
+ }
129
+ return newItem
130
+ })
131
+ }
132
+
89
133
  useEffect(() => {
90
134
  const formattedData = addCheckedAndParentProperty(
91
135
  treeData,
@@ -139,16 +183,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
139
183
  }
140
184
  }, [])
141
185
 
142
- const modifyRecursive = (tree: { [key: string]: any }[], check: boolean) => {
143
- if (!Array.isArray(tree)) {
144
- return
145
- }
146
- return tree.map((item: { [key: string]: any }) => {
147
- item.checked = check
148
- item.children = modifyRecursive(item.children, check)
149
- return item
150
- })
151
- }
186
+
152
187
 
153
188
  // Iterate over tree, find item and set checked or unchecked
154
189
  const modifyValue = (
@@ -206,38 +241,7 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
206
241
  return tree
207
242
  }
208
243
 
209
- // Function to map over data and add parent_id + depth property to each item
210
- const addCheckedAndParentProperty = (
211
- treeData: { [key: string]: any }[],
212
- selectedIds: string[],
213
- parent_id: string = null,
214
- depth = 0,
215
- ) => {
216
- if (!Array.isArray(treeData)) {
217
- return
218
- }
219
- return treeData.map((item: { [key: string]: any } | any) => {
220
- const newItem = {
221
- ...item,
222
- checked: Boolean(selectedIds && selectedIds.length && selectedIds.includes(item.id)),
223
- parent_id,
224
- depth,
225
- }
226
- if (newItem.children && newItem.children.length > 0) {
227
- const children =
228
- item.checked && !returnAllSelected
229
- ? modifyRecursive(item.children, true)
230
- : item.children
231
- newItem.children = addCheckedAndParentProperty(
232
- children,
233
- selectedIds,
234
- newItem.id,
235
- depth + 1
236
- )
237
- }
238
- return newItem
239
- })
240
- }
244
+
241
245
 
242
246
  // Click event for x on form pill
243
247
  const handlePillClose = (event: any, clickedItem: { [key: string]: any }) => {
data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx CHANGED
@@ -44,11 +44,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
44
44
  return users.slice(0, 1).map((userObject, index) => {
45
45
  return (
46
46
  <Avatar
47
- {...userObject}
48
- className="pb_multiple_users_stacked_item"
49
- dark={dark}
50
- key={index}
51
- size="xs"
47
+ {...userObject}
48
+ className="pb_multiple_users_stacked_item"
49
+ dark={dark}
50
+ key={index}
51
+ size="xs"
52
52
  />
53
53
  )
54
54
  })
@@ -59,11 +59,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
59
59
  return users.slice(1, 2).map((userObject, index) => {
60
60
  return (
61
61
  <Avatar
62
- {...userObject}
63
- className="pb_multiple_users_stacked_item second_item"
64
- dark={dark}
65
- key={index}
66
- size="xs"
62
+ {...userObject}
63
+ className="pb_multiple_users_stacked_item second_item"
64
+ dark={dark}
65
+ key={index}
66
+ size="xs"
67
67
  />
68
68
  )
69
69
  })
@@ -74,11 +74,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
74
74
  if (moreThanTwo === true) {
75
75
  return (
76
76
  <Badge
77
- className="pb_multiple_users_stacked_item second_item"
78
- dark={dark}
79
- rounded
80
- text={`+${users.length - displayCount()}`}
81
- variant="primary"
77
+ className="pb_multiple_users_stacked_item second_item"
78
+ dark={dark}
79
+ rounded
80
+ text={`+${users.length - displayCount()}`}
81
+ variant="primary"
82
82
  />
83
83
  )
84
84
  }
@@ -86,11 +86,11 @@ const MultipleUsersStacked = (props: MultipleUsersStackedProps) => {
86
86
 
87
87
  return (
88
88
  <div
89
- {...ariaProps}
90
- {...dataProps}
91
- {...htmlProps}
92
- className={classes}
93
- id={id}
89
+ {...ariaProps}
90
+ {...dataProps}
91
+ {...htmlProps}
92
+ className={classes}
93
+ id={id}
94
94
  >
95
95
  {firstUser()}
96
96
  {secondUser()}
data/app/pb_kits/playbook/pb_nav/_item.tsx CHANGED
@@ -18,7 +18,7 @@ type NavItemProps = {
18
18
  children?: React.ReactNode[] | React.ReactNode;
19
19
  className?: string;
20
20
  collapsible?: boolean;
21
- data?: object;
21
+ data?: Record<string, unknown>;
22
22
  dark?: boolean;
23
23
  fontSize?: "normal" | "small";
24
24
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
@@ -76,7 +76,7 @@ const NavItem = (props: NavItemProps) => {
76
76
  id,
77
77
  imageUrl,
78
78
  link,
79
- onClick = () => {},
79
+ onClick,
80
80
  target = "_self",
81
81
  text = "",
82
82
  collapsibleTrail,
@@ -205,46 +205,49 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
205
205
  {collapsible ? (
206
206
  <>
207
207
  <Collapsible
208
- className={collapsibleClasses}
209
- icon={iconRight && iconRight}
210
- iconSize="xs"
211
- id={id}
212
- collapsed={collapsed}
213
- onIconClick={onIconRightClick}
214
- onClick={onClick}
208
+ className={collapsibleClasses}
209
+ collapsed={collapsed}
210
+ icon={iconRight && iconRight}
211
+ iconSize="xs"
212
+ id={id}
213
+ onClick={onClick}
214
+ onIconClick={onIconRightClick}
215
215
  >
216
216
  <Collapsible.Main
217
- className={globalProps({ ...finalItemSpacing })}
218
- dark={dark}>
217
+ className={globalProps({ ...finalItemSpacing })}
218
+ dark={dark}
219
+ >
219
220
  <Tag
220
- {...ariaProps}
221
- {...dataProps}
222
- {...htmlProps}
223
- className={classes}
224
- id={id}
225
- href={link}
226
- target={target}
221
+ {...ariaProps}
222
+ {...dataProps}
223
+ {...htmlProps}
224
+ className={classes}
225
+ href={link}
226
+ id={id}
227
+ target={target}
227
228
  >
228
229
  {imageUrl && (
229
230
  <div
230
- className="pb_nav_list_item_icon_section_collapsible"
231
- key={imageUrl}
232
- onClick={(e) => handleIconClick(e)}
231
+ className="pb_nav_list_item_icon_section_collapsible"
232
+ key={imageUrl}
233
+ onClick={(e) => handleIconClick(e)}
233
234
  >
234
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
235
+ <Image className="pb_nav_img_wrapper"
236
+ url={imageUrl}
237
+ />
235
238
  </div>
236
239
  )}
237
240
 
238
241
  {iconLeft && (
239
242
  <div
240
- className="pb_nav_list_item_icon_section_collapsible"
241
- key={iconLeft}
242
- onClick={(e) => handleIconClick(e)}
243
+ className="pb_nav_list_item_icon_section_collapsible"
244
+ key={iconLeft}
245
+ onClick={(e) => handleIconClick(e)}
243
246
  >
244
247
  <Icon
245
- className="pb_nav_list_item_icon_left_collapsible"
246
- fixedWidth
247
- icon={iconLeft}
248
+ className="pb_nav_list_item_icon_left_collapsible"
249
+ fixedWidth
250
+ icon={iconLeft}
248
251
  />
249
252
  </div>
250
253
  )}
@@ -258,27 +261,33 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
258
261
  </>
259
262
  ) : (
260
263
  <Tag
261
- {...ariaProps}
262
- {...dataProps}
263
- {...htmlProps}
264
- className={classes}
265
- id={id}
266
- href={link}
267
- onClick={onClick}
268
- target={target}
264
+ {...ariaProps}
265
+ {...dataProps}
266
+ {...htmlProps}
267
+ className={classes}
268
+ href={link}
269
+ id={id}
270
+ onClick={onClick}
271
+ target={target}
269
272
  >
270
273
  {imageUrl && (
271
- <div className="pb_nav_list_item_icon_section" key={imageUrl}>
272
- <Image className="pb_nav_img_wrapper" url={imageUrl} />
274
+ <div className="pb_nav_list_item_icon_section"
275
+ key={imageUrl}
276
+ >
277
+ <Image className="pb_nav_img_wrapper"
278
+ url={imageUrl}
279
+ />
273
280
  </div>
274
281
  )}
275
282
 
276
283
  {iconLeft && (
277
- <div className="pb_nav_list_item_icon_section" key={iconLeft}>
284
+ <div className="pb_nav_list_item_icon_section"
285
+ key={iconLeft}
286
+ >
278
287
  <Icon
279
- className="pb_nav_list_item_icon_left"
280
- fixedWidth
281
- icon={iconLeft}
288
+ className="pb_nav_list_item_icon_left"
289
+ fixedWidth
290
+ icon={iconLeft}
282
291
  />
283
292
  </div>
284
293
  )}
@@ -287,13 +296,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
287
296
 
288
297
  {iconRight && (
289
298
  <div
290
- className="pb_nav_list_item_icon_section"
291
- key={iconRight as string}
299
+ className="pb_nav_list_item_icon_section"
300
+ key={iconRight as string}
292
301
  >
293
302
  <Icon
294
- className="pb_nav_list_item_icon_right"
295
- fixedWidth
296
- icon={iconRight as string}
303
+ className="pb_nav_list_item_icon_right"
304
+ fixedWidth
305
+ icon={iconRight as string}
297
306
  />
298
307
  </div>
299
308
  )}
data/app/pb_kits/playbook/pb_nav/_nav.tsx CHANGED
@@ -12,12 +12,12 @@ type NavProps = {
12
12
  borderless?: boolean,
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string | string[],
15
- data?: object,
15
+ data?: Record<string, unknown>,
16
16
  dark?: boolean,
17
17
  highlight?: boolean,
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string,
20
- onClick?: React.MouseEventHandler<HTMLElement>,
20
+ onClick?: () => void,
21
21
  orientation?: "vertical" | "horizontal",
22
22
  link?: string,
23
23
  title?: string,
@@ -25,7 +25,7 @@ type NavProps = {
25
25
  itemSpacing?: SpacingObject
26
26
  } & GlobalProps
27
27
 
28
- const Nav = (props: NavProps) => {
28
+ const Nav = (props: NavProps): React.ReactElement => {
29
29
  const {
30
30
  aria = {},
31
31
  borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps) => {
37
37
  htmlOptions = {},
38
38
  id,
39
39
  link = '#',
40
- onClick = () => { },
40
+ onClick,
41
41
  orientation = 'vertical',
42
42
  title = '',
43
43
  variant = 'normal',
@@ -71,23 +71,23 @@ const childrenWithProps = React.Children.map(children, (child) => {
71
71
 
72
72
  return (
73
73
  <nav
74
- {...ariaProps}
75
- {...dataProps}
76
- {...htmlProps}
77
- className={cardCss}
78
- id={id}
74
+ {...ariaProps}
75
+ {...dataProps}
76
+ {...htmlProps}
77
+ className={cardCss}
78
+ id={id}
79
79
  >
80
80
  {title &&
81
81
  <div className="pb_nav_list_title">
82
82
  <a
83
- className="pb_nav_list_item_link_text"
84
- href={link}
85
- onClick={onClick}
83
+ className="pb_nav_list_item_link_text"
84
+ href={link}
85
+ onClick={onClick}
86
86
  >
87
87
  <Caption
88
- dark={dark}
89
- size="md"
90
- text={`${title}`}
88
+ dark={dark}
89
+ size="md"
90
+ text={`${title}`}
91
91
  />
92
92
  </a>
93
93
  </div>
data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss CHANGED
@@ -148,7 +148,7 @@
148
148
  .placeholder {
149
149
  position: absolute;
150
150
  margin-right: 2px;
151
- margin-left: 2px;
151
+ margin-left: 10px;
152
152
  top: 50%;
153
153
  transform: translateY(-50%);
154
154
  box-sizing: border-box;
data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx CHANGED
@@ -73,8 +73,10 @@ const TypeaheadWithHighlight = (props) => {
73
73
  Option: (highlightProps: OptionProps) => (
74
74
  <components.Option {...highlightProps}/>
75
75
  ),
76
- SingleValue: ({ data }: any) => (
77
- <span>{data.name}</span>
76
+ SingleValue: ({ ...props }) => (
77
+ <components.SingleValue {...props}>
78
+ <span>{props.data.name}</span>
79
+ </components.SingleValue>
78
80
  )
79
81
  }
80
82