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.
Files changed (96) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_bar_graph/docs/_bar_graph_custom.md +0 -4
  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 +7 -12
  5. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +0 -4
  6. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -3
  7. data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +4 -3
  8. data/app/pb_kits/playbook/pb_dropdown/dropdown.rb +0 -11
  9. data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.rb +1 -1
  10. data/app/pb_kits/playbook/pb_dropdown/index.js +17 -75
  11. data/app/pb_kits/playbook/pb_form_pill/_form_pill.scss +5 -108
  12. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +2 -11
  13. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.html.erb +1 -5
  14. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_example.jsx +0 -1
  15. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.html.erb +0 -2
  16. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_size.jsx +0 -2
  17. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.html.erb +1 -4
  18. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_tag.jsx +2 -3
  19. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.html.erb +0 -2
  20. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_user.jsx +0 -2
  21. data/app/pb_kits/playbook/pb_form_pill/form_pill.html.erb +1 -1
  22. data/app/pb_kits/playbook/pb_form_pill/form_pill.rb +1 -5
  23. data/app/pb_kits/playbook/pb_icon/_icon.scss +27 -210
  24. data/app/pb_kits/playbook/pb_icon/_icon.tsx +44 -100
  25. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb +7 -0
  26. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx +46 -0
  27. data/app/pb_kits/playbook/pb_icon/docs/_icon_color.md +1 -0
  28. data/app/pb_kits/playbook/pb_icon/docs/example.yml +2 -0
  29. data/app/pb_kits/playbook/pb_icon/docs/index.js +1 -0
  30. data/app/pb_kits/playbook/pb_icon/icon.rb +28 -34
  31. data/app/pb_kits/playbook/pb_icon/icon_aliases.json +39 -0
  32. data/app/pb_kits/playbook/pb_nav/_nav_item.test.js +2 -2
  33. data/app/pb_kits/playbook/pb_nav/docs/example.yml +0 -1
  34. data/app/pb_kits/playbook/pb_nav/nav.rb +0 -9
  35. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +1 -1
  36. data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/ToolbarDropdown.tsx +1 -1
  37. data/app/pb_kits/playbook/pb_star_rating/_star_rating.scss +2 -11
  38. data/app/pb_kits/playbook/pb_star_rating/docs/example.yml +1 -1
  39. data/app/pb_kits/playbook/pb_star_rating/star_rating.html.erb +5 -25
  40. data/app/pb_kits/playbook/pb_star_rating/star_rating.rb +0 -6
  41. data/app/pb_kits/playbook/pb_table/_table.tsx +1 -1
  42. data/app/pb_kits/playbook/pb_table/index.ts +4 -4
  43. data/app/pb_kits/playbook/pb_table/subcomponents/_table_body.tsx +1 -1
  44. data/app/pb_kits/playbook/pb_table/subcomponents/_table_cell.tsx +1 -1
  45. data/app/pb_kits/playbook/pb_table/subcomponents/_table_head.tsx +1 -1
  46. data/app/pb_kits/playbook/pb_table/subcomponents/_table_header.tsx +1 -1
  47. data/app/pb_kits/playbook/pb_table/subcomponents/_table_row.tsx +1 -1
  48. data/app/pb_kits/playbook/pb_table/table.test.js +0 -2
  49. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +1 -1
  50. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_default.jsx +1 -1
  51. data/app/pb_kits/playbook/pb_textarea/_textarea.tsx +27 -45
  52. data/app/pb_kits/playbook/pb_textarea/index.tsx +3 -3
  53. data/app/pb_kits/playbook/pb_time/_time.tsx +3 -3
  54. data/app/pb_kits/playbook/pb_time_range_inline/_time_range_inline.tsx +1 -1
  55. data/app/pb_kits/playbook/pb_timeline/_item.tsx +1 -1
  56. data/app/pb_kits/playbook/pb_timeline/_timeline.tsx +1 -1
  57. data/app/pb_kits/playbook/pb_title_detail/_title_detail.tsx +10 -10
  58. data/app/pb_kits/playbook/pb_toggle/_toggle.tsx +1 -1
  59. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +2 -2
  60. data/app/pb_kits/playbook/pb_treemap_chart/_treemap_chart.tsx +2 -1
  61. data/app/pb_kits/playbook/pb_treemap_chart/treemapChart.test.js +0 -2
  62. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +3 -3
  63. data/app/pb_kits/playbook/pb_typeahead/components/ClearIndicator.tsx +4 -4
  64. data/app/pb_kits/playbook/pb_typeahead/components/Control.tsx +7 -11
  65. data/app/pb_kits/playbook/pb_typeahead/components/IndicatorsContainer.tsx +3 -8
  66. data/app/pb_kits/playbook/pb_typeahead/components/MenuList.tsx +1 -6
  67. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +19 -18
  68. data/app/pb_kits/playbook/pb_typeahead/components/Option.tsx +6 -6
  69. data/app/pb_kits/playbook/pb_typeahead/components/Placeholder.tsx +6 -6
  70. data/app/pb_kits/playbook/pb_typeahead/components/ValueContainer.tsx +3 -3
  71. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_custom_menu_list.jsx +0 -2
  72. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_default.html.erb +57 -22
  73. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_with_pills_async.jsx +2 -2
  74. data/app/pb_kits/playbook/pb_typeahead/index.ts +31 -31
  75. data/app/pb_kits/playbook/pb_user/_user.tsx +1 -1
  76. data/app/pb_kits/playbook/pb_user_badge/_user_badge.tsx +6 -6
  77. data/app/pb_kits/playbook/pb_user_badge/badges/million-dollar.tsx +235 -236
  78. data/app/pb_kits/playbook/pb_user_badge/badges/veteran.tsx +1 -1
  79. data/app/pb_kits/playbook/pb_walkthrough/_walkthrough.tsx +63 -68
  80. data/app/pb_kits/playbook/pb_weekday_stacked/_weekday_stacked.tsx +2 -2
  81. data/app/pb_kits/playbook/playbook-rails.js +0 -6
  82. data/dist/playbook-rails.js +7 -7
  83. data/lib/playbook/forms/builder.rb +0 -1
  84. data/lib/playbook/version.rb +1 -1
  85. metadata +6 -13
  86. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.html.erb +0 -10
  87. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_blank_selection.jsx +0 -31
  88. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.html.erb +0 -10
  89. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default_value.jsx +0 -31
  90. data/app/pb_kits/playbook/pb_form_pill/_form_pill.test.jsx +0 -53
  91. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.html.erb +0 -48
  92. data/app/pb_kits/playbook/pb_nav/docs/_tab_nav.md +0 -3
  93. data/app/pb_kits/playbook/pb_nav/index.js +0 -43
  94. data/app/pb_kits/playbook/pb_star_rating/docs/_star_rating_interactive.html.erb +0 -1
  95. data/app/pb_kits/playbook/pb_star_rating/index.js +0 -50
  96. data/lib/playbook/forms/builder/star_rating_field.rb +0 -14
@@ -0,0 +1,39 @@
1
+ {
2
+ "aliases": {
3
+ "arrow-alt-circle-right": "circle-right",
4
+ "angles-down": "angle-double-down",
5
+ "arrow-alt-down": "down",
6
+ "arrow-alt-up": "up",
7
+ "arrow-right-long": "long-arrow-right",
8
+ "arrow-to-bottom": "arrow-down-to-line",
9
+ "arrows-h": "arrows-left-right",
10
+ "calendar-days": "calendar-alt",
11
+ "circle-arrow-right": "arrow-circle-right",
12
+ "clock-rotate-left": "history",
13
+ "close": [
14
+ "times",
15
+ "xmark"
16
+ ],
17
+ "ellipsis-h": "ellipsis",
18
+ "exclamation-circle": "circle-exclamation",
19
+ "external-link": "arrow-up-right-from-square",
20
+ "file-lines": "file-alt",
21
+ "gear": "cog",
22
+ "home": "house",
23
+ "info-circle": "circle-info",
24
+ "map-o": "map",
25
+ "message": "comment-alt",
26
+ "minus-circle": "circle-minus",
27
+ "money": "money-bill",
28
+ "mouse-pointer": "arrow-pointer",
29
+ "nitro": "nitro-n",
30
+ "play-circle": "circle-play",
31
+ "plus-circle": "circle-plus",
32
+ "plus-square": "square-plus",
33
+ "powergon": "powergon-p",
34
+ "question-circle": "circle-question",
35
+ "roofing": "product-roofing",
36
+ "shelves": "inventory",
37
+ "th-list": "table-list"
38
+ }
39
+ }
@@ -95,11 +95,11 @@ test('should not have a left border', () => {
95
95
  test('should have a right icon', () => {
96
96
  render(<NavDefault iconRight="angle-down" />)
97
97
  const kit = screen.getByTestId(itemTestId)
98
- expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_right fa-fw fa-angle-down" />')
98
+ expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-angle-down pb_nav_list_item_icon_right" />')
99
99
  })
100
100
 
101
101
  test('should have a left icon', () => {
102
102
  render(<NavDefault iconLeft="users-class" />)
103
103
  const kit = screen.getByTestId(itemTestId)
104
- expect(kit).toContainHTML('<i class="pb_icon_kit far pb_nav_list_item_icon_left fa-fw fa-users-class" />')
104
+ expect(kit).toContainHTML('<i class="pb_icon_kit far fa-fw fa-users-class pb_nav_list_item_icon_left" />')
105
105
  })
@@ -19,7 +19,6 @@ examples:
19
19
  - block_nav: Block
20
20
  - block_no_title_nav: Without Title
21
21
  - new_tab: Open in a New Tab
22
- - tab_nav: Tab Nav
23
22
 
24
23
  react:
25
24
  - default_nav: Default
@@ -13,20 +13,11 @@ module Playbook
13
13
  default: "normal"
14
14
  prop :highlight, type: Playbook::Props::Boolean, default: true
15
15
  prop :borderless, type: Playbook::Props::Boolean, default: false
16
- prop :tabbing, type: Playbook::Props::Boolean, default: false
17
16
 
18
17
  def classname
19
18
  generate_classname("pb_nav_list", variant, orientation, highlight_class, borderless_class)
20
19
  end
21
20
 
22
- def data
23
- if tabbing
24
- Hash(prop(:data)).merge(pb_nav_tab: true)
25
- else
26
- prop(:data)
27
- end
28
- end
29
-
30
21
  def highlight_class
31
22
  highlight ? "highlight" : nil
32
23
  end
@@ -10,7 +10,7 @@ const MoreExtensionsDropdown = ({extensions}: any) => {
10
10
  const [showPopover, setShowPopover] = useState(false)
11
11
 
12
12
  const handleTogglePopover = () => {
13
- setShowPopover(!showPopover)
13
+ setShowPopover(true)
14
14
  }
15
15
 
16
16
  const handlePopoverClose = (shouldClosePopover: boolean) => {
@@ -67,7 +67,7 @@ const toolbarDropdownItems = [
67
67
 
68
68
 
69
69
  const handleTogglePopover = () => {
70
- setShowPopover(!showPopover)
70
+ setShowPopover(true)
71
71
  }
72
72
 
73
73
  const handlePopoverClose = (shouldClosePopover: boolean) => {
@@ -48,8 +48,8 @@
48
48
 
49
49
 
50
50
  $star-styles: (
51
- yellow_star: (color: $yellow),
52
- primary_star: (color: $royal),
51
+ yellow_star: (color: #F9BB00),
52
+ primary_star: (color: #0056CF),
53
53
  suble_star_light: (color: $text_lt_default),
54
54
  suble_star_dark: (color: $text_dk_default),
55
55
  empty_star_dark: (color: $border_dark),
@@ -111,13 +111,4 @@
111
111
  }
112
112
  }
113
113
  }
114
- .yellow-star-selected {
115
- color: $yellow;
116
- }
117
- .primary-star-selected {
118
- color: $royal
119
- }
120
- .suble-star-selected {
121
- color: $text_lt_default;
122
- }
123
114
  }
@@ -13,4 +13,4 @@ examples:
13
13
  - star_rating_background_options: Background Options
14
14
  - star_rating_hide: Layout Options
15
15
  - star_rating_number_config: Number Config
16
- - star_rating_size_options: Size Options
16
+ - star_rating_size_options: Size Options
@@ -28,33 +28,13 @@
28
28
  <% end %>
29
29
  <% end %>
30
30
  <%= pb_rails("flex", props: { }) do %>
31
-
32
- <% if object.variant == "display" %>
33
-
34
- <% object.star_count.times do %>
35
- <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
36
- <% end %>
37
- <% object.empty_stars.times do %>
38
- <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
39
- <% end %>
40
-
41
- <% else %>
42
- <%= pb_rails("flex", props: { orientation: "column" }) do %>
43
- <% if object.label.present? %>
44
- <%= pb_rails("caption", props: {text: object.label, margin_bottom:"xs"}) %>
45
- <% end %>
46
- <input type="hidden" id="star-rating-input" value="" name="<%= object.name %>"/>
47
- <%= pb_rails("flex", props: { orientation: "row" }) do %>
48
- <% object.denominator.times do |index| %>
49
- <div data-pb-star-rating id="<%= index + 1 %>" class="<%= star_color %>">
50
- <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size} interactive-star-icon", custom_icon: Playbook::Engine.root.join(background_star_path)} ) %>
51
- </div>
52
- <% end %>
53
- <% end %>
54
- <% end %>
31
+ <% object.star_count.times do %>
32
+ <%= pb_rails("icon", props: { classname: "#{star_color} pb_star_#{size}" , custom_icon: Playbook::Engine.root.join(star_svg_path) } ) %>
33
+ <% end %>
34
+ <% object.empty_stars.times do %>
35
+ <%= pb_rails("icon", props: { classname: "#{background_star_color} pb_star_#{size}", custom_icon: Playbook::Engine.root.join(background_star_path) } ) %>
55
36
  <% end %>
56
37
  <% end %>
57
-
58
38
  <% if layout_option == "onestar" %>
59
39
  <%= content_tag(:div, class: "pb_star_rating_number_#{size}") do %>
60
40
  <% case object.size %>
@@ -25,12 +25,6 @@ module Playbook
25
25
  values: %w[fill outline],
26
26
  default: "fill"
27
27
 
28
- prop :variant, type: Playbook::Props::Enum,
29
- values: %w[display interactive],
30
- default: "display"
31
- prop :label, type: Playbook::Props::String
32
- prop :name, type: Playbook::Props::String
33
-
34
28
  def one_decimal_rating
35
29
  rating.to_f.round(1)
36
30
  end
@@ -33,7 +33,7 @@ type TableProps = {
33
33
  verticalBorder?: boolean,
34
34
  } & GlobalProps
35
35
 
36
- const Table = (props: TableProps): React.ReactElement => {
36
+ const Table = (props: TableProps) => {
37
37
  const {
38
38
  aria = {},
39
39
  children,
@@ -1,19 +1,19 @@
1
1
  import PbEnhancedElement from '../pb_enhanced_element'
2
2
 
3
3
  export default class PbTable extends PbEnhancedElement {
4
- static get selector(): string {
4
+ static get selector() {
5
5
  return '.table-responsive-collapse'
6
6
  }
7
7
 
8
- connect(): void {
8
+ connect() {
9
9
  const tables = document.querySelectorAll('.table-responsive-collapse');
10
10
 
11
11
  // Each Table
12
12
  [].forEach.call(tables, (table: HTMLTableElement) => {
13
13
  // Header Titles
14
- const headers: string[] = [];
14
+ let headers: string[] = [];
15
15
  [].forEach.call(table.querySelectorAll('th'), (header: HTMLTableCellElement) => {
16
- const colSpan = header.colSpan
16
+ let colSpan = header.colSpan
17
17
  for (let i = 0; i < colSpan; i++) {
18
18
  headers.push(header.textContent.replace(/\r?\n|\r/, ''));
19
19
  }
@@ -17,7 +17,7 @@ type TableBodyPropTypes = {
17
17
  tag?: "table" | "div";
18
18
  };
19
19
 
20
- const TableBody = (props: TableBodyPropTypes): React.ReactElement => {
20
+ const TableBody = (props: TableBodyPropTypes) => {
21
21
  const {
22
22
  aria = {},
23
23
  children,
@@ -18,7 +18,7 @@ type TableCellPropTypes = {
18
18
  text?: string
19
19
  };
20
20
 
21
- const TableCell = (props: TableCellPropTypes): React.ReactElement => {
21
+ const TableCell = (props: TableCellPropTypes) => {
22
22
  const {
23
23
  aria = {},
24
24
  children,
@@ -17,7 +17,7 @@ type TableHeadPropTypes = {
17
17
  tag?: "table" | "div";
18
18
  };
19
19
 
20
- const TableHead = (props: TableHeadPropTypes): React.ReactElement => {
20
+ const TableHead = (props: TableHeadPropTypes) => {
21
21
  const {
22
22
  aria = {},
23
23
  children,
@@ -18,7 +18,7 @@ type TableHeaderPropTypes = {
18
18
  text?: string;
19
19
  };
20
20
 
21
- const TableHeader = (props: TableHeaderPropTypes): React.ReactElement => {
21
+ const TableHeader = (props: TableHeaderPropTypes) => {
22
22
  const {
23
23
  aria = {},
24
24
  children,
@@ -19,7 +19,7 @@ type TableRowPropTypes = {
19
19
  tag?: "table" | "div";
20
20
  };
21
21
 
22
- const TableRow = (props: TableRowPropTypes): React.ReactElement => {
22
+ const TableRow = (props: TableRowPropTypes) => {
23
23
  const {
24
24
  aria = {},
25
25
  children,
@@ -1,5 +1,3 @@
1
- /* eslint-disable react/no-multi-comp */
2
-
3
1
  import React from "react";
4
2
  import { ensureAccessible, renderKit, render, screen } from "../utilities/test-utils"
5
3
 
@@ -107,7 +107,7 @@ const TextInput = (props: TextInputProps, ref: React.LegacyRef<HTMLInputElement>
107
107
  required={required}
108
108
  type={type}
109
109
  value={value}
110
- />)
110
+ />)
111
111
  )
112
112
 
113
113
  const addOnInput = (
@@ -5,12 +5,12 @@ import TextInput from '../../pb_text_input/_text_input'
5
5
  import Title from '../../pb_title/_title'
6
6
 
7
7
  const TextInputDefault = (props) => {
8
- const [firstName, setFirstName] = useState('')
9
8
  const handleOnChangeFirstName = ({ target }) => {
10
9
  setFirstName(target.value)
11
10
  }
12
11
  const ref = React.createRef()
13
12
 
13
+ const [firstName, setFirstName] = useState('')
14
14
  const [formFields, setFormFields] = useState({
15
15
  firstName: 'Jane',
16
16
  lastName: 'Doe',
@@ -52,15 +52,14 @@ const Textarea = ({
52
52
  label,
53
53
  maxCharacters,
54
54
  name,
55
- // eslint-disable-next-line @typescript-eslint/no-empty-function
56
55
  onChange = () => {},
57
56
  placeholder,
58
57
  required,
59
58
  rows = 4,
60
59
  value,
61
60
  ...props
62
- }: TextareaProps) => {
63
- const ref = useRef<HTMLTextAreaElement>(null)
61
+ }: TextareaProps, ref: any) => {
62
+ ref = useRef<HTMLTextAreaElement>(null)
64
63
  useEffect(() => {
65
64
  if (ref.current && resize === 'auto') {
66
65
  PbTextarea.addMatch(ref.current)
@@ -72,75 +71,58 @@ const Textarea = ({
72
71
  const resizeClass = `resize_${resize}`
73
72
  const classes = classnames('pb_textarea_kit', errorClass, inlineClass, resizeClass, globalProps(props), className)
74
73
  const noCount = typeof characterCount !== 'undefined'
75
- const ariaProps: {[key: string]: string} = buildAriaProps(aria)
76
- const dataProps: {[key: string]: string} = buildDataProps(data)
74
+ const ariaProps: {[key: string]: any} = buildAriaProps(aria)
75
+ const dataProps: {[key: string]: any} = buildDataProps(data)
77
76
  const htmlProps = buildHtmlProps(htmlOptions)
78
- const checkIfZero = (characterCount: string | number) => {
79
- return characterCount == 0 ? characterCount.toString() : characterCount
80
- }
81
77
  const characterCounter = () => {
82
78
  return maxCharacters && characterCount ? `${checkIfZero(characterCount)} / ${maxCharacters}` : `${checkIfZero(characterCount)}`
83
79
  }
84
80
 
81
+ const checkIfZero = (characterCount: string | number) => {
82
+ return characterCount == 0 ? characterCount.toString() : characterCount
83
+ }
84
+
85
85
  return (
86
86
  <div
87
- {...ariaProps}
88
- {...dataProps}
89
- {...htmlProps}
90
- className={classes}
87
+ {...ariaProps}
88
+ {...dataProps}
89
+ {...htmlProps}
90
+ className={classes}
91
91
  >
92
92
  <Caption text={label} />
93
93
  {children || (
94
94
  <textarea
95
- className="pb_textarea_kit"
96
- disabled={disabled}
97
- name={name}
98
- onChange={onChange}
99
- placeholder={placeholder}
100
- ref={ref}
101
- required={required}
102
- rows={rows}
103
- value={value}
104
- {...props}
95
+ className="pb_textarea_kit"
96
+ disabled={disabled}
97
+ name={name}
98
+ onChange={onChange}
99
+ placeholder={placeholder}
100
+ ref={ref}
101
+ required={required}
102
+ rows={rows}
103
+ value={value}
104
+ {...props}
105
105
  />
106
106
  )}
107
107
 
108
108
  {error ? (
109
109
  <>
110
110
  {characterCount ? (
111
- <Flex
112
- spacing="between"
113
- vertical="center"
114
- >
111
+ <Flex spacing="between" vertical="center">
115
112
  <FlexItem>
116
- <Body
117
- margin="none"
118
- status="negative"
119
- text={error}
120
- />
113
+ <Body margin="none" status="negative" text={error} />
121
114
  </FlexItem>
122
115
  <FlexItem>
123
- <Caption
124
- margin="none"
125
- size="xs"
126
- text={characterCounter()}
127
- />
116
+ <Caption margin="none" size="xs" text={characterCounter()} />
128
117
  </FlexItem>
129
118
  </Flex>
130
119
  ) : (
131
- <Body
132
- status="negative"
133
- text={error}
134
- />
120
+ <Body status="negative" text={error} />
135
121
  )}
136
122
  </>
137
123
  ) : (
138
124
  noCount && (
139
- <Caption
140
- margin="none"
141
- size="xs"
142
- text={characterCounter()}
143
- />
125
+ <Caption margin="none" size="xs" text={characterCounter()} />
144
126
  )
145
127
  )}
146
128
  </div>
@@ -3,16 +3,16 @@ import PbEnhancedElement from '../pb_enhanced_element'
3
3
  export default class PbTextarea extends PbEnhancedElement {
4
4
  style: {[key: string]: string}
5
5
  scrollHeight: string
6
- static get selector(): string {
6
+ static get selector() {
7
7
  return '.resize_auto textarea'
8
8
  }
9
9
 
10
- onInput(): void {
10
+ onInput() {
11
11
  this.style.height = 'auto'
12
12
  this.style.height = (this.scrollHeight) + 'px'
13
13
  }
14
14
 
15
- connect(): void {
15
+ connect() {
16
16
  this.element.setAttribute('style', 'height:' + (this.element.scrollHeight) + 'px;overflow-y:hidden;')
17
17
  this.element.addEventListener('input', this.onInput, false)
18
18
  }
@@ -24,7 +24,7 @@ type TimeProps = {
24
24
  unstyled?: boolean;
25
25
  } & GlobalProps
26
26
 
27
- const Time = (props: TimeProps): React.ReactElement => {
27
+ const Time = (props: TimeProps) => {
28
28
  const {
29
29
  align,
30
30
  className,
@@ -47,8 +47,8 @@ const Time = (props: TimeProps): React.ReactElement => {
47
47
 
48
48
  return (
49
49
  <div
50
- {...htmlProps}
51
- className={classes}
50
+ {...htmlProps}
51
+ className={classes}
52
52
  >
53
53
  {showIcon && (
54
54
  unstyled
@@ -36,7 +36,7 @@ const dateTimeIso = (dateValue: Date) => {
36
36
  return DateTime.toIso(dateValue)
37
37
  }
38
38
 
39
- const TimeRangeInline = (props: TimeRangeInlineProps): React.ReactElement => {
39
+ const TimeRangeInline = (props: TimeRangeInlineProps) => {
40
40
  const {
41
41
  aria = {},
42
42
  className,
@@ -26,7 +26,7 @@ const TimelineItem = ({
26
26
  iconColor = 'default',
27
27
  lineStyle = 'solid',
28
28
  ...props
29
- }: ItemProps): React.ReactElement => {
29
+ }: ItemProps) => {
30
30
  const timelineItemCss = buildCss('pb_timeline_item_kit', lineStyle)
31
31
 
32
32
  const htmlProps = buildHtmlProps(htmlOptions)
@@ -27,7 +27,7 @@ const Timeline = ({
27
27
  orientation = 'horizontal',
28
28
  showDate = false,
29
29
  ...props
30
- }: TimelineProps): React.ReactElement => {
30
+ }: TimelineProps) => {
31
31
  const ariaProps = buildAriaProps(aria)
32
32
  const dataProps = buildDataProps(data)
33
33
  const htmlProps = buildHtmlProps(htmlOptions)
@@ -18,7 +18,7 @@ type TitleDetailProps = {
18
18
  title: string,
19
19
  } & GlobalProps
20
20
 
21
- const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
21
+ const TitleDetail = (props: TitleDetailProps) => {
22
22
  const {
23
23
  align = "left",
24
24
  aria = {},
@@ -37,19 +37,19 @@ const TitleDetail = (props: TitleDetailProps): React.ReactElement => {
37
37
 
38
38
  return (
39
39
  <div
40
- {...ariaProps}
41
- {...dataProps}
42
- {...htmlProps}
43
- className={classnames(pbCss, globalProps(props), className)}
44
- id={id}
40
+ {...ariaProps}
41
+ {...dataProps}
42
+ {...htmlProps}
43
+ className={classnames(pbCss, globalProps(props), className)}
44
+ id={id}
45
45
  >
46
46
  <Title
47
- size={4}
48
- text={title}
47
+ size={4}
48
+ text={title}
49
49
  />
50
50
  <Body
51
- color="light"
52
- text={detail}
51
+ color="light"
52
+ text={detail}
53
53
  />
54
54
  </div>
55
55
  )
@@ -42,7 +42,7 @@ const Toggle = ({
42
42
  size = 'sm',
43
43
  value,
44
44
  ...props
45
- }: Props): React.ReactElement => {
45
+ }: Props) => {
46
46
  const ariaProps = buildAriaProps(aria)
47
47
  const dataProps = buildDataProps(data)
48
48
  const htmlProps = buildHtmlProps(htmlOptions)
@@ -50,8 +50,8 @@ const Tooltip = forwardRef((props: TooltipProps, ref: ForwardedRef<unknown>): Re
50
50
  ...rest
51
51
  } = props
52
52
 
53
- const dataProps: { [key: string]: string } = buildDataProps(data)
54
- const ariaProps: { [key: string]: string } = buildAriaProps(aria)
53
+ const dataProps: { [key: string]: any } = buildDataProps(data)
54
+ const ariaProps: { [key: string]: any } = buildAriaProps(aria)
55
55
  const htmlProps = buildHtmlProps(htmlOptions)
56
56
 
57
57
  const css = classnames(
@@ -52,7 +52,7 @@ const TreemapChart = ({
52
52
  tooltipHtml = '<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.value}</b>',
53
53
  type = "treemap",
54
54
  ...props
55
- }: TreemapChartProps): React.ReactElement => {
55
+ }: TreemapChartProps) => {
56
56
 
57
57
  const ariaProps = buildAriaProps(aria)
58
58
  const dataProps = buildDataProps(data)
@@ -98,6 +98,7 @@ const TreemapChart = ({
98
98
  const [options, setOptions] = useState({});
99
99
 
100
100
  useEffect(() => {
101
+
101
102
  setOptions(merge(staticOptions, customOptions));
102
103
  }, [chartData]);
103
104
 
@@ -1,5 +1,3 @@
1
- /* eslint-disable no-console */
2
-
3
1
  import React from 'react';
4
2
  import { render, screen } from '../utilities/test-utils';
5
3
  import TreemapChart from './_treemap_chart';
@@ -42,8 +42,8 @@ type TypeaheadProps = {
42
42
  id?: string,
43
43
  label?: string,
44
44
  loadOptions?: string | Noop,
45
- getOptionLabel?: string | (() => string),
46
- getOptionValue?: string | (() => string),
45
+ getOptionLabel?: string | (() => any),
46
+ getOptionValue?: string | (() => any),
47
47
  name?: string,
48
48
  }
49
49
 
@@ -77,7 +77,7 @@ const Typeahead = ({
77
77
  id,
78
78
  loadOptions = noop,
79
79
  ...props
80
- }: TypeaheadProps): React.ReactElement => {
80
+ }: TypeaheadProps) => {
81
81
  const selectProps = {
82
82
  cacheOptions: true,
83
83
  components: {
@@ -1,16 +1,16 @@
1
1
  import React, { useEffect } from 'react'
2
2
  import { components } from 'react-select'
3
3
 
4
- const ClearContainer = (props: any): React.ReactElement => {
4
+ const ClearContainer = (props: any) => {
5
5
  const { selectProps, clearValue } = props
6
6
  useEffect(() => {
7
7
  document.addEventListener(`pb-typeahead-kit-${selectProps.id}:clear`, clearValue)
8
- }, [])
8
+ }, [true])
9
9
 
10
10
  return (
11
11
  <components.ClearIndicator
12
- className="clear_indicator"
13
- {...props}
12
+ className="clear_indicator"
13
+ {...props}
14
14
  />
15
15
  )
16
16
  }