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.
@@ -1,4 +1,10 @@
1
1
  <%= render(Primer::BaseComponent.new(**@system_arguments)) do %>
2
- <%= text_input %>
3
- <%= trailing_action %>
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{margin-bottom:var(--base-size-8)}.PageHeader-contextBar,.PageHeader-titleBar{align-items:center;display:flex;flex-flow:row;justify-content:flex-end}.PageHeader-titleBar{margin-bottom:var(--space-xsmall)}.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
+ .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,CAEA,uBAKE,gCACF,CAEA,4CAJE,kBAAmB,CAHnB,YAAa,CACb,aAAc,CACd,wBAWF,CANA,qBAKE,iCACF,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(--space-xsmall);\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"]}
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"]}
@@ -27,7 +27,7 @@
27
27
  flex-flow: row;
28
28
  justify-content: flex-end;
29
29
  align-items: center; /* Keep back button vertically aligned. */
30
- margin-bottom: var(--space-xsmall);
30
+ margin-bottom: var(--base-size-8);
31
31
  }
32
32
 
33
33
  .PageHeader-title {
@@ -6,7 +6,7 @@ module Primer
6
6
  module VERSION
7
7
  MAJOR = 0
8
8
  MINOR = 36
9
- PATCH = 0
9
+ PATCH = 2
10
10
 
11
11
  STRING = [MAJOR, MINOR, PATCH].join(".")
12
12
  end
@@ -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
@@ -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.0
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-03 00:00:00.000000000 Z
12
+ date: 2024-07-09 00:00:00.000000000 Z
13
13
  dependencies:
14
14
  - !ruby/object:Gem::Dependency
15
15
  name: actionview