playbook_ui 13.12.0.pre.alpha.play1051testhighcharts1581 → 13.12.0.pre.alpha.play10281596
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_avatar/_avatar.tsx +5 -1
- data/app/pb_kits/playbook/pb_avatar_action_button/_avatar_action_button.tsx +6 -2
- data/app/pb_kits/playbook/pb_background/_background.tsx +9 -5
- data/app/pb_kits/playbook/pb_badge/_badge.tsx +5 -1
- data/app/pb_kits/playbook/pb_bar_graph/_bar_graph.tsx +39 -39
- data/app/pb_kits/playbook/pb_body/_body.tsx +5 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumb_item.tsx +5 -1
- data/app/pb_kits/playbook/pb_bread_crumbs/_bread_crumbs.tsx +5 -2
- data/app/pb_kits/playbook/pb_button/_button.tsx +8 -1
- data/app/pb_kits/playbook/pb_button_toolbar/_button_toolbar.tsx +5 -1
- data/app/pb_kits/playbook/pb_caption/_caption.tsx +6 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +5 -1
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +7 -2
- data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +71 -71
- data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +5 -3
- data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +5 -1
- data/app/pb_kits/playbook/pb_contact/_contact.tsx +5 -1
- data/app/pb_kits/playbook/pb_currency/_currency.tsx +5 -1
- data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +208 -210
- data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +207 -209
- data/app/pb_kits/playbook/pb_dashboard_value/_dashboard_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_date/_date.tsx +12 -7
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_range_inline/_date_range_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_range_stacked/_date_range_stacked.tsx +15 -4
- data/app/pb_kits/playbook/pb_date_stacked/_date_stacked.tsx +12 -5
- data/app/pb_kits/playbook/pb_date_time/_date_time.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +5 -1
- data/app/pb_kits/playbook/pb_date_year_stacked/_date_year_stacked.tsx +15 -4
- data/app/pb_kits/playbook/pb_detail/_detail.tsx +5 -1
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +11 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_footer.tsx +8 -3
- data/app/pb_kits/playbook/pb_dialog/child_kits/_dialog_header.tsx +5 -1
- data/app/pb_kits/playbook/pb_distribution_bar/_distribution_bar.tsx +8 -1
- data/app/pb_kits/playbook/pb_file_upload/_file_upload.tsx +6 -2
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +6 -1
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +6 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +6 -1
- data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +5 -1
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +7 -1
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +54 -62
- data/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +5 -1
- data/app/pb_kits/playbook/pb_highlight/_highlight.tsx +5 -0
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +10 -3
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +7 -1
- data/app/pb_kits/playbook/pb_icon_circle/_icon_circle.tsx +5 -1
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +5 -1
- data/app/pb_kits/playbook/pb_image/_image.tsx +6 -1
- data/app/pb_kits/playbook/pb_label_pill/_label_pill.tsx +5 -1
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +6 -2
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +6 -1
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +5 -1
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +6 -1
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -1
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +44 -44
- data/app/pb_kits/playbook/pb_list/_list.tsx +7 -2
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +5 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_map/_map.tsx +6 -1
- data/app/pb_kits/playbook/pb_message/_message.tsx +5 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +5 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users/_multiple_users.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_props_swift.md +7 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_reverse_swift.md +13 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/_multiple_users_size_swift.md +11 -0
- data/app/pb_kits/playbook/pb_multiple_users/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +5 -1
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_default_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_props_swift.md +5 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_small_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/_multiple_users_stacked_xsmall_swift.md +15 -0
- data/app/pb_kits/playbook/pb_multiple_users_stacked/docs/example.yml +6 -0
- data/app/pb_kits/playbook/pb_nav/_item.tsx +7 -2
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +5 -1
- data/app/pb_kits/playbook/pb_online_status/_online_status.tsx +5 -1
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +6 -2
- data/app/pb_kits/playbook/pb_person/_person.tsx +5 -0
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +5 -1
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +8 -2
- data/app/pb_kits/playbook/pb_pill/_pill.tsx +5 -1
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +6 -1
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +5 -1
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +9 -3
- data/app/pb_kits/playbook/pb_progress_step/_progress_step.tsx +5 -1
- data/app/pb_kits/playbook/pb_progress_step/_progress_step_item.tsx +6 -2
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +5 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +7 -1
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +5 -1
- data/app/pb_kits/playbook/pb_select/_select.tsx +6 -1
- data/app/pb_kits/playbook/pb_selectable_card/_selectable_card.tsx +6 -2
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +5 -0
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +5 -0
- data/app/pb_kits/playbook/pb_selectable_list/_item.tsx +11 -3
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +5 -1
- data/app/pb_kits/playbook/pb_source/_source.tsx +5 -1
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.tsx +5 -1
- data/app/pb_kits/playbook/pb_stat_change/_stat_change.tsx +14 -2
- data/app/pb_kits/playbook/pb_stat_value/_stat_value.tsx +6 -0
- data/app/pb_kits/playbook/pb_table/_table.tsx +5 -1
- data/app/pb_kits/playbook/pb_table/_table_row.tsx +5 -1
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +5 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_add_on_swift.md +35 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default_swift.md +29 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_disabled_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error_swift.md +24 -0
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_props_swift.md +13 -0
- data/app/pb_kits/playbook/pb_text_input/docs/example.yml +7 -0
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +5 -2
- data/app/pb_kits/playbook/pb_time/_time.tsx +9 -2
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +5 -1
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +6 -2
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +9 -2
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +5 -1
- data/app/pb_kits/playbook/pb_timestamp/_timestamp.tsx +5 -1
- data/app/pb_kits/playbook/pb_title/_title.tsx +5 -1
- data/app/pb_kits/playbook/pb_title_count/_title_count.tsx +5 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +16 -3
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +5 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_default_swift.md +11 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_name_swift.md +10 -0
- data/app/pb_kits/playbook/pb_toggle/docs/_toggle_props_swift.md +6 -0
- data/app/pb_kits/playbook/pb_toggle/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +5 -1
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +38 -38
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +7 -2
- data/app/pb_kits/playbook/pb_user/_user.tsx +5 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +5 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +5 -1
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +5 -1
- data/app/pb_kits/playbook/utilities/props.ts +16 -0
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/version.rb +1 -1
- metadata +18 -2
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from "react";
|
2
2
|
|
3
3
|
import classnames from "classnames";
|
4
|
-
import { buildCss, buildDataProps } from "../utilities/props";
|
4
|
+
import { buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
5
5
|
import { globalProps } from "../utilities/globalProps";
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
@@ -15,6 +15,7 @@ type DateStackedProps = {
|
|
15
15
|
dark?: boolean;
|
16
16
|
data?: string;
|
17
17
|
date: Date;
|
18
|
+
htmlOptions?: { [key: string]: string | number | boolean | Function };
|
18
19
|
size?: "sm" | "md";
|
19
20
|
id?: string;
|
20
21
|
reverse?: boolean;
|
@@ -34,6 +35,7 @@ const DateStacked = (props: DateStackedProps) => {
|
|
34
35
|
dark = false,
|
35
36
|
date,
|
36
37
|
data={},
|
38
|
+
htmlOptions={},
|
37
39
|
size = "sm",
|
38
40
|
} = props;
|
39
41
|
const classes = classnames(
|
@@ -48,12 +50,15 @@ const DateStacked = (props: DateStackedProps) => {
|
|
48
50
|
const currentYear = new Date().getFullYear()
|
49
51
|
const inputYear = DateTime.toYear(date);
|
50
52
|
const dataProps = buildDataProps(data)
|
53
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
51
54
|
|
52
55
|
return (
|
53
56
|
<>
|
54
57
|
{bold == false ? (
|
55
|
-
<div
|
56
|
-
|
58
|
+
<div
|
59
|
+
{...dataProps}
|
60
|
+
{...htmlProps}
|
61
|
+
className={classes}
|
57
62
|
>
|
58
63
|
<div className="pb_date_stacked_day_month">
|
59
64
|
<Caption text={DateTime.toMonth(date).toUpperCase()} />
|
@@ -66,8 +71,10 @@ const DateStacked = (props: DateStackedProps) => {
|
|
66
71
|
{currentYear != inputYear && <Caption size="xs">{inputYear}</Caption>}
|
67
72
|
</div>
|
68
73
|
) : (
|
69
|
-
<div
|
70
|
-
|
74
|
+
<div
|
75
|
+
{...dataProps}
|
76
|
+
{...htmlProps}
|
77
|
+
className={classes}
|
71
78
|
>
|
72
79
|
<div className="pb_date_stacked_day_month">
|
73
80
|
<Title
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
4
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { globalProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
import Flex from '../pb_flex/_flex'
|
@@ -14,6 +14,7 @@ type DateTimeProps = {
|
|
14
14
|
className?: string,
|
15
15
|
data?: { [key: string]: string; },
|
16
16
|
datetime: Date,
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
17
18
|
id?: string,
|
18
19
|
size?: "sm" | "md",
|
19
20
|
showDayOfWeek: boolean,
|
@@ -27,6 +28,7 @@ const DateTime = (props: DateTimeProps) => {
|
|
27
28
|
aria = {},
|
28
29
|
className,
|
29
30
|
data = {},
|
31
|
+
htmlOptions = {},
|
30
32
|
showDayOfWeek = false,
|
31
33
|
datetime,
|
32
34
|
id,
|
@@ -37,6 +39,7 @@ const DateTime = (props: DateTimeProps) => {
|
|
37
39
|
|
38
40
|
const ariaProps = buildAriaProps(aria)
|
39
41
|
const dataProps = buildDataProps(data)
|
42
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
40
43
|
const classes = classnames(
|
41
44
|
buildCss('pb_date_time', size),
|
42
45
|
globalProps(props),
|
@@ -47,6 +50,7 @@ const DateTime = (props: DateTimeProps) => {
|
|
47
50
|
<div
|
48
51
|
{...ariaProps}
|
49
52
|
{...dataProps}
|
53
|
+
{...htmlProps}
|
50
54
|
className={classes}
|
51
55
|
id={id}
|
52
56
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
|
2
2
|
import React from 'react'
|
3
3
|
|
4
|
-
import { buildCss } from '../utilities/props'
|
4
|
+
import { buildCss, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { deprecatedProps, globalProps } from '../utilities/globalProps'
|
6
6
|
|
7
7
|
import Flex from '../pb_flex/_flex'
|
@@ -11,6 +11,7 @@ import TimeStacked from '../pb_time_stacked/_time_stacked'
|
|
11
11
|
import DateStacked from '../pb_date_stacked/_date_stacked'
|
12
12
|
|
13
13
|
type DateTimeStackedProps = {
|
14
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
14
15
|
id?: string,
|
15
16
|
date: Date,
|
16
17
|
datetime: Date,
|
@@ -25,15 +26,18 @@ const DateTimeStacked = (props: DateTimeStackedProps): React.ReactElement => {
|
|
25
26
|
date,
|
26
27
|
datetime,
|
27
28
|
dark,
|
29
|
+
htmlOptions = {},
|
28
30
|
timeZone = 'America/New_York',
|
29
31
|
} = props
|
30
32
|
|
31
33
|
const classes = buildCss('pb_date_time_stacked_kit', globalProps(props))
|
34
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
32
35
|
|
33
36
|
return (
|
34
37
|
<Flex
|
35
38
|
inline={false}
|
36
39
|
vertical="stretch"
|
40
|
+
{...htmlProps}
|
37
41
|
{...props}
|
38
42
|
>
|
39
43
|
<FlexItem>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildCss, buildDataProps } from '../utilities/props'
|
4
|
+
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
5
5
|
import { globalProps } from '../utilities/globalProps'
|
6
6
|
import DateTime from '../pb_kit/dateTime';
|
7
7
|
|
@@ -14,20 +14,31 @@ type DateYearStackedProps = {
|
|
14
14
|
dark?: boolean,
|
15
15
|
data?: string,
|
16
16
|
date: Date,
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
17
18
|
id?: string,
|
18
19
|
}
|
19
20
|
|
20
21
|
const DateYearStacked = (props: DateYearStackedProps) => {
|
21
|
-
const {
|
22
|
+
const {
|
23
|
+
align = 'left',
|
24
|
+
className,
|
25
|
+
dark = false,
|
26
|
+
date,
|
27
|
+
data={},
|
28
|
+
htmlOptions = {},
|
29
|
+
} = props
|
22
30
|
const css = classnames(
|
23
31
|
buildCss('pb_date_year_stacked', align),
|
24
32
|
globalProps(props),
|
25
33
|
className
|
26
34
|
)
|
27
|
-
|
35
|
+
const dataProps = buildDataProps(data)
|
36
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
28
37
|
|
29
38
|
return (
|
30
|
-
<div
|
39
|
+
<div
|
40
|
+
{...dataProps}
|
41
|
+
{...htmlProps}
|
31
42
|
className={css}
|
32
43
|
>
|
33
44
|
<Title
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
5
|
|
6
6
|
type DetailProps = {
|
@@ -11,6 +11,7 @@ type DetailProps = {
|
|
11
11
|
color?: 'light' | 'default' | 'lighter' | 'link' | 'error' | 'success',
|
12
12
|
dark?: boolean,
|
13
13
|
data?: { [key: string]: string },
|
14
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
14
15
|
id?: string,
|
15
16
|
tag?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'span' | 'div',
|
16
17
|
text?: string,
|
@@ -24,6 +25,7 @@ const Detail = (props: DetailProps) => {
|
|
24
25
|
className,
|
25
26
|
color = 'light',
|
26
27
|
data = {},
|
28
|
+
htmlOptions = {},
|
27
29
|
id = '',
|
28
30
|
tag = 'div',
|
29
31
|
text= ''
|
@@ -31,6 +33,7 @@ const Detail = (props: DetailProps) => {
|
|
31
33
|
|
32
34
|
const ariaProps: {[key: string]: any} = buildAriaProps(aria)
|
33
35
|
const dataProps: {[key: string]: any} = buildDataProps(data)
|
36
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
34
37
|
const isBold = bold ? "bold" : null
|
35
38
|
const classes = classnames(
|
36
39
|
buildCss('pb_detail_kit', color),
|
@@ -44,6 +47,7 @@ const Detail = (props: DetailProps) => {
|
|
44
47
|
<Tag
|
45
48
|
{...ariaProps}
|
46
49
|
{...dataProps}
|
50
|
+
{...htmlProps}
|
47
51
|
className={classes}
|
48
52
|
id={id}
|
49
53
|
>
|
@@ -5,7 +5,7 @@ import React, { useState } from "react";
|
|
5
5
|
import classnames from "classnames";
|
6
6
|
import Modal from "react-modal";
|
7
7
|
|
8
|
-
import { buildAriaProps, buildCss, buildDataProps } from "../utilities/props";
|
8
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
9
9
|
import { globalProps } from "../utilities/globalProps";
|
10
10
|
|
11
11
|
import Body from "../pb_body/_body";
|
@@ -26,6 +26,7 @@ type DialogProps = {
|
|
26
26
|
closeable: boolean;
|
27
27
|
confirmButton?: string;
|
28
28
|
data?: object;
|
29
|
+
htmlOptions?: { [key: string]: string | number | boolean | Function };
|
29
30
|
id?: string;
|
30
31
|
fullHeight?: boolean;
|
31
32
|
loading?: boolean;
|
@@ -51,6 +52,7 @@ const Dialog = (props: DialogProps) => {
|
|
51
52
|
confirmButton,
|
52
53
|
className,
|
53
54
|
data = {},
|
55
|
+
htmlOptions = {},
|
54
56
|
id,
|
55
57
|
size = "md",
|
56
58
|
children,
|
@@ -69,7 +71,8 @@ const Dialog = (props: DialogProps) => {
|
|
69
71
|
trigger,
|
70
72
|
} = props;
|
71
73
|
const ariaProps = buildAriaProps(aria);
|
72
|
-
|
74
|
+
const dataProps = buildDataProps(data)
|
75
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
73
76
|
const dialogClassNames = {
|
74
77
|
base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
|
75
78
|
afterOpen: "pb_dialog_after_open",
|
@@ -164,7 +167,12 @@ const Dialog = (props: DialogProps) => {
|
|
164
167
|
|
165
168
|
return (
|
166
169
|
<DialogContext.Provider value={api}>
|
167
|
-
<div
|
170
|
+
<div
|
171
|
+
{...ariaProps}
|
172
|
+
{...dataProps}
|
173
|
+
{...htmlProps}
|
174
|
+
className={classes}
|
175
|
+
>
|
168
176
|
<Modal
|
169
177
|
ariaHideApp={false}
|
170
178
|
className={dialogClassNames}
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
|
4
|
-
import { buildCss } from '../../utilities/props'
|
4
|
+
import { buildCss, buildHtmlProps } from '../../utilities/props'
|
5
5
|
import { GlobalProps, globalProps } from '../../utilities/globalProps'
|
6
6
|
|
7
7
|
import Flex from '../../pb_flex/_flex'
|
@@ -13,6 +13,7 @@ type DialogFooterProps = {
|
|
13
13
|
children: React.ReactChild[] | React.ReactChild | string,
|
14
14
|
className?: string,
|
15
15
|
data?: {[key: string]: string},
|
16
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
16
17
|
id?: string,
|
17
18
|
padding?: string,
|
18
19
|
paddingBottom?: string,
|
@@ -26,15 +27,19 @@ const DialogFooter = (props: DialogFooterProps) => {
|
|
26
27
|
const {
|
27
28
|
children,
|
28
29
|
className,
|
30
|
+
htmlOptions = {},
|
29
31
|
spacing = "between",
|
30
32
|
separator = false,
|
31
33
|
} = props
|
32
34
|
|
33
35
|
const footerCSS = buildCss("dialog_footer")
|
34
36
|
const footerSpacing = globalProps(props)
|
37
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
35
38
|
|
36
39
|
return (
|
37
|
-
|
40
|
+
<div
|
41
|
+
{...htmlProps}
|
42
|
+
>
|
38
43
|
{separator &&
|
39
44
|
<SectionSeparator />
|
40
45
|
}
|
@@ -46,7 +51,7 @@ const DialogFooter = (props: DialogFooterProps) => {
|
|
46
51
|
>
|
47
52
|
{children}
|
48
53
|
</Flex>
|
49
|
-
|
54
|
+
</div>
|
50
55
|
)
|
51
56
|
}
|
52
57
|
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React, { useContext } from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../../utilities/props'
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../../utilities/props'
|
4
4
|
import { globalProps, GlobalProps } from '../../utilities/globalProps'
|
5
5
|
|
6
6
|
import { CloseIcon } from '../_close_icon'
|
@@ -14,6 +14,7 @@ type DialogHeaderProps = {
|
|
14
14
|
className?: string,
|
15
15
|
closeable?: boolean,
|
16
16
|
data?: object,
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
17
18
|
id?: string,
|
18
19
|
padding?: string,
|
19
20
|
separator?: boolean,
|
@@ -28,6 +29,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
28
29
|
children,
|
29
30
|
className,
|
30
31
|
data = {},
|
32
|
+
htmlOptions = {},
|
31
33
|
spacing = "between",
|
32
34
|
closeable = true,
|
33
35
|
separator = true,
|
@@ -35,6 +37,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
35
37
|
|
36
38
|
const ariaProps = buildAriaProps(aria)
|
37
39
|
const dataProps = buildDataProps(data)
|
40
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
38
41
|
const api = useContext(DialogContext)
|
39
42
|
const headerCSS = buildCss("dialog_header")
|
40
43
|
const headerSpacing = globalProps(props)
|
@@ -46,6 +49,7 @@ const DialogHeader = (props: DialogHeaderProps) => {
|
|
46
49
|
<Flex
|
47
50
|
{...ariaProps}
|
48
51
|
{...dataProps}
|
52
|
+
{...htmlProps}
|
49
53
|
className={classnames(headerCSS, headerSpacing, className)}
|
50
54
|
spacing={spacing}
|
51
55
|
>
|
@@ -1,11 +1,13 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { globalProps } from '../utilities/globalProps'
|
4
|
+
import { buildHtmlProps } from '../utilities/props'
|
4
5
|
|
5
6
|
type DistributionBarProps = {
|
6
7
|
className?: string,
|
7
8
|
colors: [],
|
8
9
|
data?: string,
|
10
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
9
11
|
id?: string,
|
10
12
|
size?: "lg" | "sm",
|
11
13
|
widths?: number[],
|
@@ -33,14 +35,19 @@ const barValues = (normalizedValues: number[], colors: []) => {
|
|
33
35
|
|
34
36
|
const DistributionBar = (props: DistributionBarProps) => {
|
35
37
|
const {
|
38
|
+
htmlOptions = {},
|
36
39
|
size = 'lg',
|
37
40
|
widths = [1],
|
38
41
|
colors = [],
|
39
42
|
} = props
|
40
43
|
const normalizedValues = normalizeCharacters(widths)
|
44
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
41
45
|
|
42
46
|
return (
|
43
|
-
<div
|
47
|
+
<div
|
48
|
+
className={classnames(`pb_distribution_bar_${size}`, globalProps(props))}
|
49
|
+
{...htmlProps}
|
50
|
+
>
|
44
51
|
{barValues(normalizedValues, colors)}
|
45
52
|
</div>
|
46
53
|
)
|
@@ -2,7 +2,7 @@ import React, { useEffect, useCallback, useRef } from 'react'
|
|
2
2
|
import { useDropzone, DropzoneInputProps, DropzoneRootProps } from 'react-dropzone'
|
3
3
|
import classnames from 'classnames'
|
4
4
|
|
5
|
-
import { buildCss, buildDataProps, noop } from '../utilities/props'
|
5
|
+
import { buildCss, buildDataProps, noop, buildHtmlProps } from '../utilities/props'
|
6
6
|
import { globalProps } from '../utilities/globalProps'
|
7
7
|
import type { Callback } from '../types'
|
8
8
|
|
@@ -14,6 +14,7 @@ type FileUploadProps = {
|
|
14
14
|
className?: string,
|
15
15
|
customMessage?: string,
|
16
16
|
data?: {[key: string]: string | number},
|
17
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
17
18
|
acceptedFilesDescription?: string,
|
18
19
|
maxSize?: number,
|
19
20
|
onFilesAccepted: Callback<File, File>,
|
@@ -31,6 +32,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
31
32
|
className,
|
32
33
|
customMessage,
|
33
34
|
data = {},
|
35
|
+
htmlOptions = {},
|
34
36
|
maxSize,
|
35
37
|
onFilesAccepted = noop,
|
36
38
|
onFilesRejected = noop,
|
@@ -76,7 +78,8 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
76
78
|
})
|
77
79
|
}
|
78
80
|
|
79
|
-
|
81
|
+
const dataProps = buildDataProps(data)
|
82
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
80
83
|
|
81
84
|
const getDescription = () => {
|
82
85
|
return customMessage
|
@@ -88,6 +91,7 @@ const FileUpload = (props: FileUploadProps): React.ReactElement => {
|
|
88
91
|
<div
|
89
92
|
className={classnames(buildCss('pb_file_upload_kit'), globalProps(props), className)}
|
90
93
|
{...dataProps}
|
94
|
+
{...htmlProps}
|
91
95
|
{...getRootProps()}
|
92
96
|
>
|
93
97
|
<Card>
|
@@ -2,6 +2,7 @@ import React, { useEffect, useState } from "react";
|
|
2
2
|
import classnames from "classnames";
|
3
3
|
|
4
4
|
import { globalProps } from "../utilities/globalProps";
|
5
|
+
import { buildHtmlProps } from '../utilities/props'
|
5
6
|
|
6
7
|
import Icon from "../pb_icon/_icon";
|
7
8
|
import Title from "../pb_title/_title";
|
@@ -20,6 +21,7 @@ type FixedConfirmationToastProps = {
|
|
20
21
|
closeable?: boolean,
|
21
22
|
data?: string,
|
22
23
|
horizontal?: "right" | "left" | "center",
|
24
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
23
25
|
id?: string,
|
24
26
|
multiLine?: boolean,
|
25
27
|
onClose?: () => void,
|
@@ -37,6 +39,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
|
37
39
|
className,
|
38
40
|
closeable = false,
|
39
41
|
horizontal,
|
42
|
+
htmlOptions = {},
|
40
43
|
multiLine = false,
|
41
44
|
onClose = () => { },
|
42
45
|
open = true,
|
@@ -53,6 +56,8 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
|
53
56
|
);
|
54
57
|
const icon = iconMap[status];
|
55
58
|
|
59
|
+
const htmlProps = buildHtmlProps(htmlOptions);
|
60
|
+
|
56
61
|
const autoCloseToast = () => {
|
57
62
|
if (autoClose && open) {
|
58
63
|
setTimeout(() => {
|
@@ -75,7 +80,7 @@ const FixedConfirmationToast = (props: FixedConfirmationToastProps) => {
|
|
75
80
|
return (
|
76
81
|
<>
|
77
82
|
{showToast && (
|
78
|
-
<div className={css} onClick={handleClick}>
|
83
|
+
<div className={css} onClick={handleClick} {...htmlProps}>
|
79
84
|
{icon && <Icon className="pb_icon" fixedWidth icon={icon} />}
|
80
85
|
|
81
86
|
{
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildCss, buildDataProps } from '../utilities/props'
|
3
|
+
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
import { Sizes } from '../types'
|
6
6
|
|
@@ -10,6 +10,7 @@ type FlexProps = {
|
|
10
10
|
data?: object,
|
11
11
|
horizontal?: "left" | "center" | "right" | "stretch" | "none",
|
12
12
|
justify?: "start" | "center" | "end" | "around" | "between" | "evenly" | "none",
|
13
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
13
14
|
id?: string,
|
14
15
|
inline?: boolean,
|
15
16
|
orientation?: "row" | "column",
|
@@ -32,6 +33,7 @@ const Flex = (props: FlexProps) => {
|
|
32
33
|
data = {},
|
33
34
|
inline = false,
|
34
35
|
horizontal = 'left',
|
36
|
+
htmlOptions = {},
|
35
37
|
justify = 'none',
|
36
38
|
orientation = 'row',
|
37
39
|
spacing = 'none',
|
@@ -58,6 +60,8 @@ const Flex = (props: FlexProps) => {
|
|
58
60
|
const reverseClass = reverse === true ? 'reverse' : ''
|
59
61
|
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
60
62
|
const dataProps = buildDataProps(data)
|
63
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
64
|
+
|
61
65
|
|
62
66
|
return (
|
63
67
|
<div
|
@@ -80,6 +84,7 @@ const Flex = (props: FlexProps) => {
|
|
80
84
|
className
|
81
85
|
)}
|
82
86
|
{...dataProps}
|
87
|
+
{...htmlProps}
|
83
88
|
>
|
84
89
|
{children}
|
85
90
|
</div>
|
@@ -1,11 +1,12 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildCss } from '../utilities/props'
|
3
|
+
import { buildCss, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
5
|
type FlexItemPropTypes = {
|
6
6
|
children: React.ReactNode[] | React.ReactNode,
|
7
7
|
fixedSize?: string,
|
8
8
|
grow?: boolean,
|
9
|
+
htmlOptions?: { [key: string]: string | number | boolean | Function },
|
9
10
|
shrink?: boolean,
|
10
11
|
className?: string,
|
11
12
|
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
@@ -19,6 +20,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
19
20
|
className,
|
20
21
|
fixedSize,
|
21
22
|
grow,
|
23
|
+
htmlOptions = {},
|
22
24
|
shrink,
|
23
25
|
flex = 'none',
|
24
26
|
order = 'none',
|
@@ -34,8 +36,11 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
34
36
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
35
37
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
36
38
|
|
39
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
40
|
+
|
37
41
|
return (
|
38
42
|
<div
|
43
|
+
{...htmlProps}
|
39
44
|
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
40
45
|
style={fixedStyle}
|
41
46
|
>
|
@@ -1,6 +1,6 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
|
-
import { buildAriaProps, buildCss, buildDataProps } from '../utilities/props'
|
3
|
+
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
4
|
import { globalProps } from '../utilities/globalProps'
|
5
5
|
|
6
6
|
type FormGroupProps = {
|
@@ -9,6 +9,7 @@ type FormGroupProps = {
|
|
9
9
|
className?: string,
|
10
10
|
data?: object,
|
11
11
|
fullWidth?: boolean,
|
12
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
12
13
|
id?: string,
|
13
14
|
}
|
14
15
|
|
@@ -18,17 +19,20 @@ const FormGroup = (props: FormGroupProps) => {
|
|
18
19
|
className,
|
19
20
|
data = {},
|
20
21
|
fullWidth = false,
|
22
|
+
htmlOptions = {},
|
21
23
|
id,
|
22
24
|
children,
|
23
25
|
} = props
|
24
26
|
|
25
27
|
const ariaProps = buildAriaProps(aria)
|
26
28
|
const dataProps = buildDataProps(data)
|
29
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
27
30
|
const classes = classnames(buildCss('pb_form_group_kit', { full: fullWidth }), globalProps(props), className)
|
28
31
|
return (
|
29
32
|
<div
|
30
33
|
{...ariaProps}
|
31
34
|
{...dataProps}
|
35
|
+
{...htmlProps}
|
32
36
|
className={classes}
|
33
37
|
id={id}
|
34
38
|
>
|
@@ -5,9 +5,11 @@ import Title from '../pb_title/_title'
|
|
5
5
|
import Icon from '../pb_icon/_icon'
|
6
6
|
import Avatar from '../pb_avatar/_avatar'
|
7
7
|
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
8
|
+
import { buildHtmlProps } from '../utilities/props'
|
8
9
|
|
9
10
|
type FormPillProps = {
|
10
11
|
className?: string,
|
12
|
+
htmlOptions?: {[key: string]: string | number | boolean | Function},
|
11
13
|
id?: string,
|
12
14
|
text: string,
|
13
15
|
name?: string,
|
@@ -25,6 +27,7 @@ type FormPillProps = {
|
|
25
27
|
const FormPill = (props: FormPillProps) => {
|
26
28
|
const {
|
27
29
|
className,
|
30
|
+
htmlOptions = {},
|
28
31
|
id,
|
29
32
|
text,
|
30
33
|
name,
|
@@ -41,8 +44,11 @@ const FormPill = (props: FormPillProps) => {
|
|
41
44
|
size === 'small' ? 'small' : null,
|
42
45
|
textTransform,
|
43
46
|
)
|
47
|
+
|
48
|
+
const htmlProps = buildHtmlProps(htmlOptions)
|
49
|
+
|
44
50
|
return (
|
45
|
-
<div className={css} id={id}>
|
51
|
+
<div className={css} id={id} {...htmlProps}>
|
46
52
|
{name &&
|
47
53
|
<>
|
48
54
|
<Avatar
|