playbook_ui 12.38.0 → 12.39.0.pre.alpha.PLAY966collapsiblenav41115

Sign up to get free protection for your applications and to get access to all the features.
Files changed (49) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +6 -0
  3. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +3 -3
  4. data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +10 -9
  5. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +2 -2
  6. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.jsx +2 -2
  7. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.jsx +4 -8
  8. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_icons.md +1 -1
  9. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +5 -5
  10. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.jsx +75 -0
  11. data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_state.md +3 -0
  12. data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +7 -6
  13. data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -1
  14. data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +274 -17
  15. data/app/pb_kits/playbook/pb_nav/_horizontal_nav.scss +7 -1
  16. data/app/pb_kits/playbook/pb_nav/_item.tsx +232 -132
  17. data/app/pb_kits/playbook/pb_nav/_mixins.scss +14 -0
  18. data/app/pb_kits/playbook/pb_nav/_nav.tsx +17 -1
  19. data/app/pb_kits/playbook/pb_nav/_subtle_mixin.scss +6 -7
  20. data/app/pb_kits/playbook/pb_nav/_vertical_nav.scss +1 -1
  21. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.jsx +85 -58
  22. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav.md +1 -0
  23. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.jsx +58 -0
  24. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_custom.md +1 -0
  25. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.html.erb +23 -0
  26. data/app/pb_kits/playbook/pb_nav/docs/{_collapsible_nav_custom_icons.jsx → _collapsible_nav_emphasize.jsx} +14 -5
  27. data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_emphasize.md +1 -0
  28. data/app/pb_kits/playbook/pb_nav/docs/example.yml +5 -3
  29. data/app/pb_kits/playbook/pb_nav/docs/index.js +2 -1
  30. data/app/pb_kits/playbook/pb_nav/item.html.erb +20 -4
  31. data/app/pb_kits/playbook/pb_nav/item.rb +89 -3
  32. data/app/pb_kits/playbook/pb_nav/nav.html.erb +3 -1
  33. data/app/pb_kits/playbook/pb_nav/nav.rb +13 -0
  34. data/app/pb_kits/playbook/pb_nav/navTypes.ts +25 -0
  35. data/app/pb_kits/playbook/pb_select/_select.scss +76 -0
  36. data/app/pb_kits/playbook/pb_select/_select.tsx +9 -5
  37. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.html.erb +26 -0
  38. data/app/pb_kits/playbook/pb_select/docs/_select_attributes.md +1 -0
  39. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.html.erb +36 -0
  40. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.jsx +50 -0
  41. data/app/pb_kits/playbook/pb_select/docs/_select_multiple.md +1 -0
  42. data/app/pb_kits/playbook/pb_select/docs/example.yml +3 -0
  43. data/app/pb_kits/playbook/pb_select/docs/index.js +1 -0
  44. data/app/pb_kits/playbook/pb_select/select.html.erb +5 -9
  45. data/app/pb_kits/playbook/pb_select/select.rb +14 -0
  46. data/app/pb_kits/playbook/pb_select/select.test.js +17 -0
  47. data/dist/playbook-rails.js +2 -2
  48. data/lib/playbook/version.rb +2 -2
  49. metadata +22 -8
@@ -1,6 +1,6 @@
1
1
  <%= content_tag(:div,
2
- data: object.data,
3
2
  aria: object.aria,
3
+ data: object.data,
4
4
  class: object.classnames) do %>
5
5
  <% if object.label %>
6
6
  <label class="pb_select_kit_label" for="<%= object.name %>">
@@ -19,17 +19,13 @@
19
19
  selected: object.selected,
20
20
  disabled: object.disabled_options,
21
21
  ),
22
- id: object.id,
23
- prompt: object.blank_selection,
24
- disabled: object.disabled,
25
- required: object.required,
26
- multiple: object.multiple,
27
- onchange: object.onchange,
28
- include_blank: object.include_blank,
22
+ object.all_attributes
29
23
  )
30
24
  %>
31
25
  <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
32
26
  <% end %>
33
- <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
27
+ <% if object.multiple != true %>
28
+ <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
29
+ <% end %>
34
30
  </label>
35
31
  <% end %>
@@ -6,6 +6,8 @@ require "action_view"
6
6
  module Playbook
7
7
  module PbSelect
8
8
  class Select < Playbook::KitBase
9
+ prop :attributes, type: Playbook::Props::Hash,
10
+ default: {}
9
11
  prop :blank_selection
10
12
  prop :compact, type: Playbook::Props::Boolean, default: false
11
13
  prop :disabled, type: Playbook::Props::Boolean, default: false
@@ -23,6 +25,18 @@ module Playbook
23
25
  classname + inline_class + compact_class
24
26
  end
25
27
 
28
+ def all_attributes
29
+ {
30
+ id: id,
31
+ prompt: blank_selection,
32
+ disabled: disabled,
33
+ required: required,
34
+ multiple: multiple,
35
+ onchange: onchange,
36
+ include_blank: include_blank,
37
+ }.merge(attributes)
38
+ end
39
+
26
40
  def classname
27
41
  generate_classname("pb_select", select_margin_bottom, separator: " ")
28
42
  end
@@ -49,3 +49,20 @@ test('returns dark class name', () => {
49
49
  const kit = screen.getByTestId(testId)
50
50
  expect(kit).toHaveClass(`${kitClass} dark`)
51
51
  })
52
+
53
+ test('returns multiple variant', () => {
54
+ render(
55
+ <Select
56
+ data={{ testid: "selectMultiple" }}
57
+ label="Favorite Food"
58
+ multiple
59
+ name="food"
60
+ options={options}
61
+ />
62
+ )
63
+
64
+ const kit = screen.getByTestId("selectMultiple");
65
+ const selectElement = kit.querySelector('select');
66
+
67
+ expect(selectElement).toHaveAttribute('multiple', '');
68
+ });