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.
Files changed (98) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/TableHeaderCell.tsx +5 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableBody.tsx +24 -20
  4. data/app/pb_kits/playbook/pb_advanced_table/SubKits/TableHeader.tsx +17 -12
  5. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +86 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +5 -1
  7. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +30 -0
  8. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.jsx +67 -0
  9. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_responsive.md +1 -0
  10. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +2 -1
  12. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -30
  13. data/app/pb_kits/playbook/pb_avatar/_avatar.tsx +19 -1
  14. data/app/pb_kits/playbook/pb_avatar/avatar.rb +44 -1
  15. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +17 -0
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_description.md +3 -1
  17. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.scss +1 -1
  18. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -0
  19. data/app/pb_kits/playbook/pb_icon/_icon.tsx +3 -0
  20. data/app/pb_kits/playbook/pb_icon/icon.rb +2 -0
  21. data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +2 -1
  22. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.rb +2 -2
  23. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.scss +0 -11
  24. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +3 -2
  25. data/app/pb_kits/playbook/pb_icon_stat_value/docs/_icon_stat_value_color.html.erb +1 -0
  26. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.rb +2 -2
  27. data/app/pb_kits/playbook/pb_icon_stat_value/icon_stat_value.test.js +5 -4
  28. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +1 -1
  29. data/app/pb_kits/playbook/pb_online_status/_online_status.scss +52 -5
  30. data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +6 -1
  31. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.html.erb +1 -0
  32. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_no_border.jsx +14 -0
  33. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.html.erb +3 -0
  34. data/app/pb_kits/playbook/pb_online_status/docs/_online_status_size.jsx +25 -0
  35. data/app/pb_kits/playbook/pb_online_status/docs/example.yml +6 -2
  36. data/app/pb_kits/playbook/pb_online_status/docs/index.js +2 -0
  37. data/app/pb_kits/playbook/pb_online_status/online_status.rb +11 -1
  38. data/app/pb_kits/playbook/pb_online_status/online_status.test.js +31 -0
  39. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.html.erb +61 -0
  40. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.jsx +70 -0
  41. data/app/pb_kits/playbook/pb_overlay/docs/_overlay_toggle.md +1 -0
  42. data/app/pb_kits/playbook/pb_overlay/docs/example.yml +4 -2
  43. data/app/pb_kits/playbook/pb_overlay/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +83 -6
  45. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +3 -1
  46. data/app/pb_kits/playbook/pb_star_rating/index.js +73 -4
  47. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +1 -1
  48. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +2 -2
  49. data/app/pb_kits/playbook/pb_star_rating/stars/utils.tsx +5 -1
  50. data/app/pb_kits/playbook/pb_star_rating/subcomponents/_star_rating_interactive.tsx +50 -21
  51. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  52. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  53. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  54. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  55. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  57. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  58. data/app/pb_kits/playbook/pb_table/table.test.js +2 -0
  59. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  60. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  61. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +45 -27
  62. data/app/pb_kits/playbook/pb_textarea/index.ts +3 -3
  63. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  64. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  65. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  66. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  67. data/app/pb_kits/playbook/pb_timestamp/timestamp.rb +37 -2
  68. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  69. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  70. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  71. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +1 -2
  72. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +2 -0
  73. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +2 -2
  74. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_multi_kit.html.erb +1 -1
  75. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -0
  76. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  77. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  78. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +236 -235
  79. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  80. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +68 -63
  81. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +1 -1
  82. data/app/pb_kits/playbook/utilities/_positioning.scss +26 -15
  83. data/dist/chunks/_typeahead-D-4y9pbv.js +22 -0
  84. data/dist/chunks/_weekday_stacked-Cax4nrUa.js +45 -0
  85. data/dist/chunks/lazysizes-DHz07jlL.js +1 -0
  86. data/dist/chunks/{lib-Bf_E03gc.js → lib-BE0Z3F7x.js} +1 -1
  87. data/dist/chunks/{pb_form_validation-D0dhqeN2.js → pb_form_validation-TzZQ0Flx.js} +1 -1
  88. data/dist/chunks/vendor.js +1 -1
  89. data/dist/playbook-doc.js +1 -1
  90. data/dist/playbook-rails-react-bindings.js +1 -1
  91. data/dist/playbook-rails.js +1 -1
  92. data/dist/playbook.css +1 -1
  93. data/lib/playbook/version.rb +2 -2
  94. metadata +20 -11
  95. data/app/pb_kits/playbook/pb_online_status/_online_status_mixins.scss +0 -32
  96. data/dist/chunks/_typeahead-COUJ88EA.js +0 -22
  97. data/dist/chunks/_weekday_stacked-BAkwel5p.js +0 -45
  98. data/dist/chunks/lazysizes-B7xYodB-.js +0 -1
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: e0b8c603b0b4f4c71fd994ae5fb34628441b8b6d79e7b0995d52ee6eb2244cd1
4
- data.tar.gz: 66abcf68e967f3e108752d9986ecbe171cf2e6519e004da35969c7c063c3a21b
3
+ metadata.gz: 9e9a8573217ee764fa83fe813c05c7aaeedf7c9fdb98d4b702a358eceedf1330
4
+ data.tar.gz: bb76d9f0e12c6c3be671b40a953be9755b42d65fc2764e10d6541ba5e4d4863d
5
5
  SHA512:
6
- metadata.gz: 8b1946c68440d581a88ab423422ee820721f90654e8102a007b9cf25df953fa7d7128e3a1eb5a6a053d651c568c5e2b341fccf6ef01a600f4c55041ec3fc5ead
7
- data.tar.gz: 71c868e78a015e782f2631bf95c87b182a805b659d35e1b6df4a41ce264a9ec58ffbe05393389b421919cd23f5f6f5b34d1a020784c3fcef1845cf8c6b2008c0
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
- <tr
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={`${cell.id}-cell position_relative ${
87
- isChrome() ? "chrome-styles" : ""
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
- </tr>
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
- <TableHeaderCell
56
- enableSorting={enableSorting}
57
- enableToggleExpansion={enableToggleExpansion}
58
- handleExpandOrCollapse={handleExpandOrCollapse}
59
- header={header}
60
- headerChildren={children}
61
- key={`${header.id}-header`}
62
- loading={loading}
63
- sortIcon={sortIcon}
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 !important;
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
- columnDefinitions.map((column) => {
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"`.
@@ -14,3 +14,4 @@ examples:
14
14
  - advanced_table_table_options: Table Options
15
15
  - advanced_table_table_props: Table Props
16
16
  - advanced_table_inline_row_loading: Inline Row Loading
17
+ - advanced_table_responsive: Responsive Tables
@@ -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
- { status: status, classname: "size_#{size}" }
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).
@@ -33,7 +33,7 @@ $confirmation_toast_colors: (
33
33
 
34
34
  &.positioned_toast {
35
35
  position: fixed;
36
- z-index: $z_9;
36
+ z-index: $z_10 !important;
37
37
  display: flex;
38
38
  justify-content: space-around;
39
39
  max-width: max-content;
@@ -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
@@ -24,7 +24,8 @@ type IconCircleProps = {
24
24
  | "red"
25
25
  | "yellow"
26
26
  | "orange"
27
- | "green",
27
+ | "green"
28
+ | "lighter",
28
29
  }
29
30
 
30
31
  const IconCircle = (props: IconCircleProps) => {