playbook_ui 8.4.0.alpha.dependencies.2 → 9.0.0

Sign up to get free protection for your applications and to get access to all the features.
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
data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx CHANGED
@@ -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"
data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss CHANGED
@@ -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 {
data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx CHANGED
@@ -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
data/app/pb_kits/playbook/pb_text_input/_text_input.scss CHANGED
@@ -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] {
data/app/pb_kits/playbook/pb_textarea/_textarea.scss CHANGED
@@ -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