playbook_ui 13.6.0.pre.alpha.play845allkitsbytypes1219 → 13.6.0.pre.alpha.tiptapreacthookformbug1210

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.
Files changed (21) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/pb_body/docs/example.yml +0 -3
  3. data/app/pb_kits/playbook/pb_body/docs/index.js +0 -1
  4. data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts +22 -26
  5. data/app/pb_kits/playbook/pb_collapsible/index.js +0 -4
  6. data/app/pb_kits/playbook/pb_title/_title.scss +14 -15
  7. data/app/pb_kits/playbook/pb_title/_title.tsx +3 -3
  8. data/app/pb_kits/playbook/pb_title/_title_mixin.scss +6 -6
  9. data/app/pb_kits/playbook/pb_title/docs/example.yml +0 -2
  10. data/app/pb_kits/playbook/pb_title/docs/index.js +0 -1
  11. data/app/pb_kits/playbook/pb_title/title.rb +1 -1
  12. data/dist/menu.yml +110 -235
  13. data/dist/playbook-rails.js +5 -5
  14. data/lib/playbook/version.rb +1 -1
  15. metadata +2 -8
  16. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.html.erb +0 -12
  17. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.jsx +0 -50
  18. data/app/pb_kits/playbook/pb_body/docs/_body_truncate.md +0 -4
  19. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.html.erb +0 -12
  20. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.jsx +0 -53
  21. data/app/pb_kits/playbook/pb_title/docs/_title_truncate.md +0 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 3e6b57d0d26183afb97a6a5faf415a98dbd1bf20c9d8ef15613e11dfb951571f
4
- data.tar.gz: efc28ffbd1362659ea4fb5204006e0415246a7d4dacf490be1ebc7edbb646ca9
3
+ metadata.gz: d8771c78a1ecc2d78dcac4e22ab2ada7e04f99d1e4426d5c824cefb854532cb0
4
+ data.tar.gz: ae5e324a57a9340ea86ada259e94943a975c16d0c721100b3551a4e30af63e55
5
5
  SHA512:
6
- metadata.gz: 4352cfd4a202df9b47db9ea1dd9690346069ee7fc81c88363d08d4b2299de5aefe292214b7a5386e7a85c7a68d169ec820c27f114f69b90c082b974774b5be91
7
- data.tar.gz: b0d2d42a9e94c59732d2f9791ecbdfadb0be34e90d203bc7e22eda20e35dcac172e1daab4f3781c6d51f49c4f015607476a02e56ea5159031f1a05b6b4c554e2
6
+ metadata.gz: b031c275c0b45eac2065985bc48358cb2c9a05337d9cb198698c1af364486bcdbb42c3c8c4e65d5fb4aeef6998481b61d37ea8d17ec0caca1459cbc4c94eb571
7
+ data.tar.gz: e5e2848b9c33616179dac4582f8a3c5c0fecb04a1fa5c8dbddbaa2e2553fc75248bd1f6730c7ef76d2e66a6b27490753e3035f184464370e273a86173d4f8d0c
data/app/pb_kits/playbook/pb_body/docs/example.yml CHANGED
@@ -4,11 +4,8 @@ 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
-
9
7
  react:
10
8
  - body_light: Default
11
9
  - body_block: Block
12
10
  - body_articles: Best settings for articles
13
11
  - body_styled: Styled tags
14
- - body_truncate: Truncate
data/app/pb_kits/playbook/pb_body/docs/index.js CHANGED
@@ -2,4 +2,3 @@ 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'
data/app/pb_kits/playbook/pb_collapsible/_helper_functions.ts CHANGED
@@ -1,29 +1,25 @@
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
- };
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
+ // Once the transition is complete, remove the inline max-height so the content can scale responsively
7
+ window.setTimeout(() => {
8
+ elem.style.height = '';
9
+ }, 300);
10
+ };
13
11
 
14
- export const hideElement = (elem:any) => {
15
- elem.style.height = elem.scrollHeight + 'px';
12
+ export const hideElement = (elem:any) => {
13
+ elem.style.height = elem.scrollHeight + 'px';
16
14
 
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);
15
+ window.setTimeout(() => {
16
+ elem.style.height = '0';
17
+ elem.style.paddingTop = '0';
18
+ elem.style.paddingBottom = '0';
19
+ }, 1);
23
20
 
24
- // When the transition is complete, hide it
25
- window.setTimeout(() => {
26
- elem.classList.remove('is-visible');
27
- elem.style.overflow = ""
28
- }, 300);
29
- };
21
+ // When the transition is complete, hide it
22
+ window.setTimeout(() => {
23
+ elem.classList.remove('is-visible');
24
+ }, 300);
25
+ };
data/app/pb_kits/playbook/pb_collapsible/index.js CHANGED
@@ -33,12 +33,10 @@ 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"
37
36
 
38
37
  // Once the transition is complete, remove the inline max-height so the content can scale responsively
39
38
  window.setTimeout(() => {
40
39
  elem.style.height = ''
41
- elem.style.overflow = "visible"
42
40
  }, 300)
43
41
  }
44
42
 
@@ -50,13 +48,11 @@ export default class PbCollapsible extends PbEnhancedElement {
50
48
  elem.style.height = '0'
51
49
  elem.style.paddingTop = '0'
52
50
  elem.style.paddingBottom = '0'
53
- elem.style.overflow = "hidden"
54
51
  }, 1)
55
52
 
56
53
  // When the transition is complete, hide it
57
54
  window.setTimeout(() => {
58
55
  elem.classList.remove('is-visible')
59
- elem.style.overflow = ""
60
56
  }, 300)
61
57
  }
62
58
 
data/app/pb_kits/playbook/pb_title/_title.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  @import "../tokens/screen_sizes";
4
4
  @import './title_mixin';
5
5
 
6
- [class^=pb_title_kit] {
6
+ [class^=pb_title_kit]{
7
7
  &[class*=_1] {
8
8
  @include pb_title_1;
9
9
  @include title_colors;
@@ -36,23 +36,22 @@
36
36
  }
37
37
 
38
38
  @each $size, $size_value in $breakpoints_grid {
39
- @for $title_size_value from 1 through 4 {
40
- $min_size: map-get($size_value, "min");
41
- $max_size: map-get($size_value, "max");
42
- &[class*=_#{$size}_#{$title_size_value}] {
43
- @include break_on($min_size, $max_size) {
44
- @if $title_size_value == 1 { @include pb_title_1; }
45
- @else if $title_size_value == 2 { @include pb_title_2; }
46
- @else if $title_size_value == 3 { @include pb_title_3; }
47
- @else if $title_size_value == 4 { @include pb_title_4; }
48
- @include title_colors;
49
- @include title_truncate;
50
- @if $title_size_value != 4 { @include pb_title_bold; }
39
+ @each $title_size_value in [1, 2, 3, 4] {
40
+ $min_size: map-get($size_value, "min");
41
+ $max_size: map-get($size_value, "max");
42
+ &[class*=_#{$size}_#{$title_size_value}] {
43
+ @include break_on($min_size, $max_size) {
44
+ @if $title_size_value == 1 { @include pb_title_1; }
45
+ @else if $title_size_value == 2 { @include pb_title_2; }
46
+ @else if $title_size_value == 3 { @include pb_title_3; }
47
+ @else if $title_size_value == 4 { @include pb_title_4; }
48
+ @include title_colors;
49
+ @include title_truncate;
50
+ @if $title_size_value != 4 { @include pb_title_bold; }
51
+ }
51
52
  }
52
- }
53
53
  }
54
54
  }
55
-
56
55
  &.dark {
57
56
  @include pb_title_dark;
58
57
  }
data/app/pb_kits/playbook/pb_title/_title.tsx CHANGED
@@ -17,7 +17,7 @@ type TitleProps = {
17
17
  size?: SizeType | SizeResponsiveType,
18
18
  tag?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "div" | "span",
19
19
  text?: string,
20
- truncate?: null | "1" | "2" | "3" | "4" | "5",
20
+ truncate?: null | '1' | '2' | '3' | '4' | '5',
21
21
  variant?: null | "link",
22
22
  } & GlobalProps
23
23
 
@@ -41,12 +41,12 @@ const Title = (props: TitleProps): React.ReactElement => {
41
41
  const ariaProps: {[key: string]: string | number} = buildAriaProps(aria)
42
42
  const dataProps: {[key: string]: string | number} = buildDataProps(data)
43
43
  const getBold = bold ? '' : 'thin'
44
- const isTruncated = truncate ? `truncate-${truncate}` : null
44
+ const isTruncated = truncate ? `truncate_${truncate}` : null
45
45
  const isSizeNumberOrString = typeof size === "number" || typeof size === "string"
46
46
 
47
47
  const buildResponsiveSizeCss = () => {
48
48
  let css = ''
49
-
49
+
50
50
  if (!isSizeNumberOrString) {
51
51
  Object.entries(size).forEach((sizeObj) => {
52
52
  css += `pb_title_kit_${sizeObj[0]}_${sizeObj[1]} `
data/app/pb_kits/playbook/pb_title/_title_mixin.scss CHANGED
@@ -18,11 +18,11 @@ $pb_title_colors: (
18
18
  }
19
19
 
20
20
  $pb_title_truncate: (
21
- truncate-1: 1,
22
- truncate-2: 2,
23
- truncate-3: 3,
24
- truncate-4: 4,
25
- truncate-5: 5
21
+ truncate_1: 1,
22
+ truncate_2: 2,
23
+ truncate_3: 3,
24
+ truncate_4: 4,
25
+ truncate_5: 5
26
26
  );
27
27
 
28
28
  @mixin title_truncate {
@@ -31,7 +31,7 @@ $pb_title_truncate: (
31
31
  overflow: hidden;
32
32
  display: -webkit-box;
33
33
  -webkit-line-clamp: $number;
34
- -webkit-box-orient: vertical;
34
+ -webkit-box-orient: vertical;
35
35
  }
36
36
  }
37
37
  }
data/app/pb_kits/playbook/pb_title/docs/example.yml CHANGED
@@ -4,11 +4,9 @@ examples:
4
4
  - title_light_weight: Light Weight UI
5
5
  - title_colors: Colors
6
6
  - title_responsive: Responsive
7
- - title_truncate: Truncate
8
7
 
9
8
  react:
10
9
  - title_default: Default UI
11
10
  - title_light_weight: Light Weight UI
12
11
  - title_colors: Colors
13
12
  - title_responsive: Responsive
14
- - title_truncate: Truncate
data/app/pb_kits/playbook/pb_title/docs/index.js CHANGED
@@ -2,4 +2,3 @@ export { default as TitleDefault } from './_title_default.jsx'
2
2
  export { default as TitleLightWeight } from './_title_light_weight.jsx'
3
3
  export { default as TitleColors } from './_title_colors.jsx'
4
4
  export { default as TitleResponsive } from './_title_responsive.jsx'
5
- export { default as TitleTruncate } from './_title_truncate.jsx'
data/app/pb_kits/playbook/pb_title/title.rb CHANGED
@@ -33,7 +33,7 @@ module Playbook
33
33
  end
34
34
 
35
35
  def is_truncated
36
- truncate ? "truncate-#{truncate}" : nil
36
+ truncate ? "truncate_#{truncate}" : nil
37
37
  end
38
38
 
39
39
  def is_size_responsive
data/dist/menu.yml CHANGED
@@ -1,236 +1,111 @@
1
1
  kits:
2
- rails:
3
- - avatars:
4
- - avatar
5
- - avatar_action_button
6
- - multiple_users
7
- - multiple_users_stacked
8
- - user
9
- - background
10
- - bread_crumbs
11
- - buttons:
12
- - button
13
- - button_toolbar
14
- - circle_icon_button
15
- - card
16
- - collapsible
17
- - charts_and_graphs:
18
- - bar_graph
19
- - circle_chart
20
- - distribution_bar
21
- - gauge
22
- - legend
23
- - line_graph
24
- - treemap_chart
25
- - dialog
26
- - filter
27
- - fixed_confirmation_toast
28
- - forms:
29
- - checkbox
30
- - date_picker
31
- - file_upload
32
- - form
33
- - form_group
34
- - form_pill
35
- - multi_level_select
36
- - passphrase
37
- - phone_number_input
38
- - radio
39
- - rich_text_editor
40
- - select
41
- - selectable_card
42
- - selectable_card_icon
43
- - selectable_icon
44
- - selectable_list
45
- - text_input
46
- - textarea
47
- - toggle
48
- - typeahead
49
- - highlight
50
- - icon
51
- - icon_circle
52
- - icon_stat_value
53
- - icon_value
54
- - image
55
- - layouts:
56
- - flex
57
- - layout
58
- - list
59
- - loading_inline
60
- - nav
61
- - tags:
62
- - badge
63
- - hashtag
64
- - pill
65
- - pagination
66
- - popover
67
- - progress:
68
- - progress_pills
69
- - progress_simple
70
- - progress_step
71
- - section_separator
72
- - star_rating
73
- - table
74
- - timeline
75
- - time_and_date:
76
- - date
77
- - date_range_inline
78
- - date_range_stacked
79
- - date_stacked
80
- - date_time
81
- - date_time_stacked
82
- - date_year_stacked
83
- - time
84
- - time_range_inline
85
- - time_stacked
86
- - timestamp
87
- - weekday_stacked
88
- - tooltip
89
- - typography:
90
- - body
91
- - caption
92
- - detail
93
- - title
94
- - typography_patterns:
95
- - contact
96
- - currency
97
- - dashboard_value
98
- - home_address_street
99
- - label_pill
100
- - label_value
101
- - message
102
- - person
103
- - person_contact
104
- - source
105
- - stat_change
106
- - stat_value
107
- - title_count
108
- - title_detail
109
- - user_badge
110
-
111
- react:
112
- - avatars:
113
- - avatar
114
- - avatar_action_button
115
- - multiple_users
116
- - multiple_users_stacked
117
- - user
118
- - background
119
- - bread_crumbs
120
- - buttons:
121
- - button
122
- - button_toolbar
123
- - circle_icon_button
124
- - card
125
- - collapsible
126
- - charts_and_graphs:
127
- - bar_graph
128
- - circle_chart
129
- - distribution_bar
130
- - gauge
131
- - legend
132
- - line_graph
133
- - treemap_chart
134
- - dialog
135
- - filter
136
- - fixed_confirmation_toast
137
- - forms:
138
- - checkbox
139
- - date_picker
140
- - file_upload
141
- - form_group
142
- - form_pill
143
- - multi_level_select
144
- - passphrase
145
- - phone_number_input
146
- - radio
147
- - rich_text_editor
148
- - select
149
- - selectable_card
150
- - selectable_card_icon
151
- - selectable_icon
152
- - selectable_list
153
- - text_input
154
- - textarea
155
- - toggle
156
- - typeahead
157
- - highlight
158
- - icon
159
- - icon_circle
160
- - icon_stat_value
161
- - icon_value
162
- - image
163
- - layouts:
164
- - flex
165
- - layout
166
- - lightbox
167
- - list
168
- - loading_inline
169
- - map
170
- - nav
171
- - tags:
172
- - badge
173
- - hashtag
174
- - pill
175
- - popover
176
- - progress:
177
- - progress_pills
178
- - progress_simple
179
- - progress_step
180
- - section_separator
181
- - star_rating
182
- - table
183
- - timeline
184
- - time_and_date:
185
- - date
186
- - date_range_inline
187
- - date_range_stacked
188
- - date_stacked
189
- - date_time
190
- - date_time_stacked
191
- - date_year_stacked
192
- - time
193
- - time_range_inline
194
- - time_stacked
195
- - timestamp
196
- - weekday_stacked
197
- - tooltip
198
- - typography:
199
- - body
200
- - caption
201
- - detail
202
- - title
203
- - typography_patterns:
204
- - contact
205
- - currency
206
- - dashboard_value
207
- - home_address_street
208
- - label_pill
209
- - label_value
210
- - message
211
- - person
212
- - person_contact
213
- - source
214
- - stat_change
215
- - stat_value
216
- - title_count
217
- - title_detail
218
- - user_badge
219
- - walkthrough
220
-
221
- swift:
222
- - avatars:
223
- - avatar
224
- - buttons:
225
- - charts_and_graphs:
226
- - forms:
227
- - radio
228
- - layouts:
229
- - tags:
230
- - badge
231
- - pill
232
- - progress:
233
- - time_and_date:
234
- - timestamp
235
- - typography:
236
- - typography_patterns:
2
+ - avatars:
3
+ - avatar
4
+ - avatar_action_button
5
+ - multiple_users
6
+ - multiple_users_stacked
7
+ - user
8
+ - background
9
+ - bread_crumbs
10
+ - buttons:
11
+ - button
12
+ - button_toolbar
13
+ - circle_icon_button
14
+ - card
15
+ - collapsible
16
+ - charts_and_graphs:
17
+ - bar_graph
18
+ - circle_chart
19
+ - distribution_bar
20
+ - gauge
21
+ - legend
22
+ - line_graph
23
+ - treemap_chart
24
+ - dialog
25
+ - filter
26
+ - fixed_confirmation_toast
27
+ - forms:
28
+ - checkbox
29
+ - date_picker
30
+ - file_upload
31
+ - form
32
+ - form_group
33
+ - form_pill
34
+ - multi_level_select
35
+ - passphrase
36
+ - phone_number_input
37
+ - radio
38
+ - rich_text_editor
39
+ - select
40
+ - selectable_card
41
+ - selectable_card_icon
42
+ - selectable_icon
43
+ - selectable_list
44
+ - text_input
45
+ - textarea
46
+ - toggle
47
+ - typeahead
48
+ - highlight
49
+ - icon
50
+ - icon_circle
51
+ - icon_stat_value
52
+ - icon_value
53
+ - image
54
+ - layouts:
55
+ - flex
56
+ - layout
57
+ - lightbox
58
+ - list
59
+ - loading_inline
60
+ - map
61
+ - nav
62
+ - tags:
63
+ - badge
64
+ - hashtag
65
+ - pill
66
+ - pagination
67
+ - popover
68
+ - progress:
69
+ - progress_pills
70
+ - progress_simple
71
+ - progress_step
72
+ - section_separator
73
+ - star_rating
74
+ - table
75
+ - timeline
76
+ - time_and_date:
77
+ - date
78
+ - date_range_inline
79
+ - date_range_stacked
80
+ - date_stacked
81
+ - date_time
82
+ - date_time_stacked
83
+ - date_year_stacked
84
+ - time
85
+ - time_range_inline
86
+ - time_stacked
87
+ - timestamp
88
+ - weekday_stacked
89
+ - tooltip
90
+ - typography:
91
+ - body
92
+ - caption
93
+ - detail
94
+ - title
95
+ - typography_patterns:
96
+ - contact
97
+ - currency
98
+ - dashboard_value
99
+ - home_address_street
100
+ - label_pill
101
+ - label_value
102
+ - message
103
+ - person
104
+ - person_contact
105
+ - source
106
+ - stat_change
107
+ - stat_value
108
+ - title_count
109
+ - title_detail
110
+ - user_badge
111
+ - walkthrough