playbook_ui 10.4.0 → 10.6.2.pre.alpha.dep
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/docs/_description.md +8 -0
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +12 -2
- data/app/pb_kits/playbook/pb_icon/_icon.scss +7 -2
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb +16 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_custom.md +10 -2
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.html.erb +13 -7
- data/app/pb_kits/playbook/pb_icon/icon.rb +33 -1
- data/app/pb_kits/playbook/pb_message/_message.jsx +4 -0
- data/app/pb_kits/playbook/pb_message/message.html.erb +2 -0
- data/app/pb_kits/playbook/pb_message/message.rb +1 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +21 -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_select/_select.jsx +10 -1
- data/app/pb_kits/playbook/pb_select/_select.scss +64 -1
- data/app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb +23 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline.jsx +37 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb +24 -0
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx +38 -0
- data/app/pb_kits/playbook/pb_select/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_select/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
- data/app/pb_kits/playbook/pb_select/select.rb +14 -0
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +7 -5
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +12 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +1 -0
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +2 -0
- data/dist/reset.css +60 -1
- data/lib/playbook/version.rb +2 -2
- metadata +18 -12
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 361df619e970d5e3d935da11689effd50fda787b550e94a0b2ffa918d6d4e558
|
4
|
+
data.tar.gz: 725ccf3c38f4cb117bf8845bc7d5cdf852f1146b70e632e3cc2456a354d3301b
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 00f7c8a62559d90263a71aaeba3f837c37448e170eff51eee848964321028a6fc7ac1e19a9341a98140d474adc7c9081ab40f8a004335058e6a3549602b4b3d1
|
7
|
+
data.tar.gz: 07d4883c55d61a9e8e2ced35c43d738995a4bb7fe3f8625e7d2b2744bbf0bac181846216676cf5f5e2e598a9496063ff0c476a1356e538b78e922803391b4120
|
@@ -1,3 +1,11 @@
|
|
1
1
|
Use to display the date. Year will not display if it is the current year.
|
2
2
|
|
3
3
|
`DateTime` defaults to the "America/New_York" timezone. `Date` ignores timezone.
|
4
|
+
|
5
|
+
**Please note**: this kit could potentially change the dates on you!
|
6
|
+
|
7
|
+
This is because the Javascript `Date` class does not have the concept of a date without time. If you pass a Ruby `Date` string to JavaScript, you will receive a date *and* a time which makes use of the timezone it infers from your browser based on your virtual geolocation or custom browser settings.
|
8
|
+
|
9
|
+
For example, if you pass a date like "7/2/2022" and your browser is on London time, Javascript will convert this to "7/2/2022 at 0:00 BST".
|
10
|
+
|
11
|
+
Subsequently, if you have not passed in a timezone to this kit, it will convert that time into US Eastern Time (default), making the resulting date and time "7/1/2022 at 19:00 EST". In this case the expected July 2 date will now be presented as July 1.
|
@@ -14,12 +14,14 @@ import Card from '../pb_card/_card'
|
|
14
14
|
type FileUploadProps = {
|
15
15
|
accept?: array<string>,
|
16
16
|
className?: string,
|
17
|
+
acceptedFilesDescription?: string,
|
17
18
|
onFilesAccepted: Callback,
|
18
19
|
}
|
19
20
|
|
20
21
|
const FileUpload = (props: FileUploadProps) => {
|
21
22
|
const {
|
22
|
-
accept = ['
|
23
|
+
accept = ['*'],
|
24
|
+
acceptedFilesDescription = '',
|
23
25
|
className,
|
24
26
|
onFilesAccepted = noop,
|
25
27
|
} = props
|
@@ -32,6 +34,14 @@ const FileUpload = (props: FileUploadProps) => {
|
|
32
34
|
onDrop,
|
33
35
|
})
|
34
36
|
|
37
|
+
const acceptedFileTypes = accept.map((fileType) => {
|
38
|
+
if (fileType.startsWith('image/')) {
|
39
|
+
return fileType.replace('image/', ' ')
|
40
|
+
} else {
|
41
|
+
return fileType
|
42
|
+
}
|
43
|
+
})
|
44
|
+
|
35
45
|
return (
|
36
46
|
<div
|
37
47
|
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
|
@@ -43,7 +53,7 @@ const FileUpload = (props: FileUploadProps) => {
|
|
43
53
|
<If condition={isDragActive}>
|
44
54
|
<p>{'Drop the files here ...'}</p>
|
45
55
|
<Else />
|
46
|
-
<p>{
|
56
|
+
<p>{`Choose a file or drag it here. The accepted file types are: ${acceptedFilesDescription || acceptedFileTypes}`}</p>
|
47
57
|
</If>
|
48
58
|
</Body>
|
49
59
|
</Card>
|
@@ -0,0 +1,16 @@
|
|
1
|
+
<%# SVG fill color inherited from css color property %>
|
2
|
+
<div class="icon-wrapper">
|
3
|
+
|
4
|
+
<% svg_url = "https://upload.wikimedia.org/wikipedia/commons/3/3b/Wrench_font_awesome.svg" %>
|
5
|
+
<p><%= pb_rails("icon", props: { custom_icon: svg_url } ) %></p>
|
6
|
+
<p><%= pb_rails("icon", props: { rotation: 90, custom_icon: svg_url, size: "2x" } ) %></p>
|
7
|
+
<p><%= pb_rails("icon", props: { spin: true, custom_icon: svg_url, size: "3x" } ) %></p>
|
8
|
+
<p><%= pb_rails("icon", props: { size: "5x", custom_icon: svg_url } ) %></p>
|
9
|
+
<p><%= pb_rails("icon", props: { flip: "horizontal", size: "5x", custom_icon: svg_url } ) %></p>
|
10
|
+
|
11
|
+
<%= pb_rails("body", props: {
|
12
|
+
text: "Custom icons are compatible with other icon props (size, rotation,
|
13
|
+
spin, flip, etc). Their SVG fill colors will be inherited from
|
14
|
+
parent element's css color properties."
|
15
|
+
} ) %>
|
16
|
+
</div>
|
@@ -1,4 +1,4 @@
|
|
1
|
-
|
1
|
+
# Tips for Custom Icons
|
2
2
|
|
3
3
|
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
|
4
4
|
|
@@ -8,4 +8,12 @@ Fill colors with regards to <code>g</code> or <code>path</code> nodes, e.g. <cod
|
|
8
8
|
|
9
9
|
Pay attention to your custom icon's dimensions and `viewBox` attribute. It is best to use a `viewBox="0 0 512 512"` starting point __when designing instead of trying to retrofit the viewbox afterwards__!
|
10
10
|
|
11
|
-
You must source *your own SVG into
|
11
|
+
You must source *your own SVG into component/view* you are working on. This can easily be done in programmatic and maintainable ways.
|
12
|
+
|
13
|
+
### React
|
14
|
+
|
15
|
+
So long as you have a valid React `<SVG>` node, you can send it as the `customIcon` prop and the kit will take care of the rest.
|
16
|
+
|
17
|
+
### Rails
|
18
|
+
|
19
|
+
Some Rails applications use only webpack(er) which means using `image_url` will be successful over `image_path` in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use `image_path` or `image_url`. Of course, YMMV depending on any custom configurations in your Rails application.
|
@@ -1,7 +1,13 @@
|
|
1
|
-
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
1
|
+
<% if object.custom_icon %>
|
2
|
+
<%= object.render_svg(object.custom_icon) %>
|
3
|
+
<% else %>
|
4
|
+
<%= content_tag(:i, nil,
|
5
|
+
id: object.id,
|
6
|
+
data: object.data,
|
7
|
+
class: object.classname
|
8
|
+
) %>
|
9
|
+
<%= content_tag(:span, nil,
|
10
|
+
aria: { label: "#{object.icon} icon" }.merge(object.aria),
|
11
|
+
hidden: true
|
12
|
+
) %>
|
13
|
+
<% end %>
|
@@ -1,5 +1,7 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
+
require "open-uri"
|
4
|
+
|
3
5
|
module Playbook
|
4
6
|
module PbIcon
|
5
7
|
class Icon < Playbook::KitBase
|
@@ -10,7 +12,9 @@ module Playbook
|
|
10
12
|
prop :flip, type: Playbook::Props::Enum,
|
11
13
|
values: ["horizontal", "vertical", "both", nil],
|
12
14
|
default: nil
|
13
|
-
prop :icon
|
15
|
+
prop :icon
|
16
|
+
prop :custom_icon, type: Playbook::Props::String,
|
17
|
+
default: nil
|
14
18
|
prop :inverse, type: Playbook::Props::Boolean,
|
15
19
|
default: false
|
16
20
|
prop :list_item, type: Playbook::Props::Boolean,
|
@@ -48,6 +52,34 @@ module Playbook
|
|
48
52
|
)
|
49
53
|
end
|
50
54
|
|
55
|
+
def custom_icon_classname
|
56
|
+
generate_classname(
|
57
|
+
"pb_icon_kit",
|
58
|
+
border_class,
|
59
|
+
fixed_width_class,
|
60
|
+
flip_class,
|
61
|
+
inverse_class,
|
62
|
+
list_item_class,
|
63
|
+
pull_class,
|
64
|
+
pulse_class,
|
65
|
+
rotation_class,
|
66
|
+
size_class,
|
67
|
+
spin_class,
|
68
|
+
separator: " "
|
69
|
+
)
|
70
|
+
end
|
71
|
+
|
72
|
+
def render_svg(path)
|
73
|
+
if File.extname(path) == ".svg"
|
74
|
+
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
75
|
+
svg = doc.at_css "svg"
|
76
|
+
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
77
|
+
raw doc
|
78
|
+
else
|
79
|
+
raise("Custom icon must be an svg. Please check your path and file type.")
|
80
|
+
end
|
81
|
+
end
|
82
|
+
|
51
83
|
private
|
52
84
|
|
53
85
|
def border_class
|
@@ -25,6 +25,7 @@ type MessageProps = {
|
|
25
25
|
message: string,
|
26
26
|
timestamp?: string,
|
27
27
|
timestampObject?: string,
|
28
|
+
timezone?: string,
|
28
29
|
alignTimestamp?: string,
|
29
30
|
}
|
30
31
|
|
@@ -42,6 +43,7 @@ const Message = (props: MessageProps) => {
|
|
42
43
|
message,
|
43
44
|
timestamp,
|
44
45
|
timestampObject,
|
46
|
+
timezone,
|
45
47
|
alignTimestamp = 'right',
|
46
48
|
} = props
|
47
49
|
const ariaProps = buildAriaProps(aria)
|
@@ -87,11 +89,13 @@ const Message = (props: MessageProps) => {
|
|
87
89
|
<Timestamp
|
88
90
|
className={`pull-${alignTimestamp} ${timestampObject ? 'message_humanized_time' : null}`}
|
89
91
|
text={timestamp}
|
92
|
+
timezone={timezone}
|
90
93
|
/>
|
91
94
|
<If condition={timestampObject}>
|
92
95
|
<Timestamp
|
93
96
|
className={`pull-${alignTimestamp} message_timestamp`}
|
94
97
|
timestamp={timestampObject}
|
98
|
+
timezone={timezone}
|
95
99
|
/>
|
96
100
|
</If>
|
97
101
|
</Flex>
|
@@ -23,11 +23,13 @@
|
|
23
23
|
|
24
24
|
<%= pb_rails("timestamp", props: {
|
25
25
|
text: object.timestamp,
|
26
|
+
timezone: object.timezone,
|
26
27
|
classname: "pull-#{object.align_timestamp} #{object.timestamp_object.present? ? 'message_humanized_time' : nil}"
|
27
28
|
}) %>
|
28
29
|
<% if object.timestamp_object.present? %>
|
29
30
|
<%= pb_rails("timestamp", props: {
|
30
31
|
timestamp: object.timestamp_object,
|
32
|
+
timezone: object.timezone,
|
31
33
|
classname: "pull-#{object.align_timestamp} message_timestamp"
|
32
34
|
}) %>
|
33
35
|
<% end %>
|
@@ -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,26 @@ 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
|
+
if (clickedElement.nodeName === 'A' && clickedElement.hasAttribute('href')) {
|
119
|
+
window.open(clickedElement.href)
|
120
|
+
}
|
121
|
+
}
|
122
|
+
|
123
|
+
const handleClick = (event) => {
|
124
|
+
handleAnchorElementClick(event.target)
|
125
|
+
}
|
126
|
+
|
127
|
+
useEffect(() => {
|
128
|
+
trixRef.current.addEventListener('click', handleClick)
|
129
|
+
}, [])
|
130
|
+
|
110
131
|
const RichTextEditorClass = 'pb_rich_text_editor_kit'
|
111
132
|
const SimpleClass = simple ? 'simple' : ''
|
112
133
|
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
|
@@ -21,6 +21,7 @@ type SelectProps = {
|
|
21
21
|
aria?: object,
|
22
22
|
blankSelection?: string,
|
23
23
|
children?: React.Node,
|
24
|
+
compact?: boolean,
|
24
25
|
className?: string,
|
25
26
|
data?: object,
|
26
27
|
disabled?: boolean,
|
@@ -29,6 +30,7 @@ type SelectProps = {
|
|
29
30
|
options: SelectOption[],
|
30
31
|
id?: string,
|
31
32
|
includeBlank?: string,
|
33
|
+
inline?: boolean,
|
32
34
|
label?: string,
|
33
35
|
margin: string,
|
34
36
|
marginBottom: string,
|
@@ -53,10 +55,12 @@ const Select = ({
|
|
53
55
|
blankSelection,
|
54
56
|
children,
|
55
57
|
className,
|
58
|
+
compact = false,
|
56
59
|
data = {},
|
57
60
|
disabled = false,
|
58
61
|
error,
|
59
62
|
label,
|
63
|
+
inline = false,
|
60
64
|
multiple = false,
|
61
65
|
name,
|
62
66
|
onChange = () => {},
|
@@ -69,13 +73,18 @@ const Select = ({
|
|
69
73
|
const dataProps = buildDataProps(data)
|
70
74
|
const optionsList = createOptions(options)
|
71
75
|
|
76
|
+
const inlineClass = inline ? 'inline' : null
|
77
|
+
const compactClass = compact ? 'compact' : null
|
72
78
|
const classes = classnames(
|
73
79
|
buildCss('pb_select'),
|
74
80
|
globalProps({
|
75
81
|
...props,
|
76
82
|
marginBottom: props.marginBottom || props.margin || 'sm',
|
77
83
|
}),
|
78
|
-
className
|
84
|
+
className,
|
85
|
+
inlineClass,
|
86
|
+
compactClass
|
87
|
+
)
|
79
88
|
|
80
89
|
const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
|
81
90
|
|
@@ -64,6 +64,37 @@
|
|
64
64
|
transform: translateY(-50%);
|
65
65
|
pointer-events: none;
|
66
66
|
}
|
67
|
+
&.inline {
|
68
|
+
&:not(:hover) {
|
69
|
+
svg {
|
70
|
+
display: none;
|
71
|
+
}
|
72
|
+
}
|
73
|
+
&:hover {
|
74
|
+
select {
|
75
|
+
color: $primary !important;
|
76
|
+
background: rgba(0,130,255,0.1);
|
77
|
+
}
|
78
|
+
svg {
|
79
|
+
color: $primary !important;
|
80
|
+
font-size: 16px;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
select {
|
84
|
+
box-shadow: none;
|
85
|
+
border-color: transparent;
|
86
|
+
padding: 4px 8px;
|
87
|
+
border-radius: 4px;
|
88
|
+
option {
|
89
|
+
background-color: $white;
|
90
|
+
}
|
91
|
+
}
|
92
|
+
&.compact {
|
93
|
+
select {
|
94
|
+
font-size: 12px;
|
95
|
+
}
|
96
|
+
}
|
97
|
+
}
|
67
98
|
}
|
68
99
|
|
69
100
|
[class^=pb_select].dark {
|
@@ -96,4 +127,36 @@
|
|
96
127
|
}
|
97
128
|
}
|
98
129
|
}
|
99
|
-
|
130
|
+
&.inline {
|
131
|
+
&:not(:hover) {
|
132
|
+
svg {
|
133
|
+
display: none;
|
134
|
+
}
|
135
|
+
}
|
136
|
+
&:hover {
|
137
|
+
select {
|
138
|
+
color: $white !important;
|
139
|
+
background: rgba(0,130,255,0.1);
|
140
|
+
}
|
141
|
+
svg {
|
142
|
+
color: $primary !important;
|
143
|
+
font-size: 16px;
|
144
|
+
}
|
145
|
+
}
|
146
|
+
select {
|
147
|
+
box-shadow: none;
|
148
|
+
border-color: transparent;
|
149
|
+
background: transparent;
|
150
|
+
padding: 4px 8px;
|
151
|
+
border-radius: 4px;
|
152
|
+
option {
|
153
|
+
background-color: $white;
|
154
|
+
}
|
155
|
+
}
|
156
|
+
&.compact {
|
157
|
+
select {
|
158
|
+
font-size: 12px;
|
159
|
+
}
|
160
|
+
}
|
161
|
+
}
|
162
|
+
}
|
@@ -0,0 +1,23 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
label: "Favorite Food",
|
3
|
+
name: "food",
|
4
|
+
inline: true,
|
5
|
+
options: [
|
6
|
+
{
|
7
|
+
value: "1",
|
8
|
+
value_text: "Burgers",
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: "2",
|
12
|
+
value_text: "Pizza",
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: "3",
|
16
|
+
value_text: "Tacos",
|
17
|
+
},
|
18
|
+
{
|
19
|
+
value: "4",
|
20
|
+
value_text: "BBQ",
|
21
|
+
},
|
22
|
+
]
|
23
|
+
}) %>
|
@@ -0,0 +1,37 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body, Select } from '../..'
|
3
|
+
|
4
|
+
const SelectInline = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
value: '1',
|
8
|
+
text: 'Burgers',
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: '2',
|
12
|
+
text: 'Pizza',
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: '3',
|
16
|
+
text: 'Tacos',
|
17
|
+
},
|
18
|
+
]
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div>
|
22
|
+
<Select
|
23
|
+
inline
|
24
|
+
label="Favorite Food"
|
25
|
+
name="food"
|
26
|
+
options={options}
|
27
|
+
{...props}
|
28
|
+
/>
|
29
|
+
<Body
|
30
|
+
status="negative"
|
31
|
+
{...props}
|
32
|
+
/>
|
33
|
+
</div>
|
34
|
+
)
|
35
|
+
}
|
36
|
+
|
37
|
+
export default SelectInline
|
@@ -0,0 +1,24 @@
|
|
1
|
+
<%= pb_rails("select", props: {
|
2
|
+
label: "Favorite Food",
|
3
|
+
name: "food",
|
4
|
+
inline: true,
|
5
|
+
compact: true,
|
6
|
+
options: [
|
7
|
+
{
|
8
|
+
value: "1",
|
9
|
+
value_text: "Burgers",
|
10
|
+
},
|
11
|
+
{
|
12
|
+
value: "2",
|
13
|
+
value_text: "Pizza",
|
14
|
+
},
|
15
|
+
{
|
16
|
+
value: "3",
|
17
|
+
value_text: "Tacos",
|
18
|
+
},
|
19
|
+
{
|
20
|
+
value: "4",
|
21
|
+
value_text: "BBQ",
|
22
|
+
},
|
23
|
+
]
|
24
|
+
}) %>
|
@@ -0,0 +1,38 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Body, Select } from '../..'
|
3
|
+
|
4
|
+
const SelectInlineCompact = (props) => {
|
5
|
+
const options = [
|
6
|
+
{
|
7
|
+
value: '1',
|
8
|
+
text: 'Burgers',
|
9
|
+
},
|
10
|
+
{
|
11
|
+
value: '2',
|
12
|
+
text: 'Pizza',
|
13
|
+
},
|
14
|
+
{
|
15
|
+
value: '3',
|
16
|
+
text: 'Tacos',
|
17
|
+
},
|
18
|
+
]
|
19
|
+
|
20
|
+
return (
|
21
|
+
<div>
|
22
|
+
<Select
|
23
|
+
compact
|
24
|
+
inline
|
25
|
+
label="Favorite Food"
|
26
|
+
name="food"
|
27
|
+
options={options}
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<Body
|
31
|
+
status="negative"
|
32
|
+
{...props}
|
33
|
+
/>
|
34
|
+
</div>
|
35
|
+
)
|
36
|
+
}
|
37
|
+
|
38
|
+
export default SelectInlineCompact
|
@@ -9,6 +9,8 @@ examples:
|
|
9
9
|
- select_value_text_same: Equal option value and value text
|
10
10
|
- select_custom_select: Custom Select
|
11
11
|
- select_error: Select w/ Error
|
12
|
+
- select_inline: Select Inline
|
13
|
+
- select_inline_compact: Select Inline Compact
|
12
14
|
|
13
15
|
|
14
16
|
|
@@ -21,3 +23,5 @@ examples:
|
|
21
23
|
- select_value_text_same: Equal option value and value text
|
22
24
|
- select_custom_select: Custom Select
|
23
25
|
- select_error: Select w/ Error
|
26
|
+
- select_inline: Select Inline
|
27
|
+
- select_inline_compact: Select Inline Compact
|
@@ -6,3 +6,5 @@ export { default as SelectRequired } from './_select_required.jsx'
|
|
6
6
|
export { default as SelectCustomSelect } from './_select_custom_select.jsx'
|
7
7
|
export { default as SelectValueTextSame } from './_select_value_text_same.jsx'
|
8
8
|
export { default as SelectError } from './_select_error.jsx'
|
9
|
+
export { default as SelectInline } from './_select_inline.jsx'
|
10
|
+
export { default as SelectInlineCompact } from './_select_inline_compact.jsx'
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<%= content_tag(:div,
|
2
2
|
data: object.data,
|
3
3
|
aria: object.aria,
|
4
|
-
class: object.
|
4
|
+
class: object.classnames) do %>
|
5
5
|
<% if object.label %>
|
6
6
|
<label class="pb_select_kit_label" for="<%= object.name %>">
|
7
7
|
<%= pb_rails("caption", props: { text: object.label }) %>
|
@@ -6,9 +6,11 @@ module Playbook
|
|
6
6
|
module PbSelect
|
7
7
|
class Select < Playbook::KitBase
|
8
8
|
prop :blank_selection
|
9
|
+
prop :compact, type: Playbook::Props::Boolean, default: false
|
9
10
|
prop :disabled, type: Playbook::Props::Boolean, default: false
|
10
11
|
prop :error
|
11
12
|
prop :include_blank
|
13
|
+
prop :inline, type: Playbook::Props::Boolean, default: false
|
12
14
|
prop :label
|
13
15
|
prop :multiple, type: Playbook::Props::Boolean, default: false
|
14
16
|
prop :name
|
@@ -16,10 +18,22 @@ module Playbook
|
|
16
18
|
prop :options, type: Playbook::Props::HashArray, required: false, default: []
|
17
19
|
prop :required, type: Playbook::Props::Boolean, default: false
|
18
20
|
|
21
|
+
def classnames
|
22
|
+
classname + inline_class + compact_class
|
23
|
+
end
|
24
|
+
|
19
25
|
def classname
|
20
26
|
generate_classname("pb_select", select_margin_bottom, separator: " ")
|
21
27
|
end
|
22
28
|
|
29
|
+
def inline_class
|
30
|
+
inline ? " inline " : " "
|
31
|
+
end
|
32
|
+
|
33
|
+
def compact_class
|
34
|
+
compact ? "compact" : ""
|
35
|
+
end
|
36
|
+
|
23
37
|
def select_wrapper_class
|
24
38
|
"pb_select_kit_wrapper" + error_class
|
25
39
|
end
|
@@ -10,6 +10,8 @@ module Playbook
|
|
10
10
|
prop :error
|
11
11
|
prop :inline, type: Playbook::Props::Boolean,
|
12
12
|
default: false
|
13
|
+
prop :input_options, type: Playbook::Props::Hash,
|
14
|
+
default: {}
|
13
15
|
prop :label
|
14
16
|
prop :name
|
15
17
|
prop :placeholder
|
@@ -27,7 +29,7 @@ module Playbook
|
|
27
29
|
end
|
28
30
|
|
29
31
|
def input_tag
|
30
|
-
tag(:input,
|
32
|
+
tag(:input, all_input_options)
|
31
33
|
end
|
32
34
|
|
33
35
|
def has_add_on?
|
@@ -44,13 +46,13 @@ module Playbook
|
|
44
46
|
|
45
47
|
private
|
46
48
|
|
47
|
-
def
|
49
|
+
def all_input_options
|
48
50
|
{
|
49
51
|
autocomplete: autocomplete ? nil : "off",
|
50
|
-
class: "text_input",
|
52
|
+
class: "text_input #{input_options.dig(:classname) || ''}",
|
51
53
|
data: validation_data,
|
52
54
|
disabled: disabled,
|
53
|
-
id: id,
|
55
|
+
id: input_options.dig(:id) || id,
|
54
56
|
name: name,
|
55
57
|
pattern: validation_pattern,
|
56
58
|
placeholder: placeholder,
|
@@ -69,7 +71,7 @@ module Playbook
|
|
69
71
|
end
|
70
72
|
|
71
73
|
def validation_data
|
72
|
-
fields = {}
|
74
|
+
fields = input_options.dig(:data) || {}
|
73
75
|
fields[:message] = validation_message unless validation_message.blank?
|
74
76
|
fields
|
75
77
|
end
|
@@ -1,4 +1,15 @@
|
|
1
|
-
<%= pb_rails("typeahead", props: {
|
1
|
+
<%= pb_rails("typeahead", props: {
|
2
|
+
label: "user",
|
3
|
+
name: :foo,
|
4
|
+
data: { typeahead_example: true },
|
5
|
+
input_options: {
|
6
|
+
classname: "my-typeahead-class",
|
7
|
+
data: {
|
8
|
+
typeahead_testing: "data field test"
|
9
|
+
},
|
10
|
+
id: "typeahead-input-id-test",
|
11
|
+
},
|
12
|
+
})%>
|
2
13
|
|
3
14
|
<br><br><br>
|
4
15
|
|
data/dist/reset.css
CHANGED
@@ -1,2 +1,61 @@
|
|
1
|
-
|
1
|
+
/* CLEAN UP AND REMOVE */
|
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; }
|
2
61
|
|
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.6.2.pre.alpha.dep
|
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-08-26 00:00:00.000000000 Z
|
13
13
|
dependencies:
|
14
14
|
- !ruby/object:Gem::Dependency
|
15
15
|
name: actionpack
|
@@ -20,7 +20,7 @@ dependencies:
|
|
20
20
|
version: 5.2.4.5
|
21
21
|
- - "<"
|
22
22
|
- !ruby/object:Gem::Version
|
23
|
-
version: '
|
23
|
+
version: '6.0'
|
24
24
|
type: :runtime
|
25
25
|
prerelease: false
|
26
26
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -30,7 +30,7 @@ dependencies:
|
|
30
30
|
version: 5.2.4.5
|
31
31
|
- - "<"
|
32
32
|
- !ruby/object:Gem::Version
|
33
|
-
version: '
|
33
|
+
version: '6.0'
|
34
34
|
- !ruby/object:Gem::Dependency
|
35
35
|
name: actionview
|
36
36
|
requirement: !ruby/object:Gem::Requirement
|
@@ -40,7 +40,7 @@ dependencies:
|
|
40
40
|
version: 5.2.4.5
|
41
41
|
- - "<"
|
42
42
|
- !ruby/object:Gem::Version
|
43
|
-
version: '
|
43
|
+
version: '6.0'
|
44
44
|
type: :runtime
|
45
45
|
prerelease: false
|
46
46
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -50,7 +50,7 @@ dependencies:
|
|
50
50
|
version: 5.2.4.5
|
51
51
|
- - "<"
|
52
52
|
- !ruby/object:Gem::Version
|
53
|
-
version: '
|
53
|
+
version: '6.0'
|
54
54
|
- !ruby/object:Gem::Dependency
|
55
55
|
name: activesupport
|
56
56
|
requirement: !ruby/object:Gem::Requirement
|
@@ -60,7 +60,7 @@ dependencies:
|
|
60
60
|
version: 5.2.4.5
|
61
61
|
- - "<"
|
62
62
|
- !ruby/object:Gem::Version
|
63
|
-
version: '
|
63
|
+
version: '6.0'
|
64
64
|
type: :runtime
|
65
65
|
prerelease: false
|
66
66
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -70,7 +70,7 @@ dependencies:
|
|
70
70
|
version: 5.2.4.5
|
71
71
|
- - "<"
|
72
72
|
- !ruby/object:Gem::Version
|
73
|
-
version: '
|
73
|
+
version: '6.0'
|
74
74
|
- !ruby/object:Gem::Dependency
|
75
75
|
name: react-rails
|
76
76
|
requirement: !ruby/object:Gem::Requirement
|
@@ -192,7 +192,7 @@ dependencies:
|
|
192
192
|
version: 5.2.4.5
|
193
193
|
- - "<"
|
194
194
|
- !ruby/object:Gem::Version
|
195
|
-
version: '
|
195
|
+
version: '6.0'
|
196
196
|
type: :development
|
197
197
|
prerelease: false
|
198
198
|
version_requirements: !ruby/object:Gem::Requirement
|
@@ -202,7 +202,7 @@ dependencies:
|
|
202
202
|
version: 5.2.4.5
|
203
203
|
- - "<"
|
204
204
|
- !ruby/object:Gem::Version
|
205
|
-
version: '
|
205
|
+
version: '6.0'
|
206
206
|
- !ruby/object:Gem::Dependency
|
207
207
|
name: rspec-html-matchers
|
208
208
|
requirement: !ruby/object:Gem::Requirement
|
@@ -1004,6 +1004,7 @@ files:
|
|
1004
1004
|
- app/pb_kits/playbook/pb_icon/docs/_icon_animate.md
|
1005
1005
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.html.erb
|
1006
1006
|
- app/pb_kits/playbook/pb_icon/docs/_icon_border.jsx
|
1007
|
+
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.html.erb
|
1007
1008
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.jsx
|
1008
1009
|
- app/pb_kits/playbook/pb_icon/docs/_icon_custom.md
|
1009
1010
|
- app/pb_kits/playbook/pb_icon/docs/_icon_default.html.erb
|
@@ -1467,6 +1468,7 @@ files:
|
|
1467
1468
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml
|
1468
1469
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/index.js
|
1469
1470
|
- app/pb_kits/playbook/pb_rich_text_editor/docs/templates.js
|
1471
|
+
- app/pb_kits/playbook/pb_rich_text_editor/inlineFocus.js
|
1470
1472
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.html.erb
|
1471
1473
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.rb
|
1472
1474
|
- app/pb_kits/playbook/pb_rich_text_editor/rich_text_editor.test.js
|
@@ -1505,6 +1507,10 @@ files:
|
|
1505
1507
|
- app/pb_kits/playbook/pb_select/docs/_select_error.html.erb
|
1506
1508
|
- app/pb_kits/playbook/pb_select/docs/_select_error.jsx
|
1507
1509
|
- app/pb_kits/playbook/pb_select/docs/_select_error.md
|
1510
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.html.erb
|
1511
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline.jsx
|
1512
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.html.erb
|
1513
|
+
- app/pb_kits/playbook/pb_select/docs/_select_inline_compact.jsx
|
1508
1514
|
- app/pb_kits/playbook/pb_select/docs/_select_required.html.erb
|
1509
1515
|
- app/pb_kits/playbook/pb_select/docs/_select_required.jsx
|
1510
1516
|
- app/pb_kits/playbook/pb_select/docs/_select_value_text_same.html.erb
|
@@ -2076,9 +2082,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
2076
2082
|
version: '0'
|
2077
2083
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
2078
2084
|
requirements:
|
2079
|
-
- - "
|
2085
|
+
- - ">"
|
2080
2086
|
- !ruby/object:Gem::Version
|
2081
|
-
version:
|
2087
|
+
version: 1.3.1
|
2082
2088
|
requirements: []
|
2083
2089
|
rubygems_version: 3.0.3
|
2084
2090
|
signing_key:
|