playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940
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_date_picker/date_picker_helper.ts +33 -40
- data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +30 -44
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
- data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +2 -3
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +4 -7
- data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
- data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +9 -10
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +5 -21
- data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +2 -3
- data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
- data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
- data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
- data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
- data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
- data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
- data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
- data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
- data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
- data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
- data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
- data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
- data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
- data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
- data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
- data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
- data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
- data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
- data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
- data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +50 -51
- data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +19 -20
- data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -4
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +4 -6
- data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
- data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +17 -19
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +21 -23
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -18
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +23 -46
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
- data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +15 -17
- data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +7 -9
- data/app/pb_kits/playbook/pb_select/_select.scss +4 -13
- data/app/pb_kits/playbook/pb_select/_select.tsx +4 -7
- data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_select/select.rb +1 -6
- data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +24 -25
- data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +26 -27
- data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -2
- data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/version.rb +1 -1
- metadata +2 -4
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +0 -24
- data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +0 -38
@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
|
|
33
33
|
onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
|
34
34
|
}
|
35
35
|
|
36
|
-
const SelectableCardIcon = (props: SelectableCardIconProps)
|
36
|
+
const SelectableCardIcon = (props: SelectableCardIconProps) => {
|
37
37
|
const {
|
38
38
|
aria = {},
|
39
39
|
checkmark = false,
|
@@ -70,37 +70,36 @@ const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement
|
|
70
70
|
|
71
71
|
return (
|
72
72
|
<div
|
73
|
-
|
74
|
-
|
75
|
-
|
76
|
-
|
73
|
+
{...ariaProps}
|
74
|
+
{...dataProps}
|
75
|
+
{...htmlProps}
|
76
|
+
className={classes}
|
77
77
|
>
|
78
78
|
<SelectableCard
|
79
|
-
|
80
|
-
|
81
|
-
|
82
|
-
|
83
|
-
|
84
|
-
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
79
|
+
checked={checked}
|
80
|
+
customIcon={customIcon}
|
81
|
+
dark={dark}
|
82
|
+
disabled={disabled}
|
83
|
+
icon={checkmark}
|
84
|
+
inputId={inputId}
|
85
|
+
multi={multi}
|
86
|
+
name={name}
|
87
|
+
onChange={onChange}
|
88
|
+
value={value}
|
89
89
|
>
|
90
90
|
{
|
91
91
|
<>
|
92
92
|
<SelectableIcon
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
98
|
-
|
99
|
-
/>
|
93
|
+
customIcon={customIcon}
|
94
|
+
icon={icon}
|
95
|
+
inputId={''}
|
96
|
+
inputs="disabled"
|
97
|
+
name={''}
|
98
|
+
text={titleText} />
|
100
99
|
<Body
|
101
|
-
|
102
|
-
|
103
|
-
|
100
|
+
color="light"
|
101
|
+
dark={dark}
|
102
|
+
text={bodyText}
|
104
103
|
/>
|
105
104
|
</>
|
106
105
|
}
|
@@ -6,11 +6,10 @@ import {
|
|
6
6
|
buildAriaProps,
|
7
7
|
buildCss,
|
8
8
|
buildDataProps,
|
9
|
-
buildHtmlProps
|
9
|
+
buildHtmlProps
|
10
10
|
} from '../utilities/props'
|
11
11
|
import Icon from '../pb_icon/_icon'
|
12
12
|
import Title from '../pb_title/_title'
|
13
|
-
import { GenericObject } from '../types'
|
14
13
|
|
15
14
|
type SelectableIconProps = {
|
16
15
|
aria?: {[key: string]: string},
|
@@ -18,7 +17,7 @@ type SelectableIconProps = {
|
|
18
17
|
className?: string,
|
19
18
|
customIcon?: {[key: string] :SVGElement},
|
20
19
|
disabled?: boolean,
|
21
|
-
data?:
|
20
|
+
data?: Object,
|
22
21
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
23
22
|
icon: string,
|
24
23
|
inputId: string,
|
@@ -45,7 +44,7 @@ const SelectableIcon = ({
|
|
45
44
|
text,
|
46
45
|
value,
|
47
46
|
...props
|
48
|
-
}: SelectableIconProps)
|
47
|
+
}: SelectableIconProps) => {
|
49
48
|
const ariaProps = buildAriaProps(aria)
|
50
49
|
const dataProps = buildDataProps(data)
|
51
50
|
const htmlProps = buildHtmlProps(htmlOptions)
|
@@ -65,22 +64,22 @@ const SelectableIcon = ({
|
|
65
64
|
|
66
65
|
return (
|
67
66
|
<div
|
68
|
-
|
69
|
-
|
70
|
-
|
71
|
-
|
67
|
+
{...ariaProps}
|
68
|
+
{...dataProps}
|
69
|
+
{...htmlProps}
|
70
|
+
className={classes}
|
72
71
|
>
|
73
72
|
{inputs === 'disabled' && (
|
74
73
|
<>
|
75
74
|
<Icon
|
76
|
-
|
77
|
-
|
78
|
-
|
75
|
+
customIcon={customIcon}
|
76
|
+
icon={icon}
|
77
|
+
size="2x"
|
79
78
|
/>
|
80
79
|
<Title
|
81
|
-
|
82
|
-
|
83
|
-
|
80
|
+
size={4}
|
81
|
+
tag="h4"
|
82
|
+
text={text}
|
84
83
|
/>
|
85
84
|
</>
|
86
85
|
)}
|
@@ -88,24 +87,24 @@ const SelectableIcon = ({
|
|
88
87
|
{inputs === 'enabled' && (
|
89
88
|
<>
|
90
89
|
<input
|
91
|
-
|
92
|
-
|
93
|
-
|
94
|
-
|
95
|
-
|
96
|
-
|
97
|
-
|
90
|
+
{...props}
|
91
|
+
checked={checked}
|
92
|
+
disabled={disabled}
|
93
|
+
id={inputIdPresent}
|
94
|
+
name={name}
|
95
|
+
type={inputType}
|
96
|
+
value={value}
|
98
97
|
/>
|
99
98
|
<label htmlFor={inputIdPresent}>
|
100
99
|
<Icon
|
101
|
-
|
102
|
-
|
103
|
-
|
100
|
+
customIcon={customIcon}
|
101
|
+
icon={icon}
|
102
|
+
size="2x"
|
104
103
|
/>
|
105
104
|
<Title
|
106
|
-
|
107
|
-
|
108
|
-
|
105
|
+
size={4}
|
106
|
+
tag="h4"
|
107
|
+
text={text}
|
109
108
|
/>
|
110
109
|
</label>
|
111
110
|
</>
|
@@ -7,13 +7,12 @@ import { SelectableListItemProps } from './_item.js'
|
|
7
7
|
|
8
8
|
import List from '../pb_list/_list'
|
9
9
|
import SelectableListItem from './_item'
|
10
|
-
import { GenericObject } from '../types'
|
11
10
|
|
12
11
|
type SelectableListProps = {
|
13
12
|
aria?: {[key: string]: string },
|
14
13
|
children?: React.ReactElement[],
|
15
14
|
className?: string,
|
16
|
-
data?:
|
15
|
+
data?: object,
|
17
16
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
18
17
|
id?: string,
|
19
18
|
variant?: 'checkbox' | 'radio',
|
@@ -32,7 +32,7 @@ const Source = ({
|
|
32
32
|
source,
|
33
33
|
type = 'inbound',
|
34
34
|
user = {},
|
35
|
-
}: SourceProps)
|
35
|
+
}: SourceProps) => {
|
36
36
|
const dataProps = buildDataProps(data)
|
37
37
|
const htmlProps = buildHtmlProps(htmlOptions)
|
38
38
|
const ariaProps = buildAriaProps(aria)
|
@@ -72,11 +72,11 @@ const Source = ({
|
|
72
72
|
|
73
73
|
return (
|
74
74
|
<div
|
75
|
-
|
76
|
-
|
77
|
-
|
78
|
-
|
79
|
-
|
75
|
+
{...ariaProps}
|
76
|
+
{...dataProps}
|
77
|
+
{...htmlProps}
|
78
|
+
className={css}
|
79
|
+
id={id}
|
80
80
|
>
|
81
81
|
|
82
82
|
<div className="pb__source_layout">
|
@@ -84,13 +84,13 @@ const Source = ({
|
|
84
84
|
<>
|
85
85
|
{showIcon() &&
|
86
86
|
<IconCircle
|
87
|
-
|
88
|
-
|
87
|
+
icon={typeIconNames[type]}
|
88
|
+
size="sm"
|
89
89
|
/>
|
90
90
|
}
|
91
91
|
{!showIcon() &&
|
92
92
|
<Avatar
|
93
|
-
|
93
|
+
{...avatar()}
|
94
94
|
/>
|
95
95
|
}
|
96
96
|
</>
|
@@ -98,20 +98,20 @@ const Source = ({
|
|
98
98
|
|
99
99
|
<div className="pb__source_content">
|
100
100
|
<Title
|
101
|
-
|
102
|
-
|
103
|
-
|
101
|
+
size={4}
|
102
|
+
tag="h4"
|
103
|
+
text={source}
|
104
104
|
/>
|
105
105
|
|
106
106
|
<div className="pb__source_value">
|
107
107
|
<Body
|
108
|
-
|
109
|
-
|
108
|
+
color="light"
|
109
|
+
text={typeText()}
|
110
110
|
/>
|
111
111
|
|
112
112
|
{user.userId &&
|
113
113
|
<Caption
|
114
|
-
|
114
|
+
text={user.userId}
|
115
115
|
/>
|
116
116
|
}
|
117
117
|
</div>
|