playbook_ui 13.32.0 → 13.33.0.pre.alpha.PBNTR405dropdownformfixesrails3311

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