playbook_ui 8.3.0 → 8.4.0.alpha.dependencies.1

Sign up to get free protection for your applications and to get access to all the features.
@@ -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] {
@@ -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
 
@@ -22,7 +22,7 @@
22
22
  overflow-wrap: break-word;
23
23
  resize: none;
24
24
  transition-property: box-shadow, color, background-color;
25
- transition-duration: .3s;
25
+ transition-duration: .24s;
26
26
  transition-timing-function: $bezier;
27
27
  &[type=number] {
28
28
  -moz-appearance:textfield;
@@ -40,9 +40,9 @@
40
40
  &:-webkit-autofill,
41
41
  &:-webkit-autofill:hover,
42
42
  &:-internal-autofill-selected {
43
- color: $text_color;
44
- background-color: rgba($focus_input_light, $opacity_5);
45
- transition: background-color 0.3s ease-in-out 0s;
43
+ -webkit-text-fill-color: $text_color;
44
+ -webkit-box-shadow: 0 0 0px 1000px transparent inset;
45
+ transition: background-color 5000s ease-in-out 0s;
46
46
  font-family: $font_family_base;
47
47
  }
48
48
  }
@@ -68,8 +68,3 @@
68
68
  @mixin pb_textarea_focus_dark {
69
69
  @include pb_textarea_focus($focus_input_dark);
70
70
  }
71
-
72
- // Transitions ======================
73
- @mixin transition_default{
74
- transition: background-color 0.3s ease-in-out 0s, border-color 0.3s ease-in-out 0s;
75
- }
@@ -1,7 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
  import { Textarea } from '../../'
3
3
 
4
- const TextareaCharacterCounter = (props) => {
4
+ const TextareaCharacterCounter = () => {
5
5
  const [value1, setValue1] = useState('Counting characters!')
6
6
  const [value2, setValue2] = useState('This counter prevents the user from exceeding the maximum number of allowed characters. Just try it!')
7
7
  const [value3, setValue3] = useState('This counter alerts the user that they have exceeded the maximum number of allowed characters.')
@@ -41,7 +41,6 @@ const TextareaCharacterCounter = (props) => {
41
41
  label="Count Only"
42
42
  onChange={(event) => setCount1(event.target.value.length)}
43
43
  rows={4}
44
- {...props}
45
44
  />
46
45
 
47
46
  <br />
@@ -53,7 +52,6 @@ const TextareaCharacterCounter = (props) => {
53
52
  onChange={() => handleMaxCount(event)}
54
53
  rows={4}
55
54
  value={value1}
56
- {...props}
57
55
  />
58
56
 
59
57
  <br />
@@ -65,7 +63,6 @@ const TextareaCharacterCounter = (props) => {
65
63
  onChange={() => handleMaxCountWithBlocker(event, 100)}
66
64
  rows={4}
67
65
  value={value2}
68
- {...props}
69
66
  />
70
67
 
71
68
  <br />
@@ -78,7 +75,6 @@ const TextareaCharacterCounter = (props) => {
78
75
  onChange={() => handleMaxCountWithError(event, 75)}
79
76
  rows={4}
80
77
  value={value3}
81
- {...props}
82
78
  />
83
79
  </>
84
80
  )
@@ -4,14 +4,12 @@ import { Textarea } from '../../'
4
4
  const TextareaCustom = (props) => {
5
5
  return (
6
6
  <div>
7
- <Textarea
8
- label="Label"
9
- {...props}
10
- >
7
+ <Textarea label="Label">
11
8
  <textarea
12
9
  className="my_custom_class"
13
10
  name="custom_textarea"
14
11
  rows={4}
12
+ {...props}
15
13
  >
16
14
  {'Content goes here.'}
17
15
  </textarea>
@@ -4,18 +4,9 @@
4
4
  @import "../tokens/shadows";
5
5
 
6
6
  [class^=pb_typeahead_kit] {
7
- .typeahead-kit-select__option {
8
- cursor: pointer;
9
- }
10
7
  .pb_typeahead_wrapper {
11
8
  position: relative;
12
- .text_input_value_container{
13
- cursor: text;
14
- }
15
- .text_input_indicators,
16
- .pb_list_kit {
17
- cursor: pointer;
18
- }
9
+
19
10
  .pb_typeahead_loading_indicator {
20
11
  position: absolute;
21
12
  width: min-content;
@@ -26,6 +17,7 @@
26
17
  transition: opacity .15s ease-in-out;
27
18
  }
28
19
  }
20
+
29
21
  [class^=pb_text_input_kit] {
30
22
  .text_input_wrapper {
31
23
  & > input:first-child {
@@ -33,6 +25,7 @@
33
25
  }
34
26
  }
35
27
  }
28
+
36
29
  .pb_item_kit {
37
30
  padding: ($space_xs + 2) 0;
38
31
 
@@ -42,6 +35,7 @@
42
35
  }
43
36
  }
44
37
  }
38
+
45
39
  [class^=pb_list_kit] {
46
40
  max-height: 18em;
47
41
  overflow-y: auto;
@@ -55,14 +49,17 @@
55
49
  border-radius: $border_rad_heavier;
56
50
  transition: opacity .25s ease-in-out;
57
51
  }
52
+
58
53
  &:focus-within [class^=pb_list_kit] {
59
54
  display: block;
60
55
  opacity: 1;
61
56
  }
57
+
62
58
  &:not(:focus-within) [class^=pb_list_kit] {
63
59
  display: none;
64
60
  opacity: 0;
65
61
  }
62
+
66
63
  [class^=pb_list_kit] {
67
64
  margin-top: -$space-sm;
68
65
  li {
@@ -72,6 +69,7 @@
72
69
  &:focus-within {
73
70
  background-color: $active_light;
74
71
  }
72
+
75
73
  > button {
76
74
  background: none;
77
75
  color: $text_lt_default;
@@ -86,6 +84,7 @@
86
84
  }
87
85
  }
88
86
  }
87
+
89
88
  &[class*=dark] {
90
89
  .pb_typeahead_wrapper .pb_typeahead_loading_indicator {
91
90
  color: $text_dk_light;
@@ -98,10 +97,7 @@
98
97
  color: $white;
99
98
  }
100
99
  .typeahead-kit-select__option:hover {
101
- background-color: $active_dark;
102
- }
103
- .typeahead-kit-select__indicator:hover {
104
- color: $white;
100
+ background-color: tint($focus_input_dark, 5%);
105
101
  }
106
102
  .typeahead-kit-select__input {
107
103
  color: white;
@@ -109,12 +105,13 @@
109
105
  box-shadow: none;
110
106
  }
111
107
  }
112
- .typeahead-kit-select__single-value {
108
+ .typeahead-kit-select__single-value{
113
109
  color: white;
114
110
  }
115
111
  .typeahead-kit-select__option--is-focused {
116
- background-color: $active_dark;
112
+ background-color: tint($focus_input_dark, 5%);
117
113
  }
114
+
118
115
  [class^=pb_list_kit] {
119
116
  background-color: $bg_dark;
120
117
  }
@@ -124,11 +121,12 @@
124
121
  }
125
122
  @media (hover:hover) {
126
123
  &:hover {
127
- background-color: rgba($white,.1);
124
+ background-color: tint($focus_input_dark, 5%);
128
125
  }
129
126
  }
130
127
  }
131
128
  }
129
+
132
130
  &.react-select, &.react-select .dark {
133
131
  .text_input {
134
132
  display: inherit;
@@ -90,7 +90,6 @@ const TypeaheadWithPillsAsyncUsers = (props) => {
90
90
  isMulti
91
91
  label="Github Users"
92
92
  loadOptions={promiseOptions}
93
- noOptionsMessage={() => 'Type to Search'}
94
93
  onChange={handleOnChange}
95
94
  onMultiValueClick={handleOnMultiValueClick}
96
95
  placeholder="type the name of a Github user"
@@ -114,7 +114,7 @@ $shadow_colors: (
114
114
 
115
115
  /* Text colors ------------------------*/
116
116
  $text_lt_default: $charcoal;
117
- $text_lt_light: #687887;
117
+ $text_lt_light: #919EAB;
118
118
  $text_lt_lighter: $slate;
119
119
  $text_dk_default: $white;
120
120
  $text_dk_light: rgba($white, $opacity_6);
@@ -1,5 +1,6 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module Playbook
4
- VERSION = "8.3.0"
4
+ VERSION = "8.4.0.alpha.dependencies.1"
5
5
  end
6
+
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 8.3.0
4
+ version: 8.4.0.alpha.dependencies.1
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,68 +9,8 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2021-04-01 00:00:00.000000000 Z
12
+ date: 2021-03-18 00:00:00.000000000 Z
13
13
  dependencies:
14
- - !ruby/object:Gem::Dependency
15
- name: actionpack
16
- requirement: !ruby/object:Gem::Requirement
17
- requirements:
18
- - - ">="
19
- - !ruby/object:Gem::Version
20
- version: 5.2.4.4
21
- - - "<"
22
- - !ruby/object:Gem::Version
23
- version: '7.0'
24
- type: :runtime
25
- prerelease: false
26
- version_requirements: !ruby/object:Gem::Requirement
27
- requirements:
28
- - - ">="
29
- - !ruby/object:Gem::Version
30
- version: 5.2.4.4
31
- - - "<"
32
- - !ruby/object:Gem::Version
33
- version: '7.0'
34
- - !ruby/object:Gem::Dependency
35
- name: actionview
36
- requirement: !ruby/object:Gem::Requirement
37
- requirements:
38
- - - ">="
39
- - !ruby/object:Gem::Version
40
- version: 5.2.4.4
41
- - - "<"
42
- - !ruby/object:Gem::Version
43
- version: '7.0'
44
- type: :runtime
45
- prerelease: false
46
- version_requirements: !ruby/object:Gem::Requirement
47
- requirements:
48
- - - ">="
49
- - !ruby/object:Gem::Version
50
- version: 5.2.4.4
51
- - - "<"
52
- - !ruby/object:Gem::Version
53
- version: '7.0'
54
- - !ruby/object:Gem::Dependency
55
- name: activesupport
56
- requirement: !ruby/object:Gem::Requirement
57
- requirements:
58
- - - ">="
59
- - !ruby/object:Gem::Version
60
- version: 5.2.4.4
61
- - - "<"
62
- - !ruby/object:Gem::Version
63
- version: '7.0'
64
- type: :runtime
65
- prerelease: false
66
- version_requirements: !ruby/object:Gem::Requirement
67
- requirements:
68
- - - ">="
69
- - !ruby/object:Gem::Version
70
- version: 5.2.4.4
71
- - - "<"
72
- - !ruby/object:Gem::Version
73
- version: '7.0'
74
14
  - !ruby/object:Gem::Dependency
75
15
  name: react-rails
76
16
  requirement: !ruby/object:Gem::Requirement
@@ -128,131 +68,131 @@ dependencies:
128
68
  - !ruby/object:Gem::Version
129
69
  version: 1.3.0
130
70
  - !ruby/object:Gem::Dependency
131
- name: slim-rails
71
+ name: view_component
132
72
  requirement: !ruby/object:Gem::Requirement
133
73
  requirements:
134
74
  - - '='
135
75
  - !ruby/object:Gem::Version
136
- version: 3.2.0
76
+ version: 2.23.2
137
77
  type: :runtime
138
78
  prerelease: false
139
79
  version_requirements: !ruby/object:Gem::Requirement
140
80
  requirements:
141
81
  - - '='
142
82
  - !ruby/object:Gem::Version
143
- version: 3.2.0
83
+ version: 2.23.2
144
84
  - !ruby/object:Gem::Dependency
145
- name: sprockets-rails
85
+ name: webpacker
146
86
  requirement: !ruby/object:Gem::Requirement
147
87
  requirements:
148
88
  - - '='
149
89
  - !ruby/object:Gem::Version
150
- version: 2.3.3
90
+ version: 4.2.2
151
91
  type: :runtime
152
92
  prerelease: false
153
93
  version_requirements: !ruby/object:Gem::Requirement
154
94
  requirements:
155
95
  - - '='
156
96
  - !ruby/object:Gem::Version
157
- version: 2.3.3
97
+ version: 4.2.2
158
98
  - !ruby/object:Gem::Dependency
159
- name: view_component
99
+ name: webpacker-react
160
100
  requirement: !ruby/object:Gem::Requirement
161
101
  requirements:
162
- - - '='
102
+ - - "~>"
163
103
  - !ruby/object:Gem::Version
164
- version: 2.23.2
104
+ version: 0.3.2
165
105
  type: :runtime
166
106
  prerelease: false
167
107
  version_requirements: !ruby/object:Gem::Requirement
168
108
  requirements:
169
- - - '='
109
+ - - "~>"
170
110
  - !ruby/object:Gem::Version
171
- version: 2.23.2
111
+ version: 0.3.2
172
112
  - !ruby/object:Gem::Dependency
173
- name: webpacker
113
+ name: sprockets-rails
174
114
  requirement: !ruby/object:Gem::Requirement
175
115
  requirements:
176
116
  - - '='
177
117
  - !ruby/object:Gem::Version
178
- version: 4.2.2
179
- type: :runtime
118
+ version: 2.3.3
119
+ type: :development
180
120
  prerelease: false
181
121
  version_requirements: !ruby/object:Gem::Requirement
182
122
  requirements:
183
123
  - - '='
184
124
  - !ruby/object:Gem::Version
185
- version: 4.2.2
125
+ version: 2.3.3
186
126
  - !ruby/object:Gem::Dependency
187
- name: webpacker-react
127
+ name: slim-rails
188
128
  requirement: !ruby/object:Gem::Requirement
189
129
  requirements:
190
- - - "~>"
130
+ - - '='
191
131
  - !ruby/object:Gem::Version
192
- version: 0.3.2
193
- type: :runtime
132
+ version: 3.2.0
133
+ type: :development
194
134
  prerelease: false
195
135
  version_requirements: !ruby/object:Gem::Requirement
196
136
  requirements:
197
- - - "~>"
137
+ - - '='
198
138
  - !ruby/object:Gem::Version
199
- version: 0.3.2
139
+ version: 3.2.0
200
140
  - !ruby/object:Gem::Dependency
201
- name: better_errors
141
+ name: github_changelog_generator
202
142
  requirement: !ruby/object:Gem::Requirement
203
143
  requirements:
204
144
  - - '='
205
145
  - !ruby/object:Gem::Version
206
- version: 2.5.1
146
+ version: 1.15.2
207
147
  type: :development
208
148
  prerelease: false
209
149
  version_requirements: !ruby/object:Gem::Requirement
210
150
  requirements:
211
151
  - - '='
212
152
  - !ruby/object:Gem::Version
213
- version: 2.5.1
153
+ version: 1.15.2
214
154
  - !ruby/object:Gem::Dependency
215
- name: binding_of_caller
155
+ name: better_errors
216
156
  requirement: !ruby/object:Gem::Requirement
217
157
  requirements:
218
158
  - - '='
219
159
  - !ruby/object:Gem::Version
220
- version: 0.8.0
160
+ version: 2.5.1
221
161
  type: :development
222
162
  prerelease: false
223
163
  version_requirements: !ruby/object:Gem::Requirement
224
164
  requirements:
225
165
  - - '='
226
166
  - !ruby/object:Gem::Version
227
- version: 0.8.0
167
+ version: 2.5.1
228
168
  - !ruby/object:Gem::Dependency
229
- name: byebug
169
+ name: binding_of_caller
230
170
  requirement: !ruby/object:Gem::Requirement
231
171
  requirements:
232
172
  - - '='
233
173
  - !ruby/object:Gem::Version
234
- version: 11.0.0
174
+ version: 0.8.0
235
175
  type: :development
236
176
  prerelease: false
237
177
  version_requirements: !ruby/object:Gem::Requirement
238
178
  requirements:
239
179
  - - '='
240
180
  - !ruby/object:Gem::Version
241
- version: 11.0.0
181
+ version: 0.8.0
242
182
  - !ruby/object:Gem::Dependency
243
- name: github_changelog_generator
183
+ name: byebug
244
184
  requirement: !ruby/object:Gem::Requirement
245
185
  requirements:
246
186
  - - '='
247
187
  - !ruby/object:Gem::Version
248
- version: 1.15.2
188
+ version: 11.0.0
249
189
  type: :development
250
190
  prerelease: false
251
191
  version_requirements: !ruby/object:Gem::Requirement
252
192
  requirements:
253
193
  - - '='
254
194
  - !ruby/object:Gem::Version
255
- version: 1.15.2
195
+ version: 11.0.0
256
196
  - !ruby/object:Gem::Dependency
257
197
  name: overcommit
258
198
  requirement: !ruby/object:Gem::Requirement
@@ -2114,9 +2054,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
2114
2054
  version: '0'
2115
2055
  required_rubygems_version: !ruby/object:Gem::Requirement
2116
2056
  requirements:
2117
- - - ">="
2057
+ - - ">"
2118
2058
  - !ruby/object:Gem::Version
2119
- version: '0'
2059
+ version: 1.3.1
2120
2060
  requirements: []
2121
2061
  rubyforge_project:
2122
2062
  rubygems_version: 2.7.3