openproject-primer_view_components 0.74.1 → 0.75.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 +18 -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/alpha/select_panel_element.js +9 -0
- data/app/components/primer/alpha/select_panel_element.ts +12 -0
- data/app/components/primer/alpha/toggle_switch.html.erb +2 -2
- data/app/components/primer/alpha/toggle_switch.rb +16 -0
- data/app/components/primer/alpha/tooltip.rb +1 -2
- data/app/components/primer/beta/avatar_stack.css +1 -1
- data/app/components/primer/beta/avatar_stack.css.map +1 -1
- data/app/components/primer/beta/avatar_stack.html.erb +3 -0
- data/app/components/primer/beta/avatar_stack.pcss +0 -1
- data/app/components/primer/beta/avatar_stack.rb +19 -5
- data/app/components/primer/beta/progress_bar.css +1 -1
- data/app/components/primer/beta/progress_bar.css.json +2 -1
- data/app/components/primer/beta/progress_bar.css.map +1 -1
- data/app/components/primer/beta/progress_bar.pcss +11 -0
- data/app/components/primer/beta/state.css +1 -1
- data/app/components/primer/beta/state.css.map +1 -1
- data/app/components/primer/beta/state.pcss +3 -2
- data/lib/primer/view_components/linters/flash_migration_counter.rb +2 -2
- data/lib/primer/view_components/version.rb +2 -2
- data/previews/primer/alpha/toggle_switch_preview.rb +4 -0
- data/previews/primer/beta/avatar_stack_preview.rb +3 -3
- data/static/arguments.json +12 -0
- data/static/info_arch.json +13 -1
- metadata +2 -2
|
@@ -251,6 +251,15 @@ let SelectPanelElement = class SelectPanelElement extends HTMLElement {
|
|
|
251
251
|
// hide() will automatically be called by dialog event triggered from `data-close-dialog-id`
|
|
252
252
|
return;
|
|
253
253
|
}
|
|
254
|
+
if (event.type === 'keydown' &&
|
|
255
|
+
event instanceof KeyboardEvent &&
|
|
256
|
+
event.target.closest(visibleMenuItemSelectors)) {
|
|
257
|
+
const hasModifier = event.ctrlKey || event.altKey || event.metaKey;
|
|
258
|
+
const isAlphabetKey = event.key.length === 1 && /[a-z\d]/i.test(event.key);
|
|
259
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
260
|
+
if (!hasModifier && isAlphabetKey)
|
|
261
|
+
event.stopPropagation();
|
|
262
|
+
}
|
|
254
263
|
if (event.target === this.dialog && event.type === 'close') {
|
|
255
264
|
// Remove data-ready so it can be set the next time the panel is opened
|
|
256
265
|
this.dialog.removeAttribute('data-ready');
|
|
@@ -449,6 +449,18 @@ export class SelectPanelElement extends HTMLElement {
|
|
|
449
449
|
return
|
|
450
450
|
}
|
|
451
451
|
|
|
452
|
+
if (
|
|
453
|
+
event.type === 'keydown' &&
|
|
454
|
+
event instanceof KeyboardEvent &&
|
|
455
|
+
(event.target as Element).closest(visibleMenuItemSelectors)
|
|
456
|
+
) {
|
|
457
|
+
const hasModifier = event.ctrlKey || event.altKey || event.metaKey
|
|
458
|
+
const isAlphabetKey = event.key.length === 1 && /[a-z\d]/i.test(event.key)
|
|
459
|
+
|
|
460
|
+
// eslint-disable-next-line no-restricted-syntax
|
|
461
|
+
if (!hasModifier && isAlphabetKey) event.stopPropagation()
|
|
462
|
+
}
|
|
463
|
+
|
|
452
464
|
if (event.target === this.dialog && event.type === 'close') {
|
|
453
465
|
// Remove data-ready so it can be set the next time the panel is opened
|
|
454
466
|
this.dialog.removeAttribute('data-ready')
|
|
@@ -4,8 +4,8 @@
|
|
|
4
4
|
<%= render(Primer::Beta::Spinner.new(size: :small, hidden: "true", data: { target: "toggle-switch.loadingSpinner" })) %>
|
|
5
5
|
</span>
|
|
6
6
|
<%= render(Primer::Beta::Text.new(aria: { hidden: true }, classes: "ToggleSwitch-status")) do %>
|
|
7
|
-
<%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content(
|
|
8
|
-
<%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content(
|
|
7
|
+
<%= render(Primer::Box.new(classes: "ToggleSwitch-statusOn").with_content(@on_label)) %>
|
|
8
|
+
<%= render(Primer::Box.new(classes: "ToggleSwitch-statusOff").with_content(@off_label)) %>
|
|
9
9
|
<% end %>
|
|
10
10
|
|
|
11
11
|
<%= render(Primer::BaseComponent.new(tag: :button, classes: "ToggleSwitch-track", disabled: disabled?, data: { target: "toggle-switch.switch", action: "click:toggle-switch#toggle" }, **@button_arguments)) do %>
|
|
@@ -29,6 +29,17 @@ module Primer
|
|
|
29
29
|
# @param turbo [Boolean] Whether or not to request a turbo stream and render the response as such.
|
|
30
30
|
# @param autofocus [Boolean] Whether switch should be autofocused when rendered.
|
|
31
31
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
32
|
+
# @param on_label [String] Custom label to show when the switch is ON.
|
|
33
|
+
# Defaults to On.
|
|
34
|
+
# Only customize this label if it makes the toggle’s state more meaningful
|
|
35
|
+
# in its specific context. For example, for a "Show images" setting,
|
|
36
|
+
# you might use "Hide" when the switch is ON.
|
|
37
|
+
# @param off_label [String] Custom label to show when the switch is OFF.
|
|
38
|
+
# Defaults to ("Off").
|
|
39
|
+
# Only customize this label if it makes the toggle’s state more meaningful
|
|
40
|
+
# in its specific context. For example, for a "Show images" setting,
|
|
41
|
+
# you might use "Show" when the switch is OFF.
|
|
42
|
+
|
|
32
43
|
def initialize(
|
|
33
44
|
src: nil,
|
|
34
45
|
csrf_token: nil,
|
|
@@ -38,6 +49,8 @@ module Primer
|
|
|
38
49
|
status_label_position: STATUS_LABEL_POSITION_DEFAULT,
|
|
39
50
|
turbo: false,
|
|
40
51
|
autofocus: nil,
|
|
52
|
+
on_label: nil,
|
|
53
|
+
off_label: nil,
|
|
41
54
|
**system_arguments
|
|
42
55
|
)
|
|
43
56
|
@src = src
|
|
@@ -70,6 +83,9 @@ module Primer
|
|
|
70
83
|
@button_arguments[:autofocus] = true if autofocus
|
|
71
84
|
|
|
72
85
|
@system_arguments[:src] = @src if @src
|
|
86
|
+
|
|
87
|
+
@on_label = on_label || "On"
|
|
88
|
+
@off_label = off_label || "Off"
|
|
73
89
|
end
|
|
74
90
|
|
|
75
91
|
def on?
|
|
@@ -14,9 +14,8 @@ module Primer
|
|
|
14
14
|
# - **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only
|
|
15
15
|
# and screen reader users. Use of tooltips through <%= link_to_component(Primer::Beta::Button) %>, <%= link_to_component(Primer::Beta::Link) %>, or <%= link_to_component(Primer::Beta::IconButton) %> will guarantee this.
|
|
16
16
|
# - If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.
|
|
17
|
-
# content.
|
|
18
17
|
#
|
|
19
|
-
# Semantically, a tooltip will either act an accessible name or an accessible description for the element that it is associated with resulting in either
|
|
18
|
+
# Semantically, a tooltip will either act as an accessible name or an accessible description for the element that it is associated with resulting in either an
|
|
20
19
|
# `aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:
|
|
21
20
|
# - When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.
|
|
22
21
|
# The majority of tooltips will fall under this category.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-
|
|
1
|
+
.AvatarStack{height:20px;min-width:26px;position:relative}.AvatarStack .AvatarStack-body{position:absolute}.AvatarStack.AvatarStack--two{min-width:36px}.AvatarStack.AvatarStack--three-plus{min-width:46px}.AvatarStack-body{background:var(--bgColor-default);border-radius:100px;display:flex}.AvatarStack-body .avatar{background-color:var(--bgColor-default);border-radius:var(--borderRadius-small);border-right:var(--borderWidth-thin) solid var(--bgColor-default);box-sizing:initial;display:flex;height:20px;margin-right:-11px;position:relative;transition:margin .1s ease-in-out;width:20px;z-index:2}:is(.AvatarStack-body .avatar):first-child{z-index:3}:is(.AvatarStack-body .avatar):last-child{border-right:0;z-index:1}:is(.AvatarStack-body .avatar) img{border-radius:var(--borderRadius-small)}:is(.AvatarStack-body .avatar):nth-child(n+4){display:none;opacity:0}.AvatarStack-body:hover .avatar{margin-right:var(--base-size-4)}.AvatarStack-body:hover .avatar:nth-child(n+4){display:flex;opacity:1}.AvatarStack-body:hover .avatar-more{display:none!important}.avatar.avatar-more{background:var(--bgColor-muted);margin-right:0;z-index:1}.avatar.avatar-more:after,.avatar.avatar-more:before{border-radius:2px;content:"";display:block;height:20px;outline:var(--borderWidth-thin) solid var(--bgColor-default);position:absolute}.avatar.avatar-more:before{background:var(--avatarStack-fade-bgColor-muted);width:17px}.avatar.avatar-more:after{background:var(--avatarStack-fade-bgColor-default);width:14px}.AvatarStack--right .AvatarStack-body{flex-direction:row-reverse;right:0}:is(.AvatarStack--right .AvatarStack-body):hover .avatar{margin-left:var(--base-size-4);margin-right:0}:is(.AvatarStack--right .AvatarStack-body) .avatar:not(:last-child){border-left:0}.AvatarStack--right .avatar.avatar-more{background:var(--avatarStack-fade-bgColor-default)}:is(.AvatarStack--right .avatar.avatar-more):before{width:5px}:is(.AvatarStack--right .avatar.avatar-more):after{background:var(--bgColor-muted);width:2px}.AvatarStack--right .avatar{border-left:var(--borderWidth-thin) solid var(--bgColor-default);border-right:0;margin-left:-11px;margin-right:0}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,
|
|
1
|
+
{"version":3,"sources":["avatar_stack.pcss"],"names":[],"mappings":"AAKA,aAGE,WAAY,CADZ,cAAe,CADf,iBAeF,CAXE,+BACE,iBACF,CAEA,8BACE,cACF,CAEA,qCACE,cACF,CAGF,kBAEE,iCAAkC,CAElC,mBAAoB,CAHpB,YAuDF,CAlDE,0BASE,uCAAwC,CAGxC,uCAAwC,CADxC,iEAAkE,CALlE,kBAAuB,CAHvB,YAAa,CAEb,WAAY,CAGZ,kBAAmB,CAPnB,iBAAkB,CAYlB,iCAAmC,CATnC,UAAW,CAFX,SAgCF,CAnBE,2CACE,SACF,CAEA,0CAEE,cAAe,CADf,SAEF,CAGA,mCACE,uCACF,CAGA,8CACE,YAAa,CACb,SACF,CAIA,gCACE,+BACF,CAEA,+CACE,YAAa,CACb,SACF,CAEA,qCACE,sBACF,CAIJ,oBAGE,+BAAgC,CADhC,cAAe,CADf,SAwBF,CApBE,qDAOE,iBAAkB,CAFlB,UAAW,CAFX,aAAc,CACd,WAAY,CAIZ,4DAA6D,CAN7D,iBAOF,CAEA,2BAEE,gDAAiD,CADjD,UAEF,CAEA,0BAEE,kDAAmD,CADnD,UAEF,CAMA,sCAEE,0BAA2B,CAD3B,OAWF,CARE,yDAEE,8BAA+B,CAD/B,cAEF,CAEA,oEACE,aACF,CAGF,wCACE,kDAUF,CARE,oDACE,SACF,CAEA,mDAEE,+BAAgC,CADhC,SAEF,CAGF,4BAME,gEAAiE,CAFjE,cAAe,CADf,iBAAkB,CAFlB,cAMF","file":"avatar_stack.css","sourcesContent":["/* AvatarStack */\n\n/* Stacked avatars can be used to show who is participating in thread when\n** there is limited space available. */\n\n.AvatarStack {\n position: relative;\n min-width: 26px;\n height: 20px;\n\n & .AvatarStack-body {\n position: absolute;\n }\n\n &.AvatarStack--two {\n min-width: 36px;\n }\n\n &.AvatarStack--three-plus {\n min-width: 46px;\n }\n}\n\n.AvatarStack-body {\n display: flex;\n background: var(--bgColor-default);\n /* stylelint-disable-next-line primer/borders */\n border-radius: 100px;\n\n & .avatar {\n position: relative;\n z-index: 2;\n display: flex;\n width: 20px;\n height: 20px;\n box-sizing: content-box;\n /* stylelint-disable-next-line primer/spacing */\n margin-right: -11px;\n background-color: var(--bgColor-default);\n /* stylelint-disable-next-line primer/colors */\n border-right: var(--borderWidth-thin) solid var(--bgColor-default);\n border-radius: var(--borderRadius-small);\n transition: margin 0.1s ease-in-out;\n\n &:first-child {\n z-index: 3;\n }\n\n &:last-child {\n z-index: 1;\n border-right: 0;\n }\n\n /* stylelint-disable-next-line selector-max-type */\n & img {\n border-radius: var(--borderRadius-small);\n }\n\n /* Account for 4+ avatars */\n &:nth-child(n + 4) {\n display: none;\n opacity: 0;\n }\n }\n\n &:hover {\n & .avatar {\n margin-right: var(--base-size-4);\n }\n\n & .avatar:nth-child(n + 4) {\n display: flex;\n opacity: 1;\n }\n\n & .avatar-more {\n display: none !important;\n }\n }\n}\n\n.avatar.avatar-more {\n z-index: 1;\n margin-right: 0;\n background: var(--bgColor-muted);\n\n &::before,\n &::after {\n position: absolute;\n display: block;\n height: 20px;\n content: '';\n /* stylelint-disable-next-line primer/borders */\n border-radius: 2px;\n outline: var(--borderWidth-thin) solid var(--bgColor-default);\n }\n\n &::before {\n width: 17px;\n background: var(--avatarStack-fade-bgColor-muted);\n }\n\n &::after {\n width: 14px;\n background: var(--avatarStack-fade-bgColor-default);\n }\n}\n\n/* Right aligned variation */\n\n.AvatarStack--right {\n & .AvatarStack-body {\n right: 0;\n flex-direction: row-reverse;\n\n &:hover .avatar {\n margin-right: 0;\n margin-left: var(--base-size-4);\n }\n\n & .avatar:not(:last-child) {\n border-left: 0;\n }\n }\n\n & .avatar.avatar-more {\n background: var(--avatarStack-fade-bgColor-default);\n\n &::before {\n width: 5px;\n }\n\n &::after {\n width: 2px;\n background: var(--bgColor-muted);\n }\n }\n\n & .avatar {\n margin-right: 0;\n /* stylelint-disable-next-line primer/spacing */\n margin-left: -11px;\n border-right: 0;\n /* stylelint-disable-next-line primer/colors */\n border-left: var(--borderWidth-thin) solid var(--bgColor-default);\n }\n}\n"]}
|
|
@@ -31,6 +31,7 @@ module Primer
|
|
|
31
31
|
@system_arguments = system_arguments
|
|
32
32
|
@tooltipped = tooltipped
|
|
33
33
|
@body_arguments = body_arguments
|
|
34
|
+
@direction = @body_arguments[:direction]
|
|
34
35
|
|
|
35
36
|
body_tag = @body_arguments[:tag] || DEFAULT_BODY_TAG
|
|
36
37
|
@body_arguments[:tag] = fetch_or_fallback(BODY_TAG_OPTIONS, body_tag, DEFAULT_BODY_TAG)
|
|
@@ -45,14 +46,27 @@ module Primer
|
|
|
45
46
|
system_arguments[:classes],
|
|
46
47
|
"AvatarStack--right" => @align == :right
|
|
47
48
|
)
|
|
49
|
+
|
|
50
|
+
@body_arguments[:tabindex] = tooltipped ? 0 : nil
|
|
51
|
+
@body_arguments[:id] = tooltipped ? @body_arguments[:id] ||= self.class.generate_id : @body_arguments[:id]
|
|
52
|
+
|
|
53
|
+
@tooltip_arguments = {
|
|
54
|
+
for_id: @body_arguments[:id],
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
@tooltip_arguments[:direction] = @direction || Primer::Alpha::Tooltip::DIRECTION_DEFAULT
|
|
58
|
+
@tooltip_arguments[:text] = @body_arguments[:label]
|
|
59
|
+
@tooltip_arguments[:type] = :description
|
|
60
|
+
|
|
61
|
+
@body_arguments[:aria] ||= {}
|
|
62
|
+
if tooltipped && @body_arguments[:label].present?
|
|
63
|
+
@body_arguments[:aria][:label] = @body_arguments[:label]
|
|
64
|
+
@body_arguments[:label] = nil
|
|
65
|
+
end
|
|
48
66
|
end
|
|
49
67
|
|
|
50
68
|
def body_component
|
|
51
|
-
|
|
52
|
-
Primer::Tooltip.new(**@body_arguments) # rubocop:disable Primer/ComponentNameMigration
|
|
53
|
-
else
|
|
54
|
-
Primer::BaseComponent.new(**@body_arguments)
|
|
55
|
-
end
|
|
69
|
+
Primer::BaseComponent.new(**@body_arguments)
|
|
56
70
|
end
|
|
57
71
|
|
|
58
72
|
def before_render
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}
|
|
1
|
+
.Progress{background-color:var(--progressBar-track-bgColor);border-radius:var(--borderRadius-medium);display:flex;height:8px;outline:solid 1px var(--progressBar-track-borderColor);outline-offset:-1px;overflow:hidden}.Progress--large{height:10px}.Progress--small{height:5px}.Progress-item{background:LinkText;outline:2px solid #0000}.Progress-item+.Progress-item{margin-left:var(--base-size-2)}@media (forced-colors:active){:root{--progressBar-track-bgColor:CanvasText}.Progress,.Progress-item{forced-color-adjust:none}}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,iDAAkD,CAClD,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,sDAAuD,CACvD,mBAAoB,CAJpB,eAKF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,
|
|
1
|
+
{"version":3,"sources":["progress_bar.pcss"],"names":[],"mappings":"AAEA,UAIE,iDAAkD,CAClD,wCAAyC,CAJzC,YAAa,CACb,UAAW,CAIX,sDAAuD,CACvD,mBAAoB,CAJpB,eAKF,CAEA,iBACE,WACF,CAEA,iBACE,UACF,CAEA,eAEE,mBAAoB,CADpB,uBAEF,CAEA,8BACE,8BACF,CAEA,8BACE,MACE,sCACF,CAEA,yBACE,wBACF,CACF","file":"progress_bar.css","sourcesContent":["/* Progress */\n\n.Progress {\n display: flex;\n height: 8px;\n overflow: hidden;\n background-color: var(--progressBar-track-bgColor);\n border-radius: var(--borderRadius-medium);\n outline: solid 1px var(--progressBar-track-borderColor);\n outline-offset: -1px;\n}\n\n.Progress--large {\n height: 10px;\n}\n\n.Progress--small {\n height: 5px;\n}\n\n.Progress-item {\n outline: 2px solid transparent; /* Support Firefox custom colors */\n background: LinkText;\n}\n\n.Progress-item + .Progress-item {\n margin-left: var(--base-size-2);\n}\n\n@media (forced-colors: active) {\n :root {\n --progressBar-track-bgColor: CanvasText;\n }\n\n .Progress, .Progress-item {\n forced-color-adjust: none;\n }\n}\n"]}
|
|
@@ -20,8 +20,19 @@
|
|
|
20
20
|
|
|
21
21
|
.Progress-item {
|
|
22
22
|
outline: 2px solid transparent; /* Support Firefox custom colors */
|
|
23
|
+
background: LinkText;
|
|
23
24
|
}
|
|
24
25
|
|
|
25
26
|
.Progress-item + .Progress-item {
|
|
26
27
|
margin-left: var(--base-size-2);
|
|
27
28
|
}
|
|
29
|
+
|
|
30
|
+
@media (forced-colors: active) {
|
|
31
|
+
:root {
|
|
32
|
+
--progressBar-track-bgColor: CanvasText;
|
|
33
|
+
}
|
|
34
|
+
|
|
35
|
+
.Progress, .Progress-item {
|
|
36
|
+
forced-color-adjust: none;
|
|
37
|
+
}
|
|
38
|
+
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-neutral-emphasis);border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-neutral-emphasis);color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
|
|
1
|
+
.State,.state{border-radius:2em;display:inline-block;font-size:var(--text-body-size-medium);font-weight:var(--base-text-weight-medium);line-height:var(--control-medium-lineBoxHeight);padding:var(--base-size-4) var(--control-medium-paddingInline-normal);text-align:center;white-space:nowrap}.State,.State--draft,.state{background-color:var(--bgColor-draft-emphasis,var(--bgColor-neutral-emphasis));border:var(--borderWidth-thin) solid #0000;box-shadow:var(--boxShadow-thin) var(--borderColor-draft-emphasis,var(--borderColor-neutral-emphasis));color:var(--fgColor-onEmphasis)}.State--open{background-color:var(--bgColor-open-emphasis,var(--color-open-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-open-emphasis)}.State--merged,.State--open{color:var(--fgColor-onEmphasis)}.State--merged{background-color:var(--bgColor-done-emphasis,var(--color-done-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-done-emphasis)}.State--closed{background-color:var(--bgColor-closed-emphasis,var(--color-closed-emphasis));box-shadow:var(--boxShadow-thin) var(--borderColor-closed-emphasis);color:var(--fgColor-onEmphasis)}.State--small{font-size:var(--text-body-size-small);line-height:var(--base-size-24);padding:0 10px}.State--small .octicon{width:1em}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cAYE,iBAAkB,CAVlB,oBAAqB,CAGrB,sCAAuC,CACvC,0CAA2C,CAE3C,+CAAgD,CAJhD,qEAAsE,CAKtE,iBAAkB,CAClB,kBAGF,CAEA,
|
|
1
|
+
{"version":3,"sources":["state.pcss"],"names":[],"mappings":"AAIA,cAYE,iBAAkB,CAVlB,oBAAqB,CAGrB,sCAAuC,CACvC,0CAA2C,CAE3C,+CAAgD,CAJhD,qEAAsE,CAKtE,iBAAkB,CAClB,kBAGF,CAEA,4BAKE,8EAAgF,CAChF,0CAAiD,CACjD,sGAAwG,CAJxG,+BAKF,CAEA,aAEE,wEAA0E,CAC1E,iEACF,CAEA,4BALE,+BASF,CAJA,eAEE,wEAA0E,CAC1E,iEACF,CAEA,eAEE,4EAA8E,CAC9E,mEAAoE,CAFpE,+BAGF,CAIA,cAGE,qCAAsC,CAEtC,+BAAgC,CAHhC,cAQF,CAHE,uBACE,SACF","file":"state.css","sourcesContent":["/* State */\n\n/* Default 32px */\n\n.state, /* TODO: Deprecate */\n.State {\n display: inline-block;\n /* stylelint-disable-next-line primer/spacing */\n padding: var(--base-size-4) var(--control-medium-paddingInline-normal);\n font-size: var(--text-body-size-medium);\n font-weight: var(--base-text-weight-medium);\n /* stylelint-disable-next-line primer/typography */\n line-height: var(--control-medium-lineBoxHeight);\n text-align: center;\n white-space: nowrap;\n /* stylelint-disable-next-line primer/borders */\n border-radius: 2em;\n}\n\n.state, /* TODO: Deprecate */\n.State,\n.State--draft {\n color: var(--fgColor-onEmphasis);\n /* stylelint-disable-next-line primer/colors */\n background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));\n border: var(--borderWidth-thin) solid transparent;\n box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));\n}\n\n.State--open {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-open-emphasis, var(--color-open-emphasis));\n box-shadow: var(--boxShadow-thin) var(--borderColor-open-emphasis);\n}\n\n.State--merged {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-done-emphasis, var(--color-done-emphasis));\n box-shadow: var(--boxShadow-thin) var(--borderColor-done-emphasis);\n}\n\n.State--closed {\n color: var(--fgColor-onEmphasis);\n background-color: var(--bgColor-closed-emphasis, var(--color-closed-emphasis));\n box-shadow: var(--boxShadow-thin) var(--borderColor-closed-emphasis);\n}\n\n/* Small 24px */\n\n.State--small {\n /* stylelint-disable-next-line primer/spacing */\n padding: 0 10px;\n font-size: var(--text-body-size-small);\n /* stylelint-disable-next-line primer/typography */\n line-height: var(--base-size-24);\n\n & .octicon {\n width: 1em; /* Ensures different icons don't change State indicator width */\n }\n}\n"]}
|
|
@@ -21,9 +21,10 @@
|
|
|
21
21
|
.State,
|
|
22
22
|
.State--draft {
|
|
23
23
|
color: var(--fgColor-onEmphasis);
|
|
24
|
-
|
|
24
|
+
/* stylelint-disable-next-line primer/colors */
|
|
25
|
+
background-color: var(--bgColor-draft-emphasis, var(--bgColor-neutral-emphasis));
|
|
25
26
|
border: var(--borderWidth-thin) solid transparent;
|
|
26
|
-
box-shadow: var(--boxShadow-thin) var(--borderColor-neutral-emphasis);
|
|
27
|
+
box-shadow: var(--boxShadow-thin) var(--borderColor-draft-emphasis, var(--borderColor-neutral-emphasis));
|
|
27
28
|
}
|
|
28
29
|
|
|
29
30
|
.State--open {
|
|
@@ -12,9 +12,9 @@ module ERBLint
|
|
|
12
12
|
|
|
13
13
|
TAGS = %w[div].freeze
|
|
14
14
|
CLASSES = %w[flash].freeze
|
|
15
|
-
MESSAGE = "We are migrating flashes to use [Primer::
|
|
15
|
+
MESSAGE = "We are migrating flashes to use [Primer::Alpha::Banner](https://primer.style/view-components/components/alpha/banner), please try to use that instead of raw HTML."
|
|
16
16
|
ARGUMENT_MAPPER = ArgumentMappers::Flash
|
|
17
|
-
COMPONENT = "Primer::
|
|
17
|
+
COMPONENT = "Primer::Alpha::Banner"
|
|
18
18
|
|
|
19
19
|
def map_arguments(tag, tag_tree)
|
|
20
20
|
# We can only autocorrect elements with simple text as content.
|
|
@@ -67,5 +67,9 @@ module Primer
|
|
|
67
67
|
render(Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, autofocus: true))
|
|
68
68
|
end
|
|
69
69
|
end
|
|
70
|
+
|
|
71
|
+
def with_custom_status_label
|
|
72
|
+
render Primer::Alpha::ToggleSwitch.new(src: UrlHelpers.primer_view_components.toggle_switch_index_path, on_label: "Enabled", off_label: "Disabled")
|
|
73
|
+
end
|
|
70
74
|
end
|
|
71
75
|
end
|
|
@@ -92,9 +92,9 @@ module Primer
|
|
|
92
92
|
# @label With tooltip
|
|
93
93
|
def with_tooltip
|
|
94
94
|
render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: "This is a tooltip!" })) do |component|
|
|
95
|
-
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
96
|
-
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
97
|
-
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser")
|
|
95
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
|
|
96
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
|
|
97
|
+
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "@kittenuser", href: "primer.style")
|
|
98
98
|
end
|
|
99
99
|
end
|
|
100
100
|
#
|
data/static/arguments.json
CHANGED
|
@@ -3318,6 +3318,18 @@
|
|
|
3318
3318
|
"type": "Hash",
|
|
3319
3319
|
"default": "N/A",
|
|
3320
3320
|
"description": "[System arguments](/system-arguments)"
|
|
3321
|
+
},
|
|
3322
|
+
{
|
|
3323
|
+
"name": "on_label",
|
|
3324
|
+
"type": "String",
|
|
3325
|
+
"default": "`nil`",
|
|
3326
|
+
"description": "Custom label to show when the switch is ON. Defaults to On. Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Hide\" when the switch is ON."
|
|
3327
|
+
},
|
|
3328
|
+
{
|
|
3329
|
+
"name": "off_label",
|
|
3330
|
+
"type": "String",
|
|
3331
|
+
"default": "`nil`",
|
|
3332
|
+
"description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
|
|
3321
3333
|
}
|
|
3322
3334
|
]
|
|
3323
3335
|
},
|
data/static/info_arch.json
CHANGED
|
@@ -9944,6 +9944,18 @@
|
|
|
9944
9944
|
"type": "Hash",
|
|
9945
9945
|
"default": "N/A",
|
|
9946
9946
|
"description": "{{link_to_system_arguments_docs}}"
|
|
9947
|
+
},
|
|
9948
|
+
{
|
|
9949
|
+
"name": "on_label",
|
|
9950
|
+
"type": "String",
|
|
9951
|
+
"default": "`nil`",
|
|
9952
|
+
"description": "Custom label to show when the switch is ON. Defaults to On. Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Hide\" when the switch is ON."
|
|
9953
|
+
},
|
|
9954
|
+
{
|
|
9955
|
+
"name": "off_label",
|
|
9956
|
+
"type": "String",
|
|
9957
|
+
"default": "`nil`",
|
|
9958
|
+
"description": "Custom label to show when the switch is OFF. Defaults to (\"Off\"). Only customize this label if it makes the toggle’s state more meaningful in its specific context. For example, for a \"Show images\" setting, you might use \"Show\" when the switch is OFF."
|
|
9947
9959
|
}
|
|
9948
9960
|
],
|
|
9949
9961
|
"slots": [],
|
|
@@ -10136,7 +10148,7 @@
|
|
|
10136
10148
|
},
|
|
10137
10149
|
{
|
|
10138
10150
|
"fully_qualified_name": "Primer::Alpha::Tooltip",
|
|
10139
|
-
"description": "`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n
|
|
10151
|
+
"description": "`Tooltip` only appears on mouse hover or keyboard focus and contain a label or description text. Use tooltips sparingly and as a last resort.\nUse tooltips as a last resort. Please consider [Tooltips alternatives](https://primer.style/design/accessibility/tooltip-alternatives).\n\nWhen using a tooltip, follow the provided guidelines to avoid accessibility issues:\n- Tooltips should contain only **non-essential text**. Tooltips can easily be missed and are not accessible on touch devices so never use tooltips to convey critical information.\n- `Tooltip` should be rendered through the API of {{#link_to_component}}Primer::ButtonComponent{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::IconButton{{/link_to_component}}. Avoid using `Tooltip` a standalone component unless absolutely necessary (and **only** on interactive elements).\n- Tooltip text must be brief and concise even when used to display a description.\n- Tooltips can only hold string content.\n- Tooltips are not allowed on `disabled` elements because such elements are not keyboard-accessible. If you must set a tooltip on a disabled element, use `aria-disabled=\"true\"` instead and programmatically disable the element.\n- **Never set tooltips on static, non-interactive elements** like `span` or `div`. Tooltips should only be used on interactive elements like buttons or links to avoid excluding keyboard-only\nand screen reader users. Use of tooltips through {{#link_to_component}}Primer::Beta::Button{{/link_to_component}}, {{#link_to_component}}Primer::Beta::Link{{/link_to_component}}, or {{#link_to_component}}Primer::Beta::IconButton{{/link_to_component}} will guarantee this.\n- If you must use `Tooltip` as a standalone component, place it immediately after the trigger element in the DOM. This allows screen reader users to navigate to the tooltip and copy its contents if desired.\n\nSemantically, a tooltip will either act as an accessible name or an accessible description for the element that it is associated with resulting in either an\n`aria-labelledby` or an `aria-describedby` association. The `type` drastically changes semantics and screen reader behavior so follow these guidelines carefully:\n- When there is already a visible label text on the trigger element, the tooltip is likely intended be supplementary, so set `type: :description`.\nThe majority of tooltips will fall under this category.\n- When there is no visible text on the trigger element and the tooltip content is appropriate as a label for the element, set `type: :label`.\n`label` type is usually only appropriate for an icon-only control.",
|
|
10140
10152
|
"accessibility_docs": null,
|
|
10141
10153
|
"is_form_component": false,
|
|
10142
10154
|
"is_published": true,
|
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.75.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-10-
|
|
12
|
+
date: 2025-10-09 00:00:00.000000000 Z
|
|
13
13
|
dependencies:
|
|
14
14
|
- !ruby/object:Gem::Dependency
|
|
15
15
|
name: actionview
|