playbook_ui 14.9.0.pre.alpha.play1742globalheightfixes4766 → 14.9.0.pre.rc.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (100) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -2
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.tsx +17 -61
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta.html.erb +1 -1
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_beta_sort.html.erb +1 -1
  6. data/app/pb_kits/playbook/pb_advanced_table/docs/example.yml +0 -3
  7. data/app/pb_kits/playbook/pb_advanced_table/docs/index.js +0 -2
  8. data/app/pb_kits/playbook/pb_advanced_table/table_row.html.erb +1 -3
  9. data/app/pb_kits/playbook/pb_advanced_table/table_row.rb +0 -15
  10. data/app/pb_kits/playbook/pb_background/_background.tsx +2 -8
  11. data/app/pb_kits/playbook/pb_button/_button.scss +0 -6
  12. data/app/pb_kits/playbook/pb_button/_button.tsx +3 -1
  13. data/app/pb_kits/playbook/pb_button/_button_mixins.scss +0 -15
  14. data/app/pb_kits/playbook/pb_button/button.rb +1 -1
  15. data/app/pb_kits/playbook/pb_button/docs/_button_default.html.erb +0 -1
  16. data/app/pb_kits/playbook/pb_button/docs/_button_default.jsx +0 -8
  17. data/app/pb_kits/playbook/pb_button/docs/_button_default.md +1 -1
  18. data/app/pb_kits/playbook/pb_checkbox/checkbox.html.erb +2 -2
  19. data/app/pb_kits/playbook/pb_checkbox/checkbox.rb +4 -0
  20. data/app/pb_kits/playbook/pb_checkbox/docs/_checkbox_indeterminate.html.erb +7 -84
  21. data/app/pb_kits/playbook/pb_collapsible/_collapsible.tsx +1 -3
  22. data/app/pb_kits/playbook/pb_currency/_currency.tsx +3 -7
  23. data/app/pb_kits/playbook/pb_currency/currency.html.erb +2 -2
  24. data/app/pb_kits/playbook/pb_currency/currency.rb +1 -17
  25. data/app/pb_kits/playbook/pb_currency/currency.test.js +3 -40
  26. data/app/pb_kits/playbook/pb_currency/docs/example.yml +0 -2
  27. data/app/pb_kits/playbook/pb_currency/docs/index.js +0 -1
  28. data/app/pb_kits/playbook/pb_drawer/_drawer.scss +0 -1
  29. data/app/pb_kits/playbook/pb_drawer/_drawer.tsx +45 -159
  30. data/app/pb_kits/playbook/pb_drawer/docs/example.yml +1 -1
  31. data/app/pb_kits/playbook/pb_drawer/docs/index.js +0 -1
  32. data/app/pb_kits/playbook/pb_dropdown/_dropdown.scss +0 -1
  33. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.html.erb +1 -0
  34. data/app/pb_kits/playbook/pb_dropdown/dropdown_container.rb +4 -0
  35. data/app/pb_kits/playbook/pb_dropdown/utilities/subComponentHelper.tsx +2 -13
  36. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +2 -2
  37. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_loading.html.erb +1 -1
  38. data/app/pb_kits/playbook/pb_form/docs/_form_form_with_validate.html.erb +12 -63
  39. data/app/pb_kits/playbook/pb_image/_image.tsx +1 -3
  40. data/app/pb_kits/playbook/pb_layout/_layout.tsx +14 -36
  41. data/app/pb_kits/playbook/pb_overlay/_overlay.tsx +1 -3
  42. data/app/pb_kits/playbook/pb_pagination/_pagination.tsx +2 -2
  43. data/app/pb_kits/playbook/pb_progress_simple/_progress_simple.tsx +3 -5
  44. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.html.erb +2 -3
  45. data/app/pb_kits/playbook/pb_progress_simple/progress_simple.rb +0 -5
  46. data/app/pb_kits/playbook/pb_section_separator/_section_separator.tsx +1 -3
  47. data/app/pb_kits/playbook/pb_selectable_card/docs/_selectable_card_default.html.erb +1 -2
  48. data/app/pb_kits/playbook/pb_table/_table.tsx +25 -109
  49. data/app/pb_kits/playbook/pb_table/docs/index.js +0 -1
  50. data/app/pb_kits/playbook/pb_table/styles/_all.scss +0 -2
  51. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.html.erb +0 -47
  52. data/app/pb_kits/playbook/pb_timeline/docs/_timeline_with_children.jsx +0 -59
  53. data/app/pb_kits/playbook/pb_typeahead/_typeahead.scss +0 -3
  54. data/app/pb_kits/playbook/pb_typeahead/index.ts +3 -29
  55. data/app/pb_kits/playbook/pb_typeahead/typeahead.html.erb +2 -5
  56. data/app/pb_kits/playbook/pb_typeahead/typeahead.rb +0 -4
  57. data/app/pb_kits/playbook/utilities/_max_width.scss +9 -29
  58. data/app/pb_kits/playbook/utilities/_min_width.scss +2 -6
  59. data/app/pb_kits/playbook/utilities/globalPropNames.mjs +1 -1
  60. data/app/pb_kits/playbook/utilities/globalProps.ts +4 -37
  61. data/dist/chunks/_typeahead-D0PihN_3.js +22 -0
  62. data/dist/chunks/_weekday_stacked-uMIX8f-A.js +45 -0
  63. data/dist/chunks/{lib-SyD3buPZ.js → lib-BC6ESsxG.js} +1 -1
  64. data/dist/chunks/{pb_form_validation-Dt8UJgrJ.js → pb_form_validation-B_Z9rEbg.js} +1 -1
  65. data/dist/chunks/vendor.js +1 -1
  66. data/dist/menu.yml +0 -321
  67. data/dist/playbook-doc.js +1 -1
  68. data/dist/playbook-rails-react-bindings.js +1 -1
  69. data/dist/playbook-rails.js +1 -1
  70. data/dist/playbook.css +1 -1
  71. data/lib/playbook/classnames.rb +0 -4
  72. data/lib/playbook/forms/builder/typeahead_field.rb +0 -13
  73. data/lib/playbook/kit_base.rb +1 -16
  74. data/lib/playbook/spacing.rb +0 -21
  75. data/lib/playbook/version.rb +2 -2
  76. metadata +6 -28
  77. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.html.erb +0 -53
  78. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_custom_cell_rails.md +0 -5
  79. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.jsx +0 -50
  80. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination.md +0 -1
  81. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.jsx +0 -57
  82. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_pagination_with_props.md +0 -5
  83. data/app/pb_kits/playbook/pb_advanced_table/docs/advanced_table_pagination_mock_data.json +0 -5600
  84. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.html.erb +0 -4
  85. data/app/pb_kits/playbook/pb_currency/docs/_currency_negative.jsx +0 -16
  86. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.jsx +0 -31
  87. data/app/pb_kits/playbook/pb_drawer/docs/_drawer_menu.md +0 -6
  88. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns.jsx +0 -87
  89. data/app/pb_kits/playbook/pb_table/docs/_table_sticky_left_columns_react.md +0 -2
  90. data/app/pb_kits/playbook/pb_table/styles/_scroll.scss +0 -4
  91. data/app/pb_kits/playbook/pb_table/styles/_sticky_columns.scss +0 -18
  92. data/app/pb_kits/playbook/tokens/_height.scss +0 -19
  93. data/app/pb_kits/playbook/tokens/exports/_height.module.scss +0 -37
  94. data/app/pb_kits/playbook/utilities/_height.scss +0 -33
  95. data/app/pb_kits/playbook/utilities/_width.scss +0 -45
  96. data/dist/chunks/_typeahead-B8fkIeXA.js +0 -22
  97. data/dist/chunks/_weekday_stacked-DjRTXEi-.js +0 -45
  98. data/lib/playbook/height.rb +0 -29
  99. data/lib/playbook/max_height.rb +0 -29
  100. data/lib/playbook/min_height.rb +0 -29
@@ -1,4 +0,0 @@
1
- <%= pb_rails("currency", props: {
2
- amount: "-2,000.50",
3
- size: "sm",
4
- }) %>
@@ -1,16 +0,0 @@
1
- import React from 'react'
2
-
3
- import Currency from '../_currency'
4
-
5
- const CurrencyNegative = (props) => {
6
- return (
7
- <>
8
- <Currency
9
- amount="-2,000.50"
10
- {...props}
11
- />
12
- </>
13
- )
14
- }
15
-
16
- export default CurrencyNegative
@@ -1,31 +0,0 @@
1
- import React from "react";
2
- import { Button, Drawer, Icon, Title } from "playbook-ui";
3
-
4
- const DrawerMenu = () => {
5
-
6
- return (
7
- <>
8
- <Button id="menuButton"
9
- padding="sm"
10
- >
11
- <Icon icon="bars"
12
- size="3x"
13
- />
14
- </Button>
15
- <Drawer
16
- behavior="push"
17
- closeBreakpoint="md"
18
- menuButtonID="menuButton"
19
- overlay={false}
20
- placement="left"
21
- size="lg"
22
- withinElement
23
- >
24
- <Title paddingBottom="md">A really neat menu</Title>
25
- <Button text="This Button does nothing" />
26
- </Drawer>
27
- </>
28
- );
29
- };
30
-
31
- export default DrawerMenu;
@@ -1,6 +0,0 @@
1
- Our drawer kit can fulfill your responsive menu needs! Using the `closeBreakpoint` prop you can have the menu close on smaller screens like phones/tablets.
2
-
3
- Set a menu button with the `menuButtonID` props. When the Drawer is open, the menu button will be hidden. But when your Brakpoint closes the drawer, you can toggle the Drawer open/close with your menu butotn.
4
-
5
- Also use the `withinElement` props to have the Drawer open within a specific element, instead of the default behavior of it taking up the entire screen size.
6
-
@@ -1,87 +0,0 @@
1
- import React from 'react'
2
- import Table from '../_table'
3
-
4
- const TableStickyLeftColumns = () => {
5
- return (
6
- <Table
7
- responsive="scroll"
8
- size="md"
9
- stickyLeftcolumn={["1", "2", "3"]}
10
- >
11
- <thead>
12
- <tr>
13
- <th id="1">{'Column 1'}</th>
14
- <th id="2">{'Column 2'}</th>
15
- <th id="3">{'Column 3'}</th>
16
- <th>{'Column 4'}</th>
17
- <th>{'Column 5'}</th>
18
- <th>{'Column 6'}</th>
19
- <th>{'Column 7'}</th>
20
- <th>{'Column 8'}</th>
21
- <th>{'Column 9'}</th>
22
- <th>{'Column 10'}</th>
23
- <th>{'Column 11'}</th>
24
- <th>{'Column 12'}</th>
25
- <th>{'Column 13'}</th>
26
- <th>{'Column 14'}</th>
27
- <th>{'Column 15'}</th>
28
- </tr>
29
- </thead>
30
- <tbody>
31
- <tr>
32
- <td id="1">{'Value 1'}</td>
33
- <td id="2">{'Value 2'}</td>
34
- <td id="3">{'Value 3'}</td>
35
- <td>{'Value 4'}</td>
36
- <td>{'Value 5'}</td>
37
- <td>{'Value 6'}</td>
38
- <td>{'Value 7'}</td>
39
- <td>{'Value 8'}</td>
40
- <td>{'Value 9'}</td>
41
- <td>{'Value 10'}</td>
42
- <td>{'Value 11'}</td>
43
- <td>{'Value 12'}</td>
44
- <td>{'Value 13'}</td>
45
- <td>{'Value 14'}</td>
46
- <td>{'Value 15'}</td>
47
- </tr>
48
- <tr>
49
- <td id="1">{'Value 1'}</td>
50
- <td id="2">{'Value 2'}</td>
51
- <td id="3">{'Value 3'}</td>
52
- <td>{'Value 4'}</td>
53
- <td>{'Value 5'}</td>
54
- <td>{'Value 6'}</td>
55
- <td>{'Value 7'}</td>
56
- <td>{'Value 8'}</td>
57
- <td>{'Value 9'}</td>
58
- <td>{'Value 10'}</td>
59
- <td>{'Value 11'}</td>
60
- <td>{'Value 12'}</td>
61
- <td>{'Value 13'}</td>
62
- <td>{'Value 14'}</td>
63
- <td>{'Value 15'}</td>
64
- </tr>
65
- <tr>
66
- <td id="1">{'Value 1'}</td>
67
- <td id="2">{'Value 2'}</td>
68
- <td id="3">{'Value 3'}</td>
69
- <td>{'Value 4'}</td>
70
- <td>{'Value 5'}</td>
71
- <td>{'Value 6'}</td>
72
- <td>{'Value 7'}</td>
73
- <td>{'Value 8'}</td>
74
- <td>{'Value 9'}</td>
75
- <td>{'Value 10'}</td>
76
- <td>{'Value 11'}</td>
77
- <td>{'Value 12'}</td>
78
- <td>{'Value 13'}</td>
79
- <td>{'Value 14'}</td>
80
- <td>{'Value 15'}</td>
81
- </tr>
82
- </tbody>
83
- </Table>
84
- )
85
- }
86
-
87
- export default TableStickyLeftColumns
@@ -1,2 +0,0 @@
1
- The `stickyLeftColumn` prop expects an array of the column ids you want to be sticky. Make sure to add the corresponding id to the `<th>` and `<td>`.
2
- If you are using the sub-component variant, then you will pass the id to `<Table.Header>` and `<Table.Cell>`
@@ -1,4 +0,0 @@
1
- .table-responsive-scroll {
2
- display: block;
3
- overflow-x: auto;
4
- }
@@ -1,18 +0,0 @@
1
- @import "../../tokens/colors";
2
-
3
- [class^="pb_table"] {
4
- .sticky {
5
- position: sticky !important;
6
- left: 0;
7
- z-index: 1;
8
- background-color: white;
9
- }
10
-
11
- .with-border {
12
- border-right: 1px solid $border_light !important;
13
- }
14
-
15
- .sticky-shadow {
16
- box-shadow: 4px 0 10px rgba(60, 106, 172, 0.16) !important;
17
- }
18
- }
@@ -1,19 +0,0 @@
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
- );
@@ -1,37 +0,0 @@
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
- }
@@ -1,33 +0,0 @@
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
- }
@@ -1,45 +0,0 @@
1
- @import "../tokens/container";
2
-
3
- .width_none {
4
- width: none;
5
- }
6
-
7
- .width_0 {
8
- width: map-get($containers, 'none');
9
- }
10
-
11
- .width_0_percent {
12
- width: map-get($containers, 'none');
13
- }
14
-
15
- .width_xxs {
16
- width: $container_xxs;
17
- }
18
-
19
- .width_xs {
20
- width: $container_xs;
21
- }
22
-
23
- .width_sm {
24
- width: $container_sm;
25
- }
26
-
27
- .width_md {
28
- width: $container_md;
29
- }
30
-
31
- .width_lg {
32
- width: $container_lg;
33
- }
34
-
35
- .width_xl {
36
- width: $container_xl;
37
- }
38
-
39
- .width_xxl {
40
- width: $container_xxl;
41
- }
42
-
43
- .width_100_percent {
44
- width: $container_100;
45
- }