playbook_ui 10.23.0.pre.cachetest → 10.24.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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/index.js +0 -3
- data/app/pb_kits/playbook/pb_avatar/_avatar.scss +2 -2
- data/app/pb_kits/playbook/pb_avatar/{_avatar.jsx → _avatar.tsx} +13 -14
- data/app/pb_kits/playbook/pb_avatar/avatar.rb +1 -1
- data/app/pb_kits/playbook/pb_avatar/avatar.test.js +1 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.jsx +1 -1
- data/app/pb_kits/playbook/pb_background/_background.jsx +18 -4
- data/app/pb_kits/playbook/pb_background/_background.scss +23 -7
- data/app/pb_kits/playbook/pb_background/background.html.erb +5 -2
- data/app/pb_kits/playbook/pb_background/background.rb +33 -6
- data/app/pb_kits/playbook/pb_background/background.test.js +17 -0
- data/app/pb_kits/playbook/pb_background/docs/_background_image.html.erb +50 -2
- data/app/pb_kits/playbook/pb_background/docs/_background_image.jsx +71 -28
- data/app/pb_kits/playbook/pb_background/docs/_background_image.md +1 -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_bar_graph/_bar_graph.jsx +5 -1
- data/app/pb_kits/playbook/pb_bar_graph/bar_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.jsx +2 -2
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.jsx +1 -1
- data/app/pb_kits/playbook/pb_button/_button.jsx +8 -4
- data/app/pb_kits/playbook/pb_button/_button.scss +18 -1
- data/app/pb_kits/playbook/pb_button/button.rb +13 -3
- data/app/pb_kits/playbook/pb_button/button.test.js +13 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_accessibility.html.erb +1 -1
- data/app/pb_kits/playbook/pb_button/docs/_button_form.html.erb +1 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_form.jsx +14 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.html.erb +3 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.jsx +26 -0
- data/app/pb_kits/playbook/pb_button/docs/_button_size.md +1 -0
- data/app/pb_kits/playbook/pb_button/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_button/docs/index.js +2 -0
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.jsx +1 -1
- data/app/pb_kits/playbook/pb_caption/_caption.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/_card.jsx +1 -1
- data/app/pb_kits/playbook/pb_card/card.html.erb +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +88 -0
- data/app/pb_kits/playbook/pb_card/card_body.rb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.jsx +1 -1
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.jsx +3 -0
- data/app/pb_kits/playbook/pb_circle_chart/circle_chart.rb +1 -0
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.jsx +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.jsx +1 -1
- data/app/pb_kits/playbook/pb_collapsible/child_kits/CollapsibleContent.jsx +1 -1
- data/app/pb_kits/playbook/pb_currency/_currency.jsx +24 -3
- data/app/pb_kits/playbook/pb_currency/currency.rb +12 -3
- data/app/pb_kits/playbook/pb_currency/currency.test.js +35 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.html.erb +27 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_abbreviated.jsx +44 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_currency/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.js +215 -0
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.jsx +1 -1
- 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.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.scss +3 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_body.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.jsx +1 -1
- data/app/pb_kits/playbook/pb_dialog/docs/_dialog_should_close_on_overlay.md +2 -2
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.jsx +1 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.jsx +17 -10
- data/app/pb_kits/playbook/pb_file_upload/fileupload.test.js +40 -0
- data/app/pb_kits/playbook/pb_filter/Filter/FilterBackground.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/docs/_flex_align.jsx +1 -1
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -24
- data/app/pb_kits/playbook/pb_form_group/_form_group.jsx +1 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.scss +2 -0
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.jsx +2 -2
- data/app/pb_kits/playbook/pb_gauge/_gauge.jsx +3 -0
- data/app/pb_kits/playbook/pb_gauge/gauge.rb +1 -0
- data/app/pb_kits/playbook/pb_highlight/_highlight.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/_icon.jsx +1 -1
- data/app/pb_kits/playbook/pb_icon/icon.rb +1 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.jsx +1 -1
- data/app/pb_kits/playbook/pb_image/_image.scss +3 -3
- data/app/pb_kits/playbook/pb_image/{_image.jsx → _image.tsx} +11 -15
- data/app/pb_kits/playbook/pb_image/docs/{_default_image.jsx → _default_image.tsx} +1 -1
- data/app/pb_kits/playbook/pb_image/docs/index.js +4 -4
- data/app/pb_kits/playbook/pb_image/image.rb +1 -1
- data/app/pb_kits/playbook/pb_image/image.test.js +1 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.jsx +1 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.jsx +5 -1
- data/app/pb_kits/playbook/pb_line_graph/docs/_line_graph_height.jsx +1 -0
- data/app/pb_kits/playbook/pb_line_graph/line_graph.rb +1 -0
- data/app/pb_kits/playbook/pb_list/_list.jsx +1 -1
- data/app/pb_kits/playbook/pb_list/_list_item.jsx +1 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.jsx +1 -1
- data/app/pb_kits/playbook/pb_online_status/{_online_status.jsx → _online_status.tsx} +4 -6
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.jsx +2 -2
- data/app/pb_kits/playbook/pb_pill/_pill.jsx +1 -1
- data/app/pb_kits/playbook/pb_popover/_popover.jsx +3 -5
- data/app/pb_kits/playbook/pb_popover/docs/_popover_close.html.erb +7 -7
- data/app/pb_kits/playbook/pb_popover/index.js +4 -9
- data/app/pb_kits/playbook/pb_popover/popover.html.erb +1 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.jsx +1 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.jsx +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.jsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.jsx +83 -93
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.html.erb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/docs/_rich_text_editor_default.jsx +15 -8
- 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_table/_table.jsx +1 -1
- data/app/pb_kits/playbook/pb_table/_table_row.jsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.jsx +24 -19
- data/app/pb_kits/playbook/pb_text_input/_text_input.scss +1 -1
- data/app/pb_kits/playbook/pb_text_input/text_input.test.js +14 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.jsx +1 -0
- data/app/pb_kits/playbook/pb_time/_time.jsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.jsx +1 -1
- data/app/pb_kits/playbook/pb_toggle/_toggle.jsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.jsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.jsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.jsx +1 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.jsx +1 -1
- data/app/pb_kits/playbook/plugins/pb_chart.js +8 -4
- data/app/pb_kits/playbook/utilities/_align_content.scss +29 -0
- data/app/pb_kits/playbook/utilities/_align_items.scss +35 -0
- data/app/pb_kits/playbook/utilities/_align_self.scss +29 -0
- data/app/pb_kits/playbook/utilities/_flex.scss +15 -0
- data/app/pb_kits/playbook/utilities/_flex_direction.scss +19 -0
- data/app/pb_kits/playbook/utilities/_flex_grow.scss +9 -0
- data/app/pb_kits/playbook/utilities/_flex_shrink.scss +9 -0
- data/app/pb_kits/playbook/utilities/_flex_wrap.scss +14 -0
- data/app/pb_kits/playbook/utilities/_flexbox.scss +11 -0
- data/app/pb_kits/playbook/utilities/_justify_content.scss +23 -0
- data/app/pb_kits/playbook/utilities/_justify_self.scss +19 -0
- data/app/pb_kits/playbook/utilities/_order.scss +55 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +297 -0
- data/app/pb_kits/playbook/utilities/{props.js → props.ts} +9 -7
- data/lib/playbook/align_content.rb +29 -0
- data/lib/playbook/align_items.rb +29 -0
- data/lib/playbook/align_self.rb +29 -0
- data/lib/playbook/classnames.rb +11 -0
- data/lib/playbook/flex.rb +29 -0
- data/lib/playbook/flex_direction.rb +29 -0
- data/lib/playbook/flex_grow.rb +29 -0
- data/lib/playbook/flex_shrink.rb +29 -0
- data/lib/playbook/flex_wrap.rb +29 -0
- data/lib/playbook/justify_content.rb +29 -0
- data/lib/playbook/justify_self.rb +29 -0
- data/lib/playbook/kit_base.rb +22 -0
- data/lib/playbook/order.rb +29 -0
- data/lib/playbook/version.rb +2 -2
- metadata +47 -11
- data/app/pb_kits/playbook/types.js +0 -4
- data/app/pb_kits/playbook/utilities/globalProps.js +0 -97
@@ -3,8 +3,8 @@ import React from 'react'
|
|
3
3
|
import classnames from 'classnames'
|
4
4
|
import Title from '../pb_title/_title.jsx'
|
5
5
|
import Icon from '../pb_icon/_icon.jsx'
|
6
|
-
import Avatar from '../pb_avatar/_avatar
|
7
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import Avatar from '../pb_avatar/_avatar'
|
7
|
+
import { globalProps } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
type FormPillProps = {
|
10
10
|
className?: string,
|
@@ -12,6 +12,7 @@ type GaugeProps = {
|
|
12
12
|
aria: Object,
|
13
13
|
className?: string,
|
14
14
|
chartData?: array,
|
15
|
+
dark?: Boolean,
|
15
16
|
data?: Object,
|
16
17
|
disableAnimation: boolean,
|
17
18
|
fullCircle: boolean,
|
@@ -33,6 +34,7 @@ const Gauge = (props: GaugeProps) => {
|
|
33
34
|
aria = {},
|
34
35
|
className,
|
35
36
|
chartData = [{ name: 'Name', value: 0 }],
|
37
|
+
dark = false,
|
36
38
|
data = {},
|
37
39
|
disableAnimation = false,
|
38
40
|
fullCircle = false,
|
@@ -67,6 +69,7 @@ const Gauge = (props: GaugeProps) => {
|
|
67
69
|
id: id,
|
68
70
|
chartData: formattedChartData,
|
69
71
|
circumference: fullCircle ? [0, 360] : [-100, 100],
|
72
|
+
dark,
|
70
73
|
disableAnimation: disableAnimation,
|
71
74
|
height: height,
|
72
75
|
min: min,
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import Highlighter from 'react-highlight-words'
|
4
4
|
import React from 'react'
|
5
5
|
import classnames from 'classnames'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type HighlightProps = {
|
9
9
|
className?: string,
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type IconProps = {
|
9
9
|
aria?: object,
|
@@ -73,7 +73,7 @@ module Playbook
|
|
73
73
|
|
74
74
|
def render_svg(path)
|
75
75
|
if File.extname(path) == ".svg"
|
76
|
-
doc = Nokogiri::XML(open(path)) # rubocop:disable Security/Open
|
76
|
+
doc = Nokogiri::XML(URI.open(path)) # rubocop:disable Security/Open
|
77
77
|
svg = doc.at_css "svg"
|
78
78
|
svg["class"] = "pb_custom_icon " + object.custom_icon_classname
|
79
79
|
raw doc
|
@@ -4,7 +4,7 @@ import React 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 } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
import Body from '../pb_body/_body'
|
10
10
|
import Caption from '../pb_caption/_caption'
|
@@ -14,7 +14,7 @@ $image-sizes: (
|
|
14
14
|
object-fit: cover;
|
15
15
|
|
16
16
|
@each $name, $size in $image-sizes {
|
17
|
-
&[class*=
|
17
|
+
&[class*=size_#{$name}] {
|
18
18
|
width: $size;
|
19
19
|
height: $size;
|
20
20
|
object-fit: cover;
|
@@ -35,7 +35,7 @@ $image-sizes: (
|
|
35
35
|
transition: opacity 300ms ease-in;
|
36
36
|
}
|
37
37
|
}
|
38
|
-
|
38
|
+
|
39
39
|
&.blur {
|
40
40
|
filter: blur(5px);
|
41
41
|
&.lazyloaded {
|
@@ -44,7 +44,7 @@ $image-sizes: (
|
|
44
44
|
transition: filter 300ms ease-in;
|
45
45
|
}
|
46
46
|
}
|
47
|
-
|
47
|
+
|
48
48
|
&.scale {
|
49
49
|
opacity: 0;
|
50
50
|
transform: scale(0.9);
|
@@ -1,24 +1,22 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
|
-
import { globalProps } from '../utilities/globalProps
|
3
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
6
4
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
5
|
|
8
|
-
type
|
6
|
+
type ImageType = {
|
9
7
|
alt?: string,
|
10
|
-
aria?:
|
8
|
+
aria?: {[key: string]: string},
|
11
9
|
className?: string,
|
12
|
-
data?:
|
10
|
+
data?: {[key: string]: string},
|
13
11
|
id?: string,
|
14
|
-
onError?: () =>
|
15
|
-
size
|
12
|
+
onError?: () => void,
|
13
|
+
size?: "xs" | "sm" | "md" | "lg" | "xl",
|
16
14
|
rounded?: boolean,
|
17
|
-
transition
|
18
|
-
url
|
19
|
-
}
|
15
|
+
transition?: "blur" | "fade" | "scale",
|
16
|
+
url?: string,
|
17
|
+
} & GlobalProps
|
20
18
|
|
21
|
-
const Image = (props:
|
19
|
+
const Image = (props: ImageType) => {
|
22
20
|
const {
|
23
21
|
alt = '',
|
24
22
|
aria = {},
|
@@ -34,7 +32,7 @@ const Image = (props: ImageProps) => {
|
|
34
32
|
|
35
33
|
const ariaProps = buildAriaProps(aria)
|
36
34
|
const classes = classnames(
|
37
|
-
buildCss('pb_image_kit', size),
|
35
|
+
buildCss('pb_image_kit', size ? `size_${size}` : null),
|
38
36
|
'lazyload',
|
39
37
|
transition,
|
40
38
|
{ rounded },
|
@@ -52,9 +50,7 @@ const Image = (props: ImageProps) => {
|
|
52
50
|
data-src={url}
|
53
51
|
id={id}
|
54
52
|
onError={onError}
|
55
|
-
rounded={+rounded}
|
56
53
|
src={url}
|
57
|
-
transition={transition}
|
58
54
|
/>
|
59
55
|
)
|
60
56
|
}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
export { default as DefaultImage } from './_default_image
|
2
|
-
export { default as RoundedImage } from './_rounded_image
|
3
|
-
export { default as CustomErrorImage } from './_custom_error_image
|
4
|
-
export { default as TransitionImage } from './_transition_image
|
1
|
+
export { default as DefaultImage } from './_default_image'
|
2
|
+
export { default as RoundedImage } from './_rounded_image'
|
3
|
+
export { default as CustomErrorImage } from './_custom_error_image'
|
4
|
+
export { default as TransitionImage } from './_transition_image'
|
@@ -26,7 +26,7 @@ test('default classname', () => {
|
|
26
26
|
|
27
27
|
test('size = xs', () => {
|
28
28
|
const kit = renderKit(Image, props, { size: 'xs' })
|
29
|
-
expect(kit).toHaveClass('
|
29
|
+
expect(kit).toHaveClass('pb_image_kit_size_xs lazyload')
|
30
30
|
})
|
31
31
|
|
32
32
|
test('transition = blur', () => {
|
@@ -4,7 +4,7 @@ import React from 'react'
|
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
6
|
|
7
|
-
import { globalProps } from '../utilities/globalProps
|
7
|
+
import { globalProps } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
type LayoutPropTypes = {
|
10
10
|
aria?: object,
|
@@ -3,11 +3,12 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
import pbChart from '../plugins/pb_chart'
|
8
8
|
|
9
9
|
type LineGraphProps = {
|
10
10
|
axisTitle?: string,
|
11
|
+
dark?: Boolean,
|
11
12
|
xAxisCategories: array,
|
12
13
|
yAxisMin: number,
|
13
14
|
yAxisMax: number,
|
@@ -31,6 +32,7 @@ type LineGraphProps = {
|
|
31
32
|
export default class LineGraph extends React.Component<LineGraphProps> {
|
32
33
|
static defaultProps = {
|
33
34
|
className: 'pb_bar_graph',
|
35
|
+
dark: false,
|
34
36
|
gradient: false,
|
35
37
|
type: 'line',
|
36
38
|
legend: false,
|
@@ -40,6 +42,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
|
|
40
42
|
componentDidMount() {
|
41
43
|
const {
|
42
44
|
axisTitle,
|
45
|
+
dark,
|
43
46
|
xAxisCategories,
|
44
47
|
yAxisMin,
|
45
48
|
yAxisMax,
|
@@ -60,6 +63,7 @@ export default class LineGraph extends React.Component<LineGraphProps> {
|
|
60
63
|
axisTitle: axisTitle,
|
61
64
|
chartData: chartData,
|
62
65
|
colors: colors,
|
66
|
+
dark,
|
63
67
|
id: id,
|
64
68
|
pointStart: pointStart,
|
65
69
|
subtitle: subTitle,
|
@@ -11,6 +11,7 @@ const LineGraphDefault = (props) => (
|
|
11
11
|
<LineGraph
|
12
12
|
axisTitle="Number of Employees"
|
13
13
|
chartData={data}
|
14
|
+
height="300px"
|
14
15
|
id="line-fixed-height"
|
15
16
|
title="Fixed Height (300px)"
|
16
17
|
xAxisCategories={['Jan', 'Feb', 'Mar', 'Apr', 'May', 'Jun', 'Jul', 'Aug', 'Sep', 'Oct', 'Nov', 'Dec']}
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React, { type Node } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type ListProps = {
|
9
9
|
aria?: object,
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React, { type Node } from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type ListItemProps = {
|
9
9
|
aria?: object,
|
@@ -4,7 +4,7 @@ import React 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 } from '../utilities/globalProps'
|
8
8
|
|
9
9
|
import Avatar from '../pb_avatar/_avatar'
|
10
10
|
|
@@ -1,18 +1,16 @@
|
|
1
|
-
/* @flow */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
|
-
import { globalProps } from '../utilities/globalProps
|
3
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
6
4
|
|
7
5
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
6
|
|
9
7
|
type OnlineStatusProps = {
|
10
|
-
aria?:
|
8
|
+
aria?: {[key: string]: string},
|
11
9
|
className?: string,
|
12
|
-
data?:
|
10
|
+
data?: {[key: string]: string | number},
|
13
11
|
id?: string,
|
14
12
|
status?: "online" | "offline" | "away",
|
15
|
-
}
|
13
|
+
} & GlobalProps
|
16
14
|
|
17
15
|
const OnlineStatus = (props: OnlineStatusProps) => {
|
18
16
|
const {
|
@@ -1,10 +1,11 @@
|
|
1
1
|
/* @flow */
|
2
|
+
/* eslint-disable react-hooks/rules-of-hooks */
|
2
3
|
|
3
4
|
import React, { useCallback, useEffect, useMemo, useState } from 'react'
|
4
5
|
import classnames from 'classnames'
|
5
6
|
|
6
7
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
7
|
-
import { globalProps } from '../utilities/globalProps
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
8
9
|
|
9
10
|
import useZxcvbn from './useZxcvbn'
|
10
11
|
import useHaveIBeenPwned from './useHaveIBeenPwned'
|
@@ -183,7 +184,6 @@ const Passphrase = (props: PassphraseProps) => {
|
|
183
184
|
/>
|
184
185
|
<span
|
185
186
|
className="show-passphrase-icon"
|
186
|
-
dark={dark}
|
187
187
|
onClick={toggleShowPassphrase}
|
188
188
|
>
|
189
189
|
<Body
|
@@ -5,7 +5,7 @@ import React from 'react'
|
|
5
5
|
import classnames from 'classnames'
|
6
6
|
import Title from '../pb_title/_title.jsx'
|
7
7
|
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
8
|
-
import { globalProps } from '../utilities/globalProps
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
9
9
|
|
10
10
|
type PillProps = {
|
11
11
|
aria?: object,
|
@@ -13,7 +13,7 @@ import {
|
|
13
13
|
import { buildAriaProps, buildCss, buildDataProps, noop } from '../utilities/props'
|
14
14
|
|
15
15
|
import classnames from 'classnames'
|
16
|
-
import { globalProps } from '../utilities/globalProps
|
16
|
+
import { globalProps } from '../utilities/globalProps'
|
17
17
|
|
18
18
|
type PbPopoverProps = {
|
19
19
|
aria?: object,
|
@@ -150,16 +150,14 @@ export default class PbReactPopover extends React.Component<PbPopoverProps> {
|
|
150
150
|
const targetIsReference =
|
151
151
|
target.closest('.pb_popover_reference_wrapper') !== null
|
152
152
|
|
153
|
-
if (targetIsReference) return
|
154
|
-
|
155
153
|
switch (closeOnClick) {
|
156
154
|
case 'outside':
|
157
|
-
if (!targetIsPopover) {
|
155
|
+
if (!targetIsPopover || targetIsReference) {
|
158
156
|
shouldClosePopover(true)
|
159
157
|
}
|
160
158
|
break
|
161
159
|
case 'inside':
|
162
|
-
if (targetIsPopover) {
|
160
|
+
if (targetIsPopover || targetIsReference) {
|
163
161
|
shouldClosePopover(true)
|
164
162
|
}
|
165
163
|
break
|
@@ -1,23 +1,23 @@
|
|
1
1
|
<%= pb_rails("flex", props: {classname: "flex-container", spacing: "between"}) do %>
|
2
2
|
<span>
|
3
|
-
<%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id:
|
3
|
+
<%= pb_rails("button", props: { text: "Click Inside", variant: "secondary", id: "inside-popover-1" }) %>
|
4
4
|
<%= pb_rails("popover", props: {
|
5
5
|
close_on_click: "inside",
|
6
6
|
trigger_element_id: "inside-popover-1",
|
7
7
|
tooltip_id: "inside-tooltip-1",
|
8
|
-
position:
|
8
|
+
position: "bottom",
|
9
9
|
offset: true
|
10
10
|
}) do %>
|
11
11
|
Click on me!
|
12
12
|
<% end %>
|
13
13
|
</span>
|
14
14
|
<span>
|
15
|
-
<%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id:
|
15
|
+
<%= pb_rails("button", props: { text: "Click Outside", variant: "secondary", id: "outside-popover-1" }) %>
|
16
16
|
<%= pb_rails("popover", props: {
|
17
17
|
close_on_click: "outside",
|
18
18
|
trigger_element_id: "outside-popover-1",
|
19
19
|
tooltip_id: "outside-tooltip-1",
|
20
|
-
position:
|
20
|
+
position: "left",
|
21
21
|
offset: true
|
22
22
|
}) do %>
|
23
23
|
Click anywhere but me!
|
@@ -27,16 +27,16 @@
|
|
27
27
|
<%= pb_rails("button", props: {
|
28
28
|
text: "Click Anywhere",
|
29
29
|
variant: "secondary",
|
30
|
-
id:
|
30
|
+
id: "any-popover-1"
|
31
31
|
}) %>
|
32
32
|
<%= pb_rails("popover", props: {
|
33
33
|
close_on_click: "any",
|
34
34
|
trigger_element_id: "any-popover-1",
|
35
35
|
tooltip_id: "any-tooltip-1",
|
36
|
-
position:
|
36
|
+
position: "top",
|
37
37
|
offset: true
|
38
38
|
}) do %>
|
39
39
|
Click anything!
|
40
40
|
<% end %>
|
41
41
|
</span>
|
42
|
-
<% end %>
|
42
|
+
<% end %>
|
@@ -36,15 +36,14 @@ export default class PbPopover extends PbEnhancedElement {
|
|
36
36
|
}
|
37
37
|
|
38
38
|
setTimeout(() => {
|
39
|
-
this.popper.update()
|
40
39
|
this.toggleTooltip()
|
40
|
+
this.popper.update()
|
41
41
|
}, 0)
|
42
42
|
})
|
43
43
|
}
|
44
44
|
|
45
45
|
checkCloseTooltip() {
|
46
46
|
document.querySelector('body').addEventListener('click', ({ target }) => {
|
47
|
-
const isTriggerElement = target.closest(`#${this.triggerElementId}`) !== null
|
48
47
|
const isTooltipElement = target.closest(`#${this.tooltipId}`) !== null
|
49
48
|
|
50
49
|
switch (this.closeOnClick) {
|
@@ -52,21 +51,17 @@ export default class PbPopover extends PbEnhancedElement {
|
|
52
51
|
this.hideTooltip()
|
53
52
|
break
|
54
53
|
case 'outside':
|
55
|
-
if (isTooltipElement) {
|
56
|
-
this.checkCloseTooltip()
|
57
|
-
} else {
|
54
|
+
if (!isTooltipElement) {
|
58
55
|
this.hideTooltip()
|
59
56
|
}
|
60
57
|
break
|
61
58
|
case 'inside':
|
62
|
-
if (isTooltipElement
|
59
|
+
if (isTooltipElement) {
|
63
60
|
this.hideTooltip()
|
64
|
-
} else {
|
65
|
-
this.checkCloseTooltip()
|
66
61
|
}
|
67
62
|
break
|
68
63
|
}
|
69
|
-
},
|
64
|
+
}, true)
|
70
65
|
}
|
71
66
|
|
72
67
|
hideTooltip() {
|
@@ -3,7 +3,7 @@
|
|
3
3
|
class: object.classname,
|
4
4
|
data: object.data,
|
5
5
|
id: object.id) do %>
|
6
|
-
<div class="pb_popover_tooltip" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
|
6
|
+
<div class="pb_popover_tooltip hide" id="<%= object.tooltip_id %>" role="tooltip" style="<%= object.z_index_helper %>">
|
7
7
|
<div class="pb_popover_body <%= object.width_height_class_helper %> <%= object.popover_spacing_helper %>" style="<%= object.width_height_helper %>">
|
8
8
|
<%= content.presence %>
|
9
9
|
</div>
|
@@ -2,7 +2,7 @@
|
|
2
2
|
import React from 'react'
|
3
3
|
import classnames from 'classnames'
|
4
4
|
import { buildCss } from '../utilities/props'
|
5
|
-
import { globalProps } from '../utilities/globalProps
|
5
|
+
import { globalProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
type ProgressSimpleProps = {
|
8
8
|
align?: "left" | "center" | "right",
|
@@ -3,7 +3,7 @@
|
|
3
3
|
import React from 'react'
|
4
4
|
import classnames from 'classnames'
|
5
5
|
import { buildCss } from '../utilities/props'
|
6
|
-
import { globalProps } from '../utilities/globalProps
|
6
|
+
import { globalProps } from '../utilities/globalProps'
|
7
7
|
|
8
8
|
type ProgressStepProps = {
|
9
9
|
className?: string,
|
@@ -5,7 +5,7 @@ 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'
|
8
|
-
import { globalProps } from '../utilities/globalProps
|
8
|
+
import { globalProps } from '../utilities/globalProps'
|
9
9
|
|
10
10
|
type RadioProps = {
|
11
11
|
aria?: object,
|