openproject-primer_view_components 0.82.0 → 0.82.1
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 +8 -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/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.json +1 -0
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.pcss +5 -1
- data/app/components/primer/open_project/drag_handle.rb +21 -7
- data/config/locales/en.yml +3 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/static/arguments.json +12 -0
- data/static/info_arch.json +12 -0
- metadata +2 -2
|
@@ -1 +1 @@
|
|
|
1
|
-
.Banner{background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border:var(--borderWidth-thin) solid var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8);position:relative}@
|
|
1
|
+
x-banner{container-type:inline-size;display:block}.Banner{background-image:linear-gradient(var(--bgColor-accent-muted),var(--bgColor-accent-muted));border:var(--borderWidth-thin) solid var(--borderColor-accent-muted);border-radius:var(--borderRadius-medium);color:var(--fgColor-default);display:grid;grid-auto-flow:column;grid-template-areas:"visual message actions close";grid-template-columns:min-content 1fr minmax(0,auto) min-content;grid-template-rows:min-content;padding:var(--base-size-8);position:relative}@container (max-width: 543.98px){.Banner{grid-template-areas:"visual message close" ". actions actions";grid-template-columns:min-content 1fr min-content;grid-template-rows:min-content min-content}.Banner .Banner-actions{margin:var(--base-size-8) 0 0 var(--base-size-8)}}.Banner .Banner-visual{align-self:start;display:grid;grid-area:visual;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-visual)>.octicon{margin-block:calc(var(--base-size-4)/2)}:is(.Banner .Banner-visual)>*{align-self:center}.Banner .Banner-message{align-self:center;grid-area:message;padding:var(--base-size-6) var(--base-size-8)}:is(.Banner .Banner-message) p:last-child{margin-bottom:0}:is(.Banner .Banner-message) .Banner-title:not(:only-child){font-weight:var(--base-text-weight-semibold);margin-bottom:0}.Banner .Banner-actions{grid-area:actions}:is(.Banner .Banner-actions):last-child{align-self:center}.Banner .Banner-close{grid-area:close;margin-left:var(--controlStack-medium-gap-condensed)}.Banner .Banner-visual .octicon{color:var(--fgColor-accent)}.Banner.Banner--warning{background-image:linear-gradient(var(--bgColor-attention-muted),var(--bgColor-attention-muted));border-color:var(--borderColor-attention-muted);color:var(--fgColor-default)}.Banner.Banner--warning .Banner-visual .octicon{color:var(--fgColor-attention)}.Banner.Banner--error{background-image:linear-gradient(var(--bgColor-danger-muted),var(--bgColor-danger-muted));border-color:var(--borderColor-danger-muted);color:var(--fgColor-default)}.Banner.Banner--error .Banner-visual .octicon{color:var(--fgColor-danger)}.Banner.Banner--success{background-image:linear-gradient(var(--bgColor-success-muted),var(--bgColor-success-muted));border-color:var(--borderColor-success-muted);color:var(--fgColor-default)}.Banner.Banner--success .Banner-visual .octicon{color:var(--fgColor-success)}.Banner.Banner--upsell{background-image:linear-gradient(var(--bgColor-done-muted),var(--bgColor-done-muted));border-color:var(--borderColor-done-muted);color:var(--fgColor-default)}.Banner.Banner--upsell .Banner-visual .octicon{color:var(--fgColor-done)}.Banner.Banner--full{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}@media (max-width:767.98px){.Banner.Banner--full-whenNarrow{border-left:0;border-radius:0;border-right:0;margin-top:calc(var(--borderWidth-thin)*-1)}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"sources":["banner.pcss"],"names":[],"mappings":"AACA,SACE,0BAA2B,CAC3B,aACF,CAEA,QAKE,yFAA2F,CAC3F,oEAAqE,CACrE,wCAAyC,CAHzC,4BAA6B,CAF7B,YAAa,CAMb,qBAAsB,CACtB,kDAAmD,CACnD,gEAAkE,CAClE,8BAA+B,CAR/B,0BAA2B,CAF3B,iBAwIF,CA3HE,iCAdF,QAeI,8DAEqB,CACrB,iDAAkD,CAClD,0CAsHJ,CApHI,wBACE,gDACF,CACF,CAIA,uBAIE,gBAAiB,CAHjB,YAAa,CAEb,gBAAiB,CADjB,6CAWF,CAPE,qCACE,uCACF,CAEA,8BACE,iBACF,CAGF,wBAGE,iBAAkB,CADlB,iBAAkB,CADlB,6CAaF,CARE,0CACE,eACF,CAEA,4DAEE,4CAA6C,CAD7C,eAEF,CAGF,wBACE,iBAKF,CAHE,wCACE,iBACF,CAIF,sBACE,eAAgB,CAEhB,oDACF,CAEA,gCACE,2BACF,CAEA,wBAEE,+FAAiG,CACjG,+CAAgD,CAFhD,4BAOF,CAHE,gDACE,8BACF,CAGF,sBAEE,yFAA2F,CAC3F,4CAA6C,CAF7C,4BAOF,CAHE,8CACE,2BACF,CAGF,wBAEE,2FAA6F,CAC7F,6CAA8C,CAF9C,4BAOF,CAHE,gDACE,4BACF,CAGF,uBAEE,qFAAuF,CACvF,0CAA2C,CAF3C,4BAOF,CAHE,+CACE,yBACF,CAKF,qBAIE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,2CAIF,CAEA,4BACE,gCAIE,aAAc,CACd,eAAgB,CAFhB,cAAe,CADf,2CAIF,CACF","file":"banner.css","sourcesContent":["/* Banner alert */\nx-banner {\n container-type: inline-size;\n display: block;\n}\n\n.Banner {\n position: relative;\n display: grid;\n padding: var(--base-size-8);\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-accent-muted), var(--bgColor-accent-muted));\n border: var(--borderWidth-thin) solid var(--borderColor-accent-muted);\n border-radius: var(--borderRadius-medium);\n grid-auto-flow: column;\n grid-template-areas: 'visual message actions close';\n grid-template-columns: min-content 1fr minmax(0, auto) min-content;\n grid-template-rows: min-content;\n\n /* `sm` breakpoint variation */\n @container (max-width: 543.98px) {\n grid-template-areas:\n 'visual message close'\n '. actions actions';\n grid-template-columns: min-content 1fr min-content;\n grid-template-rows: min-content min-content;\n\n & .Banner-actions {\n margin: var(--base-size-8) 0 0 var(--base-size-8);\n }\n }\n\n /* Elements */\n\n & .Banner-visual {\n display: grid;\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: visual;\n align-self: start;\n\n & > .octicon {\n margin-block: calc(var(--base-size-4) / 2);\n }\n\n & > * {\n align-self: center;\n }\n }\n\n & .Banner-message {\n padding: var(--base-size-6) var(--base-size-8);\n grid-area: message;\n align-self: center;\n\n /* stylelint-disable-next-line selector-max-type */\n & p:last-child {\n margin-bottom: 0;\n }\n\n & .Banner-title:not(:only-child) {\n margin-bottom: 0;\n font-weight: var(--base-text-weight-semibold);\n }\n }\n\n & .Banner-actions {\n grid-area: actions;\n\n &:last-child {\n align-self: center;\n }\n }\n\n /* is this used anywhere? could not find any use, but unsure */\n & .Banner-close {\n grid-area: close;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: var(--controlStack-medium-gap-condensed);\n }\n\n & .Banner-visual .octicon {\n color: var(--fgColor-accent);\n }\n\n &.Banner--warning {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-attention-muted), var(--bgColor-attention-muted));\n border-color: var(--borderColor-attention-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-attention);\n }\n }\n\n &.Banner--error {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-danger-muted), var(--bgColor-danger-muted));\n border-color: var(--borderColor-danger-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-danger);\n }\n }\n\n &.Banner--success {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-success-muted), var(--bgColor-success-muted));\n border-color: var(--borderColor-success-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-success);\n }\n }\n\n &.Banner--upsell {\n color: var(--fgColor-default);\n background-image: linear-gradient(var(--bgColor-done-muted), var(--bgColor-done-muted));\n border-color: var(--borderColor-done-muted);\n\n & .Banner-visual .octicon {\n color: var(--fgColor-done);\n }\n }\n\n /* Full-width */\n\n &.Banner--full {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n\n @media (max-width: 767.98px) {\n &.Banner--full-whenNarrow {\n /* stylelint-disable-next-line primer/spacing */\n margin-top: calc(var(--borderWidth-thin) * -1);\n border-right: 0;\n border-left: 0;\n border-radius: 0;\n }\n }\n}\n"]}
|
|
@@ -1,4 +1,8 @@
|
|
|
1
1
|
/* Banner alert */
|
|
2
|
+
x-banner {
|
|
3
|
+
container-type: inline-size;
|
|
4
|
+
display: block;
|
|
5
|
+
}
|
|
2
6
|
|
|
3
7
|
.Banner {
|
|
4
8
|
position: relative;
|
|
@@ -14,7 +18,7 @@
|
|
|
14
18
|
grid-template-rows: min-content;
|
|
15
19
|
|
|
16
20
|
/* `sm` breakpoint variation */
|
|
17
|
-
@
|
|
21
|
+
@container (max-width: 543.98px) {
|
|
18
22
|
grid-template-areas:
|
|
19
23
|
'visual message close'
|
|
20
24
|
'. actions actions';
|
|
@@ -11,15 +11,29 @@ module Primer
|
|
|
11
11
|
DEFAULT_SIZE = Primer::Beta::Octicon::SIZE_DEFAULT
|
|
12
12
|
SIZE_OPTIONS = Primer::Beta::Octicon::SIZE_OPTIONS
|
|
13
13
|
|
|
14
|
+
# @param size [Symbol] <%= one_of(Primer::OpenProject::DragHandle::SIZE_OPTIONS) %>
|
|
15
|
+
# @param label [String] String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information.
|
|
14
16
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
15
|
-
def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, **system_arguments)
|
|
16
|
-
@system_arguments = system_arguments
|
|
17
|
+
def initialize(size: Primer::OpenProject::DragHandle::DEFAULT_SIZE, label: I18n.t("drag_handle.button_drag"), **system_arguments)
|
|
18
|
+
@system_arguments = deny_tag_argument(**system_arguments)
|
|
19
|
+
|
|
20
|
+
deny_aria_key(
|
|
21
|
+
:label,
|
|
22
|
+
"instead of `aria-label`, include `label` on the component initializer.",
|
|
23
|
+
**@system_arguments
|
|
24
|
+
)
|
|
17
25
|
@system_arguments[:tag] = "div"
|
|
18
|
-
@system_arguments[:
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
26
|
+
@system_arguments[:role] = "button"
|
|
27
|
+
@system_arguments[:tabindex] = 0
|
|
28
|
+
@system_arguments[:classes] = class_names(
|
|
29
|
+
@system_arguments[:classes],
|
|
30
|
+
"DragHandle"
|
|
31
|
+
)
|
|
32
|
+
|
|
33
|
+
@system_arguments[:aria] = merge_aria(
|
|
34
|
+
@system_arguments,
|
|
35
|
+
aria: { label: label }
|
|
36
|
+
)
|
|
23
37
|
|
|
24
38
|
@size = fetch_or_fallback(Primer::OpenProject::DragHandle::SIZE_OPTIONS, size, Primer::OpenProject::DragHandle::DEFAULT_SIZE)
|
|
25
39
|
end
|
data/config/locales/en.yml
CHANGED
data/static/arguments.json
CHANGED
|
@@ -6030,6 +6030,18 @@
|
|
|
6030
6030
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
|
|
6031
6031
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
|
|
6032
6032
|
"parameters": [
|
|
6033
|
+
{
|
|
6034
|
+
"name": "size",
|
|
6035
|
+
"type": "Symbol",
|
|
6036
|
+
"default": "`:small`",
|
|
6037
|
+
"description": "One of `:medium`, `:small`, or `:xsmall`."
|
|
6038
|
+
},
|
|
6039
|
+
{
|
|
6040
|
+
"name": "label",
|
|
6041
|
+
"type": "String",
|
|
6042
|
+
"default": "`I18n.t(\"drag_handle.button_drag\")`",
|
|
6043
|
+
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
|
|
6044
|
+
},
|
|
6033
6045
|
{
|
|
6034
6046
|
"name": "system_arguments",
|
|
6035
6047
|
"type": "Hash",
|
data/static/info_arch.json
CHANGED
|
@@ -19891,6 +19891,18 @@
|
|
|
19891
19891
|
"source": "https://github.com/primer/view_components/tree/main/app/components/primer/open_project/drag_handle.rb",
|
|
19892
19892
|
"lookbook": "https://primer.style/view-components/lookbook/inspect/primer/open_project/drag_handle/default/",
|
|
19893
19893
|
"parameters": [
|
|
19894
|
+
{
|
|
19895
|
+
"name": "size",
|
|
19896
|
+
"type": "Symbol",
|
|
19897
|
+
"default": "`:small`",
|
|
19898
|
+
"description": "One of `:medium`, `:small`, or `:xsmall`."
|
|
19899
|
+
},
|
|
19900
|
+
{
|
|
19901
|
+
"name": "label",
|
|
19902
|
+
"type": "String",
|
|
19903
|
+
"default": "`I18n.t(\"drag_handle.button_drag\")`",
|
|
19904
|
+
"description": "String that can be read by assistive technology. A label should be short and concise. See the accessibility section for more information."
|
|
19905
|
+
},
|
|
19894
19906
|
{
|
|
19895
19907
|
"name": "system_arguments",
|
|
19896
19908
|
"type": "Hash",
|
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.82.
|
|
4
|
+
version: 0.82.1
|
|
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: 2026-03-
|
|
12
|
+
date: 2026-03-11 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|