playbook_ui 10.6.2.pre.alpha.dep → 10.8.1.pre.alpha.flexdeps
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.jsx +26 -0
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.scss +2 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +25 -0
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +3 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +17 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx +26 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +5 -3
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss +169 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.jsx +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +6 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +4 -3
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +4 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.scss +11 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb +6 -0
- data/app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx +24 -0
- data/app/pb_kits/playbook/pb_textarea/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_textarea/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_textarea/textarea.rb +7 -1
- data/lib/playbook/version.rb +2 -2
- metadata +7 -41
- data/README.md +0 -73
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: d95ab57c6581af52decbdbd637ecfb2e9f420e7ec660ed11f22f9b7c2a87cd0b
|
4
|
+
data.tar.gz: cc95dc74cc37c6ba2114ffe1e57825dfecfc113fd308d267db08a875ec825038
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 8cf2f4fda1337023cd8eec4040a25bfc32850680be2d39d738b83f419ffefc01963f56bd3556d5cb5097834227524642164872784ce711a2702048a65098c5f4
|
7
|
+
data.tar.gz: 64038c35e71964d0928e56d4d6d6527974bc9f24cb15e19a4c83a84e822b6fe0959057673999d42b14bdb887927082dfb5a518fd9a79ac245c5d78ebc2c4e53f
|
@@ -27,6 +27,7 @@ type DatePickerProps = {
|
|
27
27
|
hideIcon?: Boolean,
|
28
28
|
hideLabel?: Boolean,
|
29
29
|
id?: String,
|
30
|
+
inLine?: Boolean,
|
30
31
|
inputAria?: object,
|
31
32
|
inputData?: object,
|
32
33
|
inputOnChange?: (String) => void,
|
@@ -59,6 +60,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
59
60
|
hideIcon = false,
|
60
61
|
hideLabel = false,
|
61
62
|
id,
|
63
|
+
inLine = true,
|
62
64
|
inputAria,
|
63
65
|
inputData,
|
64
66
|
inputOnChange,
|
@@ -92,6 +94,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
92
94
|
disableWeekdays: disableWeekdays,
|
93
95
|
format: format,
|
94
96
|
hideIcon: hideIcon,
|
97
|
+
inLine: inLine,
|
95
98
|
maxDate: maxDate,
|
96
99
|
minDate: minDate,
|
97
100
|
mode: mode,
|
@@ -137,6 +140,7 @@ const DatePicker = (props: DatePickerProps) => {
|
|
137
140
|
placeholder={placeholder}
|
138
141
|
value={inputValue}
|
139
142
|
/>
|
143
|
+
|
140
144
|
<If condition={!hideIcon}>
|
141
145
|
<div
|
142
146
|
className={iconWrapperClass()}
|
@@ -148,6 +152,28 @@ const DatePicker = (props: DatePickerProps) => {
|
|
148
152
|
/>
|
149
153
|
</div>
|
150
154
|
</If>
|
155
|
+
|
156
|
+
<If condition={hideIcon && inLine}>
|
157
|
+
<div
|
158
|
+
className={iconWrapperClass()}
|
159
|
+
id={`${pickerId}-icon-plus`}
|
160
|
+
>
|
161
|
+
<Icon
|
162
|
+
className="date-picker-plus-icon"
|
163
|
+
icon="plus"
|
164
|
+
/>
|
165
|
+
</div>
|
166
|
+
<div
|
167
|
+
className={iconWrapperClass()}
|
168
|
+
id={`${pickerId}-angle-down`}
|
169
|
+
>
|
170
|
+
<Icon
|
171
|
+
className="angle_down_icon"
|
172
|
+
icon="angle-down"
|
173
|
+
/>
|
174
|
+
</div>
|
175
|
+
</If>
|
176
|
+
|
151
177
|
</div>
|
152
178
|
</div>
|
153
179
|
)
|
@@ -2,6 +2,7 @@
|
|
2
2
|
@import "../pb_textarea/textarea_mixin";
|
3
3
|
@import "../tokens/colors";
|
4
4
|
@import "./sass_partials/flatpickr_styles";
|
5
|
+
@import "./sass_partials/inline_styles";
|
5
6
|
|
6
7
|
[class^=pb_date_picker_kit] {
|
7
8
|
.input_wrapper {
|
@@ -36,5 +37,5 @@
|
|
36
37
|
border-color: $primary;
|
37
38
|
}
|
38
39
|
}
|
39
|
-
|
40
|
+
|
40
41
|
}
|
@@ -32,6 +32,31 @@
|
|
32
32
|
}) %>
|
33
33
|
</div>
|
34
34
|
<% end %>
|
35
|
+
|
36
|
+
<!-- Inline -->
|
37
|
+
<% if object.hide_icon && object.inline %>
|
38
|
+
<!-- Plus Icon -->
|
39
|
+
<div
|
40
|
+
class="<%= object.icon_wrapper_class %>"
|
41
|
+
id="<%= object.picker_id %>-icon-plus"
|
42
|
+
>
|
43
|
+
<%= pb_rails("icon", props: {
|
44
|
+
classname: "plus-icon",
|
45
|
+
icon: "plus"
|
46
|
+
}) %>
|
47
|
+
</div>
|
48
|
+
|
49
|
+
<!-- Angle Down Icon -->
|
50
|
+
<div
|
51
|
+
class="<%= object.icon_wrapper_class %>"
|
52
|
+
id="<%= object.picker_id %>-angle-down"
|
53
|
+
>
|
54
|
+
<%= pb_rails("icon", props: {
|
55
|
+
classname: "angle_down_icon",
|
56
|
+
icon: "angle-down"
|
57
|
+
}) %>
|
58
|
+
</div>
|
59
|
+
<% end %>
|
35
60
|
</div>
|
36
61
|
|
37
62
|
<%= javascript_tag do %>
|
@@ -24,6 +24,8 @@ module Playbook
|
|
24
24
|
default: false
|
25
25
|
prop :hide_label, type: Playbook::Props::Boolean,
|
26
26
|
default: false
|
27
|
+
prop :inline, type: Playbook::Props::Boolean,
|
28
|
+
default: false
|
27
29
|
prop :label, type: Playbook::Props::String,
|
28
30
|
default: "Date Picker"
|
29
31
|
prop :input_aria, type: Playbook::Props::Hash,
|
@@ -57,6 +59,7 @@ module Playbook
|
|
57
59
|
disableWeekdays: disable_weekdays,
|
58
60
|
format: format,
|
59
61
|
hideIcon: hide_icon,
|
62
|
+
inline: inline,
|
60
63
|
maxDate: max_date,
|
61
64
|
minDate: min_date,
|
62
65
|
mode: mode,
|
@@ -0,0 +1,17 @@
|
|
1
|
+
<%= pb_rails("date_picker", props: {
|
2
|
+
classname: "inline-date-picker",
|
3
|
+
hide_icon: true,
|
4
|
+
inline: true,
|
5
|
+
picker_id: "date-picker-inline"
|
6
|
+
}) %>
|
7
|
+
|
8
|
+
<%= javascript_tag do %>
|
9
|
+
window.addEventListener("DOMContentLoaded", (event) => {
|
10
|
+
const fpInline = document.querySelector("#date-picker-inline")._flatpickr
|
11
|
+
<!-- Display the angle-down icon when a date has been selected -->
|
12
|
+
const showAngleDownHandler = () => {
|
13
|
+
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
14
|
+
}
|
15
|
+
fpInline.config.onChange.push(showAngleDownHandler)
|
16
|
+
})
|
17
|
+
<% end %>
|
@@ -0,0 +1,26 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import DatePicker from '../_date_picker'
|
4
|
+
|
5
|
+
const DatePickerInline = (props) => {
|
6
|
+
const showAngleDownHandler = (dateSelected) => {
|
7
|
+
if (dateSelected) {
|
8
|
+
document.querySelector('.inline-date-picker').classList.add('show-angle-down-icon')
|
9
|
+
}
|
10
|
+
}
|
11
|
+
|
12
|
+
return (
|
13
|
+
<div>
|
14
|
+
<DatePicker
|
15
|
+
className="inline-date-picker"
|
16
|
+
hideIcon
|
17
|
+
inLine
|
18
|
+
onChange={showAngleDownHandler}
|
19
|
+
pickerId="date-picker-inline"
|
20
|
+
{...props}
|
21
|
+
/>
|
22
|
+
</div>
|
23
|
+
)
|
24
|
+
}
|
25
|
+
|
26
|
+
export default DatePickerInline
|
@@ -1,5 +1,5 @@
|
|
1
1
|
examples:
|
2
|
-
|
2
|
+
|
3
3
|
rails:
|
4
4
|
- date_picker_default: Default
|
5
5
|
- date_picker_hide_icon: Hide Input Icon
|
@@ -15,8 +15,9 @@ examples:
|
|
15
15
|
- date_picker_hooks: Hooks
|
16
16
|
- date_picker_year_range: Year Range
|
17
17
|
- date_picker_anti_patterns: Anti-Patterns
|
18
|
-
|
19
|
-
|
18
|
+
- date_picker_inline: Inline
|
19
|
+
|
20
|
+
|
20
21
|
react:
|
21
22
|
- date_picker_default: Default
|
22
23
|
- date_picker_hide_icon: Hide Input Icon
|
@@ -32,3 +33,4 @@ examples:
|
|
32
33
|
- date_picker_flatpickr_methods: Flatpickr Methods
|
33
34
|
- date_picker_hooks: Hooks
|
34
35
|
- date_picker_year_range: Year Range
|
36
|
+
- date_picker_inline: Inline
|
@@ -12,3 +12,4 @@ export { default as DatePickerError } from './_date_picker_error.jsx'
|
|
12
12
|
export { default as DatePickerHooks } from './_date_picker_hooks.jsx'
|
13
13
|
export { default as DatePickerFlatpickrMethods } from './_date_picker_flatpickr_methods.jsx'
|
14
14
|
export { default as DatePickerYearRange } from './_date_picker_year_range.jsx'
|
15
|
+
export { default as DatePickerInline } from './_date_picker_inline.jsx'
|
@@ -0,0 +1,169 @@
|
|
1
|
+
/*
|
2
|
+
=== Date Picker States ===
|
3
|
+
Default - No value in date picker - display grey Plus icon
|
4
|
+
Hover - No value in date picker - display blue Plus icon
|
5
|
+
- After Value in Date Picker -
|
6
|
+
Default - display grey caret icon
|
7
|
+
Hover - display blue caret icon
|
8
|
+
*/
|
9
|
+
[class^=pb_date_picker_kit] {
|
10
|
+
/*Default - No value in date picker*/
|
11
|
+
&.inline-date-picker {
|
12
|
+
&:not(:hover) {
|
13
|
+
#date-picker-inline-angle-down {
|
14
|
+
svg {
|
15
|
+
display: none;
|
16
|
+
}
|
17
|
+
}
|
18
|
+
#date-picker-inline-icon-plus {
|
19
|
+
svg {
|
20
|
+
color: $slate;
|
21
|
+
display: inline-block;
|
22
|
+
}
|
23
|
+
}
|
24
|
+
}
|
25
|
+
&:hover {
|
26
|
+
[class^="pb_text_input_kit"] .text_input_wrapper input,
|
27
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .text_input,
|
28
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
|
29
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
30
|
+
color: $primary;
|
31
|
+
}
|
32
|
+
#date-picker-inline-angle-down {
|
33
|
+
svg {
|
34
|
+
display: none;
|
35
|
+
}
|
36
|
+
}
|
37
|
+
#date-picker-inline-icon-plus {
|
38
|
+
svg {
|
39
|
+
display: inline-block;
|
40
|
+
color: $primary;
|
41
|
+
}
|
42
|
+
}
|
43
|
+
}
|
44
|
+
&.show-angle-down-icon {
|
45
|
+
&:not(:hover) {
|
46
|
+
#date-picker-inline-angle-down {
|
47
|
+
svg {
|
48
|
+
display: inline-block;
|
49
|
+
color: $text_lt_light;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
#date-picker-inline-icon-plus {
|
53
|
+
svg {
|
54
|
+
display: none;
|
55
|
+
}
|
56
|
+
}
|
57
|
+
}
|
58
|
+
#date-picker-inline-icon-plus {
|
59
|
+
svg {
|
60
|
+
display: none;
|
61
|
+
}
|
62
|
+
}
|
63
|
+
#date-picker-inline-angle-down {
|
64
|
+
svg {
|
65
|
+
display: inline-block;
|
66
|
+
color: $primary;
|
67
|
+
}
|
68
|
+
}
|
69
|
+
}
|
70
|
+
#date-picker-inline,
|
71
|
+
#date-picker-inline .active {
|
72
|
+
border: none;
|
73
|
+
padding: 5px 5px 5px 10px;
|
74
|
+
background-color: #FFF;
|
75
|
+
&:hover {
|
76
|
+
background: rgba(0,130,255,0.1);
|
77
|
+
transition: background-color 0.2s ease;
|
78
|
+
box-shadow: none;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
#date-picker-inline-angle-down,
|
82
|
+
#date-picker-inline-icon-plus {
|
83
|
+
height: 33px;
|
84
|
+
border: none;
|
85
|
+
}
|
86
|
+
}
|
87
|
+
}
|
88
|
+
|
89
|
+
/*
|
90
|
+
DARK MODE
|
91
|
+
*/
|
92
|
+
[class^=pb_date_picker_kit].dark {
|
93
|
+
&.inline-date-picker {
|
94
|
+
&:not(:hover) {
|
95
|
+
#date-picker-inline-angle-down {
|
96
|
+
svg {
|
97
|
+
display: none;
|
98
|
+
}
|
99
|
+
}
|
100
|
+
#date-picker-inline-icon-plus {
|
101
|
+
svg {
|
102
|
+
display: inline-block;
|
103
|
+
color: $white;
|
104
|
+
}
|
105
|
+
}
|
106
|
+
}
|
107
|
+
&:hover {
|
108
|
+
[class^="pb_text_input_kit"] .text_input_wrapper input,
|
109
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .text_input,
|
110
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper input::placeholder,
|
111
|
+
[class^="pb_text_input_kit"] .text_input_wrapper .flatpickr-wrapper .text_input .placeholder {
|
112
|
+
color: $white;
|
113
|
+
}
|
114
|
+
#date-picker-inline-angle-down {
|
115
|
+
svg {
|
116
|
+
display: none;
|
117
|
+
}
|
118
|
+
}
|
119
|
+
#date-picker-inline-icon-plus {
|
120
|
+
svg {
|
121
|
+
display: inline-block;
|
122
|
+
color: $white;
|
123
|
+
}
|
124
|
+
}
|
125
|
+
}
|
126
|
+
&.show-angle-down-icon {
|
127
|
+
&:not(:hover) {
|
128
|
+
#date-picker-inline-angle-down {
|
129
|
+
svg {
|
130
|
+
display: inline-block;
|
131
|
+
color: $white;
|
132
|
+
}
|
133
|
+
}
|
134
|
+
#date-picker-inline-icon-plus {
|
135
|
+
svg {
|
136
|
+
display: none;
|
137
|
+
}
|
138
|
+
}
|
139
|
+
}
|
140
|
+
#date-picker-inline-icon-plus {
|
141
|
+
svg {
|
142
|
+
display: none;
|
143
|
+
}
|
144
|
+
}
|
145
|
+
#date-picker-inline-angle-down {
|
146
|
+
svg {
|
147
|
+
display: inline-block;
|
148
|
+
color: $white;
|
149
|
+
}
|
150
|
+
}
|
151
|
+
}
|
152
|
+
#date-picker-inline,
|
153
|
+
#date-picker-inline .active {
|
154
|
+
background-color: rgba($white,.10);
|
155
|
+
border: none;
|
156
|
+
padding: 5px 5px 5px 10px;
|
157
|
+
&:hover {
|
158
|
+
background: rgba(0,130,255,0.1);
|
159
|
+
transition: background-color 0.2s ease;
|
160
|
+
box-shadow: none;
|
161
|
+
}
|
162
|
+
}
|
163
|
+
#date-picker-inline-angle-down,
|
164
|
+
#date-picker-inline-icon-plus {
|
165
|
+
height: 33px;
|
166
|
+
border: none;
|
167
|
+
}
|
168
|
+
}
|
169
|
+
}
|
@@ -103,13 +103,13 @@ const Dialog = (props: DialogProps) => {
|
|
103
103
|
{...ariaProps}
|
104
104
|
{...dataProps}
|
105
105
|
className={classes}
|
106
|
-
id={id}
|
107
106
|
>
|
108
107
|
<Modal
|
109
108
|
ariaHideApp={false}
|
110
109
|
className={dialogClassNames}
|
111
110
|
closeTimeoutMS={200}
|
112
111
|
contentLabel="Minimal Modal Example"
|
112
|
+
id={id}
|
113
113
|
isOpen={modalIsOpened}
|
114
114
|
onRequestClose={onClose}
|
115
115
|
overlayClassName={overlayClassNames}
|
@@ -1,6 +1,10 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
3
|
|
4
|
+
const SortingChangeCallback = (sortOptions) => {
|
5
|
+
alert(JSON.stringify(sortOptions[0]))
|
6
|
+
}
|
7
|
+
|
4
8
|
const FilterDefault = (props) => {
|
5
9
|
const options = [
|
6
10
|
{ value: 'USA' },
|
@@ -18,6 +22,7 @@ const FilterDefault = (props) => {
|
|
18
22
|
'Full Name': 'John Wick',
|
19
23
|
'City': 'San Francisco',
|
20
24
|
}}
|
25
|
+
onSortChange={SortingChangeCallback}
|
21
26
|
results={1}
|
22
27
|
sortOptions={{
|
23
28
|
popularity: 'Popularity',
|
@@ -62,6 +67,7 @@ const FilterDefault = (props) => {
|
|
62
67
|
|
63
68
|
<Filter
|
64
69
|
double
|
70
|
+
onSortChange={SortingChangeCallback}
|
65
71
|
results={1}
|
66
72
|
sortOptions={{
|
67
73
|
popularity: 'Popularity',
|
@@ -115,9 +115,10 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
115
115
|
const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
|
116
116
|
if (!trixEditorContainer) return
|
117
117
|
|
118
|
-
|
119
|
-
|
120
|
-
|
118
|
+
const anchorElement = clickedElement.closest('a')
|
119
|
+
if (!anchorElement) return
|
120
|
+
|
121
|
+
if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
|
121
122
|
}
|
122
123
|
|
123
124
|
const handleClick = (event) => {
|
@@ -20,6 +20,7 @@ type TextareaProps = {
|
|
20
20
|
disabled?: boolean,
|
21
21
|
error?: string,
|
22
22
|
id?: string,
|
23
|
+
inline?: boolean,
|
23
24
|
object?: string,
|
24
25
|
method?: string,
|
25
26
|
label?: string,
|
@@ -38,6 +39,7 @@ const Textarea = ({
|
|
38
39
|
className,
|
39
40
|
children,
|
40
41
|
disabled,
|
42
|
+
inline = false,
|
41
43
|
resize = 'none',
|
42
44
|
error,
|
43
45
|
label,
|
@@ -58,8 +60,9 @@ const Textarea = ({
|
|
58
60
|
})
|
59
61
|
|
60
62
|
const errorClass = error ? 'error' : null
|
63
|
+
const inlineClass = inline ? 'inline' : ''
|
61
64
|
const resizeClass = `resize_${resize}`
|
62
|
-
const classes = classnames('pb_textarea_kit', errorClass, resizeClass, globalProps(props), className)
|
65
|
+
const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
|
63
66
|
|
64
67
|
const characterCounter = () => {
|
65
68
|
return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : checkIfZero(characterCount)
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React, { useState } from 'react'
|
2
|
+
|
3
|
+
import Textarea from '../_textarea'
|
4
|
+
|
5
|
+
const TextareaInline = (props) => {
|
6
|
+
const [value, setValue] = useState('Try clicking into this text.')
|
7
|
+
const handleChange = (event) => {
|
8
|
+
setValue(event.target.value)
|
9
|
+
}
|
10
|
+
return (
|
11
|
+
<div>
|
12
|
+
<Textarea
|
13
|
+
inline
|
14
|
+
onChange={(e) => handleChange(e)}
|
15
|
+
resize="auto"
|
16
|
+
rows={1}
|
17
|
+
value={value}
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
</div>
|
21
|
+
)
|
22
|
+
}
|
23
|
+
|
24
|
+
export default TextareaInline
|
@@ -6,6 +6,7 @@ examples:
|
|
6
6
|
- textarea_resize: Resize
|
7
7
|
- textarea_error: Textarea w/ Error
|
8
8
|
- textarea_character_counter: Character Counter
|
9
|
+
- textarea_inline: Inline
|
9
10
|
|
10
11
|
react:
|
11
12
|
- textarea_default: Default
|
@@ -13,3 +14,4 @@ examples:
|
|
13
14
|
- textarea_resize: Resize
|
14
15
|
- textarea_error: Textarea w/ Error
|
15
16
|
- textarea_character_counter: Character Counter
|
17
|
+
- textarea_inline: Inline
|
@@ -3,3 +3,4 @@ export { default as TextareaResize } from './_textarea_resize.jsx'
|
|
3
3
|
export { default as TextareaCustom } from './_textarea_custom.jsx'
|
4
4
|
export { default as TextareaError } from './_textarea_error.jsx'
|
5
5
|
export { default as TextareaCharacterCounter } from './_textarea_character_counter.jsx'
|
6
|
+
export { default as TextareaInline } from './_textarea_inline.jsx'
|
@@ -4,6 +4,8 @@ module Playbook
|
|
4
4
|
module PbTextarea
|
5
5
|
class Textarea < Playbook::KitBase
|
6
6
|
prop :error
|
7
|
+
prop :inline, type: Playbook::Props::Boolean,
|
8
|
+
default: false
|
7
9
|
prop :label
|
8
10
|
prop :method
|
9
11
|
prop :name
|
@@ -19,7 +21,7 @@ module Playbook
|
|
19
21
|
prop :max_characters
|
20
22
|
|
21
23
|
def classname
|
22
|
-
generate_classname("pb_textarea_kit") + error_class + resize_class
|
24
|
+
generate_classname("pb_textarea_kit") + error_class + resize_class + inline_class
|
23
25
|
end
|
24
26
|
|
25
27
|
def character_counter
|
@@ -32,6 +34,10 @@ module Playbook
|
|
32
34
|
error ? " error" : ""
|
33
35
|
end
|
34
36
|
|
37
|
+
def inline_class
|
38
|
+
inline ? " inline" : ""
|
39
|
+
end
|
40
|
+
|
35
41
|
def resize_class
|
36
42
|
" resize_#{resize}"
|
37
43
|
end
|
data/lib/playbook/version.rb
CHANGED
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: 10.
|
4
|
+
version: 10.8.1.pre.alpha.flexdeps
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Power UX
|
@@ -9,7 +9,7 @@ authors:
|
|
9
9
|
autorequire:
|
10
10
|
bindir: bin
|
11
11
|
cert_chain: []
|
12
|
-
date: 2021-
|
12
|
+
date: 2021-09-20 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -18,9 +18,6 @@ dependencies:
|
|
18
18
|
- - ">="
|
19
19
|
- !ruby/object:Gem::Version
|
20
20
|
version: 5.2.4.5
|
21
|
-
- - "<"
|
22
|
-
- !ruby/object:Gem::Version
|
23
|
-
version: '6.0'
|
24
21
|
type: :runtime
|
25
22
|
prerelease: false
|
26
23
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -28,9 +25,6 @@ dependencies:
|
|
28
25
|
- - ">="
|
29
26
|
- !ruby/object:Gem::Version
|
30
27
|
version: 5.2.4.5
|
31
|
-
- - "<"
|
32
|
-
- !ruby/object:Gem::Version
|
33
|
-
version: '6.0'
|
34
28
|
- !ruby/object:Gem::Dependency
|
35
29
|
name: actionview
|
36
30
|
requirement: !ruby/object:Gem::Requirement
|
@@ -38,9 +32,6 @@ dependencies:
|
|
38
32
|
- - ">="
|
39
33
|
- !ruby/object:Gem::Version
|
40
34
|
version: 5.2.4.5
|
41
|
-
- - "<"
|
42
|
-
- !ruby/object:Gem::Version
|
43
|
-
version: '6.0'
|
44
35
|
type: :runtime
|
45
36
|
prerelease: false
|
46
37
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -48,9 +39,6 @@ dependencies:
|
|
48
39
|
- - ">="
|
49
40
|
- !ruby/object:Gem::Version
|
50
41
|
version: 5.2.4.5
|
51
|
-
- - "<"
|
52
|
-
- !ruby/object:Gem::Version
|
53
|
-
version: '6.0'
|
54
42
|
- !ruby/object:Gem::Dependency
|
55
43
|
name: activesupport
|
56
44
|
requirement: !ruby/object:Gem::Requirement
|
@@ -58,9 +46,6 @@ dependencies:
|
|
58
46
|
- - ">="
|
59
47
|
- !ruby/object:Gem::Version
|
60
48
|
version: 5.2.4.5
|
61
|
-
- - "<"
|
62
|
-
- !ruby/object:Gem::Version
|
63
|
-
version: '6.0'
|
64
49
|
type: :runtime
|
65
50
|
prerelease: false
|
66
51
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -68,9 +53,6 @@ dependencies:
|
|
68
53
|
- - ">="
|
69
54
|
- !ruby/object:Gem::Version
|
70
55
|
version: 5.2.4.5
|
71
|
-
- - "<"
|
72
|
-
- !ruby/object:Gem::Version
|
73
|
-
version: '6.0'
|
74
56
|
- !ruby/object:Gem::Dependency
|
75
57
|
name: react-rails
|
76
58
|
requirement: !ruby/object:Gem::Requirement
|
@@ -169,20 +151,6 @@ dependencies:
|
|
169
151
|
- - '='
|
170
152
|
- !ruby/object:Gem::Version
|
171
153
|
version: 1.15.2
|
172
|
-
- !ruby/object:Gem::Dependency
|
173
|
-
name: overcommit
|
174
|
-
requirement: !ruby/object:Gem::Requirement
|
175
|
-
requirements:
|
176
|
-
- - '='
|
177
|
-
- !ruby/object:Gem::Version
|
178
|
-
version: 0.49.0
|
179
|
-
type: :development
|
180
|
-
prerelease: false
|
181
|
-
version_requirements: !ruby/object:Gem::Requirement
|
182
|
-
requirements:
|
183
|
-
- - '='
|
184
|
-
- !ruby/object:Gem::Version
|
185
|
-
version: 0.49.0
|
186
154
|
- !ruby/object:Gem::Dependency
|
187
155
|
name: rails
|
188
156
|
requirement: !ruby/object:Gem::Requirement
|
@@ -190,9 +158,6 @@ dependencies:
|
|
190
158
|
- - ">="
|
191
159
|
- !ruby/object:Gem::Version
|
192
160
|
version: 5.2.4.5
|
193
|
-
- - "<"
|
194
|
-
- !ruby/object:Gem::Version
|
195
|
-
version: '6.0'
|
196
161
|
type: :development
|
197
162
|
prerelease: false
|
198
163
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -200,9 +165,6 @@ dependencies:
|
|
200
165
|
- - ">="
|
201
166
|
- !ruby/object:Gem::Version
|
202
167
|
version: 5.2.4.5
|
203
|
-
- - "<"
|
204
|
-
- !ruby/object:Gem::Version
|
205
|
-
version: '6.0'
|
206
168
|
- !ruby/object:Gem::Dependency
|
207
169
|
name: rspec-html-matchers
|
208
170
|
requirement: !ruby/object:Gem::Requirement
|
@@ -301,7 +263,6 @@ executables: []
|
|
301
263
|
extensions: []
|
302
264
|
extra_rdoc_files: []
|
303
265
|
files:
|
304
|
-
- README.md
|
305
266
|
- Rakefile
|
306
267
|
- app/pb_kits/playbook/_playbook.scss
|
307
268
|
- app/pb_kits/playbook/_reset.scss
|
@@ -661,6 +622,8 @@ files:
|
|
661
622
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
|
662
623
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
|
663
624
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
|
625
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb
|
626
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx
|
664
627
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
|
665
628
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
|
666
629
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
|
@@ -683,6 +646,7 @@ files:
|
|
683
646
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
|
684
647
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
|
685
648
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
|
649
|
+
- app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
|
686
650
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
|
687
651
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
|
688
652
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -1750,6 +1714,8 @@ files:
|
|
1750
1714
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
|
1751
1715
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
|
1752
1716
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
|
1717
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
1718
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
1753
1719
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
1754
1720
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
1755
1721
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
data/README.md
DELETED
@@ -1,73 +0,0 @@
|
|
1
|
-
# Playbook Design System
|
2
|
-
|
3
|
-
Playbook is the first design system built for both Rails & React interfaces. Inspired by [Velocity](https://www.invisionapp.com/inside-design/design-resources/design-system-dashboard-ui-kit/), Playbook takes a modern design approach, and applies it in a way that makes it easy to support bleeding edge, or legacy systems. Playbook is built & maintained by the User Experience & Development teams at Power Home Remodeling, the largest home remodeler in the US.
|
4
|
-
|
5
|
-
## Requirements
|
6
|
-
|
7
|
-
- Docker 17.09 or later
|
8
|
-
- Docker Compose 1.17.1 or later
|
9
|
-
|
10
|
-
## Getting started
|
11
|
-
|
12
|
-
1. Run `make it`
|
13
|
-
1. Install overcommit hooks `bin/overcommit`
|
14
|
-
1. open [http://localhost:8089](http://localhost:8089)
|
15
|
-
|
16
|
-
To clean up this project from your local machine, run `make stop`, which will drop all containers and networks associated with this project. To purge all resources, do `make clean`, which also removes images and volumes for a blank slate.
|
17
|
-
|
18
|
-
|
19
|
-
<details><summary>Making changes to the Gemfile:</summary>
|
20
|
-
<p>
|
21
|
-
|
22
|
-
* Stop the `make start` process
|
23
|
-
* Run `make bundle` to (un-)install gems and update the `Gemfile.lock`
|
24
|
-
* Re-start the server with `make start`
|
25
|
-
|
26
|
-
To run the tests, do `bin/test`. To launch a shell in the container run `make shell`, or to launch a Rails console run `make console`
|
27
|
-
|
28
|
-
</p>
|
29
|
-
</details>
|
30
|
-
|
31
|
-
## Additional resources
|
32
|
-
|
33
|
-
### Upgrading between versions
|
34
|
-
|
35
|
-
See [docs/upgrade-guide](./docs/upgrade-guide)
|
36
|
-
|
37
|
-
### Releases
|
38
|
-
|
39
|
-
* [Playbook Releases](https://github.com/powerhome/playbook/wiki/Playbook-Releases)
|
40
|
-
|
41
|
-
### Development Environment
|
42
|
-
|
43
|
-
* [Common Errors & Solutions](https://github.com/powerhome/playbook/wiki/Common-Errors-&-Solutions)
|
44
|
-
|
45
|
-
### Reset.css
|
46
|
-
|
47
|
-
Playbook provides it's own `reset.css` boilerplate for optional use in your application. You can either:
|
48
|
-
|
49
|
-
1. Import the `dist/reset.css` from the playbook_ui gem into your Rails view: `@import "reset.css"` (note: your path may vary depending on your application's asset paths)
|
50
|
-
2. Import or include the file via the npm package: `import 'reset.css'` (note: your path may vary depending on your application's node-sass `includePaths`)
|
51
|
-
|
52
|
-
This asset aims to provide a commonly styles base for supported browsers.
|
53
|
-
|
54
|
-
### Building Playbook Kits
|
55
|
-
|
56
|
-
* [Generating a Kit](https://github.com/powerhome/playbook/wiki/Generating-a-Kit)
|
57
|
-
* [Rails Kit](https://github.com/powerhome/playbook/wiki/Rails-Kit)
|
58
|
-
* [Rails Kit Helpers](https://github.com/powerhome/playbook/wiki/Rails-Kit-Helpers)
|
59
|
-
* [Using a Kit within a Kit](https://github.com/powerhome/playbook/wiki/Using-a-Kit-within-a-Kit)
|
60
|
-
* [Understanding Rails Kit HTML Wrapper](https://github.com/powerhome/playbook/wiki/Understanding-Rails-Kit-HTML-Wrapper)
|
61
|
-
* [Kit Stylesheet](https://github.com/powerhome/playbook/wiki/Kit-Stylesheet)
|
62
|
-
|
63
|
-
### Testing Playbook Kits Locally
|
64
|
-
|
65
|
-
#### Testing React Kits locally
|
66
|
-
1. Inside of your Playbook repository, run `yarn link`.
|
67
|
-
2. Inside of the directory you want to test with playbook, run `yarn link playbook-ui`.
|
68
|
-
3. Run `yarn hmr` in your directory you want to test with playbook, and hard refresh (command + shift + R) your browser.
|
69
|
-
4. Test all the things!
|
70
|
-
5. When finished, inside of the directory you want to test with playbook, run `yarn unlink playbook-ui`.
|
71
|
-
6. Inside of your Playbook repository, run `yarn unlink`.
|
72
|
-
|
73
|
-
Keep in mind: Styles are brought in from playbook through the rails gem, so you will not be able to test scss updates with yarn linking.
|