playbook_ui 16.1.0.pre.alpha.play279914268 → 16.1.0.pre.alpha.testingrailsfix14159
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.
- checksums.yaml +4 -4
- data/app/pb_kits/playbook/pb_advanced_table/docs/_advanced_table_sort.md +1 -1
- data/app/pb_kits/playbook/pb_dropdown/docs/_dropdown_with_custom_display_rails.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown.html.erb +1 -1
- data/app/pb_kits/playbook/pb_dropdown/dropdown_trigger.html.erb +8 -8
- data/app/pb_kits/playbook/pb_dropdown/index.js +10 -11
- data/app/pb_kits/playbook/pb_multi_level_select/_multi_level_select.tsx +3 -1
- data/app/pb_kits/playbook/pb_multi_level_select/multi_level_select_options.tsx +1 -1
- data/app/pb_kits/playbook/pb_nav/_item.tsx +3 -5
- data/app/pb_kits/playbook/pb_nav/_nav.scss +3 -82
- data/app/pb_kits/playbook/pb_nav/docs/example.yml +6 -2
- data/app/pb_kits/playbook/pb_nav/docs/index.js +1 -2
- data/app/pb_kits/playbook/pb_nav/item.html.erb +1 -1
- data/app/pb_kits/playbook/pb_nav/item.rb +1 -1
- data/app/pb_kits/playbook/pb_nav/navTypes.ts +0 -1
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.test.jsx +1 -29
- data/app/pb_kits/playbook/pb_typeahead/_typeahead.tsx +0 -1
- data/app/pb_kits/playbook/tokens/_colors.scss +0 -3
- data/app/pb_kits/playbook/tokens/exports/_colors.module.scss +0 -10
- data/dist/chunks/{_pb_line_graph-CC2Ywwix.js → _pb_line_graph-DuJNCf7N.js} +1 -1
- data/dist/chunks/_typeahead-BKSzddAX.js +1 -0
- data/dist/chunks/{globalProps-DYr2qrIf.js → globalProps-Bc-FVsRt.js} +1 -1
- data/dist/chunks/{lib-DgqmX9CF.js → lib-BwX82vim.js} +1 -1
- data/dist/chunks/vendor.js +1 -1
- data/dist/playbook-rails-react-bindings.js +1 -1
- data/dist/playbook-rails.js +1 -1
- data/dist/playbook.css +2 -2
- data/dist/reset.css +1 -1
- data/lib/playbook/version.rb +1 -1
- metadata +6 -9
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.html.erb +0 -24
- data/app/pb_kits/playbook/pb_nav/docs/_collapsible_nav_disabled_item.jsx +0 -87
- data/app/pb_kits/playbook/tokens/_colors_accessible.scss +0 -250
- data/dist/chunks/_typeahead-BUVLBwlT.js +0 -1
checksums.yaml
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
---
|
|
2
2
|
SHA256:
|
|
3
|
-
metadata.gz:
|
|
4
|
-
data.tar.gz:
|
|
3
|
+
metadata.gz: d322d1484a0695b5c047cf03aa19f8af74cf5ad1728dc20a327eb2447c986d61
|
|
4
|
+
data.tar.gz: 042e05bf1e98557de7c10f400b547d52d806788e4e14e40fdf374934eed0a0d9
|
|
5
5
|
SHA512:
|
|
6
|
-
metadata.gz:
|
|
7
|
-
data.tar.gz:
|
|
6
|
+
metadata.gz: a29ba74bbb1ceefdc7817720135660996607782e6ecbe661b112bd23d7d576dd8526de402247e20551c94acba07ee146c1522f58b3165368926a49af0c00c9e0
|
|
7
|
+
data.tar.gz: c10ac2431f78b6b2d88a0ae45f7543d501341449d1d79d62a2321a93e2594c03aa36ef678f4f2377667801d261fde114228b8ad09c06b3cd71b61206ff6b5f3b
|
|
@@ -2,4 +2,4 @@ the `enableSorting` prop is a boolean prop set to false by default. If true, the
|
|
|
2
2
|
|
|
3
3
|
### sortIcon
|
|
4
4
|
|
|
5
|
-
An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-wide
|
|
5
|
+
An optional prop, `sortIcon` allows you to customize your icon sets by passing it an array of any comma-separated pair of icon values. The first icon value will replace the kit's default icon when sort direction is desc, and the second value will replace the default icon when sort direction is asc. `sortIcon` also allows you to pass it a single icon as a string, in which case the icon will not toggle with the sort state. Default for this prop is `["arrow-up-short-wide", "arrow-down-short-wide"]`. All strings must be valid FA icons.
|
|
@@ -76,7 +76,7 @@
|
|
|
76
76
|
const option = e.detail;
|
|
77
77
|
const dropdown = e.target;
|
|
78
78
|
|
|
79
|
-
const display = dropdown.querySelector("
|
|
79
|
+
const display = dropdown.querySelector("#dropdown_trigger_custom_display");
|
|
80
80
|
if (!display) return;
|
|
81
81
|
|
|
82
82
|
const nameEl = display.querySelector("#dropdown-avatar-name");
|
|
@@ -7,7 +7,7 @@
|
|
|
7
7
|
<div class="dropdown_wrapper<%= error_class %>" style="position: relative">
|
|
8
8
|
<input
|
|
9
9
|
data-default-value="<%= input_default_value %>"
|
|
10
|
-
|
|
10
|
+
id="dropdown-selected-option"
|
|
11
11
|
name="<%= object.name %><%= '[]' if object.multi_select %>"
|
|
12
12
|
style="display: none"
|
|
13
13
|
<%= object.required ? "required" : ""%>
|
|
@@ -23,15 +23,15 @@
|
|
|
23
23
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
24
24
|
<% if object.custom_display.present? %>
|
|
25
25
|
<%= pb_rails("flex", props: {align: "center"}) do %>
|
|
26
|
-
<div
|
|
26
|
+
<div id="dropdown_trigger_custom_display" style="display: none;">
|
|
27
27
|
<%= object.custom_display %>
|
|
28
28
|
</div>
|
|
29
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
29
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
|
30
30
|
<% end %>
|
|
31
31
|
<% else %>
|
|
32
32
|
<% if object.multi_select %>
|
|
33
33
|
<%= pb_rails("flex", props: { align: "center", wrap: true }) do %>
|
|
34
|
-
<%= pb_rails("flex", props: {
|
|
34
|
+
<%= pb_rails("flex", props: { id:"dropdown_pills_wrapper", wrap: true }) do %>
|
|
35
35
|
<% end %>
|
|
36
36
|
<% if object.autocomplete %>
|
|
37
37
|
<input
|
|
@@ -42,7 +42,7 @@
|
|
|
42
42
|
autocomplete="off"
|
|
43
43
|
/>
|
|
44
44
|
<% else %>
|
|
45
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
45
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display_multi_select"}) %>
|
|
46
46
|
<% end %>
|
|
47
47
|
<% end %>
|
|
48
48
|
<% else %>
|
|
@@ -55,7 +55,7 @@
|
|
|
55
55
|
autocomplete="off"
|
|
56
56
|
/>
|
|
57
57
|
<% else %>
|
|
58
|
-
<%= pb_rails("body", props: {text: object.default_display_placeholder,
|
|
58
|
+
<%= pb_rails("body", props: {text: object.default_display_placeholder, id: "dropdown_trigger_display"}) %>
|
|
59
59
|
<% end %>
|
|
60
60
|
<% end %>
|
|
61
61
|
<% end %>
|
|
@@ -63,9 +63,9 @@
|
|
|
63
63
|
<% end %>
|
|
64
64
|
<%= pb_rails("flex/flex_item") do %>
|
|
65
65
|
<%= pb_rails("body", props: {display: "flex", align_items:"center" }) do %>
|
|
66
|
-
<%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm",
|
|
67
|
-
<%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm",
|
|
68
|
-
<%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm",
|
|
66
|
+
<%= pb_rails("icon", props: {icon: "times", cursor: "pointer", size:"sm", id: "dropdown_clear_icon", padding_right:"xs" }) %>
|
|
67
|
+
<%= pb_rails("icon", props: {icon: "chevron-down", cursor: "pointer", size:"sm", id: "dropdown_open_icon"}) %>
|
|
68
|
+
<%= pb_rails("icon", props: {icon: "chevron-up", cursor: "pointer", size:"sm", id: "dropdown_close_icon"}) %>
|
|
69
69
|
<% end %>
|
|
70
70
|
<% end %>
|
|
71
71
|
<% end %>
|
|
@@ -4,19 +4,18 @@ import { PbDropdownKeyboard } from "./keyboard_accessibility";
|
|
|
4
4
|
const DROPDOWN_SELECTOR = "[data-pb-dropdown]";
|
|
5
5
|
const TRIGGER_SELECTOR = "[data-dropdown-trigger]";
|
|
6
6
|
const CONTAINER_SELECTOR = "[data-dropdown-container]";
|
|
7
|
-
const DOWN_ARROW_SELECTOR = "
|
|
8
|
-
const UP_ARROW_SELECTOR = "
|
|
7
|
+
const DOWN_ARROW_SELECTOR = "#dropdown_open_icon";
|
|
8
|
+
const UP_ARROW_SELECTOR = "#dropdown_close_icon";
|
|
9
9
|
const OPTION_SELECTOR = "[data-dropdown-option-label]";
|
|
10
10
|
const CUSTOM_DISPLAY_SELECTOR = "[data-dropdown-custom-trigger]";
|
|
11
|
-
const DROPDOWN_TRIGGER_DISPLAY = "
|
|
11
|
+
const DROPDOWN_TRIGGER_DISPLAY = "#dropdown_trigger_display";
|
|
12
12
|
const DROPDOWN_PLACEHOLDER = "[data-dropdown-placeholder]";
|
|
13
|
-
const DROPDOWN_INPUT = "
|
|
13
|
+
const DROPDOWN_INPUT = "#dropdown-selected-option";
|
|
14
14
|
const SEARCH_INPUT_SELECTOR = "[data-dropdown-autocomplete]";
|
|
15
15
|
const SEARCH_BAR_SELECTOR = "[data-dropdown-search]";
|
|
16
|
-
const CLEAR_ICON_SELECTOR = "
|
|
16
|
+
const CLEAR_ICON_SELECTOR = "#dropdown_clear_icon";
|
|
17
17
|
const LABEL_SELECTOR = '[data-dropdown="pb-dropdown-label"]';
|
|
18
18
|
|
|
19
|
-
|
|
20
19
|
export default class PbDropdown extends PbEnhancedElement {
|
|
21
20
|
static get selector() {
|
|
22
21
|
return DROPDOWN_SELECTOR;
|
|
@@ -306,7 +305,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
306
305
|
onOptionSelected(value, selectedOption) {
|
|
307
306
|
const triggerElement = this.element.querySelector(DROPDOWN_TRIGGER_DISPLAY);
|
|
308
307
|
const customDisplayElement = this.element.querySelector(
|
|
309
|
-
|
|
308
|
+
"#dropdown_trigger_custom_display",
|
|
310
309
|
);
|
|
311
310
|
|
|
312
311
|
if (triggerElement) {
|
|
@@ -694,9 +693,9 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
694
693
|
updatePills() {
|
|
695
694
|
if (!this.isMultiSelect) return;
|
|
696
695
|
|
|
697
|
-
const wrapper = this.element.querySelector(
|
|
696
|
+
const wrapper = this.element.querySelector("#dropdown_pills_wrapper");
|
|
698
697
|
const placeholder = this.element.querySelector(
|
|
699
|
-
|
|
698
|
+
"#dropdown_trigger_display_multi_select",
|
|
700
699
|
);
|
|
701
700
|
if (!wrapper) return;
|
|
702
701
|
|
|
@@ -774,7 +773,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
774
773
|
}
|
|
775
774
|
}
|
|
776
775
|
const customDisplay = this.element.querySelector(
|
|
777
|
-
|
|
776
|
+
"#dropdown_trigger_custom_display",
|
|
778
777
|
);
|
|
779
778
|
if (customDisplay) {
|
|
780
779
|
customDisplay.style.display = "none";
|
|
@@ -830,7 +829,7 @@ export default class PbDropdown extends PbEnhancedElement {
|
|
|
830
829
|
}
|
|
831
830
|
|
|
832
831
|
const customDisplay = this.element.querySelector(
|
|
833
|
-
|
|
832
|
+
"#dropdown_trigger_custom_display",
|
|
834
833
|
);
|
|
835
834
|
if (customDisplay) {
|
|
836
835
|
customDisplay.style.display = "none";
|
|
@@ -417,7 +417,9 @@ const MultiLevelSelect = forwardRef<HTMLInputElement, MultiLevelSelectProps>(
|
|
|
417
417
|
|
|
418
418
|
// Single select
|
|
419
419
|
const handleRadioButtonClick = (e: React.ChangeEvent<HTMLInputElement>) => {
|
|
420
|
-
const { id
|
|
420
|
+
const { id, value: inputText } = e.target;
|
|
421
|
+
// The radio button needs a unique ID, this grabs the ID before the hyphen
|
|
422
|
+
const selectedItemID = id.match(/^[^-]*/)[0];
|
|
421
423
|
|
|
422
424
|
// Check if the item is disabled - if so, don't allow selection (safety check in addition to native disabled attribute)
|
|
423
425
|
const clickedItem = filterFormattedDataById(
|
|
@@ -91,7 +91,6 @@ const NavItem = (props: NavItemProps) => {
|
|
|
91
91
|
marginX,
|
|
92
92
|
marginY,
|
|
93
93
|
disabled = false,
|
|
94
|
-
|
|
95
94
|
} = props;
|
|
96
95
|
|
|
97
96
|
const spacingMarginProps = {
|
|
@@ -198,14 +197,13 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
|
198
197
|
if (React.isValidElement(child)) {
|
|
199
198
|
const childProps: NavChildProps = {
|
|
200
199
|
itemSpacing: itemSpacing,
|
|
201
|
-
...(disabled && { disabled: disabled })
|
|
202
200
|
};
|
|
203
201
|
return React.cloneElement(child, childProps);
|
|
204
202
|
}
|
|
205
203
|
return child;
|
|
206
204
|
});
|
|
207
205
|
|
|
208
|
-
const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass
|
|
206
|
+
const collapsibleClasses = buildCss("collapsible_nav_wrapper", activeClass, highlightedBorderClass, collapsibleTrailClass)
|
|
209
207
|
|
|
210
208
|
const handleKeyDown = (e: React.KeyboardEvent) => {
|
|
211
209
|
if (!disabled && !isLink && (e.key === "Enter" || e.key === " ")) {
|
|
@@ -233,8 +231,8 @@ const { filteredPadding, filteredMargin } = filterItemSpacing(itemSpacing);
|
|
|
233
231
|
icon={iconRight && iconRight}
|
|
234
232
|
iconSize="xs"
|
|
235
233
|
id={id}
|
|
236
|
-
onClick={
|
|
237
|
-
onIconClick={
|
|
234
|
+
onClick={onClick}
|
|
235
|
+
onIconClick={onIconRightClick}
|
|
238
236
|
>
|
|
239
237
|
<Collapsible.Main
|
|
240
238
|
className={globalProps({ ...finalItemSpacing })}
|
|
@@ -7,10 +7,8 @@
|
|
|
7
7
|
@import "./collapsible_nav";
|
|
8
8
|
|
|
9
9
|
[class^="pb_nav_list"] {
|
|
10
|
-
|
|
11
10
|
//classes for fontSize and fontWeight props
|
|
12
11
|
.font_size_small {
|
|
13
|
-
|
|
14
12
|
.pb_nav_list_item_text,
|
|
15
13
|
.pb_nav_list_item_text_collapsible {
|
|
16
14
|
font-size: $font_small;
|
|
@@ -18,7 +16,6 @@
|
|
|
18
16
|
}
|
|
19
17
|
|
|
20
18
|
.font_size_normal {
|
|
21
|
-
|
|
22
19
|
.pb_nav_list_item_text,
|
|
23
20
|
.pb_nav_list_item_text_collapsible {
|
|
24
21
|
font-size: $font_normal;
|
|
@@ -26,7 +23,6 @@
|
|
|
26
23
|
}
|
|
27
24
|
|
|
28
25
|
.font_bolder {
|
|
29
|
-
|
|
30
26
|
.pb_nav_list_item_text,
|
|
31
27
|
.pb_nav_list_item_text_collapsible {
|
|
32
28
|
font-weight: $bolder !important;
|
|
@@ -34,7 +30,6 @@
|
|
|
34
30
|
}
|
|
35
31
|
|
|
36
32
|
.font_bold {
|
|
37
|
-
|
|
38
33
|
.pb_nav_list_item_text,
|
|
39
34
|
.pb_nav_list_item_text_collapsible {
|
|
40
35
|
font-weight: $bold !important;
|
|
@@ -42,7 +37,6 @@
|
|
|
42
37
|
}
|
|
43
38
|
|
|
44
39
|
.font_regular {
|
|
45
|
-
|
|
46
40
|
.pb_nav_list_item_text,
|
|
47
41
|
.pb_nav_list_item_text_collapsible {
|
|
48
42
|
font-weight: $regular;
|
|
@@ -85,22 +79,19 @@
|
|
|
85
79
|
}
|
|
86
80
|
|
|
87
81
|
// Disabled scss
|
|
88
|
-
.pb_nav_item_disabled{
|
|
82
|
+
.pb_nav_item_disabled {
|
|
89
83
|
cursor: not-allowed !important;
|
|
90
|
-
|
|
91
|
-
.pb_nav_list_item_text,
|
|
84
|
+
.pb_nav_list_item_text,
|
|
92
85
|
.pb_nav_list_item_icon_left,
|
|
93
86
|
.pb_nav_list_item_icon_right,
|
|
94
87
|
.pb_nav_list_item_icon_section {
|
|
95
88
|
color: $text_lt_lighter !important;
|
|
96
89
|
cursor: not-allowed !important;
|
|
97
90
|
}
|
|
98
|
-
|
|
99
91
|
@media (hover: hover) {
|
|
100
92
|
&:hover {
|
|
101
|
-
background-color:
|
|
93
|
+
background-color: unset !important;
|
|
102
94
|
color: $text_lt_lighter !important;
|
|
103
|
-
|
|
104
95
|
.pb_nav_list_item_text,
|
|
105
96
|
.pb_nav_list_item_icon_left,
|
|
106
97
|
.pb_nav_list_item_icon_right {
|
|
@@ -109,73 +100,3 @@
|
|
|
109
100
|
}
|
|
110
101
|
}
|
|
111
102
|
}
|
|
112
|
-
|
|
113
|
-
.pb_nav_item_disabled {
|
|
114
|
-
cursor: not-allowed !important;
|
|
115
|
-
|
|
116
|
-
.pb_nav_list_item_text,
|
|
117
|
-
.pb_nav_list_item_text_collapsible,
|
|
118
|
-
.pb_nav_list_item_icon_left,
|
|
119
|
-
.pb_nav_list_item_icon_right,
|
|
120
|
-
.pb_nav_list_item_icon_section,
|
|
121
|
-
.pb_nav_list_item_link,
|
|
122
|
-
.pb_nav_list_item_link_collapsible,
|
|
123
|
-
.cursor_pointer {
|
|
124
|
-
color: $text_lt_lighter !important;
|
|
125
|
-
cursor: not-allowed !important;
|
|
126
|
-
}
|
|
127
|
-
|
|
128
|
-
.pb_collapsible_main_kit {
|
|
129
|
-
background-color: $white !important;
|
|
130
|
-
}
|
|
131
|
-
|
|
132
|
-
.icon_wrapper,
|
|
133
|
-
svg {
|
|
134
|
-
color: $text_lt_lighter !important;
|
|
135
|
-
cursor: not-allowed !important;
|
|
136
|
-
}
|
|
137
|
-
|
|
138
|
-
@media (hover: hover) {
|
|
139
|
-
&:hover {
|
|
140
|
-
background-color: $white !important;
|
|
141
|
-
|
|
142
|
-
.pb_collapsible_main_kit,
|
|
143
|
-
.pb_nav_list_item_link,
|
|
144
|
-
.icon_wrapper {
|
|
145
|
-
background-color: $white !important;
|
|
146
|
-
}
|
|
147
|
-
|
|
148
|
-
.pb_nav_list_item_icon_section_collapsible path,
|
|
149
|
-
.pb_nav_list_item_link_collapsible path {
|
|
150
|
-
color: $text_lt_lighter !important;
|
|
151
|
-
}
|
|
152
|
-
}
|
|
153
|
-
}
|
|
154
|
-
}
|
|
155
|
-
|
|
156
|
-
.collapsible_nav_wrapper_pb_nav_item_disabled {
|
|
157
|
-
.pb_collapsible_main_kit {
|
|
158
|
-
background-color: $white !important;
|
|
159
|
-
}
|
|
160
|
-
|
|
161
|
-
.pb_nav_list_item_link,
|
|
162
|
-
.pb_nav_list_item_text,
|
|
163
|
-
.pb_nav_list_item_icon_left,
|
|
164
|
-
.pb_nav_list_item_icon_right,
|
|
165
|
-
.icon_wrapper,
|
|
166
|
-
.pb_nav_list_item_icon_section {
|
|
167
|
-
color: $text_lt_lighter !important;
|
|
168
|
-
cursor: not-allowed !important;
|
|
169
|
-
}
|
|
170
|
-
|
|
171
|
-
.icon_wrapper svg {
|
|
172
|
-
color: $text_lt_lighter !important;
|
|
173
|
-
}
|
|
174
|
-
|
|
175
|
-
&:hover {
|
|
176
|
-
.icon_wrapper,
|
|
177
|
-
.pb_nav_list_item_link {
|
|
178
|
-
background-color: $white !important;
|
|
179
|
-
}
|
|
180
|
-
}
|
|
181
|
-
}
|
|
@@ -14,7 +14,6 @@ examples:
|
|
|
14
14
|
- collapsible_nav: Collapsible Nav
|
|
15
15
|
- collapsible_nav_with_all_options: Collapsible Nav With Options
|
|
16
16
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
17
|
-
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
18
17
|
- horizontal_nav: Horizontal Nav
|
|
19
18
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
20
19
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -43,7 +42,6 @@ examples:
|
|
|
43
42
|
- collapsible_nav_item_spacing: Collapsible Nav With ItemSpacing
|
|
44
43
|
- collapsible_nav_custom: Collapsible Nav With Custom Toggling
|
|
45
44
|
- collapsible_nav_no_icon: Collapsible Nav No Icon
|
|
46
|
-
- collapsible_nav_disabled_item: Collapsible Nav With Disabled Item
|
|
47
45
|
- horizontal_nav: Horizontal Nav
|
|
48
46
|
- subtle_horizontal_nav: Subtle Horizontal Nav
|
|
49
47
|
- bold_horizontal_nav: Bold Horizontal Nav
|
|
@@ -64,3 +62,9 @@ examples:
|
|
|
64
62
|
- nav_horizontal_subtle_no_highlight_swift: Horizontal Subtle No Highlight
|
|
65
63
|
- nav_horizontal_bold_swift: Horizontal Bold
|
|
66
64
|
- nav_props_swift: ""
|
|
65
|
+
|
|
66
|
+
|
|
67
|
+
|
|
68
|
+
|
|
69
|
+
|
|
70
|
+
|
|
@@ -22,5 +22,4 @@ export { default as CollapsibleNavItemSpacing } from "./_collapsible_nav_item_sp
|
|
|
22
22
|
export { default as CollapsibleNavNoIcon } from "./_collapsible_nav_no_icon.jsx"
|
|
23
23
|
export { default as HorizontalNavExtendedunderline } from './_horizontal_nav_extendedunderline.jsx'
|
|
24
24
|
export { default as HorizontalNavDisabled } from './_horizontal_nav_disabled.jsx'
|
|
25
|
-
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
26
|
-
export { default as CollapsibleNavDisabledItem } from './_collapsible_nav_disabled_item.jsx'
|
|
25
|
+
export { default as VerticalNavDisabled } from './_vertical_nav_disabled.jsx'
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
<% if object.collapsible %>
|
|
2
|
-
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname
|
|
2
|
+
<%= pb_rails("collapsible", props: { name: "collapsible-nav-example", classname: object.collapsible_nav_classname }) do %>
|
|
3
3
|
<%= pb_rails("collapsible/collapsible_main", props: { name: "default-collapsible-nav", icon: object.collapsible_icons, size: "xs", dark: object.dark, classname:object.margin_classes }) do %>
|
|
4
4
|
<%= pb_content_tag( object.tag,
|
|
5
5
|
href: object.link && object.link,
|
|
@@ -25,7 +25,7 @@ module Playbook
|
|
|
25
25
|
default: "_self"
|
|
26
26
|
def classname
|
|
27
27
|
if collapsible
|
|
28
|
-
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible
|
|
28
|
+
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{generate_classname('pb_collapsible_nav_item', active_class, collapsible_trail_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link_collapsible"
|
|
29
29
|
else
|
|
30
30
|
"#{generate_classname('pb_nav_list_kit_item', active_class, highlighted_border_class)} #{font_size_class} #{font_weight_class} pb_nav_list_item_link#{disabled_class}"
|
|
31
31
|
end
|
|
@@ -289,35 +289,7 @@ test('input display none shows number of selected items', () => {
|
|
|
289
289
|
|
|
290
290
|
const kit = screen.getByTestId('input-display-none-test')
|
|
291
291
|
const inputDisplayDiv = kit.querySelector(".pb_typeahead_selection_count")
|
|
292
|
-
expect(inputDisplayDiv).toHaveTextContent("2 items selected")
|
|
293
|
-
})
|
|
294
|
-
|
|
295
|
-
test('input display none keeps selected options visible in dropdown with selected styling', async () => {
|
|
296
|
-
render(
|
|
297
|
-
<Typeahead
|
|
298
|
-
data={{ testid: 'input-display-none-dropdown-test' }}
|
|
299
|
-
defaultValue={[options[0], options[1]]}
|
|
300
|
-
inputDisplay="none"
|
|
301
|
-
isMulti
|
|
302
|
-
options={options}
|
|
303
|
-
/>
|
|
304
|
-
)
|
|
305
|
-
|
|
306
|
-
const kit = screen.getByTestId('input-display-none-dropdown-test')
|
|
307
|
-
const control = kit.querySelector('.typeahead-kit-select__control')
|
|
308
|
-
fireEvent.mouseDown(control)
|
|
309
|
-
|
|
310
|
-
await waitFor(() => {
|
|
311
|
-
const menu = kit.querySelector('.typeahead-kit-select__menu')
|
|
312
|
-
expect(menu).toBeInTheDocument()
|
|
313
|
-
})
|
|
314
|
-
|
|
315
|
-
// Selected options (Orange, Red) should remain in the dropdown and be marked as selected
|
|
316
|
-
const selectedOptions = kit.querySelectorAll('.typeahead-kit-select__option--is-selected')
|
|
317
|
-
expect(selectedOptions.length).toBe(2)
|
|
318
|
-
const labels = Array.from(selectedOptions).map((el) => el.textContent)
|
|
319
|
-
expect(labels).toContain('Orange')
|
|
320
|
-
expect(labels).toContain('Red')
|
|
292
|
+
expect(inputDisplayDiv).toHaveTextContent("2 items selected")
|
|
321
293
|
})
|
|
322
294
|
|
|
323
295
|
test('typeahead with pills that use name instead of label', () => {
|
|
@@ -292,7 +292,6 @@ const Typeahead = forwardRef<HTMLInputElement, TypeaheadProps>(
|
|
|
292
292
|
multiKit: "",
|
|
293
293
|
onCreateOption: null as null,
|
|
294
294
|
plusIcon: false,
|
|
295
|
-
...(inputDisplay === 'none' ? { hideSelectedOptions: false, closeMenuOnSelect: false } : {}),
|
|
296
295
|
// eslint-disable-next-line @typescript-eslint/no-unused-vars
|
|
297
296
|
onMultiValueClick: (_option: SelectValueType): any => undefined,
|
|
298
297
|
pillColor: pillColor,
|
|
@@ -6,7 +6,6 @@
|
|
|
6
6
|
#{"" + $name}: $color;
|
|
7
7
|
}
|
|
8
8
|
}
|
|
9
|
-
/* Legacy tokens — from _colors.scss */
|
|
10
9
|
@include export-colors($product_colors);
|
|
11
10
|
@include export-colors($status_colors);
|
|
12
11
|
@include export-colors($data_colors);
|
|
@@ -24,13 +23,4 @@
|
|
|
24
23
|
@include export-colors($category_colors);
|
|
25
24
|
gradient_start: $gradient_start;
|
|
26
25
|
gradient_end: $gradient_end;
|
|
27
|
-
/* Accessible tokens — from _colors_accessible.scss */
|
|
28
|
-
@include export-colors($accessible_text_colors);
|
|
29
|
-
@include export-colors($accessible_input_text_colors);
|
|
30
|
-
@include export-colors($accessible_input_background_colors);
|
|
31
|
-
@include export-colors($accessible_input_border_colors);
|
|
32
|
-
@include export-colors($accessible_status_text_colors);
|
|
33
|
-
@include export-colors($accessible_status_background_colors);
|
|
34
|
-
@include export-colors($accessible_status_icon_background_colors);
|
|
35
|
-
@include export-colors($accessible_status_border_colors);
|
|
36
26
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-
|
|
1
|
+
import{jsx}from"react/jsx-runtime";import{useMemo}from"react";import{b as buildAriaProps,a as buildDataProps,c as buildHtmlProps,d as classnames,e as buildCss,g as globalProps}from"./globalProps-Bc-FVsRt.js";import Highcharts from"highcharts";import HighchartsReact from"highcharts-react-official";import{t as typography,c as colors}from"./lib-BwX82vim.js";import highchartsMore from"highcharts/highcharts-more";import solidGauge from"highcharts/modules/solid-gauge";const barGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"column"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],credits:{enabled:false},legend:{enabled:false,itemStyle:{color:colors.text_lt_light,fill:colors.text_lt_light,fontSize:typography.text_smaller}},xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbBarGraph=props=>{const{aria:aria={},data:data={},id:id,htmlOptions:htmlOptions={},options:options,className:className}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_bar_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbBarGraph />",options);return{}}return Highcharts.merge({},barGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbCircleChartTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},chart:{type:"pie"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{pie:{dataLabels:{enabled:false,connectorShape:"straight",connectorWidth:3,format:"<div>{point.name}</div>",style:{fontFamily:typography.font_family_base,fontSize:typography.text_smaller,color:colors.text_lt_light,fontWeight:typography.regular,textOutline:"2px $white"}},innerSize:"50%",borderColor:"",borderWidth:null,colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7]}},legend:{layout:"horizontal",align:"center",verticalAlign:"bottom",itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},credits:{enabled:false}};const PbCircleChart=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_circle_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbCircleChart />",options);return{}}return Highcharts.merge({},pbCircleChartTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbGaugeGraphTheme={title:{text:"",style:{fontFamily:typography.font_family_base,fontSize:typography.text_larger}},chart:{type:"solidgauge",events:{render(){this.container;const arc=this.container.querySelector("path.gauge-pane");if(arc)arc.setAttribute("stroke-linejoin","round")}}},pane:{size:"90%",startAngle:-100,endAngle:100,background:[{borderWidth:20,innerRadius:"90%",outerRadius:"90%",shape:"arc",className:"gauge-pane",borderColor:colors.border_light,borderRadius:"50%"}]},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},pointFormat:'<span style="font-weight: bold; color:{point.color};">●</span>{point.name}: <b>{point.y}</b>',followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},yAxis:{min:0,max:100,lineWidth:0,tickPositions:[]},plotOptions:{solidgauge:{borderColor:colors.data_1,borderWidth:20,color:colors.data_1,radius:90,innerRadius:"90%",y:-26,dataLabels:{borderWidth:0,color:colors.text_lt_default,enabled:true,format:'<span class="fix">{y:,f}</span>',style:{fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_2},y:-26}}},credits:{enabled:false}};const PbGaugeChart=props=>{const{aria:aria={},className:className,data:data={},htmlOptions:htmlOptions={},id:id,ref:ref,options:options={}}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_gauge_chart"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbGaugeGraphTheme,options)}),[options]);highchartsMore(Highcharts);solidGauge(Highcharts);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,ref:ref,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};const pbLineGraphTheme={title:{text:"",style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.bold,fontSize:typography.heading_3}},subtitle:{text:"",style:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_base}},chart:{type:"line"},tooltip:{backgroundColor:{linearGradient:{x1:0,y1:0,x2:0,y2:1},stops:[[0,colors.bg_dark],[1,colors.bg_dark]]},followPointer:true,shadow:false,borderWidth:0,borderRadius:10,style:{fontFamily:typography.font_family_base,color:colors.text_dk_default,fontWeight:typography.regular,fontSize:typography.text_smaller}},plotOptions:{line:{dataLabels:{enabled:false}}},credits:{enabled:false},legend:{enabled:false,itemStyle:{fontFamily:typography.font_family_base,color:colors.text_lt_light,fontWeight:typography.regular,fontSize:typography.text_smaller},itemHoverStyle:{color:colors.text_lt_default},itemHiddenStyle:{color:colors.text_lt_lighter}},colors:[colors.data_1,colors.data_2,colors.data_3,colors.data_4,colors.data_5,colors.data_6,colors.data_7],xAxis:{gridLineWidth:0,lineColor:colors.border_light,tickColor:colors.border_light,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{color:colors.text_lt_default,fontFamily:typography.font_family_base,fontWeight:typography.regular,fontSize:typography.heading_4}}},yAxis:{alternateGridColor:void 0,minorTickInterval:null,gridLineColor:colors.border_light,minorGridLineColor:colors.border_light,lineWidth:0,tickWidth:0,tickPixelInterval:50,labels:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}},title:{style:{fontFamily:typography.font_family_base,color:colors.text_lt_lighter,fontWeight:typography.bold,fontSize:typography.text_smaller}}}};const PbLineGraph=props=>{const{aria:aria={},className:className,data:data={},id:id,htmlOptions:htmlOptions={},options:options}=props;const ariaProps=buildAriaProps(aria);const dataProps=buildDataProps(data);const htmlProps=buildHtmlProps(htmlOptions);const classes=classnames(buildCss("pb_pb_line_graph"),globalProps(props),className);const mergedOptions=useMemo((()=>{if(!options||typeof options!=="object"){console.error("❌ Invalid options passed to <PbLineGraph />",options);return{}}return Highcharts.merge({},pbLineGraphTheme,options)}),[options]);return jsx("div",{children:jsx(HighchartsReact,{containerProps:{className:classnames(classes),id:id,...ariaProps,...dataProps,...htmlProps},highcharts:Highcharts,options:mergedOptions})})};export{PbBarGraph as P,PbCircleChart as a,PbGaugeChart as b,PbLineGraph as c};
|