playbook_ui 13.32.0.pre.alpha.PBNTR405dropdownformfixesrails3301 → 13.32.0.pre.alpha.PLAY1138iconkitaddcolorprop3268
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_bar_graph/docs/_bar_graph_custom.md +0 -4
- data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +1 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +7 -12
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +4 -3
- data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -11
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/index.js +17 -75
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -108
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -11
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +1 -5
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +0 -1
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +1 -4
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +2 -3
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +0 -2
- data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
- data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -5
- data/app/pb_kits/playbook/pb_icon/_icon.scss +27 -210
- data/app/pb_kits/playbook/pb_icon/_icon.tsx +44 -100
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +7 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +46 -0
- data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
- data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_icon/icon.rb +28 -34
- data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
- data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -1
- data/app/pb_kits/playbook/pb_nav/nav.rb +0 -9
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +1 -1
- data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +2 -11
- data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
- data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +5 -25
- data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -6
- data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/index.ts +4 -4
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
- data/app/pb_kits/playbook/pb_table/table.test.js +0 -2
- data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
- data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +27 -45
- data/app/pb_kits/playbook/pb_textarea/index.tsx +3 -3
- data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
- data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
- data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
- data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
- data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
- data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +2 -1
- data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -2
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -3
- data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +4 -4
- data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +7 -11
- data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +3 -8
- data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +1 -6
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +19 -18
- data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +6 -6
- data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +6 -6
- data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +3 -3
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +0 -2
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +57 -22
- data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
- data/app/pb_kits/playbook/pb_typeahead/index.ts +31 -31
- data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
- data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
- data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +235 -236
- data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
- data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +63 -68
- data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -2
- data/app/pb_kits/playbook/playbook-rails.js +0 -6
- data/dist/playbook-rails.js +7 -7
- data/lib/playbook/forms/builder.rb +0 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -13
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +0 -31
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +0 -10
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +0 -31
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +0 -53
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +0 -48
- data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +0 -3
- data/app/pb_kits/playbook/pb_nav/index.js +0 -43
- data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +0 -1
- data/app/pb_kits/playbook/pb_star_rating/index.js +0 -50
- data/lib/playbook/forms/builder/star_rating_field.rb +0 -14
@@ -1,5 +1,3 @@
|
|
1
|
-
/* eslint-disable react/no-multi-comp */
|
2
|
-
|
3
1
|
import React from 'react'
|
4
2
|
import classnames from 'classnames'
|
5
3
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
@@ -26,7 +24,7 @@ type WalkthroughProps = {
|
|
26
24
|
disableOverlay?: boolean,
|
27
25
|
disableOverlayClose?: boolean,
|
28
26
|
disableScrolling?: boolean,
|
29
|
-
floaterProps?:
|
27
|
+
floaterProps?: object,
|
30
28
|
hideBackButton?: boolean,
|
31
29
|
hideCloseButton?: boolean,
|
32
30
|
showProgress?: boolean,
|
@@ -60,92 +58,89 @@ type TooltipProps = {
|
|
60
58
|
disableBeacon?: boolean,
|
61
59
|
},
|
62
60
|
skip?: boolean,
|
63
|
-
backProps?:
|
64
|
-
closeProps?:
|
65
|
-
primaryProps?:
|
66
|
-
skipProps?:
|
67
|
-
tooltipProps?:
|
61
|
+
backProps?: object,
|
62
|
+
closeProps?: object,
|
63
|
+
primaryProps?: object,
|
64
|
+
skipProps?: object,
|
65
|
+
tooltipProps?: object,
|
68
66
|
}
|
69
67
|
|
70
|
-
// eslint-disable-next-line react/display-name
|
71
68
|
const Tooltip = React.forwardRef((props: TooltipProps) => (
|
72
|
-
<div
|
69
|
+
<div
|
73
70
|
className="pb_card_kit_border_none p_none"
|
74
71
|
{...props.tooltipProps}
|
75
|
-
>
|
76
|
-
{props.step.title && <div>
|
77
|
-
<Flex
|
78
|
-
align="center"
|
79
|
-
justify="between"
|
80
|
-
padding="xs"
|
81
72
|
>
|
82
|
-
|
73
|
+
{props.step.title && <div>
|
74
|
+
<Flex
|
75
|
+
align="center"
|
76
|
+
justify="between"
|
77
|
+
padding="xs"
|
78
|
+
>
|
79
|
+
<Title
|
83
80
|
paddingLeft="xs"
|
84
81
|
size={4}
|
85
|
-
|
86
|
-
|
87
|
-
|
88
|
-
|
89
|
-
<Button
|
82
|
+
>
|
83
|
+
{props.step.title}
|
84
|
+
</Title>
|
85
|
+
{props.skip && (<Button
|
90
86
|
{...props.skipProps}
|
91
87
|
id="skip"
|
92
88
|
text="Skip Tour"
|
93
89
|
variant="link"
|
94
|
-
|
95
|
-
|
96
|
-
<Button
|
90
|
+
/>)}
|
91
|
+
<Button
|
97
92
|
{...props.skipProps}
|
98
93
|
id="skip"
|
99
94
|
text="Skip Tour"
|
100
95
|
variant="link"
|
101
|
-
|
102
|
-
|
103
|
-
|
104
|
-
|
96
|
+
/>
|
97
|
+
</Flex>
|
98
|
+
<SectionSeparator />
|
99
|
+
</div>}
|
105
100
|
|
106
|
-
|
107
|
-
|
108
|
-
|
101
|
+
<Flex padding="sm">{props.step.content}</Flex>
|
102
|
+
<SectionSeparator />
|
103
|
+
<Flex
|
109
104
|
justify={props.index == 0 ? 'end' : 'between'}
|
110
105
|
padding="xs"
|
111
|
-
|
106
|
+
>
|
112
107
|
|
113
|
-
|
114
|
-
|
108
|
+
{props.index > 0 && (
|
109
|
+
<Button
|
115
110
|
{...props.backProps}
|
116
111
|
id="back"
|
117
112
|
text="Back"
|
118
|
-
|
119
|
-
|
113
|
+
/>
|
114
|
+
)}
|
120
115
|
|
121
|
-
|
122
|
-
|
116
|
+
{props.continuous && !props.isLastStep &&
|
117
|
+
<Button
|
123
118
|
{...props.primaryProps}
|
124
119
|
id="next"
|
125
120
|
text="Next"
|
126
|
-
|
127
|
-
|
121
|
+
/>
|
122
|
+
}
|
128
123
|
|
129
|
-
|
130
|
-
|
124
|
+
{!props.continuous &&
|
125
|
+
<Button
|
131
126
|
{...props.closeProps}
|
132
127
|
id="close"
|
133
128
|
text="Close"
|
134
|
-
|
135
|
-
|
129
|
+
/>
|
130
|
+
}
|
136
131
|
|
137
|
-
|
138
|
-
|
132
|
+
{!((props.continuous && !props.isLastStep) || (!props.continuous)) &&
|
133
|
+
<Button
|
139
134
|
{...props.closeProps}
|
140
135
|
id="close"
|
141
136
|
text="Close"
|
142
|
-
|
143
|
-
|
144
|
-
|
145
|
-
</div>
|
137
|
+
/>
|
138
|
+
}
|
139
|
+
</Flex>
|
140
|
+
</div>
|
146
141
|
)) as unknown as React.ForwardRefRenderFunction<HTMLDivElement, TooltipRenderProps>
|
147
142
|
|
148
|
-
const Walkthrough = (props: WalkthroughProps)
|
143
|
+
const Walkthrough = (props: WalkthroughProps) => {
|
149
144
|
const {
|
150
145
|
aria = {},
|
151
146
|
callback,
|
@@ -175,24 +170,24 @@ const Walkthrough = (props: WalkthroughProps): React.ReactElement => {
|
|
175
170
|
|
176
171
|
return (
|
177
172
|
<div
|
178
|
-
|
179
|
-
|
180
|
-
|
181
|
-
|
182
|
-
|
173
|
+
{...ariaProps}
|
174
|
+
{...dataProps}
|
175
|
+
{...htmlProps}
|
176
|
+
className={classes}
|
177
|
+
id={id}
|
183
178
|
>
|
184
179
|
<Joyride
|
185
|
-
|
186
|
-
|
187
|
-
|
188
|
-
|
189
|
-
|
190
|
-
|
191
|
-
|
192
|
-
|
193
|
-
|
194
|
-
|
195
|
-
|
180
|
+
callback={callback}
|
181
|
+
continuous={continuous}
|
182
|
+
disableOverlay={disableOverlay}
|
183
|
+
disableScrolling
|
184
|
+
floaterProps={floaterProps}
|
185
|
+
run={run}
|
186
|
+
showSkipButton={showSkipButton}
|
187
|
+
steps={steps}
|
188
|
+
styles={styles}
|
189
|
+
tooltipComponent={Tooltip}
|
190
|
+
{...props}
|
196
191
|
/>
|
197
192
|
</div>
|
198
193
|
|
@@ -14,7 +14,7 @@ type WeekdayStackedProps = {
|
|
14
14
|
aria?: {[key:string]:string },
|
15
15
|
className?: string,
|
16
16
|
dark?: boolean,
|
17
|
-
data?:
|
17
|
+
data?: object,
|
18
18
|
date: Date,
|
19
19
|
htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
|
20
20
|
id?: string,
|
@@ -39,7 +39,7 @@ const getFormattedDate = (value: Date, variant: "day_only" | "month_day" | "expa
|
|
39
39
|
}
|
40
40
|
}
|
41
41
|
|
42
|
-
const WeekdayStacked = (props: WeekdayStackedProps)
|
42
|
+
const WeekdayStacked = (props: WeekdayStackedProps) => {
|
43
43
|
const {
|
44
44
|
align = 'left',
|
45
45
|
aria = {},
|
@@ -39,12 +39,6 @@ PbDropdown.start()
|
|
39
39
|
import PbAdvancedTable from './pb_advanced_table'
|
40
40
|
PbAdvancedTable.start()
|
41
41
|
|
42
|
-
import PbNav from './pb_nav'
|
43
|
-
PbNav.start()
|
44
|
-
|
45
|
-
import PbStarRating from './pb_star_rating'
|
46
|
-
PbStarRating.start()
|
47
|
-
|
48
42
|
import 'flatpickr'
|
49
43
|
|
50
44
|
// React-Rendered Rails Kits =====
|