playbook_ui 14.5.0.pre.alpha.PLAY1601updatereactzoompanpinch4128 → 14.5.0.pre.alpha.PLAY15814040

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
  3. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +5 -1
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -20
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -1
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +2 -2
  9. data/app/pb_kits/playbook/pb_filter/Filter/ResultsCount.tsx +2 -4
  10. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_flex/_flex.tsx +3 -1
  12. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +8 -2
  13. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +3 -6
  14. data/app/pb_kits/playbook/pb_flex/flex_item.rb +5 -2
  15. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +0 -17
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -1
  17. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.scss +65 -169
  18. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.test.js +5 -5
  19. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +9 -15
  20. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +0 -2
  21. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/index.js +0 -1
  22. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.html.erb +6 -28
  23. data/app/pb_kits/playbook/pb_multiple_users_stacked/multiple_users_stacked.rb +1 -31
  24. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  25. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +3 -0
  26. data/app/pb_kits/playbook/utilities/globalProps.ts +39 -2
  27. data/dist/chunks/_typeahead-D8vYsn7T.js +22 -0
  28. data/dist/chunks/_weekday_stacked-CaNCkN7U.js +45 -0
  29. data/dist/chunks/vendor.js +1 -1
  30. data/dist/playbook-doc.js +1 -1
  31. data/dist/playbook-rails-react-bindings.js +1 -1
  32. data/dist/playbook-rails.js +1 -1
  33. data/dist/playbook.css +1 -1
  34. data/lib/playbook/kit_base.rb +17 -0
  35. data/lib/playbook/version.rb +1 -1
  36. metadata +4 -10
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.jsx +0 -45
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_clear_selection.md +0 -1
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.html.erb +0 -93
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_reset.md +0 -1
  41. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.html.erb +0 -336
  42. data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_size.jsx +0 -97
  43. data/dist/chunks/_typeahead-C9g4qCcE.js +0 -22
  44. data/dist/chunks/_weekday_stacked-BcMzYSwZ.js +0 -45
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 76988afb9fc8fff6b8b04603b0da780fdde8094b01d3050b3eaadf44ff4e9684
4
- data.tar.gz: c0eba48e55929baac3119694fcba69ec15f9bc31e24951ba6db7822088a14839
3
+ metadata.gz: a67ca5956ad8fb6abcfb9e5c95242c2ffd782f3f26ae0e9e49585d0d598bb139
4
+ data.tar.gz: edf1cfe77da72b9312f7f83334608744aa60b59687315f3aef6d0c7f7788a52d
5
5
  SHA512:
6
- metadata.gz: a50e810670aa41ef4847e075ebb594f14d6a5ddfc478a61074c9112a73c60e18798d38df53ebe370a32665a350e08e19e320d4482ed0db350c62c886de18df70
7
- data.tar.gz: 9ddc4e0f0ca53de4a367829ebd378bed31dc1baff63179f2b1801233ee57b93b47683acb3652650451bd6f44d51f73845171ac6856be9c9241ed0c7ea6b2a1d1
6
+ metadata.gz: 997a3aa11b0d1861e2f9e28fddadbf8b3f2e442b010d9439b168d2005d51153e543a4300bcb3ffb9e9c857b2ccc3041371c7a41f4ebf070982b2a91550e90df2
7
+ data.tar.gz: cd4ac6d1734f9aa82d47fe091cfdb67abdf22f92f613d3ce62e69481a78661ae8998657717feec7447392b3a514b56951d070d90266e53674dd9c0bfefde8252
@@ -5,7 +5,7 @@ import { get } from 'lodash'
5
5
  import classnames from 'classnames'
6
6
 
7
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
8
- import { GlobalProps, globalProps } from '../utilities/globalProps'
8
+ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
9
9
  import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
10
10
 
11
11
  import Icon from '../pb_icon/_icon'
@@ -49,6 +49,7 @@ type CardBodyProps = {
49
49
  padding?: string,
50
50
  } & GlobalProps
51
51
 
52
+
52
53
  // Header component
53
54
  const Header = (props: CardHeaderProps) => {
54
55
  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
@@ -107,6 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
107
108
 
108
109
  // coerce to array
109
110
  const cardChildren = React.Children.toArray(children)
111
+ const inlineStyles = globalInlineProps(props);
110
112
 
111
113
  const subComponentTags = (tagName: string) => {
112
114
  return cardChildren.filter((c: string) => (
@@ -135,6 +137,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
135
137
  {...dataProps}
136
138
  {...htmlProps}
137
139
  className={classnames(cardCss, globalProps(props), className)}
140
+ style={inlineStyles}
138
141
  >
139
142
  {subComponentTags('Header')}
140
143
  {
@@ -163,6 +166,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
163
166
  {...dataProps}
164
167
  {...htmlProps}
165
168
  className={classnames(cardCss, globalProps(props), className)}
169
+ style={inlineStyles}
166
170
  >
167
171
  {subComponentTags('Header')}
168
172
  {nonHeaderChildren}
@@ -6,7 +6,7 @@ import classnames from "classnames";
6
6
  import Modal from "react-modal";
7
7
 
8
8
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
9
- import { globalProps } from "../utilities/globalProps";
9
+ import { globalProps, globalInlineProps } from "../utilities/globalProps";
10
10
 
11
11
  import Body from "../pb_body/_body";
12
12
  import Button from "../pb_button/_button";
@@ -91,6 +91,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
91
91
  beforeClose: "pb_dialog_overlay_before_close",
92
92
  };
93
93
 
94
+ const inlineStyles = globalInlineProps(props);
95
+
94
96
  const classes = classnames(
95
97
  buildCss("pb_dialog_wrapper"),
96
98
  globalProps(props),
@@ -184,6 +186,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
184
186
  overlayClassName={overlayClassNames}
185
187
  portalClassName={portalClassName}
186
188
  shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
189
+ style={{ content: inlineStyles }}
187
190
  >
188
191
  <>
189
192
  {title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
@@ -192,6 +195,7 @@ const Dialog = (props: DialogProps): React.ReactElement => {
192
195
  <Dialog.Body
193
196
  className="dialog_status_text_align"
194
197
  padding="md"
198
+
195
199
  >
196
200
  <Flex align="center"
197
201
  orientation="column"
@@ -1,4 +1,4 @@
1
- import React, { useState, useRef, useEffect, forwardRef, useImperativeHandle } from "react";
1
+ import React, { useState, useRef, useEffect } 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,14 +38,7 @@ type DropdownProps = {
38
38
  triggerRef?: any;
39
39
  };
40
40
 
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) => {
41
+ const Dropdown = (props: DropdownProps) => {
49
42
  const {
50
43
  aria = {},
51
44
  autocomplete = false,
@@ -132,7 +125,7 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
132
125
  const filteredOptions = optionsWithBlankSelection?.filter((option: GenericObject) => {
133
126
  const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
134
127
  return String(label).toLowerCase().includes(filterItem.toLowerCase());
135
- });
128
+ });
136
129
 
137
130
  // For keyboard accessibility: Set focus within dropdown to selected item if it exists
138
131
  useEffect(() => {
@@ -182,14 +175,6 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
182
175
  dark
183
176
  });
184
177
 
185
- useImperativeHandle(ref, () => ({
186
- clearSelected: () => {
187
- setSelected({});
188
- setFilterItem("");
189
- setIsDropDownClosed(true);
190
- onSelect && onSelect(null);
191
- },
192
- }));
193
178
 
194
179
  return (
195
180
  <div {...ariaProps}
@@ -273,9 +258,8 @@ const Dropdown = forwardRef((props: DropdownProps, ref: any) => {
273
258
  </DropdownContext.Provider>
274
259
  </div>
275
260
  )
276
- }) as DropdownComponent
261
+ };
277
262
 
278
- Dropdown.displayName = "Dropdown";
279
263
  Dropdown.Option = DropdownOption;
280
264
  Dropdown.Trigger = DropdownTrigger;
281
265
  Dropdown.Container = DropdownContainer;
@@ -22,7 +22,6 @@ 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
26
25
  # - dropdown_with_autocomplete: Autocomplete
27
26
  # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
28
27
  # - dropdown_with_external_control: useDropdown Hook
@@ -12,4 +12,3 @@ 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,7 +13,6 @@ type ResultsCountProps = {
13
13
  const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactElement => {
14
14
 
15
15
  const resultTitle = () => {
16
- if (results == null) return null
17
16
  return (
18
17
  <TitleCount
19
18
  align="center"
@@ -25,7 +24,6 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
25
24
  }
26
25
 
27
26
  const justResults = () => {
28
- if (results == null) return null
29
27
  return (
30
28
  <Caption
31
29
  className="filter-results"
@@ -37,13 +35,13 @@ const ResultsCount = ({ dark, results, title }: ResultsCountProps): React.ReactE
37
35
  }
38
36
 
39
37
  const displayResultsCount = () => {
40
- if (results != null && results >=0 && title) {
38
+ if (results && title) {
41
39
  return (
42
40
  <>
43
41
  {resultTitle()}
44
42
  </>
45
43
  )
46
- } else if (results !=null && results >=0 ) {
44
+ } else if (results) {
47
45
  return (
48
46
  <>
49
47
  {justResults()}
@@ -78,7 +78,7 @@ const FilterDefault = (props) => {
78
78
  double
79
79
  minWidth="375px"
80
80
  onSortChange={SortingChangeCallback}
81
- results={0}
81
+ results={1}
82
82
  sortOptions={{
83
83
  popularity: 'Popularity',
84
84
  // eslint-disable-next-line
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
4
- import { GlobalProps, globalProps } from '../utilities/globalProps'
4
+ import { GlobalProps, globalProps, globalInlineProps } from '../utilities/globalProps'
5
5
  import { GenericObject, Sizes } from '../types'
6
6
 
7
7
  type FlexProps = {
@@ -61,6 +61,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
61
61
  const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
62
62
  const dataProps = buildDataProps(data)
63
63
  const htmlProps = buildHtmlProps(htmlOptions)
64
+ const inlineStyles = globalInlineProps(props)
64
65
 
65
66
 
66
67
  return (
@@ -83,6 +84,7 @@ const Flex = (props: FlexProps): React.ReactElement => {
83
84
  globalProps(props),
84
85
  className
85
86
  )}
87
+ style={inlineStyles}
86
88
  {...dataProps}
87
89
  {...htmlProps}
88
90
  >
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import classnames from 'classnames'
3
3
  import { buildCss, buildHtmlProps } from '../utilities/props'
4
- import { globalProps, GlobalProps } from '../utilities/globalProps'
4
+ import { globalProps, GlobalProps, globalInlineProps} from '../utilities/globalProps'
5
5
  type FlexItemPropTypes = {
6
6
  children: React.ReactNode[] | React.ReactNode,
7
7
  fixedSize?: string,
@@ -35,14 +35,20 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
35
35
  const fixedStyle =
36
36
  fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
37
37
  const orderClass = order !== 'none' ? `order_${order}` : null
38
+ const inlineStyles = globalInlineProps(props)
39
+ const combinedStyles = {
40
+ ...fixedStyle,
41
+ ...inlineStyles
42
+ }
38
43
 
39
44
  const htmlProps = buildHtmlProps(htmlOptions)
40
45
 
46
+
41
47
  return (
42
48
  <div
43
49
  {...htmlProps}
44
50
  className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
45
- style={fixedStyle}
51
+ style={combinedStyles}
46
52
  >
47
53
  {children}
48
54
  </div>
@@ -1,8 +1,5 @@
1
- <%= content_tag(:div,
2
- id: object.id,
3
- data: object.data,
4
- class: object.classname,
5
- style: object.style_value,
6
- **combined_html_options) do %>
1
+ <%= pb_content_tag(:div,
2
+ style: object.inline_styles
3
+ ) do %>
7
4
  <%= content.presence %>
8
5
  <% end %>
@@ -20,8 +20,11 @@ module Playbook
20
20
  generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
21
21
  end
22
22
 
23
- def style_value
24
- "flex-basis: #{fixed_size};" if fixed_size.present?
23
+ def inline_styles
24
+ styles = []
25
+ styles << "flex-basis: #{fixed_size};" if fixed_size.present?
26
+ styles << "height: #{height};" if height.present?
27
+ styles.join(" ")
25
28
  end
26
29
 
27
30
  private
@@ -202,23 +202,6 @@ const MultiLevelSelect = (props: MultiLevelSelectProps) => {
202
202
  };
203
203
  }, []);
204
204
 
205
- useEffect(() => {
206
- if (id) {
207
- // Attach the clear function to the window, scoped by the id
208
- (window as any)[`clearMultiLevelSelect_${id}`] = () => {
209
- const resetData = modifyRecursive(formattedData, false);
210
- setFormattedData(resetData);
211
- setReturnedArray([]);
212
- setDefaultReturn([]);
213
- setSingleSelectedItem({ id: [], value: "", item: [] });
214
- onSelect([]);
215
- };
216
- return () => {
217
- delete (window as any)[`clearMultiLevelSelect_${id}`];
218
- };
219
- }
220
- }, [formattedData, id, onSelect]);
221
-
222
205
  // Iterate over tree, find item and set checked or unchecked
223
206
  const modifyValue = (
224
207
  id: string,
@@ -7,7 +7,6 @@ examples:
7
7
  - multi_level_select_selected_ids: Selected Ids
8
8
  - multi_level_select_with_form: With Form
9
9
  - multi_level_select_color: With Pills (Custom Color)
10
- - multi_level_select_reset: Reset Selection
11
10
 
12
11
  react:
13
12
  - multi_level_select_default: Default
@@ -3,76 +3,6 @@
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
-
76
6
  @mixin avatar-size($size) {
77
7
  height: $size;
78
8
  width: $size;
@@ -97,8 +27,8 @@ $positions: (
97
27
  $stacked_size: 18px;
98
28
  $max_to_display: 1, 2;
99
29
  display: inline-flex;
100
- width: 28px;
101
- height: 28px;
30
+ width: $container_size;
31
+ height: $container_size;
102
32
  flex-basis: $container_size;
103
33
  position: relative;
104
34
  flex-shrink: 0;
@@ -118,7 +48,7 @@ $positions: (
118
48
  }
119
49
  }
120
50
  &[class*=_single] .pb_multiple_users_stacked_item {
121
- @include avatar-size(28px);
51
+ @include avatar-size($container_size);
122
52
  }
123
53
  [class^=pb_avatar_kit].second_item, [class^=pb_badge_kit].second_item {
124
54
  @include position((bottom: 0, right: 0));
@@ -141,106 +71,72 @@ $positions: (
141
71
  color: transparent;
142
72
  }
143
73
 
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;
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);
162
99
  }
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
- }
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));
176
113
  }
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
- }
114
+
115
+ &.quadruple_bubble {
116
+ @include position((bottom: 9px, right: 4px));
236
117
  }
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
- }
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));
243
126
  }
244
127
  }
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);
245
140
  }
246
141
  }
142
+ }
@@ -81,7 +81,7 @@ const MultipleUsersStackedSingleBubble = () => {
81
81
  test('should have a single bubble', () => {
82
82
  render(<MultipleUsersStackedSingleBubble />)
83
83
  const kit = screen.getByTestId(testId)
84
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble_size_sm")
84
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_single_bubble")
85
85
 
86
86
  const firstItem = kit.querySelector('.first_item');
87
87
  expect(firstItem).toBeInTheDocument();
@@ -113,7 +113,7 @@ const MultipleUsersStackedDoubleBubble = () => {
113
113
  test('should have a double bubble', () => {
114
114
  render(<MultipleUsersStackedDoubleBubble />)
115
115
  const kit = screen.getByTestId(testId)
116
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
116
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
117
117
 
118
118
  const firstItem = kit.querySelector('.first_item');
119
119
  expect(firstItem).toBeInTheDocument();
@@ -153,7 +153,7 @@ const MultipleUsersStackedTripleBubble = () => {
153
153
  test('should have a triple bubble', () => {
154
154
  render(<MultipleUsersStackedTripleBubble />)
155
155
  const kit = screen.getByTestId(testId)
156
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
156
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
157
157
 
158
158
  const firstItem = kit.querySelector('.first_item');
159
159
  expect(firstItem).toBeInTheDocument();
@@ -208,7 +208,7 @@ const MultipleUsersStackedQuadrupleBubble = () => {
208
208
  test('should have a quadruple bubble', () => {
209
209
  render(<MultipleUsersStackedQuadrupleBubble />)
210
210
  const kit = screen.getByTestId(testId)
211
- expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble_size_sm")
211
+ expect(kit).toHaveClass("pb_multiple_users_stacked_kit_bubble")
212
212
 
213
213
  const firstItem = kit.querySelector('.first_item');
214
214
  expect(firstItem).toBeInTheDocument();
@@ -224,4 +224,4 @@ test('should have a quadruple bubble', () => {
224
224
 
225
225
  const fourthItem = kit.querySelector('.fourth_item');
226
226
  expect(fourthItem).toBeInTheDocument();
227
- })
227
+ })