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

Sign up to get free protection for your applications and to get access to all the features.
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