playbook_ui 7.11.0.pre.alpha1 → 7.11.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_filter/Filter/FilterDouble.jsx +20 -3
- data/app/pb_kits/playbook/pb_filter/Filter/FilterSingle.jsx +51 -32
- data/app/pb_kits/playbook/pb_filter/Filter/FiltersPopover.jsx +3 -4
- data/app/pb_kits/playbook/pb_filter/Filter/index.jsx +17 -16
- data/app/pb_kits/playbook/pb_filter/_filter.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.html.erb +41 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +57 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.md +1 -0
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
- data/app/pb_kits/playbook/pb_filter/templates/_core.html.erb +3 -1
- data/app/pb_kits/playbook/pb_filter/templates/_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +4 -3
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +71 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.html.erb +25 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_preview.jsx +45 -0
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/example.yml +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_select/_select.jsx +4 -3
- data/app/pb_kits/playbook/pb_select/select.test.js +51 -0
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +8 -4
- data/app/pb_kits/playbook/pb_text_input/docs/_description.md +2 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_custom.jsx +7 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +78 -56
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +19 -11
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +77 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +5 -5
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.scss +10 -6
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_default.html.erb +4 -4
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.html.erb +17 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/_tooltip_selectors.md +3 -0
- data/app/pb_kits/playbook/pb_tooltip/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_tooltip/index.js +87 -37
- data/app/pb_kits/playbook/pb_tooltip/tooltip.rb +3 -1
- data/lib/playbook.rb +0 -1
- data/lib/playbook/version.rb +1 -1
- metadata +14 -5
- data/lib/playbook/markdown/template_handler.rb +0 -45
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 7c5a4821bfce0e6bc6e695a4ff74d9872e3277dca2731cc3e729bb0c6d1975e0
|
4
|
+
data.tar.gz: '08f1d6bf254d950192ace6ce03f12db92a93ad9408550187a79d7dba119bd85a'
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 16975af2a287902b301e43d4d071e5d290fa1e7650416cb01609e7b28e2b5c409c681fa449cba9be6d0471284574da665bd10e004852d5c41f5f654cc0bcb811
|
7
|
+
data.tar.gz: 42086dc050de63c48bac1d86fa4358320e6f7481162ad5791ca821bffefd8a8755032a55cf5cceb8617c78c39a11eeb717243618959bb21c47d3de858529df05
|
@@ -7,7 +7,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
|
|
7
7
|
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
|
8
8
|
import FiltersPopover from './FiltersPopover'
|
9
9
|
import ResultsCount from './ResultsCount'
|
10
|
-
import SortMenu, {
|
10
|
+
import SortMenu, {
|
11
|
+
SortingChangeCallback,
|
12
|
+
SortOptions,
|
13
|
+
SortValue,
|
14
|
+
} from './SortMenu'
|
11
15
|
|
12
16
|
export type FilterDoubleProps = {
|
13
17
|
children: Node,
|
@@ -18,7 +22,17 @@ export type FilterDoubleProps = {
|
|
18
22
|
sortValue?: SortValue,
|
19
23
|
} & FilterBackgroundProps
|
20
24
|
|
21
|
-
const FilterDouble = ({
|
25
|
+
const FilterDouble = ({
|
26
|
+
onSortChange,
|
27
|
+
sortOptions,
|
28
|
+
sortValue,
|
29
|
+
filters,
|
30
|
+
results,
|
31
|
+
children,
|
32
|
+
dark,
|
33
|
+
minWidth,
|
34
|
+
...bgProps
|
35
|
+
}: FilterDoubleProps) => (
|
22
36
|
<FilterBackground
|
23
37
|
dark={dark}
|
24
38
|
{...bgProps}
|
@@ -27,7 +41,10 @@ const FilterDouble = ({ onSortChange, sortOptions, sortValue, filters, results,
|
|
27
41
|
orientation="row"
|
28
42
|
vertical="center"
|
29
43
|
>
|
30
|
-
<FiltersPopover
|
44
|
+
<FiltersPopover
|
45
|
+
dark={dark}
|
46
|
+
minWidth={minWidth}
|
47
|
+
>
|
31
48
|
{children}
|
32
49
|
</FiltersPopover>
|
33
50
|
<CurrentFilters
|
@@ -8,7 +8,11 @@ import CurrentFilters, { FilterDescription } from './CurrentFilters'
|
|
8
8
|
import FilterBackground, { FilterBackgroundProps } from './FilterBackground'
|
9
9
|
import FiltersPopover from './FiltersPopover'
|
10
10
|
import ResultsCount from './ResultsCount'
|
11
|
-
import SortMenu, {
|
11
|
+
import SortMenu, {
|
12
|
+
SortingChangeCallback,
|
13
|
+
SortOptions,
|
14
|
+
SortValue,
|
15
|
+
} from './SortMenu'
|
12
16
|
|
13
17
|
export type FilterSingleProps = {
|
14
18
|
children?: Node,
|
@@ -19,39 +23,54 @@ export type FilterSingleProps = {
|
|
19
23
|
sortValue?: SortValue,
|
20
24
|
} & FilterBackgroundProps
|
21
25
|
|
22
|
-
const FilterSingle = ({
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
|
29
|
-
|
30
|
-
|
26
|
+
const FilterSingle = ({
|
27
|
+
onSortChange,
|
28
|
+
sortOptions,
|
29
|
+
sortValue,
|
30
|
+
filters,
|
31
|
+
results,
|
32
|
+
children,
|
33
|
+
dark,
|
34
|
+
minWidth,
|
35
|
+
...bgProps
|
36
|
+
}: FilterSingleProps) => {
|
37
|
+
return (
|
38
|
+
<FilterBackground
|
39
|
+
dark={dark}
|
40
|
+
{...bgProps}
|
31
41
|
>
|
32
|
-
<
|
33
|
-
|
34
|
-
|
35
|
-
|
36
|
-
|
42
|
+
<Flex
|
43
|
+
orientation="row"
|
44
|
+
paddingRight="lg"
|
45
|
+
vertical="center"
|
46
|
+
>
|
47
|
+
<If condition={children}>
|
48
|
+
<FiltersPopover
|
49
|
+
dark={dark}
|
50
|
+
minWidth={minWidth}
|
51
|
+
>
|
52
|
+
{children}
|
53
|
+
</FiltersPopover>
|
54
|
+
<CurrentFilters
|
55
|
+
dark={dark}
|
56
|
+
filters={filters}
|
57
|
+
/>
|
58
|
+
</If>
|
59
|
+
<ResultsCount
|
37
60
|
dark={dark}
|
38
|
-
|
61
|
+
results={results}
|
39
62
|
/>
|
40
|
-
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
|
45
|
-
|
46
|
-
|
47
|
-
|
48
|
-
|
49
|
-
|
50
|
-
|
51
|
-
|
52
|
-
</If>
|
53
|
-
</Flex>
|
54
|
-
</FilterBackground>
|
55
|
-
)
|
63
|
+
<If condition={!isEmpty(sortOptions)}>
|
64
|
+
<SortMenu
|
65
|
+
dark={dark}
|
66
|
+
onChange={onSortChange}
|
67
|
+
options={sortOptions}
|
68
|
+
value={sortValue}
|
69
|
+
/>
|
70
|
+
</If>
|
71
|
+
</Flex>
|
72
|
+
</FilterBackground>
|
73
|
+
)
|
74
|
+
}
|
56
75
|
|
57
76
|
export default FilterSingle
|
@@ -4,7 +4,7 @@ import React, { Node, useState } from 'react'
|
|
4
4
|
import { CircleIconButton, PbReactPopover } from '../../'
|
5
5
|
|
6
6
|
const FiltersPopoverProps = { children: Node }
|
7
|
-
const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
|
7
|
+
const FiltersPopover = ({ children, dark, minWidth }: FiltersPopoverProps) => {
|
8
8
|
const [hide, updateHide] = useState(true)
|
9
9
|
const toggle = () => updateHide(!hide)
|
10
10
|
|
@@ -22,14 +22,13 @@ const FiltersPopover = ({ children, dark }: FiltersPopoverProps) => {
|
|
22
22
|
return (
|
23
23
|
<PbReactPopover
|
24
24
|
closeOnClick="outside"
|
25
|
+
minWidth={minWidth}
|
25
26
|
placement="bottom"
|
26
27
|
reference={filterButton}
|
27
28
|
shouldClosePopover={updateHide}
|
28
29
|
show={!hide}
|
29
30
|
>
|
30
|
-
<div className="pb-form">
|
31
|
-
{children}
|
32
|
-
</div>
|
31
|
+
<div className="pb-form">{children}</div>
|
33
32
|
</PbReactPopover>
|
34
33
|
)
|
35
34
|
}
|
@@ -4,22 +4,23 @@ import React from 'react'
|
|
4
4
|
import FilterSingle, { FilterSingleProps } from './FilterSingle'
|
5
5
|
import FilterDouble, { FilterDoubleProps } from './FilterDouble'
|
6
6
|
|
7
|
-
type FilterProps =
|
8
|
-
|
9
|
-
|
7
|
+
type FilterProps =
|
8
|
+
| FilterSingleProps
|
9
|
+
| (FilterDoubleProps & {
|
10
|
+
double?: boolean,
|
11
|
+
})
|
10
12
|
|
11
|
-
const Filter = ({
|
12
|
-
|
13
|
-
|
14
|
-
}
|
15
|
-
|
16
|
-
|
17
|
-
<
|
18
|
-
|
19
|
-
|
20
|
-
|
21
|
-
|
22
|
-
|
23
|
-
)
|
13
|
+
const Filter = ({ double = false, ...templateProps }: FilterProps) => {
|
14
|
+
return (
|
15
|
+
<Choose>
|
16
|
+
<When condition={double}>
|
17
|
+
<FilterDouble {...templateProps} />
|
18
|
+
</When>
|
19
|
+
<Otherwise>
|
20
|
+
<FilterSingle {...templateProps} />
|
21
|
+
</Otherwise>
|
22
|
+
</Choose>
|
23
|
+
)
|
24
|
+
}
|
24
25
|
|
25
26
|
export default Filter
|
@@ -0,0 +1,41 @@
|
|
1
|
+
<%=
|
2
|
+
pb_rails("filter", props: {
|
3
|
+
min_width: "600px",
|
4
|
+
id: "25",
|
5
|
+
filters: [
|
6
|
+
{ name: "name", value: "John Wick" },
|
7
|
+
{ name: "city", value: "San Francisco"}
|
8
|
+
],
|
9
|
+
sort_menu: [
|
10
|
+
{ item: "Popularity", link: "?q[sorts]=managers_popularity+asc", active: true, direction: "desc" },
|
11
|
+
{ item: "Mananger's Title", link: "?q[sorts]=managers_title+asc", active: false },
|
12
|
+
{ item: "Manager's Name", link: "?q[sorts]=managers_name+asc", active: false },
|
13
|
+
],
|
14
|
+
template: "default",
|
15
|
+
results: 1,
|
16
|
+
}) do
|
17
|
+
%>
|
18
|
+
<%
|
19
|
+
example_collection = [
|
20
|
+
OpenStruct.new(name: "Alabama", value: 1),
|
21
|
+
OpenStruct.new(name: "Alaska", value: 2),
|
22
|
+
OpenStruct.new(name: "Arizona", value: 3),
|
23
|
+
OpenStruct.new(name: "Arkansas", value: 4),
|
24
|
+
OpenStruct.new(name: "California", value: 5),
|
25
|
+
OpenStruct.new(name: "Colorado", value: 6),
|
26
|
+
OpenStruct.new(name: "Connecticut", value: 7),
|
27
|
+
OpenStruct.new(name: "Delaware", value: 8),
|
28
|
+
OpenStruct.new(name: "Florida", value: 9),
|
29
|
+
OpenStruct.new(name: "Georgia", value: 10),
|
30
|
+
]
|
31
|
+
%>
|
32
|
+
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
33
|
+
<%= form.text_field :example_text_field, props: { label: true } %>
|
34
|
+
<%= form.collection_select :example_collection_select, example_collection, :value, :name, props: { label: true } %>
|
35
|
+
|
36
|
+
<%= form.actions do |action| %>
|
37
|
+
<%= action.submit props: { text: "Apply", data: { disable_with: "<i class='far fa-spinner fa-spin mr-3'></i>Searching...".html_safe },}%>
|
38
|
+
<%= action.button props: { type: "reset", text: "Clear", variant: "secondary" } %>
|
39
|
+
<% end %>
|
40
|
+
<% end %>
|
41
|
+
<% end %>
|
@@ -0,0 +1,57 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Button, Filter, Flex, Select, TextInput } from '../../'
|
3
|
+
|
4
|
+
const FilterMinWidth = (props) => {
|
5
|
+
const options = [
|
6
|
+
{ value: 'USA' },
|
7
|
+
{ value: 'Canada' },
|
8
|
+
{ value: 'Brazil' },
|
9
|
+
{ value: 'Philippines' },
|
10
|
+
{ value: 'A Galaxy Far Far Away Like Really Far Away' },
|
11
|
+
]
|
12
|
+
return (
|
13
|
+
<Filter
|
14
|
+
{...props}
|
15
|
+
double
|
16
|
+
filters={{
|
17
|
+
'Full Name': 'John Wick',
|
18
|
+
'City': 'San Francisco',
|
19
|
+
}}
|
20
|
+
minWidth="600px"
|
21
|
+
results={1}
|
22
|
+
sortOptions={{
|
23
|
+
popularity: 'Popularity',
|
24
|
+
// eslint-disable-next-line
|
25
|
+
manager_title: 'Manager\'s Title',
|
26
|
+
// eslint-disable-next-line
|
27
|
+
manager_name: 'Manager\'s Name',
|
28
|
+
}}
|
29
|
+
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
30
|
+
>
|
31
|
+
<TextInput
|
32
|
+
label="Full Name"
|
33
|
+
placeholder="Enter name"
|
34
|
+
/>
|
35
|
+
|
36
|
+
<Select
|
37
|
+
blankSelection="Select One..."
|
38
|
+
label="Territory"
|
39
|
+
name="location"
|
40
|
+
options={options}
|
41
|
+
/>
|
42
|
+
<Flex
|
43
|
+
spacing="between"
|
44
|
+
>
|
45
|
+
<Button
|
46
|
+
text="Apply"
|
47
|
+
/>
|
48
|
+
<Button
|
49
|
+
text="Clear"
|
50
|
+
variant="secondary"
|
51
|
+
/>
|
52
|
+
</Flex>
|
53
|
+
</Filter>
|
54
|
+
)
|
55
|
+
}
|
56
|
+
|
57
|
+
export default FilterMinWidth
|
@@ -0,0 +1 @@
|
|
1
|
+
To display results, use templates `single` or `default`.
|
@@ -7,6 +7,7 @@ examples:
|
|
7
7
|
- filter_no_sort: No Sort
|
8
8
|
- filter_only: Filter Only
|
9
9
|
- sort_only: Sort Only
|
10
|
+
- filter_min_width: Min Width for Popover Inside of Filter
|
10
11
|
|
11
12
|
react:
|
12
13
|
- filter_default: Default
|
@@ -15,3 +16,4 @@ examples:
|
|
15
16
|
- filter_no_sort: No Sort
|
16
17
|
- filter_only: Filter Only
|
17
18
|
- sort_only: Sort Only
|
19
|
+
- filter_min_width: Min Width for Popover Inside of Filter
|
@@ -4,3 +4,4 @@ export { default as FilterNoSort } from './_filter_no_sort.jsx'
|
|
4
4
|
export { default as FilterNoBackground } from './_filter_no_background.jsx'
|
5
5
|
export { default as FilterOnly } from './_filter_only.jsx'
|
6
6
|
export { default as SortOnly } from './_sort_only.jsx'
|
7
|
+
export { default as FilterMinWidth } from './_filter_min_width.jsx'
|
@@ -15,11 +15,13 @@
|
|
15
15
|
<div class="right_gradient"></div>
|
16
16
|
</div>
|
17
17
|
</div>
|
18
|
+
<% if (object.template != "default") %>
|
19
|
+
<%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
|
20
|
+
<% end %>
|
18
21
|
<% end %>
|
19
22
|
|
20
23
|
|
21
24
|
<% if (object.template == "single" ) || (object.template == "sort_only") %>
|
22
|
-
<%= pb_rails("caption", props: {text: object.result_text, size:"xs", classname:"filter-results"})%>
|
23
25
|
<% unless object.sort_menu == [{}] %>
|
24
26
|
<%= pb_rails("button", props: {variant: "link",id: "sort-button#{object.id}",padding_right: "none"}) do %>
|
25
27
|
<% object.sort_menu.each do |item| %>
|
@@ -7,7 +7,7 @@
|
|
7
7
|
<% end %>
|
8
8
|
|
9
9
|
<% if object.template != "sort_only"%>
|
10
|
-
<%= pb_rails("popover", props: {close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
|
10
|
+
<%= pb_rails("popover", props: {min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: 'bottom'}) do %>
|
11
11
|
<%= capture(&object.children) %>
|
12
12
|
<% end %>
|
13
13
|
<%end%>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
/* @flow */
|
2
2
|
/*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
|
3
3
|
|
4
|
-
import React from 'react'
|
4
|
+
import React, { forwardRef } from 'react'
|
5
5
|
import Body from '../pb_body/_body.jsx'
|
6
6
|
import classnames from 'classnames'
|
7
7
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
@@ -37,7 +37,7 @@ const Radio = ({
|
|
37
37
|
value = 'radio_text',
|
38
38
|
onChange = () => {},
|
39
39
|
...props
|
40
|
-
}: RadioProps) => {
|
40
|
+
}: RadioProps, ref) => {
|
41
41
|
const ariaProps = buildAriaProps(aria)
|
42
42
|
const dataProps = buildDataProps(data)
|
43
43
|
const classes = classnames(buildCss('pb_radio_kit'), { error }, { dark }, globalProps(props), className)
|
@@ -57,6 +57,7 @@ const Radio = ({
|
|
57
57
|
id={id}
|
58
58
|
name={name}
|
59
59
|
onChange={onChange}
|
60
|
+
ref={ref}
|
60
61
|
text={text}
|
61
62
|
type="radio"
|
62
63
|
value={value}
|
@@ -72,4 +73,4 @@ const Radio = ({
|
|
72
73
|
)
|
73
74
|
}
|
74
75
|
|
75
|
-
export default Radio
|
76
|
+
export default forwardRef(Radio)
|
@@ -2,12 +2,15 @@ import React from 'react'
|
|
2
2
|
import { Radio } from '../../'
|
3
3
|
|
4
4
|
const RadioDefault = () => {
|
5
|
+
const ref = React.createRef()
|
6
|
+
|
5
7
|
return (
|
6
8
|
<div>
|
7
9
|
<Radio
|
8
10
|
defaultChecked
|
9
11
|
label="Power"
|
10
12
|
name="Group2"
|
13
|
+
ref={ref}
|
11
14
|
value="Power"
|
12
15
|
/>
|
13
16
|
<br />
|