openproject-primer_view_components 0.36.0 → 0.36.2
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 +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
|