playbook_ui 10.23.0 → 10.25.0.pre.treeshaking1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_background/_background.jsx +11 -2
- data/app/pb_kits/playbook/pb_background/_background.scss +2 -2
- data/app/pb_kits/playbook/pb_background/background.html.erb +5 -2
- data/app/pb_kits/playbook/pb_background/background.rb +28 -1
- data/app/pb_kits/playbook/pb_background/background.test.js +17 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_light.html.erb +1 -1
- data/app/pb_kits/playbook/pb_background/docs/_background_size.html.erb +5 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_size.jsx +36 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_size.md +3 -0
- data/app/pb_kits/playbook/pb_background/docs/_description.md +3 -1
- 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_bread_crumbs/_bread_crumb_item.jsx +2 -2
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +13 -1
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.html.erb +13 -6
- data/app/pb_kits/playbook/pb_dashboard_value/docs/_dashboard_value_default.jsx +9 -0
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +3 -3
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md +2 -2
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +0 -1
- data/app/pb_kits/playbook/pb_select/_select.jsx +2 -2
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.html.erb +2 -0
- data/app/pb_kits/playbook/pb_stat_value/docs/_stat_value_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_stat_value/stat_value.rb +2 -2
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +24 -19
- data/app/pb_kits/playbook/utilities/globalProps.ts +23 -0
- data/lib/playbook/version.rb +2 -2
- metadata +7 -4
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: aefb339d6c0b9b986bb10dd16b045f6012cb6b2819ee1d924a1651aa2d4e13fd
|
|
4
|
+
data.tar.gz: d658abf6db94843cb077d1a93647c0e0b2b11586eb1a745b922cf1612532e8ab
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: 0507f95acaa25aeb202b2b801ded2a85f58d88a425b363b9b5906a9497c9ff869cc8b49cd30034d74f455393dca771fe606904b71b5056b89c20b040fd7d39c3
|
|
7
|
+
data.tar.gz: b19ca53b6d78eeea25a9098f847ac43f8baf617352d5c5dccc037cf2e196e15abbff9e9050738054c9bd856f1e3c925901fb6efcaca3393223559ae56de98272
|
|
@@ -9,8 +9,11 @@ type BackgroundProps = {
|
|
|
9
9
|
alt?: string,
|
|
10
10
|
aria?: object,
|
|
11
11
|
backgroundColor?: 'gradient' | 'dark' | 'light' | 'white' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'primary' | 'category_1' | 'category_2' | 'category_3' | 'category_4' | 'category_5' | 'category_6' | 'category_7' | 'category_8' | 'category_9' | 'category_10' | 'category_11' | 'category_12' | 'category_13' | 'category_14' | 'category_15' | 'category_16' | 'category_17' | 'category_18' | 'category_19' | 'category_20' | 'category_21',
|
|
12
|
+
backgroundRepeat?: 'repeat' | 'repeat-x' | 'repeat-y' | 'no-repeat' | 'space' | 'round' | 'initial' | 'inherit',
|
|
13
|
+
backgroundSize?: 'auto' | 'cover' | 'contain',
|
|
12
14
|
children?: array<React.ReactNode> | React.ReactNode,
|
|
13
15
|
className?: string,
|
|
16
|
+
customColor?: string,
|
|
14
17
|
data?: object,
|
|
15
18
|
id?: string,
|
|
16
19
|
imageUrl?: string,
|
|
@@ -24,8 +27,11 @@ const Background = (props: BackgroundProps) => {
|
|
|
24
27
|
alt = '',
|
|
25
28
|
aria = {},
|
|
26
29
|
backgroundColor = 'light',
|
|
30
|
+
backgroundRepeat = 'initial',
|
|
31
|
+
backgroundSize = 'cover',
|
|
27
32
|
children,
|
|
28
33
|
className,
|
|
34
|
+
customColor,
|
|
29
35
|
data = {},
|
|
30
36
|
id,
|
|
31
37
|
imageUrl = '',
|
|
@@ -38,9 +44,11 @@ const Background = (props: BackgroundProps) => {
|
|
|
38
44
|
|
|
39
45
|
const backgroundStyle = {
|
|
40
46
|
backgroundImage: `url(${imageUrl})`,
|
|
41
|
-
|
|
47
|
+
backgroundRepeat: `${backgroundRepeat}`,
|
|
48
|
+
backgroundSize: `${backgroundSize}`,
|
|
42
49
|
}
|
|
43
|
-
const
|
|
50
|
+
const getBackgroundColor = customColor ? 'pb_background_custom_color' : `pb_background_color_${backgroundColor}`
|
|
51
|
+
const classes = classnames(buildCss('pb_background_kit'), 'lazyload', backgroundStyle, transition, globalProps(props), getBackgroundColor, className)
|
|
44
52
|
const Tag = `${tag}`
|
|
45
53
|
|
|
46
54
|
return (
|
|
@@ -62,6 +70,7 @@ const Background = (props: BackgroundProps) => {
|
|
|
62
70
|
{...dataProps}
|
|
63
71
|
className={classes}
|
|
64
72
|
id={id}
|
|
73
|
+
style={customColor ? { backgroundColor: customColor } : null}
|
|
65
74
|
>
|
|
66
75
|
{ children }
|
|
67
76
|
</Tag>
|
|
@@ -29,7 +29,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
|
|
|
29
29
|
transition: opacity 400ms ease-in;
|
|
30
30
|
}
|
|
31
31
|
}
|
|
32
|
-
|
|
32
|
+
|
|
33
33
|
&.blur {
|
|
34
34
|
filter: blur(5px);
|
|
35
35
|
&.lazyloaded {
|
|
@@ -38,7 +38,7 @@ $background_colors: map-merge($additional_colors, $merge_kits2);
|
|
|
38
38
|
transition: filter 400ms ease-in;
|
|
39
39
|
}
|
|
40
40
|
}
|
|
41
|
-
|
|
41
|
+
|
|
42
42
|
&.scale {
|
|
43
43
|
opacity: 0;
|
|
44
44
|
transform: scale(0.9);
|
|
@@ -4,7 +4,9 @@
|
|
|
4
4
|
data: object.data,
|
|
5
5
|
id: object.id,
|
|
6
6
|
class: object.classname,
|
|
7
|
-
style: "background-image: url('#{object.image_url}');
|
|
7
|
+
style: "background-image: url('#{object.image_url}');
|
|
8
|
+
background-repeat: #{object.background_repeat};
|
|
9
|
+
background-size: #{object.background_size};"
|
|
8
10
|
) do %>
|
|
9
11
|
<%= content.presence %>
|
|
10
12
|
<% end %>
|
|
@@ -13,7 +15,8 @@
|
|
|
13
15
|
aria: object.aria,
|
|
14
16
|
data: object.data,
|
|
15
17
|
id: object.id,
|
|
16
|
-
class: object.classname
|
|
18
|
+
class: object.classname,
|
|
19
|
+
style: object.custom_background_color
|
|
17
20
|
) do %>
|
|
18
21
|
<%= content.presence %>
|
|
19
22
|
<% end %>
|
|
@@ -6,6 +6,24 @@ module Playbook
|
|
|
6
6
|
prop :background_color, type: Playbook::Props::Enum,
|
|
7
7
|
values: %w[gradient dark light white success warning error info neutral primary category_1 category_2 category_3 category_4 category_5 category_6 category_7 category_8 category_9 category_10 category_11 category_12 category_13 category_14 category_15 category_16 category_17 category_18 category_19 category_20 category_21],
|
|
8
8
|
default: "light"
|
|
9
|
+
|
|
10
|
+
prop :background_repeat, type: Playbook::Props::Enum,
|
|
11
|
+
values: %w[
|
|
12
|
+
repeat
|
|
13
|
+
repeat-x
|
|
14
|
+
repeat-y
|
|
15
|
+
no-repeat
|
|
16
|
+
space
|
|
17
|
+
round
|
|
18
|
+
initial
|
|
19
|
+
inherit
|
|
20
|
+
],
|
|
21
|
+
default: "initial"
|
|
22
|
+
|
|
23
|
+
prop :background_size, type: Playbook::Props::Enum,
|
|
24
|
+
values: %w[contain cover auto],
|
|
25
|
+
default: "cover"
|
|
26
|
+
|
|
9
27
|
prop :image_url
|
|
10
28
|
|
|
11
29
|
prop :tag, type: Playbook::Props::Enum,
|
|
@@ -16,14 +34,23 @@ module Playbook
|
|
|
16
34
|
values: ["blur", "fade", "scale", nil],
|
|
17
35
|
default: nil
|
|
18
36
|
|
|
37
|
+
prop :custom_color, type: Playbook::Props::String,
|
|
38
|
+
default: nil
|
|
39
|
+
|
|
19
40
|
def classname
|
|
20
41
|
generate_classname("pb_background_kit", image_classname, separator: " ")
|
|
21
42
|
end
|
|
22
43
|
|
|
44
|
+
def custom_background_color
|
|
45
|
+
"background-color: #{custom_color};"
|
|
46
|
+
end
|
|
47
|
+
|
|
23
48
|
private
|
|
24
49
|
|
|
25
50
|
def image_classname
|
|
26
|
-
|
|
51
|
+
background_class = custom_color.present? ? "pb_background_custom_color" : "pb_background_color_#{background_color}"
|
|
52
|
+
background_class_lazy = image_url.present? ? " lazyload #{transition}" : ""
|
|
53
|
+
"#{background_class}#{background_class_lazy}"
|
|
27
54
|
end
|
|
28
55
|
end
|
|
29
56
|
end
|
|
@@ -20,3 +20,20 @@ test('backgroundColor = category_1', () => {
|
|
|
20
20
|
const kit = renderKit(Background, props, { backgroundColor: 'category_1' })
|
|
21
21
|
expect(kit).toHaveClass('pb_background_kit pb_background_color_category_1')
|
|
22
22
|
})
|
|
23
|
+
|
|
24
|
+
test('customColor prop styles background color with a hex value', () => {
|
|
25
|
+
const kit = renderKit(Background, props, { customColor: '#1d99a8' })
|
|
26
|
+
|
|
27
|
+
expect(kit).toHaveClass('pb_background_kit pb_background_custom_color')
|
|
28
|
+
expect(kit).toHaveStyle(`background-color: #1d99a8;`)
|
|
29
|
+
})
|
|
30
|
+
|
|
31
|
+
test('backgroundRepeat = repeat', () => {
|
|
32
|
+
const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundRepeat: 'repeat' })
|
|
33
|
+
expect(kit).toHaveStyle('background-repeat: repeat')
|
|
34
|
+
})
|
|
35
|
+
|
|
36
|
+
test('backgroundSize = auto', () => {
|
|
37
|
+
const kit = renderKit(Background, props, { classname: "background-image", imageUrl: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", backgroundSize: 'auto' })
|
|
38
|
+
expect(kit).toHaveStyle('background-size: auto')
|
|
39
|
+
})
|
|
@@ -0,0 +1,5 @@
|
|
|
1
|
+
<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "auto", padding: "xl" }) %>
|
|
2
|
+
<br/>
|
|
3
|
+
<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_size: "cover", padding: "xl" }) %>
|
|
4
|
+
<br/>
|
|
5
|
+
<%= pb_rails("background", props: { classname: "background-image", image_url: "https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80", background_repeat: "no-repeat", background_size: "contain", padding: "xl" }) %>
|
|
@@ -0,0 +1,36 @@
|
|
|
1
|
+
import React, { Fragment as F } from 'react'
|
|
2
|
+
import { Background } from '../..'
|
|
3
|
+
|
|
4
|
+
const BackgroundSize = (props) => (
|
|
5
|
+
<F>
|
|
6
|
+
<Background
|
|
7
|
+
alt="colorful background"
|
|
8
|
+
backgroundSize="auto"
|
|
9
|
+
className="background lazyload"
|
|
10
|
+
imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
|
|
11
|
+
padding="xl"
|
|
12
|
+
{...props}
|
|
13
|
+
/>
|
|
14
|
+
<br/>
|
|
15
|
+
<Background
|
|
16
|
+
alt="colorful background"
|
|
17
|
+
backgroundSize="cover"
|
|
18
|
+
className="background lazyload"
|
|
19
|
+
imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
|
|
20
|
+
padding="xl"
|
|
21
|
+
{...props}
|
|
22
|
+
/>
|
|
23
|
+
<br/>
|
|
24
|
+
<Background
|
|
25
|
+
alt="colorful background"
|
|
26
|
+
backgroundRepeat="no-repeat"
|
|
27
|
+
backgroundSize="contain"
|
|
28
|
+
className="background lazyload"
|
|
29
|
+
imageUrl="https://images.unsplash.com/photo-1528459801416-a9e53bbf4e17?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1000&q=80"
|
|
30
|
+
padding="xl"
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
</F>
|
|
34
|
+
)
|
|
35
|
+
|
|
36
|
+
export default BackgroundSize
|
|
@@ -0,0 +1,3 @@
|
|
|
1
|
+
Background size can be passed into the background kit. Values `auto`, `cover`, and `contain` are accepted.
|
|
2
|
+
|
|
3
|
+
💡 *Note:* When using `contain` you might not want to have a repeating background as this will not always look pleasant. To prevent this, you may pass `no-repeat` to the `backgroundRepeat` prop.
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
|
|
1
|
+
The background kit is used for adding a background to a page or to any container. Instead of adding a custom class to give something a background, you can now wrap the elements in the background kit and use the `background_color` prop to assign its color. The colors that you can choose from for the `background_color` prop are: gradient, dark, light, white, status colors, product colors, and category colors.
|
|
2
|
+
|
|
3
|
+
The `custom_color` prop allows you to pass a hex value (ex. "#e43718") in place of `background_color`. It is not case sensitive, but needs to start with `#`. This prop exists primarily for use in microsites and very specific situations. Avoid using unless absolutely necessary to maintain continuity.
|
|
@@ -7,6 +7,7 @@ examples:
|
|
|
7
7
|
- background_image: Image
|
|
8
8
|
- background_status: Status
|
|
9
9
|
- background_category: Category
|
|
10
|
+
- background_size: Size
|
|
10
11
|
|
|
11
12
|
react:
|
|
12
13
|
- background_light: Light
|
|
@@ -15,3 +16,4 @@ examples:
|
|
|
15
16
|
- background_image: Image
|
|
16
17
|
- background_status: Status
|
|
17
18
|
- background_category: Category
|
|
19
|
+
- background_size: Size
|
|
@@ -4,3 +4,4 @@ export { default as BackgroundGradient } from './_background_gradient.jsx'
|
|
|
4
4
|
export { default as BackgroundImage } from './_background_image.jsx'
|
|
5
5
|
export { default as BackgroundStatus } from './_background_status.jsx'
|
|
6
6
|
export { default as BackgroundCategory } from './_background_category.jsx'
|
|
7
|
+
export { default as BackgroundSize } from './_background_size.jsx'
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
|
|
3
3
|
import React from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
|
5
|
-
import { globalProps } from '../utilities/globalProps'
|
|
5
|
+
import { globalProps, domSafeProps } from '../utilities/globalProps'
|
|
6
6
|
|
|
7
7
|
import {
|
|
8
8
|
buildAriaProps,
|
|
@@ -43,7 +43,7 @@ const BreadCrumbItem = (props: BreadCrumbItemProps) => {
|
|
|
43
43
|
>
|
|
44
44
|
<Component
|
|
45
45
|
className="pb_bread_crumb_item"
|
|
46
|
-
{...rest}
|
|
46
|
+
{...domSafeProps(rest)}
|
|
47
47
|
/>
|
|
48
48
|
</div>
|
|
49
49
|
)
|
|
@@ -13,12 +13,24 @@ module Playbook
|
|
|
13
13
|
default: {}
|
|
14
14
|
|
|
15
15
|
def formatted_stat_value
|
|
16
|
-
{ **stat_value, value:
|
|
16
|
+
{ **stat_value, value: sanitized_stat_value }
|
|
17
17
|
end
|
|
18
18
|
|
|
19
19
|
def classname
|
|
20
20
|
generate_classname("pb_dashboard_value_kit", align)
|
|
21
21
|
end
|
|
22
|
+
|
|
23
|
+
# rubocop:disable Lint/FloatComparison
|
|
24
|
+
# Comparing the value coerced to a float versus an integer is the point of this methodd
|
|
25
|
+
def sanitized_stat_value
|
|
26
|
+
value = stat_value[:value]
|
|
27
|
+
if value.is_a?(::String)
|
|
28
|
+
value.to_f == value.to_i ? value.to_i : value.to_f
|
|
29
|
+
else
|
|
30
|
+
value
|
|
31
|
+
end
|
|
32
|
+
end
|
|
33
|
+
# rubocop:enable Lint/FloatComparison
|
|
22
34
|
end
|
|
23
35
|
end
|
|
24
36
|
end
|
|
@@ -1,21 +1,28 @@
|
|
|
1
1
|
<%= pb_rails("dashboard_value", props: {
|
|
2
2
|
stat_label: "Decreased Value",
|
|
3
|
-
stat_value: {value: 1428, unit: "appts"},
|
|
4
|
-
stat_change: {change: "decrease", value: 26.1}
|
|
3
|
+
stat_value: { value: 1428, unit: "appts" },
|
|
4
|
+
stat_change: { change: "decrease", value: 26.1 }
|
|
5
5
|
}) %>
|
|
6
6
|
|
|
7
7
|
<br><br>
|
|
8
8
|
|
|
9
9
|
<%= pb_rails("dashboard_value", props: {
|
|
10
10
|
stat_label: "Increased Value",
|
|
11
|
-
stat_value: {value: 938, unit: "homes"},
|
|
12
|
-
stat_change: {change: "increase", value: 56.1}
|
|
11
|
+
stat_value: { value: 938, unit: "homes" },
|
|
12
|
+
stat_change: { change: "increase", value: 56.1 }
|
|
13
13
|
}) %>
|
|
14
14
|
|
|
15
15
|
<br><br>
|
|
16
16
|
|
|
17
17
|
<%= pb_rails("dashboard_value", props: {
|
|
18
18
|
stat_label: "Neutral Value",
|
|
19
|
-
stat_value: {value: 261, unit: "windows"},
|
|
20
|
-
stat_change: {value: 86}
|
|
19
|
+
stat_value: { value: 261, unit: "windows" },
|
|
20
|
+
stat_change: { value: 86 }
|
|
21
|
+
}) %>
|
|
22
|
+
|
|
23
|
+
<br><br>
|
|
24
|
+
|
|
25
|
+
<%= pb_rails("dashboard_value", props: {
|
|
26
|
+
stat_label: "Pitch Rate",
|
|
27
|
+
stat_value: { value: 90.9, unit: "%" }
|
|
21
28
|
}) %>
|
|
@@ -31,6 +31,15 @@ const DashboardValueDefault = (props) => {
|
|
|
31
31
|
statValue={{ value: '261', unit: 'windows' }}
|
|
32
32
|
{...props}
|
|
33
33
|
/>
|
|
34
|
+
|
|
35
|
+
<br />
|
|
36
|
+
<br />
|
|
37
|
+
|
|
38
|
+
<DashboardValue
|
|
39
|
+
statLabel="Pitch Rate"
|
|
40
|
+
statValue={{ value: '90.9', unit: '%' }}
|
|
41
|
+
{...props}
|
|
42
|
+
/>
|
|
34
43
|
</div>
|
|
35
44
|
)
|
|
36
45
|
}
|
|
@@ -8,7 +8,7 @@
|
|
|
8
8
|
|
|
9
9
|
|
|
10
10
|
|
|
11
|
-
// Dialog Animations
|
|
11
|
+
// Dialog Animations
|
|
12
12
|
|
|
13
13
|
@keyframes modalFadeIn {
|
|
14
14
|
from {
|
|
@@ -72,7 +72,7 @@
|
|
|
72
72
|
border: 0;
|
|
73
73
|
max-height: calc(100vh - #{$gutter * 2});
|
|
74
74
|
max-width: calc(100vw - #{$gutter * 2});
|
|
75
|
-
overflow:
|
|
75
|
+
overflow: auto;
|
|
76
76
|
animation-name: modalFadeIn;
|
|
77
77
|
animation-duration: $animation-duration;
|
|
78
78
|
outline: none;
|
|
@@ -131,4 +131,4 @@
|
|
|
131
131
|
opacity: $opacity_hidden;
|
|
132
132
|
}
|
|
133
133
|
}
|
|
134
|
-
}
|
|
134
|
+
}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
When shouldCloseOnOverlayClick is explicitly set to `false`, click events on the overlay will not close the modal.
|
|
2
|
-
By default, shouldCloseOnOverlayClick is set to true.
|
|
1
|
+
When `shouldCloseOnOverlayClick` is explicitly set to `false`, click events on the overlay will not close the modal.
|
|
2
|
+
By default, `shouldCloseOnOverlayClick` is set to true.
|
|
@@ -4,7 +4,7 @@ import React, { forwardRef } from 'react'
|
|
|
4
4
|
import classnames from 'classnames'
|
|
5
5
|
|
|
6
6
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
|
7
|
-
import { globalProps } from '../utilities/globalProps'
|
|
7
|
+
import { globalProps, domSafeProps } from '../utilities/globalProps'
|
|
8
8
|
import type { InputCallback } from '../types'
|
|
9
9
|
|
|
10
10
|
import Body from '../pb_body/_body'
|
|
@@ -112,7 +112,7 @@ const Select = ({
|
|
|
112
112
|
{children}
|
|
113
113
|
<Else />
|
|
114
114
|
<select
|
|
115
|
-
{...props}
|
|
115
|
+
{...domSafeProps(props)}
|
|
116
116
|
disabled={disabled}
|
|
117
117
|
id={name}
|
|
118
118
|
multiple={multiple}
|
|
@@ -4,10 +4,10 @@ module Playbook
|
|
|
4
4
|
module PbStatValue
|
|
5
5
|
class StatValue < Playbook::KitBase
|
|
6
6
|
prop :unit
|
|
7
|
-
prop :value, type: Playbook::Props::
|
|
7
|
+
prop :value, type: Playbook::Props::Numeric
|
|
8
8
|
|
|
9
9
|
def formatted_value
|
|
10
|
-
number_with_delimiter(value, delimiter: ",")
|
|
10
|
+
number_with_delimiter(value, delimiter: ",", separator: ".")
|
|
11
11
|
end
|
|
12
12
|
|
|
13
13
|
def classname
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
import React, { forwardRef } from 'react'
|
|
3
3
|
import classnames from 'classnames'
|
|
4
4
|
|
|
5
|
-
import { globalProps } from '../utilities/globalProps'
|
|
5
|
+
import { globalProps, domSafeProps } from '../utilities/globalProps'
|
|
6
6
|
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
|
7
7
|
|
|
8
8
|
import Flex from '../pb_flex/_flex'
|
|
@@ -37,10 +37,11 @@ type TextInputProps = {
|
|
|
37
37
|
|
|
38
38
|
const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
|
|
39
39
|
const {
|
|
40
|
+
addOn = { icon: null, alignment: 'right', border: true },
|
|
40
41
|
aria = {},
|
|
41
42
|
className,
|
|
42
|
-
data = {},
|
|
43
43
|
dark = false,
|
|
44
|
+
data = {},
|
|
44
45
|
disabled,
|
|
45
46
|
error,
|
|
46
47
|
id,
|
|
@@ -53,7 +54,6 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
|
|
|
53
54
|
type = 'text',
|
|
54
55
|
value = '',
|
|
55
56
|
children = null,
|
|
56
|
-
addOn = { icon: null, alignment: 'right', border: true },
|
|
57
57
|
} = props
|
|
58
58
|
|
|
59
59
|
const ariaProps = buildAriaProps(aria)
|
|
@@ -85,10 +85,11 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
|
|
|
85
85
|
)
|
|
86
86
|
const textInput = (
|
|
87
87
|
<input
|
|
88
|
-
{...props}
|
|
88
|
+
{...domSafeProps(props)}
|
|
89
89
|
className="text_input"
|
|
90
90
|
disabled={disabled}
|
|
91
91
|
id={id}
|
|
92
|
+
key={id}
|
|
92
93
|
name={name}
|
|
93
94
|
onChange={onChange}
|
|
94
95
|
placeholder={placeholder}
|
|
@@ -107,21 +108,25 @@ const TextInput = (props: TextInputProps, ref: React.ElementRef<"input">) => {
|
|
|
107
108
|
vertical="center"
|
|
108
109
|
>
|
|
109
110
|
<If condition={addOnAlignment == 'left'}>
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
111
|
+
<>
|
|
112
|
+
<Card
|
|
113
|
+
className={`${addOnDarkModeCardCss} add-on-card card-left-aligned`}
|
|
114
|
+
dark={dark}
|
|
115
|
+
>
|
|
116
|
+
{addOnIcon}
|
|
117
|
+
</Card>
|
|
118
|
+
{textInput}
|
|
119
|
+
</>
|
|
120
|
+
<Else />
|
|
121
|
+
<>
|
|
122
|
+
{textInput}
|
|
123
|
+
<Card
|
|
124
|
+
className={`${addOnDarkModeCardCss} add-on-card card-right-aligned`}
|
|
125
|
+
dark={dark}
|
|
126
|
+
>
|
|
127
|
+
{addOnIcon}
|
|
128
|
+
</Card>
|
|
129
|
+
</>
|
|
125
130
|
</If>
|
|
126
131
|
</Flex>
|
|
127
132
|
</React.Fragment>
|
|
@@ -1,3 +1,5 @@
|
|
|
1
|
+
import { omit } from 'lodash'
|
|
2
|
+
|
|
1
3
|
type Sizes = "xs" | "sm" | "md" | "lg" | "xl"
|
|
2
4
|
type None = "none"
|
|
3
5
|
|
|
@@ -272,3 +274,24 @@ export const deprecatedProps = (kit: string, props: string[] = []): void => {
|
|
|
272
274
|
})
|
|
273
275
|
}
|
|
274
276
|
}
|
|
277
|
+
|
|
278
|
+
export const domSafeProps = (props: {[key: string]: string}): {[key: string]: string} => {
|
|
279
|
+
const notSafeProps = [
|
|
280
|
+
'marginRight',
|
|
281
|
+
'marginLeft',
|
|
282
|
+
'marginTop',
|
|
283
|
+
'marginBottom',
|
|
284
|
+
'marginX',
|
|
285
|
+
'marginY',
|
|
286
|
+
'margin',
|
|
287
|
+
'paddingRight',
|
|
288
|
+
'paddingLeft',
|
|
289
|
+
'paddingTop',
|
|
290
|
+
'paddingBottom',
|
|
291
|
+
'paddingX',
|
|
292
|
+
'paddingY',
|
|
293
|
+
'padding',
|
|
294
|
+
'dark',
|
|
295
|
+
]
|
|
296
|
+
return omit(props, notSafeProps)
|
|
297
|
+
}
|
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.25.0.pre.treeshaking1
|
|
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: 2022-
|
|
12
|
+
date: 2022-04-04 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionpack
|
|
@@ -333,6 +333,9 @@ files:
|
|
|
333
333
|
- app/pb_kits/playbook/pb_background/docs/_background_image.md
|
|
334
334
|
- app/pb_kits/playbook/pb_background/docs/_background_light.html.erb
|
|
335
335
|
- app/pb_kits/playbook/pb_background/docs/_background_light.jsx
|
|
336
|
+
- app/pb_kits/playbook/pb_background/docs/_background_size.html.erb
|
|
337
|
+
- app/pb_kits/playbook/pb_background/docs/_background_size.jsx
|
|
338
|
+
- app/pb_kits/playbook/pb_background/docs/_background_size.md
|
|
336
339
|
- app/pb_kits/playbook/pb_background/docs/_background_status.html.erb
|
|
337
340
|
- app/pb_kits/playbook/pb_background/docs/_background_status.jsx
|
|
338
341
|
- app/pb_kits/playbook/pb_background/docs/_background_status.md
|
|
@@ -2163,9 +2166,9 @@ required_ruby_version: !ruby/object:Gem::Requirement
|
|
|
2163
2166
|
version: '0'
|
|
2164
2167
|
required_rubygems_version: !ruby/object:Gem::Requirement
|
|
2165
2168
|
requirements:
|
|
2166
|
-
- - "
|
|
2169
|
+
- - ">"
|
|
2167
2170
|
- !ruby/object:Gem::Version
|
|
2168
|
-
version:
|
|
2171
|
+
version: 1.3.1
|
|
2169
2172
|
requirements: []
|
|
2170
2173
|
rubygems_version: 3.1.6
|
|
2171
2174
|
signing_key:
|