playbook_ui 13.15.0 → 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2010

Sign up to get free protection for your applications and to get access to all the features.
Files changed (108) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +14 -12
  3. data/app/pb_kits/playbook/index.js +2 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +30 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +59 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +5 -0
  7. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +61 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +120 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +28 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +5 -0
  12. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableBody.tsx +95 -0
  13. data/app/pb_kits/playbook/pb_advanced_table/SubComponents/TableHeader.tsx +51 -0
  14. data/app/pb_kits/playbook/pb_advanced_table/Utilities/helper_functions.tsx +77 -0
  15. data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +8 -0
  16. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +97 -0
  17. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +237 -0
  18. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +56 -0
  19. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +52 -0
  20. data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +278 -0
  21. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +5 -0
  22. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +60 -0
  24. data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_pseudo_states.scss +12 -0
  25. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_colors_swift.md +27 -0
  26. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default_swift.md +22 -0
  27. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_props_table.md +8 -0
  28. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_sizes_swift.md +26 -0
  29. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -0
  30. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +4 -2
  31. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +5 -3
  32. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +40 -33
  33. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  34. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +44 -30
  35. data/app/pb_kits/playbook/pb_flex/_flex.tsx +5 -5
  36. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +3 -2
  37. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -4
  38. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  39. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -9
  40. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  41. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +3 -2
  42. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  43. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  44. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  45. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  46. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  47. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  48. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  49. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  50. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  51. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  52. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  53. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  55. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  56. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  57. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  58. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  60. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  61. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  62. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  63. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  64. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_bold_swift.md +17 -0
  65. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_default_swift.md +17 -0
  66. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_no_highlight_swift.md +18 -0
  67. data/app/pb_kits/playbook/pb_nav/docs/_nav_horizontal_subtle_swift.md +18 -0
  68. data/app/pb_kits/playbook/pb_nav/docs/_nav_props_swift.md +11 -0
  69. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_bold_swift.md +18 -0
  70. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_default_swift.md +18 -0
  71. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_no_highlight_swift.md +19 -0
  72. data/app/pb_kits/playbook/pb_nav/docs/_nav_vertical_subtle_swift.md +17 -0
  73. data/app/pb_kits/playbook/pb_nav/docs/example.yml +17 -0
  74. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +51 -50
  75. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +20 -19
  76. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +4 -3
  77. data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -4
  78. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  79. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  80. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +19 -17
  81. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  82. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +23 -21
  83. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +18 -10
  84. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +46 -23
  85. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  86. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  87. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +17 -15
  88. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +9 -7
  89. data/app/pb_kits/playbook/pb_select/_select.scss +13 -4
  90. data/app/pb_kits/playbook/pb_select/_select.tsx +7 -4
  91. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +24 -0
  92. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +38 -0
  93. data/app/pb_kits/playbook/pb_select/docs/example.yml +2 -0
  94. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  95. data/app/pb_kits/playbook/pb_select/select.rb +6 -1
  96. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +25 -24
  97. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +27 -26
  98. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +2 -1
  99. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  100. data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
  101. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
  102. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +4 -2
  103. data/app/pb_kits/playbook/playbook-doc.js +2 -0
  104. data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
  105. data/dist/menu.yml +4 -1
  106. data/dist/playbook-rails.js +14 -6
  107. data/lib/playbook/version.rb +2 -2
  108. metadata +43 -7
@@ -6,10 +6,11 @@ import {
6
6
  buildAriaProps,
7
7
  buildCss,
8
8
  buildDataProps,
9
- buildHtmlProps
9
+ buildHtmlProps
10
10
  } from '../utilities/props'
11
11
  import Icon from '../pb_icon/_icon'
12
12
  import Title from '../pb_title/_title'
13
+ import { GenericObject } from '../types'
13
14
 
14
15
  type SelectableIconProps = {
15
16
  aria?: {[key: string]: string},
@@ -17,7 +18,7 @@ type SelectableIconProps = {
17
18
  className?: string,
18
19
  customIcon?: {[key: string] :SVGElement},
19
20
  disabled?: boolean,
20
- data?: Object,
21
+ data?: GenericObject,
21
22
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
22
23
  icon: string,
23
24
  inputId: string,
@@ -44,7 +45,7 @@ const SelectableIcon = ({
44
45
  text,
45
46
  value,
46
47
  ...props
47
- }: SelectableIconProps) => {
48
+ }: SelectableIconProps): React.ReactElement => {
48
49
  const ariaProps = buildAriaProps(aria)
49
50
  const dataProps = buildDataProps(data)
50
51
  const htmlProps = buildHtmlProps(htmlOptions)
@@ -64,22 +65,22 @@ const SelectableIcon = ({
64
65
 
65
66
  return (
66
67
  <div
67
- {...ariaProps}
68
- {...dataProps}
69
- {...htmlProps}
70
- className={classes}
68
+ {...ariaProps}
69
+ {...dataProps}
70
+ {...htmlProps}
71
+ className={classes}
71
72
  >
72
73
  {inputs === 'disabled' && (
73
74
  <>
74
75
  <Icon
75
- customIcon={customIcon}
76
- icon={icon}
77
- size="2x"
76
+ customIcon={customIcon}
77
+ icon={icon}
78
+ size="2x"
78
79
  />
79
80
  <Title
80
- size={4}
81
- tag="h4"
82
- text={text}
81
+ size={4}
82
+ tag="h4"
83
+ text={text}
83
84
  />
84
85
  </>
85
86
  )}
@@ -87,24 +88,24 @@ const SelectableIcon = ({
87
88
  {inputs === 'enabled' && (
88
89
  <>
89
90
  <input
90
- {...props}
91
- checked={checked}
92
- disabled={disabled}
93
- id={inputIdPresent}
94
- name={name}
95
- type={inputType}
96
- value={value}
91
+ {...props}
92
+ checked={checked}
93
+ disabled={disabled}
94
+ id={inputIdPresent}
95
+ name={name}
96
+ type={inputType}
97
+ value={value}
97
98
  />
98
99
  <label htmlFor={inputIdPresent}>
99
100
  <Icon
100
- customIcon={customIcon}
101
- icon={icon}
102
- size="2x"
101
+ customIcon={customIcon}
102
+ icon={icon}
103
+ size="2x"
103
104
  />
104
105
  <Title
105
- size={4}
106
- tag="h4"
107
- text={text}
106
+ size={4}
107
+ tag="h4"
108
+ text={text}
108
109
  />
109
110
  </label>
110
111
  </>
@@ -7,12 +7,13 @@ import { SelectableListItemProps } from './_item.js'
7
7
 
8
8
  import List from '../pb_list/_list'
9
9
  import SelectableListItem from './_item'
10
+ import { GenericObject } from '../types'
10
11
 
11
12
  type SelectableListProps = {
12
13
  aria?: {[key: string]: string },
13
14
  children?: React.ReactElement[],
14
15
  className?: string,
15
- data?: object,
16
+ data?: GenericObject,
16
17
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
17
18
  id?: string,
18
19
  variant?: 'checkbox' | 'radio',
@@ -32,7 +32,7 @@ const Source = ({
32
32
  source,
33
33
  type = 'inbound',
34
34
  user = {},
35
- }: SourceProps) => {
35
+ }: SourceProps): React.ReactElement => {
36
36
  const dataProps = buildDataProps(data)
37
37
  const htmlProps = buildHtmlProps(htmlOptions)
38
38
  const ariaProps = buildAriaProps(aria)
@@ -72,11 +72,11 @@ const Source = ({
72
72
 
73
73
  return (
74
74
  <div
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={css}
79
- id={id}
75
+ {...ariaProps}
76
+ {...dataProps}
77
+ {...htmlProps}
78
+ className={css}
79
+ id={id}
80
80
  >
81
81
 
82
82
  <div className="pb__source_layout">
@@ -84,13 +84,13 @@ const Source = ({
84
84
  <>
85
85
  {showIcon() &&
86
86
  <IconCircle
87
- icon={typeIconNames[type]}
88
- size="sm"
87
+ icon={typeIconNames[type]}
88
+ size="sm"
89
89
  />
90
90
  }
91
91
  {!showIcon() &&
92
92
  <Avatar
93
- {...avatar()}
93
+ {...avatar()}
94
94
  />
95
95
  }
96
96
  </>
@@ -98,20 +98,20 @@ const Source = ({
98
98
 
99
99
  <div className="pb__source_content">
100
100
  <Title
101
- size={4}
102
- tag="h4"
103
- text={source}
101
+ size={4}
102
+ tag="h4"
103
+ text={source}
104
104
  />
105
105
 
106
106
  <div className="pb__source_value">
107
107
  <Body
108
- color="light"
109
- text={typeText()}
108
+ color="light"
109
+ text={typeText()}
110
110
  />
111
111
 
112
112
  {user.userId &&
113
113
  <Caption
114
- text={user.userId}
114
+ text={user.userId}
115
115
  />
116
116
  }
117
117
  </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 } from '../utilities/globalProps'
4
+ import { globalProps, 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
- }
24
+ } & GlobalProps
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: 2px;
151
+ margin-left: 10px;
152
152
  top: 50%;
153
153
  transform: translateY(-50%);
154
154
  box-sizing: border-box;
@@ -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
 
@@ -4,6 +4,7 @@ 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'
7
8
  import * as Avatar from 'pb_avatar/docs'
8
9
  import * as AvatarActionButton from 'pb_avatar_action_button/docs'
9
10
  import * as Background from 'pb_background/docs'
@@ -105,6 +106,7 @@ import * as Walkthrough from 'pb_walkthrough/docs'
105
106
  import * as WeekdayStacked from 'pb_weekday_stacked/docs'
106
107
 
107
108
  WebpackerReact.registerComponents({
109
+ ...AdvancedTable,
108
110
  ...Avatar,
109
111
  ...AvatarActionButton,
110
112
  ...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,6 +43,9 @@ 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:
46
49
  - name: "list"
47
50
  platforms: *web
48
51
  description: Lists display a vertical set of related content.
@@ -354,4 +357,4 @@ kits:
354
357
  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.
355
358
  - name: "user"
356
359
  platforms: *web
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.
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.