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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/index.js +0 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +12 -90
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +11 -63
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +13 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +0 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.jsx +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display.md +1 -3
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +4 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +2 -5
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +1 -4
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +10 -200
- data/app/pb_kits/playbook/pb_dropdown/hooks/useDropdown.tsx +2 -2
- data/app/pb_kits/playbook/pb_dropdown/hooks/useHandleOnKeydown.tsx +4 -4
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +8 -17
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +8 -16
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +78 -96
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +7 -9
- data/app/pb_kits/playbook/pb_tooltip/_tooltip.tsx +0 -1
- data/dist/playbook-rails.js +4 -4
- data/lib/playbook/version.rb +1 -1
- metadata +2 -6
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +0 -62
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +0 -75
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +0 -39
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +0 -1
data/lib/playbook/version.rb
CHANGED
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.
|
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-
|
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.
|