playbook_ui 8.4.0.alpha.dependencies.2 → 9.0.0

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 (51) hide show
  1. checksums.yaml +4 -4
  2. data/Rakefile +1 -18
  3. data/app/pb_kits/playbook/data/menu.yml +2 -3
  4. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +7 -0
  5. data/app/pb_kits/playbook/pb_form/docs/_description.md +2 -6
  6. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +1 -1
  7. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +1 -4
  8. data/app/pb_kits/playbook/pb_form/docs/example.yml +2 -4
  9. data/app/pb_kits/playbook/pb_form/form.rb +14 -20
  10. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +63 -54
  11. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +2 -1
  12. data/app/pb_kits/playbook/pb_select/_select.scss +15 -5
  13. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx +4 -1
  14. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  15. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx +145 -135
  16. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +17 -18
  17. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +29 -19
  18. data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss +9 -4
  19. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx +5 -1
  20. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx +4 -2
  21. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +17 -15
  22. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +1 -0
  23. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  24. data/lib/playbook.rb +4 -1
  25. data/lib/playbook/forms.rb +3 -0
  26. data/lib/playbook/forms/builder.rb +31 -0
  27. data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/action_area.rb +2 -2
  28. data/lib/playbook/forms/builder/checkbox_field.rb +32 -0
  29. data/lib/playbook/forms/builder/collection_select_field.rb +19 -0
  30. data/lib/playbook/forms/builder/date_picker_field.rb +37 -0
  31. data/{app/pb_kits/playbook/pb_form/form_builder → lib/playbook/forms/builder}/form_field_builder.rb +2 -2
  32. data/lib/playbook/forms/builder/select_field.rb +19 -0
  33. data/lib/playbook/forms/builder/typeahead_field.rb +12 -0
  34. data/lib/playbook/pb_forms_helper.rb +41 -0
  35. data/lib/playbook/pb_kit_helper.rb +2 -0
  36. data/lib/playbook/props/base.rb +1 -1
  37. data/lib/playbook/version.rb +1 -2
  38. metadata +90 -61
  39. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form.html.erb +0 -60
  40. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.html.erb +0 -61
  41. data/app/pb_kits/playbook/pb_form/docs/_form_simple_form_validate.md +0 -1
  42. data/app/pb_kits/playbook/pb_form/form_builder.rb +0 -31
  43. data/app/pb_kits/playbook/pb_form/form_builder/checkbox_field.rb +0 -34
  44. data/app/pb_kits/playbook/pb_form/form_builder/collection_select_field.rb +0 -21
  45. data/app/pb_kits/playbook/pb_form/form_builder/date_picker_field.rb +0 -39
  46. data/app/pb_kits/playbook/pb_form/form_builder/select_field.rb +0 -21
  47. data/app/pb_kits/playbook/pb_form/form_builder/typeahead_field.rb +0 -14
  48. data/app/pb_kits/playbook/pb_form/form_with.html.erb +0 -11
  49. data/app/pb_kits/playbook/pb_form/form_with.rb +0 -40
  50. data/app/pb_kits/playbook/pb_form/simple_form.html.erb +0 -11
  51. data/app/pb_kits/playbook/pb_form/simple_form.rb +0 -67
@@ -4,7 +4,10 @@ import { Select } from '../../'
4
4
  const SelectCustomSelect = (props) => {
5
5
  return (
6
6
  <div>
7
- <Select label="Favorite Holiday">
7
+ <Select
8
+ label="Favorite Holiday"
9
+ {...props}
10
+ >
8
11
  <select
9
12
  id="holiday"
10
13
  name="holiday"
@@ -111,7 +111,7 @@ $pb_selectable_card_border: 2px;
111
111
  }
112
112
 
113
113
  .separator {
114
- background: $bg_dark;
114
+ background: rgba($white,.1);
115
115
  }
116
116
 
117
117
  &.error {
@@ -1,158 +1,168 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import {
3
3
  Body,
4
4
  SelectableCard,
5
5
  Title,
6
6
  } from '../../'
7
7
 
8
- class SelectableCardInput extends React.Component {
9
- state = {
8
+ const SelectableCardInput = (props) => {
9
+ const [state, setState] = useState({
10
10
  firstCheckbox: true,
11
11
  secondCheckbox: true,
12
12
  thirdCheckbox: false,
13
13
  forthCheckbox: false,
14
14
  radioSelected: 'first',
15
- }
15
+ })
16
16
 
17
- handleSelect = (event) => {
18
- this.setState({
17
+ const handleSelect = (event) => {
18
+ setState({ ...state,
19
19
  [event.target.name]: event.target.checked,
20
20
  })
21
21
  }
22
22
 
23
- handleRadioSelect = (event) => {
24
- this.setState({
23
+ const handleRadioSelect = (event) => {
24
+ setState({
25
+ ...state,
25
26
  radioSelected: event.target.value,
26
27
  })
27
28
  }
28
29
 
29
- render() {
30
- return (
31
- <>
32
- <Title
33
- size={3}
34
- text="What programming languages do you know?"
35
- />
36
-
37
- <br />
38
-
39
- <SelectableCard
40
- checked={this.state.firstCheckbox}
41
- inputId="firstCheckbox"
42
- name="firstCheckbox"
43
- onChange={this.handleSelect}
44
- value="firstCheckbox"
45
- variant="displayInput"
46
- >
47
- <Body>{'Ruby'}</Body>
48
- </SelectableCard>
49
-
50
- <SelectableCard
51
- checked={this.state.secondCheckbox}
52
- inputId="secondCheckbox"
53
- name="secondCheckbox"
54
- onChange={this.handleSelect}
55
- value="secondCheckbox"
56
- variant="displayInput"
57
- >
58
- <Body>{'JavaScript'}</Body>
59
- </SelectableCard>
60
-
61
- <SelectableCard
62
- checked={this.state.thirdCheckbox}
63
- inputId="thirdCheckbox"
64
- name="thirdCheckbox"
65
- onChange={this.handleSelect}
66
- value="thirdCheckbox"
67
- variant="displayInput"
68
- >
69
- <Body>{'TypeScript'}</Body>
70
- </SelectableCard>
71
-
72
- <SelectableCard
73
- checked={this.state.fourthCheckbox}
74
- inputId="fourthCheckbox"
75
- name="fourthCheckbox"
76
- onChange={this.handleSelect}
77
- value="fourthCheckbox"
78
- variant="displayInput"
79
- >
80
- <Body>{'Swift'}</Body>
81
- </SelectableCard>
82
-
83
- <br />
84
-
85
- <Title
86
- size={3}
87
- text="How likely are you to recommend Playbook to a friend?"
88
- />
89
-
90
- <br />
91
-
92
- <SelectableCard
93
- checked={this.state.radioSelected === 'first'}
94
- inputId="radio-1"
95
- multi={false}
96
- name="radio"
97
- onChange={this.handleRadioSelect}
98
- value="first"
99
- variant="displayInput"
100
- >
101
- <Body>{'5'}</Body>
102
- </SelectableCard>
103
-
104
- <SelectableCard
105
- checked={this.state.radioSelected === 'second'}
106
- inputId="radio-2"
107
- multi={false}
108
- name="radio"
109
- onChange={this.handleRadioSelect}
110
- value="second"
111
- variant="displayInput"
112
- >
113
- <Body>
114
- {'4'}
115
- </Body>
116
- </SelectableCard>
117
-
118
- <SelectableCard
119
- checked={this.state.radioSelected === 'third'}
120
- inputId="radio-3"
121
- multi={false}
122
- name="radio"
123
- onChange={this.handleRadioSelect}
124
- value="third"
125
- variant="displayInput"
126
- >
127
- <Body>{'3'}</Body>
128
- </SelectableCard>
129
-
130
- <SelectableCard
131
- checked={this.state.radioSelected === 'fourth'}
132
- inputId="radio-4"
133
- multi={false}
134
- name="radio"
135
- onChange={this.handleRadioSelect}
136
- value="fourth"
137
- variant="displayInput"
138
- >
139
- <Body>{'2'}</Body>
140
- </SelectableCard>
141
-
142
- <SelectableCard
143
- checked={this.state.radioSelected === 'fifth'}
144
- inputId="radio-5"
145
- multi={false}
146
- name="radio"
147
- onChange={this.handleRadioSelect}
148
- value="fifth"
149
- variant="displayInput"
150
- >
151
- <Body>{'1'}</Body>
152
- </SelectableCard>
153
- </>
154
- )
155
- }
30
+ return (
31
+ <>
32
+ <Title
33
+ size={3}
34
+ text="What programming languages do you know?"
35
+ {...props}
36
+ />
37
+
38
+ <br />
39
+
40
+ <SelectableCard
41
+ checked={state.firstCheckbox}
42
+ inputId="firstCheckbox"
43
+ name="firstCheckbox"
44
+ onChange={handleSelect}
45
+ value="firstCheckbox"
46
+ variant="displayInput"
47
+ {...props}
48
+ >
49
+ <Body {...props}>{'Ruby'}</Body>
50
+ </SelectableCard>
51
+
52
+ <SelectableCard
53
+ checked={state.secondCheckbox}
54
+ inputId="secondCheckbox"
55
+ name="secondCheckbox"
56
+ onChange={handleSelect}
57
+ value="secondCheckbox"
58
+ variant="displayInput"
59
+ {...props}
60
+ >
61
+ <Body {...props}>{'JavaScript'}</Body>
62
+ </SelectableCard>
63
+
64
+ <SelectableCard
65
+ checked={state.thirdCheckbox}
66
+ inputId="thirdCheckbox"
67
+ name="thirdCheckbox"
68
+ onChange={handleSelect}
69
+ value="thirdCheckbox"
70
+ variant="displayInput"
71
+ {...props}
72
+ >
73
+ <Body {...props}>{'TypeScript'}</Body>
74
+ </SelectableCard>
75
+
76
+ <SelectableCard
77
+ checked={state.fourthCheckbox}
78
+ inputId="fourthCheckbox"
79
+ name="fourthCheckbox"
80
+ onChange={handleSelect}
81
+ value="fourthCheckbox"
82
+ variant="displayInput"
83
+ {...props}
84
+ >
85
+ <Body {...props}>{'Swift'}</Body>
86
+ </SelectableCard>
87
+
88
+ <br />
89
+
90
+ <Title
91
+ size={3}
92
+ text="How likely are you to recommend Playbook to a friend?"
93
+ {...props}
94
+ />
95
+
96
+ <br />
97
+
98
+ <SelectableCard
99
+ checked={state.radioSelected === 'first'}
100
+ inputId="radio-1"
101
+ multi={false}
102
+ name="radio"
103
+ onChange={handleRadioSelect}
104
+ value="first"
105
+ variant="displayInput"
106
+ {...props}
107
+ >
108
+ <Body {...props}>{'5'}</Body>
109
+ </SelectableCard>
110
+
111
+ <SelectableCard
112
+ checked={state.radioSelected === 'second'}
113
+ inputId="radio-2"
114
+ multi={false}
115
+ name="radio"
116
+ onChange={handleRadioSelect}
117
+ value="second"
118
+ variant="displayInput"
119
+ {...props}
120
+ >
121
+ <Body {...props}>
122
+ {'4'}
123
+ </Body>
124
+ </SelectableCard>
125
+
126
+ <SelectableCard
127
+ checked={state.radioSelected === 'third'}
128
+ inputId="radio-3"
129
+ multi={false}
130
+ name="radio"
131
+ onChange={handleRadioSelect}
132
+ value="third"
133
+ variant="displayInput"
134
+ {...props}
135
+ >
136
+ <Body {...props}>{'3'}</Body>
137
+ </SelectableCard>
138
+
139
+ <SelectableCard
140
+ checked={state.radioSelected === 'fourth'}
141
+ inputId="radio-4"
142
+ multi={false}
143
+ name="radio"
144
+ onChange={handleRadioSelect}
145
+ value="fourth"
146
+ variant="displayInput"
147
+ {...props}
148
+ >
149
+ <Body {...props}>{'2'}</Body>
150
+ </SelectableCard>
151
+
152
+ <SelectableCard
153
+ checked={state.radioSelected === 'fifth'}
154
+ inputId="radio-5"
155
+ multi={false}
156
+ name="radio"
157
+ onChange={handleRadioSelect}
158
+ value="fifth"
159
+ variant="displayInput"
160
+ {...props}
161
+ >
162
+ <Body {...props}>{'1'}</Body>
163
+ </SelectableCard>
164
+ </>
165
+ )
156
166
  }
157
167
 
158
168
  export default SelectableCardInput
@@ -8,59 +8,59 @@
8
8
  margin-bottom: $space_xs;
9
9
  display: block;
10
10
  }
11
-
12
11
  .text_input_wrapper {
13
12
  margin-bottom: $space_sm;
14
13
  display: block;
15
-
16
14
  input::placeholder,
17
15
  .text_input .placeholder {
18
16
  @include pb_body_light;
19
17
  }
20
-
21
18
  input,
22
19
  .text_input {
20
+ max-height: 45px;
23
21
  @include pb_textarea_light;
24
- @include pb_title_4;
25
22
  overflow: hidden;
26
23
  }
27
-
24
+ input:hover,
25
+ .text_input:hover{
26
+ background-color: rgba($focus_input_light,$opacity_5);
27
+ }
28
28
  input:focus,
29
29
  .text_input:focus,
30
30
  input:-webkit-autofill:focus,
31
31
  .text_input:-webkit-autofill:focus {
32
32
  @include pb_textarea_focus;
33
- -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
34
- transition: background-color 5000s ease-in-out 0s;
33
+ @include transition_default;
34
+ border-color: $primary;
35
+ background-color: rgba($focus_input_light,$opacity_5);
35
36
  }
36
37
  }
37
-
38
38
  &.dark {
39
39
  .text_input_wrapper {
40
40
  margin-bottom: 1rem;
41
-
42
41
  input::placeholder,
43
42
  .text_input .placeholder {
44
43
  @include pb_body_light_dark;
45
44
  }
46
-
47
45
  input, .text_input {
48
46
  @include pb_textarea_dark;
49
- @include pb_title_4;
50
- @include pb_title_dark;
47
+ @include pb_body_dark;
51
48
  overflow: hidden;
49
+ background-color: rgba($white,$opacity_1);
50
+ border-color: rgba($white, 0.15);
51
+ }
52
+ input:hover,
53
+ .text_input:hover{
54
+ background-color: rgba($white, 0.15);
52
55
  }
53
-
54
56
  input:focus,
55
57
  .text_input:focus,
56
58
  input:-webkit-autofill:focus,
57
59
  .text_input:-webkit-autofill:focus {
58
- @include pb_textarea_focus_dark;
59
- -webkit-box-shadow: 0 0 0px 1000px $focus_input_dark inset;
60
- transition: background-color 5000s ease-in-out 0s;
60
+ border-color: $active_dark;
61
+ background-color: rgba($white, 0.025);
61
62
  }
62
63
  }
63
-
64
64
  &.error {
65
65
  .text_input_wrapper {
66
66
  input, .text_input {
@@ -69,7 +69,6 @@
69
69
  }
70
70
  }
71
71
  }
72
-
73
72
  &.error {
74
73
  .text_input_wrapper {
75
74
  [class*=pb_body_kit] {
@@ -5,28 +5,30 @@
5
5
 
6
6
  [class^=pb_textarea_kit] {
7
7
  margin-bottom: $space_sm;
8
+
8
9
  [class^=pb_caption_kit] {
9
10
  margin-bottom: $space_xs;
10
11
  display: block;
11
12
  }
12
- textarea::placeholder {
13
+ textarea::placeholder,
14
+ .pb_text_area_kit::placeholder {
13
15
  @include pb_body_light;
14
16
  }
15
- > textarea {
17
+ textarea,
18
+ .pb_text_area_kit {
16
19
  @include pb_textarea_light;
17
20
  }
18
- textarea:focus {
21
+ textarea:focus,
22
+ .pb_text_area_kit:focus {
23
+ border-color: $primary;
19
24
  @include pb_textarea_focus_light;
25
+ @include transition_default;
20
26
  }
21
-
22
- &.error {
23
- [class*=pb_body_kit] {
24
- margin-top: $space_xs / 2;
25
- }
26
- > textarea {
27
- border-color: $error;
28
- }
27
+ textarea:hover,
28
+ .pb_text_area_kit:hover {
29
+ background-color: rgba($focus_input_light,$opacity_5);
29
30
  }
31
+
30
32
  &.resize_both > textarea {
31
33
  resize: both;
32
34
  overflow: auto;
@@ -44,16 +46,24 @@
44
46
  textarea::placeholder {
45
47
  @include pb_body_light_dark;
46
48
  }
47
- > textarea {
48
- @include pb_textarea_dark;
49
+ textarea,
50
+ .pb_text_area_kit {
51
+ @include pb_body_dark;
52
+ background-color: rgba($white, $opacity_1);
53
+ border-color: rgba($white, 0.15);
49
54
  }
50
- textarea:focus {
51
- @include pb_textarea_focus_dark;
55
+ textarea:focus, .pb_text_area_kit:focus {
56
+ border-color: $active_dark;
57
+ background-color: rgba($white, 0.025);
52
58
  }
53
- &.error {
54
- > textarea {
55
- border-color: $error_dark;
56
- }
59
+ }
60
+
61
+ &.error {
62
+ [class*=pb_body_kit] {
63
+ margin-top: $space_xs / 2;
64
+ }
65
+ textarea {
66
+ border-color: $error;
57
67
  }
58
68
  }
59
69