playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
- data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
- data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +19 -5
- data/dist/chunks/_weekday_stacked-PLi3twbe.js +45 -0
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +9 -3
- data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
|
|
4
|
+
data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 225b32c1ce7e41af851a4bfd0d40cc502d3458ec796146f76511dc9db8504316f154060857c35737a93dc4ecfb0e6a9d2d36690883b463f1dc23e16b135a44dd
|
|
7
|
+
data.tar.gz: e31d7f5cad0f0e456e2afb580573650eb72391230227dcad825a32fcb221f906660609baf3941ff8cbdebec68185fc064c0685e318825b594668b04601649527
|
|
@@ -91,7 +91,7 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
91
91
|
const columnHelper = createColumnHelper()
|
|
92
92
|
|
|
93
93
|
//Create cells for first columns
|
|
94
|
-
const createCellFunction = (cellAccessors: string[]) => {
|
|
94
|
+
const createCellFunction = (cellAccessors: string[], customRenderer?: (row: Row<GenericObject>, value: any) => JSX.Element) => {
|
|
95
95
|
const columnCells = ({
|
|
96
96
|
row,
|
|
97
97
|
getValue,
|
|
@@ -101,6 +101,11 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
101
101
|
}) => {
|
|
102
102
|
const rowData = row.original
|
|
103
103
|
|
|
104
|
+
// Use customRenderer if provided, otherwise default rendering
|
|
105
|
+
if (customRenderer) {
|
|
106
|
+
return customRenderer(row, getValue())
|
|
107
|
+
}
|
|
108
|
+
|
|
104
109
|
switch (row.depth) {
|
|
105
110
|
case 0: {
|
|
106
111
|
return (
|
|
@@ -134,18 +139,31 @@ const AdvancedTable = (props: AdvancedTableProps) => {
|
|
|
134
139
|
//Create column array in format needed by Tanstack
|
|
135
140
|
const columns =
|
|
136
141
|
columnDefinitions &&
|
|
137
|
-
columnDefinitions.map((column) => {
|
|
142
|
+
columnDefinitions.map((column, index) => {
|
|
138
143
|
// Define the base column structure
|
|
139
144
|
const columnStructure = {
|
|
140
145
|
...columnHelper.accessor(column.accessor, {
|
|
141
146
|
header: column.label,
|
|
142
147
|
}),
|
|
143
148
|
}
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
|
|
148
|
-
|
|
149
|
+
|
|
150
|
+
// Use the custom renderer if provided, EXCEPT for the first column
|
|
151
|
+
if (index !== 0) {
|
|
152
|
+
if (column.cellAccessors || column.customRenderer) {
|
|
153
|
+
columnStructure.cell = createCellFunction(
|
|
154
|
+
column.cellAccessors,
|
|
155
|
+
column.customRenderer
|
|
156
|
+
)
|
|
157
|
+
}
|
|
158
|
+
} else {
|
|
159
|
+
// For the first column, apply createCellFunction without customRenderer
|
|
160
|
+
if (column.cellAccessors) {
|
|
161
|
+
columnStructure.cell = createCellFunction(column.cellAccessors)
|
|
162
|
+
}
|
|
163
|
+
}
|
|
164
|
+
|
|
165
|
+
return columnStructure
|
|
166
|
+
})
|
|
149
167
|
|
|
150
168
|
//Syntax for sorting Array if we want to manage state ourselves
|
|
151
169
|
const sorting = [
|
|
@@ -0,0 +1,72 @@
|
|
|
1
|
+
import React from "react"
|
|
2
|
+
import { AdvancedTable, Pill, Body, Flex, Detail, Caption } from "playbook-ui"
|
|
3
|
+
import MOCK_DATA from "./advanced_table_mock_data.json"
|
|
4
|
+
|
|
5
|
+
const AdvancedTableCustomCell = (props) => {
|
|
6
|
+
const columnDefinitions = [
|
|
7
|
+
{
|
|
8
|
+
accessor: "year",
|
|
9
|
+
label: "Year",
|
|
10
|
+
cellAccessors: ["quarter", "month", "day"],
|
|
11
|
+
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
accessor: "newEnrollments",
|
|
15
|
+
label: "New Enrollments",
|
|
16
|
+
customRenderer: (row, value) => (
|
|
17
|
+
<Pill text={value}
|
|
18
|
+
variant="success"
|
|
19
|
+
/>
|
|
20
|
+
),
|
|
21
|
+
},
|
|
22
|
+
{
|
|
23
|
+
accessor: "scheduledMeetings",
|
|
24
|
+
label: "Scheduled Meetings",
|
|
25
|
+
customRenderer: (row, value) => <Body><a href="#">{value}</a></Body>,
|
|
26
|
+
},
|
|
27
|
+
{
|
|
28
|
+
accessor: "attendanceRate",
|
|
29
|
+
label: "Attendance Rate",
|
|
30
|
+
customRenderer: (row, value) => (
|
|
31
|
+
<Flex alignItems="end"
|
|
32
|
+
orientation="column"
|
|
33
|
+
>
|
|
34
|
+
<Detail bold
|
|
35
|
+
color="default"
|
|
36
|
+
text={value}
|
|
37
|
+
/>
|
|
38
|
+
<Caption size="xs">{row.original.graduatedStudents}</Caption>
|
|
39
|
+
</Flex>
|
|
40
|
+
),
|
|
41
|
+
},
|
|
42
|
+
{
|
|
43
|
+
accessor: "completedClasses",
|
|
44
|
+
label: "Completed Classes",
|
|
45
|
+
},
|
|
46
|
+
{
|
|
47
|
+
accessor: "classCompletionRate",
|
|
48
|
+
label: "Class Completion Rate",
|
|
49
|
+
},
|
|
50
|
+
{
|
|
51
|
+
accessor: "graduatedStudents",
|
|
52
|
+
label: "Graduated Students",
|
|
53
|
+
},
|
|
54
|
+
]
|
|
55
|
+
|
|
56
|
+
return (
|
|
57
|
+
<div>
|
|
58
|
+
<AdvancedTable
|
|
59
|
+
columnDefinitions={columnDefinitions}
|
|
60
|
+
enableToggleExpansion="all"
|
|
61
|
+
responsive="none"
|
|
62
|
+
tableData={MOCK_DATA}
|
|
63
|
+
{...props}
|
|
64
|
+
>
|
|
65
|
+
<AdvancedTable.Header enableSorting />
|
|
66
|
+
<AdvancedTable.Body />
|
|
67
|
+
</AdvancedTable>
|
|
68
|
+
</div>
|
|
69
|
+
)
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
export default AdvancedTableCustomCell
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
The Advanced Table also allows for rendering custom components within individual Cells. To achieve this, you can make use of the optional `customRenderer` item within each columnDefinition. This function gives you access to the current Cell's value if you just want to use that with a custom Kit, but it also gives you access to the entire `row` object. The row object provides all data for the current row. To access the data, use `row.original` which is the entire data object for the current row. See the code snippet below for 3 separate use cases and how they were acheived.
|
|
2
|
+
|
|
3
|
+
See [here](https://playbook.powerapp.cloud/kits/advanced_table/react#columnDefinitions) for more indepth information on columnDefinitions are how to use them.
|
|
4
|
+
|
|
5
|
+
See [here](https://github.com/powerhome/playbook/tree/master/playbook/app/pb_kits/playbook/pb_advanced_table#readme) for the structure of the tableData used.
|
|
@@ -3,6 +3,7 @@ examples:
|
|
|
3
3
|
- advanced_table_beta: Default (Required Props)
|
|
4
4
|
- advanced_table_beta_subrow_headers: SubRow Headers
|
|
5
5
|
- advanced_table_beta_sort: Enable Sorting
|
|
6
|
+
|
|
6
7
|
react:
|
|
7
8
|
- advanced_table_default: Default (Required Props)
|
|
8
9
|
- advanced_table_loading: Loading State
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- advanced_table_table_props: Table Props
|
|
16
17
|
- advanced_table_inline_row_loading: Inline Row Loading
|
|
17
18
|
- advanced_table_responsive: Responsive Tables
|
|
19
|
+
- advanced_table_custom_cell: Custom Components for Cells
|
|
@@ -9,3 +9,4 @@ export { default as AdvancedTableTableOptions } from './_advanced_table_table_op
|
|
|
9
9
|
export { default as AdvancedTableTableProps } from './_advanced_table_table_props.jsx'
|
|
10
10
|
export { default as AdvancedTableInlineRowLoading } from './_advanced_table_inline_row_loading.jsx'
|
|
11
11
|
export { default as AdvancedTableResponsive } from './_advanced_table_responsive.jsx'
|
|
12
|
+
export { default as AdvancedTableCustomCell } from './_advanced_table_custom_cell.jsx'
|
|
@@ -1,4 +1,4 @@
|
|
|
1
|
-
import React, { useState, useRef, useEffect } from "react";
|
|
1
|
+
import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
|
|
2
2
|
import classnames from "classnames";
|
|
3
3
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
|
@@ -38,7 +38,14 @@ type DropdownProps = {
|
|
|
38
38
|
triggerRef?: any;
|
|
39
39
|
};
|
|
40
40
|
|
|
41
|
-
|
|
41
|
+
interface DropdownComponent
|
|
42
|
+
extends React.ForwardRefExoticComponent<DropdownProps & React.RefAttributes<unknown>> {
|
|
43
|
+
Option: typeof DropdownOption;
|
|
44
|
+
Trigger: typeof DropdownTrigger;
|
|
45
|
+
Container: typeof DropdownContainer;
|
|
46
|
+
}
|
|
47
|
+
|
|
48
|
+
const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
|
|
42
49
|
const {
|
|
43
50
|
aria = {},
|
|
44
51
|
autocomplete = false,
|
|
@@ -125,7 +132,7 @@ const Dropdown = (props: DropdownProps) => {
|
|
|
125
132
|
const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
|
|
126
133
|
const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
|
|
127
134
|
return String(label).toLowerCase().includes(filterItem.toLowerCase());
|
|
128
|
-
});
|
|
135
|
+
});
|
|
129
136
|
|
|
130
137
|
// For keyboard accessibility: Set focus within dropdown to selected item if it exists
|
|
131
138
|
useEffect(() => {
|
|
@@ -175,6 +182,14 @@ const Dropdown = (props: DropdownProps) => {
|
|
|
175
182
|
dark
|
|
176
183
|
});
|
|
177
184
|
|
|
185
|
+
useImperativeHandle(ref, () => ({
|
|
186
|
+
clearSelected: () => {
|
|
187
|
+
setSelected({});
|
|
188
|
+
setFilterItem("");
|
|
189
|
+
setIsDropDownClosed(true);
|
|
190
|
+
onSelect && onSelect(null);
|
|
191
|
+
},
|
|
192
|
+
}));
|
|
178
193
|
|
|
179
194
|
return (
|
|
180
195
|
<div {...ariaProps}
|
|
@@ -258,8 +273,9 @@ const Dropdown = (props: DropdownProps) => {
|
|
|
258
273
|
</DropdownContext.Provider>
|
|
259
274
|
</div>
|
|
260
275
|
)
|
|
261
|
-
}
|
|
276
|
+
}) as DropdownComponent
|
|
262
277
|
|
|
278
|
+
Dropdown.displayName = "Dropdown";
|
|
263
279
|
Dropdown.Option = DropdownOption;
|
|
264
280
|
Dropdown.Trigger = DropdownTrigger;
|
|
265
281
|
Dropdown.Container = DropdownContainer;
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import React, { useRef } from 'react'
|
|
2
|
+
import { Button, Dropdown } from 'playbook-ui'
|
|
3
|
+
|
|
4
|
+
const options = [
|
|
5
|
+
{
|
|
6
|
+
label: "United States",
|
|
7
|
+
value: "United States",
|
|
8
|
+
},
|
|
9
|
+
{
|
|
10
|
+
label: "Canada",
|
|
11
|
+
value: "Canada",
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Pakistan",
|
|
15
|
+
value: "Pakistan",
|
|
16
|
+
}
|
|
17
|
+
]
|
|
18
|
+
|
|
19
|
+
const DropdownClearSelection = (props) => {
|
|
20
|
+
const dropdownRef = useRef(null)
|
|
21
|
+
|
|
22
|
+
const handleReset = () => {
|
|
23
|
+
if (dropdownRef.current) {
|
|
24
|
+
dropdownRef.current.clearSelected()
|
|
25
|
+
}
|
|
26
|
+
}
|
|
27
|
+
|
|
28
|
+
return (
|
|
29
|
+
<>
|
|
30
|
+
<Dropdown
|
|
31
|
+
defaultValue={options[2]}
|
|
32
|
+
options={options}
|
|
33
|
+
ref={dropdownRef}
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<Button
|
|
37
|
+
marginTop="md"
|
|
38
|
+
onClick={handleReset}
|
|
39
|
+
text="Reset"
|
|
40
|
+
/>
|
|
41
|
+
</>
|
|
42
|
+
)
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
export default DropdownClearSelection
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the `useRef` hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
|
|
@@ -22,6 +22,7 @@ examples:
|
|
|
22
22
|
- dropdown_error: Dropdown with Error
|
|
23
23
|
- dropdown_default_value: Default Value
|
|
24
24
|
- dropdown_blank_selection: Blank Selection
|
|
25
|
+
- dropdown_clear_selection: Clear Selection
|
|
25
26
|
# - dropdown_with_autocomplete: Autocomplete
|
|
26
27
|
# - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
|
|
27
28
|
# - dropdown_with_external_control: useDropdown Hook
|
|
@@ -12,3 +12,4 @@ export { default as DropdownSubcomponentStructure } from './_dropdown_subcompone
|
|
|
12
12
|
export { default as DropdownError } from './_dropdown_error.jsx'
|
|
13
13
|
export { default as DropdownDefaultValue } from './_dropdown_default_value.jsx'
|
|
14
14
|
export { default as DropdownBlankSelection } from './_dropdown_blank_selection.jsx'
|
|
15
|
+
export { default as DropdownClearSelection } from './_dropdown_clear_selection.jsx'
|
|
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
73
73
|
!autocomplete && "select_only"
|
|
74
74
|
);
|
|
75
75
|
|
|
76
|
-
const customDisplayPlaceholder = selected
|
|
76
|
+
const customDisplayPlaceholder = selected?.label ? (
|
|
77
77
|
<b>{selected.label}</b>
|
|
78
78
|
) : autocomplete ? (
|
|
79
79
|
""
|
|
@@ -83,7 +83,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
|
|
|
83
83
|
"Select..."
|
|
84
84
|
);
|
|
85
85
|
|
|
86
|
-
const defaultDisplayPlaceholder = selected
|
|
86
|
+
const defaultDisplayPlaceholder = selected?.label
|
|
87
87
|
? selected.label
|
|
88
88
|
: autocomplete
|
|
89
89
|
? ""
|
|
@@ -13,6 +13,7 @@ type ResultsCountProps = {
|
|
|
13
13
|
const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
|
|
14
14
|
|
|
15
15
|
const resultTitle = () => {
|
|
16
|
+
if (results == null) return null
|
|
16
17
|
return (
|
|
17
18
|
<TitleCount
|
|
18
19
|
align="center"
|
|
@@ -24,6 +25,7 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
|
24
25
|
}
|
|
25
26
|
|
|
26
27
|
const justResults = () => {
|
|
28
|
+
if (results == null) return null
|
|
27
29
|
return (
|
|
28
30
|
<Caption
|
|
29
31
|
className="filter-results"
|
|
@@ -35,13 +37,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
|
|
|
35
37
|
}
|
|
36
38
|
|
|
37
39
|
const displayResultsCount = () => {
|
|
38
|
-
if (results && title) {
|
|
40
|
+
if (results != null && results >=0 && title) {
|
|
39
41
|
return (
|
|
40
42
|
<>
|
|
41
43
|
{resultTitle()}
|
|
42
44
|
</>
|
|
43
45
|
)
|
|
44
|
-
} else if (results) {
|
|
46
|
+
} else if (results !=null && results >=0 ) {
|
|
45
47
|
return (
|
|
46
48
|
<>
|
|
47
49
|
{justResults()}
|
|
@@ -3,6 +3,76 @@
|
|
|
3
3
|
@import "../tokens/opacity";
|
|
4
4
|
@import "../pb_avatar/avatar";
|
|
5
5
|
|
|
6
|
+
$sizes: (
|
|
7
|
+
"avatar": ("sm": 38px, "md": 60px, "lg": 80px, "xl": 100px),
|
|
8
|
+
"first-item-double": ("sm": 20px, "md": 32px, "lg": 44px, "xl": 56px),
|
|
9
|
+
"first-item-triple": ("sm": 16px, "md": 24px, "lg": 32px, "xl": 44px),
|
|
10
|
+
"first-item-quadruple": ("sm": 16px, "md": 28px, "lg": 36px, "xl": 44px),
|
|
11
|
+
"second-item-double": ("sm": 12px, "md": 16px, "lg": 20px, "xl": 24px),
|
|
12
|
+
"second-item-triple": ("sm": 12px, "md": 20px, "lg": 24px, "xl": 32px),
|
|
13
|
+
"second-item-quadruple": ("sm": 12px, "md": 20px, "lg": 28px, "xl": 32px),
|
|
14
|
+
"third-item-triple": ("sm": 10px, "md": 16px, "lg": 20px, "xl": 24px),
|
|
15
|
+
"third-item-quadruple": ("sm": 10px, "md": 16px, "lg": 24px, "xl": 24px),
|
|
16
|
+
"fourth-item": ("sm": 8px, "md": 12px, "lg": 16px, "xl": 16px)
|
|
17
|
+
);
|
|
18
|
+
|
|
19
|
+
$positions: (
|
|
20
|
+
"second-item-double": (
|
|
21
|
+
"sm": ("top": null, "bottom": 5px, "right": 4px, "left": null),
|
|
22
|
+
"md": ("top": null, "bottom": 10px, "right": 8px, "left": null),
|
|
23
|
+
"lg": ("top": 46px, "bottom": null, "right": 12px, "left": null),
|
|
24
|
+
"xl": ("top": 58px, "bottom": null, "right": 14px, "left": null)
|
|
25
|
+
),
|
|
26
|
+
"second-item-triple": (
|
|
27
|
+
"sm": ("top": 12px, "bottom": null, "right": 2px, "left": null),
|
|
28
|
+
"md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
|
|
29
|
+
"lg": ("top": 32px, "bottom": null, "right": 9px, "left": null),
|
|
30
|
+
"xl": ("top": 41px, "bottom": null, "right": 11px, "left": null)
|
|
31
|
+
),
|
|
32
|
+
"second-item-quadruple": (
|
|
33
|
+
"sm": ("top": null, "bottom": 9px, "right": 4px, "left": null),
|
|
34
|
+
"md": ("top": 24px, "bottom": null, "right": 5px, "left": null),
|
|
35
|
+
"lg": ("top": 31px, "bottom": null, "right": 6px, "left": null),
|
|
36
|
+
"xl": ("top": 43px, "bottom": null, "right": 9px, "left": null)
|
|
37
|
+
),
|
|
38
|
+
"third-item-triple": (
|
|
39
|
+
"sm": ("top": null, "bottom": 3px, "right": null, "left": 11px),
|
|
40
|
+
"md": ("top": null, "bottom": 6px, "right": null, "left": 16px),
|
|
41
|
+
"lg": ("top": null, "bottom": 10px, "right": null, "left": 23px),
|
|
42
|
+
"xl": ("top": null, "bottom": 13px, "right": null, "left": 27px)
|
|
43
|
+
),
|
|
44
|
+
"third-item-quadruple": (
|
|
45
|
+
"sm": ("top": null, "bottom": 3px, "right": null, "left": 9px),
|
|
46
|
+
"md": ("top": null, "bottom": 5px, "right": null, "left": 15px),
|
|
47
|
+
"lg": ("top": null, "bottom": 7px, "right": null, "left": 20px),
|
|
48
|
+
"xl": ("top": null, "bottom": 11px, "right": null, "left": 27px)
|
|
49
|
+
),
|
|
50
|
+
"fourth-item": (
|
|
51
|
+
"sm": ("top": 5px, "bottom": null, "right": 6px, "left": null),
|
|
52
|
+
"md": ("top": 7px, "bottom": null, "right": 12px, "left": null),
|
|
53
|
+
"lg": ("top": 9px, "bottom": null, "right": 16px, "left": null),
|
|
54
|
+
"xl": ("top": 16px, "bottom": null, "right": 24px, "left": null)
|
|
55
|
+
),
|
|
56
|
+
"first-item-double": (
|
|
57
|
+
"sm": ("top": 4px, "bottom": null, "right": null, "left": 3px),
|
|
58
|
+
"md": ("top": 6px, "bottom": null, "right": null, "left": 8px),
|
|
59
|
+
"lg": ("top": 8px, "bottom": null, "right": null, "left": 8px),
|
|
60
|
+
"xl": ("top": 10px, "bottom": null, "right": null, "left": 10px)
|
|
61
|
+
),
|
|
62
|
+
"first-item-triple": (
|
|
63
|
+
"sm": ("top": 4px, "bottom": null, "right": null, "left": 4px),
|
|
64
|
+
"md": ("top": 7px, "bottom": null, "right": null, "left": 7px),
|
|
65
|
+
"lg": ("top": 10px, "bottom": null, "right": null, "left": 10px),
|
|
66
|
+
"xl": ("top": 12px, "bottom": null, "right": null, "left": 12px)
|
|
67
|
+
),
|
|
68
|
+
"first-item-quadruple": (
|
|
69
|
+
"sm": ("top": 5px, "bottom": null, "right": null, "left": 3px),
|
|
70
|
+
"md": ("top": 7px, "bottom": null, "right": null, "left": 5px),
|
|
71
|
+
"lg": ("top": 9px, "bottom": null, "right": null, "left": 7px),
|
|
72
|
+
"xl": ("top": 16px, "bottom": null, "right": null, "left": 10px)
|
|
73
|
+
)
|
|
74
|
+
);
|
|
75
|
+
|
|
6
76
|
@mixin avatar-size($size) {
|
|
7
77
|
height: $size;
|
|
8
78
|
width: $size;
|
|
@@ -27,8 +97,8 @@
|
|
|
27
97
|
$stacked_size: 18px;
|
|
28
98
|
$max_to_display: 1, 2;
|
|
29
99
|
display: inline-flex;
|
|
30
|
-
width:
|
|
31
|
-
height:
|
|
100
|
+
width: 28px;
|
|
101
|
+
height: 28px;
|
|
32
102
|
flex-basis: $container_size;
|
|
33
103
|
position: relative;
|
|
34
104
|
flex-shrink: 0;
|
|
@@ -48,7 +118,7 @@
|
|
|
48
118
|
}
|
|
49
119
|
}
|
|
50
120
|
&[class*=_single] .pb_multiple_users_stacked_item {
|
|
51
|
-
@include avatar-size(
|
|
121
|
+
@include avatar-size(28px);
|
|
52
122
|
}
|
|
53
123
|
[class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
|
|
54
124
|
@include position((bottom: 0, right: 0));
|
|
@@ -71,72 +141,106 @@
|
|
|
71
141
|
color: transparent;
|
|
72
142
|
}
|
|
73
143
|
|
|
74
|
-
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
&.first_item {
|
|
93
|
-
@include position((top: 4px, left: 3px));
|
|
94
|
-
@include avatar-size(20px);
|
|
95
|
-
|
|
96
|
-
&.triple_bubble {
|
|
97
|
-
@include position((top: 4px, left: 4px));
|
|
98
|
-
@include avatar-size(16px);
|
|
144
|
+
// Iterate over each size to adjust the bubble container only when class contains "_bubble_"
|
|
145
|
+
@each $size_name, $size_value in $avatar-sizes {
|
|
146
|
+
&[class*=_bubble_][class*=_size_#{$size_name}] {
|
|
147
|
+
// Set bubble container size based on the class
|
|
148
|
+
$bubble_container_size: $size_value;
|
|
149
|
+
$container_size: $size_value;
|
|
150
|
+
|
|
151
|
+
// Apply the bubble container size
|
|
152
|
+
@include avatar-size($bubble_container_size);
|
|
153
|
+
width: $bubble_container_size;
|
|
154
|
+
height: $bubble_container_size;
|
|
155
|
+
flex-basis: $bubble_container_size;
|
|
156
|
+
|
|
157
|
+
background-color: $bg_light;
|
|
158
|
+
border-radius: 50%;
|
|
159
|
+
|
|
160
|
+
&.dark {
|
|
161
|
+
background-color: $card_dark;
|
|
99
162
|
}
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
@include
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
163
|
+
|
|
164
|
+
[class^=pb_avatar_kit].pb_multiple_users_stacked_item {
|
|
165
|
+
@include avatar-size($bubble_container_size * 0.45); // Adjust the size of stacked avatars
|
|
166
|
+
|
|
167
|
+
&.dark {
|
|
168
|
+
.avatar_wrapper {
|
|
169
|
+
border: $border_size solid $border_dark;
|
|
170
|
+
}
|
|
171
|
+
}
|
|
172
|
+
|
|
173
|
+
.avatar_wrapper {
|
|
174
|
+
border: $border_size solid $white;
|
|
175
|
+
}
|
|
113
176
|
}
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
177
|
+
|
|
178
|
+
[class^=pb_avatar_kit] {
|
|
179
|
+
// First Item
|
|
180
|
+
&.first_item {
|
|
181
|
+
@include position(map-get(map-get($positions, 'first-item-double'), $size_name));
|
|
182
|
+
@include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
|
|
183
|
+
|
|
184
|
+
&.double_bubble {
|
|
185
|
+
@include position(map-get(map-get($positions, 'first-item-double'), $size_name));
|
|
186
|
+
@include avatar-size(map-get(map-get($sizes, 'first-item-double'), $size_name));
|
|
187
|
+
}
|
|
188
|
+
|
|
189
|
+
&.triple_bubble {
|
|
190
|
+
@include position(map-get(map-get($positions, 'first-item-triple'), $size_name));
|
|
191
|
+
@include avatar-size(map-get(map-get($sizes, 'first-item-triple'), $size_name));
|
|
192
|
+
}
|
|
193
|
+
|
|
194
|
+
&.quadruple_bubble {
|
|
195
|
+
@include position(map-get(map-get($positions, 'first-item-quadruple'), $size_name));
|
|
196
|
+
@include avatar-size(map-get(map-get($sizes, 'first-item-quadruple'), $size_name));
|
|
197
|
+
}
|
|
198
|
+
}
|
|
199
|
+
|
|
200
|
+
// Second Item
|
|
201
|
+
&.second_item {
|
|
202
|
+
@include position(map-get(map-get($positions, 'second-item-double'), $size_name));
|
|
203
|
+
|
|
204
|
+
&.double_bubble {
|
|
205
|
+
@include position(map-get(map-get($positions, 'second-item-double'), $size_name));
|
|
206
|
+
@include avatar-size(map-get(map-get($sizes, 'second-item-double'), $size_name));
|
|
207
|
+
}
|
|
208
|
+
|
|
209
|
+
&.triple_bubble {
|
|
210
|
+
@include position(map-get(map-get($positions, 'second-item-triple'), $size_name));
|
|
211
|
+
@include avatar-size(map-get(map-get($sizes, 'second-item-triple'), $size_name));
|
|
212
|
+
}
|
|
213
|
+
|
|
214
|
+
&.quadruple_bubble {
|
|
215
|
+
@include position(map-get(map-get($positions, 'second-item-quadruple'), $size_name));
|
|
216
|
+
@include avatar-size(map-get(map-get($sizes, 'second-item-quadruple'), $size_name));
|
|
217
|
+
}
|
|
218
|
+
}
|
|
219
|
+
|
|
220
|
+
// Third Item
|
|
221
|
+
&.third_item {
|
|
222
|
+
@include position(map-get(map-get($positions, 'third-item-triple'), $size_name));
|
|
223
|
+
@include avatar-size(map-get(map-get($sizes, 'third-item-triple'), $size_name));
|
|
224
|
+
|
|
225
|
+
&.quadruple_bubble {
|
|
226
|
+
@include position(map-get(map-get($positions, 'third-item-quadruple'), $size_name));
|
|
227
|
+
@include avatar-size(map-get(map-get($sizes, 'third-item-quadruple'), $size_name));
|
|
228
|
+
}
|
|
229
|
+
}
|
|
230
|
+
|
|
231
|
+
// Fourth Item
|
|
232
|
+
&.fourth_item {
|
|
233
|
+
@include position(map-get(map-get($positions, 'fourth-item'), $size_name));
|
|
234
|
+
@include avatar-size(map-get(map-get($sizes, 'fourth-item'), $size_name));
|
|
235
|
+
}
|
|
117
236
|
}
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
&.quadruple_bubble {
|
|
125
|
-
@include position((bottom: 3px, left: 9px));
|
|
237
|
+
|
|
238
|
+
&[class*=_single_bubble] {
|
|
239
|
+
[class^=pb_avatar_kit].first_item {
|
|
240
|
+
@include position((top: 0, left: 0));
|
|
241
|
+
@include avatar-size($bubble_container_size);
|
|
242
|
+
}
|
|
126
243
|
}
|
|
127
244
|
}
|
|
128
|
-
|
|
129
|
-
&.fourth_item {
|
|
130
|
-
@include position((top: 5px, right: 6px));
|
|
131
|
-
@include avatar-size(8px);
|
|
132
|
-
}
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
|
|
136
|
-
&[class*=_single_bubble] {
|
|
137
|
-
[class^=pb_avatar_kit].first_item {
|
|
138
|
-
@include position((top: 0, left: 0));
|
|
139
|
-
@include avatar-size($bubble_container_size);
|
|
140
245
|
}
|
|
141
246
|
}
|
|
142
|
-
}
|