playbook_ui_docs 15.3.0.pre.alpha.play199912019 → 15.3.0.pre.alpha.play202412165
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_advanced_table/docs/_advanced_table_background_control_rails.html.erb +4 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_background_control_rails.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.jsx +3 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling.md +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_column_headers.jsx +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.html.erb +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_styling_rails.md +2 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.jsx +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_padding_control.md +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header.jsx +16 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.html.erb +104 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_multi_header_rails.md +1 -0
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_with_custom_header_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +1 -0
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.html.erb +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.jsx +1 -1
- data/app/pb_kits/playbook/pb_currency/docs/_currency_variants.md +1 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.jsx +38 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/_date_picker_and_dropdown_range.md +14 -0
- data/app/pb_kits/playbook/pb_date_picker/docs/example.yml +2 -1
- data/app/pb_kits/playbook/pb_date_picker/docs/index.js +2 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.jsx +18 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick.md +4 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.jsx +18 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_default_dates.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.jsx +19 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_range_end.md +1 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.jsx +38 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_quickpick_with_date_pickers.md +14 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/example.yml +5 -0
- data/app/pb_kits/playbook/pb_dropdown/docs/index.js +5 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_auto_close.html.erb +15 -1
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_multi_line.html.erb +9 -8
- data/app/pb_kits/playbook/pb_fixed_confirmation_toast/docs/_fixed_confirmation_toast_positions.html.erb +11 -10
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.html.erb +21 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.jsx +113 -0
- data/app/pb_kits/playbook/pb_nav/docs/_horizontal_nav_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.html.erb +30 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.jsx +117 -0
- data/app/pb_kits/playbook/pb_nav/docs/_vertical_nav_disabled.md +1 -0
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +4 -0
- data/app/pb_kits/playbook/pb_nav/docs/index.js +3 -1
- data/dist/playbook-doc.js +1 -1
- metadata +21 -2
|
@@ -0,0 +1,113 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Nav from '../_nav'
|
|
4
|
+
import NavItem from '../_item'
|
|
5
|
+
import Caption from '../../pb_caption/_caption'
|
|
6
|
+
|
|
7
|
+
const HorizontalNavDisabled = (props) => {
|
|
8
|
+
return (
|
|
9
|
+
<>
|
|
10
|
+
<Caption marginBottom="sm">Default Variant</Caption>
|
|
11
|
+
<Nav
|
|
12
|
+
link="#"
|
|
13
|
+
orientation="horizontal"
|
|
14
|
+
{...props}
|
|
15
|
+
>
|
|
16
|
+
<NavItem
|
|
17
|
+
link="#"
|
|
18
|
+
text="About"
|
|
19
|
+
{...props}
|
|
20
|
+
/>
|
|
21
|
+
<NavItem
|
|
22
|
+
active
|
|
23
|
+
link="#"
|
|
24
|
+
text="Case Studies"
|
|
25
|
+
{...props}
|
|
26
|
+
/>
|
|
27
|
+
<NavItem
|
|
28
|
+
disabled
|
|
29
|
+
link="#"
|
|
30
|
+
text="Service"
|
|
31
|
+
{...props}
|
|
32
|
+
/>
|
|
33
|
+
<NavItem
|
|
34
|
+
link="#"
|
|
35
|
+
text="Contacts"
|
|
36
|
+
{...props}
|
|
37
|
+
/>
|
|
38
|
+
</Nav>
|
|
39
|
+
<Caption
|
|
40
|
+
marginBottom="sm"
|
|
41
|
+
marginTop="lg"
|
|
42
|
+
>
|
|
43
|
+
Subtle Variant
|
|
44
|
+
</Caption>
|
|
45
|
+
<Nav
|
|
46
|
+
link="#"
|
|
47
|
+
orientation="horizontal"
|
|
48
|
+
variant="subtle"
|
|
49
|
+
{...props}
|
|
50
|
+
>
|
|
51
|
+
<NavItem
|
|
52
|
+
link="#"
|
|
53
|
+
text="About"
|
|
54
|
+
{...props}
|
|
55
|
+
/>
|
|
56
|
+
<NavItem
|
|
57
|
+
active
|
|
58
|
+
link="#"
|
|
59
|
+
text="Case Studies"
|
|
60
|
+
{...props}
|
|
61
|
+
/>
|
|
62
|
+
<NavItem
|
|
63
|
+
disabled
|
|
64
|
+
link="#"
|
|
65
|
+
text="Service"
|
|
66
|
+
{...props}
|
|
67
|
+
/>
|
|
68
|
+
<NavItem
|
|
69
|
+
link="#"
|
|
70
|
+
text="Contacts"
|
|
71
|
+
{...props}
|
|
72
|
+
/>
|
|
73
|
+
</Nav>
|
|
74
|
+
<Caption
|
|
75
|
+
marginBottom="sm"
|
|
76
|
+
marginTop="lg"
|
|
77
|
+
>
|
|
78
|
+
Bold Variant
|
|
79
|
+
</Caption>
|
|
80
|
+
<Nav
|
|
81
|
+
link="#"
|
|
82
|
+
orientation="horizontal"
|
|
83
|
+
variant="bold"
|
|
84
|
+
{...props}
|
|
85
|
+
>
|
|
86
|
+
<NavItem
|
|
87
|
+
link="#"
|
|
88
|
+
text="About"
|
|
89
|
+
{...props}
|
|
90
|
+
/>
|
|
91
|
+
<NavItem
|
|
92
|
+
active
|
|
93
|
+
link="#"
|
|
94
|
+
text="Case Studies"
|
|
95
|
+
{...props}
|
|
96
|
+
/>
|
|
97
|
+
<NavItem
|
|
98
|
+
disabled
|
|
99
|
+
link="#"
|
|
100
|
+
text="Service"
|
|
101
|
+
{...props}
|
|
102
|
+
/>
|
|
103
|
+
<NavItem
|
|
104
|
+
link="#"
|
|
105
|
+
text="Contacts"
|
|
106
|
+
{...props}
|
|
107
|
+
/>
|
|
108
|
+
</Nav>
|
|
109
|
+
</>
|
|
110
|
+
)
|
|
111
|
+
}
|
|
112
|
+
|
|
113
|
+
export default HorizontalNavDisabled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `disabled` prop on a `navItem`/`nav_item` within a horizontal nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item.
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
<%= pb_rails("flex", props: { justify: "between" }) do %>
|
|
2
|
+
<%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
|
|
3
|
+
<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Default Variant" }) %>
|
|
4
|
+
<%= pb_rails("nav") do %>
|
|
5
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
6
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
7
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
|
|
8
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
9
|
+
<% end %>
|
|
10
|
+
<% end %>
|
|
11
|
+
<%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
|
|
12
|
+
<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Subtle Variant" }) %>
|
|
13
|
+
<%= pb_rails("nav", props:{variant: "subtle"}) do %>
|
|
14
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
15
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
16
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
|
|
17
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
18
|
+
<% end %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<%= pb_rails("flex", props: { orientation:"column", wrap: true }) do %>
|
|
21
|
+
<%= pb_rails("caption", props: { margin_bottom: "sm", text: "Bold Variant" }) %>
|
|
22
|
+
<%= pb_rails("nav", props:{variant: "bold"}) do %>
|
|
23
|
+
<%= pb_rails("nav/item", props: { text: "About", link: "#" }) %>
|
|
24
|
+
<%= pb_rails("nav/item", props: { text: "Case Studies", link: "#", active: true }) %>
|
|
25
|
+
<%= pb_rails("nav/item", props: { text: "Service ", link: "#", disabled: true }) %>
|
|
26
|
+
<%= pb_rails("nav/item", props: { text: "Contacts", link: "#" }) %>
|
|
27
|
+
<% end %>
|
|
28
|
+
<% end %>
|
|
29
|
+
|
|
30
|
+
<% end %>
|
|
@@ -0,0 +1,117 @@
|
|
|
1
|
+
import React from 'react'
|
|
2
|
+
|
|
3
|
+
import Nav from '../_nav'
|
|
4
|
+
import NavItem from '../_item'
|
|
5
|
+
import Caption from '../../pb_caption/_caption'
|
|
6
|
+
import Flex from '../../pb_flex/_flex'
|
|
7
|
+
|
|
8
|
+
const VerticalNavDisabled = (props) => {
|
|
9
|
+
return (
|
|
10
|
+
<Flex justify="between"
|
|
11
|
+
wrap
|
|
12
|
+
>
|
|
13
|
+
<Flex orientation="column">
|
|
14
|
+
<Caption marginBottom="sm">Default Variant</Caption>
|
|
15
|
+
<Nav
|
|
16
|
+
link="#"
|
|
17
|
+
{...props}
|
|
18
|
+
>
|
|
19
|
+
<NavItem
|
|
20
|
+
link="#"
|
|
21
|
+
text="About"
|
|
22
|
+
{...props}
|
|
23
|
+
/>
|
|
24
|
+
<NavItem
|
|
25
|
+
active
|
|
26
|
+
link="#"
|
|
27
|
+
text="Case Studies"
|
|
28
|
+
{...props}
|
|
29
|
+
/>
|
|
30
|
+
<NavItem
|
|
31
|
+
disabled
|
|
32
|
+
link="#"
|
|
33
|
+
text="Service"
|
|
34
|
+
{...props}
|
|
35
|
+
/>
|
|
36
|
+
<NavItem
|
|
37
|
+
link="#"
|
|
38
|
+
text="Contacts"
|
|
39
|
+
{...props}
|
|
40
|
+
/>
|
|
41
|
+
</Nav>
|
|
42
|
+
</Flex>
|
|
43
|
+
<Flex orientation="column">
|
|
44
|
+
<Caption
|
|
45
|
+
marginBottom="sm"
|
|
46
|
+
>
|
|
47
|
+
Subtle Variant
|
|
48
|
+
</Caption>
|
|
49
|
+
<Nav
|
|
50
|
+
link="#"
|
|
51
|
+
variant="subtle"
|
|
52
|
+
{...props}
|
|
53
|
+
>
|
|
54
|
+
<NavItem
|
|
55
|
+
link="#"
|
|
56
|
+
text="About"
|
|
57
|
+
{...props}
|
|
58
|
+
/>
|
|
59
|
+
<NavItem
|
|
60
|
+
active
|
|
61
|
+
link="#"
|
|
62
|
+
text="Case Studies"
|
|
63
|
+
{...props}
|
|
64
|
+
/>
|
|
65
|
+
<NavItem
|
|
66
|
+
disabled
|
|
67
|
+
link="#"
|
|
68
|
+
text="Service"
|
|
69
|
+
{...props}
|
|
70
|
+
/>
|
|
71
|
+
<NavItem
|
|
72
|
+
link="#"
|
|
73
|
+
text="Contacts"
|
|
74
|
+
{...props}
|
|
75
|
+
/>
|
|
76
|
+
</Nav>
|
|
77
|
+
</Flex>
|
|
78
|
+
<Flex orientation="column">
|
|
79
|
+
<Caption
|
|
80
|
+
marginBottom="sm"
|
|
81
|
+
>
|
|
82
|
+
Bold Variant
|
|
83
|
+
</Caption>
|
|
84
|
+
<Nav
|
|
85
|
+
link="#"
|
|
86
|
+
variant="bold"
|
|
87
|
+
{...props}
|
|
88
|
+
>
|
|
89
|
+
<NavItem
|
|
90
|
+
link="#"
|
|
91
|
+
text="About"
|
|
92
|
+
{...props}
|
|
93
|
+
/>
|
|
94
|
+
<NavItem
|
|
95
|
+
active
|
|
96
|
+
link="#"
|
|
97
|
+
text="Case Studies"
|
|
98
|
+
{...props}
|
|
99
|
+
/>
|
|
100
|
+
<NavItem
|
|
101
|
+
disabled
|
|
102
|
+
link="#"
|
|
103
|
+
text="Service"
|
|
104
|
+
{...props}
|
|
105
|
+
/>
|
|
106
|
+
<NavItem
|
|
107
|
+
link="#"
|
|
108
|
+
text="Contacts"
|
|
109
|
+
{...props}
|
|
110
|
+
/>
|
|
111
|
+
</Nav>
|
|
112
|
+
</Flex>
|
|
113
|
+
</Flex>
|
|
114
|
+
)
|
|
115
|
+
}
|
|
116
|
+
|
|
117
|
+
export default VerticalNavDisabled
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
Use the `disabled` prop on a `navItem`/`nav_item` within a vertical nav to set it as disabled. This will render the UI as disabled, prevent clicks and not allow for tabIndex to access the item.
|
|
@@ -18,6 +18,8 @@ examples:
|
|
|
18
18
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
19
19
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
20
20
|
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
|
21
|
+
- horizontal_nav_disabled: Horizontal Nav With Disabled Item
|
|
22
|
+
- vertical_nav_disabled: Vertical Nav With Disabled Item
|
|
21
23
|
- block_nav: Block
|
|
22
24
|
- block_no_title_nav: Without Title
|
|
23
25
|
- new_tab: Open in a New Tab
|
|
@@ -44,6 +46,8 @@ examples:
|
|
|
44
46
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
45
47
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
46
48
|
- horizontal_nav_extendedunderline: Horizontal Nav With Extended Underline
|
|
49
|
+
- horizontal_nav_disabled: Horizontal Nav With Disabled Item
|
|
50
|
+
- vertical_nav_disabled: Vertical Nav With Disabled Item
|
|
47
51
|
- block_nav: Block
|
|
48
52
|
- block_no_title_nav: Without Title
|
|
49
53
|
- new_tab: Open in a New Tab
|
|
@@ -20,4 +20,6 @@ export { default as NavWithFontControl } from "./_nav_with_font_control.jsx"
|
|
|
20
20
|
export { default as NavWithSpacingControl } from "./_nav_with_spacing_control.jsx"
|
|
21
21
|
export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_spacing.jsx"
|
|
22
22
|
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
|
23
|
-
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
|
23
|
+
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
|
24
|
+
export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
|
|
25
|
+
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|