playbook_ui 11.9.0 → 11.10.0.pre.alpha.pre.bold1
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_background/_background.tsx +1 -1
- data/app/pb_kits/playbook/pb_background/background.rb +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status.jsx +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.html.erb +11 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.jsx +44 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_status_subtle.md +1 -0
- data/app/pb_kits/playbook/pb_background/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_background/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.scss +5 -0
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +8 -3
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleMain.tsx +41 -9
- data/app/pb_kits/playbook/pb_collapsible/collapsible.test.js +1 -1
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.html.erb +4 -2
- data/app/pb_kits/playbook/pb_collapsible/collapsible_main.rb +20 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.html.erb +60 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.jsx +98 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_color.md +4 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.html.erb +40 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.jsx +68 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/_collapsible_size.md +4 -0
- data/app/pb_kits/playbook/pb_collapsible/docs/example.yml +6 -4
- data/app/pb_kits/playbook/pb_collapsible/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_filter/docs/_description.md +5 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +7 -8
- data/app/pb_kits/playbook/pb_filter/docs/_filter_default.jsx +59 -46
- data/app/pb_kits/playbook/pb_filter/docs/{_filter_min_width.html.erb → _filter_max_width.html.erb} +3 -3
- data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.jsx +69 -0
- data/app/pb_kits/playbook/pb_filter/docs/{_filter_default.md → _filter_max_width.md} +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -6
- data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.jsx +61 -47
- 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.jsx +31 -25
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_only.jsx +31 -24
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.jsx +30 -24
- data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.md +1 -1
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +2 -2
- data/app/pb_kits/playbook/pb_filter/docs/_filter_single.jsx +30 -25
- data/app/pb_kits/playbook/pb_filter/docs/example.yml +2 -3
- data/app/pb_kits/playbook/pb_filter/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +5 -0
- data/app/pb_kits/playbook/pb_legend/_legend.jsx +12 -2
- data/app/pb_kits/playbook/pb_legend/_legend.scss +7 -1
- data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.html.erb +3 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.jsx +24 -0
- data/app/pb_kits/playbook/pb_legend/docs/_legend_custom_colors.md +1 -0
- data/app/pb_kits/playbook/pb_legend/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_legend/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_legend/legend.html.erb +1 -1
- data/app/pb_kits/playbook/pb_legend/legend.rb +9 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +1 -0
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.scss +0 -2
- data/app/pb_kits/playbook/pb_title/_title.scss +7 -0
- data/app/pb_kits/playbook/pb_title/_title.tsx +4 -1
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.html.erb → _title_default.html.erb} +1 -1
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.jsx → _title_default.jsx} +2 -2
- data/app/pb_kits/playbook/pb_title/docs/{_title_light.md → _title_default.md} +0 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.html.erb +3 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.jsx +33 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_light_weight.md +3 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +4 -2
- data/app/pb_kits/playbook/pb_title/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_title/title.rb +6 -1
- data/app/pb_kits/playbook/pb_title/title.test.js +13 -0
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +37 -2
- data/app/pb_kits/playbook/tokens/_colors.scss +11 -1
- data/app/pb_kits/playbook/tokens/_titles.scss +11 -0
- data/lib/playbook/version.rb +2 -2
- metadata +25 -11
- data/app/pb_kits/playbook/pb_filter/docs/_filter_close_popover.jsx +0 -62
- data/app/pb_kits/playbook/pb_filter/docs/_filter_min_width.jsx +0 -57
@@ -7,45 +7,51 @@ const FilterNoSort = (props) => {
|
|
7
7
|
{ value: 'Canada' },
|
8
8
|
{ value: 'Brazil' },
|
9
9
|
{ value: 'Philippines' },
|
10
|
-
{ value: 'A galaxy far far away
|
10
|
+
{ value: 'A galaxy far far away...' },
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<Filter
|
14
14
|
filters={{
|
15
15
|
'Full Name': 'John Wick',
|
16
16
|
}}
|
17
|
-
minWidth="
|
17
|
+
minWidth="360px"
|
18
18
|
results={546}
|
19
19
|
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
20
20
|
{...props}
|
21
21
|
>
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
|
28
|
-
<Select
|
29
|
-
blankSelection="Select One..."
|
30
|
-
label="Territory"
|
31
|
-
name="location"
|
32
|
-
options={options}
|
33
|
-
{...props}
|
34
|
-
/>
|
35
|
-
<Flex
|
36
|
-
spacing="between"
|
37
|
-
{...props}
|
38
|
-
>
|
39
|
-
<Button
|
40
|
-
text="Apply"
|
22
|
+
{({ closePopover }) => (
|
23
|
+
<form>
|
24
|
+
<TextInput
|
25
|
+
label="Full Name"
|
26
|
+
placeholder="Enter name"
|
41
27
|
{...props}
|
42
28
|
/>
|
43
|
-
|
44
|
-
|
45
|
-
|
29
|
+
|
30
|
+
<Select
|
31
|
+
blankSelection="Select One..."
|
32
|
+
label="Territory"
|
33
|
+
name="location"
|
34
|
+
options={options}
|
46
35
|
{...props}
|
47
36
|
/>
|
48
|
-
|
37
|
+
<Flex
|
38
|
+
spacing="between"
|
39
|
+
{...props}
|
40
|
+
>
|
41
|
+
<Button
|
42
|
+
onClick={closePopover}
|
43
|
+
text="Apply"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
<Button
|
47
|
+
text="Clear"
|
48
|
+
variant="secondary"
|
49
|
+
{...props}
|
50
|
+
/>
|
51
|
+
</Flex>
|
52
|
+
</form>
|
53
|
+
)}
|
54
|
+
|
49
55
|
</Filter>
|
50
56
|
)
|
51
57
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%=
|
2
2
|
pb_rails("filter", props: {
|
3
|
-
min_width: "
|
3
|
+
min_width: "360px",
|
4
4
|
id: "fo",
|
5
5
|
filters: [
|
6
6
|
{ name: "name", value: "John Wick" }
|
@@ -14,7 +14,7 @@
|
|
14
14
|
OpenStruct.new(name: "Canada", value: 2),
|
15
15
|
OpenStruct.new(name: "Brazil", value: 3),
|
16
16
|
OpenStruct.new(name: "Philippines", value: 4),
|
17
|
-
OpenStruct.new(name: "A galaxy far far away
|
17
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
18
18
|
]
|
19
19
|
%>
|
20
20
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
@@ -7,41 +7,48 @@ const FilterOnly = (props) => {
|
|
7
7
|
{ value: 'Canada' },
|
8
8
|
{ value: 'Brazil' },
|
9
9
|
{ value: 'Philippines' },
|
10
|
-
{ value: 'A galaxy far far away
|
10
|
+
{ value: 'A galaxy far far away...' },
|
11
11
|
]
|
12
12
|
return (
|
13
13
|
<Filter
|
14
14
|
filters={{ 'Full Name': 'John Wick' }}
|
15
|
-
minWidth="
|
15
|
+
minWidth="360px"
|
16
16
|
{...props}
|
17
17
|
>
|
18
|
-
|
19
|
-
|
20
|
-
placeholder="Enter name"
|
21
|
-
{...props}
|
22
|
-
/>
|
18
|
+
{({ closePopover }) => (
|
19
|
+
<form>
|
23
20
|
|
24
|
-
|
25
|
-
|
26
|
-
|
27
|
-
name="location"
|
28
|
-
options={options}
|
29
|
-
{...props}
|
30
|
-
/>
|
31
|
-
<Flex
|
32
|
-
spacing="between"
|
33
|
-
{...props}
|
34
|
-
>
|
35
|
-
<Button
|
36
|
-
text="Apply"
|
21
|
+
<TextInput
|
22
|
+
label="Full Name"
|
23
|
+
placeholder="Enter name"
|
37
24
|
{...props}
|
38
25
|
/>
|
39
|
-
|
40
|
-
|
41
|
-
|
26
|
+
|
27
|
+
<Select
|
28
|
+
blankSelection="Select One..."
|
29
|
+
label="Territory"
|
30
|
+
name="location"
|
31
|
+
options={options}
|
42
32
|
{...props}
|
43
33
|
/>
|
44
|
-
|
34
|
+
<Flex
|
35
|
+
spacing="between"
|
36
|
+
{...props}
|
37
|
+
>
|
38
|
+
<Button
|
39
|
+
onClick={closePopover}
|
40
|
+
text="Apply"
|
41
|
+
{...props}
|
42
|
+
/>
|
43
|
+
<Button
|
44
|
+
text="Clear"
|
45
|
+
variant="secondary"
|
46
|
+
{...props}
|
47
|
+
/>
|
48
|
+
</Flex>
|
49
|
+
</form>
|
50
|
+
)}
|
51
|
+
|
45
52
|
</Filter>
|
46
53
|
)
|
47
54
|
}
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%=
|
2
2
|
pb_rails("filter", props: {
|
3
|
-
min_width: "
|
3
|
+
min_width: "360px",
|
4
4
|
id: "pla",
|
5
5
|
filters: [
|
6
6
|
{ name: "name", value: "John Wick" }
|
@@ -15,7 +15,7 @@
|
|
15
15
|
OpenStruct.new(name: "Canada", value: 2),
|
16
16
|
OpenStruct.new(name: "Brazil", value: 3),
|
17
17
|
OpenStruct.new(name: "Philippines", value: 4),
|
18
|
-
OpenStruct.new(name: "A galaxy far far away
|
18
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
19
19
|
]
|
20
20
|
%>
|
21
21
|
<%= pb_rails("form", props: { form_system_options: { scope: :example, method: :get } }) do |form| %>
|
@@ -11,14 +11,14 @@ const FilterPlacement = (props) => {
|
|
11
11
|
{ value: 'Canada' },
|
12
12
|
{ value: 'Brazil' },
|
13
13
|
{ value: 'Philippines' },
|
14
|
-
{ value: 'A galaxy far far away
|
14
|
+
{ value: 'A galaxy far far away...' },
|
15
15
|
]
|
16
16
|
return (
|
17
17
|
|
18
18
|
<>
|
19
19
|
<Filter
|
20
20
|
double
|
21
|
-
minWidth="
|
21
|
+
minWidth="360px"
|
22
22
|
onSortChange={SortingChangeCallback}
|
23
23
|
placement={"right"}
|
24
24
|
results={1}
|
@@ -32,33 +32,39 @@ const FilterPlacement = (props) => {
|
|
32
32
|
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
33
33
|
{...props}
|
34
34
|
>
|
35
|
-
|
36
|
-
|
37
|
-
placeholder="Enter Text"
|
38
|
-
{...props}
|
39
|
-
/>
|
35
|
+
{({ closePopover }) => (
|
36
|
+
<form>
|
40
37
|
|
41
|
-
|
42
|
-
|
43
|
-
|
44
|
-
name="Collection Select"
|
45
|
-
options={options}
|
46
|
-
{...props}
|
47
|
-
/>
|
48
|
-
<Flex
|
49
|
-
spacing="between"
|
50
|
-
{...props}
|
51
|
-
>
|
52
|
-
<Button
|
53
|
-
text="Apply"
|
38
|
+
<TextInput
|
39
|
+
label="Example Text Field"
|
40
|
+
placeholder="Enter Text"
|
54
41
|
{...props}
|
55
42
|
/>
|
56
|
-
|
57
|
-
|
58
|
-
|
43
|
+
|
44
|
+
<Select
|
45
|
+
blankSelection="Select One..."
|
46
|
+
label="Example Collection Select"
|
47
|
+
name="Collection Select"
|
48
|
+
options={options}
|
59
49
|
{...props}
|
60
50
|
/>
|
61
|
-
|
51
|
+
<Flex
|
52
|
+
spacing="between"
|
53
|
+
{...props}
|
54
|
+
>
|
55
|
+
<Button
|
56
|
+
onClick={closePopover}
|
57
|
+
text="Apply"
|
58
|
+
{...props}
|
59
|
+
/>
|
60
|
+
<Button
|
61
|
+
text="Clear"
|
62
|
+
variant="secondary"
|
63
|
+
{...props}
|
64
|
+
/>
|
65
|
+
</Flex>
|
66
|
+
</form>
|
67
|
+
)}
|
62
68
|
</Filter>
|
63
69
|
</>
|
64
70
|
)
|
@@ -1,4 +1,4 @@
|
|
1
|
-
Click the filter
|
1
|
+
Click the filter button above to toggle the popover.
|
2
2
|
|
3
3
|
To change the filter's popover position, use the `placement` prop with one of the positions:
|
4
4
|
`"top" | "right" | "bottom" | "left" | "top-start" | "top-end" | "bottom-start" | "bottom-end" | "right-start" | "right-end" | "left-start" | "left-end"`
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<%=
|
2
2
|
pb_rails("filter", props: {
|
3
|
-
min_width: "
|
3
|
+
min_width: "360px",
|
4
4
|
id: "2",
|
5
5
|
filters: [
|
6
6
|
{ name: "name", value: "John Wick" }
|
@@ -20,7 +20,7 @@
|
|
20
20
|
OpenStruct.new(name: "Canada", value: 2),
|
21
21
|
OpenStruct.new(name: "Brazil", value: 3),
|
22
22
|
OpenStruct.new(name: "Philippines", value: 4),
|
23
|
-
OpenStruct.new(name: "A galaxy far far away
|
23
|
+
OpenStruct.new(name: "A galaxy far far away...", value: 5)
|
24
24
|
]
|
25
25
|
%>
|
26
26
|
|
@@ -13,14 +13,14 @@ const FilterSingle = (props) => {
|
|
13
13
|
{ value: 'Canada' },
|
14
14
|
{ value: 'Brazil' },
|
15
15
|
{ value: 'Philippines' },
|
16
|
-
{ value: 'A galaxy far far away
|
16
|
+
{ value: 'A galaxy far far away...' },
|
17
17
|
]
|
18
18
|
return (
|
19
19
|
<Filter
|
20
20
|
filters={{
|
21
21
|
'Full Name': 'John Wick',
|
22
22
|
}}
|
23
|
-
minWidth="
|
23
|
+
minWidth="360px"
|
24
24
|
results={546}
|
25
25
|
sortOptions={{
|
26
26
|
popularity: 'Popularity',
|
@@ -32,33 +32,38 @@ const FilterSingle = (props) => {
|
|
32
32
|
sortValue={[{ name: 'popularity', dir: 'desc' }]}
|
33
33
|
{...props}
|
34
34
|
>
|
35
|
-
|
36
|
-
|
37
|
-
|
38
|
-
|
39
|
-
|
40
|
-
|
41
|
-
<Select
|
42
|
-
blankSelection="Select One..."
|
43
|
-
label="Territory"
|
44
|
-
name="location"
|
45
|
-
options={options}
|
46
|
-
{...props}
|
47
|
-
/>
|
48
|
-
<Flex
|
49
|
-
spacing="between"
|
50
|
-
{...props}
|
51
|
-
>
|
52
|
-
<Button
|
53
|
-
text="Apply"
|
35
|
+
{({ closePopover }) => (
|
36
|
+
<form>
|
37
|
+
<TextInput
|
38
|
+
label="Full Name"
|
39
|
+
placeholder="Enter name"
|
54
40
|
{...props}
|
55
41
|
/>
|
56
|
-
|
57
|
-
|
58
|
-
|
42
|
+
|
43
|
+
<Select
|
44
|
+
blankSelection="Select One..."
|
45
|
+
label="Territory"
|
46
|
+
name="location"
|
47
|
+
options={options}
|
59
48
|
{...props}
|
60
49
|
/>
|
61
|
-
|
50
|
+
<Flex
|
51
|
+
spacing="between"
|
52
|
+
{...props}
|
53
|
+
>
|
54
|
+
<Button
|
55
|
+
onClick={closePopover}
|
56
|
+
text="Apply"
|
57
|
+
{...props}
|
58
|
+
/>
|
59
|
+
<Button
|
60
|
+
text="Clear"
|
61
|
+
variant="secondary"
|
62
|
+
{...props}
|
63
|
+
/>
|
64
|
+
</Flex>
|
65
|
+
</form>
|
66
|
+
)}
|
62
67
|
</Filter>
|
63
68
|
)
|
64
69
|
}
|
@@ -7,7 +7,7 @@ examples:
|
|
7
7
|
- filter_no_sort: No Sort
|
8
8
|
- filter_only: Filter Only
|
9
9
|
- sort_only: Sort Only
|
10
|
-
-
|
10
|
+
- filter_max_width: Max Width for Popover Inside of Filter
|
11
11
|
- filter_placement: Filter Placement
|
12
12
|
|
13
13
|
react:
|
@@ -17,6 +17,5 @@ examples:
|
|
17
17
|
- filter_no_sort: No Sort
|
18
18
|
- filter_only: Filter Only
|
19
19
|
- sort_only: Sort Only
|
20
|
-
-
|
21
|
-
- filter_close_popover: Close Popover
|
20
|
+
- filter_max_width: Max Width for Popover Inside of Filter
|
22
21
|
- filter_placement: Filter Placement
|
@@ -4,6 +4,5 @@ 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
|
8
|
-
export { default as FilterClosePopover } from './_filter_close_popover.jsx'
|
7
|
+
export { default as FilterMaxWidth } from './_filter_max_width.jsx'
|
9
8
|
export { default as FilterPlacement } from './_filter_placement.jsx'
|
@@ -34,8 +34,16 @@ const Legend = (props: LegendProps) => {
|
|
34
34
|
|
35
35
|
const ariaProps = buildAriaProps(aria)
|
36
36
|
const dataProps = buildDataProps(data)
|
37
|
+
|
38
|
+
const customColor = color.charAt(0) === '#' && color
|
39
|
+
|
40
|
+
const customColorStyle = {
|
41
|
+
background: customColor
|
42
|
+
}
|
43
|
+
|
44
|
+
|
37
45
|
const bodyCss = classnames(
|
38
|
-
buildCss('pb_legend_kit', color),
|
46
|
+
buildCss('pb_legend_kit', customColor ? "" : color),
|
39
47
|
globalProps(props),
|
40
48
|
className
|
41
49
|
)
|
@@ -48,7 +56,9 @@ const Legend = (props: LegendProps) => {
|
|
48
56
|
id={id}
|
49
57
|
>
|
50
58
|
<Body color={dark ? 'lighter' : 'light'}>
|
51
|
-
<span className="pb_legend_indicator_circle"
|
59
|
+
<span className={`${customColor ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"}`}
|
60
|
+
style={customColorStyle}
|
61
|
+
/>
|
52
62
|
<If condition={prefixText}>
|
53
63
|
<Title
|
54
64
|
dark={dark}
|
@@ -23,6 +23,12 @@
|
|
23
23
|
@include indicator-colors($data_colors);
|
24
24
|
@include indicator-colors($status_colors);
|
25
25
|
@include indicator-colors($product_colors);
|
26
|
-
@include indicator-colors($category_colors)
|
26
|
+
@include indicator-colors($category_colors);
|
27
27
|
|
28
|
+
.pb_legend_indicator_circle_custom {
|
29
|
+
display: inline-block;
|
30
|
+
width: 10px;
|
31
|
+
height: 10px;
|
32
|
+
border-radius: 5px;
|
33
|
+
}
|
28
34
|
}
|
@@ -0,0 +1,24 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
import { Legend } from '../..'
|
3
|
+
|
4
|
+
const LegendCustomColors = (props) => (
|
5
|
+
<div>
|
6
|
+
<Legend
|
7
|
+
color="#dc418a"
|
8
|
+
text="Windows"
|
9
|
+
{...props}
|
10
|
+
/>
|
11
|
+
<Legend
|
12
|
+
color="#3ef0b8"
|
13
|
+
text="Windows"
|
14
|
+
{...props}
|
15
|
+
/>
|
16
|
+
<Legend
|
17
|
+
color="#ab8b04"
|
18
|
+
text="Windows"
|
19
|
+
{...props}
|
20
|
+
/>
|
21
|
+
</div>
|
22
|
+
)
|
23
|
+
|
24
|
+
export default LegendCustomColors
|
@@ -0,0 +1 @@
|
|
1
|
+
The color prop also allows for use of custom colors passed in as HEX codes.
|
@@ -4,8 +4,10 @@ examples:
|
|
4
4
|
- legend_default: Default
|
5
5
|
- legend_prefix: With Prefix Text
|
6
6
|
- legend_colors: Colors
|
7
|
+
- legend_custom_colors: Custom Colors
|
7
8
|
|
8
9
|
react:
|
9
10
|
- legend_default: Default
|
10
11
|
- legend_prefix: With Prefix Text
|
11
12
|
- legend_colors: Colors
|
13
|
+
- legend_custom_colors: Custom Colors
|
@@ -4,7 +4,7 @@
|
|
4
4
|
data: object.data,
|
5
5
|
class: object.classname) do %>
|
6
6
|
<%= pb_rails("body", props: {color: object.body_color}) do %>
|
7
|
-
<span
|
7
|
+
<span style="<%= object.custom_color %>" class=<%= object.custom_color_class %>></span>
|
8
8
|
<%= pb_rails("title", props: { dark: object.dark, text: object.prefix_text, tag: "span", size: 4 }) %>
|
9
9
|
<%= object.text %>
|
10
10
|
<% end %>
|
@@ -12,8 +12,16 @@ module Playbook
|
|
12
12
|
dark ? "lighter" : "light"
|
13
13
|
end
|
14
14
|
|
15
|
+
def custom_color
|
16
|
+
color.start_with?("#") ? "background: #{color}" : ""
|
17
|
+
end
|
18
|
+
|
19
|
+
def custom_color_class
|
20
|
+
color.start_with?("#") ? "pb_legend_indicator_circle_custom" : "pb_legend_indicator_circle"
|
21
|
+
end
|
22
|
+
|
15
23
|
def classname
|
16
|
-
generate_classname("pb_legend_kit", color)
|
24
|
+
generate_classname("pb_legend_kit", color.start_with?("#") ? nil : color)
|
17
25
|
end
|
18
26
|
end
|
19
27
|
end
|
@@ -121,7 +121,6 @@ $pb_selectable_card_border: 2px;
|
|
121
121
|
}
|
122
122
|
.separator{
|
123
123
|
background: $error_dark;
|
124
|
-
width: 2px;
|
125
124
|
}
|
126
125
|
}
|
127
126
|
}
|
@@ -144,7 +143,6 @@ $pb_selectable_card_border: 2px;
|
|
144
143
|
}
|
145
144
|
.separator {
|
146
145
|
background: $error;
|
147
|
-
width: 2px;
|
148
146
|
}
|
149
147
|
}
|
150
148
|
}
|
@@ -6,16 +6,19 @@
|
|
6
6
|
&[class*=_1] {
|
7
7
|
@include pb_title_1;
|
8
8
|
@include title_colors;
|
9
|
+
@include pb_title_bold;
|
9
10
|
}
|
10
11
|
|
11
12
|
&[class*=_2] {
|
12
13
|
@include pb_title_2;
|
13
14
|
@include title_colors;
|
15
|
+
@include pb_title_bold;
|
14
16
|
}
|
15
17
|
|
16
18
|
&[class*=_3] {
|
17
19
|
@include pb_title_3;
|
18
20
|
@include title_colors;
|
21
|
+
@include pb_title_bold;
|
19
22
|
}
|
20
23
|
|
21
24
|
&[class*=_4] {
|
@@ -26,4 +29,8 @@
|
|
26
29
|
&.dark {
|
27
30
|
@include pb_title_dark;
|
28
31
|
}
|
32
|
+
|
33
|
+
&[class*=_thin] {
|
34
|
+
@include pb_title_thin;
|
35
|
+
}
|
29
36
|
}
|
@@ -5,6 +5,7 @@ import { deprecatedProps, GlobalProps, globalProps } from '../utilities/globalPr
|
|
5
5
|
|
6
6
|
type TitleProps = {
|
7
7
|
aria?: {[key: string]: string},
|
8
|
+
bold?: boolean,
|
8
9
|
children?: React.ReactChild[] | React.ReactChild,
|
9
10
|
className?: string,
|
10
11
|
color?: "default" | "light" | "lighter" | "success" | "error" | "link",
|
@@ -20,6 +21,7 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
20
21
|
if (props.variant) deprecatedProps('Title', ['variant']) //variant prop is deprecated, use color instead
|
21
22
|
const {
|
22
23
|
aria = {},
|
24
|
+
bold = true,
|
23
25
|
children,
|
24
26
|
className,
|
25
27
|
color,
|
@@ -33,8 +35,9 @@ const Title = (props: TitleProps): React.ReactElement => {
|
|
33
35
|
|
34
36
|
const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
|
35
37
|
const dataProps: {[key: string]: string | number} = buildDataProps(data)
|
38
|
+
const getBold = bold ? '' : 'thin'
|
36
39
|
const classes = classnames(
|
37
|
-
buildCss('pb_title_kit', `size_${size}`, variant, color),
|
40
|
+
buildCss('pb_title_kit', `size_${size}`, variant, color, getBold),
|
38
41
|
globalProps(props),
|
39
42
|
className,
|
40
43
|
)
|
@@ -5,7 +5,7 @@
|
|
5
5
|
|
6
6
|
<br/>
|
7
7
|
|
8
|
-
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
|
8
|
+
<%= pb_rails("title", props: { text: "Title 4", tag: "h4", size: 4 }) %>
|
9
9
|
<%= pb_rails("title", props: { text: "Title 3", tag: "h3", size: 3 }) %>
|
10
10
|
<%= pb_rails("title", props: { text: "Title 2", tag: "h2", size: 2 }) %>
|
11
11
|
<%= pb_rails("title", props: { text: "Title 1", tag: "h1", size: 1 }) %>
|
@@ -2,7 +2,7 @@ import React from 'react'
|
|
2
2
|
|
3
3
|
import Title from '../_title'
|
4
4
|
|
5
|
-
const
|
5
|
+
const TitleDefault = (props) => {
|
6
6
|
return (
|
7
7
|
<div>
|
8
8
|
<Title
|
@@ -38,4 +38,4 @@ const TitleLight = (props) => {
|
|
38
38
|
)
|
39
39
|
}
|
40
40
|
|
41
|
-
export default
|
41
|
+
export default TitleDefault
|
File without changes
|