playbook_ui 14.18.0 → 14.19.0.pre.rc.0

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 (57) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_circle_chart/_circle_chart.tsx +1 -1
  3. data/app/pb_kits/playbook/pb_circle_chart/circleChart.test.js +2 -2
  4. data/app/pb_kits/playbook/pb_circle_chart/circleChartTheme.ts +53 -0
  5. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.html.erb +2 -2
  6. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_block.jsx +1 -1
  7. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.html.erb +1 -1
  8. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_colors.jsx +1 -1
  9. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.html.erb +1 -1
  10. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_custom_tooltip.jsx +1 -1
  11. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.html.erb +1 -1
  12. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_default.jsx +1 -1
  13. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.html.erb +1 -1
  14. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_legend_position.jsx +1 -1
  15. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_live_data.jsx +2 -2
  16. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.jsx +38 -0
  17. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_pb_styles.md +1 -0
  18. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.html.erb +1 -1
  19. data/app/pb_kits/playbook/pb_circle_chart/docs/_circle_chart_rounded.jsx +1 -1
  20. data/app/pb_kits/playbook/pb_circle_chart/docs/example.yml +2 -3
  21. data/app/pb_kits/playbook/pb_circle_chart/docs/index.js +2 -1
  22. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +12 -0
  23. data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +12 -0
  24. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +50 -1
  25. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_error.jsx +4 -1
  26. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_rails.md +4 -0
  27. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  28. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_react.md +5 -1
  29. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.jsx +34 -0
  30. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern.md +14 -0
  31. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.html.erb +20 -0
  32. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_range_pattern_rails.md +14 -0
  33. data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -0
  34. data/app/pb_kits/playbook/pb_date_picker/docs/index.js +1 -0
  35. data/app/pb_kits/playbook/pb_date_picker/plugins/quickPick.tsx +10 -0
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_error.jsx +4 -1
  37. data/app/pb_kits/playbook/pb_gauge/docs/_gauge_pb_styles.jsx +0 -1
  38. data/app/pb_kits/playbook/pb_gauge/gaugeTheme.ts +3 -1
  39. data/app/pb_kits/playbook/pb_phone_number_input/docs/_phone_number_input_validation.jsx +8 -1
  40. data/app/pb_kits/playbook/pb_select/docs/_select_error.jsx +7 -2
  41. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_error.jsx +9 -1
  42. data/app/pb_kits/playbook/pb_textarea/docs/_textarea_error.jsx +7 -1
  43. data/app/pb_kits/playbook/pb_typeahead/docs/_typeahead_error_state.jsx +6 -2
  44. data/dist/chunks/{_typeahead-C_FX7o_S.js → _typeahead-BX8IifKY.js} +2 -2
  45. data/dist/chunks/_weekday_stacked-DfMD7HJz.js +45 -0
  46. data/dist/chunks/lazysizes-B7xYodB-.js +1 -0
  47. data/dist/chunks/lib-96_ZmvAo.js +29 -0
  48. data/dist/chunks/{pb_form_validation-BRjyJrKh.js → pb_form_validation-Vv2TqXVC.js} +1 -1
  49. data/dist/chunks/vendor.js +1 -1
  50. data/dist/playbook-doc.js +2 -2
  51. data/dist/playbook-rails-react-bindings.js +1 -1
  52. data/dist/playbook-rails.js +1 -1
  53. data/lib/playbook/version.rb +2 -2
  54. metadata +14 -7
  55. data/dist/chunks/_weekday_stacked-B4RLTeDo.js +0 -45
  56. data/dist/chunks/lazysizes-DHz07jlL.js +0 -1
  57. data/dist/chunks/lib-ySl8uEpT.js +0 -29
@@ -3,6 +3,7 @@ import React, { useEffect, useState } from "react";
3
3
  import Button from '../../pb_button/_button'
4
4
  import FixedConfirmationToast from '../../pb_fixed_confirmation_toast/_fixed_confirmation_toast'
5
5
  import PhoneNumberInput from '../../pb_phone_number_input/_phone_number_input'
6
+ import Icon from '../../pb_icon/_icon'
6
7
 
7
8
  const PhoneNumberInputValidation = (props) => {
8
9
  const [formErrors, setFormErrors] = useState("");
@@ -29,6 +30,12 @@ const PhoneNumberInputValidation = (props) => {
29
30
  setShowFormErrors(formErrors.length > 0);
30
31
  }, [formErrors]);
31
32
 
33
+ const error = (
34
+ <>
35
+ <Icon icon="warning" /> Missing phone number.
36
+ </>
37
+ )
38
+
32
39
  return (
33
40
  <form
34
41
  action=""
@@ -43,7 +50,7 @@ const PhoneNumberInputValidation = (props) => {
43
50
  />
44
51
  )}
45
52
  <PhoneNumberInput
46
- error="Missing phone number."
53
+ error={error}
47
54
  id="validation"
48
55
  initialCountry={countryCode}
49
56
  onChange={handleOnChange}
@@ -1,6 +1,7 @@
1
1
  import React from 'react'
2
2
  import Body from '../../pb_body/_body'
3
3
  import Select from '../../pb_select/_select'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const SelectError = (props) => {
6
7
  const options = [
@@ -18,10 +19,14 @@ const SelectError = (props) => {
18
19
  },
19
20
  ]
20
21
 
22
+ const error = (<>
23
+ <Icon icon="warning" /> Please make a valid selection
24
+ </>)
25
+
21
26
  return (
22
27
  <div>
23
28
  <Select
24
- error="Please make a valid selection"
29
+ error={error}
25
30
  label="Favorite Food"
26
31
  name="food"
27
32
  options={options}
@@ -29,7 +34,7 @@ const SelectError = (props) => {
29
34
  {...props}
30
35
  />
31
36
  <Body
32
- error="Please make a valid selection"
37
+ error={error}
33
38
  status="negative"
34
39
  {...props}
35
40
  />
@@ -1,6 +1,7 @@
1
1
  import React, { useState } from 'react'
2
2
 
3
3
  import TextInput from '../_text_input'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const TextInputError = (props) => {
6
7
  const [email, setEmail] = useState('')
@@ -8,11 +9,18 @@ const TextInputError = (props) => {
8
9
  const handleUpdateEmail = ({ target }) => {
9
10
  setEmail(target.value)
10
11
  }
12
+
13
+ const error = (
14
+ <>
15
+ <Icon icon="warning" /> Please enter a valid email address
16
+ </>
17
+ )
18
+
11
19
  return (
12
20
  <div>
13
21
  <TextInput
14
22
  addOn={{ icon: 'user', alignment: 'left', border: true }}
15
- error="Please enter a valid email address"
23
+ error={error}
16
24
  label="Email Address"
17
25
  onChange={handleUpdateEmail}
18
26
  placeholder="Enter email address"
@@ -1,15 +1,21 @@
1
1
  import React, {useState} from 'react'
2
2
  import Textarea from '../../pb_textarea/_textarea'
3
+ import Icon from '../../pb_icon/_icon'
3
4
 
4
5
  const TextareaError = (props) => {
5
6
  const [value, setValue] = useState('default value text')
6
7
  const handleChange = (event) => {
7
8
  setValue(event.target.value)
8
9
  }
10
+ const error = (
11
+ <>
12
+ <Icon icon="warning" /> This field has an error!
13
+ </>
14
+ )
9
15
  return (
10
16
  <div>
11
17
  <Textarea
12
- error="This field has an error!"
18
+ error={error}
13
19
  label="Label"
14
20
  name="comment"
15
21
  onChange={(e)=> handleChange(e)}
@@ -1,6 +1,7 @@
1
1
  import React, { useState, useEffect } from 'react'
2
2
 
3
3
  import Typeahead from '../_typeahead'
4
+ import Icon from '../../pb_icon/_icon'
4
5
 
5
6
  const options = [
6
7
  { label: 'Orange', value: '#FFA500' },
@@ -10,7 +11,10 @@ const options = [
10
11
  ]
11
12
 
12
13
  const TypeaheadErrorState = (props) => {
13
- const [errorState, setErrorState] = useState("Please make a valid selection");
14
+ const error = (<>
15
+ <Icon icon="warning" /> Please make a valid selection
16
+ </>)
17
+ const [errorState, setErrorState] = useState(error);
14
18
  const [searchValue, setSearchValue] = useState(null);
15
19
 
16
20
  const handleOnChange = (value) => setSearchValue(value)
@@ -19,7 +23,7 @@ const TypeaheadErrorState = (props) => {
19
23
  if(searchValue) {
20
24
  setErrorState("")
21
25
  } else {
22
- setErrorState("Please make a valid selection")
26
+ setErrorState(error)
23
27
  }
24
28
  }, [searchValue])
25
29