playbook_ui_docs 14.24.0.pre.rc.2 → 14.24.0.pre.rc.3
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options.jsx +90 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options.jsx +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_radio_options_react.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +3 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +2 -1
- data/dist/playbook-doc.js +1 -1
- metadata +4 -2
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: 93fd4cae6bc996e0276b087d7c1ee3db271b890ae34c4d2df3ff9b9366057b70
|
|
4
|
+
data.tar.gz: 4ef6326b788d1fc5a5ce8132e5d113acd85247c7be8ca6c13a7409c10f3b22f8
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: c2b81102b8678b9b16f47c2c209c020489ed07b1ed6fa5ef4bf15eaf700fe01e2d1df04dc8e999cce56b2d64a2c6dce0fb4ae8accfb9067044c59b18cf5898a4
|
|
7
|
+
data.tar.gz: 542ec7cc0895ba1341a2f6654353ff6c1e3459b5d752c4bfdbf473ba8b5a442172f9c71da74e19de323479b541be18953de6c827e55a62a0363c96b266e528ee
|
|
@@ -0,0 +1,90 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
import Dropdown from '../_dropdown'
|
|
3
|
+
|
|
4
|
+
const DropdownCustomActiveStyleOptions = (props) => {
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
const options = [
|
|
8
|
+
{
|
|
9
|
+
label: "United States",
|
|
10
|
+
value: "unitedStates",
|
|
11
|
+
id: "us"
|
|
12
|
+
},
|
|
13
|
+
{
|
|
14
|
+
label: "Canada",
|
|
15
|
+
value: "canada",
|
|
16
|
+
id: "ca"
|
|
17
|
+
},
|
|
18
|
+
{
|
|
19
|
+
label: "Pakistan",
|
|
20
|
+
value: "pakistan",
|
|
21
|
+
id: "pk"
|
|
22
|
+
}
|
|
23
|
+
];
|
|
24
|
+
|
|
25
|
+
|
|
26
|
+
return (
|
|
27
|
+
<div>
|
|
28
|
+
<Dropdown
|
|
29
|
+
activeStyle={{
|
|
30
|
+
backgroundColor: "bg_light",
|
|
31
|
+
fontColor: "primary",
|
|
32
|
+
}}
|
|
33
|
+
label="Background Color: bg_light; Font Color: primary"
|
|
34
|
+
marginBottom="sm"
|
|
35
|
+
options={options}
|
|
36
|
+
{...props}
|
|
37
|
+
>
|
|
38
|
+
<Dropdown.Trigger/>
|
|
39
|
+
<Dropdown.Container>
|
|
40
|
+
{options.map((option) => (
|
|
41
|
+
<Dropdown.Option key={option.id}
|
|
42
|
+
option={option}
|
|
43
|
+
/>
|
|
44
|
+
))}
|
|
45
|
+
</Dropdown.Container>
|
|
46
|
+
</Dropdown>
|
|
47
|
+
<Dropdown
|
|
48
|
+
activeStyle={{
|
|
49
|
+
backgroundColor: "white",
|
|
50
|
+
fontColor: "primary",
|
|
51
|
+
}}
|
|
52
|
+
label="Background Color: white; Font Color: primary"
|
|
53
|
+
marginBottom="sm"
|
|
54
|
+
options={options}
|
|
55
|
+
{...props}
|
|
56
|
+
/>
|
|
57
|
+
<Dropdown
|
|
58
|
+
activeStyle={{
|
|
59
|
+
backgroundColor: "bg_light",
|
|
60
|
+
fontColor: "text_lt_default",
|
|
61
|
+
}}
|
|
62
|
+
autocomplete
|
|
63
|
+
label="Background Color: bg_light; Font Color: text_lt_default"
|
|
64
|
+
marginBottom="sm"
|
|
65
|
+
options={options}
|
|
66
|
+
{...props}
|
|
67
|
+
/>
|
|
68
|
+
<Dropdown
|
|
69
|
+
activeStyle={{
|
|
70
|
+
fontColor: "text_lt_lighter",
|
|
71
|
+
}}
|
|
72
|
+
label="Font Color: text_lt_lighter"
|
|
73
|
+
marginBottom="sm"
|
|
74
|
+
options={options}
|
|
75
|
+
{...props}
|
|
76
|
+
>
|
|
77
|
+
<Dropdown.Trigger/>
|
|
78
|
+
<Dropdown.Container>
|
|
79
|
+
{options.map((option) => (
|
|
80
|
+
<Dropdown.Option key={option.id}
|
|
81
|
+
option={option}
|
|
82
|
+
/>
|
|
83
|
+
))}
|
|
84
|
+
</Dropdown.Container>
|
|
85
|
+
</Dropdown>
|
|
86
|
+
</div>
|
|
87
|
+
)
|
|
88
|
+
}
|
|
89
|
+
|
|
90
|
+
export default DropdownCustomActiveStyleOptions
|
data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_active_style_options_react.md
ADDED
|
@@ -0,0 +1,4 @@
|
|
|
1
|
+
The `activeStyle` prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: `backgroundColor` sets the background color of the selected item (and its hover state); `fontColor` sets the font color of the selected item.
|
|
2
|
+
|
|
3
|
+
`backgroundColor` **Type**: String | **Values**: bg_light | white | **Default**: (no selection) is primary
|
|
4
|
+
`fontColor` **Type**: String | **Values**: primary | all [Playbook Text Colors](https://playbook.powerapp.cloud/visual_guidelines/colors) | **Default**: (no selection) is white
|
|
@@ -18,6 +18,7 @@ const DropdownCustomRadioOptions = (props) => {
|
|
|
18
18
|
return (
|
|
19
19
|
<div>
|
|
20
20
|
<Dropdown
|
|
21
|
+
activeStyle={{ backgroundColor: "bg_light", fontColor: "text_lt_default" }}
|
|
21
22
|
label="Select Item"
|
|
22
23
|
onSelect={(selectedItem) => setSelectedValue(selectedItem?.value)}
|
|
23
24
|
options={options}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown.
|
|
1
|
+
Radio inputs can be used inside `Dropdown.Option` for a custom layout that mimics form-like selection within a dropdown. Use the [activeStyle](https://playbook.powerapp.cloud/kits/dropdown/react#custom-active-style-options) `backgroundColor` and `fontColor` props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
|
|
@@ -16,7 +16,7 @@ examples:
|
|
|
16
16
|
- dropdown_with_search_rails: Custom Trigger Dropdown with Search
|
|
17
17
|
- dropdown_with_custom_padding: Custom Option Padding
|
|
18
18
|
- dropdown_with_custom_icon_options: Custom Icon Options
|
|
19
|
-
# - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
|
|
19
|
+
# - dropdown_with_custom_radio_options: Custom Radio Options # TODO: Update and publish doc ex in the Rails follow up to [PLAY-2146](https://runway.powerhrg.com/backlog_items/PLAY-2146) (remove this comment afterwards)
|
|
20
20
|
- dropdown_error: Dropdown with Error
|
|
21
21
|
- dropdown_default_value: Default Value
|
|
22
22
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
@@ -39,8 +39,9 @@ examples:
|
|
|
39
39
|
- dropdown_with_custom_trigger: Custom Trigger
|
|
40
40
|
- dropdown_with_search: Custom Trigger Dropdown with Search
|
|
41
41
|
- dropdown_with_custom_padding: Custom Option Padding
|
|
42
|
+
- dropdown_with_custom_active_style_options: Custom Active Style Options
|
|
42
43
|
- dropdown_with_custom_icon_options: Custom Icon Options
|
|
43
|
-
|
|
44
|
+
- dropdown_with_custom_radio_options: Custom Radio Options
|
|
44
45
|
- dropdown_error: Dropdown with Error
|
|
45
46
|
- dropdown_default_value: Default Value
|
|
46
47
|
- dropdown_multi_select_with_default: Multi Select Default Value
|
|
@@ -21,4 +21,5 @@ export { default as DropdownMultiSelectWithAutocomplete } from './_dropdown_mult
|
|
|
21
21
|
export { default as DropdownMultiSelectWithDefault } from './_dropdown_multi_select_with_default.jsx'
|
|
22
22
|
export { default as DropdownMultiSelectWithCustomOptions } from './_dropdown_multi_select_with_custom_options.jsx'
|
|
23
23
|
export {default as DropdownWithCustomIconOptions} from './_dropdown_with_custom_icon_options.jsx'
|
|
24
|
-
export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
|
|
24
|
+
export {default as DropdownWithCustomRadioOptions} from './_dropdown_with_custom_radio_options.jsx'
|
|
25
|
+
export {default as DropdownWithCustomActiveStyleOptions} from './_dropdown_with_custom_active_style_options.jsx'
|