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

Sign up to get free protection for your applications and to get access to all the features.
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.