playbook_ui 14.0.0 → 14.1.0.pre.alpha.PA1477timestampkit3536
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/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +24 -20
- data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +86 -1
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
- data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +67 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -30
- data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +19 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +44 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +17 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +3 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -1
- data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +2 -0
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -1
- data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +0 -11
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +1 -0
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -2
- data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +5 -4
- data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +1 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.scss +52 -5
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +6 -1
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb +1 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx +14 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx +25 -0
- data/app/pb_kits/playbook/pb_online_status/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_online_status/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_online_status/online_status.rb +11 -1
- data/app/pb_kits/playbook/pb_online_status/online_status.test.js +31 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb +61 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +70 -0
- data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md +1 -0
- data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +83 -6
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +73 -4
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -2
- data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +5 -1
- data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +50 -21
- data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
- data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
- data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +37 -2
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -0
- data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
- data/app/pb_kits/playbook/utilities/_positioning.scss +26 -15
- data/dist/chunks/_typeahead-D-4y9pbv.js +22 -0
- data/dist/chunks/_weekday_stacked-Cax4nrUa.js +45 -0
- data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
- data/dist/chunks/{lib-Bf_E03gc.js → lib-BE0Z3F7x.js} +1 -1
- data/dist/chunks/{pb_form_validation-D0dhqeN2.js → pb_form_validation-TzZQ0Flx.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +20 -11
- data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +0 -32
- data/dist/chunks/_typeahead-COUJ88EA.js +0 -22
- data/dist/chunks/_weekday_stacked-BAkwel5p.js +0 -45
- data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 9e9a8573217ee764fa83fe813c05c7aaeedf7c9fdb98d4b702a358eceedf1330
|
4
|
+
data.tar.gz: bb76d9f0e12c6c3be671b40a953be9755b42d65fc2764e10d6541ba5e4d4863d
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 03c473ef11036a31e0bde23b85f3aa7f7e103e58698f776c1e40a1b45426ff0f1e54e76f7ff6af82d33a5c5d3914bd25f79588a708568c1b554ce20c00cfbbdb
|
7
|
+
data.tar.gz: 9e938be1a3fc22b60a1d3ada831f0f427f5a948c742758cfb8f4c5be97174d03b173f4c0d0694b7e01e15f4b93a2379c7d0f25a1bad46dd9f39548c1622ba112
|
@@ -21,6 +21,7 @@ type TableHeaderCellProps = {
|
|
21
21
|
handleExpandOrCollapse?: () => void
|
22
22
|
header?: Header<GenericObject, unknown>
|
23
23
|
headerChildren?: React.ReactNode | React.ReactNode[]
|
24
|
+
isPinnedLeft?: boolean
|
24
25
|
loading?: boolean
|
25
26
|
sortIcon?: string | string[]
|
26
27
|
} & GlobalProps
|
@@ -31,10 +32,11 @@ export const TableHeaderCell = ({
|
|
31
32
|
handleExpandOrCollapse,
|
32
33
|
header,
|
33
34
|
headerChildren,
|
35
|
+
isPinnedLeft = false,
|
34
36
|
loading,
|
35
37
|
sortIcon,
|
36
38
|
}: TableHeaderCellProps) => {
|
37
|
-
const { sortControl } = useContext(AdvancedTableContext)
|
39
|
+
const { sortControl, responsive } = useContext(AdvancedTableContext)
|
38
40
|
|
39
41
|
const toggleSortButton = (event: React.SyntheticEvent) => {
|
40
42
|
if (sortControl) {
|
@@ -49,7 +51,8 @@ export const TableHeaderCell = ({
|
|
49
51
|
|
50
52
|
const cellClassName = classnames("table-header-cells",
|
51
53
|
`${isChrome() ? "chrome-styles" : ""}`,
|
52
|
-
`${enableSorting ? "table-header-cells-active" : ""}
|
54
|
+
`${enableSorting ? "table-header-cells-active" : ""}`,
|
55
|
+
{ 'pinned-left': responsive === "scroll" && isPinnedLeft },
|
53
56
|
)
|
54
57
|
|
55
58
|
const cellId = `${loading ?
|
@@ -37,17 +37,22 @@ export const TableBody = ({
|
|
37
37
|
columnDefinitions,
|
38
38
|
enableToggleExpansion,
|
39
39
|
handleExpandOrCollapse,
|
40
|
+
isPinnedLeft = false,
|
40
41
|
inlineRowLoading,
|
41
42
|
loading,
|
43
|
+
responsive,
|
42
44
|
table,
|
43
45
|
} = useContext(AdvancedTableContext)
|
44
46
|
|
45
47
|
const classes = classnames(
|
46
48
|
buildCss("pb_advanced_table_body"),
|
49
|
+
{ 'pinned-left': responsive === "scroll" && isPinnedLeft },
|
47
50
|
globalProps(props),
|
48
51
|
className
|
49
52
|
)
|
50
53
|
|
54
|
+
const columnPinning = table.getState().columnPinning;
|
55
|
+
|
51
56
|
return (
|
52
57
|
<>
|
53
58
|
<tbody className={classes}
|
@@ -73,38 +78,37 @@ export const TableBody = ({
|
|
73
78
|
table={table}
|
74
79
|
/>
|
75
80
|
)}
|
81
|
+
<tr
|
82
|
+
className={`${rowBackground ? "bg-silver" : "bg-white"} ${
|
83
|
+
row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
|
84
|
+
}`}
|
85
|
+
id={`${row.index}-${row.id}-${row.depth}-row`}
|
86
|
+
>
|
87
|
+
{row.getVisibleCells().map((cell, i) => {
|
88
|
+
const isPinnedLeft = columnPinning.left.includes(cell.column.id)
|
76
89
|
|
77
|
-
|
78
|
-
className={`${rowBackground ? "bg-silver" : "bg-white"} ${
|
79
|
-
row.depth > 0 ? `depth-sub-row-${row.depth}` : ""
|
80
|
-
}`}
|
81
|
-
id={`${row.index}-${row.id}-${row.depth}-row`}
|
82
|
-
>
|
83
|
-
{row.getVisibleCells().map((cell, i) => (
|
90
|
+
return (
|
84
91
|
<td
|
85
92
|
align="right"
|
86
|
-
className={
|
87
|
-
|
88
|
-
|
93
|
+
className={classnames(
|
94
|
+
`${cell.id}-cell position_relative`,
|
95
|
+
isChrome() ? "chrome-styles" : "",
|
96
|
+
isPinnedLeft && 'pinned-left'
|
97
|
+
)}
|
89
98
|
key={`${cell.id}-data`}
|
90
99
|
>
|
91
|
-
{collapsibleTrail &&
|
92
|
-
i === 0 &&
|
93
|
-
row.depth > 0 &&
|
94
|
-
renderCollapsibleTrail(row.depth)}
|
100
|
+
{collapsibleTrail && i === 0 && row.depth > 0 && renderCollapsibleTrail(row.depth)}
|
95
101
|
<span id={`${cell.id}-span`}>
|
96
102
|
{loading ? (
|
97
103
|
<LoadingCell />
|
98
104
|
) : (
|
99
|
-
flexRender(
|
100
|
-
cell.column.columnDef.cell,
|
101
|
-
cell.getContext()
|
102
|
-
)
|
105
|
+
flexRender(cell.column.columnDef.cell, cell.getContext())
|
103
106
|
)}
|
104
107
|
</span>
|
105
108
|
</td>
|
106
|
-
)
|
107
|
-
|
109
|
+
)
|
110
|
+
})}
|
111
|
+
</tr>
|
108
112
|
|
109
113
|
{/* Display LoadingInline if Row Data is querying and there are no children already */}
|
110
114
|
{isDataLoading ? (
|
@@ -42,6 +42,7 @@ export const TableHeader = ({
|
|
42
42
|
className
|
43
43
|
)
|
44
44
|
|
45
|
+
const columnPinning = table.getState().columnPinning;
|
45
46
|
|
46
47
|
return (
|
47
48
|
<>
|
@@ -51,18 +52,22 @@ export const TableHeader = ({
|
|
51
52
|
{/* Get the header groups (only one in this example) */}
|
52
53
|
{table.getHeaderGroups().map((headerGroup: HeaderGroup<GenericObject>) => (
|
53
54
|
<tr key={`${headerGroup.id}-headerGroup`}>
|
54
|
-
{headerGroup.headers.map(header =>
|
55
|
-
|
56
|
-
|
57
|
-
|
58
|
-
|
59
|
-
|
60
|
-
|
61
|
-
|
62
|
-
|
63
|
-
|
64
|
-
|
65
|
-
|
55
|
+
{headerGroup.headers.map(header => {
|
56
|
+
const isPinnedLeft = columnPinning.left.includes(header.id)
|
57
|
+
return (
|
58
|
+
<TableHeaderCell
|
59
|
+
enableSorting={enableSorting}
|
60
|
+
enableToggleExpansion={enableToggleExpansion}
|
61
|
+
handleExpandOrCollapse={handleExpandOrCollapse}
|
62
|
+
header={header}
|
63
|
+
headerChildren={children}
|
64
|
+
isPinnedLeft={isPinnedLeft}
|
65
|
+
key={`${header.id}-header`}
|
66
|
+
loading={loading}
|
67
|
+
sortIcon={sortIcon}
|
68
|
+
/>
|
69
|
+
)
|
70
|
+
})}
|
66
71
|
</tr>
|
67
72
|
))}
|
68
73
|
</thead>
|
@@ -5,9 +5,11 @@
|
|
5
5
|
@import "./scss_partials/loading";
|
6
6
|
@import "./scss_partials/pseudo_states";
|
7
7
|
@import "./scss_partials/chrome_styles";
|
8
|
+
@import "../tokens/screen_sizes";
|
9
|
+
@import "../tokens/shadows";
|
8
10
|
|
9
11
|
.pb_advanced_table {
|
10
|
-
$border-color: 1px solid $border_light
|
12
|
+
$border-color: 1px solid $border_light;
|
11
13
|
|
12
14
|
[id$="-span"] {
|
13
15
|
word-wrap: normal;
|
@@ -108,6 +110,51 @@
|
|
108
110
|
height: auto;
|
109
111
|
}
|
110
112
|
|
113
|
+
// Responsive Styles
|
114
|
+
@media only screen and (max-width: $screen-xl-min) {
|
115
|
+
&[class*="table-responsive-scroll"] {
|
116
|
+
border-radius: 4px;
|
117
|
+
box-shadow: 1px 0 0 0px $border_light,
|
118
|
+
-1px 0 0 0px $border_light;
|
119
|
+
display: block;
|
120
|
+
overflow-x: auto;
|
121
|
+
width: 100%;
|
122
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
123
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
124
|
+
border-left-width: 0px;
|
125
|
+
}
|
126
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
127
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
128
|
+
border-right-width: 0px;
|
129
|
+
}
|
130
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
131
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
132
|
+
border-radius: 0 0 0 0;
|
133
|
+
}
|
134
|
+
.table-header-cells:first-child,
|
135
|
+
td:first-child,
|
136
|
+
.pb_table_td:first-child,
|
137
|
+
[class*="pinned-left"] {
|
138
|
+
background-color: $white;
|
139
|
+
box-shadow: $shadow_deep !important;
|
140
|
+
position: sticky !important;
|
141
|
+
left: 0;
|
142
|
+
z-index: 2;
|
143
|
+
}
|
144
|
+
.bg-silver td:first-child {
|
145
|
+
background-color: lighten($silver, $opacity_7);
|
146
|
+
}
|
147
|
+
.bg-white td:first-child {
|
148
|
+
background-color: $white;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
@media only screen and (min-width: $screen-xl-min) {
|
153
|
+
&[class*="table-responsive-scroll"] {
|
154
|
+
overflow-x: visible;
|
155
|
+
}
|
156
|
+
}
|
157
|
+
|
111
158
|
&.dark {
|
112
159
|
.bg-white {
|
113
160
|
background: $bg_dark_card;
|
@@ -151,5 +198,43 @@
|
|
151
198
|
) !important;
|
152
199
|
}
|
153
200
|
}
|
201
|
+
// Dark Mode Responsive Styles
|
202
|
+
@media only screen and (max-width: $screen-xl-min) {
|
203
|
+
&[class*="table-responsive-scroll"] {
|
204
|
+
border-radius: 4px;
|
205
|
+
box-shadow: 1px 0 0 0px $border_dark,
|
206
|
+
-1px 0 0 0px $border_dark;
|
207
|
+
display: block;
|
208
|
+
overflow-x: scroll;
|
209
|
+
width: 100%;
|
210
|
+
[class^=pb_table].table-sm.table-card thead tr th:first-child,
|
211
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:first-child {
|
212
|
+
border-left-width: 0px;
|
213
|
+
}
|
214
|
+
[class^=pb_table].table-sm.table-card thead tr th:last-child,
|
215
|
+
[class^=pb_table].table-sm:not(.no-hover).table-card tbody tr td:last-child {
|
216
|
+
border-right-width: 0px;
|
217
|
+
}
|
218
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:first-child,
|
219
|
+
[class^=pb_table].table-sm.table-card tbody tr:last-child td:last-child {
|
220
|
+
border-radius: 0 0 0 0;
|
221
|
+
}
|
222
|
+
.table-header-cells:first-child,
|
223
|
+
td:first-child,
|
224
|
+
.pb_table_td:first-child,
|
225
|
+
[class*="pinned-left"] {
|
226
|
+
background: $bg_dark_card;
|
227
|
+
border-right: $border_dark;
|
228
|
+
box-shadow: $shadow_deep !important;
|
229
|
+
position: sticky !important;
|
230
|
+
}
|
231
|
+
.bg-silver td:first-child {
|
232
|
+
background-color: $bg_dark;
|
233
|
+
}
|
234
|
+
.bg-white td:first-child {
|
235
|
+
background-color: $bg_dark_card;
|
236
|
+
}
|
237
|
+
}
|
238
|
+
}
|
154
239
|
}
|
155
240
|
}
|
@@ -42,6 +42,7 @@ type AdvancedTableProps = {
|
|
42
42
|
loading?: boolean | string
|
43
43
|
onRowToggleClick?: (arg: Row<GenericObject>) => void
|
44
44
|
onToggleExpansionClick?: (arg: Row<GenericObject>) => void
|
45
|
+
responsive?: "scroll" | "none",
|
45
46
|
sortControl?: GenericObject
|
46
47
|
tableData: GenericObject[]
|
47
48
|
tableOptions?: GenericObject
|
@@ -66,6 +67,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
66
67
|
loading,
|
67
68
|
onRowToggleClick,
|
68
69
|
onToggleExpansionClick,
|
70
|
+
responsive = "scroll",
|
69
71
|
sortControl,
|
70
72
|
tableData,
|
71
73
|
tableOptions,
|
@@ -132,7 +134,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
132
134
|
//Create column array in format needed by Tanstack
|
133
135
|
const columns =
|
134
136
|
columnDefinitions &&
|
135
|
-
|
137
|
+
columnDefinitions.map((column) => {
|
136
138
|
// Define the base column structure
|
137
139
|
const columnStructure = {
|
138
140
|
...columnHelper.accessor(column.accessor, {
|
@@ -209,6 +211,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
209
211
|
const htmlProps = buildHtmlProps(htmlOptions)
|
210
212
|
const classes = classnames(
|
211
213
|
buildCss("pb_advanced_table"),
|
214
|
+
`table-responsive-${responsive}`,
|
212
215
|
globalProps(props),
|
213
216
|
className
|
214
217
|
)
|
@@ -229,6 +232,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
229
232
|
handleExpandOrCollapse,
|
230
233
|
inlineRowLoading,
|
231
234
|
loading,
|
235
|
+
responsive,
|
232
236
|
setExpanded,
|
233
237
|
sortControl,
|
234
238
|
table,
|
@@ -432,4 +432,34 @@ test("inlineRowLoading prop renders inline loading if true", () => {
|
|
432
432
|
rowButton.click()
|
433
433
|
const inlineLoading = kit.querySelector(".fa-spinner")
|
434
434
|
expect(inlineLoading).toBeInTheDocument()
|
435
|
+
})
|
436
|
+
|
437
|
+
test("responsive prop functions as expected", () => {
|
438
|
+
render(
|
439
|
+
<AdvancedTable
|
440
|
+
columnDefinitions={columnDefinitions}
|
441
|
+
data={{ testid: testId }}
|
442
|
+
responsive="scroll"
|
443
|
+
tableData={MOCK_DATA}
|
444
|
+
tableProps={tableProps}
|
445
|
+
/>
|
446
|
+
)
|
447
|
+
|
448
|
+
const kit = screen.getByTestId(testId)
|
449
|
+
expect(kit).toHaveClass("pb_advanced_table table-responsive-scroll")
|
450
|
+
})
|
451
|
+
|
452
|
+
test("responsive none prop functions as expected", () => {
|
453
|
+
render(
|
454
|
+
<AdvancedTable
|
455
|
+
columnDefinitions={columnDefinitions}
|
456
|
+
data={{ testid: testId }}
|
457
|
+
responsive="none"
|
458
|
+
tableData={MOCK_DATA}
|
459
|
+
tableProps={tableProps}
|
460
|
+
/>
|
461
|
+
)
|
462
|
+
|
463
|
+
const kit = screen.getByTestId(testId)
|
464
|
+
expect(kit).toHaveClass("pb_advanced_table table-responsive-none")
|
435
465
|
})
|
@@ -0,0 +1,67 @@
|
|
1
|
+
import React from "react"
|
2
|
+
import { AdvancedTable } from "playbook-ui"
|
3
|
+
import Title from '../../pb_title/_title'
|
4
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
5
|
+
|
6
|
+
const AdvancedTableResponsive = (props) => {
|
7
|
+
const columnDefinitions = [
|
8
|
+
{
|
9
|
+
accessor: "year",
|
10
|
+
label: "Year",
|
11
|
+
cellAccessors: ["quarter", "month", "day"],
|
12
|
+
},
|
13
|
+
{
|
14
|
+
accessor: "newEnrollments",
|
15
|
+
label: "New Enrollments",
|
16
|
+
},
|
17
|
+
{
|
18
|
+
accessor: "scheduledMeetings",
|
19
|
+
label: "Scheduled Meetings",
|
20
|
+
},
|
21
|
+
{
|
22
|
+
accessor: "attendanceRate",
|
23
|
+
label: "Attendance Rate",
|
24
|
+
},
|
25
|
+
{
|
26
|
+
accessor: "completedClasses",
|
27
|
+
label: "Completed Classes",
|
28
|
+
},
|
29
|
+
{
|
30
|
+
accessor: "classCompletionRate",
|
31
|
+
label: "Class Completion Rate",
|
32
|
+
},
|
33
|
+
{
|
34
|
+
accessor: "graduatedStudents",
|
35
|
+
label: "Graduated Students",
|
36
|
+
},
|
37
|
+
]
|
38
|
+
|
39
|
+
return (
|
40
|
+
<div>
|
41
|
+
<Title
|
42
|
+
size={4}
|
43
|
+
text="Not Responsive"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
<AdvancedTable
|
47
|
+
columnDefinitions={columnDefinitions}
|
48
|
+
responsive="none"
|
49
|
+
tableData={MOCK_DATA}
|
50
|
+
{...props}
|
51
|
+
/>
|
52
|
+
<Title
|
53
|
+
paddingTop="sm"
|
54
|
+
size={4}
|
55
|
+
text="Responsive as Default"
|
56
|
+
{...props}
|
57
|
+
/>
|
58
|
+
<AdvancedTable
|
59
|
+
columnDefinitions={columnDefinitions}
|
60
|
+
tableData={MOCK_DATA}
|
61
|
+
{...props}
|
62
|
+
/>
|
63
|
+
</div>
|
64
|
+
)
|
65
|
+
}
|
66
|
+
|
67
|
+
export default AdvancedTableResponsive
|
@@ -0,0 +1 @@
|
|
1
|
+
The `responsive` prop can be set to "scroll" or "none", and is set to "scroll" by default to make Advanced Tables responsive. To disable, set `responsive="none"`.
|
@@ -7,4 +7,5 @@ export { default as AdvancedTableSubrowHeaders } from './_advanced_table_subrow_
|
|
7
7
|
export { default as AdvancedTableCollapsibleTrail } from './_advanced_table_collapsible_trail.jsx'
|
8
8
|
export { default as AdvancedTableTableOptions } from './_advanced_table_table_options.jsx'
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
10
|
-
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
10
|
+
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
11
|
+
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
@@ -78,36 +78,6 @@ $avatar-sizes: (
|
|
78
78
|
display: block;
|
79
79
|
}
|
80
80
|
}
|
81
|
-
[class^=pb_online_status] {
|
82
|
-
position: absolute;
|
83
|
-
right: 0;
|
84
|
-
top: 0;
|
85
|
-
bottom: auto;
|
86
|
-
left: auto;
|
87
|
-
|
88
|
-
&.size_xxs {
|
89
|
-
right: -5px;
|
90
|
-
}
|
91
|
-
|
92
|
-
&.size_xs {
|
93
|
-
right: -4px;
|
94
|
-
}
|
95
|
-
|
96
|
-
&.size_md {
|
97
|
-
top: auto;
|
98
|
-
bottom: 6px;
|
99
|
-
}
|
100
|
-
|
101
|
-
&.size_lg {
|
102
|
-
top: auto;
|
103
|
-
bottom: 14px;
|
104
|
-
}
|
105
|
-
|
106
|
-
&.size_xl {
|
107
|
-
top: auto;
|
108
|
-
bottom: 22px;
|
109
|
-
}
|
110
|
-
}
|
111
81
|
}
|
112
82
|
}
|
113
83
|
}
|
@@ -71,6 +71,22 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
71
71
|
|
72
72
|
const canShowImage = imageUrl && !error
|
73
73
|
|
74
|
+
const onlineStatusSize =
|
75
|
+
['xxs', 'xs'].includes(size) ? 'sm' :
|
76
|
+
['sm', 'md'].includes(size) ? 'md' :
|
77
|
+
['lg', 'xl'].includes(size) ? 'lg' :
|
78
|
+
'sm';
|
79
|
+
|
80
|
+
const onlineStatusPositionProps = (["xxs", "xs", "sm"].includes(size)) ?
|
81
|
+
{
|
82
|
+
top: { inset: true, value: "0" },
|
83
|
+
right: { inset: false, value: "xxs" }
|
84
|
+
}
|
85
|
+
: {
|
86
|
+
bottom: { inset: true, value: "0" },
|
87
|
+
right: { inset: true, value: size === "xl" ? "sm" : size === "lg" ? "xs" : "xxs" }
|
88
|
+
};
|
89
|
+
|
74
90
|
return (
|
75
91
|
<div
|
76
92
|
{...ariaProps}
|
@@ -142,9 +158,11 @@ const Avatar = (props: AvatarProps): React.ReactElement => {
|
|
142
158
|
</div>
|
143
159
|
{status && (
|
144
160
|
<OnlineStatus
|
145
|
-
className={`size_${size}`}
|
146
161
|
dark={dark}
|
162
|
+
position="absolute"
|
163
|
+
size={onlineStatusSize}
|
147
164
|
status={status}
|
165
|
+
{...onlineStatusPositionProps}
|
148
166
|
/>
|
149
167
|
)}
|
150
168
|
</>
|
@@ -4,6 +4,8 @@ module Playbook
|
|
4
4
|
module PbAvatar
|
5
5
|
class Avatar < Playbook::KitBase
|
6
6
|
prop :component_overlay
|
7
|
+
prop :dark, type: Playbook::Props::Boolean,
|
8
|
+
default: false
|
7
9
|
prop :image_url, type: Playbook::Props::String
|
8
10
|
prop :image_alt, type: Playbook::Props::String,
|
9
11
|
default: ""
|
@@ -23,7 +25,22 @@ module Playbook
|
|
23
25
|
end
|
24
26
|
|
25
27
|
def online_status_props
|
26
|
-
|
28
|
+
props = {
|
29
|
+
dark: dark,
|
30
|
+
status: status,
|
31
|
+
size: online_status_size,
|
32
|
+
position: "absolute",
|
33
|
+
right: online_status_right_position,
|
34
|
+
}
|
35
|
+
|
36
|
+
case size
|
37
|
+
when "xxs", "xs", "sm"
|
38
|
+
props[:top] = { value: "0", inset: true }
|
39
|
+
else
|
40
|
+
props[:bottom] = { value: "0", inset: true }
|
41
|
+
end
|
42
|
+
|
43
|
+
props
|
27
44
|
end
|
28
45
|
|
29
46
|
def alt_text
|
@@ -57,6 +74,32 @@ module Playbook
|
|
57
74
|
}
|
58
75
|
end
|
59
76
|
|
77
|
+
def online_status_size
|
78
|
+
case size
|
79
|
+
when "xxs", "xs"
|
80
|
+
"sm"
|
81
|
+
when "sm", "md"
|
82
|
+
"md"
|
83
|
+
when "lg", "xl"
|
84
|
+
"lg"
|
85
|
+
else
|
86
|
+
"sm"
|
87
|
+
end
|
88
|
+
end
|
89
|
+
|
90
|
+
def online_status_right_position
|
91
|
+
case size
|
92
|
+
when "xxs", "xs", "sm"
|
93
|
+
"xxs"
|
94
|
+
when "md"
|
95
|
+
{ value: "xxs", inset: true }
|
96
|
+
when "lg"
|
97
|
+
{ value: "xs", inset: true }
|
98
|
+
when "xl"
|
99
|
+
{ value: "sm", inset: true }
|
100
|
+
end
|
101
|
+
end
|
102
|
+
|
60
103
|
def placement_styles(offset)
|
61
104
|
top_bottom_offset = if offset == "xs"
|
62
105
|
"xs"
|
@@ -89,3 +89,20 @@ test('renders with iconCircle overlay', () => {
|
|
89
89
|
expect(iconCircleOverlay).toBeInTheDocument();
|
90
90
|
expect(iconCircleOverlay).toHaveClass('pb_avatar_kit_size_md');
|
91
91
|
});
|
92
|
+
|
93
|
+
|
94
|
+
test('renders with online status', () => {
|
95
|
+
render(
|
96
|
+
<Avatar
|
97
|
+
data={{ testid: testId }}
|
98
|
+
imageAlt={imageAlt}
|
99
|
+
imageUrl={imageUrl}
|
100
|
+
name={name}
|
101
|
+
status="online"
|
102
|
+
/>
|
103
|
+
);
|
104
|
+
|
105
|
+
const onlineStatusAvatar = screen.getByTestId(testId);
|
106
|
+
const onlineStatus = onlineStatusAvatar.querySelector('.pb_online_status_kit_online_size_md')
|
107
|
+
expect(onlineStatus).toBeInTheDocument();
|
108
|
+
});
|
@@ -6,4 +6,6 @@ Playbook's date picker is built using [flatpickr](https://flatpickr.js.org/), a
|
|
6
6
|
|
7
7
|
To learn more [visit flatpickr's docs](https://flatpickr.js.org/instance-methods-properties-elements/) or see the hook doc section below for an applied example.
|
8
8
|
|
9
|
-
The Date Picker works best with Javascript Date Objects or ISO Date strings. If you're programming in js use Date Objects. If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string. For example, `DateTime.now.utc.iso8601`. This ensures that the string passed to the Date Picker kit behaves as expected.
|
9
|
+
The Date Picker works best with Javascript Date Objects or ISO Date strings. If you're programming in js use Date Objects. If you're using rails convert your date object (with timezone) to UTC and then to an ISO Date string. For example, `DateTime.now.utc.iso8601`. This ensures that the string passed to the Date Picker kit behaves as expected.
|
10
|
+
|
11
|
+
The Date Picker expects a date format of `MM/DD/YYYY` by default. If a different date format (e.g. `DD/MM/YYYY`, `m/d/y`, etc.) is used, the component will not know how to handle it and use a default date instead. To change the date format used, read more [here](#format).
|
@@ -45,6 +45,7 @@
|
|
45
45
|
class: "checkbox-class"
|
46
46
|
%>
|
47
47
|
<%= form.date_picker :example_date_picker_1, props: { label: true } %>
|
48
|
+
<%= form.star_rating_field :example_star_rating, props: { variant: "interactive", label: true } %>
|
48
49
|
|
49
50
|
<%= form.actions do |action| %>
|
50
51
|
<%= action.submit %>
|
@@ -39,6 +39,7 @@ type IconProps = {
|
|
39
39
|
size?: IconSizes,
|
40
40
|
fontStyle?: 'far' | 'fas' | 'fab' | 'fak',
|
41
41
|
spin?: boolean,
|
42
|
+
tabIndex?: number,
|
42
43
|
} & GlobalProps
|
43
44
|
|
44
45
|
const flipMap = {
|
@@ -138,6 +139,7 @@ const Icon = (props: IconProps) => {
|
|
138
139
|
size,
|
139
140
|
fontStyle = 'far',
|
140
141
|
spin = false,
|
142
|
+
tabIndex,
|
141
143
|
} = props
|
142
144
|
|
143
145
|
let iconElement: ReactSVGElement | null = typeof(icon) === "object" ? icon : null
|
@@ -226,6 +228,7 @@ const Icon = (props: IconProps) => {
|
|
226
228
|
id,
|
227
229
|
width: 'auto',
|
228
230
|
height: 'auto',
|
231
|
+
...(props.tabIndex !== undefined && { tabIndex }),
|
229
232
|
})
|
230
233
|
}
|
231
234
|
</>
|
@@ -37,6 +37,7 @@ module Playbook
|
|
37
37
|
prop :spin, type: Playbook::Props::Boolean,
|
38
38
|
default: false
|
39
39
|
prop :color, type: Playbook::Props::String
|
40
|
+
prop :tabindex
|
40
41
|
|
41
42
|
def valid_emoji?
|
42
43
|
emoji_regex = /\p{Emoji}/
|
@@ -107,6 +108,7 @@ module Playbook
|
|
107
108
|
svg["aria"] = object.aria
|
108
109
|
svg["height"] = "auto"
|
109
110
|
svg["width"] = "auto"
|
111
|
+
svg["tabindex"] = object.tabindex
|
110
112
|
fill_color = object.color || "currentColor"
|
111
113
|
doc.at_css("path")["fill"] = fill_color
|
112
114
|
raw doc
|