playbook_ui 10.6.1.pre.alpha1 → 10.8.0
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 +22 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.scss +45 -22
- data/app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js +10 -0
- 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 +10 -19
- 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: 2471fff370fba75829b1aea82b969d2d3ad9ac878bd3a209b17c4346e45e747e
|
4
|
+
data.tar.gz: 0525d0c43f7e242fcefa263bc5a172ddf0d62b2b593b7046fb33c8ab5b9595bf
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: c261cbc628a7cb2ee1c34e0c0164e959cf3eae35486e1472b7620448faf0b72ff83890b4edb7368667183914c80765d3f85348009c33f3e0f8aa5bfedc52e612
|
7
|
+
data.tar.gz: e9fef8249f6f1da0756ae5a2b8daabf8809bd6eb1fcc5adf45b6bb4fa499a35c1c25e683587cea173c59e401799da961c6217ca40baa62fee009a4631554ac8a
|
@@ -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',
|
@@ -2,6 +2,7 @@
|
|
2
2
|
|
3
3
|
import React, { useEffect, useRef } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
|
+
import inlineFocus from './inlineFocus'
|
5
6
|
import useFocus from './useFocus'
|
6
7
|
import { globalProps } from '../utilities/globalProps'
|
7
8
|
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
@@ -107,6 +108,27 @@ const RichTextEditor = (props: RichTextEditorProps) => {
|
|
107
108
|
useFocus())
|
108
109
|
: null
|
109
110
|
|
111
|
+
document.addEventListener('trix-focus', inlineFocus)
|
112
|
+
document.addEventListener('trix-blur', inlineFocus)
|
113
|
+
|
114
|
+
const handleAnchorElementClick = (clickedElement) => {
|
115
|
+
const trixEditorContainer = clickedElement.closest('.pb_rich_text_editor_kit')
|
116
|
+
if (!trixEditorContainer) return
|
117
|
+
|
118
|
+
const anchorElement = clickedElement.closest('a')
|
119
|
+
if (!anchorElement) return
|
120
|
+
|
121
|
+
if (anchorElement.hasAttribute('href')) window.open(anchorElement.href)
|
122
|
+
}
|
123
|
+
|
124
|
+
const handleClick = (event) => {
|
125
|
+
handleAnchorElementClick(event.target)
|
126
|
+
}
|
127
|
+
|
128
|
+
useEffect(() => {
|
129
|
+
trixRef.current.addEventListener('click', handleClick)
|
130
|
+
}, [])
|
131
|
+
|
110
132
|
const RichTextEditorClass = 'pb_rich_text_editor_kit'
|
111
133
|
const SimpleClass = simple ? 'simple' : ''
|
112
134
|
const FocusClass = focus ? 'focus-editor-targets' : ''
|
@@ -89,6 +89,12 @@
|
|
89
89
|
@include pb_textarea_light;
|
90
90
|
border-top-left-radius: 0;
|
91
91
|
border-top-right-radius: 0;
|
92
|
+
&:empty:not(:focus)::before {
|
93
|
+
color: $text_lt_light;
|
94
|
+
}
|
95
|
+
a {
|
96
|
+
cursor: pointer;
|
97
|
+
}
|
92
98
|
}
|
93
99
|
trix-toolbar {
|
94
100
|
.trix-button--icon {
|
@@ -116,7 +122,7 @@
|
|
116
122
|
background: $bg_light;
|
117
123
|
}
|
118
124
|
}
|
119
|
-
}
|
125
|
+
}
|
120
126
|
}
|
121
127
|
button.trix-button.trix-button--icon.trix-button {
|
122
128
|
&:hover{
|
@@ -124,21 +130,21 @@
|
|
124
130
|
}
|
125
131
|
}
|
126
132
|
}
|
127
|
-
// Trix doesn't provide customization to their icons.
|
133
|
+
// Trix doesn't provide customization to their icons.
|
128
134
|
// https://github.com/basecamp/trix/issues/464#issuecomment-564683997
|
129
135
|
&[class*=dark] {
|
130
136
|
// Dark SVG Icon Styles
|
131
137
|
.trix-button--icon-bold::before {
|
132
|
-
background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
138
|
+
background-image: url("data:image/svg+xml,%3Csvg width='11px' height='14px' viewBox='0 0 11 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-19.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M20.6,16.79 C21.565,16.115 22.25,15.025 22.25,14 C22.25,11.745 20.505,10 18.25,10 L12,10 L12,24 L19.04,24 C21.135,24 22.75,22.3 22.75,20.21 C22.75,18.69 21.885,17.395 20.6,16.79 Z M15,12.5 L18,12.5 C18.83,12.5 19.5,13.17 19.5,14 C19.5,14.83 18.83,15.5 18,15.5 L15,15.5 L15,12.5 L15,12.5 Z M18.5,21.5 L15,21.5 L15,18.5 L18.5,18.5 C19.33,18.5 20,19.17 20,20 C20,20.83 19.33,21.5 18.5,21.5 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
133
139
|
}
|
134
140
|
.trix-button--icon-italic::before {
|
135
|
-
background-image: url("data:image/svg+xml,%3Csvg width='12px' height='14px' viewBox='0 0 12 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-52.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpolygon id='Shape' points='49 10 49 13 51.215 13 47.785 21 45 21 45 24 53 24 53 21 50.785 21 54.215 13 57 13 57 10'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
141
|
+
background-image: url("data:image/svg+xml,%3Csvg width='12px' height='14px' viewBox='0 0 12 14' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-52.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpolygon id='Shape' points='49 10 49 13 51.215 13 47.785 21 45 21 45 24 53 24 53 21 50.785 21 54.215 13 57 13 57 10'%3E%3C/polygon%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
136
142
|
}
|
137
143
|
.trix-button--icon-strike::before {
|
138
|
-
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-83.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M90.938,19.2 C90.979,19.439 91,19.69 91,19.954 C91,20.823 90.753,21.594 90.259,22.268 C89.765,22.942 89.052,23.466 88.121,23.84 C87.19,24.213 86.098,24.4 84.845,24.4 C83.799,24.4 82.9219,24.335 82.2129,24.204 C81.5039,24.073 80.7663,23.844 80,23.519 L80,23.519 L80,20.146 C80.8092,20.517 81.6507,20.806 82.5244,21.013 C83.398,21.221 84.2,21.325 84.931,21.325 C85.561,21.325 86.023,21.227 86.316,21.032 C86.61,20.838 86.757,20.587 86.757,20.28 C86.757,20.089 86.698,19.921 86.58,19.777 C86.461,19.634 86.272,19.488 86.01,19.341 C85.944,19.304 85.85,19.257 85.728,19.2 L85.728,19.2 Z M94,16.2 L94,18.2 L76,18.2 L76,16.2 L94,16.2 Z M86.026,10 C87.652,10 89.31,10.3353 91,11.006 L89.7,13.9281 C88.232,13.3277 86.965,13.0275 85.897,13.0275 C85.346,13.0275 84.945,13.1138 84.694,13.2862 C84.444,13.4587 84.318,13.6727 84.318,13.9281 C84.318,14.2028 84.478,14.4487 84.796,14.6659 C84.975,14.7877 85.326,14.9657 85.848,15.2 L80.2303,15.2 C80.1484,14.8642 80.1074,14.4978 80.1074,14.1006 C80.1074,12.8104 80.6338,11.8044 81.6865,11.0826 C82.7393,10.3609 84.186,10 86.026,10 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
144
|
+
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='15px' viewBox='0 0 18 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-83.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M90.938,19.2 C90.979,19.439 91,19.69 91,19.954 C91,20.823 90.753,21.594 90.259,22.268 C89.765,22.942 89.052,23.466 88.121,23.84 C87.19,24.213 86.098,24.4 84.845,24.4 C83.799,24.4 82.9219,24.335 82.2129,24.204 C81.5039,24.073 80.7663,23.844 80,23.519 L80,23.519 L80,20.146 C80.8092,20.517 81.6507,20.806 82.5244,21.013 C83.398,21.221 84.2,21.325 84.931,21.325 C85.561,21.325 86.023,21.227 86.316,21.032 C86.61,20.838 86.757,20.587 86.757,20.28 C86.757,20.089 86.698,19.921 86.58,19.777 C86.461,19.634 86.272,19.488 86.01,19.341 C85.944,19.304 85.85,19.257 85.728,19.2 L85.728,19.2 Z M94,16.2 L94,18.2 L76,18.2 L76,16.2 L94,16.2 Z M86.026,10 C87.652,10 89.31,10.3353 91,11.006 L89.7,13.9281 C88.232,13.3277 86.965,13.0275 85.897,13.0275 C85.346,13.0275 84.945,13.1138 84.694,13.2862 C84.444,13.4587 84.318,13.6727 84.318,13.9281 C84.318,14.2028 84.478,14.4487 84.796,14.6659 C84.975,14.7877 85.326,14.9657 85.848,15.2 L80.2303,15.2 C80.1484,14.8642 80.1074,14.4978 80.1074,14.1006 C80.1074,12.8104 80.6338,11.8044 81.6865,11.0826 C82.7393,10.3609 84.186,10 86.026,10 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
139
145
|
}
|
140
146
|
.trix-button--icon-link::before {
|
141
|
-
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-117.000000, -15.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M120.695234,15.0178906 C122.367547,16.6902031 122.367547,19.4110156 120.695234,21.0833281 L117.320234,24.4583281 C116.510234,25.2683281 115.433047,25.7143906 114.287234,25.7143906 C113.141422,25.7143906 112.064234,25.2683281 111.254234,24.4583281 C109.581922,22.7860156 109.581922,20.0652031 111.254234,18.3928906 L113.178729,16.4902344 C113.535917,16.1330469 114.114729,16.1330469 114.471354,16.4902344 C114.827979,16.8474219 114.828542,17.4256719 114.471354,17.7828594 L112.546859,19.6855156 C111.587234,20.6451406 111.587234,22.2060781 112.546859,23.1657031 C113.011484,23.6303281 113.629672,23.8862656 114.287234,23.8862656 C114.944797,23.8862656 115.562422,23.6303281 116.027609,23.1657031 L119.402609,19.7907031 C120.362234,18.8310781 120.362234,17.2701406 119.402609,16.3105156 C119.045422,15.9533281 119.045422,15.3750781 119.402609,15.0178906 C119.759797,14.6607031 120.338047,14.6607031 120.695234,15.0178906 Z M123.287234,8 C124.433047,8 125.509672,8.4460625 126.320234,9.2560625 C127.992547,10.928375 127.992547,13.6491875 126.320234,15.3215 L124.358055,17.0365667 C124.000867,17.3937542 123.422617,17.3937542 123.06543,17.0365667 C122.708242,16.6793792 122.708242,16.1011292 123.06543,15.7439417 L125.027609,14.028875 C125.987234,13.06925 125.987234,11.5083125 125.027609,10.5486875 C124.562984,10.0840625 123.944797,9.828125 123.287234,9.828125 C122.629672,9.828125 122.012047,10.0840625 121.546859,10.5486875 L118.171859,13.9236875 C117.212234,14.8833125 117.212234,16.44425 118.171859,17.403875 C118.529047,17.7610625 118.529047,18.3393125 118.171859,18.6965 C117.993547,18.8748125 117.759547,18.96425 117.525547,18.96425 C117.291547,18.96425 117.057547,18.8748125 116.879234,18.6965 C115.206922,17.0241875 115.206922,14.303375 116.879234,12.6310625 L120.254234,9.2560625 C121.064234,8.4460625 122.141422,8 123.287234,8 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
147
|
+
background-image: url("data:image/svg+xml,%3Csvg width='18px' height='18px' viewBox='0 0 18 18' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-117.000000, -15.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling1' transform='translate(7.000000, 7.000000)'%3E%3Cpath d='M120.695234,15.0178906 C122.367547,16.6902031 122.367547,19.4110156 120.695234,21.0833281 L117.320234,24.4583281 C116.510234,25.2683281 115.433047,25.7143906 114.287234,25.7143906 C113.141422,25.7143906 112.064234,25.2683281 111.254234,24.4583281 C109.581922,22.7860156 109.581922,20.0652031 111.254234,18.3928906 L113.178729,16.4902344 C113.535917,16.1330469 114.114729,16.1330469 114.471354,16.4902344 C114.827979,16.8474219 114.828542,17.4256719 114.471354,17.7828594 L112.546859,19.6855156 C111.587234,20.6451406 111.587234,22.2060781 112.546859,23.1657031 C113.011484,23.6303281 113.629672,23.8862656 114.287234,23.8862656 C114.944797,23.8862656 115.562422,23.6303281 116.027609,23.1657031 L119.402609,19.7907031 C120.362234,18.8310781 120.362234,17.2701406 119.402609,16.3105156 C119.045422,15.9533281 119.045422,15.3750781 119.402609,15.0178906 C119.759797,14.6607031 120.338047,14.6607031 120.695234,15.0178906 Z M123.287234,8 C124.433047,8 125.509672,8.4460625 126.320234,9.2560625 C127.992547,10.928375 127.992547,13.6491875 126.320234,15.3215 L124.358055,17.0365667 C124.000867,17.3937542 123.422617,17.3937542 123.06543,17.0365667 C122.708242,16.6793792 122.708242,16.1011292 123.06543,15.7439417 L125.027609,14.028875 C125.987234,13.06925 125.987234,11.5083125 125.027609,10.5486875 C124.562984,10.0840625 123.944797,9.828125 123.287234,9.828125 C122.629672,9.828125 122.012047,10.0840625 121.546859,10.5486875 L118.171859,13.9236875 C117.212234,14.8833125 117.212234,16.44425 118.171859,17.403875 C118.529047,17.7610625 118.529047,18.3393125 118.171859,18.6965 C117.993547,18.8748125 117.759547,18.96425 117.525547,18.96425 C117.291547,18.96425 117.057547,18.8748125 116.879234,18.6965 C115.206922,17.0241875 115.206922,14.303375 116.879234,12.6310625 L120.254234,9.2560625 C121.064234,8.4460625 122.141422,8 123.287234,8 Z' id='Combined-Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
142
148
|
}
|
143
149
|
.trix-button--icon-heading-1::before {
|
144
150
|
background-image: url("data:image/svg+xml,%3Csvg width='19px' height='15px' viewBox='0 0 19 15' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-171.000000, -17.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Styling2' transform='translate(163.000000, 7.000000)'%3E%3Cpath d='M17,15.016 L17,18.016 L14,18.016 L14,25 L11,25 L11,18.016 L8,18.016 L8,15.016 L17,15.016 L17,15.016 Z M13.968,10 L26.999,10 L26.999,13 L21.983,13 L21.983,25 L18.983,25 L18.983,13 L13.967,13 L13.967,10 L13.968,10 Z' id='Shape'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
@@ -170,9 +176,9 @@
|
|
170
176
|
.trix-button--icon-redo::before {
|
171
177
|
background-image: url("data:image/svg+xml,%3Csvg width='21px' height='9px' viewBox='0 0 21 9' version='1.1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink'%3E%3Cg id='Symbols' stroke='none' stroke-width='1' fill='none' fill-rule='evenodd' fill-opacity='0.6'%3E%3Cg id='Rich-Text/Dark/Field-Only/Empty' transform='translate(-700.000000, -20.000000)' fill='%23FFFFFF' fill-rule='nonzero'%3E%3Cg id='Undo/Redo' transform='translate(659.000000, 7.000000)'%3E%3Cpath d='M57.855,16.6 C56.015,14.985 53.605,14 50.96,14 C46.31,14 42.375,17.03 41,21.22 L43.365,22 C44.415,18.805 47.415,16.5 50.96,16.5 C52.915,16.5 54.69,17.22 56.075,18.385 L52.46,22 L61.46,22 L61.46,13 L57.855,16.6 Z' id='Path'%3E%3C/path%3E%3C/g%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
|
172
178
|
}
|
173
|
-
// Dark Mode Placeholder
|
179
|
+
// Dark Mode Placeholder
|
174
180
|
trix-editor:empty:not(:focus)::before {
|
175
|
-
color:
|
181
|
+
color: rgba(255, 255, 255, .15);
|
176
182
|
}
|
177
183
|
trix-editor {
|
178
184
|
background-color: rgba($white, 0.1);
|
@@ -236,9 +242,6 @@
|
|
236
242
|
border-bottom: none;
|
237
243
|
border-bottom-left-radius: 0;
|
238
244
|
border-bottom-right-radius: 0;
|
239
|
-
&:empty:not(:focus)::before {
|
240
|
-
color: $neutral !important;
|
241
|
-
}
|
242
245
|
}
|
243
246
|
trix-toolbar .trix-button-row {
|
244
247
|
border-top: none;
|
@@ -259,14 +262,28 @@
|
|
259
262
|
}
|
260
263
|
}
|
261
264
|
&.inline {
|
265
|
+
trix-toolbar {
|
266
|
+
opacity: 0;
|
267
|
+
transition: all 0.3s ease-in-out 0s;
|
268
|
+
}
|
269
|
+
&.focused trix-toolbar {
|
270
|
+
opacity: 100;
|
271
|
+
}
|
262
272
|
&:hover {
|
273
|
+
trix-toolbar {
|
274
|
+
opacity: 100;
|
275
|
+
}
|
263
276
|
trix-editor {
|
264
277
|
@include transition_default;
|
265
278
|
border-color: $border_light;
|
266
279
|
background-color: $white;
|
267
|
-
|
268
|
-
|
269
|
-
|
280
|
+
}
|
281
|
+
// This fixes the border color when the link dialog input is focused
|
282
|
+
&:focus-within {
|
283
|
+
trix-editor {
|
284
|
+
@include transition_default;
|
285
|
+
border-color: $primary;
|
286
|
+
background-color: $focus_input_light;
|
270
287
|
}
|
271
288
|
}
|
272
289
|
}
|
@@ -274,18 +291,24 @@
|
|
274
291
|
@include transition_default;
|
275
292
|
border-color: transparent;
|
276
293
|
background-color: transparent;
|
277
|
-
&+ trix-toolbar .trix-button-row {
|
278
|
-
transition: all 0.3s ease-in-out 0s;
|
279
|
-
opacity: 0;
|
280
|
-
}
|
281
294
|
&:focus {
|
282
295
|
@include transition_default;
|
283
296
|
border-color: $primary;
|
284
297
|
background-color: $focus_input_light;
|
285
|
-
|
286
|
-
|
287
|
-
|
288
|
-
|
298
|
+
}
|
299
|
+
}
|
300
|
+
&[class*=dark]:hover {
|
301
|
+
.trix-button-row,
|
302
|
+
trix-editor {
|
303
|
+
background-color: rgba($white, 0.1);
|
304
|
+
border-color: rgba($white, 0.15);
|
305
|
+
}
|
306
|
+
}
|
307
|
+
&[class*=dark]:focus-within {
|
308
|
+
.trix-button-row,
|
309
|
+
trix-editor {
|
310
|
+
background-color: rgba($white, 0.03);
|
311
|
+
border-color: $active_dark !important;
|
289
312
|
}
|
290
313
|
}
|
291
314
|
}
|
@@ -0,0 +1,10 @@
|
|
1
|
+
const inlineFocus = () => {
|
2
|
+
const trixEditorElement = event.target
|
3
|
+
const trixEditorContainer = trixEditorElement.closest('.pb_rich_text_editor_kit')
|
4
|
+
|
5
|
+
if (!trixEditorContainer.classList.contains('inline')) return
|
6
|
+
|
7
|
+
trixEditorContainer.classList.toggle('focused')
|
8
|
+
}
|
9
|
+
|
10
|
+
export default inlineFocus
|
@@ -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.8.0
|
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-09 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
|
@@ -1468,6 +1456,7 @@ files:
|
|
1468
1456
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
1469
1457
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
|
1470
1458
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
|
1459
|
+
- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js
|
1471
1460
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
|
1472
1461
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
|
1473
1462
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
|
@@ -1749,6 +1738,8 @@ files:
|
|
1749
1738
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.html.erb
|
1750
1739
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx
|
1751
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
|
1752
1743
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.html.erb
|
1753
1744
|
- app/pb_kits/playbook/pb_textarea/docs/_textarea_resize.jsx
|
1754
1745
|
- app/pb_kits/playbook/pb_textarea/docs/example.yml
|
@@ -2081,9 +2072,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2081
2072
|
version: '0'
|
2082
2073
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2083
2074
|
requirements:
|
2084
|
-
- - "
|
2075
|
+
- - ">="
|
2085
2076
|
- !ruby/object:Gem::Version
|
2086
|
-
version:
|
2077
|
+
version: '0'
|
2087
2078
|
requirements: []
|
2088
2079
|
rubygems_version: 3.0.3
|
2089
2080
|
signing_key:
|
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.
|