playbook_ui 14.4.0 → 14.5.0.pre.alpha.PBNTR374multilevelselectPOC3946

Sign up to get free protection for your applications and to get access to all the features.
Files changed (99) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +2 -0
  3. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
  4. data/app/pb_kits/playbook/pb_advanced_table/advanced_table.test.jsx +1 -1
  5. data/app/pb_kits/playbook/pb_button/_button.tsx +6 -2
  6. data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
  7. data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
  8. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  9. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  10. data/app/pb_kits/playbook/pb_dashboard/pbChartsDarkTheme.ts +2 -6
  11. data/app/pb_kits/playbook/pb_dashboard/pbChartsLightTheme.ts +2 -7
  12. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
  13. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
  15. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
  16. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  17. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  19. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_drawer/_close_icon.tsx +25 -0
  21. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +465 -0
  22. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +195 -0
  23. data/app/pb_kits/playbook/pb_drawer/_drawer_context.tsx +3 -0
  24. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_borders.jsx +117 -0
  25. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_breakpoints.jsx +43 -0
  26. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.html.erb +1 -0
  27. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_default.jsx +63 -0
  28. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_overlay.jsx +55 -0
  29. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_sizes.jsx +113 -0
  30. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +12 -0
  31. data/app/pb_kits/playbook/pb_drawer/docs/index.js +5 -0
  32. data/app/pb_kits/playbook/pb_drawer/drawer.html.erb +12 -0
  33. data/app/pb_kits/playbook/pb_drawer/drawer.rb +8 -0
  34. data/app/pb_kits/playbook/pb_drawer/drawer.test.jsx +77 -0
  35. data/app/pb_kits/playbook/pb_filter/docs/_filter_default.html.erb +10 -2
  36. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_height.html.erb +5 -1
  37. data/app/pb_kits/playbook/pb_filter/docs/_filter_max_width.html.erb +5 -1
  38. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_background.html.erb +5 -1
  39. data/app/pb_kits/playbook/pb_filter/docs/_filter_no_sort.html.erb +5 -1
  40. data/app/pb_kits/playbook/pb_filter/docs/_filter_only.html.erb +5 -1
  41. data/app/pb_kits/playbook/pb_filter/docs/_filter_placement.html.erb +5 -1
  42. data/app/pb_kits/playbook/pb_filter/docs/_filter_single.html.erb +5 -1
  43. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
  44. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +210 -232
  45. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +5 -0
  46. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  47. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +107 -0
  48. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +108 -0
  49. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +3 -0
  50. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +2 -0
  51. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +149 -0
  52. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  53. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  54. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
  55. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.html.erb +14 -13
  56. data/app/pb_kits/playbook/pb_popover/docs/_popover_list.jsx +4 -4
  57. data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
  58. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.html.erb +2 -0
  59. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +62 -0
  60. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  61. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  62. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
  63. data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
  64. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  65. data/app/pb_kits/playbook/pb_select/select.rb +4 -0
  66. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  67. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +17 -13
  68. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
  69. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
  70. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
  71. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
  72. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  73. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  74. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  75. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  76. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  77. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  78. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +136 -13
  79. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
  80. data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
  81. data/dist/chunks/_typeahead-DMIBeCYd.js +22 -0
  82. data/dist/chunks/_weekday_stacked-CviGlw2m.js +45 -0
  83. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  84. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  85. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
  86. data/dist/chunks/vendor.js +1 -1
  87. data/dist/menu.yml +3 -1
  88. data/dist/playbook-doc.js +1 -1
  89. data/dist/playbook-rails-react-bindings.js +1 -1
  90. data/dist/playbook-rails.js +1 -1
  91. data/dist/playbook.css +1 -1
  92. data/lib/playbook/pagination_renderer.rb +10 -2
  93. data/lib/playbook/pb_doc_helper.rb +5 -5
  94. data/lib/playbook/version.rb +2 -2
  95. metadata +34 -10
  96. data/dist/chunks/_typeahead-B2zRxReA.js +0 -22
  97. data/dist/chunks/_weekday_stacked-BIfZDNDm.js +0 -45
  98. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  99. data/dist/chunks/lib-D2U4I1U6.js +0 -16
@@ -1,28 +1,30 @@
1
- /*eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */
1
+ /*eslint-disable react/no-multi-comp */
2
2
 
3
- import React, { forwardRef } from 'react'
3
+ import React, { forwardRef, useRef } from 'react'
4
4
  import Body from '../pb_body/_body'
5
+ import Flex from '../pb_flex/_flex'
5
6
  import classnames from 'classnames'
6
7
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
7
8
  import { globalProps, GlobalProps } from '../utilities/globalProps'
8
9
 
9
10
  type RadioProps = {
10
- aria?: {[key: string]: string},
11
+ aria?: { [key: string]: string },
11
12
  alignment?: string,
12
13
  checked?: boolean,
13
14
  children?: React.ReactChild[] | React.ReactChild,
15
+ customChildren?: boolean,
14
16
  className?: string,
15
17
  dark?: boolean,
16
- data?: {[key: string]: string},
18
+ data?: { [key: string]: string },
17
19
  disabled?: boolean,
18
20
  error?: boolean,
19
- htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
21
+ htmlOptions?: { [key: string]: string | number | boolean | (() => void) },
20
22
  id?: string,
21
23
  label: string,
22
24
  name?: string,
23
25
  value?: string,
24
26
  text?: string,
25
- onChange: (event: React.FormEvent<HTMLInputElement> | null)=>void,
27
+ onChange: (event: React.FormEvent<HTMLInputElement> | null) => void,
26
28
  } & GlobalProps
27
29
 
28
30
  const Radio = ({
@@ -30,10 +32,11 @@ const Radio = ({
30
32
  alignment,
31
33
  children,
32
34
  className,
35
+ customChildren = false,
33
36
  dark = false,
34
- data = {},
35
37
  disabled = false,
36
38
  error = false,
39
+ data = {},
37
40
  htmlOptions = {},
38
41
  id,
39
42
  label,
@@ -43,17 +46,28 @@ const Radio = ({
43
46
  onChange = () => { void 0 },
44
47
  ...props
45
48
  }: RadioProps, ref: any) => {
46
- const ariaProps = buildAriaProps(aria)
47
- const dataProps = buildDataProps(data)
48
- const htmlProps = buildHtmlProps(htmlOptions)
49
+ const radioRef = useRef(null);
50
+
51
+ const ariaProps = buildAriaProps(aria);
52
+ const dataProps = buildDataProps(data);
53
+ const htmlProps = buildHtmlProps(htmlOptions);
49
54
  const classes = classnames(
50
- buildCss('pb_radio_kit', alignment ),
51
- dark ? 'dark': null, error ? 'error': null,
55
+ buildCss('pb_radio_kit', alignment),
56
+ dark ? 'dark' : null,
57
+ error ? 'error' : null,
52
58
  globalProps(props),
53
- className)
59
+ className
60
+ );
61
+
62
+ const classesCustom = classnames(
63
+ dark ? 'dark' : null,
64
+ error ? 'error' : null,
65
+ globalProps(props),
66
+ className
67
+ );
54
68
 
55
69
  const displayRadio = (props: RadioProps & any) => {
56
- if (children)
70
+ if (children && customChildren == false)
57
71
  return (children)
58
72
  else
59
73
  return (
@@ -70,24 +84,69 @@ const Radio = ({
70
84
  />
71
85
  )}
72
86
 
87
+ const handleContainerClick = (event: React.MouseEvent<HTMLDivElement, MouseEvent> | undefined) => {
88
+ if (event) {
89
+ const target = event.target as HTMLElement;
90
+ if (
91
+ target.id === 'pb-radio-children-wrapper' ||
92
+ target.closest('#pb-radio-children-wrapper')
93
+ ) {
94
+ radioRef.current?.click();
95
+ }
96
+ }
97
+ };
98
+
73
99
  return (
74
- <label
75
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={classes}
79
- htmlFor={id}
80
- >
81
- <>{displayRadio(props)}</>
82
- <span className="pb_radio_button" />
83
- <Body
84
- dark={dark}
85
- status={error ? 'negative' : null}
86
- text={label}
87
- variant={null}
88
- />
89
- </label>
90
- )
91
- }
100
+ customChildren ? (
101
+ <Flex
102
+ {...ariaProps}
103
+ {...dataProps}
104
+ {...htmlProps}
105
+ align='center'
106
+ className={classesCustom}
107
+ cursor='pointer'
108
+ htmlFor={id}
109
+ htmlOptions={{
110
+ onClick: ((event: React.MouseEvent<HTMLDivElement, MouseEvent>) => {
111
+ handleContainerClick(event);
112
+ }) as unknown as () => void
113
+ }}
114
+ id="radio-container"
115
+ >
116
+ <label className={buildCss('pb_radio_kit', alignment)}>
117
+ <input
118
+ disabled={disabled}
119
+ id={id}
120
+ name={name}
121
+ onChange={onChange}
122
+ ref={radioRef}
123
+ type="radio"
124
+ value={value}
125
+ {...props}
126
+ />
127
+ <span className="pb_radio_button" />
128
+ </label>
129
+ <div id="pb-radio-children-wrapper"> {children} </div>
130
+ </Flex>
131
+ ) : (
132
+ <label
133
+ {...ariaProps}
134
+ {...dataProps}
135
+ {...htmlProps}
136
+ className={classes}
137
+ htmlFor={id}
138
+ >
139
+ <>{displayRadio(props)}</>
140
+ <span className="pb_radio_button" />
141
+ <Body
142
+ dark={dark}
143
+ status={error ? 'negative' : null}
144
+ text={label}
145
+ variant={null}
146
+ />
147
+ </label>
148
+ )
149
+ );
150
+ };
92
151
 
93
- export default forwardRef(Radio)
152
+ export default forwardRef(Radio);
@@ -10,6 +10,7 @@
10
10
  <%= pb_rails("radio", props: {
11
11
  custom_children: true,
12
12
  label: "Select",
13
+ margin_bottom: "sm",
13
14
  name: "Group1",
14
15
  value: "Select",
15
16
  }) do %>
@@ -22,6 +23,7 @@
22
23
  <%= pb_rails("radio", props: {
23
24
  custom_children: true,
24
25
  label: "Typeahead",
26
+ margin_bottom: "sm",
25
27
  name: "Group1",
26
28
  value: "Typeahead",
27
29
  }) do %>
@@ -0,0 +1,62 @@
1
+ import React from 'react'
2
+ import Radio from '../_radio'
3
+ import Select from '../../pb_select/_select'
4
+ import Typeahead from '../../pb_typeahead/_typeahead'
5
+ import Title from '../../pb_title/_title'
6
+
7
+ const RadioChildren = (props) => {
8
+
9
+
10
+ const options = [
11
+ { label: 'Orange', value: 'Orange' },
12
+ { label: 'Red', value: 'Red' },
13
+ { label: 'Green', value: 'Green' },
14
+ { label: 'Blue', value: 'Blue' },
15
+ ]
16
+
17
+ return (
18
+ <div>
19
+ <Radio
20
+ customChildren
21
+ label="Select"
22
+ marginBottom="sm"
23
+ name="Group1"
24
+ tabIndex={0}
25
+ value="Select"
26
+ {...props}
27
+ >
28
+ <Select
29
+ marginBottom="none"
30
+ minWidth="xs"
31
+ options={options}
32
+ />
33
+ </Radio>
34
+ <Radio
35
+ customChildren
36
+ label="Typeahead"
37
+ marginBottom="sm"
38
+ name="Group1"
39
+ tabIndex={0}
40
+ value="Typeahead"
41
+ {...props}
42
+ >
43
+ <Typeahead
44
+ marginBottom="none"
45
+ minWidth="xs"
46
+ options={options}
47
+ />
48
+ </Radio>
49
+ <Radio
50
+ customChildren
51
+ defaultChecked={false}
52
+ label="Typography"
53
+ name="Group1"
54
+ value="Typography"
55
+ {...props}
56
+ >
57
+ <Title text="Custom Typography" />
58
+ </Radio>
59
+ </div>
60
+ )
61
+ }
62
+ export default RadioChildren
@@ -15,6 +15,7 @@ examples:
15
15
  - radio_error: With Error
16
16
  - radio_alignment: Alignment
17
17
  - radio_disabled: Disabled
18
+ - radio_custom_children: Custom Children
18
19
 
19
20
  swift:
20
21
  - radio_default_swift: Default
@@ -3,3 +3,4 @@ export { default as RadioCustom } from './_radio_custom.jsx'
3
3
  export { default as RadioError } from './_radio_error.jsx'
4
4
  export { default as RadioAlignment } from './_radio_alignment.jsx'
5
5
  export { default as RadioDisabled } from './_radio_disabled.jsx'
6
+ export { default as RadioCustomChildren } from './_radio_custom_children.jsx'
@@ -1,5 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
+ import { getAllIcons } from "../../utilities/icons/allicons"
4
+
3
5
  import Flex from '../../pb_flex/_flex'
4
6
  import PbReactPopover from '../../pb_popover/_popover'
5
7
  import Button from '../../pb_button/_button'
@@ -65,6 +67,7 @@ const toolbarDropdownItems = [
65
67
  },
66
68
  ]
67
69
 
70
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
68
71
 
69
72
  const handleTogglePopover = () => {
70
73
  setShowPopover(!showPopover)
@@ -92,8 +95,10 @@ for (const { text, isActive, icon } of toolbarDropdownItems) {
92
95
  <Flex className={showPopover ? "fa-flip-vertical" : ""}
93
96
  display="inline_flex"
94
97
  >
95
- <Icon fixedWidth
96
- icon="angle-down"
98
+ <Icon
99
+ className="svg-inline--fa"
100
+ customIcon={angleDown}
101
+ fixedWidth
97
102
  margin-left="xs"
98
103
  />
99
104
  </Flex>
@@ -125,8 +130,10 @@ const popoverReference = (
125
130
  <Flex className={showPopover ? "fa-flip-vertical" : ""}
126
131
  display="inline_flex"
127
132
  >
128
- <Icon fixedWidth
129
- icon="angle-down"
133
+ <Icon
134
+ className="svg-inline--fa"
135
+ customIcon={angleDown}
136
+ fixedWidth
130
137
  margin-left="xs"
131
138
  />
132
139
  </Flex>
@@ -169,4 +176,4 @@ const popoverReference = (
169
176
  )
170
177
  }
171
178
 
172
- export default ToolbarDropdown
179
+ export default ToolbarDropdown
@@ -4,6 +4,7 @@ import classnames from 'classnames'
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import { globalProps, GlobalProps, domSafeProps } from '../utilities/globalProps'
6
6
  import type { InputCallback } from '../types'
7
+ import { getAllIcons } from "../utilities/icons/allicons"
7
8
 
8
9
  import Body from '../pb_body/_body'
9
10
  import Caption from '../pb_caption/_caption'
@@ -90,6 +91,8 @@ const Select = ({
90
91
  compactClass
91
92
  );
92
93
 
94
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
95
+
93
96
  const selectWrapperClass = classnames(buildCss('pb_select_kit_wrapper'), { error }, className)
94
97
  const selectBody =(() =>{
95
98
  if (children) return children
@@ -134,9 +137,9 @@ const Select = ({
134
137
  {selectBody}
135
138
  { multiple !== true ?
136
139
  <Icon
137
- className="pb_select_kit_caret"
140
+ className="pb_select_kit_caret svg-inline--fa"
141
+ customIcon={angleDown}
138
142
  fixedWidth
139
- icon="angle-down"
140
143
  />
141
144
  :
142
145
  null
@@ -26,7 +26,7 @@
26
26
  <%= pb_rails("body", props: { status: "negative", text: object.error }) %>
27
27
  <% end %>
28
28
  <% if object.multiple != true %>
29
- <%= pb_rails("icon", props: { icon: "angle-down", fixed_width: true, classname: "pb_select_kit_caret"}) %>
29
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(angle_down_path), fixed_width: true, classname: "pb_select_kit_caret"}) %>
30
30
  <% end %>
31
31
  </label>
32
32
  <% end %>
@@ -84,6 +84,10 @@ module Playbook
84
84
  end
85
85
  end
86
86
 
87
+ def angle_down_path
88
+ "app/pb_kits/playbook/utilities/icons/angle-down.svg"
89
+ end
90
+
87
91
  private
88
92
 
89
93
  def error_class
@@ -45,7 +45,6 @@
45
45
  }
46
46
  }
47
47
  .text_input_wrapper {
48
- margin-bottom: 1rem;
49
48
  input::placeholder,
50
49
  .text_input .placeholder {
51
50
  @include pb_body_light_dark;
@@ -1,14 +1,14 @@
1
1
  import React, { useRef, useState, forwardRef, ForwardedRef } from "react"
2
2
 
3
3
  import {
4
- arrow,
5
- flip,
6
- offset,
7
- Placement,
8
- safePolygon,
4
+ arrow,
5
+ flip,
6
+ offset,
7
+ Placement,
8
+ safePolygon,
9
9
  shift,
10
- useFloating,
11
- useHover,
10
+ useFloating,
11
+ useHover,
12
12
  useInteractions,
13
13
  } from "@floating-ui/react"
14
14
 
@@ -16,6 +16,8 @@ import classnames from "classnames"
16
16
  import { GlobalProps, globalProps } from "../utilities/globalProps"
17
17
  import { buildAriaProps, buildDataProps, buildHtmlProps } from "../utilities/props"
18
18
  import Flex from "../pb_flex/_flex"
19
+ import { getAllIcons } from "../utilities/icons/allicons"
20
+ import Icon from '../pb_icon/_icon'
19
21
 
20
22
  type TooltipProps = {
21
23
  aria?: { [key: string]: string },
@@ -53,7 +55,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
53
55
  const dataProps: { [key: string]: string } = buildDataProps(data)
54
56
  const ariaProps: { [key: string]: string } = buildAriaProps(aria)
55
57
  const htmlProps = buildHtmlProps(htmlOptions)
56
-
58
+
57
59
  const css = classnames(
58
60
  globalProps({...rest}),
59
61
  className,
@@ -61,7 +63,6 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
61
63
  const [open, setOpen] = useState(false)
62
64
  const arrowRef = useRef(null)
63
65
 
64
-
65
66
  const {
66
67
  context,
67
68
  middlewareData: { arrow: { x: arrowX, y: arrowY } = {}, },
@@ -95,7 +96,7 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
95
96
  placement: preferredPlacement
96
97
  })
97
98
 
98
-
99
+
99
100
  const { getFloatingProps } = useInteractions([
100
101
  useHover(context, {
101
102
  delay,
@@ -148,13 +149,16 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
148
149
  },
149
150
  })}
150
151
  >
151
- <Flex
152
+ <Flex
152
153
  align="center"
153
154
  gap="xs"
154
155
  >
155
156
  {icon && (
156
- <i className={`pb_icon_kit far fa-${icon} fa-fw`} />
157
- )}
157
+ <i className={`pb_icon_kit`}>
158
+ <Icon
159
+ icon={icon}
160
+ />
161
+ </i>)}
158
162
  {text}
159
163
  </Flex>
160
164
  <div
@@ -68,7 +68,6 @@
68
68
  opacity: 0;
69
69
  }
70
70
  [class^=pb_list_kit] {
71
- margin-top: -$space-sm;
72
71
  li {
73
72
  transition: background-color .25s ease-in-out;
74
73
  }
@@ -109,6 +109,20 @@ test('should pass className prop', () => {
109
109
  expect(kit).toHaveClass(className)
110
110
  })
111
111
 
112
+ test('typeahead textinput has mb_sm class by default', () => {
113
+ render(
114
+ <Typeahead
115
+ data={{ testid: 'default-mb-test' }}
116
+ options={options}
117
+ />
118
+ )
119
+
120
+ const kit = screen.getByTestId('default-mb-test')
121
+ expect(kit).toHaveClass("pb_typeahead_kit mb_sm")
122
+ const textInput = kit.querySelector(".pb_text_input_kit")
123
+ expect(textInput).toHaveClass("mb_none")
124
+ })
125
+
112
126
  test('typeahead with colored pills', () => {
113
127
  render(
114
128
  <Typeahead
@@ -45,6 +45,7 @@ type TypeaheadProps = {
45
45
  getOptionLabel?: string | (() => any),
46
46
  getOptionValue?: string | (() => any),
47
47
  name?: string,
48
+ marginBottom?: "none" | "xxs" | "xs" | "sm" | "md" | "lg" | "xl",
48
49
  pillColor?: "primary" | "neutral" | "success" | "warning" | "error" | "info" | "data_1" | "data_2" | "data_3" | "data_4" | "data_5" | "data_6" | "data_7" | "data_8" | "windows" | "siding" | "roofing" | "doors" | "gutters" | "solar" | "insulation" | "accessories",
49
50
  } & GlobalProps
50
51
 
@@ -78,6 +79,7 @@ const Typeahead = ({
78
79
  htmlOptions = {},
79
80
  id,
80
81
  loadOptions = noop,
82
+ marginBottom = "sm",
81
83
  pillColor,
82
84
  ...props
83
85
  }: TypeaheadProps) => {
@@ -138,6 +140,7 @@ const Typeahead = ({
138
140
  const htmlProps = buildHtmlProps(htmlOptions)
139
141
  const classes = classnames(
140
142
  'pb_typeahead_kit react-select',
143
+ `mb_${marginBottom}`,
141
144
  globalProps(props),
142
145
  className
143
146
  )
@@ -11,14 +11,15 @@ type Props = {
11
11
  const TypeaheadControl = (props: Props) => (
12
12
  <div className="pb_typeahead_wrapper">
13
13
  <TextInput
14
- dark={props.selectProps.dark}
15
- error={props.selectProps.error}
16
- label={props.selectProps.label}
14
+ dark={props.selectProps.dark}
15
+ error={props.selectProps.error}
16
+ label={props.selectProps.label}
17
+ marginBottom="none"
17
18
  >
18
19
  <Flex>
19
20
  <components.Control
20
- className="text_input"
21
- {...props}
21
+ className="text_input"
22
+ {...props}
22
23
  />
23
24
  </Flex>
24
25
  </TextInput>
@@ -0,0 +1,88 @@
1
+ <%
2
+ options = [
3
+ { label: 'Orange', value: '#FFA500' },
4
+ { label: 'Red', value: '#FF0000' },
5
+ { label: 'Green', value: '#00FF00' },
6
+ { label: 'Blue', value: '#0000FF' },
7
+ ]
8
+ %>
9
+
10
+ <%= pb_rails("typeahead", props: {
11
+ id: "typeahead-default",
12
+ placeholder: "All Colors",
13
+ options: options,
14
+ label: "None",
15
+ name: :foo,
16
+ is_multi: false,
17
+ margin_bottom: "none",
18
+ })
19
+ %>
20
+ <%= pb_rails("typeahead", props: {
21
+ id: "typeahead-default",
22
+ placeholder: "All Colors",
23
+ options: options,
24
+ label: "XXS",
25
+ name: :foo,
26
+ is_multi: false,
27
+ margin_bottom: "xxs",
28
+ })
29
+ %>
30
+ <%= pb_rails("typeahead", props: {
31
+ id: "typeahead-default",
32
+ placeholder: "All Colors",
33
+ options: options,
34
+ label: "XS",
35
+ name: :foo,
36
+ is_multi: false,
37
+ margin_bottom: "xs",
38
+ })
39
+ %>
40
+ <%= pb_rails("typeahead", props: {
41
+ id: "typeahead-default",
42
+ placeholder: "All Colors",
43
+ options: options,
44
+ label: "Default - SM",
45
+ name: :foo,
46
+ is_multi: false,
47
+ })
48
+ %>
49
+ <%= pb_rails("typeahead", props: {
50
+ id: "typeahead-default",
51
+ placeholder: "All Colors",
52
+ options: options,
53
+ label: "MD",
54
+ name: :foo,
55
+ is_multi: false,
56
+ margin_bottom: "md",
57
+ })
58
+ %>
59
+ <%= pb_rails("typeahead", props: {
60
+ id: "typeahead-default",
61
+ placeholder: "All Colors",
62
+ options: options,
63
+ label: "LG",
64
+ name: :foo,
65
+ is_multi: false,
66
+ margin_bottom: "lg",
67
+ })
68
+ %>
69
+ <%= pb_rails("typeahead", props: {
70
+ id: "typeahead-default",
71
+ placeholder: "All Colors",
72
+ options: options,
73
+ label: "XL",
74
+ name: :foo,
75
+ is_multi: false,
76
+ margin_bottom: "xl",
77
+ })
78
+ %>
79
+
80
+ <%= javascript_tag defer: "defer" do %>
81
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-option-select", function(event) {
82
+ console.log('Single Option selected')
83
+ console.dir(event.detail)
84
+ })
85
+ document.addEventListener("pb-typeahead-kit-typeahead-default-result-clear", function() {
86
+ console.log('All options cleared')
87
+ })
88
+ <% end %>
@@ -0,0 +1,60 @@
1
+ import React from 'react'
2
+
3
+ import Typeahead from '../_typeahead'
4
+
5
+ const options = [
6
+ { label: 'Orange', value: '#FFA500' },
7
+ { label: 'Red', value: '#FF0000' },
8
+ { label: 'Green', value: '#00FF00' },
9
+ { label: 'Blue', value: '#0000FF' },
10
+ ]
11
+
12
+ const TypeaheadMarginBottom = (props) => {
13
+ return (
14
+ <>
15
+ <Typeahead
16
+ label="None"
17
+ marginBottom="none"
18
+ options={options}
19
+ {...props}
20
+ />
21
+ <Typeahead
22
+ label="XXS"
23
+ marginBottom="xxs"
24
+ options={options}
25
+ {...props}
26
+ />
27
+ <Typeahead
28
+ label="XS"
29
+ marginBottom="xs"
30
+ options={options}
31
+ {...props}
32
+ />
33
+ <Typeahead
34
+ label="Default - SM"
35
+ options={options}
36
+ {...props}
37
+ />
38
+ <Typeahead
39
+ label="MD"
40
+ marginBottom="md"
41
+ options={options}
42
+ {...props}
43
+ />
44
+ <Typeahead
45
+ label="LG"
46
+ marginBottom="lg"
47
+ options={options}
48
+ {...props}
49
+ />
50
+ <Typeahead
51
+ label="XL"
52
+ marginBottom="xl"
53
+ options={options}
54
+ {...props}
55
+ />
56
+ </>
57
+ )
58
+ }
59
+
60
+ export default TypeaheadMarginBottom