playbook_ui 13.16.0.pre.alpha.PBNTR177NewAdvancedTableKit2035 → 13.16.0.pre.alpha.PLAY11641991
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/_playbook.scss +12 -14
- data/app/pb_kits/playbook/index.js +1 -2
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +28 -16
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +5 -11
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx +44 -18
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +7 -12
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +6 -4
- data/app/pb_kits/playbook/pb_icon/icon.rb +10 -10
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +1 -2
- data/app/pb_kits/playbook/pb_layout/layout.test.js +4 -8
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +22 -30
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
- data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -15
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +2 -4
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +42 -46
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
- data/app/pb_kits/playbook/pb_nav/_item.tsx +47 -56
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
- data/app/pb_kits/playbook/pb_table/_table.tsx +29 -29
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +1 -1
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_highlight.jsx +2 -4
- data/app/pb_kits/playbook/playbook-doc.js +0 -2
- data/app/pb_kits/playbook/utilities/globalProps.ts +1 -1
- data/dist/menu.yml +1 -4
- data/dist/playbook-rails.js +6 -14
- data/lib/playbook/version.rb +1 -1
- metadata +2 -29
- data/app/pb_kits/playbook/pb_advanced_table/Components/CollapsibleTrail.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/CustomCell.tsx +0 -62
- data/app/pb_kits/playbook/pb_advanced_table/Components/LoadingCell.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +0 -30
- data/app/pb_kits/playbook/pb_advanced_table/Components/SubRowHeaderRow.tsx +0 -61
- data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +0 -128
- data/app/pb_kits/playbook/pb_advanced_table/Components/ToggleIconButton.tsx +0 -28
- data/app/pb_kits/playbook/pb_advanced_table/Context/AdvancedTableContext.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/README.md +0 -133
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +0 -95
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +0 -51
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/BrowserCheck.tsx +0 -5
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/ExpansionControlHelpers.tsx +0 -63
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/IconHelpers.tsx +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/Utilities/types.ts +0 -8
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +0 -98
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +0 -245
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +0 -56
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.jsx +0 -49
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_default.md +0 -13
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.jsx +0 -57
- data/app/pb_kits/playbook/pb_advanced_table/docs/_description.md +0 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_mock_data.js +0 -278
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -6
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_advanced_table/scss_partials/_loading.scss +0 -71
- 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?:
|
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?:
|
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)
|
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
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
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
|
-
|
84
|
-
|
85
|
-
|
83
|
+
className="pb_nav_list_item_link_text"
|
84
|
+
href={link}
|
85
|
+
onClick={onClick}
|
86
86
|
>
|
87
87
|
<Caption
|
88
|
-
|
89
|
-
|
90
|
-
|
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
|
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
|
12
|
+
container: boolean,
|
13
13
|
dark?: boolean,
|
14
14
|
data?: { [key: string]: string },
|
15
15
|
dataTable: boolean,
|
16
|
-
disableHover
|
16
|
+
disableHover: boolean,
|
17
17
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
18
18
|
id?: string,
|
19
|
-
responsive
|
20
|
-
singleLine
|
21
|
-
size
|
19
|
+
responsive: "collapse" | "scroll" | "none",
|
20
|
+
singleLine: boolean,
|
21
|
+
size: "sm" | "md" | "lg",
|
22
22
|
sticky?: boolean,
|
23
23
|
verticalBorder?: boolean,
|
24
|
-
}
|
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
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
66
|
-
|
67
|
-
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
72
|
-
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
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
|
-
|
81
|
+
{children}
|
82
82
|
</table>
|
83
83
|
)
|
84
84
|
}
|
@@ -73,10 +73,8 @@ const TypeaheadWithHighlight = (props) => {
|
|
73
73
|
Option: (highlightProps: OptionProps) => (
|
74
74
|
<components.Option {...highlightProps}/>
|
75
75
|
),
|
76
|
-
SingleValue: ({
|
77
|
-
<
|
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,
|
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.
|