playbook_ui 13.27.0.pre.alpha.PBNTR48phonenumberform2852 → 13.27.0.pre.alpha.PBNTR294paginationstylingfix2899

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 (53) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_avatar/Utilities/GetPlacementPropsHelper.tsx +16 -0
  3. data/app/pb_kits/playbook/pb_avatar/_avatar.scss +16 -0
  4. data/app/pb_kits/playbook/pb_avatar/avatar.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_avatar/avatar.rb +4 -0
  6. data/app/pb_kits/playbook/pb_avatar/avatar.test.js +47 -0
  7. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.html.erb +46 -66
  8. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.jsx +8 -29
  9. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_badge_component_overlay.md +3 -0
  10. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.html.erb +13 -33
  11. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.jsx +48 -67
  12. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_circle_icon_component_overlay.md +3 -0
  13. data/app/pb_kits/playbook/pb_avatar/docs/_avatar_default.jsx +0 -20
  14. data/app/pb_kits/playbook/pb_avatar/docs/example.yml +2 -2
  15. data/app/pb_kits/playbook/pb_body/_body.scss +3 -0
  16. data/app/pb_kits/playbook/pb_body/_body_mixins.scss +1 -1
  17. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +3 -3
  18. data/app/pb_kits/playbook/pb_caption/_caption_mixin.scss +1 -1
  19. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +5 -0
  20. data/app/pb_kits/playbook/pb_card/card.rb +1 -1
  21. data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb +20 -0
  22. data/app/pb_kits/playbook/pb_card/docs/_card_background.jsx +41 -1
  23. data/app/pb_kits/playbook/pb_card/docs/_card_background.md +1 -1
  24. data/app/pb_kits/playbook/pb_card/docs/_card_header.html.erb +1 -1
  25. data/app/pb_kits/playbook/pb_card/docs/_card_header.md +1 -1
  26. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.md +1 -1
  27. data/app/pb_kits/playbook/pb_detail/_detail_mixins.scss +1 -1
  28. data/app/pb_kits/playbook/pb_docs/kit_example.html.erb +3 -3
  29. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +2 -1
  30. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +4 -2
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +3 -3
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +3 -3
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +3 -3
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +3 -3
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +3 -3
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +3 -3
  37. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +1 -0
  38. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +1 -0
  39. data/app/pb_kits/playbook/pb_dropdown/dropdown_option.html.erb +1 -1
  40. data/app/pb_kits/playbook/pb_dropdown/index.js +2 -1
  41. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +4 -2
  42. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  43. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  44. data/app/pb_kits/playbook/pb_form_group/_form_group.scss +15 -0
  45. data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss +8 -0
  46. data/app/pb_kits/playbook/pb_pagination/_pagination.scss +1 -1
  47. data/app/pb_kits/playbook/pb_title/_title.scss +5 -1
  48. data/app/pb_kits/playbook/tokens/_titles.scss +5 -1
  49. data/dist/playbook-rails.js +2 -2
  50. data/lib/playbook/forms/builder.rb +0 -1
  51. data/lib/playbook/version.rb +1 -1
  52. metadata +4 -3
  53. data/lib/playbook/forms/builder/phone_number_field.rb +0 -12
data/app/pb_kits/playbook/pb_card/_card_mixin.scss CHANGED
@@ -17,6 +17,11 @@ $additional_colors: (
17
17
  "light": $bg_light,
18
18
  "white": $white,
19
19
  "none": none,
20
+ "success_subtle": $success_subtle,
21
+ "warning_subtle": $warning_subtle,
22
+ "error_subtle": $error_subtle,
23
+ "info_subtle": $info_subtle,
24
+ "neutral_subtle": $neutral_subtle,
20
25
  );
21
26
  $background_colors: map-merge($product_colors, $additional_colors);
22
27
  $pb_card_header_colors: map-merge(map-merge($product_colors, $additional_colors), $category_colors);
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],
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],
19
19
  default: "none"
20
20
 
21
21
  def classname
data/app/pb_kits/playbook/pb_card/docs/_card_background.html.erb CHANGED
@@ -42,3 +42,23 @@
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,7 +90,47 @@ const CardBackground = (props) => {
90
90
  />
91
91
  </Card>
92
92
 
93
-
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>
94
134
  </div>
95
135
  )
96
136
  }
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.
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.
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/utilities" 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/visual_guidelines/colors" 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/utilities" 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/visual_guidelines/colors" 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: $primary,
18
+ link: $active_dark,
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", variant: "link", size: "sm", display: hide_button }) %>
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 }) %>
27
27
  </li>
28
28
  <li>
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" }) %>
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" }) %>
31
31
  </li>
32
32
  </ul>
33
33
  </div>
data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss CHANGED
@@ -77,8 +77,9 @@
77
77
  }
78
78
  &[class*="selected"] {
79
79
  background-color: $primary;
80
+ color: $white;
80
81
  [class^="pb_body"],
81
- [class^="pb_title_kit"] {
82
+ [class^="pb_title_kit"], a {
82
83
  color: $white !important;
83
84
  }
84
85
  &:hover {
data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx CHANGED
@@ -114,8 +114,10 @@ const Dropdown = (props: DropdownProps) => {
114
114
  setIsDropDownClosed(isClosed)
115
115
  },[isClosed])
116
116
 
117
- const filteredOptions = options?.filter((option: GenericObject) =>
118
- option.label.toLowerCase().includes(filterItem.toLowerCase())
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
+ }
119
121
  );
120
122
 
121
123
  // 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' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
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' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
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: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
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' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
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: "United-states"
8
+ id: "us"
9
9
  },
10
10
  {
11
11
  label: "Canada",
12
12
  value: "Canada",
13
13
  areaCode: "+1",
14
14
  icon: "🇨🇦",
15
- id: "canada"
15
+ id: "ca"
16
16
  },
17
17
  {
18
18
  label: "Pakistan",
19
19
  value: "Pakistan",
20
20
  areaCode: "+92",
21
21
  icon: "🇵🇰",
22
- id: "pakistan"
22
+ id: "pk"
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' },
4
- { label: 'Canada', value: 'Canada' },
5
- { label: 'Pakistan', value: 'Pakistan' },
3
+ { label: 'United States', value: 'United States', id: 'us' },
4
+ { label: 'Canada', value: 'Canada', id: 'ca' },
5
+ { label: 'Pakistan', value: 'Pakistan', id: 'pk' },
6
6
  ]
7
7
 
8
8
  %>
data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb CHANGED
@@ -8,6 +8,7 @@
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=""/>
11
12
  <% if content.present? %>
12
13
  <%= content.presence %>
13
14
  <% else %>
data/app/pb_kits/playbook/pb_dropdown/dropdown.rb CHANGED
@@ -6,6 +6,7 @@ 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
9
10
 
10
11
  def data
11
12
  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.id,
5
+ id: object.option[: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,8 +37,10 @@ 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");
40
41
  if (option) {
41
42
  const value = option.dataset.dropdownOptionLabel;
43
+ hiddenInput.value = JSON.parse(value).id;
42
44
  this.onOptionSelected(value, option);
43
45
  }
44
46
  }
@@ -99,7 +101,6 @@ export default class PbDropdown extends PbEnhancedElement {
99
101
  option.classList.remove("pb_dropdown_option_selected");
100
102
  });
101
103
  selectedOption.classList.add("pb_dropdown_option_selected");
102
- console.log(`Selected value: ${value}`);
103
104
  }
104
105
 
105
106
  get target() {
data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx CHANGED
@@ -50,8 +50,10 @@ const DropdownOption = (props: DropdownOptionProps) => {
50
50
  selected,
51
51
  } = useContext(DropdownContext);
52
52
 
53
- const isItemMatchingFilter = (option: GenericObject) =>
54
- option?.label.toLowerCase().includes(filterItem.toLowerCase());
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
+ }
55
57
 
56
58
  if (!isItemMatchingFilter(option)) {
57
59
  return null;
data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb CHANGED
@@ -16,7 +16,7 @@
16
16
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
17
17
  <%= form.typeahead :example_user, props: { data: { typeahead_example1: true, user: {} }, placeholder: "Search for a user" } %>
18
18
  <%= form.text_field :example_text_field, props: { label: true } %>
19
- <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
19
+ <%= form.telephone_field :example_phone_field, props: { label: true } %>
20
20
  <%= form.email_field :example_email_field, props: { label: true } %>
21
21
  <%= form.number_field :example_number_field, props: { label: true } %>
22
22
  <%= form.search_field :example_search_field, props: { label: true } %>
data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb CHANGED
@@ -15,7 +15,7 @@
15
15
 
16
16
  <%= pb_form_with(scope: :example, method: :get, url: "", validate: true) do |form| %>
17
17
  <%= form.text_field :example_text_field, props: { label: true, required: true } %>
18
- <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field" } %>
18
+ <%= form.telephone_field :example_phone_field, props: { label: true, required: true, validation: { pattern: "[0-9]{3}-[0-9]{3}-[0-9]{4}", message: "Please enter a valid phone number (example: 888-888-8888)." } } %>
19
19
  <%= form.email_field :example_email_field, props: { label: true, required: true } %>
20
20
  <%= form.number_field :example_number_field, props: { label: true, required: true } %>
21
21
  <%= form.search_field :example_project_number, props: { label: true, required: true, validation: { pattern: "[0-9]{2}-[0-9]{5}", message: "Please enter a valid project number (example: 33-12345)." } } %>
data/app/pb_kits/playbook/pb_form_group/_form_group.scss CHANGED
@@ -33,6 +33,17 @@
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
+ }
36
47
  }
37
48
 
38
49
  & > [class^=pb_text_input_kit]:not(:first-child) {
@@ -40,6 +51,10 @@
40
51
  border-bottom-left-radius: 0;
41
52
  border-top-left-radius: 0;
42
53
  }
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
+ }
43
58
  }
44
59
 
45
60
  & > [class^=pb_button_kit]:not(:last-child) {
data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.scss CHANGED
@@ -35,6 +35,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
35
35
  margin-left: $pb_multiple_users_overlap;
36
36
  margin-right: 0;
37
37
 
38
+ &:first-of-type {
39
+ margin-left: 0;
40
+ }
41
+
38
42
  &.dark {
39
43
  .avatar_wrapper {
40
44
  border: $pb_multiple_users_border_size solid $bg_dark;
@@ -58,6 +62,10 @@ $pb_multiple_users_size_xxs: map-get($avatar-sizes, "xxs");
58
62
  .pb_multiple_users_item {
59
63
  margin-left: 0;
60
64
  margin-right: $pb_multiple_users_overlap;
65
+
66
+ &:first-of-type {
67
+ margin-right: 0;
68
+ }
61
69
  }
62
70
  }
63
71
  }
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;
14
+ padding: $space_xxs 0px !important;
15
15
  li {
16
16
  display: inline;
17
17
  > a, li > span {
data/app/pb_kits/playbook/pb_title/_title.scss CHANGED
@@ -49,6 +49,10 @@
49
49
  }
50
50
 
51
51
  &.dark {
52
- @include pb_title_dark;
52
+ @include pb_title_dark;
53
+ }
54
+
55
+ &.dark[class*=_link] {
56
+ @include pb_title_dark_link;
53
57
  }
54
58
  }
data/app/pb_kits/playbook/tokens/_titles.scss CHANGED
@@ -34,7 +34,11 @@
34
34
  }
35
35
 
36
36
  @mixin pb_title_dark {
37
- color: $text_dk_default;
37
+ color: $text_dk_default;
38
+ }
39
+
40
+ @mixin pb_title_dark_link {
41
+ color: $active_dark;
38
42
  }
39
43
 
40
44
  @mixin pb_title_bold {