playbook_ui 14.5.0.pre.alpha.PLAY15814066 → 14.5.0.pre.alpha.javascriptassets3926
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/pb_advanced_table/index.js +0 -60
- data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
- data/app/pb_kits/playbook/pb_card/_card.tsx +1 -5
- data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
- data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
- data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
- data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
- data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
- data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
- data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
- data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +228 -195
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
- data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
- data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
- data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
- data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
- data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
- data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
- data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
- data/dist/chunks/{_weekday_stacked-CaNCkN7U.js → _weekday_stacked-DumiyWjh.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/mark.js +1 -0
- data/dist/playbook-doc.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/lib/playbook/kit_base.rb +0 -17
- data/lib/playbook/pb_doc_helper.rb +5 -5
- data/lib/playbook/version.rb +1 -1
- metadata +5 -13
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
- data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
- data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
- data/dist/chunks/_typeahead-D8vYsn7T.js +0 -22
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 0b893820d516fe98da09e06b94c9b3ebf312eeccfa42a8c3a59ae9426f9c0feb
|
4
|
+
data.tar.gz: 48bc0867779db4526810edf8716d95944f5c0bf81409d154a31d933a40f1b853
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 0b9d16196a6b1d5062f8289b1a14e8959dac6b073c831e9ad74b6be9972a01fa047ab7668eeb2e33a19d39ce209d60704ce4d8e82f369af6cb63a10f954401fb
|
7
|
+
data.tar.gz: d04022c85a0dcc86453e28d2fbf8fa629fde3a2b95986dc30afaa857c64ba860743640192d265bff56d07a4910caa63ab00699619eab9a7026244a6a241a7176
|
@@ -13,20 +13,9 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
13
13
|
get target() {
|
14
14
|
return document.querySelector(CONTENT_SELECTOR.replace("id", this.element.id))
|
15
15
|
}
|
16
|
-
|
17
|
-
static expandedRows = new Set()
|
18
|
-
static isCollapsing = false
|
19
16
|
|
20
17
|
connect() {
|
21
18
|
this.element.addEventListener('click', () => {
|
22
|
-
if (!PbAdvancedTable.isCollapsing) {
|
23
|
-
const isExpanded = this.element.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
24
|
-
if (!isExpanded) {
|
25
|
-
PbAdvancedTable.expandedRows.add(this.element.id)
|
26
|
-
} else {
|
27
|
-
PbAdvancedTable.expandedRows.delete(this.element.id)
|
28
|
-
}
|
29
|
-
}
|
30
19
|
this.toggleElement(this.target)
|
31
20
|
})
|
32
21
|
}
|
@@ -86,53 +75,4 @@ export default class PbAdvancedTable extends PbEnhancedElement {
|
|
86
75
|
this.element.querySelector(UP_ARROW_SELECTOR).style.display = 'inline-block'
|
87
76
|
this.element.querySelector(DOWN_ARROW_SELECTOR).style.display = 'none'
|
88
77
|
}
|
89
|
-
|
90
|
-
static handleToggleAllHeaders(element) {
|
91
|
-
const table = element.closest('.pb_table')
|
92
|
-
const firstLevelButtons = table.querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]')
|
93
|
-
|
94
|
-
const expandedRows = Array.from(firstLevelButtons).filter(button =>
|
95
|
-
button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
96
|
-
)
|
97
|
-
|
98
|
-
if (expandedRows.length === firstLevelButtons.length) {
|
99
|
-
expandedRows.forEach(button => {
|
100
|
-
button.click()
|
101
|
-
})
|
102
|
-
this.expandedRows.clear()
|
103
|
-
} else {
|
104
|
-
firstLevelButtons.forEach(button => {
|
105
|
-
if (!this.expandedRows.has(button.id)) {
|
106
|
-
button.click()
|
107
|
-
}
|
108
|
-
})
|
109
|
-
}
|
110
|
-
}
|
111
|
-
static handleToggleAllSubRows(element, rowDepth) {
|
112
|
-
const parentElement = element.closest(".toggle-content")
|
113
|
-
const subrowButtons = parentElement.querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]')
|
114
|
-
|
115
|
-
const expandedSubRows = Array.from(subrowButtons).filter(button =>
|
116
|
-
button.querySelector(UP_ARROW_SELECTOR).style.display === 'inline-block'
|
117
|
-
)
|
118
|
-
|
119
|
-
if (expandedSubRows.length === subrowButtons.length) {
|
120
|
-
expandedSubRows.forEach(button => {
|
121
|
-
button.click()
|
122
|
-
})
|
123
|
-
} else {
|
124
|
-
subrowButtons.forEach(button => {
|
125
|
-
if (!this.expandedRows.has(button.id)) {
|
126
|
-
button.click()
|
127
|
-
}
|
128
|
-
})
|
129
|
-
}
|
130
|
-
}
|
131
|
-
}
|
132
|
-
|
133
|
-
window.expandAllRows = (element) => {
|
134
|
-
PbAdvancedTable.handleToggleAllHeaders(element)
|
135
78
|
}
|
136
|
-
window.expandAllSubRows = (element, rowDepth) => {
|
137
|
-
PbAdvancedTable.handleToggleAllSubRows(element, rowDepth)
|
138
|
-
}
|
@@ -13,4 +13,12 @@
|
|
13
13
|
<% end %>
|
14
14
|
<% end %>
|
15
15
|
<% end %>
|
16
|
-
<% end %>
|
16
|
+
<% end %>
|
17
|
+
|
18
|
+
<script type="text/javascript">
|
19
|
+
var expandAllRows = (element) => {
|
20
|
+
element.closest('.pb_table').querySelectorAll('.pb_advanced_table_body > .pb_table_tr [data-advanced-table]').forEach((button) => {
|
21
|
+
button.dispatchEvent(new Event('click'));
|
22
|
+
});
|
23
|
+
};
|
24
|
+
</script>
|
@@ -23,4 +23,12 @@
|
|
23
23
|
<% end %>
|
24
24
|
<% end %>
|
25
25
|
<% end %>
|
26
|
-
<% end %>
|
26
|
+
<% end %>
|
27
|
+
|
28
|
+
<script type="text/javascript">
|
29
|
+
var expandAllSubRows = (element, rowDepth) => {
|
30
|
+
element.closest(".toggle-content").querySelectorAll('.depth-sub-row-' + rowDepth + ' [data-advanced-table]').forEach((button) => {
|
31
|
+
button.dispatchEvent(new Event('click'));
|
32
|
+
});
|
33
|
+
};
|
34
|
+
</script>
|
@@ -5,7 +5,7 @@ import { get } from 'lodash'
|
|
5
5
|
import classnames from 'classnames'
|
6
6
|
|
7
7
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
8
|
-
import { GlobalProps, globalProps
|
8
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
9
9
|
import type { ProductColors, CategoryColors, BackgroundColors } from '../types/colors'
|
10
10
|
|
11
11
|
import Icon from '../pb_icon/_icon'
|
@@ -49,7 +49,6 @@ type CardBodyProps = {
|
|
49
49
|
padding?: string,
|
50
50
|
} & GlobalProps
|
51
51
|
|
52
|
-
|
53
52
|
// Header component
|
54
53
|
const Header = (props: CardHeaderProps) => {
|
55
54
|
const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
|
@@ -108,7 +107,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
108
107
|
|
109
108
|
// coerce to array
|
110
109
|
const cardChildren = React.Children.toArray(children)
|
111
|
-
const inlineStyles = globalInlineProps(props);
|
112
110
|
|
113
111
|
const subComponentTags = (tagName: string) => {
|
114
112
|
return cardChildren.filter((c: string) => (
|
@@ -137,7 +135,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
137
135
|
{...dataProps}
|
138
136
|
{...htmlProps}
|
139
137
|
className={classnames(cardCss, globalProps(props), className)}
|
140
|
-
style={inlineStyles}
|
141
138
|
>
|
142
139
|
{subComponentTags('Header')}
|
143
140
|
{
|
@@ -166,7 +163,6 @@ const Card = (props: CardPropTypes): React.ReactElement => {
|
|
166
163
|
{...dataProps}
|
167
164
|
{...htmlProps}
|
168
165
|
className={classnames(cardCss, globalProps(props), className)}
|
169
|
-
style={inlineStyles}
|
170
166
|
>
|
171
167
|
{subComponentTags('Header')}
|
172
168
|
{nonHeaderChildren}
|
@@ -6,7 +6,7 @@ import classnames from "classnames";
|
|
6
6
|
import Modal from "react-modal";
|
7
7
|
|
8
8
|
import { buildAriaProps, buildCss, buildDataProps, buildHtmlProps } from "../utilities/props";
|
9
|
-
import { globalProps
|
9
|
+
import { globalProps } from "../utilities/globalProps";
|
10
10
|
|
11
11
|
import Body from "../pb_body/_body";
|
12
12
|
import Button from "../pb_button/_button";
|
@@ -91,8 +91,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
91
91
|
beforeClose: "pb_dialog_overlay_before_close",
|
92
92
|
};
|
93
93
|
|
94
|
-
const inlineStyles = globalInlineProps(props);
|
95
|
-
|
96
94
|
const classes = classnames(
|
97
95
|
buildCss("pb_dialog_wrapper"),
|
98
96
|
globalProps(props),
|
@@ -186,7 +184,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
186
184
|
overlayClassName={overlayClassNames}
|
187
185
|
portalClassName={portalClassName}
|
188
186
|
shouldCloseOnOverlayClick={shouldCloseOnOverlayClick && !loading}
|
189
|
-
style={{ content: inlineStyles }}
|
190
187
|
>
|
191
188
|
<>
|
192
189
|
{title && !status ? <Dialog.Header>{title}</Dialog.Header> : null}
|
@@ -195,7 +192,6 @@ const Dialog = (props: DialogProps): React.ReactElement => {
|
|
195
192
|
<Dialog.Body
|
196
193
|
className="dialog_status_text_align"
|
197
194
|
padding="md"
|
198
|
-
|
199
195
|
>
|
200
196
|
<Flex align="center"
|
201
197
|
orientation="column"
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildDataProps, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { GlobalProps, globalProps
|
4
|
+
import { GlobalProps, globalProps } from '../utilities/globalProps'
|
5
5
|
import { GenericObject, Sizes } from '../types'
|
6
6
|
|
7
7
|
type FlexProps = {
|
@@ -61,7 +61,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
61
61
|
const alignSelfClass = alignSelf !== 'none' ? `align_self_${alignSelf}` : ''
|
62
62
|
const dataProps = buildDataProps(data)
|
63
63
|
const htmlProps = buildHtmlProps(htmlOptions)
|
64
|
-
const inlineStyles = globalInlineProps(props)
|
65
64
|
|
66
65
|
|
67
66
|
return (
|
@@ -84,7 +83,6 @@ const Flex = (props: FlexProps): React.ReactElement => {
|
|
84
83
|
globalProps(props),
|
85
84
|
className
|
86
85
|
)}
|
87
|
-
style={inlineStyles}
|
88
86
|
{...dataProps}
|
89
87
|
{...htmlProps}
|
90
88
|
>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
import React from 'react'
|
2
2
|
import classnames from 'classnames'
|
3
3
|
import { buildCss, buildHtmlProps } from '../utilities/props'
|
4
|
-
import { globalProps, GlobalProps
|
4
|
+
import { globalProps, GlobalProps } from '../utilities/globalProps'
|
5
5
|
type FlexItemPropTypes = {
|
6
6
|
children: React.ReactNode[] | React.ReactNode,
|
7
7
|
fixedSize?: string,
|
@@ -35,20 +35,14 @@ const FlexItem = (props: FlexItemPropTypes): React.ReactElement => {
|
|
35
35
|
const fixedStyle =
|
36
36
|
fixedSize !== undefined ? { flexBasis: `${fixedSize}` } : null
|
37
37
|
const orderClass = order !== 'none' ? `order_${order}` : null
|
38
|
-
const inlineStyles = globalInlineProps(props)
|
39
|
-
const combinedStyles = {
|
40
|
-
...fixedStyle,
|
41
|
-
...inlineStyles
|
42
|
-
}
|
43
38
|
|
44
39
|
const htmlProps = buildHtmlProps(htmlOptions)
|
45
40
|
|
46
|
-
|
47
41
|
return (
|
48
42
|
<div
|
49
43
|
{...htmlProps}
|
50
44
|
className={classnames(buildCss('pb_flex_item_kit', growClass, shrinkClass, flexClass, displayFlexClass), orderClass, alignSelfClass, globalProps(props), className)}
|
51
|
-
style={
|
45
|
+
style={fixedStyle}
|
52
46
|
>
|
53
47
|
{children}
|
54
48
|
</div>
|
@@ -20,13 +20,8 @@ module Playbook
|
|
20
20
|
generate_classname("pb_flex_item_kit", fixed_size_class, grow_class, shrink_class, display_flex_class) + align_self_class
|
21
21
|
end
|
22
22
|
|
23
|
-
def
|
24
|
-
|
25
|
-
styles << "flex-basis: #{fixed_size};" if fixed_size.present?
|
26
|
-
styles << "height: #{height};" if height.present?
|
27
|
-
styles << "min-height: #{min_height};" if min_height.present?
|
28
|
-
styles << "max-height: #{max_height};" if max_height.present?
|
29
|
-
styles.join(" ")
|
23
|
+
def style_value
|
24
|
+
"flex-basis: #{fixed_size};" if fixed_size.present?
|
30
25
|
end
|
31
26
|
|
32
27
|
private
|
@@ -47,13 +47,9 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
47
47
|
|
48
48
|
const iconClass = icon ? "_icon" : ""
|
49
49
|
const closeIconSize = size === "small" ? "xs" : "sm"
|
50
|
-
|
51
|
-
const filteredProps: FormPillProps = {...props}
|
52
|
-
delete filteredProps.truncate
|
53
|
-
|
54
50
|
const css = classnames(
|
55
51
|
`pb_form_pill_kit_${color}${iconClass}`,
|
56
|
-
globalProps(
|
52
|
+
globalProps(props),
|
57
53
|
className,
|
58
54
|
size === 'small' ? 'small' : null,
|
59
55
|
textTransform,
|
@@ -81,7 +77,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
81
77
|
className="pb_form_pill_text"
|
82
78
|
size={4}
|
83
79
|
text={name}
|
84
|
-
truncate={props.truncate}
|
85
80
|
/>
|
86
81
|
</>
|
87
82
|
)}
|
@@ -97,7 +92,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
97
92
|
className="pb_form_pill_text"
|
98
93
|
size={4}
|
99
94
|
text={name}
|
100
|
-
truncate={props.truncate}
|
101
95
|
/>
|
102
96
|
<Icon
|
103
97
|
className="pb_form_pill_icon"
|
@@ -117,7 +111,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
117
111
|
className="pb_form_pill_tag"
|
118
112
|
size={4}
|
119
113
|
text={text}
|
120
|
-
truncate={props.truncate}
|
121
114
|
/>
|
122
115
|
</>
|
123
116
|
)}
|
@@ -126,7 +119,6 @@ const FormPill = (props: FormPillProps): React.ReactElement => {
|
|
126
119
|
className="pb_form_pill_tag"
|
127
120
|
size={4}
|
128
121
|
text={text}
|
129
|
-
truncate={props.truncate}
|
130
122
|
/>
|
131
123
|
)}
|
132
124
|
<div
|
@@ -3,7 +3,6 @@ examples:
|
|
3
3
|
rails:
|
4
4
|
- form_pill_user: Form Pill User
|
5
5
|
- form_pill_size: Form Pill Size
|
6
|
-
- form_pill_truncated_text: Truncated Text
|
7
6
|
- form_pill_tag: Form Pill Tag
|
8
7
|
- form_pill_example: Example
|
9
8
|
- form_pill_icon: Form Pill Icon
|
@@ -12,7 +11,6 @@ examples:
|
|
12
11
|
react:
|
13
12
|
- form_pill_user: Form Pill User
|
14
13
|
- form_pill_size: Form Pill Size
|
15
|
-
- form_pill_truncated_text: Truncated Text
|
16
14
|
- form_pill_tag: Form Pill Tag
|
17
15
|
- form_pill_example: Example
|
18
16
|
- form_pill_icon: Form Pill Icon
|
@@ -4,4 +4,3 @@ export { default as FormPillTag } from './_form_pill_tag.jsx'
|
|
4
4
|
export { default as FormPillExample } from './_form_pill_example.jsx'
|
5
5
|
export { default as FormPillIcon } from './_form_pill_icon.jsx'
|
6
6
|
export { default as FormPillColors } from './_form_pill_colors.jsx'
|
7
|
-
export { default as FormPillTruncatedText } from './_form_pill_truncated_text.jsx'
|