playbook_ui 13.5.0 → 13.6.0.pre.alpha.play845allkitsbytypes1219
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/_playbook.scss +1 -0
- data/app/pb_kits/playbook/pb_body/_body.tsx +1 -1
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb +12 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +50 -0
- data/app/pb_kits/playbook/pb_body/docs/_body_truncate.md +4 -0
- data/app/pb_kits/playbook/pb_body/docs/example.yml +3 -0
- data/app/pb_kits/playbook/pb_body/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_caption/_caption.tsx +1 -1
- data/app/pb_kits/playbook/pb_card/card.rb +1 -1
- data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +1 -1
- data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +26 -22
- data/app/pb_kits/playbook/pb_collapsible/index.js +4 -0
- data/app/pb_kits/playbook/pb_dashboard_value/dashboard_value.rb +2 -2
- data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +1 -1
- data/app/pb_kits/playbook/pb_date_picker/date_picker.rb +2 -2
- data/app/pb_kits/playbook/pb_date_time_stacked/_date_time_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_file_upload/file_upload.rb +1 -1
- data/app/pb_kits/playbook/pb_flex/_flex_item.scss +0 -8
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +1 -4
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +1 -9
- data/app/pb_kits/playbook/pb_nav/_collapsible_nav.scss +6 -6
- data/app/pb_kits/playbook/pb_passphrase/passphrase.rb +1 -1
- data/app/pb_kits/playbook/pb_radio/radio.rb +1 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/EditorButton.tsx +3 -1
- data/app/pb_kits/playbook/pb_rich_text_editor/TipTap/MoreExtensionsDropdown.tsx +2 -0
- data/app/pb_kits/playbook/pb_select/select.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card/selectable_card.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_card_icon/selectable_card_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_icon/selectable_icon.rb +1 -1
- data/app/pb_kits/playbook/pb_selectable_list/selectable_list_item.rb +1 -1
- data/app/pb_kits/playbook/pb_source/source.rb +1 -1
- data/app/pb_kits/playbook/pb_table/docs/_table_header.html.erb +31 -27
- data/app/pb_kits/playbook/pb_table/docs/_table_header.md +8 -1
- data/app/pb_kits/playbook/pb_table/styles/_table_header.scss +20 -1
- data/app/pb_kits/playbook/pb_table/table_header.html.erb +23 -49
- data/app/pb_kits/playbook/pb_table/table_header.rb +34 -6
- data/app/pb_kits/playbook/pb_text_input/text_input.rb +2 -2
- data/app/pb_kits/playbook/pb_time_stacked/_time_stacked.tsx +1 -1
- data/app/pb_kits/playbook/pb_title/_title.scss +15 -14
- data/app/pb_kits/playbook/pb_title/_title.tsx +4 -4
- data/app/pb_kits/playbook/pb_title/_title_mixin.scss +6 -6
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb +12 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +53 -0
- data/app/pb_kits/playbook/pb_title/docs/_title_truncate.md +4 -0
- data/app/pb_kits/playbook/pb_title/docs/example.yml +2 -0
- data/app/pb_kits/playbook/pb_title/docs/index.js +1 -0
- data/app/pb_kits/playbook/pb_title/title.rb +1 -1
- data/app/pb_kits/playbook/pb_toggle/toggle.rb +1 -1
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -1
- data/app/pb_kits/playbook/tokens/_overflow.scss +10 -0
- data/app/pb_kits/playbook/utilities/_overflow.scss +22 -0
- data/app/pb_kits/playbook/utilities/globalProps.ts +23 -8
- data/dist/menu.yml +235 -110
- data/dist/playbook-rails.js +5 -5
- data/lib/playbook/classnames.rb +1 -0
- data/lib/playbook/kit_base.rb +4 -2
- data/lib/playbook/overflow.rb +33 -0
- data/lib/playbook/props/base.rb +1 -1
- data/lib/playbook/props/hash.rb +1 -1
- data/lib/playbook/version.rb +2 -2
- metadata +16 -7
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 3e6b57d0d26183afb97a6a5faf415a98dbd1bf20c9d8ef15613e11dfb951571f
|
4
|
+
data.tar.gz: efc28ffbd1362659ea4fb5204006e0415246a7d4dacf490be1ebc7edbb646ca9
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 4352cfd4a202df9b47db9ea1dd9690346069ee7fc81c88363d08d4b2299de5aefe292214b7a5386e7a85c7a68d169ec820c27f114f69b90c082b974774b5be91
|
7
|
+
data.tar.gz: b0d2d42a9e94c59732d2f9791ecbdfadb0be34e90d203bc7e22eda20e35dcac172e1daab4f3781c6d51f49c4f015607476a02e56ea5159031f1a05b6b4c554e2
|
@@ -24,7 +24,7 @@ type BodyProps = {
|
|
24
24
|
} & GlobalProps
|
25
25
|
|
26
26
|
const Body = (props: BodyProps): React.ReactElement => {
|
27
|
-
if (props.variant) deprecatedProps(
|
27
|
+
if (props.variant) deprecatedProps() //status prop is deprecated, use color instead please
|
28
28
|
const {
|
29
29
|
aria = {},
|
30
30
|
children,
|
@@ -0,0 +1,12 @@
|
|
1
|
+
<% lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!" %>
|
2
|
+
|
3
|
+
<%= pb_rails("flex", props: { orientation: "column", max_width: "md" }) do %>
|
4
|
+
<%= pb_rails("caption", props: { text: "After first row" }) %>
|
5
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "1", margin_bottom: "md" }) %>
|
6
|
+
|
7
|
+
<%= pb_rails("caption", props: { text: "After second row" }) %>
|
8
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "2", margin_bottom: "md" }) %>
|
9
|
+
|
10
|
+
<%= pb_rails("caption", props: { text: "After third row" }) %>
|
11
|
+
<%= pb_rails("body", props: { text: lorem, truncate: "3" }) %>
|
12
|
+
<% end %>
|
@@ -0,0 +1,50 @@
|
|
1
|
+
import React from 'react';
|
2
|
+
|
3
|
+
import Body from '../_body';
|
4
|
+
import Caption from '../../pb_caption/_caption'
|
5
|
+
import Flex from '../../pb_flex/_flex'
|
6
|
+
|
7
|
+
const BodyTruncate = (props) => {
|
8
|
+
const lorem = "Lorem ipsum dolor sit amet consectetur adipisicing elit. Veritatis, minus. Nisi beatae voluptatum labore sequi. Nemo accusantium corrupti, reiciendis magnam tenetur perferendis esse pariatur voluptas eaque hic vel rem nihil quidem dolorum ex dolor, libero ullam placeat, sapiente eos. Cumque obcaecati dignissimos molestiae, minima quibusdam sint maxime libero accusantium animi quis quia maiores enim ipsum, esse, modi laudantium illum error!"
|
9
|
+
|
10
|
+
return (
|
11
|
+
<Flex
|
12
|
+
maxWidth="md"
|
13
|
+
orientation="column"
|
14
|
+
>
|
15
|
+
<Caption
|
16
|
+
text="After first row"
|
17
|
+
{...props}
|
18
|
+
/>
|
19
|
+
<Body
|
20
|
+
marginBottom="md"
|
21
|
+
text={lorem}
|
22
|
+
truncate="1"
|
23
|
+
{...props}
|
24
|
+
/>
|
25
|
+
|
26
|
+
<Caption
|
27
|
+
text="After second row"
|
28
|
+
{...props}
|
29
|
+
/>
|
30
|
+
<Body
|
31
|
+
marginBottom="md"
|
32
|
+
text={lorem}
|
33
|
+
truncate="2"
|
34
|
+
{...props}
|
35
|
+
/>
|
36
|
+
|
37
|
+
<Caption
|
38
|
+
text="After third row"
|
39
|
+
{...props}
|
40
|
+
/>
|
41
|
+
<Body
|
42
|
+
text={lorem}
|
43
|
+
truncate="3"
|
44
|
+
{...props}
|
45
|
+
/>
|
46
|
+
</Flex>
|
47
|
+
)
|
48
|
+
}
|
49
|
+
|
50
|
+
export default BodyTruncate
|
@@ -4,8 +4,11 @@ examples:
|
|
4
4
|
- body_block: Block
|
5
5
|
- body_articles: Best settings for articles
|
6
6
|
- body_styled: Styled tags
|
7
|
+
- body_truncate: Truncate
|
8
|
+
|
7
9
|
react:
|
8
10
|
- body_light: Default
|
9
11
|
- body_block: Block
|
10
12
|
- body_articles: Best settings for articles
|
11
13
|
- body_styled: Styled tags
|
14
|
+
- body_truncate: Truncate
|
@@ -2,3 +2,4 @@ export { default as BodyLight } from './_body_light.jsx'
|
|
2
2
|
export { default as BodyBlock } from './_body_block.jsx'
|
3
3
|
export { default as BodyStyled } from './_body_styled.jsx'
|
4
4
|
export { default as BodyArticles } from './_body_articles.jsx'
|
5
|
+
export { default as BodyTruncate } from './_body_truncate.jsx'
|
@@ -17,7 +17,7 @@ type CaptionProps = {
|
|
17
17
|
} & GlobalProps;
|
18
18
|
|
19
19
|
const Caption = (props: CaptionProps): React.ReactElement => {
|
20
|
-
if (props.variant) deprecatedProps(
|
20
|
+
if (props.variant) deprecatedProps() //variant prop is deprecated, use color instead
|
21
21
|
const {
|
22
22
|
aria = {},
|
23
23
|
children,
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbCard
|
5
5
|
class Card < Playbook::KitBase
|
6
6
|
prop :selected, type: Playbook::Props::Boolean, default: false
|
7
|
-
prop :highlight, type: Playbook::Props::
|
7
|
+
prop :highlight, type: Playbook::Props::HashProp,
|
8
8
|
default: {}
|
9
9
|
prop :tag, type: Playbook::Props::Enum,
|
10
10
|
values: %w[div section footer header article aside main nav],
|
@@ -1,25 +1,29 @@
|
|
1
|
-
export const showElement = (elem:
|
2
|
-
|
3
|
-
|
4
|
-
|
5
|
-
|
6
|
-
|
7
|
-
|
8
|
-
|
9
|
-
|
10
|
-
|
1
|
+
export const showElement = (elem:any) => {
|
2
|
+
elem.style.display = 'block';
|
3
|
+
const height = elem.scrollHeight + 'px'; // Get its height
|
4
|
+
elem.style.height = height; // Update the max-height
|
5
|
+
elem.classList.add('is-visible');
|
6
|
+
elem.style.overflow = "hidden"
|
7
|
+
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
8
|
+
window.setTimeout(() => {
|
9
|
+
elem.style.height = '';
|
10
|
+
elem.style.overflow = "visible"
|
11
|
+
}, 300);
|
12
|
+
};
|
11
13
|
|
12
|
-
|
13
|
-
|
14
|
+
export const hideElement = (elem:any) => {
|
15
|
+
elem.style.height = elem.scrollHeight + 'px';
|
14
16
|
|
15
|
-
|
16
|
-
|
17
|
-
|
18
|
-
|
19
|
-
|
17
|
+
window.setTimeout(() => {
|
18
|
+
elem.style.height = '0';
|
19
|
+
elem.style.paddingTop = '0';
|
20
|
+
elem.style.paddingBottom = '0';
|
21
|
+
elem.style.overflow = "hidden"
|
22
|
+
}, 1);
|
20
23
|
|
21
|
-
|
22
|
-
|
23
|
-
|
24
|
-
|
25
|
-
};
|
24
|
+
// When the transition is complete, hide it
|
25
|
+
window.setTimeout(() => {
|
26
|
+
elem.classList.remove('is-visible');
|
27
|
+
elem.style.overflow = ""
|
28
|
+
}, 300);
|
29
|
+
};
|
@@ -33,10 +33,12 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
33
33
|
const height = getHeight()
|
34
34
|
elem.classList.add('is-visible')
|
35
35
|
elem.style.height = height // Update the max-height
|
36
|
+
elem.style.overflow = "hidden"
|
36
37
|
|
37
38
|
// Once the transition is complete, remove the inline max-height so the content can scale responsively
|
38
39
|
window.setTimeout(() => {
|
39
40
|
elem.style.height = ''
|
41
|
+
elem.style.overflow = "visible"
|
40
42
|
}, 300)
|
41
43
|
}
|
42
44
|
|
@@ -48,11 +50,13 @@ export default class PbCollapsible extends PbEnhancedElement {
|
|
48
50
|
elem.style.height = '0'
|
49
51
|
elem.style.paddingTop = '0'
|
50
52
|
elem.style.paddingBottom = '0'
|
53
|
+
elem.style.overflow = "hidden"
|
51
54
|
}, 1)
|
52
55
|
|
53
56
|
// When the transition is complete, hide it
|
54
57
|
window.setTimeout(() => {
|
55
58
|
elem.classList.remove('is-visible')
|
59
|
+
elem.style.overflow = ""
|
56
60
|
}, 300)
|
57
61
|
}
|
58
62
|
|
@@ -6,10 +6,10 @@ module Playbook
|
|
6
6
|
prop :align, type: Playbook::Props::Enum,
|
7
7
|
values: %w[left center right],
|
8
8
|
default: "left"
|
9
|
-
prop :stat_change, type: Playbook::Props::
|
9
|
+
prop :stat_change, type: Playbook::Props::HashProp,
|
10
10
|
default: {}
|
11
11
|
prop :stat_label
|
12
|
-
prop :stat_value, type: Playbook::Props::
|
12
|
+
prop :stat_value, type: Playbook::Props::HashProp,
|
13
13
|
default: {}
|
14
14
|
|
15
15
|
def formatted_stat_value
|
@@ -49,7 +49,7 @@ type DatePickerProps = {
|
|
49
49
|
} & GlobalProps
|
50
50
|
|
51
51
|
const DatePicker = (props: DatePickerProps): React.ReactElement => {
|
52
|
-
if (props.plugins) deprecatedProps(
|
52
|
+
if (props.plugins) deprecatedProps()
|
53
53
|
|
54
54
|
const {
|
55
55
|
allowInput = false,
|
@@ -34,9 +34,9 @@ module Playbook
|
|
34
34
|
default: false
|
35
35
|
prop :label, type: Playbook::Props::String,
|
36
36
|
default: "Date Picker"
|
37
|
-
prop :input_aria, type: Playbook::Props::
|
37
|
+
prop :input_aria, type: Playbook::Props::HashProp,
|
38
38
|
default: {}
|
39
|
-
prop :input_data, type: Playbook::Props::
|
39
|
+
prop :input_data, type: Playbook::Props::HashProp,
|
40
40
|
default: {}
|
41
41
|
prop :max_date, type: Playbook::Props::String
|
42
42
|
prop :min_date, type: Playbook::Props::String
|
@@ -44,14 +44,6 @@
|
|
44
44
|
order: -1;
|
45
45
|
}
|
46
46
|
|
47
|
-
$overflow_values: auto, hidden, inherit, initial, scroll, visible;
|
48
|
-
|
49
|
-
@each $value in $overflow_values {
|
50
|
-
&.overflow_#{$value} {
|
51
|
-
overflow: #{$value}
|
52
|
-
}
|
53
|
-
}
|
54
|
-
|
55
47
|
@for $i from 0 through 12 {
|
56
48
|
&[class*=_flex_#{$i}]{
|
57
49
|
flex: $i;
|
@@ -8,7 +8,6 @@ type FlexItemPropTypes = {
|
|
8
8
|
grow?: boolean,
|
9
9
|
shrink?: boolean,
|
10
10
|
className?: string,
|
11
|
-
overflow?: "auto" | "hidden" | "initial" | "inherit" | "scroll" | "visible",
|
12
11
|
order?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 'first' | 'none',
|
13
12
|
alignSelf?: "start" | "end" | "center" | "stretch" | null,
|
14
13
|
displayFlex?: boolean
|
@@ -20,7 +19,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
20
19
|
className,
|
21
20
|
fixedSize,
|
22
21
|
grow,
|
23
|
-
overflow = null,
|
24
22
|
shrink,
|
25
23
|
flex = 'none',
|
26
24
|
order = 'none',
|
@@ -30,7 +28,6 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
30
28
|
const growClass = grow === true ? 'grow' : ''
|
31
29
|
const displayFlexClass = displayFlex === true ? `display_flex_${displayFlex}` : ''
|
32
30
|
const flexClass = flex !== 'none' ? `flex_${flex}` : ''
|
33
|
-
const overflowClass = overflow ? `overflow_${overflow}` : ''
|
34
31
|
const shrinkClass = shrink === true ? 'shrink' : ''
|
35
32
|
const alignSelfClass = alignSelf ? `align_self_${alignSelf}` : ''
|
36
33
|
const fixedStyle =
|
@@ -39,7 +36,7 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
39
36
|
|
40
37
|
return (
|
41
38
|
<div
|
42
|
-
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass),
|
39
|
+
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
43
40
|
style={fixedStyle}
|
44
41
|
>
|
45
42
|
{children}
|
@@ -9,10 +9,6 @@ module Playbook
|
|
9
9
|
prop :shrink, type: Playbook::Props::Boolean,
|
10
10
|
default: false
|
11
11
|
|
12
|
-
prop :overflow, type: Playbook::Props::Enum,
|
13
|
-
values: %w[auto hidden inherit initial scroll visible] + [nil],
|
14
|
-
default: nil
|
15
|
-
|
16
12
|
prop :align_self, type: Playbook::Props::Enum,
|
17
13
|
values: %w[start center end stretch] + [nil],
|
18
14
|
default: nil
|
@@ -21,7 +17,7 @@ module Playbook
|
|
21
17
|
default: false
|
22
18
|
|
23
19
|
def classname
|
24
|
-
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) +
|
20
|
+
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
|
25
21
|
end
|
26
22
|
|
27
23
|
def style_value
|
@@ -46,10 +42,6 @@ module Playbook
|
|
46
42
|
grow ? "grow" : nil
|
47
43
|
end
|
48
44
|
|
49
|
-
def overflow_class
|
50
|
-
overflow ? " overflow_#{overflow}" : ""
|
51
|
-
end
|
52
|
-
|
53
45
|
def shrink_class
|
54
46
|
shrink ? "shrink" : nil
|
55
47
|
end
|
@@ -33,7 +33,7 @@
|
|
33
33
|
margin: 0;
|
34
34
|
}
|
35
35
|
&[class*="_active"] {
|
36
|
-
|
36
|
+
>.pb_collapsible_main_kit {
|
37
37
|
background-color: $active_light;
|
38
38
|
}
|
39
39
|
}
|
@@ -46,7 +46,7 @@
|
|
46
46
|
}
|
47
47
|
}
|
48
48
|
&[class*="_active"] {
|
49
|
-
|
49
|
+
>.pb_collapsible_main_kit {
|
50
50
|
background-color: mix($white, $card_dark, 20%);
|
51
51
|
.pb_nav_list_item_text_collapsible,
|
52
52
|
svg {
|
@@ -63,7 +63,7 @@
|
|
63
63
|
.pb_collapsible_kit {
|
64
64
|
&[class*="_active"] {
|
65
65
|
background-color: unset;
|
66
|
-
|
66
|
+
>.pb_collapsible_main_kit {
|
67
67
|
background-color: $primary;
|
68
68
|
border-radius: $border_rad_heavier;
|
69
69
|
.pb_nav_list_item_text_collapsible,
|
@@ -94,7 +94,7 @@
|
|
94
94
|
&.dark {
|
95
95
|
.pb_collapsible_kit {
|
96
96
|
&[class*="_active"] {
|
97
|
-
|
97
|
+
>.pb_collapsible_main_kit {
|
98
98
|
background-color: $primary;
|
99
99
|
}
|
100
100
|
.pb_nav_list_item_link {
|
@@ -112,7 +112,7 @@
|
|
112
112
|
.pb_collapsible_kit {
|
113
113
|
&[class*="_active"] {
|
114
114
|
background-color: unset;
|
115
|
-
|
115
|
+
>.pb_collapsible_main_kit {
|
116
116
|
background-color: $active_light;
|
117
117
|
border-radius: $border_rad_heavier;
|
118
118
|
.pb_nav_list_item_text_collapsible,
|
@@ -128,7 +128,7 @@
|
|
128
128
|
&.dark {
|
129
129
|
.pb_collapsible_kit {
|
130
130
|
&[class*="_active"] {
|
131
|
-
|
131
|
+
>.pb_collapsible_main_kit {
|
132
132
|
background-color: mix($white, $card_dark, 20%) !important;
|
133
133
|
.pb_nav_list_item_text_collapsible,
|
134
134
|
svg {
|
@@ -4,7 +4,7 @@ module Playbook
|
|
4
4
|
module PbPassphrase
|
5
5
|
class Passphrase < Playbook::KitBase
|
6
6
|
prop :confirmation, type: Playbook::Props::Boolean, default: false
|
7
|
-
prop :input_props, type: Playbook::Props::
|
7
|
+
prop :input_props, type: Playbook::Props::HashProp, default: {}
|
8
8
|
prop :label
|
9
9
|
prop :show_tips_below, type: Playbook::Props::Enum,
|
10
10
|
values: %w[always xs sm md lg xl],
|
@@ -11,7 +11,7 @@ module Playbook
|
|
11
11
|
default: false
|
12
12
|
prop :error, type: Playbook::Props::Boolean,
|
13
13
|
default: false
|
14
|
-
prop :input_options, type: Playbook::Props::
|
14
|
+
prop :input_options, type: Playbook::Props::HashProp,
|
15
15
|
default: {}
|
16
16
|
prop :name, type: Playbook::Props::String,
|
17
17
|
default: "radio_name"
|
@@ -6,7 +6,7 @@ require "action_view"
|
|
6
6
|
module Playbook
|
7
7
|
module PbSelect
|
8
8
|
class Select < Playbook::KitBase
|
9
|
-
prop :attributes, type: Playbook::Props::
|
9
|
+
prop :attributes, type: Playbook::Props::HashProp,
|
10
10
|
default: {}
|
11
11
|
prop :blank_selection
|
12
12
|
prop :compact, type: Playbook::Props::Boolean, default: false
|
@@ -10,7 +10,7 @@ module Playbook
|
|
10
10
|
prop :type, type: Playbook::Props::Enum,
|
11
11
|
values: %w[user retail inbound outbound prospecting events referral],
|
12
12
|
default: "inbound"
|
13
|
-
prop :user, type: Playbook::Props::
|
13
|
+
prop :user, type: Playbook::Props::HashProp, default: {}
|
14
14
|
|
15
15
|
def type_text
|
16
16
|
if type == "user" || (type == "referral" && user.present?)
|
@@ -2,27 +2,31 @@
|
|
2
2
|
<thead>
|
3
3
|
<tr>
|
4
4
|
<%= pb_rails("table/table_header", props: {
|
5
|
-
|
6
|
-
|
5
|
+
text: "Territory",
|
6
|
+
id: "territory",
|
7
7
|
sort_menu: [
|
8
|
-
{ item: "
|
9
|
-
{ item: "
|
8
|
+
{ item: "Territory", link: "?sort=territory_desc", active: params["sort"] == "territory_desc", direction: "desc" },
|
9
|
+
{ item: "Territory", link: "?sort=territory_asc", active: params["sort"] == "territory_asc", direction: "asc" }
|
10
10
|
],
|
11
11
|
}) %>
|
12
12
|
<%= pb_rails("table/table_header", props: {
|
13
|
-
|
14
|
-
|
13
|
+
id: "name",
|
14
|
+
text: "Full Name",
|
15
|
+
colspan: 2,
|
15
16
|
sort_menu: [
|
16
|
-
{ item: "
|
17
|
-
{ item: "
|
17
|
+
{ item: "First Name Descending", link: "?sort=firstname_desc", active: params["sort"] == "firstname_desc", direction: "desc" },
|
18
|
+
{ item: "First Name Ascending", link: "?sort=firstname_asc", active: params["sort"] == "firstname_asc", direction: "asc" },
|
19
|
+
{ item: "Last Name Descending", link: "?sort=lastname_desc", active: params["sort"] == "lastname_desc", direction: "desc" },
|
20
|
+
{ item: "Last Name Ascending", link: "?sort=lastname_asc", active: params["sort"] == "lastname_asc", direction: "asc" }
|
18
21
|
],
|
19
22
|
}) %>
|
20
23
|
<%= pb_rails("table/table_header", props: {
|
21
|
-
text: "
|
22
|
-
id: "
|
24
|
+
text: "Age",
|
25
|
+
id: "age",
|
26
|
+
sort_dropdown: true,
|
23
27
|
sort_menu: [
|
24
|
-
{ item: "
|
25
|
-
{ item: "
|
28
|
+
{ item: "Age Descending", link: "?sort=age_desc", active: params["sort"] == "age_desc", direction: "desc" },
|
29
|
+
{ item: "Age Ascending", link: "?sort=age_asc", active: params["sort"] == "age_asc", direction: "asc" }
|
26
30
|
],
|
27
31
|
}) %>
|
28
32
|
<%= pb_rails("table/table_header", props: { text: "Job Title" }) %>
|
@@ -30,25 +34,25 @@
|
|
30
34
|
</thead>
|
31
35
|
<tbody>
|
32
36
|
<tr>
|
33
|
-
<td>
|
34
|
-
<td>Name
|
35
|
-
<td>
|
36
|
-
<td>
|
37
|
-
<td>
|
37
|
+
<td>Ter 1</td>
|
38
|
+
<td>First Name 1</td>
|
39
|
+
<td>Last Name 1</td>
|
40
|
+
<td>Age 1</td>
|
41
|
+
<td>Job 1</td>
|
38
42
|
</tr>
|
39
43
|
<tr>
|
40
|
-
<td>
|
41
|
-
<td>Name 2</td>
|
42
|
-
<td>
|
43
|
-
<td>
|
44
|
-
<td>
|
44
|
+
<td>Ter 2</td>
|
45
|
+
<td>First Name 2</td>
|
46
|
+
<td>Last Name 2</td>
|
47
|
+
<td>Age 2</td>
|
48
|
+
<td>Job 2</td>
|
45
49
|
</tr>
|
46
50
|
<tr>
|
47
|
-
<td>
|
48
|
-
<td>Name
|
49
|
-
<td>
|
50
|
-
<td>
|
51
|
-
<td>
|
51
|
+
<td>Ter 3</td>
|
52
|
+
<td>First Name 3</td>
|
53
|
+
<td>Last Name 3</td>
|
54
|
+
<td>Age 3</td>
|
55
|
+
<td>Job 3</td>
|
52
56
|
</tr>
|
53
57
|
</tbody>
|
54
58
|
<% end %>
|
@@ -1 +1,8 @@
|
|
1
|
-
|
1
|
+
The `table_header` subcomponent creates `<th>` elements and optionally accepts:
|
2
|
+
|
3
|
+
* `colspan` (number) for setting column span
|
4
|
+
* `sort_menu` accepts sort options as an array of `item` objects.
|
5
|
+
presence of `sort_menu` enables the sort link within the header
|
6
|
+
* `sort_dropdown` (boolean) optionally declares that (true) clicking a header's sort link opens a dropdown of sort options, or (false) each sort link click cycles through available sort_menu items in the order they are passed
|
7
|
+
* passing a valid `colspan` will render sort options within a dropdown by default, without requiring `sort_dropdown` explicitly. Alternatively, the default sort dropdown can be prevented on headers with `colspan` by setting `sort_dropdown: false`, which reverts the column to sorting to multi-click default (each click of the sort link cycles through the available sort_menu items in the order they are passed)
|
8
|
+
* `id` (string) is required for headers that have a dropdown (for popover reference); otherwise they are optional
|