primer_view_components 0.0.116 → 0.0.117
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +34 -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 +2 -2
- data/app/assets/styles/primer_view_components.css.map +1 -1
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/auto_complete/item.rb +4 -4
- data/app/components/primer/alpha/auto_complete.rb +6 -6
- data/app/components/primer/alpha/dialog.rb +0 -2
- data/app/components/primer/alpha/dropdown.rb +53 -53
- data/app/components/primer/alpha/hellip_button.rb +41 -0
- data/app/components/primer/alpha/hidden_text_expander.rb +1 -1
- data/app/components/primer/alpha/layout.rb +48 -48
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.json +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.rb +5 -5
- data/app/components/primer/alpha/segmented_control.rb +20 -20
- data/app/components/primer/{tab_container_component.d.ts → alpha/tab_container.d.ts} +0 -0
- data/app/components/primer/{tab_container_component.js → alpha/tab_container.js} +0 -0
- data/app/components/primer/alpha/tab_container.rb +43 -0
- data/app/components/primer/{tab_container_component.ts → alpha/tab_container.ts} +0 -0
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.json +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.rb +32 -32
- data/app/components/primer/alpha/tool_tip.js +3 -7
- data/app/components/primer/alpha/tool_tip.ts +3 -7
- data/app/components/primer/alpha/tooltip.rb +18 -18
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.json +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.rb +18 -18
- data/app/components/primer/beta/auto_complete/item.rb +2 -3
- data/app/components/primer/beta/auto_complete.rb +14 -16
- data/app/components/primer/beta/avatar_stack.rb +12 -14
- data/app/components/primer/beta/blankslate.rb +0 -1
- data/app/components/primer/beta/border_box/header.rb +0 -2
- data/app/components/primer/beta/border_box.rb +0 -2
- data/app/components/primer/beta/breadcrumbs.css +1 -1
- data/app/components/primer/beta/breadcrumbs.css.json +1 -1
- data/app/components/primer/beta/breadcrumbs.css.map +1 -1
- data/app/components/primer/beta/breadcrumbs.rb +0 -1
- data/app/components/primer/beta/button.rb +9 -10
- data/app/components/primer/beta/button_group.rb +0 -1
- data/app/components/primer/beta/details.rb +0 -1
- data/app/components/primer/beta/flash.rb +0 -1
- data/app/components/primer/beta/link.rb +2 -3
- data/app/components/primer/beta/octicon.rb +0 -1
- data/app/components/primer/beta/popover.rb +0 -1
- data/app/components/primer/{state_component.css → beta/state.css} +0 -0
- data/app/components/primer/beta/state.css.json +1 -0
- data/app/components/primer/beta/state.css.map +1 -0
- data/app/components/primer/{state_component.pcss → beta/state.pcss} +0 -0
- data/app/components/primer/beta/state.rb +76 -0
- data/app/components/primer/{subhead_component.css → beta/subhead.css} +0 -0
- data/app/components/primer/beta/subhead.css.json +1 -0
- data/app/components/primer/beta/subhead.css.map +1 -0
- data/app/components/primer/{subhead_component.html.erb → beta/subhead.html.erb} +0 -0
- data/app/components/primer/{subhead_component.pcss → beta/subhead.pcss} +0 -0
- data/app/components/primer/beta/subhead.rb +135 -0
- data/app/components/primer/{timeline_item_component.css → beta/timeline_item.css} +0 -0
- data/app/components/primer/beta/timeline_item.css.json +1 -0
- data/app/components/primer/beta/timeline_item.css.map +1 -0
- data/app/components/primer/{timeline_item_component.html.erb → beta/timeline_item.html.erb} +0 -0
- data/app/components/primer/{timeline_item_component.pcss → beta/timeline_item.pcss} +0 -0
- data/app/components/primer/beta/timeline_item.rb +90 -0
- data/app/components/primer/beta/truncate.css +1 -1
- data/app/components/primer/beta/truncate.css.json +1 -1
- data/app/components/primer/beta/truncate.css.map +1 -1
- data/app/components/primer/beta/truncate.rb +0 -1
- data/app/components/primer/button_component.rb +9 -9
- data/app/components/primer/component.rb +0 -1
- data/app/components/primer/hellip_button.rb +2 -34
- data/app/components/primer/navigation/tab_component.rb +16 -16
- data/app/components/primer/primer.d.ts +1 -1
- data/app/components/primer/primer.js +1 -1
- data/app/components/primer/primer.pcss +3 -3
- data/app/components/primer/primer.ts +1 -1
- data/app/components/primer/state_component.rb +2 -69
- data/app/components/primer/subhead_component.rb +2 -128
- data/app/components/primer/tab_container_component.rb +2 -36
- data/app/components/primer/timeline_item_component.rb +5 -78
- data/app/forms/example_toggle_switch_form/example_field_caption.html.erb +1 -0
- data/app/forms/example_toggle_switch_form.rb +8 -0
- data/app/forms/submit_button_form.rb +4 -4
- data/app/lib/primer/tabbed_component_helper.rb +1 -1
- data/lib/primer/deprecations.rb +7 -13
- data/lib/primer/deprecations.yml +24 -0
- data/lib/primer/forms/button.html.erb +2 -2
- data/lib/primer/forms/dsl/toggle_switch_input.rb +35 -0
- data/lib/primer/forms/toggle_switch.html.erb +17 -0
- data/lib/primer/forms/toggle_switch.rb +19 -0
- data/lib/primer/forms/toggle_switch_form.rb +74 -0
- data/lib/primer/view_components/linters/subhead_component_migration_counter.rb +1 -1
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/rubocop/cop/primer/component_name_migration.rb +2 -1
- data/lib/tasks/docs.rake +6 -6
- data/previews/primer/alpha/action_list_preview.rb +44 -44
- data/previews/primer/alpha/dropdown_preview.rb +97 -97
- data/previews/primer/alpha/hellip_button_preview.rb +24 -0
- data/previews/primer/alpha/layout_preview.rb +63 -63
- data/previews/primer/alpha/menu_preview/default.html.erb +5 -5
- data/previews/primer/alpha/menu_preview/playground.html.erb +5 -5
- data/previews/primer/alpha/segmented_control_preview.rb +60 -60
- data/previews/primer/alpha/tab_nav_preview.rb +22 -22
- data/previews/primer/alpha/tab_panels_preview.rb +2 -2
- data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +6 -6
- data/previews/primer/alpha/tooltip_preview.rb +12 -12
- data/previews/primer/alpha/underline_nav_preview.rb +4 -4
- data/previews/primer/alpha/underline_panels_preview.rb +8 -8
- data/previews/primer/beta/auto_complete_item_preview/default.html.erb +2 -2
- data/previews/primer/beta/auto_complete_item_preview/playground.html.erb +2 -2
- data/previews/primer/beta/auto_complete_item_preview/with_description.html.erb +3 -3
- data/previews/primer/beta/auto_complete_preview/with_submit_button.html.erb +2 -2
- data/previews/primer/beta/auto_complete_preview.rb +18 -18
- data/previews/primer/beta/avatar_stack_preview.rb +32 -32
- data/previews/primer/beta/blankslate_preview.rb +40 -40
- data/previews/primer/beta/border_box_preview.rb +38 -38
- data/previews/primer/beta/breadcrumbs_preview.rb +2 -2
- data/previews/primer/beta/button_group_preview.rb +10 -10
- data/previews/primer/beta/button_preview/all_schemes.html.erb +4 -4
- data/previews/primer/beta/button_preview/invisible_all_visuals.html.erb +16 -16
- data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/trailing_action.html.erb +2 -2
- data/previews/primer/beta/button_preview/trailing_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/with_tooltip.html.erb +2 -2
- data/previews/primer/beta/details_preview.rb +6 -6
- data/previews/primer/beta/state_preview.rb +66 -0
- data/previews/primer/beta/subhead_preview/actions.html.erb +14 -0
- data/previews/primer/beta/subhead_preview.rb +99 -0
- data/previews/primer/beta/timeline_item_preview.rb +30 -0
- data/previews/primer/forms/forms_preview/example_toggle_switch_form.html.erb +1 -0
- data/previews/primer/forms/forms_preview.rb +2 -0
- data/static/arguments.json +118 -118
- data/static/audited_at.json +6 -0
- data/static/constants.json +67 -54
- data/static/statuses.json +12 -6
- metadata +36 -23
- data/app/components/primer/state_component.css.json +0 -1
- data/app/components/primer/state_component.css.map +0 -1
- data/app/components/primer/subhead_component.css.json +0 -1
- data/app/components/primer/subhead_component.css.map +0 -1
- data/app/components/primer/timeline_item_component.css.json +0 -1
- data/app/components/primer/timeline_item_component.css.map +0 -1
- data/previews/primer/hellip_button_preview.rb +0 -22
- data/previews/primer/state_component_preview.rb +0 -26
- data/previews/primer/subhead_component_preview.rb +0 -40
- data/previews/primer/timeline_item_component_preview.rb +0 -28
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"subhead_component","selectors":[".Subhead",".Subhead--spacious",".Subhead-heading",".Subhead-heading--danger",".Subhead-description",".Subhead-actions",".Subhead-actions+.Subhead-description"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["subhead_component.pcss"],"names":[],"mappings":"AAEA,SAIE,gFAAkF,CAHlF,YAAa,CAIb,kBAAmB,CACnB,wBAAyB,CAHzB,iDAAmD,CADnD,wDAKF,CAGA,mBACE,mCACF,CAGA,iBAGE,aAAc,CAFd,cAAe,CACf,8CAAgD,CAEhD,OACF,CAGA,yBAEE,4BAA6B,CAD7B,gDAEF,CAGA,qBAEE,2BAA4B,CAC5B,WAAY,CAFZ,kDAAoD,CAGpD,OACF,CAGA,iBAEE,iBAAkB,CAClB,wBAAyB,CAFzB,6EAAiF,CAGjF,OAKF,CAHE,sCACE,iCACF","file":"subhead_component.css","sourcesContent":["/* Subhead */\n\n.Subhead {\n display: flex;\n padding-bottom: var(--primer-stack-padding-condensed, 8px);\n margin-bottom: var(--primer-stack-gap-normal, 16px);\n border-bottom: var(--primer-borderWidth-thin, 1px) solid var(--color-border-muted);\n flex-flow: row wrap;\n justify-content: flex-end; /* Keep actions right aligned. */\n}\n\n/* Modifier class to give a lot of breathing room between sections of content. */\n.Subhead--spacious {\n margin-top: var(--base-size-40, 40px);\n}\n\n/* <h2> sized heading with normal font weight */\n.Subhead-heading {\n font-size: 24px;\n font-weight: var(--base-text-weight-normal, 400);\n flex: 1 1 auto;\n order: 0;\n}\n\n/* Make the text bold and red for dangerous content */\n.Subhead-heading--danger {\n font-weight: var(--base-text-weight-semibold, 600);\n color: var(--color-danger-fg);\n}\n\n/* One-liner of supporting text */\n.Subhead-description {\n font-size: var(--primer-text-body-size-medium, 14px);\n color: var(--color-fg-muted);\n flex: 1 100%;\n order: 2;\n}\n\n/* Add 1 or 2 buttons to the right of the heading */\n.Subhead-actions {\n margin: var(--base-size-4, 4px) 0 var(--base-size-4, 4px) var(--base-size-4, 4px);\n align-self: center;\n justify-content: flex-end;\n order: 1;\n\n & + .Subhead-description {\n margin-top: var(--base-size-4, 4px);\n }\n}\n"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"name":"timeline_item_component","selectors":[".TimelineItem",".TimelineItem:before",".TimelineItem:target .TimelineItem-badge",".TimelineItem-badge",".TimelineItem-badge--success",".TimelineItem-body",".TimelineItem-avatar",".TimelineItem-break",".TimelineItem--condensed",".TimelineItem--condensed:last-child",".TimelineItem--condensed .TimelineItem-badge"]}
|
@@ -1 +0,0 @@
|
|
1
|
-
{"version":3,"sources":["timeline_item_component.pcss"],"names":[],"mappings":"AAEA,cAEE,YAAa,CAEb,+CAAiD,CADjD,iDAAmD,CAFnD,iBAqBF,CAfE,qBAQE,0CAA2C,CAL3C,QAAS,CAIT,UAAW,CAFX,aAAc,CADd,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAIN,yCAGF,CAEA,yCACE,yCAA0C,CAC1C,6CACF,CAGF,oBASE,kBAAmB,CACnB,+CAAgD,CAChD,4EAA8E,CAC9E,iBAAkB,CAJlB,2BAA4B,CAL5B,YAAa,CAWb,aAAc,CATd,6CAA+C,CAQ/C,sBAAuB,CANvB,kEAAqE,CADrE,gEAAkE,CALlE,iBAAkB,CAGlB,4CAA8C,CAF9C,SAaF,CAEA,6BAEE,8CAA+C,CAC/C,qDAA6D,CAF7D,iCAGF,CAEA,mBAIE,2BAA4B,CAC5B,SAAU,CAFV,iCAAmC,CADnC,cAAe,CADf,WAKF,CAEA,qBAEE,UAAW,CADX,iBAAkB,CAElB,SACF,CAEA,oBAOE,4CAA6C,CAC7C,QAAS,CACT,kFAAoF,CANpF,4CAA8C,CAC9C,QAAS,CACT,2DAA8D,CAC9D,iBAAkB,CALlB,iBAAkB,CAClB,SAQF,CAEA,yBAEE,gBAAiB,CADjB,kCAgBF,CAZE,oCACE,kDACF,CAEA,6CAKE,4CAA6C,CAC7C,QAAS,CAFT,2BAA4B,CAH5B,+BAAiC,CAEjC,oCAAsC,CADtC,iCAKF","file":"timeline_item_component.css","sourcesContent":["/* TimelineItem */\n\n.TimelineItem {\n position: relative;\n display: flex;\n padding: var(--primer-stack-padding-normal, 16px) 0;\n margin-left: var(--primer-stack-gap-normal, 16px);\n\n /* The Timeline */\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n display: block;\n width: var(--primer-borderWidth-thick, 2px);\n content: '';\n background-color: var(--color-border-muted);\n }\n\n &:target .TimelineItem-badge {\n border-color: var(--color-accent-emphasis);\n box-shadow: 0 0 0.2em var(--color-accent-muted);\n }\n}\n\n.TimelineItem-badge {\n position: relative;\n z-index: 1;\n display: flex;\n width: var(--primer-control-medium-size, 32px);\n height: var(--primer-control-medium-size, 32px);\n margin-right: var(--primer-controlStack-medium-gap-condensed, 8px);\n margin-left: calc(var(--primer-control-medium-size, 32px) / -2 + 1px);\n color: var(--color-fg-muted);\n align-items: center;\n background-color: var(--color-timeline-badge-bg);\n border: var(--primer-borderWidth-thick, 2px) solid var(--color-canvas-default);\n border-radius: 50%;\n justify-content: center;\n flex-shrink: 0;\n}\n\n.TimelineItem-badge--success {\n color: var(--color-fg-on-emphasis);\n background-color: var(--color-success-emphasis);\n border: var(--primer-borderWidth-thin, 1px) solid transparent;\n}\n\n.TimelineItem-body {\n min-width: 0;\n max-width: 100%;\n margin-top: var(--base-size-4, 4px);\n color: var(--color-fg-muted);\n flex: auto;\n}\n\n.TimelineItem-avatar {\n position: absolute;\n left: -72px;\n z-index: 1;\n}\n\n.TimelineItem-break {\n position: relative;\n z-index: 1;\n height: var(--primer-stack-gap-spacious, 24px);\n margin: 0;\n margin-bottom: calc(var(--primer-stack-gap-normal, 16px) * -1);\n margin-left: -56px;\n background-color: var(--color-canvas-default);\n border: 0;\n border-top: var(--primer-borderWidth-thicker, 4px) solid var(--color-border-default);\n}\n\n.TimelineItem--condensed {\n padding-top: var(--base-size-4, 4px);\n padding-bottom: 0;\n\n /* TimelineItem--condensed is often grouped. (commits) */\n &:last-child {\n padding-bottom: var(--primer-stack-gap-normal, 16px);\n }\n\n & .TimelineItem-badge {\n height: var(--base-size-16, 16px);\n margin-top: var(--base-size-8, 8px);\n margin-bottom: var(--base-size-8, 8px);\n color: var(--color-fg-muted);\n background-color: var(--color-canvas-default);\n border: 0;\n }\n}\n"]}
|
@@ -1,22 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# @label HellipButton
|
5
|
-
class HellipButtonPreview < ViewComponent::Preview
|
6
|
-
# @label Default Options
|
7
|
-
#
|
8
|
-
# @param aria_label [String]
|
9
|
-
# @param inline [Boolean]
|
10
|
-
def default(inline: false, aria_label: "No effect")
|
11
|
-
render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
|
12
|
-
end
|
13
|
-
|
14
|
-
# @label Playground
|
15
|
-
#
|
16
|
-
# @param aria_label [String]
|
17
|
-
# @param inline [Boolean]
|
18
|
-
def playground(inline: false, aria_label: "No effect")
|
19
|
-
render(Primer::HellipButton.new(inline: inline, "aria-label": aria_label))
|
20
|
-
end
|
21
|
-
end
|
22
|
-
end
|
@@ -1,26 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# @label StateComponent
|
5
|
-
class StateComponentPreview < ViewComponent::Preview
|
6
|
-
# @label Playground
|
7
|
-
#
|
8
|
-
# @param title [String]
|
9
|
-
# @param tag [Symbol] select [span, div]
|
10
|
-
# @param size [Symbol] select [default, small]
|
11
|
-
# @param scheme [Symbol] select [default, open, closed, merged]
|
12
|
-
def playground(title: "State", scheme: :default, size: :default, tag: :span)
|
13
|
-
render(Primer::StateComponent.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
|
14
|
-
end
|
15
|
-
|
16
|
-
# @label Default
|
17
|
-
#
|
18
|
-
# @param title [String]
|
19
|
-
# @param tag [Symbol] select [span, div]
|
20
|
-
# @param size [Symbol] select [default, small]
|
21
|
-
# @param scheme [Symbol] select [default, open, closed, merged]
|
22
|
-
def default(title: "State", scheme: :default, size: :default, tag: :span)
|
23
|
-
render(Primer::StateComponent.new(title: title, scheme: scheme, size: size, tag: tag)) { "State" }
|
24
|
-
end
|
25
|
-
end
|
26
|
-
end
|
@@ -1,40 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# @label SubheadComponent
|
5
|
-
class SubheadComponentPreview < ViewComponent::Preview
|
6
|
-
# @label Playground
|
7
|
-
#
|
8
|
-
# @param spacious [Boolean]
|
9
|
-
# @param hide_border [Boolean]
|
10
|
-
# @param heading_danger [Boolean]
|
11
|
-
# @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
|
12
|
-
def playground(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
|
13
|
-
render(Primer::SubheadComponent.new(spacious: spacious, hide_border: hide_border)) do |component|
|
14
|
-
component.with_heading(tag: heading_tag, danger: heading_danger) do
|
15
|
-
"My Heading"
|
16
|
-
end
|
17
|
-
component.with_description do
|
18
|
-
"My Description"
|
19
|
-
end
|
20
|
-
end
|
21
|
-
end
|
22
|
-
|
23
|
-
# @label Default Options
|
24
|
-
#
|
25
|
-
# @param spacious [Boolean]
|
26
|
-
# @param hide_border [Boolean]
|
27
|
-
# @param heading_danger [Boolean]
|
28
|
-
# @param heading_tag [Symbol] select [div, h1, h2, h3, h4, h5, h6]
|
29
|
-
def default(spacious: false, hide_border: false, heading_tag: :div, heading_danger: false)
|
30
|
-
render(Primer::SubheadComponent.new(spacious: spacious, hide_border: hide_border)) do |component|
|
31
|
-
component.with_heading(tag: heading_tag, danger: heading_danger) do
|
32
|
-
"My Heading"
|
33
|
-
end
|
34
|
-
component.with_description do
|
35
|
-
"My Description"
|
36
|
-
end
|
37
|
-
end
|
38
|
-
end
|
39
|
-
end
|
40
|
-
end
|
@@ -1,28 +0,0 @@
|
|
1
|
-
# frozen_string_literal: true
|
2
|
-
|
3
|
-
module Primer
|
4
|
-
# @label TimelineItemComponent
|
5
|
-
class TimelineItemComponentPreview < ViewComponent::Preview
|
6
|
-
# @label Playground
|
7
|
-
#
|
8
|
-
# @param condensed [Boolean]
|
9
|
-
def playground(condensed: false)
|
10
|
-
render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component|
|
11
|
-
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
|
12
|
-
component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
|
13
|
-
component.with_body { "Success!" }
|
14
|
-
end
|
15
|
-
end
|
16
|
-
|
17
|
-
# @label Default
|
18
|
-
#
|
19
|
-
# @param condensed [Boolean]
|
20
|
-
def default(condensed: false)
|
21
|
-
render(Primer::TimelineItemComponent.new(condensed: condensed)) do |component|
|
22
|
-
component.with_avatar(src: Primer::ExampleImage::BASE64_SRC, alt: "octocat")
|
23
|
-
component.with_badge(bg: :success_emphasis, color: :on_emphasis, icon: :check)
|
24
|
-
component.with_body { "Success!" }
|
25
|
-
end
|
26
|
-
end
|
27
|
-
end
|
28
|
-
end
|