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.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_advanced_table/index.js +0 -60
  3. data/app/pb_kits/playbook/pb_advanced_table/table_header.html.erb +9 -1
  4. data/app/pb_kits/playbook/pb_advanced_table/table_subrow_header.html.erb +9 -1
  5. data/app/pb_kits/playbook/pb_card/_card.tsx +1 -5
  6. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +1 -5
  7. data/app/pb_kits/playbook/pb_flex/_flex.tsx +1 -3
  8. data/app/pb_kits/playbook/pb_flex/_flex_item.tsx +2 -8
  9. data/app/pb_kits/playbook/pb_flex/flex_item.html.erb +6 -3
  10. data/app/pb_kits/playbook/pb_flex/flex_item.rb +2 -7
  11. data/app/pb_kits/playbook/pb_form_pill/_form_pill.tsx +1 -9
  12. data/app/pb_kits/playbook/pb_form_pill/docs/example.yml +0 -2
  13. data/app/pb_kits/playbook/pb_form_pill/docs/index.js +0 -1
  14. data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +228 -195
  15. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_default.jsx +1 -1
  16. data/app/pb_kits/playbook/pb_multi_level_select/docs/example.yml +0 -3
  17. data/app/pb_kits/playbook/pb_multi_level_select/docs/index.js +0 -2
  18. data/app/pb_kits/playbook/pb_popover/_popover.tsx +1 -1
  19. data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +1 -4
  20. data/app/pb_kits/playbook/pb_typeahead/components/MultiValue.tsx +1 -3
  21. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +1 -3
  22. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -3
  23. data/app/pb_kits/playbook/utilities/globalProps.ts +2 -39
  24. data/dist/chunks/_typeahead-BYw0HEgO.js +22 -0
  25. data/dist/chunks/{_weekday_stacked-CaNCkN7U.js → _weekday_stacked-DumiyWjh.js} +1 -1
  26. data/dist/chunks/vendor.js +1 -1
  27. data/dist/mark.js +1 -0
  28. data/dist/playbook-doc.js +1 -1
  29. data/dist/playbook-rails-react-bindings.js +1 -1
  30. data/dist/playbook-rails.js +1 -1
  31. data/lib/playbook/kit_base.rb +0 -17
  32. data/lib/playbook/pb_doc_helper.rb +5 -5
  33. data/lib/playbook/version.rb +1 -1
  34. metadata +5 -13
  35. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.html.erb +0 -19
  36. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.jsx +0 -27
  37. data/app/pb_kits/playbook/pb_form_pill/docs/_form_pill_truncated_text.md +0 -1
  38. data/app/pb_kits/playbook/pb_multi_level_select/context/index.tsx +0 -5
  39. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.jsx +0 -105
  40. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children.md +0 -1
  41. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.jsx +0 -106
  42. data/app/pb_kits/playbook/pb_multi_level_select/docs/_multi_level_select_with_children_with_radios.md +0 -1
  43. data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +0 -149
  44. data/dist/chunks/_typeahead-D8vYsn7T.js +0 -22
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 16e2ee529fe689d2f505e3daeac5e4d71a2f33a29d8807153811992ea08f84d0
4
- data.tar.gz: 8e263f4310c0ab98566668459a775d778064a98fffff801a831a178597350c2b
3
+ metadata.gz: 0b893820d516fe98da09e06b94c9b3ebf312eeccfa42a8c3a59ae9426f9c0feb
4
+ data.tar.gz: 48bc0867779db4526810edf8716d95944f5c0bf81409d154a31d933a40f1b853
5
5
  SHA512:
6
- metadata.gz: 1647e85a66a4ca5899ba11b6da51a1362aea04de67c1abbbc00a3cb981305e9206c4d38a247157aef0292a4c2a9de21216b52ef32423d36929480568213bfcc0
7
- data.tar.gz: bac1ad6e22af011cc37f94d4b7c2ad32198e71bdee31e8c0c40005b1c3b252474dcce80cc49946b3a138f8a084f034f83dbe34bc63d25974b1ec8577827f178f
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, globalInlineProps } from '../utilities/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, globalInlineProps } from "../utilities/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, globalInlineProps } from '../utilities/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, globalInlineProps} from '../utilities/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={combinedStyles}
45
+ style={fixedStyle}
52
46
  >
53
47
  {children}
54
48
  </div>
@@ -1,5 +1,8 @@
1
- <%= pb_content_tag(:div,
2
- style: object.inline_styles
3
- ) do %>
1
+ <%= content_tag(:div,
2
+ id: object.id,
3
+ data: object.data,
4
+ class: object.classname,
5
+ style: object.style_value,
6
+ **combined_html_options) do %>
4
7
  <%= content.presence %>
5
8
  <% end %>
@@ -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 inline_styles
24
- styles = []
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(filteredProps),
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'