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

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