openproject-primer_view_components 0.36.0 → 0.36.2
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +19 -0
- 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/input_group.html.erb +8 -2
- data/app/components/primer/open_project/input_group.rb +10 -2
- 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/lib/primer/view_components/version.rb +1 -1
- data/previews/primer/open_project/input_group_preview.rb +14 -1
- data/static/info_arch.json +20 -0
- data/static/previews.json +13 -0
- metadata +2 -2
|
@@ -1,4 +1,10 @@
|
|
|
1
1
|
<%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
|
|
2
|
-
<%=
|
|
3
|
-
|
|
2
|
+
<%= render(Primer::BaseComponent.new(tag: :div, display: :flex, align_items: :flex_end)) do %>
|
|
3
|
+
<%= text_input %>
|
|
4
|
+
<%= trailing_action %>
|
|
5
|
+
<% end %>
|
|
6
|
+
|
|
7
|
+
<% if caption %>
|
|
8
|
+
<%= caption %>
|
|
9
|
+
<% end %>
|
|
4
10
|
<% end %>
|
|
@@ -47,6 +47,7 @@ module Primer
|
|
|
47
47
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
48
48
|
renders_one :text_input, lambda { |readonly: true, **system_arguments|
|
|
49
49
|
deny_single_argument(:input_width, "Set the `input_width` on the `InputGroup`", **system_arguments)
|
|
50
|
+
deny_single_argument(:caption, "Set the `caption` on the `InputGroup`", **system_arguments)
|
|
50
51
|
system_arguments[:input_width] = @system_arguments[:input_width]
|
|
51
52
|
|
|
52
53
|
system_arguments[:classes] = class_names(
|
|
@@ -65,12 +66,19 @@ module Primer
|
|
|
65
66
|
Primer::Alpha::TextField.new(**system_arguments)
|
|
66
67
|
}
|
|
67
68
|
|
|
69
|
+
renders_one :caption, lambda { |**system_arguments|
|
|
70
|
+
system_arguments[:classes] = class_names(
|
|
71
|
+
system_arguments[:classes],
|
|
72
|
+
"FormControl-caption"
|
|
73
|
+
)
|
|
74
|
+
|
|
75
|
+
Primer::Beta::Text.new(**system_arguments)
|
|
76
|
+
}
|
|
77
|
+
|
|
68
78
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
69
79
|
def initialize(**system_arguments)
|
|
70
80
|
@system_arguments = system_arguments
|
|
71
81
|
@system_arguments[:tag] = :div
|
|
72
|
-
@system_arguments[:display] = :flex
|
|
73
|
-
@system_arguments[:align_items] = :flex_end
|
|
74
82
|
|
|
75
83
|
@system_arguments[:input_width] = fetch_or_fallback(
|
|
76
84
|
Primer::OpenProject::InputGroup::INPUT_WIDTH_OPTIONS,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.PageHeader-contextBar
|
|
1
|
+
.PageHeader{border-bottom:var(--borderWidth-thin) solid var(--borderColor-muted);display:flex;flex-flow:column;margin-bottom:var(--stack-gap-normal);padding-bottom:var(--stack-padding-condensed)}.PageHeader--withTabNav{border-bottom:none;margin-bottom:0;padding-bottom:0}.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);font-weight:var(--base-text-weight-normal)}.PageHeader-title--large{font-size:var(--text-title-size-large)}.PageHeader-description{color:var(--fgColor-muted);flex:1 100%;font-size:var(--text-body-size-medium)}.PageHeader--withTabNav .PageHeader-description{margin-bottom:var(--space-xlarge)}.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:2px}.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,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,
|
|
1
|
+
{"version":3,"sources":["page_header.pcss"],"names":[],"mappings":"AAEA,YAIE,oEAAqE,CAHrE,YAAa,CAIb,gBAAiB,CAFjB,qCAAsC,CADtC,6CAIF,CAEA,wBACE,kBAAmB,CAEnB,eAAgB,CADhB,gBAEF,CAUA,4CAIE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAAyB,CAEzB,gCACF,CAEA,kBAGE,aAAc,CAFd,uCAAwC,CACxC,0CAEF,CAEA,yBACE,sCACF,CAGA,wBAEE,0BAA2B,CAC3B,WAAY,CAFZ,sCAGF,CAEA,gDACE,iCACF,CAEA,oBAGE,kBAAmB,CADnB,YAAa,CADb,wBAGF,CAEA,wBACE,aAAc,CACd,UACF,CAEA,0BAEE,+BAAgC,CADhC,cAEF,CAEA,uBACE,aACF","file":"page_header.css","sourcesContent":["/* OP PageHeader */\n\n.PageHeader {\n display: flex;\n padding-bottom: var(--stack-padding-condensed);\n margin-bottom: var(--stack-gap-normal);\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}\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 font-weight: var(--base-text-weight-normal);\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 100%;\n}\n\n.PageHeader--withTabNav .PageHeader-description {\n margin-bottom: var(--space-xlarge);\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: 2px; /* to center align with label */\n margin-right: var(--base-size-4);\n}\n\n.PageHeader-parentLink {\n flex: 1 1 auto;\n}\n"]}
|
|
@@ -22,12 +22,14 @@ module Primer
|
|
|
22
22
|
# @param visually_hide_label toggle
|
|
23
23
|
# @param readonly toggle
|
|
24
24
|
# @param input_width [Symbol] select [auto, small, medium, large, xlarge, xxlarge]
|
|
25
|
+
# @param caption [String]
|
|
25
26
|
def playground(
|
|
26
27
|
trailing_action: :clipboardCopy,
|
|
27
28
|
value: "Copyable value",
|
|
28
29
|
visually_hide_label: false,
|
|
29
30
|
readonly: true,
|
|
30
|
-
input_width: :medium
|
|
31
|
+
input_width: :medium,
|
|
32
|
+
caption: "Some caption"
|
|
31
33
|
)
|
|
32
34
|
render(Primer::OpenProject::InputGroup.new(input_width: input_width)) do |menu|
|
|
33
35
|
menu.with_text_input(name: "Test", label: "My input group", visually_hide_label: visually_hide_label, value: value, readonly: readonly)
|
|
@@ -40,6 +42,8 @@ module Primer
|
|
|
40
42
|
else
|
|
41
43
|
menu.with_trailing_action_clipboard_copy_button(id: "button-3", value: value, aria: { label: "Copy some text" })
|
|
42
44
|
end
|
|
45
|
+
|
|
46
|
+
menu.with_caption { caption }
|
|
43
47
|
end
|
|
44
48
|
end
|
|
45
49
|
|
|
@@ -58,6 +62,15 @@ module Primer
|
|
|
58
62
|
menu.with_trailing_action_clipboard_copy_button(id: "button-4", value: "Some value", aria: { label: "Copy some text" })
|
|
59
63
|
end
|
|
60
64
|
end
|
|
65
|
+
|
|
66
|
+
# @label With a caption
|
|
67
|
+
def with_caption
|
|
68
|
+
render(Primer::OpenProject::InputGroup.new) do |menu|
|
|
69
|
+
menu.with_text_input(name: "a name", label: "My input group", value: "Copyable value")
|
|
70
|
+
menu.with_trailing_action_clipboard_copy_button(id: "button", value: "Copyable value", aria: { label: "Copy some text" })
|
|
71
|
+
menu.with_caption { "Some caption" }
|
|
72
|
+
end
|
|
73
|
+
end
|
|
61
74
|
end
|
|
62
75
|
end
|
|
63
76
|
end
|
data/static/info_arch.json
CHANGED
|
@@ -16670,6 +16670,13 @@
|
|
|
16670
16670
|
"description": "{{link_to_system_arguments_docs}}"
|
|
16671
16671
|
}
|
|
16672
16672
|
]
|
|
16673
|
+
},
|
|
16674
|
+
{
|
|
16675
|
+
"name": "caption",
|
|
16676
|
+
"description": null,
|
|
16677
|
+
"parameters": [
|
|
16678
|
+
|
|
16679
|
+
]
|
|
16673
16680
|
}
|
|
16674
16681
|
],
|
|
16675
16682
|
"methods": [
|
|
@@ -16727,6 +16734,19 @@
|
|
|
16727
16734
|
"color-contrast"
|
|
16728
16735
|
]
|
|
16729
16736
|
}
|
|
16737
|
+
},
|
|
16738
|
+
{
|
|
16739
|
+
"preview_path": "primer/open_project/input_group/with_caption",
|
|
16740
|
+
"name": "with_caption",
|
|
16741
|
+
"snapshot": "false",
|
|
16742
|
+
"skip_rules": {
|
|
16743
|
+
"wont_fix": [
|
|
16744
|
+
"region"
|
|
16745
|
+
],
|
|
16746
|
+
"will_fix": [
|
|
16747
|
+
"color-contrast"
|
|
16748
|
+
]
|
|
16749
|
+
}
|
|
16730
16750
|
}
|
|
16731
16751
|
],
|
|
16732
16752
|
"subcomponents": [
|
data/static/previews.json
CHANGED
|
@@ -4270,6 +4270,19 @@
|
|
|
4270
4270
|
"color-contrast"
|
|
4271
4271
|
]
|
|
4272
4272
|
}
|
|
4273
|
+
},
|
|
4274
|
+
{
|
|
4275
|
+
"preview_path": "primer/open_project/input_group/with_caption",
|
|
4276
|
+
"name": "with_caption",
|
|
4277
|
+
"snapshot": "false",
|
|
4278
|
+
"skip_rules": {
|
|
4279
|
+
"wont_fix": [
|
|
4280
|
+
"region"
|
|
4281
|
+
],
|
|
4282
|
+
"will_fix": [
|
|
4283
|
+
"color-contrast"
|
|
4284
|
+
]
|
|
4285
|
+
}
|
|
4273
4286
|
}
|
|
4274
4287
|
]
|
|
4275
4288
|
},
|
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.36.
|
|
4
|
+
version: 0.36.2
|
|
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: 2024-07-
|
|
12
|
+
date: 2024-07-09 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|