playbook_ui 10.6.2.pre.alpha.dep → 10.9.0.pre.alpha1
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/dist/reset.css +1 -60
- data/lib/playbook/version.rb +2 -2
- metadata +7 -17
- 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: 0f41755bbc837eb37df7584ecc4025c5dd255f89fdc3788ad314a820ebfb599b
|
4
|
+
data.tar.gz: 03cf4ef976924745af89a4f801e82e23842b9e7646ef108ccd52c8c86f9b5ff8
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: d7d35bbfb68a3bd769430e100dec90b7ccb942764965af94da821cb6d8a3ec2f9d81135e9480200598b8c868bd7369d56deaff5b864181711fa7b416b4fbbc39
|
7
|
+
data.tar.gz: 756c55c68d59f56ba7299812b6d113542fa3461a49ab5a3835fb23bbe925d311685108e4642a016b414399d360365fab3f4495f355b8517d223339a7e7bb11e7
|
@@ -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/dist/reset.css
CHANGED
@@ -1,61 +1,2 @@
|
|
1
|
-
|
2
|
-
/* Headings */
|
3
|
-
/* Standard Font Weights */
|
4
|
-
/* Non_Standard Font Weights */
|
5
|
-
/*=====================================
|
6
|
-
Base colors should not be documented.
|
7
|
-
Only document color use.
|
8
|
-
|
9
|
-
Colors -----------------------------*/
|
10
|
-
/* Specialty Gradient -----------------*/
|
11
|
-
/* Interface colors -------------------*/
|
12
|
-
/* Main colors ------------------------*/
|
13
|
-
/*=====================================
|
14
|
-
|
15
|
-
Background colors ------------------*/
|
16
|
-
/* Card colors ------------------*/
|
17
|
-
/* Active colors ----------------------*/
|
18
|
-
/* Hover colors -----------------------*/
|
19
|
-
/* Focus colors -----------------------*/
|
20
|
-
/* Border colors ----------------------*/
|
21
|
-
/* Shadow colors ----------------------*/
|
22
|
-
/* Text colors ------------------------*/
|
23
|
-
/* Data colors ------------------------*/
|
24
|
-
/* Status colors ----------------------*/
|
25
|
-
/* Link colors ------------------------*/
|
26
|
-
/* Product colors ---------------------*/
|
27
|
-
/* Category colors ---------------------*/
|
28
|
-
* {
|
29
|
-
box-sizing: border-box;
|
30
|
-
margin: 0;
|
31
|
-
padding: 0; }
|
32
|
-
*:before, *:after {
|
33
|
-
box-sizing: border-box; }
|
34
|
-
|
35
|
-
html {
|
36
|
-
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
37
|
-
height: 100vh;
|
38
|
-
overflow-x: hidden; }
|
39
|
-
|
40
|
-
body {
|
41
|
-
font-family: "Proxima Nova", "Helvetica Neue", Helvetica, Arial, sans_serif;
|
42
|
-
font-size: 16px;
|
43
|
-
line-height: 1.5;
|
44
|
-
background-color: #F3F7FB;
|
45
|
-
height: 100%;
|
46
|
-
letter-spacing: 0;
|
47
|
-
font-weight: 400;
|
48
|
-
font-style: normal;
|
49
|
-
text-rendering: optimizeLegibility;
|
50
|
-
-moz-font-feature-settings: "liga" on;
|
51
|
-
color: #242B42;
|
52
|
-
margin: 0 !important;
|
53
|
-
padding: 0 !important;
|
54
|
-
box-sizing: border-box;
|
55
|
-
min-height: 100vh;
|
56
|
-
padding: 50px; }
|
57
|
-
|
58
|
-
a {
|
59
|
-
text-decoration: none;
|
60
|
-
color: #0056CF; }
|
1
|
+
*{box-sizing:border-box;margin:0;padding:0}*:before,*:after{box-sizing:border-box}html{-webkit-tap-highlight-color:rgba(0,0,0,0);height:100vh;overflow-x:hidden}body{font-family:"Proxima Nova","Helvetica Neue",Helvetica,Arial,sans_serif;font-size:16px;line-height:1.5;background-color:#F3F7FB;height:100%;letter-spacing:0;font-weight:400;font-style:normal;text-rendering:optimizeLegibility;-moz-font-feature-settings:"liga" on;color:#242B42;margin:0 !important;padding:0 !important;box-sizing:border-box;min-height:100vh;padding:50px}a{text-decoration:none;color:#0056CF}
|
61
2
|
|
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.9.0.pre.alpha1
|
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-16 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -169,20 +169,6 @@ dependencies:
|
|
169
169
|
- - '='
|
170
170
|
- !ruby/object:Gem::Version
|
171
171
|
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
172
|
- !ruby/object:Gem::Dependency
|
187
173
|
name: rails
|
188
174
|
requirement: !ruby/object:Gem::Requirement
|
@@ -301,7 +287,6 @@ executables: []
|
|
301
287
|
extensions: []
|
302
288
|
extra_rdoc_files: []
|
303
289
|
files:
|
304
|
-
- README.md
|
305
290
|
- Rakefile
|
306
291
|
- app/pb_kits/playbook/_playbook.scss
|
307
292
|
- app/pb_kits/playbook/_reset.scss
|
@@ -661,6 +646,8 @@ files:
|
|
661
646
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.html.erb
|
662
647
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.jsx
|
663
648
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_hooks.md
|
649
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb
|
650
|
+
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.jsx
|
664
651
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.html.erb
|
665
652
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.jsx
|
666
653
|
- app/pb_kits/playbook/pb_date_picker/docs/_date_picker_input.md
|
@@ -683,6 +670,7 @@ files:
|
|
683
670
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_day_styles.scss
|
684
671
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_flatpickr_styles.scss
|
685
672
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss
|
673
|
+
- app/pb_kits/playbook/pb_date_picker/sass_partials/_inline_styles.scss
|
686
674
|
- app/pb_kits/playbook/pb_date_picker/sass_partials/_overrides.scss
|
687
675
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.jsx
|
688
676
|
- app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.scss
|
@@ -1750,6 +1738,8 @@ files:
|
|
1750
1738
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
|
1751
1739
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
|
1752
1740
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.md
|
1741
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.html.erb
|
1742
|
+
- app/pb_kits/playbook/pb_textarea/docs/_textarea_inline.jsx
|
1753
1743
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
1754
1744
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
1755
1745
|
- 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.
|