playbook_ui 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4077 → 14.5.0.pre.alpha.PLAY1548intltelinputupdatelatest4175

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +25 -7
  3. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.jsx +72 -0
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell.md +5 -0
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +2 -0
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +1 -0
  7. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +20 -4
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +45 -0
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +1 -0
  10. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +1 -0
  11. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -0
  12. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  13. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  14. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +4 -2
  15. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +169 -65
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +15 -9
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +336 -0
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +97 -0
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +2 -0
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +1 -0
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +28 -6
  24. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +31 -1
  25. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.scss +19 -5
  26. data/dist/chunks/_weekday_stacked-PLi3twbe.js +45 -0
  27. data/dist/chunks/vendor.js +1 -1
  28. data/dist/playbook-doc.js +1 -1
  29. data/dist/playbook.css +1 -1
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +9 -3
  32. data/dist/chunks/_weekday_stacked-BbASNHK_.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: d42f1110a8a20f8551570f0838a04c79c4101cd23e99dcfd4de572eae0311937
4
- data.tar.gz: ac930a9c82feef01f65ed6e7a75a99dee87d543953c29a7c95627edb359d6e57
3
+ metadata.gz: ac3a7f34f18dec19abc8d9a9b989a8267bd5c454ebc7332e28ee7f29ed6cd59b
4
+ data.tar.gz: 7f1896e362d73d4741359400df42897b8778f539eb671789f3969f94dd201033
5
5
  SHA512:
6
- metadata.gz: 127549a61089ed9a07131d295dd1b2ae709b305f9088fd8ce8020bb4abcf524da905da22d6404d9d458cc271a2f58456559d031554831fe2a3ea8acbaa71133a
7
- data.tar.gz: 91e89aaa949bda7c4cd680737dd78d977a88d69af7bebdc5da2f4fd296da84be60746d178e7f9712a3042866c9d21f146fd5f5a1ee3bbc1a47bfb5968bb62851
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
- if (column.cellAccessors) {
145
- columnStructure.cell = createCellFunction(column.cellAccessors)
146
- }
147
- return columnStructure
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
- const Dropdown = (props: DropdownProps) => {
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'
@@ -62,7 +62,7 @@ const DropdownOption = (props: DropdownOptionProps) => {
62
62
  const focusedClass = isFocused && "focused";
63
63
 
64
64
  const selectedClass = `${
65
- selected.label === option.label
65
+ selected?.label === option.label
66
66
  ? "selected"
67
67
  : "list"
68
68
  }`;
@@ -73,7 +73,7 @@ const DropdownTrigger = (props: DropdownTriggerProps) => {
73
73
  !autocomplete && "select_only"
74
74
  );
75
75
 
76
- const customDisplayPlaceholder = selected.label ? (
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.label
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()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={1}
81
+ results={0}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -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: $container_size;
31
- height: $container_size;
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($container_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
- &[class*=_bubble] {
75
- @include avatar-size($bubble_container_size);
76
- background-color: $bg_light;
77
- border-radius: 50%;
78
-
79
- &.dark {
80
- background-color: $card_dark;
81
- }
82
-
83
- [class^=pb_avatar_kit].pb_multiple_users_stacked_item {
84
- &.dark {
85
- .avatar_wrapper {
86
- border: $border_size solid $border_dark;
87
- }
88
- }
89
- }
90
-
91
- [class^=pb_avatar_kit] {
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
- &.quadruple_bubble {
102
- @include position((top: 5px, left: 3px));
103
- @include avatar-size(16px);
104
- }
105
- }
106
-
107
- &.second_item {
108
- @include position((bottom: 5px, right: 4px));
109
- @include avatar-size(12px);
110
-
111
- &.triple_bubble {
112
- @include position((top: 13px, right: 2px));
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
- &.quadruple_bubble {
116
- @include position((bottom: 9px, right: 4px));
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
- &.third_item {
121
- @include position((bottom: 3px, left: 11px));
122
- @include avatar-size(10px);
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
- }