playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2023 → 13.16.0.pre.alpha.PLAY11641991

Sign up to get free protection for your applications and to get access to all the features.
Files changed (67) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +12 -14
  3. data/app/pb_kits/playbook/index.js +1 -2
  4. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
  5. data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
  6. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
  7. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
  8. data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
  9. data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
  10. data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
  11. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  12. data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
  13. data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
  14. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  15. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  18. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
  19. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  20. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  21. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  22. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  23. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  24. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  25. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
  26. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
  27. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  28. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  29. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
  30. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  31. data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
  32. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  33. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  34. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
  36. data/app/pb_kits/playbook/playbook-doc.js +0 -2
  37. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  38. data/dist/menu.yml +1 -4
  39. data/dist/playbook-rails.js +6 -14
  40. data/lib/playbook/version.rb +1 -1
  41. metadata +2 -28
  42. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
  43. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -59
  44. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
  45. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
  46. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
  47. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
  48. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
  49. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
  50. data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -133
  51. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
  52. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
  53. data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
  54. data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
  55. data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
  56. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
  57. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
  58. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
  59. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
  60. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
  61. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
  62. data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
  63. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
  64. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -5
  65. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -1
  66. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
  67. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +0 -12
@@ -12,12 +12,12 @@ type NavProps = {
12
12
  borderless?: boolean,
13
13
  children?: React.ReactNode[] | React.ReactNode,
14
14
  className?: string | string[],
15
- data?: Record<string, unknown>,
15
+ data?: object,
16
16
  dark?: boolean,
17
17
  highlight?: boolean,
18
18
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
19
19
  id?: string,
20
- onClick?: () => void,
20
+ onClick?: React.MouseEventHandler<HTMLElement>,
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): React.ReactElement => {
28
+ const Nav = (props: NavProps) => {
29
29
  const {
30
30
  aria = {},
31
31
  borderless = false,
@@ -37,7 +37,7 @@ const Nav = (props: NavProps): React.ReactElement => {
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>
@@ -1,7 +1,7 @@
1
1
  import React, { useEffect } from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildAriaProps, buildDataProps, buildHtmlProps } from '../utilities/props'
4
- import { globalProps, GlobalProps } from '../utilities/globalProps'
4
+ import { globalProps } from '../utilities/globalProps'
5
5
  import PbTable from '.'
6
6
 
7
7
  type TableProps = {
@@ -9,19 +9,19 @@ type TableProps = {
9
9
  children: React.ReactNode[] | React.ReactNode,
10
10
  className: string,
11
11
  collapse?: "sm" | "md" | "lg",
12
- container?: boolean,
12
+ container: boolean,
13
13
  dark?: boolean,
14
14
  data?: { [key: string]: string },
15
15
  dataTable: boolean,
16
- disableHover?: boolean,
16
+ disableHover: boolean,
17
17
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
18
  id?: string,
19
- responsive?: "collapse" | "scroll" | "none",
20
- singleLine?: boolean,
21
- size?: "sm" | "md" | "lg",
19
+ responsive: "collapse" | "scroll" | "none",
20
+ singleLine: boolean,
21
+ size: "sm" | "md" | "lg",
22
22
  sticky?: boolean,
23
23
  verticalBorder?: boolean,
24
- } & GlobalProps
24
+ }
25
25
 
26
26
  const Table = (props: TableProps) => {
27
27
  const {
@@ -56,29 +56,29 @@ const Table = (props: TableProps) => {
56
56
 
57
57
  return (
58
58
  <table
59
- {...ariaProps}
60
- {...dataProps}
61
- {...htmlProps}
62
- className={classnames(
63
- 'pb_table',
64
- `table-${size}`,
65
- `table-responsive-${responsive}`,
66
- {
67
- 'table-card': container,
68
- 'table-dark': dark,
69
- 'data_table': dataTable,
70
- 'single-line': singleLine,
71
- 'no-hover': disableHover,
72
- 'sticky-header': sticky,
73
- },
74
- globalProps(props),
75
- tableCollapseCss,
76
- verticalBorderCss,
77
- className
78
- )}
79
- id={id}
59
+ {...ariaProps}
60
+ {...dataProps}
61
+ {...htmlProps}
62
+ className={classnames(
63
+ 'pb_table',
64
+ `table-${size}`,
65
+ `table-responsive-${responsive}`,
66
+ {
67
+ 'table-card': container,
68
+ 'table-dark': dark,
69
+ 'data_table': dataTable,
70
+ 'single-line': singleLine,
71
+ 'no-hover': disableHover,
72
+ 'sticky-header': sticky,
73
+ },
74
+ globalProps(props),
75
+ tableCollapseCss,
76
+ verticalBorderCss,
77
+ className
78
+ )}
79
+ id={id}
80
80
  >
81
- {children}
81
+ {children}
82
82
  </table>
83
83
  )
84
84
  }
@@ -148,7 +148,7 @@
148
148
  .placeholder {
149
149
  position: absolute;
150
150
  margin-right: 2px;
151
- margin-left: 10px;
151
+ margin-left: 2px;
152
152
  top: 50%;
153
153
  transform: translateY(-50%);
154
154
  box-sizing: border-box;
@@ -73,10 +73,8 @@ const TypeaheadWithHighlight = (props) => {
73
73
  Option: (highlightProps: OptionProps) => (
74
74
  <components.Option {...highlightProps}/>
75
75
  ),
76
- SingleValue: ({ ...props }) => (
77
- <components.SingleValue {...props}>
78
- <span>{props.data.name}</span>
79
- </components.SingleValue>
76
+ SingleValue: ({ data }: any) => (
77
+ <span>{data.name}</span>
80
78
  )
81
79
  }
82
80
 
@@ -4,7 +4,6 @@ import WebpackerReact from 'webpacker-react'
4
4
 
5
5
  // KIT EXAMPLES
6
6
  import 'pb_form/pb_form_validation'
7
- import * as AdvancedTable from 'pb_advanced_table/docs'
8
7
  import * as Avatar from 'pb_avatar/docs'
9
8
  import * as AvatarActionButton from 'pb_avatar_action_button/docs'
10
9
  import * as Background from 'pb_background/docs'
@@ -106,7 +105,6 @@ import * as Walkthrough from 'pb_walkthrough/docs'
106
105
  import * as WeekdayStacked from 'pb_weekday_stacked/docs'
107
106
 
108
107
  WebpackerReact.registerComponents({
109
- ...AdvancedTable,
110
108
  ...Avatar,
111
109
  ...AvatarActionButton,
112
110
  ...Background,
@@ -17,7 +17,7 @@ type AlignContent = {
17
17
  }
18
18
 
19
19
  type AlignItems = {
20
- alignItems?: Alignment | ("flexStart" | "flexEnd" | "stretch" | "baseline")
20
+ alignItems?: Alignment & ("flexStart" | "flexEnd" | "stretch" | "baseline")
21
21
  }
22
22
 
23
23
  type AlignSelf = {
data/dist/menu.yml CHANGED
@@ -43,9 +43,6 @@ kits:
43
43
  - name: "table"
44
44
  platforms: *web
45
45
  description: Tables display a collection of structured data and typically have the ability to sort, filter, and paginate data.
46
- - name: "advanced_table"
47
- platforms: *react_only
48
- description: The Advanced Table can be used to display complex, nested data in a way that allows for expansion and/or sorting.
49
46
  - name: "list"
50
47
  platforms: *web
51
48
  description: Lists display a vertical set of related content.
@@ -357,4 +354,4 @@ kits:
357
354
  description: Multiple users stacked is used in tight spaces, where we need to indicate that multiple users are associated to a specific action or item.
358
355
  - name: "user"
359
356
  platforms: *web
360
- description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.
357
+ description: This kit was created for having a systematic way of displaying users with avatar, titles, name and territory. This is a versatile kit with features than can be added to display more info.