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

Sign up to get free protection for your applications and to get access to all the features.
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 {