playbook_ui 14.8.0.pre.alpha.PLAY16254545 → 14.8.0.pre.alpha.play1648heightglobalprops4606

Sign up to get free protection for your applications and to get access to all the features.
Files changed (31) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +1 -0
  3. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
  4. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +0 -4
  5. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +84 -7
  6. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +1 -0
  7. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +0 -1
  8. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +0 -4
  9. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +2 -1
  10. data/app/pb_kits/playbook/tokens/_height.scss +19 -0
  11. data/app/pb_kits/playbook/tokens/exports/_height.module.scss +37 -0
  12. data/app/pb_kits/playbook/utilities/_height.scss +33 -0
  13. data/app/pb_kits/playbook/utilities/_max_width.scss +4 -0
  14. data/app/pb_kits/playbook/utilities/_min_width.scss +1 -1
  15. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +0 -1
  16. data/app/pb_kits/playbook/utilities/globalProps.ts +24 -0
  17. data/dist/chunks/{_typeahead-D0PihN_3.js → _typeahead-dal1XERd.js} +1 -1
  18. data/dist/chunks/{_weekday_stacked-uMIX8f-A.js → _weekday_stacked-KjwZgsC3.js} +1 -1
  19. data/dist/chunks/vendor.js +1 -1
  20. data/dist/menu.yml +321 -0
  21. data/dist/playbook-doc.js +1 -1
  22. data/dist/playbook-rails-react-bindings.js +1 -1
  23. data/dist/playbook-rails.js +1 -1
  24. data/dist/playbook.css +1 -1
  25. data/lib/playbook/classnames.rb +3 -0
  26. data/lib/playbook/height.rb +29 -0
  27. data/lib/playbook/kit_base.rb +16 -1
  28. data/lib/playbook/max_height.rb +29 -0
  29. data/lib/playbook/min_height.rb +29 -0
  30. data/lib/playbook/version.rb +1 -1
  31. metadata +10 -4
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 0b2b5ad03216b06c9f37e1792a0b208efbfd3d44b79f73696e1a3b006f89228c
4
- data.tar.gz: 282f44cd7aee29b4bc0ca84396be2a914a3786e91c8b308c5e7f284b84d4d74c
3
+ metadata.gz: c400478957c7ac7d0b7f5d9dd4313416455cd60e7e405758d7929235a2458f5e
4
+ data.tar.gz: 820c87cf0e999947f6e1c4eabc30a719c51b2fbf71f5429f01fdc3287948df3d
5
5
  SHA512:
6
- metadata.gz: 0b14587326a80d3f8a7663ab14df6c51720aae8ad3a3492370dd853a956292a7b80901b2782e6ea04fbdb37b38d7810490234b4396bc9c891158432c208578f4
7
- data.tar.gz: a1f50ae88764cf79258478662bd9cd294b394d8c3cbd3c96580045ba2a5a67c3d924d9ee0170daf134ca9400078c4709c18dff06ea98927392f412343b5d7216
6
+ metadata.gz: bd355b592a328ec6485ec24347f37926631f5fee5e31f8e2d87413cd1be9c5764dacc6e0532688cc720073bcb7fcb430afc45f34da0a0bb60a0ca742fe16a7b5
7
+ data.tar.gz: e47e0ce844150818eb47998e80628fd8b6a16e1db4c2c5effe065e5c96a075051204046b566cefa96fd9e4a81cccd2b43ba9237b9380f9746082a762614ea4ec
@@ -126,3 +126,4 @@
126
126
  @import 'utilities/overflow';
127
127
  @import 'utilities/truncate';
128
128
  @import 'utilities/vertical_align';
129
+ @import 'utilities/height';
@@ -6,12 +6,12 @@
6
6
  ) do %>
7
7
  <%= content.presence || object.input %>
8
8
  <% if object.indeterminate %>
9
- <span class="pb_checkbox_indeterminate">
9
+ <span data-pb-checkbox-icon-span="true" class="pb_checkbox_indeterminate">
10
10
  <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon", fixed_width: true}) %>
11
11
  <%= pb_rails("icon", props: { icon: "check", classname: "check_icon hidden", fixed_width: true}) %>
12
12
  </span>
13
13
  <% else %>
14
- <span class="pb_checkbox_checkmark">
14
+ <span data-pb-checkbox-icon-span="true" class="pb_checkbox_checkmark">
15
15
  <%= pb_rails("icon", props: { icon: "check", classname: "check_icon", fixed_width: true}) %>
16
16
  <%= pb_rails("icon", props: { icon: "minus", classname: "indeterminate_icon hidden", fixed_width: true}) %>
17
17
  </span>
@@ -18,10 +18,6 @@ module Playbook
18
18
  prop :form_spacing, type: Playbook::Props::Boolean,
19
19
  default: false
20
20
 
21
- def checked_html
22
- checked ? "checked='true'" : nil
23
- end
24
-
25
21
  def classname
26
22
  generate_classname("pb_checkbox_kit", checked_class) + indeterminate_class + error_class
27
23
  end
@@ -1,7 +1,84 @@
1
- <%= pb_rails("checkbox" , props: {
2
- text: "Select ",
3
- value: "checkbox-value",
4
- name: "main",
5
- indeterminate: true,
6
- id: "test-indeterminate-js"
7
- }) %>
1
+ <% checkboxes = [
2
+ { name: 'Coffee', id: 'coffee', checked: false },
3
+ { name: 'Ice Cream', id: 'ice-cream', checked: false },
4
+ { name: 'Chocolate', id: 'chocolate', checked: true }
5
+ ] %>
6
+
7
+ <%= pb_rails("table", props: { container: false, size: "md" }) do %>
8
+ <thead>
9
+ <tr>
10
+ <th>
11
+ <%= pb_rails("checkbox", props: {
12
+ checked: true,
13
+ text: "Uncheck All",
14
+ value: "checkbox-value",
15
+ name: "main-checkbox",
16
+ indeterminate: true,
17
+ id: "indeterminate-checkbox"
18
+ }) %>
19
+ </th>
20
+ </tr>
21
+ </thead>
22
+
23
+ <tbody>
24
+ <% checkboxes.each do |checkbox| %>
25
+ <tr>
26
+ <td>
27
+ <%= pb_rails("checkbox", props: {
28
+ checked: checkbox[:checked],
29
+ text: checkbox[:name],
30
+ value: checkbox[:id],
31
+ name: "#{checkbox[:id]}-indeterminate-checkbox",
32
+ id: "#{checkbox[:id]}-indeterminate-checkbox",
33
+ }) %>
34
+ </td>
35
+ </tr>
36
+ <% end %>
37
+ </tbody>
38
+ <% end %>
39
+
40
+ <script>
41
+ document.addEventListener('DOMContentLoaded', function() {
42
+ const mainCheckboxWrapper = document.getElementById('indeterminate-checkbox');
43
+ const mainCheckbox = document.getElementsByName("main-checkbox")[0];
44
+ const childCheckboxes = document.querySelectorAll('input[type="checkbox"][id$="indeterminate-checkbox"]');
45
+
46
+ const updateMainCheckbox = () => {
47
+ // Count the number of checked child checkboxes
48
+ const checkedCount = Array.from(childCheckboxes).filter(cb => cb.checked).length;
49
+ // Determine if the main checkbox should be in an indeterminate state
50
+ const indeterminate = checkedCount > 0 && checkedCount < childCheckboxes.length;
51
+
52
+ // Set the main checkbox states
53
+ mainCheckbox.indeterminate = indeterminate;
54
+ mainCheckbox.checked = checkedCount > 0;
55
+
56
+ // Determine the main checkbox label based on the number of checked checkboxes
57
+ const text = checkedCount === 0 ? 'Check All' : 'Uncheck All';
58
+
59
+ // Determine the icon class to add and remove based on the number of checked checkboxes
60
+ const iconClassToAdd = checkedCount === 0 ? 'pb_checkbox_checkmark' : 'pb_checkbox_indeterminate';
61
+ const iconClassToRemove = checkedCount === 0 ? 'pb_checkbox_indeterminate' : 'pb_checkbox_checkmark';
62
+
63
+ // Update main checkbox label
64
+ mainCheckboxWrapper.getElementsByClassName('pb_body_kit')[0].textContent = text;
65
+
66
+ // Add and remove the icon class to the main checkbox wrapper
67
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.add(iconClassToAdd);
68
+ mainCheckboxWrapper.querySelector('[data-pb-checkbox-icon-span]').classList.remove(iconClassToRemove);
69
+
70
+ // Toggle the visibility of the checkbox icon based on the indeterminate state
71
+ mainCheckboxWrapper.getElementsByClassName("indeterminate_icon")[0].classList.toggle('hidden', !indeterminate);
72
+ mainCheckboxWrapper.getElementsByClassName("check_icon")[0].classList.toggle('hidden', indeterminate);
73
+ };
74
+
75
+ mainCheckbox.addEventListener('change', function() {
76
+ childCheckboxes.forEach(cb => cb.checked = this.checked);
77
+ updateMainCheckbox();
78
+ });
79
+
80
+ childCheckboxes.forEach(cb => {
81
+ cb.addEventListener('change', updateMainCheckbox);
82
+ });
83
+ });
84
+ </script>
@@ -53,6 +53,7 @@
53
53
  }
54
54
 
55
55
  .pb_dropdown_container {
56
+ position: absolute;
56
57
  background-color: $white;
57
58
  overflow: hidden;
58
59
  box-shadow: $shadow_deep;
@@ -3,7 +3,6 @@
3
3
  class: object.classname,
4
4
  data: object.data,
5
5
  id: object.id,
6
- style: object.container_style,
7
6
  **combined_html_options) do %>
8
7
  <%= pb_rails("list", props: {ordered: false, borderless: false}) do %>
9
8
  <% if content.present? %>
@@ -7,10 +7,6 @@ module Playbook
7
7
  generate_classname("pb_dropdown_container", "close", separator: " ")
8
8
  end
9
9
 
10
- def container_style
11
- "position: absolute"
12
- end
13
-
14
10
  def data
15
11
  Hash(prop(:data)).merge(dropdown_container: true)
16
12
  end
@@ -6,6 +6,7 @@
6
6
  value: "selected_with_icon",
7
7
  checked: true,
8
8
  icon: true,
9
+
9
10
  }) do %>
10
11
  Selected, with icon
11
12
  <% end %>
@@ -36,4 +37,4 @@
36
37
  Disabled
37
38
  <% end %>
38
39
 
39
- </div>
40
+ </div>
@@ -0,0 +1,19 @@
1
+
2
+ $height_auto: auto !default;
3
+ $height_xs: 320px !default;
4
+ $height_sm: 480px !default;
5
+ $height_md: 768px !default;
6
+ $height_lg: 1024px !default;
7
+ $height_xl: 1280px !default;
8
+ $height_2xl: 1440px !default;
9
+ $height_3xl: 1920px !default;
10
+ $heights: (
11
+ height_auto: $height_auto,
12
+ height_xs: $height_xs,
13
+ height_sm: $height_sm,
14
+ height_md: $height_md,
15
+ height_lg: $height_lg,
16
+ height_xl: $height_xl,
17
+ height_xxl: $height_2xl,
18
+ height_xxxl: $height_3xl
19
+ );
@@ -0,0 +1,37 @@
1
+ @import "../height";
2
+
3
+ :export {
4
+ @mixin export_height($height_list) {
5
+ @each $name, $value in $height_list {
6
+ .#{$name} {
7
+ height: $value;
8
+ }
9
+ }
10
+ }
11
+
12
+ @include export_height($heights);
13
+ }
14
+
15
+ :export {
16
+ @mixin export_max_height($height_list) {
17
+ @each $name, $value in $height_list {
18
+ .max_#{$name} {
19
+ max-height: $value;
20
+ }
21
+ }
22
+ }
23
+
24
+ @include export_max_height($heights);
25
+ }
26
+
27
+ :export {
28
+ @mixin export_min_height($height_list) {
29
+ @each $name, $value in $height_list {
30
+ .min_#{$name} {
31
+ min-height: $value;
32
+ }
33
+ }
34
+ }
35
+
36
+ @include export_min_height($heights);
37
+ }
@@ -0,0 +1,33 @@
1
+ @import "../tokens/exports/height.module";
2
+
3
+ @mixin export_height($height_list) {
4
+ @each $name, $value in $height_list {
5
+ .#{$name} {
6
+ height: $value;
7
+ }
8
+ }
9
+ }
10
+
11
+ @mixin export_max_height($height_list) {
12
+ @each $name, $value in $height_list {
13
+ .max_#{$name} {
14
+ max-height: $value;
15
+ }
16
+ }
17
+ }
18
+
19
+ @mixin export_min_height($height_list) {
20
+ @each $name, $value in $height_list {
21
+ .min_#{$name} {
22
+ min-height: $value;
23
+ }
24
+ }
25
+ }
26
+
27
+ @include export_height($heights);
28
+ @include export_max_height($heights);
29
+ @include export_min_height($heights);
30
+
31
+ .height-resize {
32
+ resize: vertical;
33
+ }
@@ -27,3 +27,7 @@
27
27
  .max_width_xxl {
28
28
  max-width: 1320px;
29
29
  }
30
+
31
+ .width-resize {
32
+ resize: horizontal;
33
+ }
@@ -40,6 +40,6 @@
40
40
  min-width: $container_100;
41
41
  }
42
42
 
43
- .minwidth-resize {
43
+ .width-resize {
44
44
  resize: horizontal;
45
45
  }
@@ -7,7 +7,6 @@ export default [
7
7
  "right",
8
8
  "top",
9
9
  "hover",
10
- "groupHover",
11
10
  "zIndex",
12
11
  "verticalAlign",
13
12
  "truncate",
@@ -361,6 +361,30 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
361
361
  css += maxWidth ? `max_width_${filterClassName(maxWidth)} ` : ''
362
362
  return css.trimEnd()
363
363
  },
364
+ minHeightProps: ({ minHeight }: MinHeight) => {
365
+ const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
366
+ if (heightValues.includes(minHeight)) {
367
+ let css = ''
368
+ css += minHeight ? `min_height_${filterClassName(minHeight)} ` : ''
369
+ return css.trimEnd()
370
+ }
371
+ },
372
+ maxHeightProps: ({ maxHeight }: MaxHeight) => {
373
+ const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
374
+ if (heightValues.includes(maxHeight)) {
375
+ let css = ''
376
+ css += maxHeight ? `max_height_${filterClassName(maxHeight)} ` : ''
377
+ return css.trimEnd()
378
+ }
379
+ },
380
+ heightProps: ({ height }: Height) => {
381
+ const heightValues = ["auto", "xs", "sm", "md", "lg", "xl", "xxl", "xxxl"]
382
+ if (heightValues.includes(height)) {
383
+ let css = ''
384
+ css += height ? `height_${filterClassName(height)} ` : ''
385
+ return css.trimEnd()
386
+ }
387
+ },
364
388
  zIndexProps: (zIndex: ZIndex) => {
365
389
  let css = ''
366
390
  Object.entries(zIndex).forEach((zIndexEntry) => {