playbook_ui 7.4.0.pre.alpha6 → 7.4.0.pre.test2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (88) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +3 -1
  3. data/app/pb_kits/playbook/data/menu.yml +2 -2
  4. data/app/pb_kits/playbook/index.js +2 -2
  5. data/app/pb_kits/playbook/pb_background/_background.html.erb +14 -0
  6. data/app/pb_kits/playbook/pb_background/_background.jsx +63 -0
  7. data/app/pb_kits/playbook/pb_background/_background.scss +35 -0
  8. data/app/pb_kits/playbook/pb_background/background.rb +35 -0
  9. data/app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb +3 -0
  10. data/app/pb_kits/playbook/pb_background/docs/_background_dark.jsx +13 -0
  11. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb +3 -0
  12. data/app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx +13 -0
  13. data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +13 -0
  14. data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +30 -0
  15. data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +3 -0
  16. data/app/pb_kits/playbook/pb_background/docs/_background_light.jsx +13 -0
  17. data/app/pb_kits/playbook/pb_background/docs/_background_white.html.erb +3 -0
  18. data/app/pb_kits/playbook/pb_background/docs/_background_white.jsx +14 -0
  19. data/app/pb_kits/playbook/pb_background/docs/_description.md +1 -0
  20. data/app/pb_kits/playbook/pb_background/docs/example.yml +15 -0
  21. data/app/pb_kits/playbook/pb_background/docs/index.js +6 -0
  22. data/app/pb_kits/playbook/pb_checkbox/_checkbox.html.erb +2 -3
  23. data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +1 -2
  24. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -4
  25. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_default.html.erb +2 -5
  26. data/app/pb_kits/playbook/pb_date/_date.html.erb +64 -8
  27. data/app/pb_kits/playbook/pb_date/_date.jsx +115 -66
  28. data/app/pb_kits/playbook/pb_date/_date.scss +30 -0
  29. data/app/pb_kits/playbook/pb_date/date.rb +20 -9
  30. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb +24 -0
  31. data/app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx +35 -0
  32. data/app/pb_kits/playbook/pb_date/docs/_date_default.html.erb +21 -6
  33. data/app/pb_kits/playbook/pb_date/docs/_date_default.jsx +43 -12
  34. data/app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb +27 -0
  35. data/app/pb_kits/playbook/pb_date/docs/_date_variants.jsx +43 -0
  36. data/app/pb_kits/playbook/pb_date/docs/example.yml +4 -0
  37. data/app/pb_kits/playbook/pb_date/docs/index.js +2 -0
  38. data/app/pb_kits/playbook/pb_date_picker/_date_picker.html.erb +19 -14
  39. data/app/pb_kits/playbook/pb_date_time/_date_time.html.erb +31 -0
  40. data/app/pb_kits/playbook/pb_date_time/_date_time.jsx +73 -0
  41. data/app/pb_kits/playbook/pb_date_time/_date_time.scss +26 -0
  42. data/app/pb_kits/playbook/pb_date_time/date_time.rb +29 -0
  43. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb +17 -0
  44. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx +35 -0
  45. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb +20 -0
  46. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx +38 -0
  47. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb +26 -0
  48. data/app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx +75 -0
  49. data/app/pb_kits/playbook/pb_date_time/docs/_description.md +1 -0
  50. data/app/pb_kits/playbook/pb_date_time/docs/example.yml +11 -0
  51. data/app/pb_kits/playbook/pb_date_time/docs/index.js +3 -0
  52. data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
  53. data/app/pb_kits/playbook/pb_flex/_flex.scss +4 -0
  54. data/app/pb_kits/playbook/pb_flex/flex.rb +1 -1
  55. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +52 -1
  56. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -1
  57. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +1 -1
  58. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +1 -1
  59. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +19 -1
  60. data/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +1 -1
  61. data/app/pb_kits/playbook/pb_list/_list.jsx +2 -9
  62. data/app/pb_kits/playbook/pb_progress_step/progress_step.rb +2 -2
  63. data/app/pb_kits/playbook/pb_radio/_radio.jsx +3 -0
  64. data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +46 -19
  65. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +46 -10
  66. data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_white.html.erb +4 -4
  67. data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -2
  68. data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +2 -0
  69. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx +19 -0
  70. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.html.erb +7 -1
  71. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills.md +10 -1
  72. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
  73. data/lib/playbook/version.rb +1 -1
  74. metadata +41 -20
  75. data/app/pb_kits/playbook/pb_selectable_list/_item.jsx +0 -90
  76. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb +0 -11
  77. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx +0 -47
  78. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss +0 -17
  79. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb +0 -18
  80. data/app/pb_kits/playbook/pb_selectable_list/docs/_description.md +0 -3
  81. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb +0 -30
  82. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx +0 -32
  83. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb +0 -30
  84. data/app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx +0 -32
  85. data/app/pb_kits/playbook/pb_selectable_list/docs/example.yml +0 -12
  86. data/app/pb_kits/playbook/pb_selectable_list/docs/index.js +0 -2
  87. data/app/pb_kits/playbook/pb_selectable_list/selectable_list.rb +0 -24
  88. data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +0 -28
@@ -1,6 +1,8 @@
1
1
  @import "../tokens/positioning";
2
2
  @import "../tokens/colors";
3
3
 
4
+ $tooltip_shadow: rgba(60, 106, 172, 0.18);
5
+
4
6
  @keyframes fadeIn {
5
7
  from {
6
8
  opacity: 0;
@@ -33,19 +35,8 @@
33
35
  &.flipped {
34
36
  margin-top: 15px;
35
37
  .arrow {
36
- top: -35%;
37
38
  border-color: transparent transparent $white transparent;
38
- }
39
- }
40
-
41
- &.react {
42
- .arrow {
43
- top: 78%;
44
- }
45
- &.flipped {
46
- .arrow {
47
- top: -8%;
48
- }
39
+ transform: rotate(180deg);
49
40
  }
50
41
  }
51
42
 
@@ -66,7 +57,7 @@
66
57
  z-index: $z_9;
67
58
  margin-bottom: $space_sm;
68
59
  background-color: $white;
69
- padding: $space_xs $space_sm $space_xs $space_sm;
60
+ padding: $space_xs $space_sm;
70
61
  box-shadow: $shadow_deeper;
71
62
  border-radius: $border_rad_light;
72
63
 
@@ -82,10 +73,6 @@
82
73
  .tooltip_tooltip{
83
74
  color: $white;
84
75
  background-color: rgba($black, $opacity_9);
85
-
86
-
87
- &.show {
88
- }
89
76
  .arrow {
90
77
  border-color: $black transparent transparent transparent;
91
78
  opacity: $opacity_9;
@@ -100,6 +87,46 @@
100
87
  }
101
88
  }
102
89
 
103
- .tooltip_tooltip.top {
104
- padding: ($space_xs - 3px) 0;
90
+ // Right
91
+ [class^="pb_tooltip_kit"] .tooltip_tooltip {
92
+
93
+ &[x-placement="right"] {
94
+ box-shadow: -8px 0 28px 0 $tooltip_shadow;
95
+ margin: 0 0 0 $space_sm;
96
+ .arrow {
97
+ left: -#{$space_xs};
98
+ margin-bottom: 0;
99
+ transform: rotate(90deg);
100
+ }
101
+ &.flipped .arrow {
102
+ transform: rotate(270deg);
103
+ }
104
+ }
105
+
106
+ &[x-placement="bottom"] {
107
+ box-shadow: 0 -12px 28px 0 $tooltip_shadow;
108
+ margin: $space_sm 0 0 0;
109
+ .arrow {
110
+ top: -18px;
111
+ margin-bottom: 0;
112
+ transform: rotate(180deg);
113
+ }
114
+ &.flipped .arrow {
115
+ transform: rotate(0deg);
116
+ }
117
+ }
118
+
119
+ &[x-placement="left"] {
120
+ box-shadow: 8px 0 28px 0 $tooltip_shadow;
121
+ margin: 0 $space_sm 0 0;
122
+ .arrow {
123
+ margin-bottom: 0;
124
+ right: -18px;
125
+ left: auto;
126
+ transform: rotate(270deg);
127
+ }
128
+ &.flipped .arrow {
129
+ transform: rotate(90deg);
130
+ }
131
+ }
105
132
  }
@@ -1,10 +1,46 @@
1
- <span id='regular-tooltip-2'>Hover over me.</span>
2
-
3
- <%= pb_rails("tooltip", props: {
4
- trigger_element_id: "regular-tooltip-2",
5
- tooltip_id: "tooltip-2",
6
- position: 'top',
7
- dark: true,
8
- }) do %>
9
- Whoa. I'm a tooltip.
10
- <% end %>
1
+ <%= pb_rails("flex", props: { horizontal: "center", orientation: "column" }) do %>
2
+ <%= pb_rails("flex/flex_item") do %>
3
+ <span id='regular-tooltip-1'>Hover here (Top)</span>
4
+
5
+ <%= pb_rails("tooltip", props: {
6
+ trigger_element_id: "regular-tooltip-1",
7
+ tooltip_id: "tooltip-1",
8
+ position: 'top'
9
+ }) do %>
10
+ Whoa. I'm a tooltip.
11
+ <% end %>
12
+ <% end %>
13
+
14
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
15
+ <span id='regular-tooltip-2'>Hover here (Bottom)</span>
16
+ <%= pb_rails("tooltip", props: {
17
+ trigger_element_id: "regular-tooltip-2",
18
+ tooltip_id: "tooltip-2",
19
+ position: 'bottom'
20
+ }) do %>
21
+ Whoa. I'm a tooltip.
22
+ <% end %>
23
+ <% end %>
24
+
25
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
26
+ <span id='regular-tooltip-3'>Hover here (Right)</span>
27
+ <%= pb_rails("tooltip", props: {
28
+ trigger_element_id: "regular-tooltip-3",
29
+ tooltip_id: "tooltip-3",
30
+ position: 'right'
31
+ }) do %>
32
+ Whoa. I'm a tooltip.
33
+ <% end %>
34
+ <% end %>
35
+
36
+ <%= pb_rails("flex/flex_item", props: {margin_top: "md"}) do %>
37
+ <span id='regular-tooltip-4'>Hover here (Left)</span>
38
+ <%= pb_rails("tooltip", props: {
39
+ trigger_element_id: "regular-tooltip-4",
40
+ tooltip_id: "tooltip-4",
41
+ position: 'left'
42
+ }) do %>
43
+ Whoa. I'm a tooltip.
44
+ <% end %>
45
+ <% end %>
46
+ <% end %>
@@ -1,9 +1,9 @@
1
- <span id='regular-tooltip-1'>I am a white tooltip.</span>
1
+ <span id='regular-tooltip-5'>I am a white tooltip.</span>
2
2
 
3
3
  <%= pb_rails("tooltip", props: {
4
- trigger_element_id: "regular-tooltip-1",
5
- tooltip_id: "tooltip-1",
4
+ trigger_element_id: "regular-tooltip-5",
5
+ tooltip_id: "tooltip-5",
6
6
  position: 'top'
7
7
  }) do %>
8
8
  Whoa. I'm a white tooltip.
9
- <% end %>
9
+ <% end %>
@@ -10,7 +10,7 @@ module Playbook
10
10
  prop :trigger_element_id
11
11
  prop :tooltip_id
12
12
  prop :dark, type: Playbook::Props::Boolean,
13
- default: false
13
+ default: false
14
14
 
15
15
  def classname
16
16
  generate_classname("pb_tooltip_kit", dark_class)
@@ -25,7 +25,8 @@ module Playbook
25
25
  )
26
26
  end
27
27
 
28
- private
28
+ private
29
+
29
30
  def dark_class
30
31
  dark ? "dark" : nil
31
32
  end
@@ -6,6 +6,7 @@ import AsyncSelect from 'react-select/async'
6
6
  import { get } from 'lodash'
7
7
 
8
8
  import Control from './components/Control'
9
+ import ClearIndicator from './components/ClearIndicator'
9
10
  import IndicatorsContainer from './components/IndicatorsContainer'
10
11
  import MenuList from './components/MenuList'
11
12
  import MultiValue from './components/MultiValue'
@@ -40,6 +41,7 @@ const Typeahead = (props: Props) => {
40
41
  defaultOptions: true,
41
42
  components: {
42
43
  Control,
44
+ ClearIndicator,
43
45
  IndicatorsContainer,
44
46
  IndicatorSeparator: null,
45
47
  MenuList,
@@ -0,0 +1,19 @@
1
+ /* @flow */
2
+
3
+ import React, { useEffect } from 'react'
4
+ import { components } from 'react-select'
5
+
6
+ const ClearContainer = (props: any) => {
7
+ useEffect(() => {
8
+ document.addEventListener('pb-typeahead-kit:clear', props.clearValue)
9
+ }, true)
10
+
11
+ return (
12
+ <components.ClearIndicator
13
+ className="clear_indicator"
14
+ {...props}
15
+ />
16
+ )
17
+ }
18
+
19
+ export default ClearContainer
@@ -7,7 +7,9 @@
7
7
  ]
8
8
  %>
9
9
 
10
- <%= pb_rails("typeahead", props: { options: options, label: "Colors", name: :foo, pills: true }) %>
10
+ <%= pb_rails("typeahead", props: { default_options: [options.first], options: options, label: "Colors", name: :foo, pills: true }) %>
11
+
12
+ <%= pb_rails("button", props: {id: "clear-pills", text: "Clear All Options", variant: "secondary"}) %>
11
13
 
12
14
  <!-- This section is an example of the available JavaScript event hooks -->
13
15
  <%= javascript_tag defer: "defer" do %>
@@ -22,4 +24,8 @@
22
24
  document.addEventListener("pb-typeahead-kit-result-clear", function() {
23
25
  console.log('All options cleared')
24
26
  })
27
+
28
+ document.querySelector('#clear-pills').addEventListener('click', function() {
29
+ document.dispatchEvent(new CustomEvent('pb-typeahead-kit:clear'))
30
+ })
25
31
  <% end %>
@@ -1,8 +1,17 @@
1
1
  Typeahead kit is data-driven. The minimum default fields are `label` and `value`.
2
2
 
3
- `{ label: "Foo", value: "bar" }`
3
+ This is an example of an option: `{ label: 'Windows', value: '#FFA500' }`
4
+
5
+ #### Rails: Default Options
6
+
7
+ You can also pass `default_options` which will populate the initial pill selections:
8
+
9
+ `default_options: [{ label: 'Windows', value: '#FFA500' }]`
4
10
 
5
11
  #### Rails: Subscribing to JS Events
6
12
  `pb-typeahead-kit-result-option-select` event to perform custom work when an option is clicked.
7
13
  `pb-typeahead-kit-result-option-remove` event to perform custom work when a pill is clicked.
8
14
  `pb-typeahead-kit-result-option-clear` event to perform custom work when all pills are removed upon clicking the X.
15
+
16
+ #### Rails: Publishing JS Events
17
+ `pb-typeahead-kit:clear` event to clear all options.
@@ -7,6 +7,7 @@ module Playbook
7
7
 
8
8
  prop :async, type: Playbook::Props::Boolean,
9
9
  default: false
10
+ prop :default_options, type: Playbook::Props::HashArray, default: []
10
11
  prop :label
11
12
  prop :load_options
12
13
  prop :name
@@ -35,6 +36,7 @@ module Playbook
35
36
 
36
37
  def typeahead_with_pills_options
37
38
  base_options = {
39
+ defaultValue: default_options,
38
40
  isMulti: true,
39
41
  label: label,
40
42
  options: options,
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "7.4.0.pre.alpha6"
4
+ VERSION = "7.4.0.pre.test2"
5
5
  end
metadata CHANGED
@@ -1,15 +1,15 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 7.4.0.pre.alpha6
4
+ version: 7.4.0.pre.test2
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
8
8
  - Power Devs
9
- autorequire:
9
+ autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2020-10-30 00:00:00.000000000 Z
12
+ date: 2020-10-28 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -445,6 +445,23 @@ files:
445
445
  - app/pb_kits/playbook/pb_avatar_action_button/docs/_avatar_action_button_tooltip.html.erb
446
446
  - app/pb_kits/playbook/pb_avatar_action_button/docs/example.yml
447
447
  - app/pb_kits/playbook/pb_avatar_action_button/docs/index.js
448
+ - app/pb_kits/playbook/pb_background/_background.html.erb
449
+ - app/pb_kits/playbook/pb_background/_background.jsx
450
+ - app/pb_kits/playbook/pb_background/_background.scss
451
+ - app/pb_kits/playbook/pb_background/background.rb
452
+ - app/pb_kits/playbook/pb_background/docs/_background_dark.html.erb
453
+ - app/pb_kits/playbook/pb_background/docs/_background_dark.jsx
454
+ - app/pb_kits/playbook/pb_background/docs/_background_gradient.html.erb
455
+ - app/pb_kits/playbook/pb_background/docs/_background_gradient.jsx
456
+ - app/pb_kits/playbook/pb_background/docs/_background_image.html.erb
457
+ - app/pb_kits/playbook/pb_background/docs/_background_image.jsx
458
+ - app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
459
+ - app/pb_kits/playbook/pb_background/docs/_background_light.jsx
460
+ - app/pb_kits/playbook/pb_background/docs/_background_white.html.erb
461
+ - app/pb_kits/playbook/pb_background/docs/_background_white.jsx
462
+ - app/pb_kits/playbook/pb_background/docs/_description.md
463
+ - app/pb_kits/playbook/pb_background/docs/example.yml
464
+ - app/pb_kits/playbook/pb_background/docs/index.js
448
465
  - app/pb_kits/playbook/pb_badge/_badge.html.erb
449
466
  - app/pb_kits/playbook/pb_badge/_badge.jsx
450
467
  - app/pb_kits/playbook/pb_badge/_badge.scss
@@ -668,10 +685,14 @@ files:
668
685
  - app/pb_kits/playbook/pb_date/_date.jsx
669
686
  - app/pb_kits/playbook/pb_date/_date.scss
670
687
  - app/pb_kits/playbook/pb_date/date.rb
688
+ - app/pb_kits/playbook/pb_date/docs/_date_alignment.html.erb
689
+ - app/pb_kits/playbook/pb_date/docs/_date_alignment.jsx
671
690
  - app/pb_kits/playbook/pb_date/docs/_date_default.html.erb
672
691
  - app/pb_kits/playbook/pb_date/docs/_date_default.jsx
673
692
  - app/pb_kits/playbook/pb_date/docs/_date_timezone.html.erb
674
693
  - app/pb_kits/playbook/pb_date/docs/_date_timezone.md
694
+ - app/pb_kits/playbook/pb_date/docs/_date_variants.html.erb
695
+ - app/pb_kits/playbook/pb_date/docs/_date_variants.jsx
675
696
  - app/pb_kits/playbook/pb_date/docs/_description.md
676
697
  - app/pb_kits/playbook/pb_date/docs/example.yml
677
698
  - app/pb_kits/playbook/pb_date/docs/index.js
@@ -759,6 +780,19 @@ files:
759
780
  - app/pb_kits/playbook/pb_date_stacked/docs/_footer.md
760
781
  - app/pb_kits/playbook/pb_date_stacked/docs/example.yml
761
782
  - app/pb_kits/playbook/pb_date_stacked/docs/index.js
783
+ - app/pb_kits/playbook/pb_date_time/_date_time.html.erb
784
+ - app/pb_kits/playbook/pb_date_time/_date_time.jsx
785
+ - app/pb_kits/playbook/pb_date_time/_date_time.scss
786
+ - app/pb_kits/playbook/pb_date_time/date_time.rb
787
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.html.erb
788
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_align.jsx
789
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.html.erb
790
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_default.jsx
791
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.html.erb
792
+ - app/pb_kits/playbook/pb_date_time/docs/_date_time_size.jsx
793
+ - app/pb_kits/playbook/pb_date_time/docs/_description.md
794
+ - app/pb_kits/playbook/pb_date_time/docs/example.yml
795
+ - app/pb_kits/playbook/pb_date_time/docs/index.js
762
796
  - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.html.erb
763
797
  - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.jsx
764
798
  - app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.scss
@@ -1462,20 +1496,6 @@ files:
1462
1496
  - app/pb_kits/playbook/pb_selectable_icon/docs/example.yml
1463
1497
  - app/pb_kits/playbook/pb_selectable_icon/docs/index.js
1464
1498
  - app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb
1465
- - app/pb_kits/playbook/pb_selectable_list/_item.jsx
1466
- - app/pb_kits/playbook/pb_selectable_list/_selectable_list.html.erb
1467
- - app/pb_kits/playbook/pb_selectable_list/_selectable_list.jsx
1468
- - app/pb_kits/playbook/pb_selectable_list/_selectable_list.scss
1469
- - app/pb_kits/playbook/pb_selectable_list/_selectable_list_item.html.erb
1470
- - app/pb_kits/playbook/pb_selectable_list/docs/_description.md
1471
- - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.html.erb
1472
- - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_checkbox.jsx
1473
- - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.html.erb
1474
- - app/pb_kits/playbook/pb_selectable_list/docs/_selectable_list_radio.jsx
1475
- - app/pb_kits/playbook/pb_selectable_list/docs/example.yml
1476
- - app/pb_kits/playbook/pb_selectable_list/docs/index.js
1477
- - app/pb_kits/playbook/pb_selectable_list/selectable_list.rb
1478
- - app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb
1479
1499
  - app/pb_kits/playbook/pb_source/_source.html.erb
1480
1500
  - app/pb_kits/playbook/pb_source/_source.jsx
1481
1501
  - app/pb_kits/playbook/pb_source/_source.scss
@@ -1750,6 +1770,7 @@ files:
1750
1770
  - app/pb_kits/playbook/pb_typeahead/_typeahead.html.erb
1751
1771
  - app/pb_kits/playbook/pb_typeahead/_typeahead.jsx
1752
1772
  - app/pb_kits/playbook/pb_typeahead/_typeahead.scss
1773
+ - app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.jsx
1753
1774
  - app/pb_kits/playbook/pb_typeahead/components/Control.jsx
1754
1775
  - app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.jsx
1755
1776
  - app/pb_kits/playbook/pb_typeahead/components/MenuList.jsx
@@ -1869,7 +1890,7 @@ homepage: http://playbook.powerapp.cloud
1869
1890
  licenses:
1870
1891
  - MIT
1871
1892
  metadata: {}
1872
- post_install_message:
1893
+ post_install_message:
1873
1894
  rdoc_options: []
1874
1895
  require_paths:
1875
1896
  - lib
@@ -1884,9 +1905,9 @@ required_rubygems_version: !ruby/object:Gem::Requirement
1884
1905
  - !ruby/object:Gem::Version
1885
1906
  version: 1.3.1
1886
1907
  requirements: []
1887
- rubyforge_project:
1908
+ rubyforge_project:
1888
1909
  rubygems_version: 2.7.3
1889
- signing_key:
1910
+ signing_key:
1890
1911
  specification_version: 4
1891
1912
  summary: Playbook Design System
1892
1913
  test_files: []
@@ -1,90 +0,0 @@
1
- /* @flow */
2
- import React, { Node } from 'react'
3
- import classnames from 'classnames'
4
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps.js'
6
- import { Checkbox, ListItem, Radio } from '..'
7
-
8
- type SelectableListItemProps = {
9
- aria?: object,
10
- children: array<Node> | Node,
11
- checked?: boolean,
12
- className?: string,
13
- data?: object,
14
- defaultChecked?: boolean,
15
- id?: string,
16
- label?: string,
17
- text?: string,
18
- name?: string,
19
- value?: string,
20
- variant?: string,
21
- onChange: (boolean)=>void,
22
- }
23
-
24
- const SelectableListItem = ({
25
- aria = {},
26
- checked = false,
27
- children,
28
- className,
29
- data = {},
30
- defaultChecked,
31
- id,
32
- label,
33
- text = '',
34
- name = '',
35
- value = '',
36
- variant = 'checkbox',
37
- onChange = () => {},
38
- ...props
39
- }: SelectableListItemProps) => {
40
- const ariaProps = buildAriaProps(aria)
41
- const dataProps = buildDataProps(data)
42
- const classes = classnames(
43
- buildCss('pb_selectable_list_item_kit'),
44
- globalProps(props),
45
- className
46
- )
47
-
48
- return (
49
- <ListItem {...props}>
50
- <div
51
- {...ariaProps}
52
- {...dataProps}
53
- className={classes}
54
- >
55
- <Choose>
56
- <When condition={variant == 'checkbox'}>
57
- <Checkbox
58
- checked={checked}
59
- id={id}
60
- name={name}
61
- onChange={onChange}
62
- // eslint suppressor, text is needed to display on screen
63
- text={label || (text && false)}
64
- type="checkbox"
65
- value={value}
66
- {...props}
67
- />
68
- {children}
69
- </When>
70
- <When condition={variant == 'radio'}>
71
- <Radio
72
- defaultChecked={defaultChecked}
73
- id={id}
74
- label={label}
75
- name={name}
76
- onChange={onChange}
77
- type="radio"
78
- value={value}
79
- {...props}
80
- />
81
- {children}
82
- </When>
83
- <Otherwise>{children}</Otherwise>
84
- </Choose>
85
- </div>
86
- </ListItem>
87
- )
88
- }
89
-
90
- export default SelectableListItem
@@ -1,11 +0,0 @@
1
- <%= content_tag(:div,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
6
- <%= pb_rails("list") do %>
7
- <% object.items.each do |item| %>
8
- <%= pb_rails("selectable_list/selectable_list_item", props: item.merge(variant: object.variant) )%>
9
- <% end %>
10
- <% end %>
11
- <% end %>
@@ -1,47 +0,0 @@
1
- /* @flow */
2
- import React from 'react'
3
- import classnames from 'classnames'
4
- import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
5
- import { globalProps } from '../utilities/globalProps.js'
6
- import { List } from '..'
7
- import SelectableListItem from './_item.jsx'
8
-
9
- type SelectableListProps = {
10
- aria?: object,
11
- children?: Node,
12
- className?: string,
13
- data?: object,
14
- id?: string,
15
- variant?: 'checkbox' | 'radio',
16
- }
17
-
18
- const SelectableList = (props: SelectableListProps) => {
19
- const {
20
- aria = {},
21
- children,
22
- className,
23
- data = {},
24
- id,
25
- } = props
26
-
27
- const ariaProps = buildAriaProps(aria)
28
- const classes = classnames(buildCss('pb_selectable_list_kit'), globalProps(props), className)
29
- const dataProps = buildDataProps(data)
30
-
31
- return (
32
- <div
33
- {...ariaProps}
34
- {...dataProps}
35
- className={classes}
36
- id={id}
37
- >
38
- <List {...props}>
39
- {children}
40
- </List>
41
- </div>
42
- )
43
- }
44
-
45
- SelectableList.Item = SelectableListItem
46
-
47
- export default SelectableList
@@ -1,17 +0,0 @@
1
- @import "../tokens/colors";
2
- @import "../tokens/spacing";
3
-
4
- [class^=pb_selectable_list]{
5
- margin-bottom: 0px;
6
- [class^=pb_item_kit] {
7
- &:hover {
8
- background-color: $bg_light;
9
- }
10
- }
11
- [class^=pb_radio_kit] {
12
- margin-left: $space_xs;
13
- }
14
- [class^=pb_checkbox_kit] {
15
- margin-left: $space_xs;
16
- }
17
- }
@@ -1,18 +0,0 @@
1
- <%= content_tag(:li,
2
- aria: object.aria,
3
- class: object.classname,
4
- data: object.data,
5
- id: object.id) do %>
6
- <% puts object.variant %>
7
- <% if object.variant == "radio"%>
8
- <%= pb_rails("radio", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
9
- <% if object.children.present? %>
10
- <%= capture(&object.children) %>
11
- <% end %>
12
- <% else %>
13
- <%= pb_rails("checkbox", props: { text: object.text, checked: object.checked, input_options: object.input_options } ) %>
14
- <% if object.children.present? %>
15
- <%= capture(&object.children) %>
16
- <% end %>
17
- <% end %>
18
- <% end %>
@@ -1,3 +0,0 @@
1
- Selectable List Kit can take variants checkbox and radio. Regardless of which variant type, each selectable list item needs a `value`, `name`, and `id` (these props are `<input>` attributes).
2
-
3
- The Selectable List Item`id` prop will provide the `for` attribute to `<label>` in the kit, so no additional attributes are needed for the association between `<label>` and `<input>`.
@@ -1,30 +0,0 @@
1
- <%= pb_rails("selectable_list",
2
- props: {
3
- variant: "checkbox",
4
- items: [
5
- { text: "Mild",
6
- input_options: {
7
- value: "1",
8
- name: "checkbox-name-1",
9
- id: "checkbox-id-1",
10
- }
11
- },
12
- { text: "Medium",
13
- checked: true,
14
- input_options: {
15
- value: "2",
16
- name: "checkbox-name-2",
17
- id: "checkbox-id-2",
18
- }
19
- },
20
- { text: "Hot",
21
- input_options: {
22
- value: "3",
23
- name: "checkbox-name-3",
24
- id: "checkbox-id-3",
25
- }
26
- }
27
- ]
28
- }
29
- )
30
- %>
@@ -1,32 +0,0 @@
1
- import React from 'react'
2
- import { SelectableList } from '../..'
3
-
4
- const SelectableListDefault = () => {
5
- return (
6
- <div>
7
- <SelectableList variant="checkbox">
8
- <SelectableList.Item
9
- id="checkbox-id-1"
10
- label="Mild"
11
- name="checkbox-name-1"
12
- value="1"
13
- />
14
- <SelectableList.Item
15
- checked
16
- id="checkbox-id-2"
17
- label="Medium"
18
- name="checkbox-name-2"
19
- value="2"
20
- />
21
- <SelectableList.Item
22
- id="checkbox-id-3"
23
- label="Hot"
24
- name="checkbox-name-3"
25
- value="3"
26
- />
27
- </SelectableList>
28
- </div>
29
- )
30
- }
31
-
32
- export default SelectableListDefault