playbook_ui 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899 → 13.27.0.pre.alpha.PLAY1122fixMultipleUserspaddingoverflow2844

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.
Files changed (48) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +0 -16
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +0 -16
  4. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_avatar/avatar.rb +0 -4
  6. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +0 -47
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +66 -46
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +29 -8
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +33 -13
  10. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +67 -48
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +20 -0
  12. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  13. data/app/pb_kits/playbook/pb_body/_body.scss +0 -3
  14. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +1 -1
  15. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -3
  16. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
  17. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -5
  18. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  19. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +0 -20
  20. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +1 -41
  21. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  22. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  23. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  24. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  25. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +1 -1
  26. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +3 -3
  27. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -2
  28. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +2 -4
  29. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  30. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  35. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +0 -1
  36. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -1
  37. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_dropdown/index.js +1 -2
  39. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +2 -4
  40. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +0 -15
  41. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
  42. data/app/pb_kits/playbook/pb_title/_title.scss +1 -5
  43. data/app/pb_kits/playbook/tokens/_titles.scss +1 -5
  44. data/dist/playbook-rails.js +2 -2
  45. data/lib/playbook/version.rb +1 -1
  46. metadata +2 -4
  47. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +0 -3
  48. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +0 -3
data/app/pb_kits/playbook/pb_card/card.rb CHANGED
@@ -15,7 +15,7 @@ module Playbook
15
15
  values: %w[xs sm md lg xl none rounded],
16
16
  default: "md"
17
17
  prop :background, type: Playbook::Props::Enum,
18
- values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none success_subtle warning_subtle error_subtle info_subtle neutral_subtle],
18
+ values: %w[white light dark product_1_background product_1_highlight product_2_background product_2_highlight product_3_background product_3_highlight product_4_background product_4_highlight product_5_background product_5_highlight product_6_background product_6_highlight product_7_background product_7_highlight product_8_background product_8_highlight product_9_background product_9_highlight product_10_background product_10_highlight windows siding doors solar roofing gutters insulation none],
19
19
  default: "none"
20
20
 
21
21
  def classname
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -42,23 +42,3 @@
42
42
  dark: true
43
43
  }) %>
44
44
  <% end %>
45
-
46
- <%= pb_rails("title", props: { text: "Subtle Status Colors", tag: "h4", size: 4, margin_bottom: "sm" }) %>
47
-
48
- <%= pb_rails("card", props: { background: "success_subtle", margin_bottom: "sm" }) do %>
49
- <%= pb_rails("body", props: {
50
- text: "Success Subtle"
51
- }) %>
52
- <% end %>
53
-
54
- <%= pb_rails("card", props: { background: "warning_subtle", margin_bottom: "sm" }) do %>
55
- <%= pb_rails("body", props: {
56
- text: "Warning Subtle"
57
- }) %>
58
- <% end %>
59
-
60
- <%= pb_rails("card", props: { background: "info_subtle", margin_bottom: "sm" }) do %>
61
- <%= pb_rails("body", props: {
62
- text: "Info Subtle"
63
- }) %>
64
- <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx CHANGED
@@ -90,47 +90,7 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
94
- <Title
95
- {...props}
96
- marginBottom="sm"
97
- size={4}
98
- tag="h4"
99
- text="Subtle Status Colors"
100
- />
101
-
102
- <Card
103
- background="success_subtle"
104
- marginBottom="sm"
105
- {...props}
106
- >
107
- <Body
108
- text="Success Subtle"
109
- {...props}
110
- />
111
- </Card>
112
-
113
- <Card
114
- background="warning_subtle"
115
- marginBottom="sm"
116
- {...props}
117
- >
118
- <Body
119
- text="Warning Subtle"
120
- {...props}
121
- />
122
- </Card>
123
-
124
- <Card
125
- background="info_subtle"
126
- marginBottom="sm"
127
- {...props}
128
- >
129
- <Body
130
- text="Info Subtle"
131
- {...props}
132
- />
133
- </Card>
93
+
134
94
  </div>
135
95
  )
136
96
  }
data/app/pb_kits/playbook/pb_card/docs/_card_background.md CHANGED
@@ -1 +1 @@
1
- Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors and Status: Subtle Variations.
1
+ Add a background color by passing the color name to background. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines" target="_blank">here</a> under Product Colors.
data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb CHANGED
@@ -67,4 +67,4 @@
67
67
  <%= pb_rails("card/card_body", props: { padding: "md", }) do %>
68
68
  Body
69
69
  <% end %>
70
- <% end %>
70
+ <% end %>
data/app/pb_kits/playbook/pb_card/docs/_card_header.md CHANGED
@@ -1 +1 @@
1
- Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
1
+ Card headers pass category, product, and background colors only. List of all category, product, and background colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md CHANGED
@@ -1 +1 @@
1
- Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">here</a>.
1
+ Card highlight can pass status, product, and category colors. List of all colors can be viewed <a href="https://playbook.powerapp.cloud/utilities" target="_blank">here</a>.
data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss CHANGED
@@ -15,7 +15,7 @@ $pb_dark_detail_colors: (
15
15
  light: $text_dk_light,
16
16
  default: $text_dk_default,
17
17
  lighter: $text_dk_lighter,
18
- link: $active_dark,
18
+ link: $primary,
19
19
  error: $error_dark,
20
20
  success: $text_dk_success_sm,
21
21
  );
data/app/pb_kits/playbook/pb_docs/kit_example.html.erb CHANGED
@@ -23,11 +23,11 @@
23
23
  <ul>
24
24
  <% hide_button = type == "rails" ? 'flex' : 'none' %>
25
25
  <li>
26
- <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", classname: dark ? "dark" : "", variant: "link", size: "sm", display: hide_button }) %>
26
+ <%= pb_rails("button", props: { id:"copy-html-#{example_key}", icon: "copy", text: "Copy HTML", variant: "link", size: "sm", display: hide_button }) %>
27
27
  </li>
28
28
  <li>
29
- <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
- <%= pb_rails("button", props: { icon: "code", classname: dark ? "dark" : "", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
29
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-opened", text: "Close Code", variant: "link", size: "sm", display: "none" }) %>
30
+ <%= pb_rails("button", props: { icon: "code", id:"toggle-open-closed", text: "Show Code", variant: "link", size: "sm" }) %>
31
31
  </li>
32
32
  </ul>
33
33
  </div>
data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED
@@ -77,9 +77,8 @@
77
77
  }
78
78
  &[class*="selected"] {
79
79
  background-color: $primary;
80
- color: $white;
81
80
  [class^="pb_body"],
82
- [class^="pb_title_kit"], a {
81
+ [class^="pb_title_kit"] {
83
82
  color: $white !important;
84
83
  }
85
84
  &:hover {
data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED
@@ -114,10 +114,8 @@ const Dropdown = (props: DropdownProps) => {
114
114
  setIsDropDownClosed(isClosed)
115
115
  },[isClosed])
116
116
 
117
- const filteredOptions = options?.filter((option: GenericObject) => {
118
- const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
119
- return String(label).toLowerCase().includes(filterItem.toLowerCase());
120
- }
117
+ const filteredOptions = options?.filter((option: GenericObject) =>
118
+ option.label.toLowerCase().includes(filterItem.toLowerCase())
121
119
  );
122
120
 
123
121
  // For keyboard accessibility: Set focus within dropdown to selected item if it exists
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb CHANGED
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "us"
8
+ id: "United-states"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "ca"
15
+ id: "canada"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pk"
22
+ id: "pakistan"
23
23
  }
24
24
  ]
25
25
 
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb CHANGED
@@ -5,21 +5,21 @@
5
5
  value: "United States",
6
6
  areaCode: "+1",
7
7
  icon: "🇺🇸",
8
- id: "us"
8
+ id: "United-states"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "ca"
15
+ id: "canada"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pk"
22
+ id: "pakistan"
23
23
  }
24
24
  ]
25
25
 
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb CHANGED
@@ -1,8 +1,8 @@
1
1
  <%
2
2
  options = [
3
- { label: 'United States', value: 'United States', id: 'us' },
4
- { label: 'Canada', value: 'Canada', id: 'ca' },
5
- { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
3
+ { label: 'United States', value: 'United States' },
4
+ { label: 'Canada', value: 'Canada' },
5
+ { label: 'Pakistan', value: 'Pakistan' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb CHANGED
@@ -8,7 +8,6 @@
8
8
  <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
9
9
  <% end %>
10
10
  <div class="dropdown_wrapper" style="position: relative">
11
- <input type="hidden" name="<%= object.name %>" id="dropdown-selected-option" value=""/>
12
11
  <% if content.present? %>
13
12
  <%= content.presence %>
14
13
  <% else %>
data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED
@@ -6,7 +6,6 @@ module Playbook
6
6
  prop :options, type: Playbook::Props::Array,
7
7
  default: []
8
8
  prop :label, type: Playbook::Props::String
9
- prop :name, type: Playbook::Props::String
10
9
 
11
10
  def data
12
11
  Hash(prop(:data)).merge(pb_dropdown: true)
data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb CHANGED
@@ -2,7 +2,7 @@
2
2
  aria: object.aria,
3
3
  class: object.classname,
4
4
  data: object.data,
5
- id: object.option[:id],
5
+ id: object.id,
6
6
  **combined_html_options) do %>
7
7
  <%= pb_rails("list/item", props: {
8
8
  display: "flex",
data/app/pb_kits/playbook/pb_dropdown/index.js CHANGED
@@ -37,10 +37,8 @@ export default class PbDropdown extends PbEnhancedElement {
37
37
 
38
38
  handleOptionClick(event) {
39
39
  const option = event.target.closest(OPTION_SELECTOR);
40
- const hiddenInput = this.element.querySelector("#dropdown-selected-option");
41
40
  if (option) {
42
41
  const value = option.dataset.dropdownOptionLabel;
43
- hiddenInput.value = JSON.parse(value).id;
44
42
  this.onOptionSelected(value, option);
45
43
  }
46
44
  }
@@ -101,6 +99,7 @@ export default class PbDropdown extends PbEnhancedElement {
101
99
  option.classList.remove("pb_dropdown_option_selected");
102
100
  });
103
101
  selectedOption.classList.add("pb_dropdown_option_selected");
102
+ console.log(`Selected value: ${value}`);
104
103
  }
105
104
 
106
105
  get target() {
data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED
@@ -50,10 +50,8 @@ const DropdownOption = (props: DropdownOptionProps) => {
50
50
  selected,
51
51
  } = useContext(DropdownContext);
52
52
 
53
- const isItemMatchingFilter = (option: GenericObject) => {
54
- const label = typeof option.label === 'string' ? option.label.toLowerCase() : option.label;
55
- return String(label).toLowerCase().includes(filterItem.toLowerCase());
56
- }
53
+ const isItemMatchingFilter = (option: GenericObject) =>
54
+ option?.label.toLowerCase().includes(filterItem.toLowerCase());
57
55
 
58
56
  if (!isItemMatchingFilter(option)) {
59
57
  return null;
data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED
@@ -33,17 +33,6 @@
33
33
  outline-offset: -1px;
34
34
  }
35
35
  }
36
- .text_input_wrapper_add_on .add-on-right [class^=pb_card_kit] {
37
- border-bottom-right-radius: 0;
38
- border-top-right-radius: 0;
39
- border-right-width: 0;
40
- }
41
- .text_input_wrapper_add_on .add-on-right.border_left_on .card-right-aligned {
42
- border-left: 1px $border_light solid;
43
- &.dark {
44
- border-left: 1px rgba($white, 0.15) solid;
45
- }
46
- }
47
36
  }
48
37
 
49
38
  & > [class^=pb_text_input_kit]:not(:first-child) {
@@ -51,10 +40,6 @@
51
40
  border-bottom-left-radius: 0;
52
41
  border-top-left-radius: 0;
53
42
  }
54
- .text_input_wrapper_add_on .add-on-left [class^=pb_card_kit] {
55
- border-bottom-left-radius: 0;
56
- border-top-left-radius: 0;
57
- }
58
43
  }
59
44
 
60
45
  & > [class^=pb_button_kit]:not(:last-child) {
data/app/pb_kits/playbook/pb_pagination/_pagination.scss CHANGED
@@ -11,7 +11,7 @@ $top_bottom_radius: 0px;
11
11
  border-radius: $border_rad_light;
12
12
  border: $border_rad_lightest solid $border_light;
13
13
  background-color: $white;
14
- padding: $space_xxs 0px !important;
14
+ padding: $space_xxs 0px;
15
15
  li {
16
16
  display: inline;
17
17
  > a, li > span {
data/app/pb_kits/playbook/pb_title/_title.scss CHANGED
@@ -49,10 +49,6 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include pb_title_dark;
53
- }
54
-
55
- &.dark[class*=_link] {
56
- @include pb_title_dark_link;
52
+ @include pb_title_dark;
57
53
  }
58
54
  }
data/app/pb_kits/playbook/tokens/_titles.scss CHANGED
@@ -34,11 +34,7 @@
34
34
  }
35
35
 
36
36
  @mixin pb_title_dark {
37
- color: $text_dk_default;
38
- }
39
-
40
- @mixin pb_title_dark_link {
41
- color: $active_dark;
37
+ color: $text_dk_default;
42
38
  }
43
39
 
44
40
  @mixin pb_title_bold {