playbook_ui 8.3.0.alpha.select.pre.margin → 8.3.0.deps2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (22) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/data/menu.yml +3 -2
  3. data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +0 -7
  4. data/app/pb_kits/playbook/pb_dialog/dialog_header.rb +24 -23
  5. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +54 -63
  6. data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +1 -2
  7. data/app/pb_kits/playbook/pb_select/_select.jsx +1 -10
  8. data/app/pb_kits/playbook/pb_select/_select.scss +28 -35
  9. data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx +1 -4
  10. data/app/pb_kits/playbook/pb_select/select.rb +1 -5
  11. data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +1 -1
  12. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx +135 -145
  13. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +18 -17
  14. data/app/pb_kits/playbook/pb_textarea/_textarea.scss +19 -29
  15. data/app/pb_kits/playbook/pb_textarea/_textarea_mixin.scss +4 -9
  16. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_character_counter.jsx +1 -5
  17. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_custom.jsx +2 -4
  18. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +15 -17
  19. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async_users.jsx +0 -1
  20. data/app/pb_kits/playbook/tokens/_colors.scss +1 -1
  21. data/lib/playbook/version.rb +2 -1
  22. metadata +36 -36
data/app/pb_kits/playbook/pb_select/docs/_select_custom_select.jsx CHANGED
@@ -4,10 +4,7 @@ import { Select } from '../../'
4
4
  const SelectCustomSelect = (props) => {
5
5
  return (
6
6
  <div>
7
- <Select
8
- label="Favorite Holiday"
9
- {...props}
10
- >
7
+ <Select label="Favorite Holiday">
11
8
  <select
12
9
  id="holiday"
13
10
  name="holiday"
data/app/pb_kits/playbook/pb_select/select.rb CHANGED
@@ -17,17 +17,13 @@ module Playbook
17
17
  prop :required, type: Playbook::Props::Boolean, default: false
18
18
 
19
19
  def classname
20
- generate_classname("pb_select", select_margin_bottom, separator: " ")
20
+ generate_classname("pb_select")
21
21
  end
22
22
 
23
23
  def select_wrapper_class
24
24
  "pb_select_kit_wrapper" + error_class
25
25
  end
26
26
 
27
- def select_margin_bottom
28
- margin.present? || margin_bottom.present? ? nil : "mb_sm"
29
- end
30
-
31
27
  def options_to_array
32
28
  options.map { |option| [option[:value_text] || option[:value], option[:value]] }
33
29
  end
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: rgba($white,.1);
114
+ background: $bg_dark;
115
115
  }
116
116
 
117
117
  &.error {
data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_input.jsx CHANGED
@@ -1,168 +1,158 @@
1
- import React, { useState } from 'react'
1
+ import React from 'react'
2
2
  import {
3
3
  Body,
4
4
  SelectableCard,
5
5
  Title,
6
6
  } from '../../'
7
7
 
8
- const SelectableCardInput = (props) => {
9
- const [state, setState] = useState({
8
+ class SelectableCardInput extends React.Component {
9
+ state = {
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
- const handleSelect = (event) => {
18
- setState({ ...state,
17
+ handleSelect = (event) => {
18
+ this.setState({
19
19
  [event.target.name]: event.target.checked,
20
20
  })
21
21
  }
22
22
 
23
- const handleRadioSelect = (event) => {
24
- setState({
25
- ...state,
23
+ handleRadioSelect = (event) => {
24
+ this.setState({
26
25
  radioSelected: event.target.value,
27
26
  })
28
27
  }
29
28
 
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
- )
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
+ }
166
156
  }
167
157
 
168
158
  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
+
11
12
  .text_input_wrapper {
12
13
  margin-bottom: $space_sm;
13
14
  display: block;
15
+
14
16
  input::placeholder,
15
17
  .text_input .placeholder {
16
18
  @include pb_body_light;
17
19
  }
20
+
18
21
  input,
19
22
  .text_input {
20
- max-height: 45px;
21
23
  @include pb_textarea_light;
24
+ @include pb_title_4;
22
25
  overflow: hidden;
23
26
  }
24
- input:hover,
25
- .text_input:hover{
26
- background-color: rgba($focus_input_light,$opacity_5);
27
- }
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
- @include transition_default;
34
- border-color: $primary;
35
- background-color: rgba($focus_input_light,$opacity_5);
33
+ -webkit-box-shadow: 0 0 0px 1000px $focus_input_light inset;
34
+ transition: background-color 5000s ease-in-out 0s;
36
35
  }
37
36
  }
37
+
38
38
  &.dark {
39
39
  .text_input_wrapper {
40
40
  margin-bottom: 1rem;
41
+
41
42
  input::placeholder,
42
43
  .text_input .placeholder {
43
44
  @include pb_body_light_dark;
44
45
  }
46
+
45
47
  input, .text_input {
46
48
  @include pb_textarea_dark;
47
- @include pb_body_dark;
49
+ @include pb_title_4;
50
+ @include pb_title_dark;
48
51
  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);
55
52
  }
53
+
56
54
  input:focus,
57
55
  .text_input:focus,
58
56
  input:-webkit-autofill:focus,
59
57
  .text_input:-webkit-autofill:focus {
60
- border-color: $active_dark;
61
- background-color: rgba($white, 0.025);
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;
62
61
  }
63
62
  }
63
+
64
64
  &.error {
65
65
  .text_input_wrapper {
66
66
  input, .text_input {
@@ -69,6 +69,7 @@
69
69
  }
70
70
  }
71
71
  }
72
+
72
73
  &.error {
73
74
  .text_input_wrapper {
74
75
  [class*=pb_body_kit] {
data/app/pb_kits/playbook/pb_textarea/_textarea.scss CHANGED
@@ -5,30 +5,28 @@
5
5
 
6
6
  [class^=pb_textarea_kit] {
7
7
  margin-bottom: $space_sm;
8
-
9
8
  [class^=pb_caption_kit] {
10
9
  margin-bottom: $space_xs;
11
10
  display: block;
12
11
  }
13
- textarea::placeholder,
14
- .pb_text_area_kit::placeholder {
12
+ textarea::placeholder {
15
13
  @include pb_body_light;
16
14
  }
17
- textarea,
18
- .pb_text_area_kit {
15
+ > textarea {
19
16
  @include pb_textarea_light;
20
17
  }
21
- textarea:focus,
22
- .pb_text_area_kit:focus {
23
- border-color: $primary;
18
+ textarea:focus {
24
19
  @include pb_textarea_focus_light;
25
- @include transition_default;
26
20
  }
27
- textarea:hover,
28
- .pb_text_area_kit:hover {
29
- background-color: rgba($focus_input_light,$opacity_5);
21
+
22
+ &.error {
23
+ [class*=pb_body_kit] {
24
+ margin-top: $space_xs / 2;
25
+ }
26
+ > textarea {
27
+ border-color: $error;
28
+ }
30
29
  }
31
-
32
30
  &.resize_both > textarea {
33
31
  resize: both;
34
32
  overflow: auto;
@@ -46,24 +44,16 @@
46
44
  textarea::placeholder {
47
45
  @include pb_body_light_dark;
48
46
  }
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);
47
+ > textarea {
48
+ @include pb_textarea_dark;
54
49
  }
55
- textarea:focus, .pb_text_area_kit:focus {
56
- border-color: $active_dark;
57
- background-color: rgba($white, 0.025);
50
+ textarea:focus {
51
+ @include pb_textarea_focus_dark;
58
52
  }
59
- }
60
-
61
- &.error {
62
- [class*=pb_body_kit] {
63
- margin-top: $space_xs / 2;
64
- }
65
- textarea {
66
- border-color: $error;
53
+ &.error {
54
+ > textarea {
55
+ border-color: $error_dark;
56
+ }
67
57
  }
68
58
  }
69
59