playbook_ui 15.0.0.pre.alpha.PLAY2420atfirstcolumnborderfix10590 → 15.0.0.pre.alpha.PLAY2422fixedconftoastaccessibility10327

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 (125) hide show
  1. checksums.yaml +4 -4
  2. data/app/pb_kits/playbook/_playbook.scss +0 -3
  3. data/app/pb_kits/playbook/pb_advanced_table/_advanced_table.scss +7 -44
  4. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.html.erb +2 -4
  5. data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_column_headers_vertical_border.jsx +8 -12
  6. data/app/pb_kits/playbook/pb_bar_graph/docs/example.yml +1 -0
  7. data/app/pb_kits/playbook/pb_card/_card.scss +4 -12
  8. data/app/pb_kits/playbook/pb_card/_card.tsx +3 -3
  9. data/app/pb_kits/playbook/pb_card/_card_mixin.scss +0 -10
  10. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.html.erb +0 -3
  11. data/app/pb_kits/playbook/pb_card/docs/_card_highlight.jsx +0 -8
  12. data/app/pb_kits/playbook/pb_circle_icon_button/_circle_icon_button.tsx +0 -2
  13. data/app/pb_kits/playbook/pb_circle_icon_button/circle_icon_button.html.erb +0 -1
  14. data/app/pb_kits/playbook/pb_collapsible/__snapshots__/collapsible.test.js.snap +0 -1
  15. data/app/pb_kits/playbook/pb_date_picker/_date_picker.tsx +4 -6
  16. data/app/pb_kits/playbook/pb_date_picker/date_picker_helper.ts +4 -48
  17. data/app/pb_kits/playbook/pb_dialog/_close_icon.tsx +1 -5
  18. data/app/pb_kits/playbook/pb_dialog/_dialog.tsx +8 -6
  19. data/app/pb_kits/playbook/pb_dialog/dialog.html.erb +1 -1
  20. data/app/pb_kits/playbook/pb_dialog/dialogHelper.js +65 -0
  21. data/app/pb_kits/playbook/pb_dialog/dialog_header.html.erb +2 -2
  22. data/app/pb_kits/playbook/pb_form/docs/_form_form_with.html.erb +0 -1
  23. data/app/pb_kits/playbook/pb_icon/_icon.tsx +2 -13
  24. data/app/pb_kits/playbook/pb_icon/icon.rb +1 -9
  25. data/app/pb_kits/playbook/pb_icon_button/_icon_button.tsx +0 -1
  26. data/app/pb_kits/playbook/pb_icon_button/icon_button.html.erb +1 -2
  27. data/app/pb_kits/playbook/pb_icon_circle/icon_circle.html.erb +1 -1
  28. data/app/pb_kits/playbook/pb_loading_inline/_loading_inline.tsx +1 -3
  29. data/app/pb_kits/playbook/pb_loading_inline/docs/example.yml +0 -2
  30. data/app/pb_kits/playbook/pb_loading_inline/docs/index.js +0 -1
  31. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.html.erb +1 -1
  32. data/app/pb_kits/playbook/pb_loading_inline/loading_inline.rb +0 -11
  33. data/app/pb_kits/playbook/pb_nav/_item.tsx +5 -19
  34. data/app/pb_kits/playbook/pb_nav/item.html.erb +2 -6
  35. data/app/pb_kits/playbook/pb_text_input/_text_input.tsx +0 -3
  36. data/app/pb_kits/playbook/pb_text_input/docs/example.yml +0 -3
  37. data/app/pb_kits/playbook/pb_text_input/docs/index.js +0 -1
  38. data/app/pb_kits/playbook/pb_text_input/text_input.rb +3 -2
  39. data/app/pb_kits/playbook/pb_text_input/text_input.test.js +0 -38
  40. data/dist/chunks/{_line_graph-CUfJ7E4h.js → _line_graph-CApw7aQD.js} +1 -1
  41. data/dist/chunks/_typeahead-J1_avqdO.js +6 -0
  42. data/dist/chunks/_weekday_stacked-DMSGdE48.js +37 -0
  43. data/dist/chunks/{lib-BTs5acfO.js → lib-CY5ZPzic.js} +1 -1
  44. data/dist/chunks/{pb_form_validation-CKkaQFX3.js → pb_form_validation-D3b0JKHH.js} +1 -1
  45. data/dist/chunks/vendor.js +1 -1
  46. data/dist/menu.yml +1 -15
  47. data/dist/playbook-doc.js +2 -2
  48. data/dist/playbook-rails-react-bindings.js +1 -1
  49. data/dist/playbook-rails.js +1 -1
  50. data/dist/playbook.css +1 -1
  51. data/lib/playbook/forms/builder/form_field_builder.rb +2 -37
  52. data/lib/playbook/version.rb +1 -1
  53. metadata +8 -77
  54. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.html.erb +0 -5
  55. data/app/pb_kits/playbook/pb_loading_inline/docs/_loading_inline_variant.jsx +0 -24
  56. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.scss +0 -0
  57. data/app/pb_kits/playbook/pb_pb_bar_graph/_pb_bar_graph.tsx +0 -62
  58. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.html.erb +0 -35
  59. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors.jsx +0 -49
  60. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_rails.md +0 -1
  61. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_colors_react.md +0 -2
  62. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.html.erb +0 -38
  63. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_default.jsx +0 -51
  64. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.html.erb +0 -46
  65. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.jsx +0 -62
  66. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_height.md +0 -3
  67. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.html.erb +0 -47
  68. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_horizontal.jsx +0 -60
  69. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.html.erb +0 -25
  70. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend.jsx +0 -36
  71. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_non_clickable.jsx +0 -44
  72. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.html.erb +0 -100
  73. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_legend_position.jsx +0 -126
  74. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.html.erb +0 -32
  75. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_negative_numbers.jsx +0 -48
  76. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.html.erb +0 -68
  77. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_secondary_y_axis.jsx +0 -81
  78. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.html.erb +0 -31
  79. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.jsx +0 -42
  80. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_spline.md +0 -2
  81. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.html.erb +0 -35
  82. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/_pb_bar_graph_stacked.jsx +0 -51
  83. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/example.yml +0 -27
  84. data/app/pb_kits/playbook/pb_pb_bar_graph/docs/index.js +0 -11
  85. data/app/pb_kits/playbook/pb_pb_bar_graph/pbBarGraphTheme.ts +0 -106
  86. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.html.erb +0 -1
  87. data/app/pb_kits/playbook/pb_pb_bar_graph/pb_bar_graph.rb +0 -28
  88. data/app/pb_kits/playbook/pb_pb_bar_graph/pbbargraph.test.jsx +0 -31
  89. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.scss +0 -3
  90. data/app/pb_kits/playbook/pb_pb_circle_chart/_pb_circle_chart.tsx +0 -62
  91. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.html.erb +0 -31
  92. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_block_content.jsx +0 -81
  93. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.html.erb +0 -25
  94. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.jsx +0 -40
  95. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_color_overrides.md +0 -5
  96. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.html.erb +0 -27
  97. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.jsx +0 -39
  98. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_custom_tooltip.md +0 -5
  99. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.html.erb +0 -93
  100. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.jsx +0 -131
  101. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_legend_position.md +0 -14
  102. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.html.erb +0 -42
  103. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_labels.jsx +0 -58
  104. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.html.erb +0 -24
  105. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_data_with_legend.jsx +0 -38
  106. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.html.erb +0 -22
  107. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_default.jsx +0 -33
  108. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.html.erb +0 -118
  109. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_inner_sizes.jsx +0 -144
  110. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_live_data.jsx +0 -60
  111. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.html.erb +0 -24
  112. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_rounded.jsx +0 -42
  113. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.html.erb +0 -38
  114. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/_pb_circle_chart_with_title.jsx +0 -52
  115. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/example.yml +0 -29
  116. data/app/pb_kits/playbook/pb_pb_circle_chart/docs/index.js +0 -11
  117. data/app/pb_kits/playbook/pb_pb_circle_chart/pbCircleChartTheme.ts +0 -88
  118. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.html.erb +0 -1
  119. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.rb +0 -28
  120. data/app/pb_kits/playbook/pb_pb_circle_chart/pb_circle_chart.test.jsx +0 -51
  121. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.html.erb +0 -41
  122. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.jsx +0 -80
  123. data/app/pb_kits/playbook/pb_text_input/docs/_text_input_autocomplete.md +0 -1
  124. data/dist/chunks/_typeahead-DCp1lVJx.js +0 -6
  125. data/dist/chunks/_weekday_stacked-YwRTPuBs.js +0 -37
checksums.yaml CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 66f52aebecd920bc2fc041ba37d6376aba5251a0497fc8cc90f6fbbb2fd07760
4
- data.tar.gz: 31c062066ff39067c6146114516d7eddf467b7fd117d3e50e7d15c384331a874
3
+ metadata.gz: be71db65aaae3d05ad5a05e9c505672f4d5157b3a43c21324e5123b064fea3e1
4
+ data.tar.gz: 9a591a8849f6905e08519883fcd212b0ecc7348b537e6348961c0daf6dede396
5
5
  SHA512:
6
- metadata.gz: dab996205feaa0e09754fce0063352da29b6826b7e07d0a6c417b35bffc0fc8f290116abefd81bc08bc080c91b9f87ad4320038397e72aca84a1f4b5ef1c5362
7
- data.tar.gz: 66259cb940c24039f1cd65123a9aa16e6c9298061198f22d81a352d832c3248cecb274d1802753be28d57ae8b94268b6cef6422a320f1cddcced479f04f7af6a
6
+ metadata.gz: 7e48c32c68eaa11b6ff4ace1b9a92eeca35e9174ecb230ba372ba4358e462c02ff8986921f0748bd16fb68edf0594cefa906d581beff1f5b7c2a813409b3afa4
7
+ data.tar.gz: bd223268365e712962a7fa62c419ac6c522a995ab4d738bd0ad9d43dea585189b229bf4ac9041b15de82f7a586801eddc6d529735bb472486e6838c971b3ceda
@@ -1,6 +1,5 @@
1
1
 
2
2
 
3
-
4
3
  @import 'pb_advanced_table/advanced_table';
5
4
  @import 'pb_avatar/avatar';
6
5
  @import 'pb_background/background';
@@ -109,8 +108,6 @@
109
108
  @import 'pb_user_badge/user_badge';
110
109
  @import 'pb_weekday_stacked/weekday_stacked';
111
110
  @import 'pb_empty_state/empty_state';
112
- @import 'pb_pb_bar_graph/pb_bar_graph';
113
- @import 'pb_pb_circle_chart/pb_circle_chart';
114
111
  @import 'utilities/mixins';
115
112
  @import 'utilities/spacing';
116
113
  @import 'utilities/cursor';
@@ -1011,55 +1011,18 @@
1011
1011
  .pb-advanced-table-popover-option:hover {
1012
1012
  background-color: $bg_light;
1013
1013
  }
1014
-
1015
1014
  // Removes borders when Wrapped inside the Card Kit
1016
- .pb_card_kit > .pb_advanced_table {
1017
- // Remove right border only from the actual last column
1018
- .pb_advanced_table_body tr td:last-child,
1019
- .pb_advanced_table_header tr th:last-child {
1020
- box-shadow: none !important; // prevents double up of borders on Firefox when in Card Kit
1015
+ .pb_card_kit > .pb_advanced_table .pb_advanced_table_body .last-cell,
1016
+ .pb_card_kit > .pb_advanced_table .pb_advanced_table_header .last-header-cell,
1017
+ .pb_card_kit > .pb_advanced_table .pb_advanced_table_body tr td:last-child,
1018
+ .pb_card_kit > .pb_advanced_table .pb_advanced_table_header tr th:last-child {
1021
1019
  border-right: none !important;
1022
- }
1023
-
1024
- // Without vertical border, remove all last-cell borders
1025
- .pb_table:not(.vertical-border) {
1026
- .pb_advanced_table_body .last-cell,
1027
- .pb_advanced_table_header .last-header-cell {
1028
- box-shadow: none !important;
1029
- border-right: none !important;
1030
- }
1031
- }
1032
-
1033
- // For tables WITH vertical borders, only remove border from actual last column
1034
- .pb_table.vertical-border {
1035
- .pb_advanced_table_body .last-cell:not(:last-child),
1036
- .pb_advanced_table_header .last-header-cell:not(:last-child) {
1037
- box-shadow: none !important;
1038
- border-right: 1px solid $border_light !important;
1039
- }
1040
-
1041
- // Dark mode
1042
- &.dark {
1043
- .pb_advanced_table_body .last-cell:not(:last-child),
1044
- .pb_advanced_table_header .last-header-cell:not(:last-child) {
1045
- border-right: 1px solid $border_dark !important;
1046
- }
1047
- }
1048
- }
1049
-
1050
- // Support column group border colors
1051
- &.pb_advanced_table[class*="column-group-border-"] {
1052
- .pb_advanced_table_body .last-cell:not(:last-child),
1053
- .pb_advanced_table_header .last-header-cell:not(:last-child) {
1054
- border-right: 1px solid var(--column-border-color) !important;
1055
- }
1056
- }
1057
1020
  }
1058
1021
 
1059
- // Removes bottom borders when wrapped inside the Card Kit (keep existing behavior)
1060
- .pb_card_kit > .pb_advanced_table tr:last-child,
1022
+ // Removes borders when Wrapped inside the Card Kit
1023
+ .pb_card_kit > .pb_advanced_table tr:last-child,
1061
1024
  .pb_card_kit > .pb_advanced_table .last-row-cell {
1062
1025
  td {
1063
- border-bottom: none !important;
1026
+ border-bottom: none !important;
1064
1027
  }
1065
1028
  }
@@ -39,7 +39,5 @@
39
39
  ],
40
40
  },
41
41
  ] %>
42
- <%# Adjusting for test purposes. Will revert prior to commit. %>
43
- <%= pb_rails("card", props: {}) do %>
44
- <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { container: false, vertical_border: true } }) %>
45
- <% end %>
42
+
43
+ <%= pb_rails("advanced_table", props: { id: "table_multi_headers_vertical_borders", table_data: @table_data, column_definitions: column_definitions, table_props: { vertical_border: true } }) %>
@@ -1,5 +1,4 @@
1
1
  import React from "react"
2
- import Card from "../../pb_card/_card"
3
2
  import AdvancedTable from '../../pb_advanced_table/_advanced_table'
4
3
  import MOCK_DATA from "./advanced_table_mock_data.json"
5
4
 
@@ -45,22 +44,19 @@ const AdvancedTableColumnHeadersVerticalBorder = (props) => {
45
44
  ],
46
45
  },
47
46
  ];
48
-
47
+
49
48
  const tableProps = {
50
49
  verticalBorder: true
51
50
  }
52
- // Adjusted for testing purposes. Will revert prior to commit.
51
+
53
52
  return (
54
53
  <>
55
- <Card>
56
- <AdvancedTable
57
- columnDefinitions={columnDefinitions}
58
- columnGroupBorderColor="text_lt_default"
59
- tableData={MOCK_DATA}
60
- tableProps={tableProps}
61
- {...props}
62
- />
63
- </Card>
54
+ <AdvancedTable
55
+ columnDefinitions={columnDefinitions}
56
+ tableData={MOCK_DATA}
57
+ tableProps={tableProps}
58
+ {...props}
59
+ />
64
60
  </>
65
61
  )
66
62
  }
@@ -4,6 +4,7 @@ examples:
4
4
  - bar_graph_default: Default
5
5
  - bar_graph_legend: Legend
6
6
  - bar_graph_legend_position: Legend Position
7
+ - bar_graph_legend_non_clickable: Legend Non Clickable
7
8
  - bar_graph_height: Height
8
9
  - bar_graph_spline: Spline
9
10
  - bar_graph_colors: Color Overrides
@@ -20,7 +20,7 @@
20
20
  // Dark mode
21
21
  .pb_card_kit.dark {
22
22
  @include pb_card_dark;
23
-
23
+
24
24
  &.pb_card_kit_selected {
25
25
  @include pb_card_selected_dark;
26
26
  }
@@ -33,8 +33,7 @@
33
33
 
34
34
  // Highlight styles
35
35
  .pb_card_kit_highlight_top,
36
- .pb_card_kit_highlight_side,
37
- .pb_card_kit_highlight_right_side {
36
+ .pb_card_kit_highlight_side {
38
37
  overflow: hidden;
39
38
  }
40
39
 
@@ -53,20 +52,13 @@
53
52
  }
54
53
  }
55
54
 
56
- // Highlight side variants
55
+ // Highlight side variants
57
56
  @each $color_name, $color_value in $pb_card_highlight_colors {
58
57
  .pb_card_kit_highlight_side.pb_card_kit_highlight_#{$color_name}::before {
59
58
  @include pb_card_highlight($pb_card_highlight_size, 100%, $color_value);
60
59
  }
61
60
  }
62
61
 
63
- // Highlight side right variants
64
- @each $color_name, $color_value in $pb_card_highlight_colors {
65
- .pb_card_kit_highlight_right_side.pb_card_kit_highlight_#{$color_name}::before {
66
- @include pb_card_right_highlight($pb_card_highlight_size, 100%, $color_value);
67
- }
68
- }
69
-
70
62
  // Card Header
71
63
  .pb_card_header_kit {
72
64
  flex-grow: 0;
@@ -76,7 +68,7 @@
76
68
  padding: $space_sm;
77
69
  border: 0;
78
70
  border-radius: $pb_card_header_border_radius $pb_card_header_border_radius 0px 0px;
79
-
71
+
80
72
  // Inherit border radius from parent card
81
73
  .pb_card_kit_border_radius_xs & {
82
74
  border-radius: $border_radius_xs $border_radius_xs 0px 0px;
@@ -26,7 +26,7 @@ type CardPropTypes = {
26
26
  dragHandle?: boolean,
27
27
  htmlOptions?: {[key: string]: string | number | boolean | (() => void)},
28
28
  highlight?: {
29
- position?: "side" | "right_side" | "top",
29
+ position?: "side" | "top",
30
30
  color?: string,
31
31
  },
32
32
  id?: string,
@@ -56,7 +56,7 @@ const Header = (props: CardHeaderProps) => {
56
56
  const { children, className, headerColor = 'category_1', headerColorStriped = false } = props
57
57
  const headerColorCSS = `pb_card_header_kit_${headerColor}`
58
58
  const headerStripedCSS = headerColorStriped ? `pb_card_header_kit_${headerColor}_striped` : ''
59
-
59
+
60
60
  const headerCSS = classnames(
61
61
  'pb_card_header_kit',
62
62
  headerColorCSS,
@@ -108,7 +108,7 @@ const Card = (props: CardPropTypes): React.ReactElement => {
108
108
  const borderRadiusCSS = borderRadius !== 'md' ? `pb_card_kit_border_radius_${borderRadius}` : ''
109
109
  const highlightPositionCSS = highlight.position ? `pb_card_kit_highlight_${highlight.position}` : ''
110
110
  const highlightColorCSS = highlight.color ? `pb_card_kit_highlight_${highlight.color}` : ''
111
-
111
+
112
112
  const cardCss = classnames(
113
113
  'pb_card_kit', // Base class
114
114
  selectedCSS,
@@ -87,16 +87,6 @@ $pb_card_header_colors: map-merge(map-merge(map-merge($product_colors, $addition
87
87
  background: $background;
88
88
  }
89
89
 
90
- @mixin pb_card_right_highlight($width, $height, $background){
91
- content: "";
92
- position: absolute;
93
- top: 0;
94
- right: 0;
95
- width: $width;
96
- height: $height;
97
- background: $background;
98
- }
99
-
100
90
  @mixin pb_card_header_color($header_color) {
101
91
  background: $header_color;
102
92
  }
@@ -4,9 +4,6 @@
4
4
  <%= pb_rails("card", props: {highlight: {position: "top", color:"warning"}, margin_bottom: "sm"}) do %>
5
5
  Top Position & Warning Color
6
6
  <% end %>
7
- <%= pb_rails("card", props: {highlight: {position: "right_side", color:"product_5_highlight"}, margin_bottom: "sm"}) do %>
8
- Right Side Position & Product 5 Highlight Color
9
- <% end %>
10
7
  <%= pb_rails("card", props: {highlight: {position: "side", color:"category_2"}, margin_bottom: "sm"}) do %>
11
8
  Side Position & Category 2 Color
12
9
  <% end %>
@@ -21,14 +21,6 @@ const CardHighlight = (props) => {
21
21
  {'Top Position & Warning Color'}
22
22
  </Card>
23
23
 
24
- <Card
25
- {...props}
26
- highlight={{ position: 'right_side', color: 'product_5_highlight' }}
27
- marginBottom="sm"
28
- >
29
- {'Right Side Position & Product 5 Highlight Color'}
30
- </Card>
31
-
32
24
  <Card
33
25
  {...props}
34
26
  highlight={{ position: 'side', color: 'category_2' }}
@@ -65,7 +65,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
65
65
  id={id}
66
66
  >
67
67
  <Button
68
- aria={aria}
69
68
  dark={dark}
70
69
  disabled={disabled}
71
70
  htmlType={type}
@@ -79,7 +78,6 @@ const CircleIconButton = (props: CircleIconButtonProps): React.ReactElement => {
79
78
  >
80
79
  <Icon
81
80
  fixedWidth
82
- htmlOptions={{'aria-hidden': true}}
83
81
  icon={icon}
84
82
  />
85
83
  </Button>
@@ -1,6 +1,5 @@
1
1
  <%= pb_content_tag do %>
2
2
  <%= pb_rails("button", props: {
3
- aria: object.aria,
4
3
  type: object.type,
5
4
  loading: object.loading,
6
5
  link: object.link,
@@ -28,7 +28,6 @@ exports[`html structure is correct 1`] = `
28
28
  style="vertical-align: middle; color: rgb(193, 205, 214);"
29
29
  >
30
30
  <svg
31
- aria-label="chevron-down icon"
32
31
  class="pb_custom_icon svg-inline--fa svg_lg svg_fw"
33
32
  color="currentColor"
34
33
  fill="none"
@@ -210,12 +210,10 @@ const DatePicker = (props: DatePickerProps): React.ReactElement => {
210
210
  className="input_wrapper"
211
211
  >
212
212
 
213
- {!hideLabel && (
214
- <Caption
215
- className="pb_date_picker_kit_label"
216
- text={label}
217
- />
218
- )}
213
+ <Caption
214
+ className="pb_date_picker_kit_label"
215
+ text={hideLabel ? null : label}
216
+ />
219
217
  <>
220
218
  <div className="date_picker_input_wrapper">
221
219
  <input
@@ -89,48 +89,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
89
89
  }
90
90
  }
91
91
 
92
- // Helper function to get min/max years based on yearRange. If minDate/maxDate provided, grab year from those values
93
- const getMinMaxYears = () => {
94
- const [minYear, maxYear] = yearRange;
95
-
96
- const extractYear = (dateOption: typeof minDate | typeof maxDate): number | null => {
97
- if (!dateOption) return null;
98
-
99
- // If it's already a number, assume it's a year
100
- if (typeof dateOption === 'number') {
101
- return dateOption;
102
- }
103
-
104
- // If it's a string, extract year with regex
105
- if (typeof dateOption === 'string') {
106
- const match = dateOption.match(/\b(19|20)\d{2}\b/);
107
- return match ? parseInt(match[0], 10) : null;
108
- }
109
-
110
- // If it's a Date object, get the year directly
111
- if (dateOption instanceof Date) {
112
- return dateOption.getFullYear();
113
- }
114
-
115
- return null;
116
- };
117
-
118
- const setMinYear = minDate ? (extractYear(minDate) ?? minYear) : minYear;
119
- const setMaxYear = maxDate ? (extractYear(maxDate) ?? maxYear) : maxYear;
120
-
121
- return { setMinYear, setMaxYear };
122
- };
123
-
124
- const { setMinYear, setMaxYear } = getMinMaxYears()
125
-
126
- // Helper function to get min/max dates based on yearRange
127
- const getMinMaxDates = () => {
128
- const setMinDate = minDate || `01/01/${setMinYear}`
129
- const setMaxDate = maxDate || `12/31/${setMaxYear}`
130
-
131
- return { setMinDate, setMaxDate }
132
- }
133
-
134
92
  const disabledWeekDays = () => {
135
93
  return (
136
94
  [
@@ -243,8 +201,6 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
243
201
  // | Flatpickr initializer w/ config |
244
202
  // ===========================================================
245
203
 
246
- const { setMinDate, setMaxDate } = getMinMaxDates()
247
-
248
204
  flatpickr(`#${pickerId}`, {
249
205
  allowInput,
250
206
  closeOnSelect,
@@ -256,8 +212,8 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
256
212
  locale: {
257
213
  rangeSeparator: ' to '
258
214
  },
259
- maxDate: setMaxDate,
260
- minDate: setMinDate,
215
+ maxDate,
216
+ minDate,
261
217
  mode,
262
218
  nextArrow: '<i class="far fa-angle-right"></i>',
263
219
  onOpen: [() => {
@@ -294,7 +250,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
294
250
 
295
251
  // create html option tags for desired years
296
252
  let years = ''
297
- for (let year = setMaxYear; year >= setMinYear; year--) {
253
+ for (let year = yearRange[1]; year >= yearRange[0]; year--) {
298
254
  years += `<option value="${year}">${year}</option>`
299
255
  }
300
256
 
@@ -367,7 +323,7 @@ const datePickerHelper = (config: DatePickerConfig, scrollContainer: string | HT
367
323
  }
368
324
  // === End of Automatic Sync Logic ===
369
325
 
370
-
326
+
371
327
  // Adding dropdown icons to year and month select
372
328
  dropdown.insertAdjacentHTML('afterend', `<i class="year-dropdown-icon">${angleDown}</i>`)
373
329
  if (picker.monthElements[0].parentElement) {
@@ -12,14 +12,10 @@ export const CloseIcon = (props: CloseIconProps): React.ReactElement => {
12
12
  const timesIcon = getAllIcons()["times"]
13
13
  return (
14
14
  <div
15
- aria-label="Close Dialog"
16
15
  className="pb_dialog_close_icon"
17
- onClick={onClose}
18
- role="button"
19
- tabIndex={0}
16
+ onClick={onClose}
20
17
  >
21
18
  <Icon
22
- aria={{ "hidden": true }}
23
19
  className="svg-inline--fa"
24
20
  customIcon={timesIcon.icon as unknown as { [key: string]: SVGElement }}
25
21
  fixedWidth
@@ -73,8 +73,8 @@ const Dialog = (props: DialogProps): React.ReactElement => {
73
73
  const ariaProps = buildAriaProps(aria);
74
74
  const dataProps = buildDataProps(data)
75
75
  const htmlProps = buildHtmlProps(htmlOptions);
76
- const classes = {
77
- base: classnames("pb_dialog", buildCss("pb_dialog", size, placement), globalProps(props), className),
76
+ const dialogClassNames = {
77
+ base: classnames("pb_dialog", buildCss("pb_dialog", size, placement)),
78
78
  afterOpen: "pb_dialog_after_open",
79
79
  beforeClose: "pb_dialog_before_close",
80
80
  };
@@ -93,8 +93,10 @@ const Dialog = (props: DialogProps): React.ReactElement => {
93
93
 
94
94
  const dynamicInlineProps = globalInlineProps(props);
95
95
 
96
- const wrapperClasses = classnames(
96
+ const classes = classnames(
97
97
  buildCss("pb_dialog_wrapper"),
98
+ globalProps(props),
99
+ className
98
100
  );
99
101
 
100
102
  const [triggerOpened, setTriggerOpened] = useState(false),
@@ -171,13 +173,13 @@ const Dialog = (props: DialogProps): React.ReactElement => {
171
173
  {...ariaProps}
172
174
  {...dataProps}
173
175
  {...htmlProps}
174
- className={wrapperClasses}
176
+ className={classes}
175
177
  >
176
178
  <Modal
177
179
  ariaHideApp={false}
178
- className={classes}
180
+ className={dialogClassNames}
179
181
  closeTimeoutMS={200}
180
- contentLabel="Dialog"
182
+ contentLabel="Minimal Modal Example"
181
183
  id={id}
182
184
  isOpen={modalIsOpened}
183
185
  onRequestClose={onClose}
@@ -12,7 +12,7 @@
12
12
  data-cancel-button-id="<%= object.cancel_button_id %>"
13
13
  <% end %>
14
14
  >
15
- <%= pb_content_tag(:dialog, role: "dialog", "aria-modal": "true", "aria-label": "Dialog") do %>
15
+ <%= pb_content_tag(:dialog) do %>
16
16
  <% if object.status === "" && object.title %>
17
17
  <%= pb_rails("dialog/dialog_header", props: { title: object.title, id: object.id }) %>
18
18
  <% end %>
@@ -0,0 +1,65 @@
1
+ // Three places in Nitro depend on this function inside the window scope.
2
+ // We will keep this file until we remove this dependency from Nitro.
3
+ const dialogHelper = () => {
4
+ const openTrigger = document.querySelectorAll("[data-open-dialog]");
5
+ const closeTrigger = document.querySelectorAll("[data-close-dialog]");
6
+ const dialogs = document.querySelectorAll(".pb_dialog_rails")
7
+
8
+ const loadingButton = document.querySelector('[data-disable-with="Loading"]');
9
+ if (loadingButton) {
10
+ loadingButton.addEventListener("click", function() {
11
+ const okayLoadingButton = document.querySelector('[data-disable-with="Loading"]');
12
+ const cancelButton = document.querySelector('[data-disable-cancel-with="Loading"]');
13
+ let currentClass = okayLoadingButton.className;
14
+ let cancelClass = cancelButton ? cancelButton.className : "";
15
+
16
+ let newClass = currentClass.replace("_enabled", "_disabled_loading");
17
+ let newCancelClass = cancelClass.replace("_enabled", "_disabled");
18
+
19
+ // Disable the buttons
20
+ okayLoadingButton.disabled = true;
21
+ if (cancelButton) cancelButton.disabled = true;
22
+
23
+ okayLoadingButton.className = newClass;
24
+ if (cancelButton) cancelButton.className = newCancelClass;
25
+ });
26
+ }
27
+
28
+
29
+ openTrigger.forEach((open) => {
30
+ open.addEventListener("click", () => {
31
+ var openTriggerData = open.dataset.openDialog;
32
+ var targetDialog = document.getElementById(openTriggerData)
33
+ if (targetDialog.open) return;
34
+ targetDialog.showModal();
35
+ });
36
+ });
37
+
38
+ closeTrigger.forEach((close) => {
39
+ close.addEventListener("click", () => {
40
+ var closeTriggerData = close.dataset.closeDialog;
41
+ document.getElementById(closeTriggerData).close();
42
+ });
43
+ });
44
+
45
+ // Close dialog box on outside click
46
+ dialogs.forEach((dialogElement) => {
47
+ dialogElement.addEventListener("mousedown", (event) => {
48
+ const dialogParentDataset = dialogElement.parentElement.dataset
49
+ if (dialogParentDataset.overlayClick === "overlay_close") return
50
+
51
+ const dialogModal = event.target.getBoundingClientRect()
52
+ const clickedOutsideDialogModal = event.clientX < dialogModal.left ||
53
+ event.clientX > dialogModal.right ||
54
+ event.clientY < dialogModal.top ||
55
+ event.clientY > dialogModal.bottom
56
+
57
+ if (clickedOutsideDialogModal) {
58
+ dialogElement.close()
59
+ event.stopPropagation()
60
+ }
61
+ })
62
+ })
63
+ };
64
+
65
+ export default dialogHelper;
@@ -2,8 +2,8 @@
2
2
  <%= pb_rails("flex", props: {classname:object.classname, spacing:"between", padding:"sm", align:"center"}) do %>
3
3
  <%= content.presence || object.title %>
4
4
 
5
- <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> aria-label="Close Dialog" >
6
- <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon), aria: { hidden: true } }) %>
5
+ <button class="dialog-button-class pb_dialog_close_icon" type="button" data-close-dialog= <%= object.id %> >
6
+ <%= pb_rails("icon", props: { custom_icon: Playbook::Engine::root.join(times_icon) }) %>
7
7
  </button>
8
8
  <% end %>
9
9
  <%= pb_rails("section_separator") %>
@@ -91,7 +91,6 @@
91
91
  <%= pb_form_with(scope: :example, url: "", method: :get) do |form| %>
92
92
  <%= form.typeahead :example_typeahead, props: { data: { typeahead_example1: true, user: {} }, label: true, placeholder: "Search for a user" } %>
93
93
  <%= form.text_field :example_text_field, props: { label: true } %>
94
- <%= form.text_field :example_text_field_2, props: { label: "Text Field Custom Label" } %>
95
94
  <%= form.phone_number_field :example_phone_number_field, props: { label: "Example phone field", hidden_inputs: true } %>
96
95
  <%= form.email_field :example_email_field, props: { label: true } %>
97
96
  <%= form.number_field :example_number_field, props: { label: true } %>
@@ -20,7 +20,7 @@ export type IconSizes = "lg"
20
20
  | ""
21
21
 
22
22
  type IconProps = {
23
- aria?: { [key: string]: string | boolean }
23
+ aria?: {[key: string]: string},
24
24
  border?: string,
25
25
  className?: string,
26
26
  color?: string,
@@ -211,15 +211,7 @@ const Icon = (props: IconProps) => {
211
211
  )
212
212
 
213
213
  aria.label ? null : aria.label = `${icon} icon`
214
-
215
- const normalizedAria: { [key: string]: string } = Object.fromEntries(
216
- Object.entries(aria).map(([key, value]) => [
217
- key,
218
- typeof value === "boolean" ? String(value) : value,
219
- ])
220
- )
221
-
222
- const ariaProps = buildAriaProps(normalizedAria)
214
+ const ariaProps: {[key: string]: any} = buildAriaProps(aria)
223
215
  const dataProps: {[key: string]: any} = buildDataProps(data)
224
216
  const htmlProps = buildHtmlProps(htmlOptions)
225
217
 
@@ -230,7 +222,6 @@ const Icon = (props: IconProps) => {
230
222
  <>
231
223
  {
232
224
  React.cloneElement(iconElement || customIcon, {
233
- ...ariaProps,
234
225
  ...dataProps,
235
226
  ...htmlProps,
236
227
  className: classes,
@@ -246,7 +237,6 @@ const Icon = (props: IconProps) => {
246
237
  return (
247
238
  <>
248
239
  <span
249
- {...ariaProps}
250
240
  {...dataProps}
251
241
  {...htmlProps}
252
242
  className={classesEmoji}
@@ -260,7 +250,6 @@ const Icon = (props: IconProps) => {
260
250
  return (
261
251
  <>
262
252
  <i
263
- {...ariaProps}
264
253
  {...dataProps}
265
254
  {...htmlProps}
266
255
  className={classes}
@@ -110,20 +110,12 @@ module Playbook
110
110
  svg["class"] = %w[pb_custom_icon svg-inline--fa].concat([object.custom_icon_classname]).join(" ")
111
111
  svg["id"] = object.id
112
112
  svg["data"] = object.data
113
+ svg["aria"] = object.aria
113
114
  svg["height"] = "auto"
114
115
  svg["width"] = "auto"
115
116
  svg["tabindex"] = object.tabindex
116
117
  fill_color = object.color || "currentColor"
117
118
  doc.at_css("path")["fill"] = fill_color
118
-
119
- if object.aria.present?
120
- object.aria.each do |key, value|
121
- k = key.to_s
122
- attr = k.start_with?("aria-") ? k : "aria-#{k.tr('_', '-')}"
123
- svg[attr] = value
124
- end
125
- end
126
-
127
119
  raw doc
128
120
  rescue OpenURI::HTTPError, StandardError
129
121
  # Handle any exceptions and return an empty string
@@ -51,7 +51,6 @@ const IconButton = (props: IconButtonProps) => {
51
51
  id={id}
52
52
  >
53
53
  <Button
54
- aria={aria}
55
54
  borderRadius="xs"
56
55
  htmlType={htmlType}
57
56
  link={link}
@@ -1,6 +1,5 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("button", props: { aria: object.aria,
3
- type: object.type,
2
+ <%= pb_rails("button", props: { type: object.type,
4
3
  link: object.link,
5
4
  new_window:object.new_window,
6
5
  target: object.target,
@@ -1,3 +1,3 @@
1
1
  <%= pb_content_tag do %>
2
- <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true, aria: { "aria-label": "#{object.icon} icon" } }) %>
2
+ <%= pb_rails("icon", props: { dark: object.dark, icon: object.icon, fixed_width: true }) %>
3
3
  <% end %>