playbook_ui 13.15.0.pre.alpha.play1141iconkitusinglibrary1956 → 13.15.0.pre.alpha.play10841940

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (63) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +33 -40
  3. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +4 -4
  4. data/app/pb_kits/playbook/pb_fixed_confirmation_toast/_fixed_confirmation_toast.tsx +30 -44
  5. data/app/pb_kits/playbook/pb_flex/_flex.tsx +4 -4
  6. data/app/pb_kits/playbook/pb_form_group/_form_group.tsx +2 -3
  7. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +4 -7
  8. data/app/pb_kits/playbook/pb_gauge/_gauge.tsx +10 -10
  9. data/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +9 -10
  10. data/app/pb_kits/playbook/pb_icon/_icon.tsx +5 -21
  11. data/app/pb_kits/playbook/pb_icon_stat_value/_icon_stat_value.tsx +2 -3
  12. data/app/pb_kits/playbook/pb_icon_value/_icon_value.tsx +2 -3
  13. data/app/pb_kits/playbook/pb_label_value/_label_value.tsx +1 -1
  14. data/app/pb_kits/playbook/pb_layout/_layout.tsx +2 -1
  15. data/app/pb_kits/playbook/pb_layout/layout.test.js +8 -4
  16. data/app/pb_kits/playbook/pb_legend/_legend.tsx +6 -6
  17. data/app/pb_kits/playbook/pb_lightbox/Carousel/Slides.tsx +4 -4
  18. data/app/pb_kits/playbook/pb_lightbox/Carousel/Thumbnail.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_lightbox/Carousel/index.tsx +3 -3
  20. data/app/pb_kits/playbook/pb_lightbox/Header/_lightbox_header.tsx +30 -22
  21. data/app/pb_kits/playbook/pb_lightbox/_lightbox.tsx +5 -5
  22. data/app/pb_kits/playbook/pb_line_graph/_line_graph.tsx +4 -4
  23. data/app/pb_kits/playbook/pb_list/_list.tsx +15 -15
  24. data/app/pb_kits/playbook/pb_list/_list_item.tsx +1 -1
  25. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +9 -9
  26. data/app/pb_kits/playbook/pb_map/_map.tsx +8 -8
  27. data/app/pb_kits/playbook/pb_map/_map_controls.tsx +15 -7
  28. data/app/pb_kits/playbook/pb_map/_map_custom_button.tsx +4 -2
  29. data/app/pb_kits/playbook/pb_message/_message.tsx +1 -1
  30. data/app/pb_kits/playbook/pb_message/_message_mention.tsx +6 -6
  31. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +46 -42
  32. data/app/pb_kits/playbook/pb_multiple_users_stacked/_multiple_users_stacked.tsx +20 -20
  33. data/app/pb_kits/playbook/pb_nav/_item.tsx +56 -47
  34. data/app/pb_kits/playbook/pb_nav/_nav.tsx +15 -15
  35. data/app/pb_kits/playbook/pb_passphrase/_passphrase.tsx +50 -51
  36. data/app/pb_kits/playbook/pb_person_contact/_person_contact.tsx +19 -20
  37. data/app/pb_kits/playbook/pb_phone_number_input/_phone_number_input.tsx +3 -4
  38. data/app/pb_kits/playbook/pb_popover/_popover.tsx +4 -6
  39. data/app/pb_kits/playbook/pb_progress_pills/_progress_pills.tsx +20 -20
  40. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +4 -4
  41. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +17 -19
  42. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorTypes.ts +1 -1
  43. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +21 -23
  44. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/Toolbar.tsx +10 -18
  45. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +23 -46
  46. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarHistory.tsx +8 -8
  47. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarNodes.tsx +7 -7
  48. data/app/pb_kits/playbook/pb_rich_text_editor/_rich_text_editor.tsx +15 -17
  49. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +7 -9
  50. data/app/pb_kits/playbook/pb_select/_select.scss +4 -13
  51. data/app/pb_kits/playbook/pb_select/_select.tsx +4 -7
  52. data/app/pb_kits/playbook/pb_select/docs/example.yml +0 -2
  53. data/app/pb_kits/playbook/pb_select/docs/index.js +0 -1
  54. data/app/pb_kits/playbook/pb_select/select.rb +1 -6
  55. data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx +24 -25
  56. data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx +26 -27
  57. data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx +1 -2
  58. data/app/pb_kits/playbook/pb_source/_source.tsx +15 -15
  59. data/dist/playbook-rails.js +4 -4
  60. data/lib/playbook/version.rb +1 -1
  61. metadata +2 -4
  62. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.html.erb +0 -24
  63. data/app/pb_kits/playbook/pb_select/docs/_select_inline_show_arrow.jsx +0 -38
data/app/pb_kits/playbook/pb_selectable_card_icon/_selectable_card_icon.tsx CHANGED
@@ -33,7 +33,7 @@ type SelectableCardIconProps = {
33
33
  onChange?: (event: React.FormEvent<HTMLInputElement>) => void,
34
34
  }
35
35
 
36
- const SelectableCardIcon = (props: SelectableCardIconProps): React.ReactElement => {
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
- {...ariaProps}
74
- {...dataProps}
75
- {...htmlProps}
76
- className={classes}
73
+ {...ariaProps}
74
+ {...dataProps}
75
+ {...htmlProps}
76
+ className={classes}
77
77
  >
78
78
  <SelectableCard
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}
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
- customIcon={customIcon}
94
- icon={icon}
95
- inputId={''}
96
- inputs="disabled"
97
- name={''}
98
- text={titleText}
99
- />
93
+ customIcon={customIcon}
94
+ icon={icon}
95
+ inputId={''}
96
+ inputs="disabled"
97
+ name={''}
98
+ text={titleText} />
100
99
  <Body
101
- color="light"
102
- dark={dark}
103
- text={bodyText}
100
+ color="light"
101
+ dark={dark}
102
+ text={bodyText}
104
103
  />
105
104
  </>
106
105
  }
data/app/pb_kits/playbook/pb_selectable_icon/_selectable_icon.tsx CHANGED
@@ -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?: GenericObject,
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): React.ReactElement => {
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
- {...ariaProps}
69
- {...dataProps}
70
- {...htmlProps}
71
- className={classes}
67
+ {...ariaProps}
68
+ {...dataProps}
69
+ {...htmlProps}
70
+ className={classes}
72
71
  >
73
72
  {inputs === 'disabled' && (
74
73
  <>
75
74
  <Icon
76
- customIcon={customIcon}
77
- icon={icon}
78
- size="2x"
75
+ customIcon={customIcon}
76
+ icon={icon}
77
+ size="2x"
79
78
  />
80
79
  <Title
81
- size={4}
82
- tag="h4"
83
- text={text}
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
- {...props}
92
- checked={checked}
93
- disabled={disabled}
94
- id={inputIdPresent}
95
- name={name}
96
- type={inputType}
97
- value={value}
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
- customIcon={customIcon}
102
- icon={icon}
103
- size="2x"
100
+ customIcon={customIcon}
101
+ icon={icon}
102
+ size="2x"
104
103
  />
105
104
  <Title
106
- size={4}
107
- tag="h4"
108
- text={text}
105
+ size={4}
106
+ tag="h4"
107
+ text={text}
109
108
  />
110
109
  </label>
111
110
  </>
data/app/pb_kits/playbook/pb_selectable_list/_selectable_list.tsx CHANGED
@@ -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?: GenericObject,
15
+ data?: object,
17
16
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
18
17
  id?: string,
19
18
  variant?: 'checkbox' | 'radio',
data/app/pb_kits/playbook/pb_source/_source.tsx CHANGED
@@ -32,7 +32,7 @@ const Source = ({
32
32
  source,
33
33
  type = 'inbound',
34
34
  user = {},
35
- }: SourceProps): React.ReactElement => {
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
- {...ariaProps}
76
- {...dataProps}
77
- {...htmlProps}
78
- className={css}
79
- id={id}
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
- icon={typeIconNames[type]}
88
- size="sm"
87
+ icon={typeIconNames[type]}
88
+ size="sm"
89
89
  />
90
90
  }
91
91
  {!showIcon() &&
92
92
  <Avatar
93
- {...avatar()}
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
- size={4}
102
- tag="h4"
103
- text={source}
101
+ size={4}
102
+ tag="h4"
103
+ text={source}
104
104
  />
105
105
 
106
106
  <div className="pb__source_value">
107
107
  <Body
108
- color="light"
109
- text={typeText()}
108
+ color="light"
109
+ text={typeText()}
110
110
  />
111
111
 
112
112
  {user.userId &&
113
113
  <Caption
114
- text={user.userId}
114
+ text={user.userId}
115
115
  />
116
116
  }
117
117
  </div>