playbook_ui 13.25.0.pre.alpha.barchartfix2766 → 13.26.0
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 +1 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.scss +49 -0
- data/app/pb_kits/playbook/pb_checkbox/_checkbox.tsx +3 -0
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +2 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.test.js +14 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.html.erb +23 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_disabled.jsx +29 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_checkbox/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_change.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_on_close.md +3 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_quick_pick_range_limit.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +92 -31
- data/app/pb_kits/playbook/pb_dropdown/_dropdown.tsx +60 -21
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.jsx +2 -20
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_default.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.jsx +42 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_subcomponent_structure.md +7 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_autocomplete_and_custom_display.jsx +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 +3 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_options.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_padding.jsx +1 -4
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_external_control.jsx +59 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_hook.jsx +72 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.jsx +39 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_label.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +5 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.test.jsx +200 -10
- 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/scss_partials/_dropdown_animation.scss +18 -0
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownContainer.tsx +17 -8
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownOption.tsx +25 -15
- data/app/pb_kits/playbook/pb_dropdown/subcomponents/DropdownTrigger.tsx +96 -78
- data/app/pb_kits/playbook/pb_dropdown/utilities/clickOutsideHelper.tsx +41 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/index.ts +2 -0
- data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +9 -7
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.html.erb +3 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.jsx +16 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/_progress_simple_flex.md +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_progress_simple/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/_radio.scss +35 -0
- data/app/pb_kits/playbook/pb_radio/_radio.tsx +3 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_alignment.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_default.jsx +4 -1
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.html.erb +26 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_disabled.jsx +31 -0
- data/app/pb_kits/playbook/pb_radio/docs/_radio_error.jsx +2 -1
- data/app/pb_kits/playbook/pb_radio/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_radio/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_radio/radio.rb +5 -0
- data/app/pb_kits/playbook/pb_radio/radio.test.js +17 -0
- data/dist/playbook-rails.js +3 -3
- data/lib/playbook/version.rb +1 -1
- metadata +21 -5
@@ -0,0 +1,26 @@
|
|
1
|
+
<%= pb_rails("flex", props: {orientation: "column"}) do %>
|
2
|
+
<%= pb_rails("flex/flex_item") do %>
|
3
|
+
<%= pb_rails("radio", props: {
|
4
|
+
text: "Disabled unselected",
|
5
|
+
input_options: {
|
6
|
+
tabindex: 0,
|
7
|
+
disabled: true,
|
8
|
+
},
|
9
|
+
margin_bottom: "xs",
|
10
|
+
name: "DisabledGroup",
|
11
|
+
value: "Disabled unselected",
|
12
|
+
}) %>
|
13
|
+
<% end %>
|
14
|
+
<%= pb_rails("flex/flex_item") do %>
|
15
|
+
<%= pb_rails("radio", props: {
|
16
|
+
text: "Disabled selected",
|
17
|
+
input_options: {
|
18
|
+
tabindex: 0,
|
19
|
+
disabled: true,
|
20
|
+
},
|
21
|
+
checked: true,
|
22
|
+
name: "DisabledGroup",
|
23
|
+
value: "Disabled selected"
|
24
|
+
}) %>
|
25
|
+
<% end %>
|
26
|
+
<% end %>
|
@@ -0,0 +1,31 @@
|
|
1
|
+
import React from 'react'
|
2
|
+
|
3
|
+
import Radio from '../_radio'
|
4
|
+
|
5
|
+
const RadioDisabled = (props) => {
|
6
|
+
const ref = React.createRef()
|
7
|
+
|
8
|
+
return (
|
9
|
+
<div style={{ display: "flex", flexDirection: "column" }}>
|
10
|
+
<Radio
|
11
|
+
disabled
|
12
|
+
label="Disabled unselected"
|
13
|
+
marginBottom="xs"
|
14
|
+
name="DisabledGroup"
|
15
|
+
ref={ref}
|
16
|
+
tabIndex={0}
|
17
|
+
value="Disabled unselected"
|
18
|
+
{...props}
|
19
|
+
/>
|
20
|
+
<Radio
|
21
|
+
checked
|
22
|
+
disabled
|
23
|
+
label="Disabled selected"
|
24
|
+
name="DisabledGroup"
|
25
|
+
value="Disabled selected"
|
26
|
+
{...props}
|
27
|
+
/>
|
28
|
+
</div>
|
29
|
+
)
|
30
|
+
}
|
31
|
+
export default RadioDisabled
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import { Radio } from '../..'
|
3
3
|
|
4
|
-
const RadioError = () => {
|
4
|
+
const RadioError = (props) => {
|
5
5
|
return (
|
6
6
|
<div>
|
7
7
|
<Radio
|
@@ -9,6 +9,7 @@ const RadioError = () => {
|
|
9
9
|
label="Power"
|
10
10
|
name="Group2"
|
11
11
|
value="Power"
|
12
|
+
{...props}
|
12
13
|
/>
|
13
14
|
</div>
|
14
15
|
)
|
@@ -6,12 +6,14 @@ examples:
|
|
6
6
|
- radio_error: With Error
|
7
7
|
- radio_options: With Options
|
8
8
|
- radio_alignment: Alignment
|
9
|
+
- radio_disabled: Disabled
|
9
10
|
|
10
11
|
react:
|
11
12
|
- radio_default: Default
|
12
13
|
- radio_custom: Custom
|
13
14
|
- radio_error: With Error
|
14
15
|
- radio_alignment: Alignment
|
16
|
+
- radio_disabled: Disabled
|
15
17
|
|
16
18
|
swift:
|
17
19
|
- radio_default_swift: Default
|
@@ -2,3 +2,4 @@ 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'
|
@@ -11,6 +11,7 @@ module Playbook
|
|
11
11
|
default: false
|
12
12
|
prop :error, type: Playbook::Props::Boolean,
|
13
13
|
default: false
|
14
|
+
prop :disabled, type: Playbook::Props::Boolean, default: false
|
14
15
|
prop :input_options, type: Playbook::Props::HashProp,
|
15
16
|
default: {}
|
16
17
|
prop :name, type: Playbook::Props::String,
|
@@ -32,6 +33,10 @@ module Playbook
|
|
32
33
|
error ? "negative" : nil
|
33
34
|
end
|
34
35
|
|
36
|
+
def input
|
37
|
+
radio_button_tag(name, value, checked, input_options.merge(disabled: disabled))
|
38
|
+
end
|
39
|
+
|
35
40
|
private
|
36
41
|
|
37
42
|
def error_class
|
@@ -69,3 +69,20 @@ test('returns dark + error class name', () => {
|
|
69
69
|
const kit = screen.getByTestId(testId)
|
70
70
|
expect(kit).toHaveClass(`${kitClass} dark error`)
|
71
71
|
})
|
72
|
+
|
73
|
+
test('has disabled attribute', () => {
|
74
|
+
render(
|
75
|
+
<Radio
|
76
|
+
data={{ testid: testId }}
|
77
|
+
disabled
|
78
|
+
label="Power"
|
79
|
+
name="Group2"
|
80
|
+
value="Power"
|
81
|
+
/>
|
82
|
+
)
|
83
|
+
|
84
|
+
const kit = screen.getByTestId(testId)
|
85
|
+
const input = kit.querySelector('input')
|
86
|
+
expect(input).toHaveAttribute('disabled')
|
87
|
+
})
|
88
|
+
|