playbook_ui 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769 β†’ 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783

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 (27) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/index.js +0 -1
  3. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +12 -90
  4. data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +11 -63
  5. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +13 -1
  6. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +0 -1
  7. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
  8. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -3
  9. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +4 -1
  10. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +4 -1
  11. data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -5
  12. data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
  13. data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +10 -200
  14. data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
  15. data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +4 -4
  16. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +8 -17
  17. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +8 -16
  18. data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +78 -96
  19. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +7 -9
  20. data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -1
  21. data/dist/playbook-rails.js +4 -4
  22. data/lib/playbook/version.rb +1 -1
  23. metadata +2 -6
  24. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +0 -62
  25. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -75
  26. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -39
  27. data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +0 -1
@@ -2,5 +2,5 @@
2
2
 
3
3
  module Playbook
4
4
  PREVIOUS_VERSION = "13.25.0"
5
- VERSION = "13.25.0.pre.alpha.PBNTR272Dropdownkitv42769"
5
+ VERSION = "13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783"
6
6
  end
metadata CHANGED
@@ -1,7 +1,7 @@
1
1
  --- !ruby/object:Gem::Specification
2
2
  name: playbook_ui
3
3
  version: !ruby/object:Gem::Version
4
- version: 13.25.0.pre.alpha.PBNTR272Dropdownkitv42769
4
+ version: 13.25.0.pre.alpha.PLAY1249fixTooltipswrappingformelementscausingmisalignment2783
5
5
  platform: ruby
6
6
  authors:
7
7
  - Power UX
@@ -9,7 +9,7 @@ authors:
9
9
  autorequire:
10
10
  bindir: bin
11
11
  cert_chain: []
12
- date: 2024-04-29 00:00:00.000000000 Z
12
+ date: 2024-04-30 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionpack
@@ -1049,10 +1049,6 @@ files:
1049
1049
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.md
1050
1050
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.jsx
1051
1051
  - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_trigger.md
1052
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx
1053
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx
1054
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx
1055
- - app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md
1056
1052
  - app/pb_kits/playbook/pb_dropdown/docs/example.yml
1057
1053
  - app/pb_kits/playbook/pb_dropdown/docs/index.js
1058
1054
  - app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx
@@ -1,62 +0,0 @@
1
- import React, { useState } from 'react'
2
- import { Dropdown, useDropdown, Button } from '../../'
3
-
4
- const DropdownWithExternalControl = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
- const [selectedOption, setSelectedOption] = useState();
7
- const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
8
-
9
- const options = [
10
- {
11
- label: "United States",
12
- value: "United States",
13
- areaCode: "+1",
14
- icon: "πŸ‡ΊπŸ‡Έ",
15
- id: "United-states"
16
- },
17
- {
18
- label: "Canada",
19
- value: "Canada",
20
- areaCode: "+1",
21
- icon: "πŸ‡¨πŸ‡¦",
22
- id: "canada"
23
- },
24
- {
25
- label: "Pakistan",
26
- value: "Pakistan",
27
- areaCode: "+92",
28
- icon: "πŸ‡΅πŸ‡°",
29
- id: "pakistan"
30
- }
31
- ];
32
-
33
- return (
34
- <div>
35
- <Button
36
- data={{dropdown:'pb-dropdown-trigger'}}
37
- marginBottom='sm'
38
- onClick={() => setIsDropdownClosed(!isDropDownClosed)}
39
- padding="none"
40
- tabIndex={0}
41
- variant="link"
42
- >
43
- {isDropDownClosed ? "Open Dropdown" : "Close Dropdown"}
44
- </Button>
45
-
46
- <Dropdown
47
- isClosed={isDropDownClosed}
48
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
49
- options={options}
50
- {...props}
51
- >
52
- {options.map((option) => (
53
- <Dropdown.Option key={option.id}
54
- option={option}
55
- />
56
- ))}
57
- </Dropdown>
58
- </div>
59
- )
60
- }
61
-
62
- export default DropdownWithExternalControl
@@ -1,75 +0,0 @@
1
- import React, { useState, useRef } from 'react'
2
- import { Dropdown, useDropdown, CircleIconButton, Icon, Body, FlexItem, Flex } from '../..'
3
-
4
- const DropdownWithHook = (props) => {
5
- // eslint-disable-next-line no-unused-vars
6
- const [selectedOption, setSelectedOption] = useState();
7
- const [isDropDownClosed, setIsDropdownClosed] = useDropdown(true);
8
- const buttonRef = useRef(null);
9
-
10
- const options = [
11
- {
12
- label: "United States",
13
- value: "United States",
14
- areaCode: "+1",
15
- icon: "πŸ‡ΊπŸ‡Έ",
16
- id: "United-states"
17
- },
18
- {
19
- label: "Canada",
20
- value: "Canada",
21
- areaCode: "+1",
22
- icon: "πŸ‡¨πŸ‡¦",
23
- id: "canada"
24
- },
25
- {
26
- label: "Pakistan",
27
- value: "Pakistan",
28
- areaCode: "+92",
29
- icon: "πŸ‡΅πŸ‡°",
30
- id: "pakistan"
31
- }
32
- ];
33
-
34
- return (
35
- <div>
36
- <CircleIconButton
37
- htmlOptions={{ref: buttonRef}}
38
- icon={"flag"}
39
- onClick={() => setIsDropdownClosed(!isDropDownClosed)}
40
- variant="secondary"
41
- />
42
- <Dropdown
43
- isClosed={isDropDownClosed}
44
- onSelect={(selectedItem) => setSelectedOption(selectedItem)}
45
- options={options}
46
- triggerRef={buttonRef}
47
- {...props}
48
- >
49
- {options.map((option) => (
50
- <Dropdown.Option key={option.id}
51
- option={option}
52
- >
53
- <>
54
- <FlexItem>
55
- <Flex paddingRight='md'>
56
- <Icon icon={option.icon}
57
- paddingRight="xs"
58
- />
59
- <Body text={option.label} />
60
- </Flex>
61
- </FlexItem>
62
- <FlexItem>
63
- <Body color="light"
64
- text={option.areaCode}
65
- />
66
- </FlexItem>
67
- </>
68
- </Dropdown.Option>
69
- ))}
70
- </Dropdown>
71
- </div>
72
- )
73
- }
74
-
75
- export default DropdownWithHook
@@ -1,39 +0,0 @@
1
- import React from 'react'
2
- import { Dropdown } from '../..'
3
-
4
- const DropdownDefault = (props) => {
5
-
6
- const options = [
7
- {
8
- label: "United States",
9
- value: "United States",
10
- },
11
- {
12
- label: "Canada",
13
- value: "Canada",
14
- },
15
- {
16
- label: "Pakistan",
17
- value: "Pakistan",
18
- }
19
- ];
20
-
21
-
22
- return (
23
- <div>
24
- <Dropdown
25
- label="Select a Country"
26
- options={options}
27
- {...props}
28
- >
29
- {options.map((option) => (
30
- <Dropdown.Option key={option.id}
31
- option={option}
32
- />
33
- ))}
34
- </Dropdown>
35
- </div>
36
- )
37
- }
38
-
39
- export default DropdownDefault
@@ -1 +0,0 @@
1
- The optional `label` prop takes a string value that if present will render that string as the label for the Dropdown.