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

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 (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