openproject-primer_view_components 0.72.1 → 0.73.0
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/CHANGELOG.md +12 -0
- data/app/assets/javascripts/components/primer/open_project/danger_dialog_form_helper.d.ts +4 -0
- data/app/assets/javascripts/primer_view_components.js +1 -1
- data/app/assets/javascripts/primer_view_components.js.map +1 -1
- data/app/assets/styles/primer_view_components.css +1 -1
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/open_project/danger_dialog.html.erb +6 -2
- data/app/components/primer/open_project/danger_dialog_form_helper.d.ts +4 -0
- data/app/components/primer/open_project/danger_dialog_form_helper.js +19 -3
- data/app/components/primer/open_project/danger_dialog_form_helper.ts +13 -3
- data/app/components/primer/open_project/filterable_tree_view.html.erb +5 -3
- data/app/components/primer/open_project/filterable_tree_view.rb +17 -11
- data/app/components/primer/open_project/page_header.css +1 -1
- data/app/components/primer/open_project/page_header.css.map +1 -1
- data/app/components/primer/open_project/page_header.pcss +1 -1
- data/config/locales/en.yml +4 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/open_project/danger_dialog_preview.rb +31 -21
- data/previews/primer/open_project/filterable_tree_view_preview/hide_checkbox.html.erb +28 -0
- data/previews/primer/open_project/filterable_tree_view_preview/hide_segmented_control.html.erb +26 -0
- data/previews/primer/open_project/filterable_tree_view_preview/playground.html.erb +4 -1
- data/previews/primer/open_project/filterable_tree_view_preview.rb +23 -2
- data/static/constants.json +3 -1
- data/static/info_arch.json +32 -6
- data/static/previews.json +32 -6
- metadata +4 -2
|
@@ -3,7 +3,10 @@
|
|
|
3
3
|
<% dialog.with_header(close_label: I18n.t("button_close")) %>
|
|
4
4
|
<% end %>
|
|
5
5
|
|
|
6
|
-
<danger-dialog-form-helper
|
|
6
|
+
<danger-dialog-form-helper
|
|
7
|
+
data-confirmation-live-message-checked="<%= I18n.t("danger_dialog.confirmation_live_message_checked") %>"
|
|
8
|
+
data-confirmation-live-message-unchecked="<%= I18n.t("danger_dialog.confirmation_live_message_unchecked") %>">
|
|
9
|
+
|
|
7
10
|
<%= render(@form_wrapper) do %>
|
|
8
11
|
<scrollable-region data-labelled-by="<%= labelledby %>">
|
|
9
12
|
<%= render(Primer::Alpha::Dialog::Body.new) do %>
|
|
@@ -16,8 +19,9 @@
|
|
|
16
19
|
</scrollable-region>
|
|
17
20
|
<%= render(Primer::Alpha::Dialog::Footer.new(show_divider: false)) do %>
|
|
18
21
|
<%= render(Primer::Beta::Button.new(data: { "close-dialog-id": dialog_id })) { @cancel_button_text } %>
|
|
19
|
-
<%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
|
|
22
|
+
<%= render(Primer::Beta::Button.new(type: (@form_wrapper.shows_form? ? :submit : :button), scheme: :danger, aria: { describedby: "#{dialog_id}-check_box" }, data: { "submit-dialog-id": dialog_id })) { @confirm_button_text } %>
|
|
20
23
|
<% end %>
|
|
24
|
+
<live-region data-target="danger-dialog-form-helper.liveRegion"></live-region>
|
|
21
25
|
<% end %>
|
|
22
26
|
</danger-dialog-form-helper>
|
|
23
27
|
<% end %>
|
|
@@ -1,6 +1,10 @@
|
|
|
1
|
+
import type { LiveRegionElement } from '@primer/live-region-element';
|
|
1
2
|
declare class DangerDialogFormHelperElement extends HTMLElement {
|
|
2
3
|
#private;
|
|
3
4
|
checkbox: HTMLInputElement | undefined;
|
|
5
|
+
liveRegion: LiveRegionElement;
|
|
6
|
+
confirmationLiveMessageChecked: string;
|
|
7
|
+
confirmationLiveMessageUnchecked: string;
|
|
4
8
|
get form(): HTMLFormElement | null;
|
|
5
9
|
get submitButton(): HTMLInputElement | HTMLButtonElement;
|
|
6
10
|
connectedCallback(): void;
|
|
@@ -10,12 +10,14 @@ var __classPrivateFieldGet = (this && this.__classPrivateFieldGet) || function (
|
|
|
10
10
|
return kind === "m" ? f : kind === "a" ? f.call(receiver) : f ? f.value : state.get(receiver);
|
|
11
11
|
};
|
|
12
12
|
var _DangerDialogFormHelperElement_instances, _DangerDialogFormHelperElement_reset;
|
|
13
|
-
import { controller, target } from '@github/catalyst';
|
|
13
|
+
import { controller, target, attr } from '@github/catalyst';
|
|
14
14
|
const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]';
|
|
15
15
|
let DangerDialogFormHelperElement = class DangerDialogFormHelperElement extends HTMLElement {
|
|
16
16
|
constructor() {
|
|
17
17
|
super(...arguments);
|
|
18
18
|
_DangerDialogFormHelperElement_instances.add(this);
|
|
19
|
+
this.confirmationLiveMessageChecked = '';
|
|
20
|
+
this.confirmationLiveMessageUnchecked = '';
|
|
19
21
|
}
|
|
20
22
|
get form() {
|
|
21
23
|
return this.querySelector('form');
|
|
@@ -33,8 +35,13 @@ let DangerDialogFormHelperElement = class DangerDialogFormHelperElement extends
|
|
|
33
35
|
__classPrivateFieldGet(this, _DangerDialogFormHelperElement_instances, "m", _DangerDialogFormHelperElement_reset).call(this);
|
|
34
36
|
}
|
|
35
37
|
toggle() {
|
|
36
|
-
if (this.checkbox)
|
|
37
|
-
|
|
38
|
+
if (!this.checkbox || !this.submitButton)
|
|
39
|
+
return;
|
|
40
|
+
const enabled = this.checkbox.checked;
|
|
41
|
+
this.submitButton.disabled = !enabled;
|
|
42
|
+
if (this.liveRegion) {
|
|
43
|
+
const message = enabled ? this.confirmationLiveMessageChecked : this.confirmationLiveMessageUnchecked;
|
|
44
|
+
this.liveRegion.announce(message, { politeness: 'assertive' });
|
|
38
45
|
}
|
|
39
46
|
}
|
|
40
47
|
};
|
|
@@ -45,6 +52,15 @@ _DangerDialogFormHelperElement_reset = function _DangerDialogFormHelperElement_r
|
|
|
45
52
|
__decorate([
|
|
46
53
|
target
|
|
47
54
|
], DangerDialogFormHelperElement.prototype, "checkbox", void 0);
|
|
55
|
+
__decorate([
|
|
56
|
+
target
|
|
57
|
+
], DangerDialogFormHelperElement.prototype, "liveRegion", void 0);
|
|
58
|
+
__decorate([
|
|
59
|
+
attr
|
|
60
|
+
], DangerDialogFormHelperElement.prototype, "confirmationLiveMessageChecked", void 0);
|
|
61
|
+
__decorate([
|
|
62
|
+
attr
|
|
63
|
+
], DangerDialogFormHelperElement.prototype, "confirmationLiveMessageUnchecked", void 0);
|
|
48
64
|
DangerDialogFormHelperElement = __decorate([
|
|
49
65
|
controller
|
|
50
66
|
], DangerDialogFormHelperElement);
|
|
@@ -1,10 +1,14 @@
|
|
|
1
|
-
import {controller, target} from '@github/catalyst'
|
|
1
|
+
import {controller, target, attr} from '@github/catalyst'
|
|
2
|
+
import type {LiveRegionElement} from '@primer/live-region-element'
|
|
2
3
|
|
|
3
4
|
const SUBMIT_BUTTON_SELECTOR = 'input[type=submit],button[type=submit],button[data-submit-dialog-id]'
|
|
4
5
|
|
|
5
6
|
@controller
|
|
6
7
|
class DangerDialogFormHelperElement extends HTMLElement {
|
|
7
8
|
@target checkbox: HTMLInputElement | undefined
|
|
9
|
+
@target liveRegion: LiveRegionElement
|
|
10
|
+
@attr confirmationLiveMessageChecked = ''
|
|
11
|
+
@attr confirmationLiveMessageUnchecked = ''
|
|
8
12
|
|
|
9
13
|
get form() {
|
|
10
14
|
return this.querySelector('form')
|
|
@@ -25,8 +29,14 @@ class DangerDialogFormHelperElement extends HTMLElement {
|
|
|
25
29
|
}
|
|
26
30
|
|
|
27
31
|
toggle(): void {
|
|
28
|
-
if (this.checkbox)
|
|
29
|
-
|
|
32
|
+
if (!this.checkbox || !this.submitButton) return
|
|
33
|
+
|
|
34
|
+
const enabled = this.checkbox.checked
|
|
35
|
+
this.submitButton.disabled = !enabled
|
|
36
|
+
|
|
37
|
+
if (this.liveRegion) {
|
|
38
|
+
const message = enabled ? this.confirmationLiveMessageChecked : this.confirmationLiveMessageUnchecked
|
|
39
|
+
this.liveRegion.announce(message, {politeness: 'assertive'})
|
|
30
40
|
}
|
|
31
41
|
}
|
|
32
42
|
|
|
@@ -2,10 +2,12 @@
|
|
|
2
2
|
<%= render(Primer::Alpha::Stack.new) do %>
|
|
3
3
|
<%= render(Primer::Alpha::Stack.new(wrap: :reverse, direction: :horizontal, align: :center)) do %>
|
|
4
4
|
<%= render(Primer::Alpha::Stack.new(wrap: :wrap, direction: :horizontal, align: :center)) do %>
|
|
5
|
-
|
|
6
|
-
<%= render(
|
|
5
|
+
<% if @filter_mode_control.present? %>
|
|
6
|
+
<%= render(Primer::Alpha::StackItem.new) do %>
|
|
7
|
+
<%= render(@filter_mode_control) %>
|
|
8
|
+
<% end %>
|
|
7
9
|
<% end %>
|
|
8
|
-
<%= render(Primer::Alpha::StackItem.new) do %>
|
|
10
|
+
<%= render(Primer::Alpha::StackItem.new(hidden: @include_sub_items_check_box_arguments[:hidden])) do %>
|
|
9
11
|
<%= render(@include_sub_items_check_box) do |input| %>
|
|
10
12
|
<% input.merge_input_arguments!(form: "") %>
|
|
11
13
|
<% end %>
|
|
@@ -126,7 +126,9 @@ module Primer
|
|
|
126
126
|
|
|
127
127
|
DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS = {
|
|
128
128
|
label: I18n.t("filterable_tree_view.include_sub_items"),
|
|
129
|
-
name: :include_sub_items
|
|
129
|
+
name: :include_sub_items,
|
|
130
|
+
checked: false,
|
|
131
|
+
hidden: false,
|
|
130
132
|
}
|
|
131
133
|
|
|
132
134
|
DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS.freeze
|
|
@@ -184,21 +186,25 @@ module Primer
|
|
|
184
186
|
|
|
185
187
|
@filter_input = Primer::Alpha::TextField.new(**filter_input_arguments)
|
|
186
188
|
|
|
187
|
-
filter_mode_control_arguments
|
|
188
|
-
filter_mode_control_arguments
|
|
189
|
-
|
|
190
|
-
|
|
191
|
-
|
|
189
|
+
unless filter_mode_control_arguments == :none
|
|
190
|
+
filter_mode_control_arguments[:data] = merge_data(
|
|
191
|
+
filter_mode_control_arguments, {
|
|
192
|
+
data: { target: "filterable-tree-view.filterModeControlList" }
|
|
193
|
+
}
|
|
194
|
+
)
|
|
195
|
+
|
|
196
|
+
@filter_mode_control = Primer::Alpha::SegmentedControl.new(**filter_mode_control_arguments)
|
|
197
|
+
end
|
|
192
198
|
|
|
193
|
-
@
|
|
199
|
+
@include_sub_items_check_box_arguments = include_sub_items_check_box_arguments.reverse_merge(DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS)
|
|
194
200
|
|
|
195
|
-
include_sub_items_check_box_arguments[:data] = merge_data(
|
|
196
|
-
include_sub_items_check_box_arguments, {
|
|
201
|
+
@include_sub_items_check_box_arguments[:data] = merge_data(
|
|
202
|
+
@include_sub_items_check_box_arguments, {
|
|
197
203
|
data: { target: "filterable-tree-view.includeSubItemsCheckBox" }
|
|
198
204
|
}
|
|
199
205
|
)
|
|
200
206
|
|
|
201
|
-
@include_sub_items_check_box = Primer::Alpha::CheckBox.new(
|
|
207
|
+
@include_sub_items_check_box = Primer::Alpha::CheckBox.new(**@include_sub_items_check_box_arguments)
|
|
202
208
|
|
|
203
209
|
@system_arguments = deny_tag_argument(**system_arguments)
|
|
204
210
|
@system_arguments[:tag] = :"filterable-tree-view"
|
|
@@ -245,7 +251,7 @@ module Primer
|
|
|
245
251
|
def before_render
|
|
246
252
|
content
|
|
247
253
|
|
|
248
|
-
if @filter_mode_control.items.empty?
|
|
254
|
+
if @filter_mode_control.present? && @filter_mode_control.items.empty?
|
|
249
255
|
with_default_filter_modes
|
|
250
256
|
end
|
|
251
257
|
end
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1
|
|
1
|
+
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--base-size-16);padding-bottom:var(--base-size-8)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar{height:var(--control-small-size)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end;margin-bottom:var(--base-size-8)}.PageHeader-title{flex:1 1 auto;font-size:var(--text-title-size-medium)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 auto;font-size:var(--text-body-size-medium)}.PageHeader-description--underlined-links a{-webkit-text-decoration:underline;text-decoration:underline}.PageHeader-tabNavBar{overflow:auto}.PageHeader-tabNavBar .PageHeader-tabNav{min-width:max-content}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--base-size-16)}.PageHeader-actions{align-items:center;display:flex;justify-content:flex-end}.PageHeader-breadcrumbs{display:block;width:100%}.PageHeader-leadingAction{margin-right:var(--base-size-4);margin-top:var(--base-size-2)}.PageHeader-parentLink{flex:1 1 auto}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n margin-bottom: var(--base-size-8);\n height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center; /* Keep back button vertically aligned. */\n margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\n flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1
|
|
1
|
+
{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,iCAAkC,CADlC,iCAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAEA,uBAME,gCACF,CAEA,4CALE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCAUF,CAEA,kBAEE,aAAc,CADd,uCAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,4CAEE,iCAA0B,CAA1B,yBACF,CAEA,sBACE,aACF,CAEA,yCACE,qBACF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,6BAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--base-size-8);\n margin-bottom: var(--base-size-16);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-muted);\n flex-flow: column;\n}\n\n.PageHeader--withTabNav {\n border-bottom: none;\n padding-bottom: 0;\n margin-bottom: 0;\n}\n\n.PageHeader-contextBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center;\n margin-bottom: var(--base-size-8);\n height: var(--control-small-size);\n}\n\n.PageHeader-titleBar {\n display: flex;\n flex-flow: row;\n justify-content: flex-end;\n align-items: center; /* Keep back button vertically aligned. */\n margin-bottom: var(--base-size-8);\n}\n\n.PageHeader-title {\n font-size: var(--text-title-size-medium);\n flex: 1 1 auto;\n}\n\n.PageHeader-title--large {\n font-size: var(--text-title-size-large);\n}\n\n/* One-liner of supporting text */\n.PageHeader-description {\n font-size: var(--text-body-size-medium);\n color: var(--fgColor-muted);\n flex: 1 auto;\n}\n\n.PageHeader-description--underlined-links a {\n /* Ensure the accessibility is met, given that the description is written in light grey */\n text-decoration: underline;\n}\n\n.PageHeader-tabNavBar {\n overflow: auto;\n}\n\n.PageHeader-tabNavBar .PageHeader-tabNav {\n min-width: max-content;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n margin-bottom: var(--base-size-16);\n}\n\n.PageHeader-actions {\n justify-content: flex-end;\n display: flex;\n align-items: center;\n}\n\n.PageHeader-breadcrumbs {\n display: block;\n width: 100%;\n}\n\n.PageHeader-leadingAction {\n margin-top: var(--base-size-2); /* to center align with label */\n margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n flex: 1 1 auto;\n}\n"]}
|
data/config/locales/en.yml
CHANGED
|
@@ -18,3 +18,7 @@ en:
|
|
|
18
18
|
label_title: "Title"
|
|
19
19
|
label_loading: "Loading..."
|
|
20
20
|
label_more: "More"
|
|
21
|
+
|
|
22
|
+
danger_dialog:
|
|
23
|
+
confirmation_live_message_checked: "The button to proceed is now active."
|
|
24
|
+
confirmation_live_message_unchecked: "The button to proceed is now inactive. You need to tick the checkbox to continue."
|
|
@@ -19,19 +19,6 @@ module Primer
|
|
|
19
19
|
end
|
|
20
20
|
end
|
|
21
21
|
|
|
22
|
-
# @label With confirmation check box
|
|
23
|
-
# @snapshot interactive
|
|
24
|
-
def with_confirmation_check_box
|
|
25
|
-
render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
|
|
26
|
-
dialog.with_show_button { "Click me" }
|
|
27
|
-
dialog.with_confirmation_message do |message|
|
|
28
|
-
message.with_heading(tag: :h2) { "Permanently delete this item?" }
|
|
29
|
-
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
|
30
|
-
end
|
|
31
|
-
dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
|
|
32
|
-
end
|
|
33
|
-
end
|
|
34
|
-
|
|
35
22
|
# @label Playground
|
|
36
23
|
# @param icon [Symbol] octicon
|
|
37
24
|
# @param icon_color [Symbol] select [default, muted, subtle, accent, success, attention, severe, danger, open, closed, done, sponsors, on_emphasis, inherit]
|
|
@@ -40,6 +27,8 @@ module Primer
|
|
|
40
27
|
# @param confirm_button_text [String]
|
|
41
28
|
# @param cancel_button_text [String]
|
|
42
29
|
# @param check_box_text [String]
|
|
30
|
+
# @param live_message_checked [String]
|
|
31
|
+
# @param live_message_unchecked [String]
|
|
43
32
|
def playground(
|
|
44
33
|
icon: :"alert",
|
|
45
34
|
icon_color: :danger,
|
|
@@ -47,15 +36,36 @@ module Primer
|
|
|
47
36
|
show_additional_details: false,
|
|
48
37
|
confirm_button_text: "Understood",
|
|
49
38
|
cancel_button_text: "NO!",
|
|
50
|
-
check_box_text: "I understand that this deletion cannot be reversed"
|
|
39
|
+
check_box_text: "I understand that this deletion cannot be reversed",
|
|
40
|
+
live_message_checked: "Checkbox checked — you can proceed.",
|
|
41
|
+
live_message_unchecked: "Please check the confirmation box to continue."
|
|
51
42
|
)
|
|
52
|
-
render_with_template(
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
43
|
+
render_with_template(
|
|
44
|
+
locals: {
|
|
45
|
+
icon: icon,
|
|
46
|
+
icon_color: icon_color,
|
|
47
|
+
show_description: show_description,
|
|
48
|
+
show_additional_details: show_additional_details,
|
|
49
|
+
confirm_button_text: confirm_button_text,
|
|
50
|
+
cancel_button_text: cancel_button_text,
|
|
51
|
+
check_box_text: check_box_text,
|
|
52
|
+
live_message_checked: live_message_checked,
|
|
53
|
+
live_message_unchecked: live_message_unchecked
|
|
54
|
+
}
|
|
55
|
+
)
|
|
56
|
+
end
|
|
57
|
+
|
|
58
|
+
# @label With confirmation check box
|
|
59
|
+
# @snapshot interactive
|
|
60
|
+
def with_confirmation_check_box
|
|
61
|
+
render(Primer::OpenProject::DangerDialog.new(title: "Delete dialog")) do |dialog|
|
|
62
|
+
dialog.with_show_button { "Click me" }
|
|
63
|
+
dialog.with_confirmation_message do |message|
|
|
64
|
+
message.with_heading(tag: :h2) { "Permanently delete this item?" }
|
|
65
|
+
message.with_description_content("This action is not reversible. Please proceed with caution.")
|
|
66
|
+
end
|
|
67
|
+
dialog.with_confirmation_check_box_content("I understand that this deletion cannot be reversed")
|
|
68
|
+
end
|
|
59
69
|
end
|
|
60
70
|
|
|
61
71
|
# @label With form using FormBuilder
|
|
@@ -0,0 +1,28 @@
|
|
|
1
|
+
<%= render(Primer::OpenProject::FilterableTreeView.new(
|
|
2
|
+
include_sub_items_check_box_arguments: { hidden: true, checked: include_sub_items }
|
|
3
|
+
)) do |tree| %>
|
|
4
|
+
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
|
|
5
|
+
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
|
|
6
|
+
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>
|
|
7
|
+
<% end %>
|
|
8
|
+
|
|
9
|
+
<% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
|
|
10
|
+
<% hufflepuff.with_leaf(label: "Draco Malfoy") %>
|
|
11
|
+
<% end %>
|
|
12
|
+
|
|
13
|
+
<% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
|
|
14
|
+
<% hufflepuff.with_leaf(label: "Susan Bones") %>
|
|
15
|
+
<% end %>
|
|
16
|
+
|
|
17
|
+
<% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
|
|
18
|
+
<% hufflepuff.with_leaf(label: "Harry Potter") %>
|
|
19
|
+
<% hufflepuff.with_leaf(label: "Ronald Weasley") %>
|
|
20
|
+
<% hufflepuff.with_leaf(label: "Hermione Granger") %>
|
|
21
|
+
<% end %>
|
|
22
|
+
<% end %>
|
|
23
|
+
|
|
24
|
+
<% tree.with_leaf(label: "Albus Dumbledore") %>
|
|
25
|
+
<% tree.with_leaf(label: "Minerva McGonagall") %>
|
|
26
|
+
<% tree.with_leaf(label: "Severus Snape") %>
|
|
27
|
+
<% tree.with_leaf(label: "Rubeus Hagrid") %>
|
|
28
|
+
<% end %>
|
data/previews/primer/open_project/filterable_tree_view_preview/hide_segmented_control.html.erb
ADDED
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<%= render(Primer::OpenProject::FilterableTreeView.new(filter_mode_control_arguments: :none)) do |tree| %>
|
|
2
|
+
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
|
|
3
|
+
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
|
|
4
|
+
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<% hogwarts.with_sub_tree(label: "Slytherin", expanded: expanded) do |hufflepuff| %>
|
|
8
|
+
<% hufflepuff.with_leaf(label: "Draco Malfoy") %>
|
|
9
|
+
<% end %>
|
|
10
|
+
|
|
11
|
+
<% hogwarts.with_sub_tree(label: "Hufflepuff", expanded: expanded) do |hufflepuff| %>
|
|
12
|
+
<% hufflepuff.with_leaf(label: "Susan Bones") %>
|
|
13
|
+
<% end %>
|
|
14
|
+
|
|
15
|
+
<% hogwarts.with_sub_tree(label: "Gryffindor", expanded: expanded) do |hufflepuff| %>
|
|
16
|
+
<% hufflepuff.with_leaf(label: "Harry Potter") %>
|
|
17
|
+
<% hufflepuff.with_leaf(label: "Ronald Weasley") %>
|
|
18
|
+
<% hufflepuff.with_leaf(label: "Hermione Granger") %>
|
|
19
|
+
<% end %>
|
|
20
|
+
<% end %>
|
|
21
|
+
|
|
22
|
+
<% tree.with_leaf(label: "Albus Dumbledore") %>
|
|
23
|
+
<% tree.with_leaf(label: "Minerva McGonagall") %>
|
|
24
|
+
<% tree.with_leaf(label: "Severus Snape") %>
|
|
25
|
+
<% tree.with_leaf(label: "Rubeus Hagrid") %>
|
|
26
|
+
<% end %>
|
|
@@ -1,4 +1,7 @@
|
|
|
1
|
-
<%= render(Primer::OpenProject::FilterableTreeView.new
|
|
1
|
+
<%= render(Primer::OpenProject::FilterableTreeView.new(
|
|
2
|
+
include_sub_items_check_box_arguments: { hidden: !show_checkbox },
|
|
3
|
+
**(show_segmented_control ? {} : { filter_mode_control_arguments: :none })
|
|
4
|
+
)) do |tree| %>
|
|
2
5
|
<% tree.with_sub_tree(label: "Students", expanded: expanded) do |hogwarts| %>
|
|
3
6
|
<% hogwarts.with_sub_tree(label: "Ravenclaw", expanded: expanded) do |ravenclaw| %>
|
|
4
7
|
<% ravenclaw.with_leaf(label: "Luna Lovegood") %>
|
|
@@ -7,9 +7,13 @@ module Primer
|
|
|
7
7
|
# @label Playground
|
|
8
8
|
#
|
|
9
9
|
# @param expanded [Boolean] toggle
|
|
10
|
-
|
|
10
|
+
# @param show_checkbox [Boolean] toggle
|
|
11
|
+
# @param show_segmented_control [Boolean] toggle
|
|
12
|
+
def playground(expanded: true, show_checkbox: true, show_segmented_control: true)
|
|
11
13
|
render_with_template(locals: {
|
|
12
|
-
expanded: coerce_bool(expanded)
|
|
14
|
+
expanded: coerce_bool(expanded),
|
|
15
|
+
show_checkbox: coerce_bool(show_checkbox),
|
|
16
|
+
show_segmented_control: coerce_bool(show_segmented_control)
|
|
13
17
|
})
|
|
14
18
|
end
|
|
15
19
|
|
|
@@ -106,6 +110,23 @@ module Primer
|
|
|
106
110
|
})
|
|
107
111
|
end
|
|
108
112
|
|
|
113
|
+
# @label Hide checkbox
|
|
114
|
+
#
|
|
115
|
+
# @param include_sub_items [Boolean] toggle
|
|
116
|
+
def hide_checkbox(include_sub_items: true)
|
|
117
|
+
render_with_template(locals: {
|
|
118
|
+
expanded: true,
|
|
119
|
+
include_sub_items: coerce_bool(include_sub_items)
|
|
120
|
+
})
|
|
121
|
+
end
|
|
122
|
+
|
|
123
|
+
# @label Hide SegmentedControl
|
|
124
|
+
def hide_segmented_control(expanded: true)
|
|
125
|
+
render_with_template(locals: {
|
|
126
|
+
expanded: coerce_bool(expanded)
|
|
127
|
+
})
|
|
128
|
+
end
|
|
129
|
+
|
|
109
130
|
private
|
|
110
131
|
|
|
111
132
|
def coerce_bool(value)
|
data/static/constants.json
CHANGED
|
@@ -1770,7 +1770,9 @@
|
|
|
1770
1770
|
},
|
|
1771
1771
|
"DEFAULT_INCLUDE_SUB_ITEMS_CHECK_BOX_ARGUMENTS": {
|
|
1772
1772
|
"label": "Include sub-items",
|
|
1773
|
-
"name": "include_sub_items"
|
|
1773
|
+
"name": "include_sub_items",
|
|
1774
|
+
"checked": false,
|
|
1775
|
+
"hidden": false
|
|
1774
1776
|
},
|
|
1775
1777
|
"DEFAULT_NO_RESULTS_NODE_ARGUMENTS": {
|
|
1776
1778
|
"label": "No results"
|
data/static/info_arch.json
CHANGED
|
@@ -19149,9 +19149,9 @@
|
|
|
19149
19149
|
}
|
|
19150
19150
|
},
|
|
19151
19151
|
{
|
|
19152
|
-
"preview_path": "primer/open_project/danger_dialog/
|
|
19153
|
-
"name": "
|
|
19154
|
-
"snapshot": "
|
|
19152
|
+
"preview_path": "primer/open_project/danger_dialog/playground",
|
|
19153
|
+
"name": "playground",
|
|
19154
|
+
"snapshot": "false",
|
|
19155
19155
|
"skip_rules": {
|
|
19156
19156
|
"wont_fix": [
|
|
19157
19157
|
"region"
|
|
@@ -19162,9 +19162,9 @@
|
|
|
19162
19162
|
}
|
|
19163
19163
|
},
|
|
19164
19164
|
{
|
|
19165
|
-
"preview_path": "primer/open_project/danger_dialog/
|
|
19166
|
-
"name": "
|
|
19167
|
-
"snapshot": "
|
|
19165
|
+
"preview_path": "primer/open_project/danger_dialog/with_confirmation_check_box",
|
|
19166
|
+
"name": "with_confirmation_check_box",
|
|
19167
|
+
"snapshot": "interactive",
|
|
19168
19168
|
"skip_rules": {
|
|
19169
19169
|
"wont_fix": [
|
|
19170
19170
|
"region"
|
|
@@ -19760,6 +19760,32 @@
|
|
|
19760
19760
|
"color-contrast"
|
|
19761
19761
|
]
|
|
19762
19762
|
}
|
|
19763
|
+
},
|
|
19764
|
+
{
|
|
19765
|
+
"preview_path": "primer/open_project/filterable_tree_view/hide_checkbox",
|
|
19766
|
+
"name": "hide_checkbox",
|
|
19767
|
+
"snapshot": "false",
|
|
19768
|
+
"skip_rules": {
|
|
19769
|
+
"wont_fix": [
|
|
19770
|
+
"region"
|
|
19771
|
+
],
|
|
19772
|
+
"will_fix": [
|
|
19773
|
+
"color-contrast"
|
|
19774
|
+
]
|
|
19775
|
+
}
|
|
19776
|
+
},
|
|
19777
|
+
{
|
|
19778
|
+
"preview_path": "primer/open_project/filterable_tree_view/hide_segmented_control",
|
|
19779
|
+
"name": "hide_segmented_control",
|
|
19780
|
+
"snapshot": "false",
|
|
19781
|
+
"skip_rules": {
|
|
19782
|
+
"wont_fix": [
|
|
19783
|
+
"region"
|
|
19784
|
+
],
|
|
19785
|
+
"will_fix": [
|
|
19786
|
+
"color-contrast"
|
|
19787
|
+
]
|
|
19788
|
+
}
|
|
19763
19789
|
}
|
|
19764
19790
|
],
|
|
19765
19791
|
"subcomponents": []
|
data/static/previews.json
CHANGED
|
@@ -3326,9 +3326,9 @@
|
|
|
3326
3326
|
}
|
|
3327
3327
|
},
|
|
3328
3328
|
{
|
|
3329
|
-
"preview_path": "primer/open_project/danger_dialog/
|
|
3330
|
-
"name": "
|
|
3331
|
-
"snapshot": "
|
|
3329
|
+
"preview_path": "primer/open_project/danger_dialog/playground",
|
|
3330
|
+
"name": "playground",
|
|
3331
|
+
"snapshot": "false",
|
|
3332
3332
|
"skip_rules": {
|
|
3333
3333
|
"wont_fix": [
|
|
3334
3334
|
"region"
|
|
@@ -3339,9 +3339,9 @@
|
|
|
3339
3339
|
}
|
|
3340
3340
|
},
|
|
3341
3341
|
{
|
|
3342
|
-
"preview_path": "primer/open_project/danger_dialog/
|
|
3343
|
-
"name": "
|
|
3344
|
-
"snapshot": "
|
|
3342
|
+
"preview_path": "primer/open_project/danger_dialog/with_confirmation_check_box",
|
|
3343
|
+
"name": "with_confirmation_check_box",
|
|
3344
|
+
"snapshot": "interactive",
|
|
3345
3345
|
"skip_rules": {
|
|
3346
3346
|
"wont_fix": [
|
|
3347
3347
|
"region"
|
|
@@ -4311,6 +4311,32 @@
|
|
|
4311
4311
|
"color-contrast"
|
|
4312
4312
|
]
|
|
4313
4313
|
}
|
|
4314
|
+
},
|
|
4315
|
+
{
|
|
4316
|
+
"preview_path": "primer/open_project/filterable_tree_view/hide_checkbox",
|
|
4317
|
+
"name": "hide_checkbox",
|
|
4318
|
+
"snapshot": "false",
|
|
4319
|
+
"skip_rules": {
|
|
4320
|
+
"wont_fix": [
|
|
4321
|
+
"region"
|
|
4322
|
+
],
|
|
4323
|
+
"will_fix": [
|
|
4324
|
+
"color-contrast"
|
|
4325
|
+
]
|
|
4326
|
+
}
|
|
4327
|
+
},
|
|
4328
|
+
{
|
|
4329
|
+
"preview_path": "primer/open_project/filterable_tree_view/hide_segmented_control",
|
|
4330
|
+
"name": "hide_segmented_control",
|
|
4331
|
+
"snapshot": "false",
|
|
4332
|
+
"skip_rules": {
|
|
4333
|
+
"wont_fix": [
|
|
4334
|
+
"region"
|
|
4335
|
+
],
|
|
4336
|
+
"will_fix": [
|
|
4337
|
+
"color-contrast"
|
|
4338
|
+
]
|
|
4339
|
+
}
|
|
4314
4340
|
}
|
|
4315
4341
|
]
|
|
4316
4342
|
},
|
metadata
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
|
2
2
|
name: openproject-primer_view_components
|
|
3
3
|
version: !ruby/object:Gem::Version
|
|
4
|
-
version: 0.
|
|
4
|
+
version: 0.73.0
|
|
5
5
|
platform: ruby
|
|
6
6
|
authors:
|
|
7
7
|
- GitHub Open Source
|
|
@@ -9,7 +9,7 @@ authors:
|
|
|
9
9
|
autorequire:
|
|
10
10
|
bindir: bin
|
|
11
11
|
cert_chain: []
|
|
12
|
-
date: 2025-09-
|
|
12
|
+
date: 2025-09-24 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|
|
@@ -1222,6 +1222,8 @@ files:
|
|
|
1222
1222
|
- previews/primer/open_project/filterable_tree_view_preview/custom_segmented_control.html.erb
|
|
1223
1223
|
- previews/primer/open_project/filterable_tree_view_preview/default.html.erb
|
|
1224
1224
|
- previews/primer/open_project/filterable_tree_view_preview/form_input.html.erb
|
|
1225
|
+
- previews/primer/open_project/filterable_tree_view_preview/hide_checkbox.html.erb
|
|
1226
|
+
- previews/primer/open_project/filterable_tree_view_preview/hide_segmented_control.html.erb
|
|
1225
1227
|
- previews/primer/open_project/filterable_tree_view_preview/playground.html.erb
|
|
1226
1228
|
- previews/primer/open_project/filterable_tree_view_preview/stress_test.html.erb
|
|
1227
1229
|
- previews/primer/open_project/flex_layout_preview.rb
|