playbook_ui_docs 13.25.0.pre.alpha.PBNTR291Dropdownrailsv22812 → 13.25.0.pre.alpha.PLAY761globalpaddingpropsbuttons2713

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 (58) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +0 -2
  3. data/app/pb_kits/playbook/pb_checkbox/docs/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -5
  5. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +1 -3
  6. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +1 -3
  7. data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
  8. data/app/pb_kits/playbook/pb_date_range_stacked/docs/example.yml +0 -4
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +22 -4
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +4 -6
  11. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +9 -6
  12. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx +5 -5
  13. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -16
  14. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +0 -7
  15. data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +0 -2
  16. data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +0 -1
  17. data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +1 -4
  18. data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +1 -4
  19. data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +1 -2
  20. data/app/pb_kits/playbook/pb_radio/docs/example.yml +0 -2
  21. data/app/pb_kits/playbook/pb_radio/docs/index.js +0 -1
  22. data/dist/playbook-doc.js +7 -7
  23. metadata +2 -37
  24. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +0 -23
  25. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +0 -29
  26. data/app/pb_kits/playbook/pb_currency/docs/_currency_alignment_swift.md +0 -43
  27. data/app/pb_kits/playbook/pb_currency/docs/_currency_props_swift.md +0 -12
  28. data/app/pb_kits/playbook/pb_currency/docs/_currency_size_swift.md +0 -31
  29. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_default_swift.md +0 -14
  30. data/app/pb_kits/playbook/pb_date_range_stacked/docs/_date_range_stacked_props_swift.md +0 -9
  31. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.html.erb +0 -10
  32. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +0 -1
  33. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.html.erb +0 -17
  34. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +0 -42
  35. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +0 -7
  36. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +0 -84
  37. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.md +0 -1
  38. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +0 -101
  39. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.md +0 -1
  40. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.html.erb +0 -60
  41. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +0 -5
  42. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.html.erb +0 -45
  43. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +0 -1
  44. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.html.erb +0 -17
  45. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +0 -48
  46. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md +0 -1
  47. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.html.erb +0 -47
  48. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md +0 -1
  49. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +0 -59
  50. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -72
  51. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.html.erb +0 -10
  52. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -39
  53. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +0 -1
  54. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +0 -3
  55. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +0 -16
  56. data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +0 -1
  57. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +0 -26
  58. data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +0 -31
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 133ebab77004aba4159126433c309713947db70bca683826c662c96a120aa070
4
- data.tar.gz: bdd52471d072f9dceb69d08e32ac91ee869bad6d2980542a08a44cf4418ecb34
3
+ metadata.gz: 79167a3d16d25909c9f4110866ef74784797313510baf6574c8a9dcc7f145e5d
4
+ data.tar.gz: b3adb21e79b1da5706208b838fc26fb04e29444fdd2b341fed054ec9e27d5d8d
5
5
  SHA512:
6
- metadata.gz: 295d43d1813478690c1fd083359013a0207ae5fb2c79f2f702d139a3b781719eaa1b9d836940d478377971556325fa1d39560d417f61c6f5379e3d77640b531b
7
- data.tar.gz: 76f1fa54e955307ed54c87ad0062f4fcb2698508da6b166c117d20e81ee883fa13bd5ceb0f6d8814b30e04d05c154d77c73486e12a0d01fbd5fd5b23093422d8
6
+ metadata.gz: fb61c3f801e0ccebb9fe280a588095cd14499955d22de09030a3bd8449d810a273d1ac1498e8a8e2a8f3d39907d817c1c675f54254a0e31e3c99ef4f74eea90b
7
+ data.tar.gz: a2ce5f891a1340dfed230be9b76e61fd91f3f71e96566921a27dcb958012bf0ed3916b23a050f38de9bd8bea8e194fd2d3806ed85e16c38ccd3e7b73c419dcfa
@@ -6,7 +6,6 @@ examples:
6
6
  - checkbox_error: Default w/ Error
7
7
  - checkbox_options: Checkbox w/ Options
8
8
  - checkbox_indeterminate: Indeterminate Checkbox
9
- - checkbox_disabled: Disabled Checkbox
10
9
 
11
10
  react:
12
11
  - checkbox_default: Default
@@ -14,7 +13,6 @@ examples:
14
13
  - checkbox_custom: Custom Checkbox
15
14
  - checkbox_error: Default w/ Error
16
15
  - checkbox_indeterminate: Indeterminate Checkbox
17
- - checkbox_disabled: Disabled Checkbox
18
16
 
19
17
  swift:
20
18
  - checkbox_default_swift: Default
@@ -3,4 +3,3 @@ export { default as CheckboxCustom } from './_checkbox_custom.jsx'
3
3
  export { default as CheckboxError } from './_checkbox_error.jsx'
4
4
  export { default as CheckboxChecked } from './_checkbox_checked.jsx'
5
5
  export { default as CheckboxIndeterminate } from './_checkbox_indeterminate.jsx'
6
- export { default as CheckboxDisabled } from './_checkbox_disabled.jsx'
@@ -17,8 +17,3 @@ examples:
17
17
  - currency_abbreviated: Abbreviate Larger Amounts
18
18
  - currency_matching_decimals: Matching Decimals
19
19
  - currency_unstyled: Unstyled
20
-
21
- swift:
22
- - currency_size_swift: Size
23
- - currency_alignment_swift: Alignment
24
- - currency_props_swift: ""
@@ -1,5 +1,3 @@
1
1
  Your change handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
-
5
- NOTE: On Change does not account for manual input by users, so if your date picker sets `allowInput`, you should use the `onClose` method instead.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
@@ -1,5 +1,3 @@
1
1
  The `onClose` handler function has access to two arguments: `dateStr` and `selectedDates`.
2
2
 
3
- The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
4
-
5
- NOTE: `onClose` is the ideal handler function to use when `allowInput` is enabled.
3
+ The first, `dateStr`, is a string of the chosen date. The second, `selectedDates`, is an array of selected date objects. In many use cases `selectedDates` will have only one value but you'll still need to access it from index 0.
@@ -1 +1 @@
1
- Because the Quick Pick variant has `allowInput` set to `true` by default, use the `onClose` handler function to access the startDate and endDate values. See the `onClose` example for details.
1
+ Applying `this_ranges_end_today` (Rails) or `thisRangesEndToday` (React) causes all “This” preset ranges (i.e., this week, this month, this quarter, this year) to use an endDate of today, instead of their natural end date in the future.
@@ -5,7 +5,3 @@ examples:
5
5
 
6
6
  react:
7
7
  - date_range_stacked_default: Default
8
-
9
- swift:
10
- - date_range_stacked_default_swift: Default
11
- - date_range_stacked_props_swift: ""
@@ -1,20 +1,31 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import { Dropdown } from '../../'
3
3
 
4
4
  const DropdownDefault = (props) => {
5
+ // eslint-disable-next-line no-unused-vars
6
+ const [selectedOption, setSelectedOption] = useState();
5
7
 
6
8
  const options = [
7
9
  {
8
10
  label: "United States",
9
11
  value: "United States",
12
+ areaCode: "+1",
13
+ icon: "🇺🇸",
14
+ id: "United-states"
10
15
  },
11
16
  {
12
- label: "Canada",
13
- value: "Canada",
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
14
22
  },
15
23
  {
16
24
  label: "Pakistan",
17
25
  value: "Pakistan",
26
+ areaCode: "+92",
27
+ icon: "🇵🇰",
28
+ id: "pakistan"
18
29
  }
19
30
  ];
20
31
 
@@ -22,9 +33,16 @@ const DropdownDefault = (props) => {
22
33
  return (
23
34
  <div>
24
35
  <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
25
37
  options={options}
26
38
  {...props}
27
- />
39
+ >
40
+ {options.map((option) => (
41
+ <Dropdown.Option key={option.id}
42
+ option={option}
43
+ />
44
+ ))}
45
+ </Dropdown>
28
46
  </div>
29
47
  )
30
48
  }
@@ -17,7 +17,7 @@ const DropdownWithCustomDisplay = (props) => {
17
17
  label: "Ramon Ruiz",
18
18
  value: "Ramon Ruiz",
19
19
  territory: "PHL",
20
- title: "Senior UX Designer",
20
+ title: "Senior UX Desinger",
21
21
  id: "ramon-ruiz",
22
22
  status: "Away"
23
23
  },
@@ -39,7 +39,7 @@ const DropdownWithCustomDisplay = (props) => {
39
39
  }
40
40
  ];
41
41
 
42
- const CustomDisplay = () => {
42
+ const customDisplay = () => {
43
43
  return (
44
44
  <>
45
45
  {
@@ -62,9 +62,7 @@ const DropdownWithCustomDisplay = (props) => {
62
62
  options={options}
63
63
  {...props}
64
64
  >
65
- <Dropdown.Trigger customDisplay={<CustomDisplay/>}
66
- placeholder="Select a User"
67
- />
65
+ <Dropdown.Trigger customDisplay={customDisplay()}/>
68
66
  {options.map((option) => (
69
67
  <Dropdown.Option key={option.id}
70
68
  option={option}
@@ -81,7 +79,7 @@ const DropdownWithCustomDisplay = (props) => {
81
79
  />
82
80
  </FlexItem>
83
81
  <FlexItem>
84
- <Badge dark
82
+ <Badge
85
83
  rounded
86
84
  text={option.status}
87
85
  variant={`${
@@ -1,7 +1,9 @@
1
- import React from 'react'
1
+ import React, { useState } from 'react'
2
2
  import { Dropdown, Icon, Body, FlexItem, Flex } from '../..'
3
3
 
4
4
  const DropdownWithCustomOptions = (props) => {
5
+ // eslint-disable-next-line no-unused-vars
6
+ const [selectedOption, setSelectedOption] = useState();
5
7
 
6
8
  const options = [
7
9
  {
@@ -12,11 +14,11 @@ const DropdownWithCustomOptions = (props) => {
12
14
  id: "United-states"
13
15
  },
14
16
  {
15
- label: "Canada",
16
- value: "Canada",
17
- areaCode: "+1",
18
- icon: "🇨🇦",
19
- id: "canada"
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
20
22
  },
21
23
  {
22
24
  label: "Pakistan",
@@ -31,6 +33,7 @@ const DropdownWithCustomOptions = (props) => {
31
33
  return (
32
34
  <div>
33
35
  <Dropdown
36
+ onSelect={(selectedItem) => setSelectedOption(selectedItem)}
34
37
  options={options}
35
38
  {...props}
36
39
  >
@@ -14,11 +14,11 @@ const [selectedOption, setSelectedOption] = useState();
14
14
  id: "United-states"
15
15
  },
16
16
  {
17
- label: "Canada",
18
- value: "Canada",
19
- areaCode: "+1",
20
- icon: "🇨🇦",
21
- id: "canada"
17
+ label: "Ukraine",
18
+ value: "Ukraine",
19
+ areaCode: "+380",
20
+ icon: "🇺🇦",
21
+ id: "ukraine"
22
22
  },
23
23
  {
24
24
  label: "Pakistan",
@@ -1,23 +1,9 @@
1
1
  examples:
2
- rails:
3
- - dropdown_default: Default
4
- - dropdown_subcomponent_structure: Subcomponent Structure
5
- - dropdown_with_label: With Label
6
- - dropdown_with_custom_options: Custom Options
7
- - dropdown_with_custom_display: Custom Display
8
- - dropdown_with_custom_trigger: Custom Trigger
9
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
10
-
2
+
3
+
11
4
  react:
12
5
  - dropdown_default: Default
13
- - dropdown_subcomponent_structure: Subcomponent Structure
14
- - dropdown_with_label: With Label
15
6
  - dropdown_with_custom_options: Custom Options
16
7
  - dropdown_with_custom_display: Custom Display
17
8
  - dropdown_with_custom_trigger: Custom Trigger
18
- - dropdown_with_custom_padding: Custom Padding for Dropdown Options
19
- # - dropdown_with_autocomplete: Autocomplete
20
- # - dropdown_with_autocomplete_and_custom_display: Autocomplete with Custom Display
21
- # - dropdown_with_external_control: useDropdown Hook
22
- # - dropdown_with_hook: useDropdown Hook with Any Trigger
23
9
 
@@ -2,10 +2,3 @@ export { default as DropdownDefault } from './_dropdown_default.jsx'
2
2
  export { default as DropdownWithCustomDisplay } from './_dropdown_with_custom_display.jsx'
3
3
  export { default as DropdownWithCustomOptions } from './_dropdown_with_custom_options.jsx'
4
4
  export { default as DropdownWithCustomTrigger } from './_dropdown_with_custom_trigger.jsx'
5
- export { default as DropdownWithAutocomplete } from './_dropdown_with_autocomplete.jsx'
6
- export { default as DropdownWithAutocompleteAndCustomDisplay } from './_dropdown_with_autocomplete_and_custom_display.jsx'
7
- export { default as DropdownWithCustomPadding } from './_dropdown_with_custom_padding.jsx'
8
- export { default as DropdownWithLabel } from './_dropdown_with_label.jsx'
9
- export { default as DropdownWithExternalControl } from './_dropdown_with_external_control.jsx'
10
- export { default as DropdownWithHook } from './_dropdown_with_hook.jsx'
11
- export { default as DropdownSubcomponentStructure } from './_dropdown_subcomponent_structure.jsx'
@@ -3,7 +3,6 @@ examples:
3
3
  rails:
4
4
  - progress_simple_default: Default
5
5
  - progress_simple_value: Setting Values
6
- - progress_simple_flex: Within a Flex
7
6
  - progress_simple_width: Progress Bar Width
8
7
  - progress_simple_variants: Variants
9
8
  - progress_simple_muted: Muted
@@ -13,7 +12,6 @@ examples:
13
12
  react:
14
13
  - progress_simple_default: Default
15
14
  - progress_simple_value: Setting Values
16
- - progress_simple_flex: Within a Flex
17
15
  - progress_simple_width: Progress Bar Width
18
16
  - progress_simple_variants: Variants
19
17
  - progress_simple_muted: Muted
@@ -2,7 +2,6 @@ export { default as ProgressSimpleAlign } from './_progress_simple_align.jsx'
2
2
  export { default as ProgressSimpleDefault } from './_progress_simple_default.jsx'
3
3
  export { default as ProgressSimpleMuted } from './_progress_simple_muted.jsx'
4
4
  export { default as ProgressSimpleValue } from './_progress_simple_value.jsx'
5
- export { default as ProgressSimpleFlex } from './_progress_simple_flex.jsx'
6
5
  export { default as ProgressSimpleWidth } from './_progress_simple_width.jsx'
7
6
  export { default as ProgressSimpleVariants } from './_progress_simple_variants.jsx'
8
7
 
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { Flex, Radio } from '../../'
3
3
 
4
- const RadioAlignment = (props) => {
4
+ const RadioAlignment = () => {
5
5
  return (
6
6
  <Flex>
7
7
  <Radio
@@ -11,7 +11,6 @@ const RadioAlignment = (props) => {
11
11
  name="Group2"
12
12
  tabIndex={0}
13
13
  value="Power"
14
- {...props}
15
14
  />
16
15
  <br />
17
16
  <Radio
@@ -21,7 +20,6 @@ const RadioAlignment = (props) => {
21
20
  marginRight="sm"
22
21
  name="Group2"
23
22
  value="Nitro"
24
- {...props}
25
23
  />
26
24
  <br />
27
25
  <Radio
@@ -30,7 +28,6 @@ const RadioAlignment = (props) => {
30
28
  label="Google"
31
29
  name="Group2"
32
30
  value="Google"
33
- {...props}
34
31
  />
35
32
  </Flex>
36
33
  )
@@ -2,7 +2,7 @@ import React from 'react'
2
2
 
3
3
  import Radio from '../_radio'
4
4
 
5
- const RadioDefault = (props) => {
5
+ const RadioDefault = () => {
6
6
  const ref = React.createRef()
7
7
 
8
8
  return (
@@ -13,7 +13,6 @@ const RadioDefault = (props) => {
13
13
  ref={ref}
14
14
  tabIndex={0}
15
15
  value="Power"
16
- {...props}
17
16
  />
18
17
  <br />
19
18
  <Radio
@@ -21,7 +20,6 @@ const RadioDefault = (props) => {
21
20
  label="Nitro"
22
21
  name="Group2"
23
22
  value="Nitro"
24
- {...props}
25
23
  />
26
24
  <br />
27
25
  <Radio
@@ -29,7 +27,6 @@ const RadioDefault = (props) => {
29
27
  label="Google"
30
28
  name="Group2"
31
29
  value="Google"
32
- {...props}
33
30
  />
34
31
  </div>
35
32
  )
@@ -1,7 +1,7 @@
1
1
  import React from 'react'
2
2
  import { Radio } from '../..'
3
3
 
4
- const RadioError = (props) => {
4
+ const RadioError = () => {
5
5
  return (
6
6
  <div>
7
7
  <Radio
@@ -9,7 +9,6 @@ const RadioError = (props) => {
9
9
  label="Power"
10
10
  name="Group2"
11
11
  value="Power"
12
- {...props}
13
12
  />
14
13
  </div>
15
14
  )
@@ -6,14 +6,12 @@ examples:
6
6
  - radio_error: With Error
7
7
  - radio_options: With Options
8
8
  - radio_alignment: Alignment
9
- - radio_disabled: Disabled
10
9
 
11
10
  react:
12
11
  - radio_default: Default
13
12
  - radio_custom: Custom
14
13
  - radio_error: With Error
15
14
  - radio_alignment: Alignment
16
- - radio_disabled: Disabled
17
15
 
18
16
  swift:
19
17
  - radio_default_swift: Default
@@ -2,4 +2,3 @@ export { default as RadioDefault } from './_radio_default.jsx'
2
2
  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
- export { default as RadioDisabled } from './_radio_disabled.jsx'