playbook_ui 14.4.0.pre.alpha.PBNTR490multilevelselect3832 → 14.4.0.pre.alpha.PBNTR534filtermaxwidth3903

Sign up to get free protection for your applications and to get access to all the features.
Files changed (56) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/Components/SortIconButton.tsx +23 -4
  3. data/app/pb_kits/playbook/pb_contact/_contact.tsx +17 -5
  4. data/app/pb_kits/playbook/pb_contact/contact.html.erb +14 -6
  5. data/app/pb_kits/playbook/pb_contact/contact.rb +4 -0
  6. data/app/pb_kits/playbook/pb_contact/contact.test.js +1 -1
  7. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -3
  8. data/app/pb_kits/playbook/pb_date_picker/date_picker.html.erb +1 -1
  9. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +4 -0
  10. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +6 -3
  11. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_inline.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_date_picker/sass_partials/_header_styles.scss +6 -2
  13. data/app/pb_kits/playbook/pb_dialog/_dialog.scss +2 -0
  14. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +1 -1
  15. data/app/pb_kits/playbook/pb_filter/filter.html.erb +1 -1
  16. data/app/pb_kits/playbook/pb_filter/filter.rb +1 -0
  17. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +7 -1
  18. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change.jsx +12 -1
  19. data/app/pb_kits/playbook/pb_pagination/docs/_pagination_page_change_react.md +3 -1
  20. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +10 -2
  21. data/app/pb_kits/playbook/pb_radio/_radio.tsx +92 -33
  22. data/app/pb_kits/playbook/pb_radio/docs/_radio_custom_children.jsx +59 -0
  23. data/app/pb_kits/playbook/pb_radio/docs/example.yml +1 -0
  24. data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
  25. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +12 -5
  26. data/app/pb_kits/playbook/pb_select/_select.tsx +5 -2
  27. data/app/pb_kits/playbook/pb_select/select.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_select/select.rb +4 -0
  29. data/app/pb_kits/playbook/pb_text_input/_text_input.scss +0 -1
  30. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -1
  31. data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +14 -0
  32. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -0
  33. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +6 -5
  34. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.html.erb +88 -0
  35. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_margin_bottom.jsx +60 -0
  36. data/app/pb_kits/playbook/pb_typeahead/docs/example.yml +2 -0
  37. data/app/pb_kits/playbook/pb_typeahead/docs/index.js +1 -0
  38. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -1
  39. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +6 -1
  40. data/app/pb_kits/playbook/utilities/icons/allicons.tsx +123 -0
  41. data/app/pb_kits/playbook/utilities/icons/angle-down.svg +3 -0
  42. data/app/pb_kits/playbook/utilities/icons/envelope.svg +3 -0
  43. data/dist/chunks/_typeahead-C7ICra83.js +22 -0
  44. data/dist/chunks/_weekday_stacked-DwrIhNbf.js +45 -0
  45. data/dist/chunks/lib-CEpcaI8y.js +29 -0
  46. data/dist/chunks/{pb_form_validation-zV9OpdSt.js → pb_form_validation-D9zkwt2b.js} +1 -1
  47. data/dist/chunks/vendor.js +1 -1
  48. data/dist/playbook-doc.js +1 -1
  49. data/dist/playbook-rails-react-bindings.js +1 -1
  50. data/dist/playbook-rails.js +1 -1
  51. data/dist/playbook.css +1 -1
  52. data/lib/playbook/version.rb +1 -1
  53. metadata +11 -6
  54. data/dist/chunks/_typeahead-BErpxkBz.js +0 -22
  55. data/dist/chunks/_weekday_stacked-CGwn8Bd7.js +0 -45
  56. data/dist/chunks/lib-D2U4I1U6.js +0 -16
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: f63133f4211356171c4c337c6b6f88ccd124ece3c656cc910f6992c02d4b8307
4
- data.tar.gz: 46024fefb2d3bec396aa702f3e869c57cc68a0afcaa065519b795b0f850953fd
3
+ metadata.gz: d19b0edff349ceaf5715d4d3312adfa00bea94690997444a35de043e1ffa4098
4
+ data.tar.gz: 381e6e97dc1c9b9ddac851087629c0521400a73237ae530cca4de84e1e49f319
5
5
  SHA512:
6
- metadata.gz: 67a1506b06a726ef4fad99dd67f5f8d846744d2baf483888b8603895921b3141ebecd9c6a21c4d14c855f145a6fbe9ce730cf68beb9895a86dd4770ef173d9c9
7
- data.tar.gz: 3bf8db9e45660e3a7101584ee3f2f7dc9ea37d62c9cad61254300c52f80cb9172dc35d7cab3da1da50ced33488bbeed7f40ce45275f75f92c617769c7a52ac39
6
+ metadata.gz: bf448459473c583fa91ab9903a5ae4740b6ec926b5a1263c1285790fbd2bab360a7957627ff127230aa2b3570e268a56bce0dd5f86b88f0ff01d55249b2feec9
7
+ data.tar.gz: dda0adae3948fa7113716a0c70fd8a27e4bb880958f6d48d2ff7107767d4d01f6facccfdd2a018c1f63ffffce52670c6dd4c953f37569354e324a554be8d2bf8
@@ -4,6 +4,7 @@ import { Header } from "@tanstack/react-table"
4
4
  import { GenericObject } from "../../types"
5
5
 
6
6
  import Icon from "../../pb_icon/_icon"
7
+ import { getAllIcons } from "../../utilities/icons/allicons"
7
8
 
8
9
  import { displayIcon } from "../Utilities/IconHelpers"
9
10
 
@@ -11,21 +12,39 @@ type SortIconButtonProps = {
11
12
  header: Header<GenericObject, unknown>
12
13
  sortIcon?: string | string[]
13
14
  }
15
+
14
16
  export const SortIconButton = ({ header, sortIcon }: SortIconButtonProps) => {
15
17
 
18
+ const firstIcon = displayIcon(sortIcon)[0]
19
+ const secondIcon = displayIcon(sortIcon)[1]
20
+ const upIcon = getAllIcons()["arrowUpShortWide"].icon as unknown as { [key: string]: SVGElement }
21
+ const downIcon = getAllIcons()["arrowDownShortWide"].icon as unknown as { [key: string]: SVGElement }
22
+
16
23
  return (
17
24
  <>
18
25
  {header.column.getIsSorted() === "desc" ? (
19
26
  <div className="sort-button-icon"
20
- key={displayIcon(sortIcon)[0]}
27
+ key={firstIcon}
21
28
  >
22
- <Icon icon={displayIcon(sortIcon)[0]} />
29
+ { firstIcon === "arrow-up-short-wide" ? (
30
+ <Icon
31
+ className="svg-inline--fa"
32
+ customIcon={upIcon}
33
+ /> ) : (
34
+ <Icon icon={firstIcon} />
35
+ )}
23
36
  </div>
24
37
  ) : (
25
38
  <div className="sort-button-icon"
26
- key={displayIcon(sortIcon)[1]}
39
+ key={secondIcon}
27
40
  >
28
- <Icon icon={displayIcon(sortIcon)[1]} />
41
+ { secondIcon === "arrow-down-short-wide" ? (
42
+ <Icon
43
+ className="svg-inline--fa"
44
+ customIcon={downIcon}
45
+ /> ) : (
46
+ <Icon icon={secondIcon} />
47
+ )}
29
48
  </div>
30
49
  )}
31
50
  </>
@@ -7,6 +7,7 @@ import { globalProps } from '../utilities/globalProps'
7
7
  import Body from '../pb_body/_body'
8
8
  import Caption from '../pb_caption/_caption'
9
9
  import Icon from '../pb_icon/_icon'
10
+ import { getAllIcons } from "../utilities/icons/allicons"
10
11
 
11
12
  const contactTypeMap: { [key: string]: string } = {
12
13
  'cell': 'mobile',
@@ -18,6 +19,8 @@ const contactTypeMap: { [key: string]: string } = {
18
19
  'wrong-phone': 'phone-slash',
19
20
  }
20
21
 
22
+ const envelopeIcon = getAllIcons()["envelope"].icon as unknown as { [key: string]: SVGElement }
23
+
21
24
  const formatContact = (contactString: string, contactType: string) => {
22
25
  if (contactType === 'email') return contactString
23
26
 
@@ -91,11 +94,20 @@ const Contact = (props: ContactProps): React.ReactElement => {
91
94
  dark={dark}
92
95
  tag="span"
93
96
  >
94
- <Icon
95
- dark={dark}
96
- fixedWidth
97
- icon={contactTypeMap[contactType] || 'phone'}
98
- />
97
+ {contactType === 'email' ? (
98
+ <Icon
99
+ className="svg-inline--fa envelope"
100
+ customIcon={envelopeIcon}
101
+ dark={dark}
102
+ fixedWidth
103
+ />
104
+ ) : (
105
+ <Icon
106
+ dark={dark}
107
+ fixedWidth
108
+ icon={contactTypeMap[contactType] || 'phone'}
109
+ />
110
+ )}
99
111
  {` ${formatContact(contactValue, contactType)} `}
100
112
  {contactDetail && (
101
113
  <Caption
@@ -4,12 +4,20 @@
4
4
  classname: "pb_contact_kit",
5
5
  color: "light",
6
6
  dark: object.dark
7
- }) do %>
8
- <%= pb_rails("icon", props: {
9
- icon: object.contact_icon,
10
- fixed_width: true,
11
- dark: object.dark
12
- }) %>
7
+ }) do %>
8
+ <% if contact_type == "email" %>
9
+ <%= pb_rails("icon", props: {
10
+ custom_icon: Playbook::Engine::root.join(envelope_path),
11
+ fixed_width: true,
12
+ dark: object.dark
13
+ }) %>
14
+ <% else %>
15
+ <%= pb_rails("icon", props: {
16
+ icon: object.contact_icon,
17
+ fixed_width: true,
18
+ dark: object.dark
19
+ }) %>
20
+ <% end %>
13
21
  <%= object.formatted_contact_value if object.contact_value %>
14
22
 
15
23
  <%= pb_rails("caption", props: {
@@ -44,6 +44,10 @@ module Playbook
44
44
  end
45
45
  end
46
46
 
47
+ def envelope_path
48
+ "app/pb_kits/playbook/utilities/icons/envelope.svg"
49
+ end
50
+
47
51
  private
48
52
 
49
53
  def formatted_value
@@ -79,7 +79,7 @@ test('returns correct icon', () => {
79
79
  expect(screen.getByTestId('test-home').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
80
80
  expect(screen.getByTestId('test-work').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-office')
81
81
  expect(screen.getByTestId('test-work-cell').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-laptop')
82
- expect(screen.getByTestId('test-email').querySelector('.pb_icon_kit')).toHaveClass('fa-envelope')
82
+ expect(screen.getByTestId('test-email').querySelector('.pb_custom_icon')).toHaveClass('envelope')
83
83
  expect(screen.getByTestId('test-wrong-phone').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-slash')
84
84
  expect(screen.getByTestId('test-wrong-type').querySelector('.pb_icon_kit')).toHaveClass('fa-phone')
85
85
  expect(screen.getByTestId('test-extension').querySelector('.pb_icon_kit')).toHaveClass('fa-phone-plus')
@@ -3,6 +3,7 @@ import classnames from 'classnames'
3
3
 
4
4
  import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
5
5
  import { deprecatedProps, globalProps, GlobalProps } from '../utilities/globalProps'
6
+ import { getAllIcons } from "../utilities/icons/allicons"
6
7
 
7
8
  import datePickerHelper from './date_picker_helper'
8
9
  import Icon from '../pb_icon/_icon'
@@ -161,7 +162,7 @@ useEffect(() => {
161
162
  }
162
163
  return base
163
164
  }
164
-
165
+ const angleDown = getAllIcons()["angleDown"].icon as unknown as { [key: string]: SVGElement }
165
166
 
166
167
  return (
167
168
  <div
@@ -231,8 +232,8 @@ useEffect(() => {
231
232
  id={`${pickerId}-angle-down`}
232
233
  >
233
234
  <Icon
234
- className="angle_down_icon"
235
- icon="angle-down"
235
+ className="angle_down_icon svg-inline--fa"
236
+ customIcon={angleDown}
236
237
  />
237
238
  </div>
238
239
  </div>
@@ -61,7 +61,7 @@
61
61
  >
62
62
  <%= pb_rails("icon", props: {
63
63
  classname: "angle_down_icon",
64
- icon: "angle-down"
64
+ custom_icon: Playbook::Engine::root.join(angle_down_path)
65
65
  }) %>
66
66
  </div>
67
67
  <% end %>
@@ -118,6 +118,10 @@ module Playbook
118
118
  class_string += error_class
119
119
  class_string
120
120
  end
121
+
122
+ def angle_down_path
123
+ "app/pb_kits/playbook/utilities/icons/angle-down.svg"
124
+ end
121
125
  end
122
126
  end
123
127
  end
@@ -5,6 +5,9 @@ import monthSelectPlugin from 'flatpickr/dist/plugins/monthSelect'
5
5
  import weekSelect from "flatpickr/dist/plugins/weekSelect/weekSelect"
6
6
  import timeSelectPlugin from './plugins/timeSelect'
7
7
  import quickPickPlugin from './plugins/quickPick'
8
+ import { getAllIcons } from '../utilities/icons/allicons';
9
+
10
+ const angleDown = getAllIcons().angleDown.string
8
11
 
9
12
  const getPositionElement = (element: string | Element) => {
10
13
  return (typeof element === 'string') ? document.querySelectorAll(element)[0] : element
@@ -256,10 +259,10 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
256
259
  })
257
260
  }
258
261
 
259
- // Adding dropdown icons to year and month selects
260
- dropdown.insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
262
+ // Adding dropdown icons to year and month select
263
+ dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
261
264
  if (picker.monthElements[0].parentElement) {
262
- return picker.monthElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down month-dropdown-icon"></i>')}
265
+ return picker.monthElements[0].insertAdjacentHTML('afterend', `<i class="month-dropdown-icon">${angleDown}</i>`)}
263
266
  // if (picker.weekElements[0].parentElement){
264
267
  // return picker.weekElements[0].insertAdjacentHTML('afterend', '<i class="far fa-angle-down year-dropdown-icon" id="test-id"></i>')
265
268
  // }
@@ -14,4 +14,4 @@
14
14
  }
15
15
  fpInline.config.onChange.push(showAngleDownHandler)
16
16
  })
17
- <% end %>
17
+ <% end %>
@@ -76,7 +76,11 @@
76
76
  pointer-events: none;
77
77
  color: $text_lt_light;
78
78
  }
79
-
79
+ .year-dropdown-icon svg, .month-dropdown-icon svg {
80
+ width: 16px;
81
+ margin-top: 6px;
82
+ margin-left: -2px;
83
+ }
80
84
  // Left - Right Arrow Styling
81
85
  .flatpickr-prev-month {
82
86
  display: flex;
@@ -113,4 +117,4 @@
113
117
  }
114
118
  }
115
119
  }
116
- }
120
+ }
@@ -187,6 +187,8 @@
187
187
 
188
188
  &_close_icon {
189
189
  cursor: pointer;
190
+ font-size: $font_base;
191
+ line-height: $lh_normal;
190
192
  }
191
193
 
192
194
  &_overlay {
@@ -2,7 +2,7 @@
2
2
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
3
3
  <%= content.presence || object.title %>
4
4
 
5
- <button class="dialog-button-class" type="button" data-close-dialog= <%= object.id %> >
5
+ <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
6
6
  <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
7
7
  </button>
8
8
  <% end %>
@@ -71,7 +71,7 @@
71
71
  <% end %>
72
72
 
73
73
  <% if object.template != "sort_only"%>
74
- <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
74
+ <%= pb_rails("popover", props: {max_height: object.max_height, min_width: object.min_width, max_width: object.max_width, close_on_click: "outside", trigger_element_id: "filter#{object.id}", tooltip_id: "filter-form#{object.id}", position: object.placement }) do %>
75
75
  <%= content %>
76
76
  <% end %>
77
77
  <%end%>
@@ -12,6 +12,7 @@ module Playbook
12
12
  prop :background, type: Playbook::Props::Boolean, default: true
13
13
  prop :max_height
14
14
  prop :min_width, default: "auto"
15
+ prop :max_width
15
16
  prop :placement, type: Playbook::Props::Enum,
16
17
  values: %w[top bottom left right top-start top-end bottom-start bottom-end right-start right-end left-start left-end],
17
18
  default: "bottom-start"
@@ -2,6 +2,7 @@ import React from "react";
2
2
  import Button from "../pb_button/_button";
3
3
  import Icon from "../pb_icon/_icon";
4
4
  import Flex from "../pb_flex/_flex";
5
+ import { getAllIcons } from "../utilities/icons/allicons"
5
6
 
6
7
  type MapControlTypes = {
7
8
  zoomBtns?: boolean,
@@ -12,6 +13,8 @@ type MapControlTypes = {
12
13
  children?: React.ReactNode | React.ReactNode[]
13
14
  }
14
15
 
16
+ const eyeIcon = getAllIcons()["eye"]
17
+
15
18
  const MapControls = ({
16
19
  zoomBtns,
17
20
  zoomInClick,
@@ -42,7 +45,10 @@ const MapControls = ({
42
45
  <Button className="map-flyto-button"
43
46
  onClick={flyToClick}
44
47
  >
45
- <Icon icon="eye" />
48
+ <Icon
49
+ className="svg-inline--fa"
50
+ customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
51
+ />
46
52
  </Button>
47
53
  ) : null}
48
54
  </>
@@ -22,6 +22,16 @@ const PaginationPageChange = (props) => {
22
22
 
23
23
  return (
24
24
  <div className="App">
25
+ <Pagination
26
+ current={activePage}
27
+ key={`pagination-top-${activePage}`}
28
+ marginBottom="xs"
29
+ onChange={onPageChange}
30
+ range={5}
31
+ total={totalPages}
32
+ {...props}
33
+ />
34
+
25
35
  <Table
26
36
  marginBottom="xs"
27
37
  responsive="none"
@@ -49,7 +59,8 @@ const PaginationPageChange = (props) => {
49
59
  </Table>
50
60
 
51
61
  <Pagination
52
- current={1}
62
+ current={activePage}
63
+ key={`pagination-bottom-${activePage}`}
53
64
  onChange={onPageChange}
54
65
  range={5}
55
66
  total={totalPages}
@@ -1 +1,3 @@
1
- You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
1
+ You can use the `onChange` prop to control the data of your table. This prop is callback function that will allow you control the state.
2
+
3
+ To ensure synchronization between multiple pagination components on a single page, use unique, dynamic keys for each pagination instance. Each Pagination component should have its own dynamic key that reflects the current active page: this example uses `pagination-top-${activePage}` and `pagination-bottom-${activePage}`.
@@ -12,6 +12,7 @@ import Icon from '../pb_icon/_icon'
12
12
  import PbReactPopover from '../pb_popover/_popover'
13
13
  import TextInput from '../pb_text_input/_text_input'
14
14
  import { GenericObject } from "../types"
15
+ import { getAllIcons } from "../utilities/icons/allicons"
15
16
 
16
17
  type PassphraseProps = {
17
18
  aria?: { [key: string]: string },
@@ -96,6 +97,9 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
96
97
  />
97
98
  )
98
99
 
100
+ const shieldIcon = getAllIcons()["shieldCheck"]
101
+ const eyeIcon = getAllIcons()["eye"]
102
+
99
103
  return (
100
104
  <div
101
105
  {...ariaProps}
@@ -135,7 +139,8 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
135
139
  size="xs"
136
140
  >
137
141
  <Icon
138
- icon="shield-check"
142
+ className="svg-inline--fa"
143
+ customIcon={shieldIcon.icon as unknown as { [key: string]: SVGElement }}
139
144
  marginRight="xs"
140
145
  />
141
146
  {tip}
@@ -173,7 +178,10 @@ const Passphrase = (props: PassphraseProps): React.ReactElement => {
173
178
  color="light"
174
179
  dark={dark}
175
180
  >
176
- <Icon icon="eye" />
181
+ <Icon
182
+ className="svg-inline--fa"
183
+ customIcon={eyeIcon.icon as unknown as { [key: string]: SVGElement }}
184
+ />
177
185
  </Body>
178
186
  </span>
179
187
  </div>
@@ -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);
@@ -0,0 +1,59 @@
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
+ name="Group1"
23
+ tabIndex={0}
24
+ value="Select"
25
+ {...props}
26
+ >
27
+ <Select
28
+ minWidth="xs"
29
+ options={options}
30
+ />
31
+ </Radio>
32
+ <Radio
33
+ customChildren
34
+ label="Typeahead"
35
+ name="Group1"
36
+ tabIndex={0}
37
+ value="Typeahead"
38
+ {...props}
39
+ >
40
+ <Typeahead
41
+ minWidth="xs"
42
+ options={options}
43
+ />
44
+ </Radio>
45
+ <br />
46
+ <Radio
47
+ customChildren
48
+ defaultChecked={false}
49
+ label="Typography"
50
+ name="Group1"
51
+ value="Typography"
52
+ {...props}
53
+ >
54
+ <Title text="Custom Typography" />
55
+ </Radio>
56
+ </div>
57
+ )
58
+ }
59
+ 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'