primer_view_components 0.6.0 → 0.8.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +62 -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/action_bar.rb +0 -8
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.json +1 -0
- data/app/components/primer/alpha/action_list.css.map +1 -1
- data/app/components/primer/alpha/action_list.pcss +6 -0
- data/app/components/primer/alpha/action_menu/action_menu_element.js +45 -7
- data/app/components/primer/alpha/action_menu/action_menu_element.ts +49 -6
- data/app/components/primer/alpha/action_menu.rb +0 -269
- data/app/components/primer/alpha/auto_complete/item.rb +0 -12
- data/app/components/primer/alpha/auto_complete.css +1 -1
- data/app/components/primer/alpha/auto_complete.css.map +1 -1
- data/app/components/primer/alpha/auto_complete.rb +0 -47
- data/app/components/primer/alpha/banner.css +1 -1
- data/app/components/primer/alpha/banner.css.map +1 -1
- data/app/components/primer/alpha/banner.rb +0 -31
- data/app/components/primer/alpha/button_marketing.rb +0 -12
- data/app/components/primer/alpha/dialog.css +1 -1
- data/app/components/primer/alpha/dialog.css.map +1 -1
- data/app/components/primer/alpha/dialog.rb +2 -18
- data/app/components/primer/alpha/dropdown.css +1 -1
- data/app/components/primer/alpha/dropdown.css.map +1 -1
- data/app/components/primer/alpha/dropdown.rb +0 -105
- data/app/components/primer/alpha/form_control.rb +0 -11
- data/app/components/primer/alpha/hellip_button.rb +0 -9
- data/app/components/primer/alpha/hidden_text_expander.rb +0 -9
- data/app/components/primer/alpha/image.rb +0 -16
- data/app/components/primer/alpha/image_crop.rb +0 -11
- data/app/components/primer/alpha/layout.css +1 -1
- data/app/components/primer/alpha/layout.css.map +1 -1
- data/app/components/primer/alpha/layout.pcss +1 -1
- data/app/components/primer/alpha/layout.rb +0 -118
- data/app/components/primer/alpha/menu.css +1 -1
- data/app/components/primer/alpha/menu.css.map +1 -1
- data/app/components/primer/alpha/menu.rb +0 -19
- data/app/components/primer/alpha/multi_input.rb +0 -33
- data/app/components/primer/alpha/nav_list.rb +0 -69
- data/app/components/primer/alpha/navigation/tab.rb +0 -35
- data/app/components/primer/alpha/octicon_symbols.rb +0 -6
- data/app/components/primer/alpha/overlay.rb +0 -14
- data/app/components/primer/alpha/segmented_control.css +1 -1
- data/app/components/primer/alpha/segmented_control.css.map +1 -1
- data/app/components/primer/alpha/segmented_control.rb +0 -61
- data/app/components/primer/alpha/tab_container.rb +0 -18
- data/app/components/primer/alpha/tab_nav.css +1 -1
- data/app/components/primer/alpha/tab_nav.css.map +1 -1
- data/app/components/primer/alpha/tab_nav.rb +0 -63
- data/app/components/primer/alpha/tab_panels.rb +0 -16
- data/app/components/primer/alpha/text_field.css +1 -1
- data/app/components/primer/alpha/text_field.css.map +1 -1
- data/app/components/primer/alpha/text_field.rb +0 -68
- data/app/components/primer/alpha/toggle_switch.css +1 -1
- data/app/components/primer/alpha/toggle_switch.css.map +1 -1
- data/app/components/primer/alpha/toggle_switch.rb +0 -18
- data/app/components/primer/alpha/tooltip.rb +1 -69
- data/app/components/primer/alpha/underline_nav.css +1 -1
- data/app/components/primer/alpha/underline_nav.css.map +1 -1
- data/app/components/primer/alpha/underline_nav.rb +0 -61
- data/app/components/primer/alpha/underline_panels.rb +0 -19
- data/app/components/primer/beta/auto_complete/item.rb +0 -8
- data/app/components/primer/beta/auto_complete.rb +0 -56
- data/app/components/primer/beta/avatar.css +1 -1
- data/app/components/primer/beta/avatar.css.map +1 -1
- data/app/components/primer/beta/avatar.rb +0 -18
- 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.rb +0 -21
- data/app/components/primer/beta/base_button.rb +0 -4
- data/app/components/primer/beta/blankslate.css +1 -1
- data/app/components/primer/beta/blankslate.css.map +1 -1
- data/app/components/primer/beta/blankslate.rb +0 -104
- data/app/components/primer/beta/border_box/header.rb +4 -11
- data/app/components/primer/beta/border_box.css +1 -1
- data/app/components/primer/beta/border_box.css.map +1 -1
- data/app/components/primer/beta/border_box.html.erb +2 -2
- data/app/components/primer/beta/border_box.rb +11 -55
- data/app/components/primer/beta/breadcrumbs.rb +0 -7
- data/app/components/primer/beta/button.css +1 -1
- data/app/components/primer/beta/button.css.json +1 -0
- data/app/components/primer/beta/button.css.map +1 -1
- data/app/components/primer/beta/button.pcss +6 -2
- data/app/components/primer/beta/button.rb +7 -43
- data/app/components/primer/beta/button_group.css +1 -1
- data/app/components/primer/beta/button_group.css.map +1 -1
- data/app/components/primer/beta/button_group.rb +0 -16
- data/app/components/primer/beta/clipboard_copy.rb +0 -12
- data/app/components/primer/beta/close_button.rb +0 -3
- data/app/components/primer/beta/counter.rb +0 -8
- data/app/components/primer/beta/details.rb +0 -11
- data/app/components/primer/beta/flash.css +1 -1
- data/app/components/primer/beta/flash.css.map +1 -1
- data/app/components/primer/beta/flash.html.erb +1 -3
- data/app/components/primer/beta/flash.pcss +1 -2
- data/app/components/primer/beta/flash.rb +1 -23
- data/app/components/primer/beta/heading.rb +0 -8
- data/app/components/primer/beta/icon_button.rb +0 -21
- data/app/components/primer/beta/label.css +1 -1
- data/app/components/primer/beta/label.css.map +1 -1
- data/app/components/primer/beta/label.rb +0 -20
- data/app/components/primer/beta/link.rb +0 -22
- data/app/components/primer/beta/markdown.rb +1 -262
- data/app/components/primer/beta/octicon.rb +0 -10
- data/app/components/primer/beta/popover.css +1 -1
- data/app/components/primer/beta/popover.css.map +1 -1
- data/app/components/primer/beta/popover.rb +0 -43
- data/app/components/primer/beta/progress_bar.rb +1 -22
- data/app/components/primer/beta/relative_time.rb +0 -9
- data/app/components/primer/beta/spinner.rb +2 -10
- data/app/components/primer/beta/state.rb +0 -13
- data/app/components/primer/beta/subhead.rb +0 -55
- data/app/components/primer/beta/text.rb +0 -4
- data/app/components/primer/beta/timeline_item.css +1 -1
- data/app/components/primer/beta/timeline_item.css.map +1 -1
- data/app/components/primer/beta/timeline_item.rb +0 -9
- data/app/components/primer/beta/truncate.rb +0 -50
- data/app/components/primer/blankslate_component.rb +0 -76
- data/app/components/primer/box.rb +0 -6
- data/app/components/primer/button_component.rb +0 -49
- data/app/components/primer/component.rb +1 -1
- data/app/components/primer/conditional_wrapper.rb +2 -17
- data/app/components/primer/icon_button.rb +0 -30
- data/app/components/primer/layout_component.rb +0 -12
- data/app/components/primer/tooltip.rb +0 -27
- data/app/components/primer/truncate.rb +0 -19
- data/app/lib/primer/fetch_or_fallback_helper.rb +1 -1
- data/lib/primer/accessibility.rb +1 -1
- data/lib/primer/deprecations.yml +3 -3
- data/lib/primer/forms/dsl/input.rb +1 -0
- data/lib/primer/static/generate_info_arch.rb +1 -0
- data/lib/primer/view_components/linters/details_menu_migration.rb +1 -1
- data/lib/primer/view_components/linters/migrations/truncate_component.rb +45 -0
- data/lib/primer/view_components/linters/tooltipped_migration.rb +1 -1
- data/lib/primer/view_components/linters.rb +1 -0
- data/lib/primer/view_components/version.rb +1 -1
- data/lib/primer/view_components.rb +18 -0
- data/lib/primer/yard.rb +8 -9
- data/previews/primer/alpha/tooltip_preview/with_multiple_on_a_page.html.erb +3 -3
- data/previews/primer/alpha/tooltip_preview.rb +11 -23
- data/previews/primer/beta/button_preview/leading_visual.html.erb +2 -2
- data/previews/primer/beta/button_preview/leading_visual_svg.html.erb +12 -0
- data/previews/primer/beta/button_preview/trailing_counter.html.erb +1 -1
- data/previews/primer/beta/button_preview/trailing_visual.html.erb +1 -1
- data/previews/primer/beta/button_preview.rb +22 -0
- data/static/arguments.json +12 -1
- data/static/info_arch.json +136 -15
- data/static/previews.json +13 -13
- metadata +4 -3
- data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
|
@@ -97,23 +97,6 @@ module Primer
|
|
|
97
97
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
98
98
|
renders_one :footer, "Footer"
|
|
99
99
|
|
|
100
|
-
# @example Dialog with Cancel and Submit buttons
|
|
101
|
-
# @description
|
|
102
|
-
# An ID is provided which enables wiring of the open and close buttons to the dialog.
|
|
103
|
-
# @code
|
|
104
|
-
# <%= render(Primer::Alpha::Dialog.new(
|
|
105
|
-
# title: "Dialog Example",
|
|
106
|
-
# id: "my-dialog",
|
|
107
|
-
# )) do |d| %>
|
|
108
|
-
# <% d.with_show_button { "Show Dialog" } %>
|
|
109
|
-
# <% d.with_body do %>
|
|
110
|
-
# <p>Some content</p>
|
|
111
|
-
# <% end %>
|
|
112
|
-
# <% d.with_footer do %>
|
|
113
|
-
# <%= render(Primer::ButtonComponent.new(data: { "close-dialog-id": "my-dialog" })) { "Cancel" } %>
|
|
114
|
-
# <%= render(Primer::ButtonComponent.new(scheme: :primary)) { "Submit" } %>
|
|
115
|
-
# <% end %>
|
|
116
|
-
# <% end %>
|
|
117
100
|
# @param id [String] The id of the dialog.
|
|
118
101
|
# @param title [String] Describes the content of the dialog.
|
|
119
102
|
# @param subtitle [String] Provides additional context for the dialog, also setting the `aria-describedby` attribute.
|
|
@@ -150,7 +133,8 @@ module Primer
|
|
|
150
133
|
@system_arguments, {
|
|
151
134
|
aria: {
|
|
152
135
|
disabled: true,
|
|
153
|
-
|
|
136
|
+
labelledby: "#{@id}-title",
|
|
137
|
+
describedby: "#{@id}-description"
|
|
154
138
|
}
|
|
155
139
|
}
|
|
156
140
|
)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium
|
|
1
|
+
.dropdown{position:relative}.dropdown-caret{border-bottom-color:#0000;border-left-color:#0000;border-right-color:#0000;border-style:solid;border-width:var(--borderWidth-thicker,max(4px,.25rem)) var(--borderWidth-thicker,max(4px,.25rem)) 0;content:"";display:inline-block;height:0;vertical-align:middle;width:0}.dropdown-menu{background-clip:padding-box;background-color:var(--overlay-bgColor,var(--color-canvas-overlay));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);box-shadow:var(--shadow-floating-large,var(--color-shadow-large));left:0;list-style:none;margin-top:2px;padding-bottom:var(--control-small-paddingBlock,.25rem);padding-top:var(--control-small-paddingBlock,.25rem);position:absolute;top:100%;width:160px;z-index:100}.dropdown-menu:after,.dropdown-menu:before{content:"";display:inline-block;position:absolute}.dropdown-menu:before{border:8px solid #0000;border-bottom:8px solid var(--borderColor-default,var(--color-border-default))}.dropdown-menu:after{border:7px solid #0000;border-bottom:7px solid var(--overlay-bgColor,var(--color-canvas-overlay))}.dropdown-menu>ul{list-style:none}.dropdown-menu-no-overflow{width:auto}.dropdown-menu-no-overflow .dropdown-item{overflow:visible;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:inherit}.dropdown-item{color:var(--fgColor-default,var(--color-fg-default));display:block;overflow:hidden;padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-condensed,.5rem) var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem);text-overflow:ellipsis;white-space:nowrap}.dropdown-item:hover{background-color:var(--bgColor-accent-emphasis,var(--color-accent-emphasis));color:var(--fgColor-onEmphasis,var(--color-fg-on-emphasis));text-decoration:none}.dropdown-item:hover>.octicon{color:inherit;opacity:1}.dropdown-item:hover [class*=color-fg-],.dropdown-item:hover>.Label{color:inherit!important}.dropdown-item:hover>.Label{border-color:currentcolor}.dropdown-item.btn-link,.dropdown-signout{text-align:left;width:100%}.dropdown-signout{background:none;border:0}.dropdown-divider{border-top:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));display:block;height:0;margin:var(--stack-gap-condensed,.5rem) 0}.dropdown-header{color:var(--fgColor-muted,var(--color-fg-muted));font-size:var(--text-body-size-small,.75rem);padding:var(--control-small-paddingBlock,.25rem) var(--control-medium-paddingInline-spacious,1rem)}.dropdown-item[aria-checked=false] .octicon-check{display:none}.dropdown-menu-w{left:auto;margin-right:8px;margin-top:0;right:100%;top:0;width:auto}.dropdown-menu-w:before{border-color:#0000;border-left-color:var(--borderColor-default,var(--color-border-default));left:auto;right:-16px;top:10px}.dropdown-menu-w:after{border-color:#0000;border-left-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:auto;right:-14px;top:11px}.dropdown-menu-e{left:100%;margin-left:8px;margin-top:0;top:0;width:auto}.dropdown-menu-e:before{border-color:#0000;border-right-color:var(--borderColor-default,var(--color-border-default));left:-16px;top:10px}.dropdown-menu-e:after{border-color:#0000;border-right-color:var(--overlay-bgColor,var(--color-canvas-overlay));left:-14px;top:11px}.dropdown-menu-ne{bottom:100%;left:0;margin-bottom:3px;top:auto}.dropdown-menu-ne:after,.dropdown-menu-ne:before{right:auto;top:auto}.dropdown-menu-ne:before{border-bottom:0;border-left:8px solid #0000;border-right:8px solid #0000;border-top:8px solid var(--borderColor-default,var(--color-border-default));bottom:-8px;left:9px}.dropdown-menu-ne:after{border-bottom:0;border-left:7px solid #0000;border-right:7px solid #0000;border-top:7px solid var(--overlay-bgColor,var(--color-canvas-overlay));bottom:-7px;left:10px}.dropdown-menu-s{left:auto;right:50%;transform:translateX(50%)}.dropdown-menu-s:before{right:50%;top:-16px;transform:translateX(50%)}.dropdown-menu-s:after{right:50%;top:-14px;transform:translateX(50%)}.dropdown-menu-sw{left:auto;right:0}.dropdown-menu-sw:before{left:auto;right:9px;top:-16px}.dropdown-menu-sw:after{left:auto;right:10px;top:-14px}.dropdown-menu-se:before{left:9px;top:-16px}.dropdown-menu-se:after{left:10px;top:-14px}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,
|
|
1
|
+
{"version":3,"sources":["dropdown.pcss"],"names":[],"mappings":"AAEA,UACE,iBACF,CAEA,gBASE,yBAAgC,CAChC,uBAA8B,CAF9B,wBAA+B,CAF/B,kBAAmB,CACnB,oGAAqE,CAFrE,UAAW,CAJX,oBAAqB,CAErB,QAAS,CACT,qBAAsB,CAFtB,OASF,CAKA,eAWE,2BAA4B,CAD5B,mEAAwC,CAExC,6GAAgE,CAChE,gDAAyC,CACzC,iEAAwC,CAXxC,MAAO,CAMP,eAAgB,CADhB,cAAe,CADf,uDAAiD,CADjD,oDAA8C,CAL9C,iBAAkB,CAClB,QAAS,CAGT,WAAY,CADZ,WAkCF,CAtBE,2CAIE,UAAW,CADX,oBAAqB,CADrB,iBAGF,CAGA,sBAEE,sBAA+C,CAA/C,8EACF,CAGA,qBAEE,sBAA2C,CAA3C,0EACF,CAEA,kBACE,eACF,CAGF,2BACE,UAOF,CALE,0CAEE,gBAAiB,CADjB,kGAAuF,CAEvF,qBACF,CAIF,eAKE,oDAA6B,CAJ7B,aAAc,CAGd,eAAgB,CAFhB,+LACgF,CAGhF,sBAAuB,CACvB,kBA0BF,CAxBE,qBAGE,4EAAgD,CAFhD,2DAAgC,CAChC,oBAgBF,CAbE,8BACE,aAAc,CACd,SACF,CAMA,oEACE,uBAEF,CAHA,4BAEE,yBACF,CASJ,0CAJI,eAAgB,CADhB,UAUJ,CALA,kBAGE,eAAgB,CAChB,QACF,CAEA,kBAIE,iHAAoE,CAHpE,aAAc,CACd,QAAS,CACT,yCAEF,CAEA,iBAGE,gDAA2B,CAD3B,4CAAsC,CADtC,kGAGF,CAEA,kDACE,YACF,CAOA,iBAGE,SAAU,CAGV,gBAAiB,CADjB,YAAa,CAHb,UAAW,CADX,KAAM,CAGN,UAmBF,CAfE,wBAIE,kBAAyB,CACzB,wEAA6C,CAF7C,SAAU,CADV,WAAY,CADZ,QAKF,CAEA,uBAIE,kBAAyB,CACzB,oEAAyC,CAFzC,SAAU,CADV,WAAY,CADZ,QAKF,CAGF,iBAEE,SAAU,CAGV,eAAgB,CADhB,YAAa,CAHb,KAAM,CAEN,UAiBF,CAbE,wBAGE,kBAAyB,CACzB,yEAA8C,CAF9C,UAAW,CADX,QAIF,CAEA,uBAGE,kBAAyB,CACzB,qEAA0C,CAF1C,UAAW,CADX,QAIF,CAGF,kBAEE,WAAY,CACZ,MAAO,CACP,iBAAkB,CAHlB,QA4BF,CAvBE,iDAGE,UAAW,CADX,QAEF,CAEA,yBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,2EAAgD,CAFhD,WAAY,CACZ,QAKF,CAEA,wBAKE,eAAgB,CAChB,2BAAkC,CAFlC,4BAAmC,CADnC,uEAA4C,CAF5C,WAAY,CACZ,SAKF,CAGF,iBAEE,SAAU,CADV,SAAU,CAEV,yBAaF,CAXE,wBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAEA,uBAEE,SAAU,CADV,SAAU,CAEV,yBACF,CAGF,kBAEE,SAAU,CADV,OAcF,CAXE,yBAGE,SAAU,CADV,SAAU,CADV,SAGF,CAEA,wBAGE,SAAU,CADV,UAAW,CADX,SAGF,CAIA,yBAEE,QAAS,CADT,SAEF,CAEA,wBAEE,SAAU,CADV,SAEF","file":"dropdown.css","sourcesContent":["/* dropdown */\n\n.dropdown {\n position: relative;\n}\n\n.dropdown-caret {\n display: inline-block;\n width: 0;\n height: 0;\n vertical-align: middle;\n content: '';\n border-style: solid;\n border-width: var(--borderWidth-thicker) var(--borderWidth-thicker) 0;\n border-right-color: transparent;\n border-bottom-color: transparent;\n border-left-color: transparent;\n}\n\n/* Requires a positioning class (e.g., `.dropdown-menu-w`) to determine which\n** way the menu should render from the element triggering it. */\n\n.dropdown-menu {\n position: absolute;\n top: 100%;\n left: 0;\n z-index: 100;\n width: 160px;\n padding-top: var(--control-small-paddingBlock);\n padding-bottom: var(--control-small-paddingBlock);\n margin-top: 2px;\n list-style: none;\n background-color: var(--overlay-bgColor);\n background-clip: padding-box;\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n box-shadow: var(--shadow-floating-large);\n\n &::before,\n &::after {\n position: absolute;\n display: inline-block;\n content: '';\n }\n\n /* caret border */\n &::before {\n border: 8px solid transparent;\n border-bottom-color: var(--borderColor-default);\n }\n\n /* caret background (should match dropdown background) */\n &::after {\n border: 7px solid transparent;\n border-bottom-color: var(--overlay-bgColor);\n }\n\n & > ul {\n list-style: none;\n }\n}\n\n.dropdown-menu-no-overflow {\n width: auto;\n\n & .dropdown-item {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: visible;\n text-overflow: inherit;\n }\n}\n\n/* Dropdown items (can be links or buttons) */\n.dropdown-item {\n display: block;\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-condensed)\n var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n overflow: hidden;\n color: var(--fgColor-default);\n text-overflow: ellipsis;\n white-space: nowrap;\n\n &:hover {\n color: var(--fgColor-onEmphasis);\n text-decoration: none;\n background-color: var(--bgColor-accent-emphasis);\n\n & > .octicon {\n color: inherit;\n opacity: 1;\n }\n\n & [class*='color-fg-'] {\n color: inherit !important;\n }\n\n & > .Label {\n color: inherit !important;\n border-color: currentcolor;\n }\n }\n\n &.btn-link {\n width: 100%;\n text-align: left;\n }\n}\n\n.dropdown-signout {\n width: 100%;\n text-align: left;\n background: none;\n border: 0;\n}\n\n.dropdown-divider {\n display: block;\n height: 0;\n margin: var(--stack-gap-condensed) 0;\n border-top: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.dropdown-header {\n padding: var(--control-small-paddingBlock) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n}\n\n.dropdown-item[aria-checked='false'] .octicon-check {\n display: none;\n}\n\n/* Directional classes\n**\n** Move the menu and the caret attached to it. Requires at least one of these on\n** the `.dropdown-menu` element. */\n\n.dropdown-menu-w {\n top: 0;\n right: 100%;\n left: auto;\n width: auto;\n margin-top: 0;\n margin-right: 8px;\n\n &::before {\n top: 10px;\n right: -16px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n right: -14px;\n left: auto;\n border-color: transparent;\n border-left-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-e {\n top: 0;\n left: 100%;\n width: auto;\n margin-top: 0;\n margin-left: 8px;\n\n &::before {\n top: 10px;\n left: -16px;\n border-color: transparent;\n border-right-color: var(--borderColor-default);\n }\n\n &::after {\n top: 11px;\n left: -14px;\n border-color: transparent;\n border-right-color: var(--overlay-bgColor);\n }\n}\n\n.dropdown-menu-ne {\n top: auto;\n bottom: 100%;\n left: 0;\n margin-bottom: 3px;\n\n &::before,\n &::after {\n top: auto;\n right: auto;\n }\n\n &::before {\n bottom: -8px;\n left: 9px;\n border-top: 8px solid var(--borderColor-default);\n border-right: 8px solid transparent;\n border-bottom: 0;\n border-left: 8px solid transparent;\n }\n\n &::after {\n bottom: -7px;\n left: 10px;\n border-top: 7px solid var(--overlay-bgColor);\n border-right: 7px solid transparent;\n border-bottom: 0;\n border-left: 7px solid transparent;\n }\n}\n\n.dropdown-menu-s {\n right: 50%;\n left: auto;\n transform: translateX(50%);\n\n &::before {\n top: -16px;\n right: 50%;\n transform: translateX(50%);\n }\n\n &::after {\n top: -14px;\n right: 50%;\n transform: translateX(50%);\n }\n}\n\n.dropdown-menu-sw {\n right: 0;\n left: auto;\n\n &::before {\n top: -16px;\n right: 9px;\n left: auto;\n }\n\n &::after {\n top: -14px;\n right: 10px;\n left: auto;\n }\n}\n\n.dropdown-menu-se {\n &::before {\n top: -16px;\n left: 9px;\n }\n\n &::after {\n top: -14px;\n left: 10px;\n }\n}\n"]}
|
|
@@ -26,111 +26,6 @@ module Primer
|
|
|
26
26
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
27
27
|
renders_one :menu, "Primer::Alpha::Dropdown::Menu"
|
|
28
28
|
|
|
29
|
-
# @example Default
|
|
30
|
-
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
|
|
31
|
-
# <% component.with_button do %>
|
|
32
|
-
# Dropdown
|
|
33
|
-
# <% end %>
|
|
34
|
-
#
|
|
35
|
-
# <% component.with_menu(header: "Options") do |menu|
|
|
36
|
-
# menu.with_item { "Item 1" }
|
|
37
|
-
# menu.with_item { "Item 2" }
|
|
38
|
-
# menu.with_item { "Item 3" }
|
|
39
|
-
# end %>
|
|
40
|
-
# <% end %>
|
|
41
|
-
#
|
|
42
|
-
# @example With dividers
|
|
43
|
-
#
|
|
44
|
-
# @description
|
|
45
|
-
# Dividers can be used to separate a group of items. They don't have any content.
|
|
46
|
-
# @code
|
|
47
|
-
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
|
|
48
|
-
# <% component.with_button do %>
|
|
49
|
-
# Dropdown
|
|
50
|
-
# <% end %>
|
|
51
|
-
#
|
|
52
|
-
# <% component.with_menu(header: "Options") do |menu|
|
|
53
|
-
# menu.with_item { "Item 1" }
|
|
54
|
-
# menu.with_item { "Item 2" }
|
|
55
|
-
# menu.with_item(divider: true)
|
|
56
|
-
# menu.with_item { "Item 3" }
|
|
57
|
-
# menu.with_item { "Item 4" }
|
|
58
|
-
# menu.with_item(divider: true)
|
|
59
|
-
# menu.with_item { "Item 5" }
|
|
60
|
-
# menu.with_item { "Item 6" }
|
|
61
|
-
# end %>
|
|
62
|
-
# <% end %>
|
|
63
|
-
#
|
|
64
|
-
# @example With direction
|
|
65
|
-
# <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
|
|
66
|
-
# <% component.with_button do %>
|
|
67
|
-
# Dropdown
|
|
68
|
-
# <% end %>
|
|
69
|
-
#
|
|
70
|
-
# <% component.with_menu(header: "Options", direction: :s) do |menu|
|
|
71
|
-
# menu.with_item { "Item 1" }
|
|
72
|
-
# menu.with_item { "Item 2" }
|
|
73
|
-
# menu.with_item { "Item 3" }
|
|
74
|
-
# menu.with_item { "Item 4" }
|
|
75
|
-
# end %>
|
|
76
|
-
# <% end %>
|
|
77
|
-
#
|
|
78
|
-
# @example With caret
|
|
79
|
-
# <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component| %>
|
|
80
|
-
# <% component.with_button do %>
|
|
81
|
-
# Dropdown
|
|
82
|
-
# <% end %>
|
|
83
|
-
#
|
|
84
|
-
# <% component.with_menu(header: "Options") do |menu|
|
|
85
|
-
# menu.with_item { "Item 1" }
|
|
86
|
-
# menu.with_item { "Item 2" }
|
|
87
|
-
# menu.with_item { "Item 3" }
|
|
88
|
-
# menu.with_item { "Item 4" }
|
|
89
|
-
# end %>
|
|
90
|
-
# <% end %>
|
|
91
|
-
#
|
|
92
|
-
# @example Customizing the button
|
|
93
|
-
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
|
|
94
|
-
# <% component.with_button(scheme: :primary, size: :small) do %>
|
|
95
|
-
# Dropdown
|
|
96
|
-
# <% end %>
|
|
97
|
-
#
|
|
98
|
-
# <% component.with_menu(header: "Options") do |menu|
|
|
99
|
-
# menu.with_item { "Item 1" }
|
|
100
|
-
# menu.with_item { "Item 2" }
|
|
101
|
-
# menu.with_item { "Item 3" }
|
|
102
|
-
# menu.with_item { "Item 4" }
|
|
103
|
-
# end %>
|
|
104
|
-
# <% end %>
|
|
105
|
-
#
|
|
106
|
-
# @example Menu as list
|
|
107
|
-
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
|
|
108
|
-
# <% component.with_button do %>
|
|
109
|
-
# Dropdown
|
|
110
|
-
# <% end %>
|
|
111
|
-
#
|
|
112
|
-
# <% component.with_menu(as: :list, header: "Options") do |menu|
|
|
113
|
-
# menu.with_item { "Item 1" }
|
|
114
|
-
# menu.with_item { "Item 2" }
|
|
115
|
-
# menu.with_item(divider: true)
|
|
116
|
-
# menu.with_item { "Item 3" }
|
|
117
|
-
# menu.with_item { "Item 4" }
|
|
118
|
-
# end %>
|
|
119
|
-
# <% end %>
|
|
120
|
-
#
|
|
121
|
-
# @example Customizing menu items
|
|
122
|
-
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
|
|
123
|
-
# <% component.with_button do %>
|
|
124
|
-
# Dropdown
|
|
125
|
-
# <% end %>
|
|
126
|
-
#
|
|
127
|
-
# <% component.with_menu(header: "Options") do |menu|
|
|
128
|
-
# menu.with_item(tag: :button) { "Item 1" }
|
|
129
|
-
# menu.with_item(classes: "custom-class") { "Item 2" }
|
|
130
|
-
# menu.with_item { "Item 3" }
|
|
131
|
-
# end %>
|
|
132
|
-
# <% end %>
|
|
133
|
-
#
|
|
134
29
|
# @param overlay [Symbol] <%= one_of(Primer::Beta::Details::OVERLAY_MAPPINGS.keys) %>
|
|
135
30
|
# @param with_caret [Boolean] Whether or not a caret should be rendered in the button.
|
|
136
31
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
@@ -10,17 +10,6 @@ module Primer
|
|
|
10
10
|
# Note that this slot takes precedence over the `caption:` argument in the constructor.
|
|
11
11
|
renders_one :caption
|
|
12
12
|
|
|
13
|
-
# @example Default
|
|
14
|
-
# <%= render(Primer::Alpha::FormControl.new(label: "Best character")) do |component| %>
|
|
15
|
-
# <% component.with_input do |input_arguments| %>
|
|
16
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "Best character", **input_arguments)) do |seg| %>
|
|
17
|
-
# <% seg.with_item(label: "Han Solo") %>
|
|
18
|
-
# <% seg.with_item(label: "Luke Skywalker") %>
|
|
19
|
-
# <% seg.with_item(label: "Leia Organa") %>
|
|
20
|
-
# <% end %>
|
|
21
|
-
# <% end %>
|
|
22
|
-
# <% end %>
|
|
23
|
-
#
|
|
24
13
|
# @param label [String] Label text displayed above the input.
|
|
25
14
|
# @param caption [String] Describes the field and what sort of input it expects. Displayed below the input. Note that the `caption` slot is also available and takes precedence over this argument when provided.
|
|
26
15
|
# @param validation_message [String] A string displayed in red between the caption and the input indicating the input's contents are invalid.
|
|
@@ -9,15 +9,6 @@ module Primer
|
|
|
9
9
|
# * This button is displaying a hellip as its content (The three dots character). Therefore a label is needed for screen readers.
|
|
10
10
|
# * Set the attribute `aria-label` on the system arguments. E.g. `Primer::Alpha::HellipButton.new("aria-label": "Expand next part")`
|
|
11
11
|
class HellipButton < Primer::Component
|
|
12
|
-
# @example Default
|
|
13
|
-
# <%= render(Primer::Alpha::HellipButton.new("aria-label": "No effect")) %>
|
|
14
|
-
#
|
|
15
|
-
# @example Inline
|
|
16
|
-
# <%= render(Primer::Alpha::HellipButton.new(inline: true, "aria-label": "No effect")) %>
|
|
17
|
-
#
|
|
18
|
-
# @example Styling the button
|
|
19
|
-
# <%= render(Primer::Alpha::HellipButton.new(p: 1, classes: "custom-class", "aria-label": "No effect")) %>
|
|
20
|
-
#
|
|
21
12
|
# @param inline [Boolean] Whether or not the button is inline.
|
|
22
13
|
# @param disabled [Boolean] Whether or not the button is disabled.
|
|
23
14
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
@@ -12,15 +12,6 @@ module Primer
|
|
|
12
12
|
class HiddenTextExpander < Primer::Component
|
|
13
13
|
status :alpha
|
|
14
14
|
|
|
15
|
-
# @example Default
|
|
16
|
-
# <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect")) %>
|
|
17
|
-
#
|
|
18
|
-
# @example Inline
|
|
19
|
-
# <%= render(Primer::Alpha::HiddenTextExpander.new(inline: true, "aria-label": "No effect")) %>
|
|
20
|
-
#
|
|
21
|
-
# @example Styling the button
|
|
22
|
-
# <%= render(Primer::Alpha::HiddenTextExpander.new("aria-label": "No effect", button_arguments: { p: 1, classes: "custom-class" })) %>
|
|
23
|
-
#
|
|
24
15
|
# @param inline [Boolean] Whether or not the expander is inline.
|
|
25
16
|
# @param button_arguments [Hash] <%= link_to_system_arguments_docs %> for the button element.
|
|
26
17
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
@@ -9,22 +9,6 @@ module Primer
|
|
|
9
9
|
class Image < Primer::Component
|
|
10
10
|
status :alpha
|
|
11
11
|
|
|
12
|
-
# @example Default
|
|
13
|
-
#
|
|
14
|
-
# <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub")) %>
|
|
15
|
-
#
|
|
16
|
-
# @example Helper
|
|
17
|
-
#
|
|
18
|
-
# <%= primer_image(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub") %>
|
|
19
|
-
#
|
|
20
|
-
# @example Lazy loading
|
|
21
|
-
#
|
|
22
|
-
# <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", lazy: true)) %>
|
|
23
|
-
#
|
|
24
|
-
# @example Custom size
|
|
25
|
-
#
|
|
26
|
-
# <%= render(Primer::Alpha::Image.new(src: Primer::ExampleImage::BASE64_SRC, alt: "GitHub", height: 100, width: 100)) %>
|
|
27
|
-
#
|
|
28
12
|
# @param src [String] The source url of the image.
|
|
29
13
|
# @param alt [String] Specifies an alternate text for the image.
|
|
30
14
|
# @param lazy [Boolean] Whether or not to lazily load the image.
|
|
@@ -14,17 +14,6 @@ module Primer
|
|
|
14
14
|
Primer::BaseComponent.new(**system_arguments)
|
|
15
15
|
}
|
|
16
16
|
|
|
17
|
-
# @example Simple cropper
|
|
18
|
-
# <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC)) %>
|
|
19
|
-
#
|
|
20
|
-
# @example Square cropper
|
|
21
|
-
# <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) %>
|
|
22
|
-
#
|
|
23
|
-
# @example Cropper with a custom loader
|
|
24
|
-
# <%= render(Primer::Alpha::ImageCrop.new(src: Primer::ExampleImage::BASE64_SRC, rounded: false)) do |cropper| %>
|
|
25
|
-
# <% cropper.with_loading(style: "width: 120px").with_content("Loading...") %>
|
|
26
|
-
# <% end %>
|
|
27
|
-
#
|
|
28
17
|
# @param src [String] The path of the image to crop.
|
|
29
18
|
# @param rounded [Boolean] If the crop mask should be a circle. Defaults to true.
|
|
30
19
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-
|
|
1
|
+
.Layout{--Layout-sidebar-width:220px;--Layout-gutter:16px;display:grid}@media (max-width:calc(544px - 0.02px)){.Layout{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout .Layout-divider,.Layout .Layout-main,.Layout .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--divided{--Layout-gutter:0}.Layout.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(768px - 0.02px)){.Layout.Layout--flowRow-until-md{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-md .Layout-divider,.Layout.Layout--flowRow-until-md .Layout-main,.Layout.Layout--flowRow-until-md .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-md.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-md.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-md.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-md.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}@media (max-width:calc(1012px - 0.02px)){.Layout.Layout--flowRow-until-lg{grid-auto-flow:row;grid-template-columns:1fr!important}.Layout.Layout--flowRow-until-lg .Layout-divider,.Layout.Layout--flowRow-until-lg .Layout-main,.Layout.Layout--flowRow-until-lg .Layout-sidebar{grid-column:1!important;width:100%!important}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-sidebar{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-sidebar,.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-start .Layout-main{grid-row:2/span 2}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}.Layout.Layout--flowRow-until-lg.Layout--sidebarPosition-flowRow-none .Layout-sidebar{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided{--Layout-gutter:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider{grid-row:2;height:1px}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-hidden{display:none}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-divider.Layout-divider--flowRow-shallow{background:var(--bgColor-inset,var(--color-canvas-inset));border-color:var(--borderColor-default,var(--color-border-default));border-style:solid;border-width:var(--borderWidth-thin,max(1px,.0625rem)) 0;height:8px;margin-right:0}.Layout.Layout--flowRow-until-lg.Layout--divided .Layout-main,.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-sidebar{grid-row:3/span 1}.Layout.Layout--flowRow-until-lg.Layout--divided.Layout--sidebarPosition-flowRow-end .Layout-main{grid-row:1}}.Layout{grid-gap:var(--Layout-gutter);grid-auto-flow:column;grid-template-columns:auto 0 minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter)))}.Layout .Layout-sidebar{grid-column:1}.Layout .Layout-divider{display:none}.Layout .Layout-main{grid-column:2/span 2}@media (min-width:1012px){.Layout{--Layout-gutter:24px}}.Layout.Layout--gutter-none{--Layout-gutter:0px}.Layout.Layout--gutter-condensed{--Layout-gutter:16px}@media (min-width:1012px){.Layout.Layout--gutter-spacious{--Layout-gutter:32px}}@media (min-width:1280px){.Layout.Layout--gutter-spacious{--Layout-gutter:40px}}@media (min-width:544px){.Layout{--Layout-sidebar-width:220px}}@media (min-width:768px){.Layout{--Layout-sidebar-width:256px}}@media (min-width:1012px){.Layout{--Layout-sidebar-width:296px}}@media (min-width:768px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:240px}}@media (min-width:1012px){.Layout.Layout--sidebar-narrow{--Layout-sidebar-width:256px}.Layout.Layout--sidebar-wide{--Layout-sidebar-width:320px}}@media (min-width:1280px){.Layout.Layout--sidebar-wide{--Layout-sidebar-width:336px}}.Layout.Layout--sidebarPosition-start .Layout-sidebar{grid-column:1}.Layout.Layout--sidebarPosition-start .Layout-main{grid-column:2/span 2}.Layout.Layout--sidebarPosition-end{grid-template-columns:minmax(0,calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto}.Layout.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout.Layout--sidebarPosition-end .Layout-sidebar{grid-column:2/span 2}.Layout.Layout--divided .Layout-divider{background:var(--borderColor-default,var(--color-border-default));display:block;grid-column:2;margin-right:-1px;width:1px}.Layout.Layout--divided .Layout-main,.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-sidebar{grid-column:3/span 1}.Layout.Layout--divided.Layout--sidebarPosition-end .Layout-main{grid-column:1}.Layout-divider{display:none;width:1px}.Layout-sidebar{width:var(--Layout-sidebar-width)}.Layout-main{min-width:0}.Layout-main .Layout-main-centered-lg,.Layout-main .Layout-main-centered-md,.Layout-main .Layout-main-centered-xl{margin-left:auto;margin-right:auto}.Layout-main .Layout-main-centered-lg>.container-lg,.Layout-main .Layout-main-centered-lg>.container-md,.Layout-main .Layout-main-centered-lg>.container-xl,.Layout-main .Layout-main-centered-md>.container-lg,.Layout-main .Layout-main-centered-md>.container-md,.Layout-main .Layout-main-centered-md>.container-xl,.Layout-main .Layout-main-centered-xl>.container-lg,.Layout-main .Layout-main-centered-xl>.container-md,.Layout-main .Layout-main-centered-xl>.container-xl{margin-left:0}.Layout-main .Layout-main-centered-md{max-width:calc(var(--breakpoint-medium,48rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-lg{max-width:calc(var(--breakpoint-large,63.25rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}.Layout-main .Layout-main-centered-xl{max-width:calc(var(--breakpoint-xlarge,80rem) + var(--Layout-sidebar-width) + var(--Layout-gutter))}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,
|
|
1
|
+
{"version":3,"sources":["layout.pcss"],"names":[],"mappings":"AAgFA,QAGE,4BAA6B,CAC7B,oBAAqB,CAHrB,YAkJF,CA7IE,wCANF,QA7EE,kBAAmB,CACnB,mCA+NF,CA7NE,qEAIE,uBAAyB,CADzB,oBAEF,CAGE,8DACE,UACF,CAQA,uHACE,iBACF,CAEA,yDACE,UACF,CAIA,6DACE,YACF,CAGF,wBAoBA,iBAJA,CAMA,wCAEE,UAAW,CADX,UAeF,CAZE,uEACE,YACF,CAEA,wEAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,iHACE,iBACF,CAEA,yEACE,UACF,CAmCJ,CAGE,wCADF,iCAvFA,kBAAmB,CACnB,mCA0FA,CAxFA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CAwCF,CAIA,yCADF,iCA7FA,kBAAmB,CACnB,mCAgGA,CA9FA,gJAIE,uBAAyB,CADzB,oBAEF,CAGE,uFACE,UACF,CAQA,yKACE,iBACF,CAEA,kFACE,UACF,CAIA,sFACE,YACF,CAGF,iDAoBA,iBAJA,CAMA,iEAEE,UAAW,CADX,UAeF,CAZE,gGACE,YACF,CAEA,iGAGE,yDAAgC,CAChC,mEAAwC,CACxC,kBAAmB,CACnB,wDAAuC,CALvC,UAAW,CACX,cAKF,CA7BE,mKACE,iBACF,CAEA,kGACE,UACF,CA8CF,CAnBJ,QA0BE,6BAA8B,CAF9B,qBAAsB,CACtB,sGA0HF,CAvHE,wBACE,aACF,CAEA,wBACE,YACF,CAEA,qBACE,oBACF,CAIA,0BA1CF,QA2CI,oBAwGJ,CAvGE,CAEA,4BAEE,mBACF,CAEA,iCACE,oBACF,CAGE,0BADF,gCAEI,oBAMJ,CALE,CAEA,0BALF,gCAMI,oBAEJ,CADE,CAIF,yBAlEF,QAmEI,4BAgFJ,CA/EE,CAEA,yBAtEF,QAuEI,4BA4EJ,CA3EE,CAEA,0BA1EF,QA2EI,4BAwEJ,CAvEE,CAGE,yBADF,+BAEI,4BAMJ,CALE,CAEA,0BALF,+BAMI,4BAEJ,CAEA,6BAEI,4BAMJ,CAXE,CAQA,0BALF,6BAMI,4BAEJ,CADE,CAMA,sDACE,aACF,CAEA,mDACE,oBACF,CAGF,oCACE,sGASF,CAPE,iDACE,aACF,CAEA,oDACE,oBACF,CAMA,wCAKE,iEAAsC,CAJtC,aAAc,CACd,aAAc,CAEd,iBAAkB,CADlB,SAGF,CAOE,yGACE,oBACF,CAEA,iEACE,aACF,CAKN,gBACE,YAAa,CACb,SACF,CAEA,gBACE,iCACF,CAEA,aACE,WA4BF,CAxBE,kHAIE,gBAAiB,CADjB,iBAQF,CALE,odAGE,aACF,CAGF,sCACE,mGACF,CAEA,sCACE,qGACF,CAEA,sCACE,mGACF","file":"layout.css","sourcesContent":["/* Layout */\n\n@define-mixin flow-as-row {\n grid-auto-flow: row;\n grid-template-columns: 1fr !important;\n\n & .Layout-sidebar,\n & .Layout-divider,\n & .Layout-main {\n width: 100% !important;\n grid-column: 1 !important;\n }\n\n &.Layout--sidebarPosition-flowRow-start {\n & .Layout-sidebar {\n grid-row: 1;\n }\n\n & .Layout-main {\n grid-row: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 2 / span 2;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n\n &.Layout--sidebarPosition-flowRow-none {\n & .Layout-sidebar {\n display: none;\n }\n }\n\n &.Layout--divided {\n @mixin flow-as-row-divider;\n\n & .Layout-main {\n grid-row: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-flowRow-end {\n & .Layout-sidebar {\n grid-row: 3 / span 1;\n }\n\n & .Layout-main {\n grid-row: 1;\n }\n }\n }\n}\n\n@define-mixin flow-as-row-divider {\n --Layout-gutter: 0;\n\n & .Layout-divider {\n height: 1px;\n grid-row: 2;\n\n &.Layout-divider--flowRow-hidden {\n display: none;\n }\n\n &.Layout-divider--flowRow-shallow {\n height: 8px;\n margin-right: 0;\n background: var(--bgColor-inset);\n border-color: var(--borderColor-default);\n border-style: solid;\n border-width: var(--borderWidth-thin) 0;\n }\n }\n}\n\n.Layout {\n display: grid;\n\n --Layout-sidebar-width: 220px;\n --Layout-gutter: 16px;\n\n @media (max-width: calc(544px - 0.02px)) {\n @mixin flow-as-row;\n }\n\n &.Layout--flowRow-until-md {\n @media (max-width: calc(768px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n &.Layout--flowRow-until-lg {\n @media (max-width: calc(1012px - 0.02px)) {\n @mixin flow-as-row;\n }\n }\n\n /* Flow as column */\n\n grid-auto-flow: column;\n grid-template-columns: auto 0 minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))); /* sidebar column, separator, main column */\n grid-gap: var(--Layout-gutter);\n\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-divider {\n display: none;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n\n /* Gutter spacing */\n\n @media (min-width: 1012px) {\n --Layout-gutter: 24px;\n }\n\n &.Layout--gutter-none {\n /* stylelint-disable-next-line length-zero-no-unit */\n --Layout-gutter: 0px; /* Neds px in value */\n }\n\n &.Layout--gutter-condensed {\n --Layout-gutter: 16px;\n }\n\n &.Layout--gutter-spacious {\n @media (min-width: 1012px) {\n --Layout-gutter: 32px;\n }\n\n @media (min-width: 1280px) {\n --Layout-gutter: 40px;\n }\n }\n\n /* Sidebar width */\n @media (min-width: 544px) {\n --Layout-sidebar-width: 220px;\n }\n\n @media (min-width: 768px) {\n --Layout-sidebar-width: 256px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 296px;\n }\n\n &.Layout--sidebar-narrow {\n @media (min-width: 768px) {\n --Layout-sidebar-width: 240px;\n }\n\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 256px;\n }\n }\n\n &.Layout--sidebar-wide {\n @media (min-width: 1012px) {\n --Layout-sidebar-width: 320px;\n }\n\n @media (min-width: 1280px) {\n --Layout-sidebar-width: 336px;\n }\n }\n\n /* Sidebar position */\n\n &.Layout--sidebarPosition-start {\n & .Layout-sidebar {\n grid-column: 1;\n }\n\n & .Layout-main {\n grid-column: 2 / span 2;\n }\n }\n\n &.Layout--sidebarPosition-end {\n grid-template-columns: minmax(0, calc(100% - var(--Layout-sidebar-width) - var(--Layout-gutter))) 0 auto;\n\n & .Layout-main {\n grid-column: 1;\n }\n\n & .Layout-sidebar {\n grid-column: 2 / span 2;\n }\n }\n\n /* Sidebar divider */\n\n &.Layout--divided {\n & .Layout-divider {\n display: block;\n grid-column: 2;\n width: 1px;\n margin-right: -1px;\n background: var(--borderColor-default);\n }\n\n & .Layout-main {\n grid-column: 3 / span 1;\n }\n\n &.Layout--sidebarPosition-end {\n & .Layout-sidebar {\n grid-column: 3 / span 1;\n }\n\n & .Layout-main {\n grid-column: 1;\n }\n }\n }\n}\n\n.Layout-divider {\n display: none;\n width: 1px;\n}\n\n.Layout-sidebar {\n width: var(--Layout-sidebar-width);\n}\n\n.Layout-main {\n min-width: 0;\n\n /* Centered main column\n ** FIXME: right-aligned sidebar */\n & .Layout-main-centered-md,\n & .Layout-main-centered-lg,\n & .Layout-main-centered-xl {\n margin-right: auto;\n margin-left: auto;\n\n & > .container-md,\n & > .container-lg,\n & > .container-xl {\n margin-left: 0;\n }\n }\n\n & .Layout-main-centered-md {\n max-width: calc(var(--breakpoint-medium) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-lg {\n max-width: calc(var(--breakpoint-large) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n\n & .Layout-main-centered-xl {\n max-width: calc(var(--breakpoint-xlarge) + var(--Layout-sidebar-width) + var(--Layout-gutter));\n }\n}\n"]}
|
|
@@ -70,7 +70,7 @@
|
|
|
70
70
|
&.Layout-divider--flowRow-shallow {
|
|
71
71
|
height: 8px;
|
|
72
72
|
margin-right: 0;
|
|
73
|
-
background: var(--bgColor-
|
|
73
|
+
background: var(--bgColor-inset);
|
|
74
74
|
border-color: var(--borderColor-default);
|
|
75
75
|
border-style: solid;
|
|
76
76
|
border-width: var(--borderWidth-thin) 0;
|
|
@@ -79,124 +79,6 @@ module Primer
|
|
|
79
79
|
Primer::Alpha::Layout::Sidebar.new(**system_arguments)
|
|
80
80
|
}
|
|
81
81
|
|
|
82
|
-
# @example Default
|
|
83
|
-
#
|
|
84
|
-
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
85
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
86
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
87
|
-
# <% end %>
|
|
88
|
-
#
|
|
89
|
-
# @example Main widths
|
|
90
|
-
#
|
|
91
|
-
# @description
|
|
92
|
-
# When `full`, the main column will stretch to cover all the available width.
|
|
93
|
-
# Otherwise, the main column will try to be centered in the screen; it may appear aligned to the left when there isn't enough space.
|
|
94
|
-
#
|
|
95
|
-
# Use smaller maximum widths in the main column to facilitate interface scanning and reading.
|
|
96
|
-
#
|
|
97
|
-
# When flowing as a row, `Main` takes the full width.
|
|
98
|
-
#
|
|
99
|
-
# @code
|
|
100
|
-
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
101
|
-
# <% component.with_main(width: :full, border: true) { "Main" } %>
|
|
102
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
103
|
-
# <% end %>
|
|
104
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
105
|
-
# <% component.with_main(width: :md, border: true) { "Main" } %>
|
|
106
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
107
|
-
# <% end %>
|
|
108
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
109
|
-
# <% component.with_main(width: :lg, border: true) { "Main" } %>
|
|
110
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
111
|
-
# <% end %>
|
|
112
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
113
|
-
# <% component.with_main(width: :xl, border: true) { "Main" } %>
|
|
114
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
115
|
-
# <% end %>
|
|
116
|
-
#
|
|
117
|
-
# @example Sidebar widths
|
|
118
|
-
#
|
|
119
|
-
# @description
|
|
120
|
-
# Sets the sidebar width. The width is predetermined according to the breakpoint instead of it being percentage-based.
|
|
121
|
-
#
|
|
122
|
-
# - `default`: [md: 256px, lg: 296px, xl: 320px]
|
|
123
|
-
# - `narrow`: [md: 240px, lg: 256px, xl: 296px]
|
|
124
|
-
# - `wide`: [md: 296px, lg: 320px, xl: 344px]
|
|
125
|
-
#
|
|
126
|
-
# When flowing as a row, `Sidebar` takes the full width.
|
|
127
|
-
#
|
|
128
|
-
# @code
|
|
129
|
-
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
130
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
131
|
-
# <% component.with_sidebar(width: :default, border: true) { "Sidebar" } %>
|
|
132
|
-
# <% end %>
|
|
133
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
134
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
135
|
-
# <% component.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
|
|
136
|
-
# <% end %>
|
|
137
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
138
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
139
|
-
# <% component.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
|
|
140
|
-
# <% end %>
|
|
141
|
-
#
|
|
142
|
-
# @example Sidebar placement
|
|
143
|
-
#
|
|
144
|
-
# @description
|
|
145
|
-
# Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
|
|
146
|
-
#
|
|
147
|
-
# @code
|
|
148
|
-
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
149
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
150
|
-
# <% component.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
|
|
151
|
-
# <% end %>
|
|
152
|
-
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |component| %>
|
|
153
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
154
|
-
# <% component.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
|
|
155
|
-
# <% end %>
|
|
156
|
-
#
|
|
157
|
-
# @example Sidebar placement as row
|
|
158
|
-
#
|
|
159
|
-
# @description
|
|
160
|
-
# When flowing as a row, whether the sidebar is rendered first or last in the layout, or, if it's entirely hidden from the user.
|
|
161
|
-
#
|
|
162
|
-
# When `hidden`, make sure the experience is not degraded on smaller screens, and the user can still access the sidebar content somehow.
|
|
163
|
-
# For instance, the user may not see a Settings navigation sidebar when drilled down on a page, but they can still navigate to the Settings
|
|
164
|
-
# landing page to interact with the local navigation.
|
|
165
|
-
#
|
|
166
|
-
# @code
|
|
167
|
-
# <%= render(Primer::Alpha::Layout.new) do |component| %>
|
|
168
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
169
|
-
# <% component.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
|
|
170
|
-
# <% end %>
|
|
171
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
172
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
173
|
-
# <% component.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
|
|
174
|
-
# <% end %>
|
|
175
|
-
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
|
|
176
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
177
|
-
# <% component.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
|
|
178
|
-
# <% end %>
|
|
179
|
-
#
|
|
180
|
-
# @example Changing when to render `Layout` as columns
|
|
181
|
-
#
|
|
182
|
-
# @description
|
|
183
|
-
# You can specify when the `Layout` should change from rows into columns.
|
|
184
|
-
# Any screen size before this breakpoint will render the `Layout` in stacked rows.
|
|
185
|
-
#
|
|
186
|
-
# @code
|
|
187
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component| %>
|
|
188
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
189
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
190
|
-
# <% end %>
|
|
191
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |component| %>
|
|
192
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
193
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
194
|
-
# <% end %>
|
|
195
|
-
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |component| %>
|
|
196
|
-
# <% component.with_main(border: true) { "Main" } %>
|
|
197
|
-
# <% component.with_sidebar(border: true) { "Sidebar" } %>
|
|
198
|
-
# <% end %>
|
|
199
|
-
#
|
|
200
82
|
# @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
|
|
201
83
|
# @param first_in_source [Symbol] Which element to render first in the HTML. This will change the keyboard navigation order. <%= one_of(Primer::Alpha::Layout::FIRST_IN_SOURCE_OPTIONS) %>
|
|
202
84
|
# @param gutter [Symbol] The amount of space between the main section and the sidebar. <%= one_of(Primer::Alpha::Layout::GUTTER_OPTIONS) %>
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.menu{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium
|
|
1
|
+
.menu{background-color:var(--bgColor-default,var(--color-canvas-default));border:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem);list-style:none;margin-bottom:var(--stack-gap-normal,1rem)}.menu-item{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem);position:relative}.menu-item:first-child{border-top:0;border-top-right-radius:var(--borderRadius-medium,.375rem)}.menu-item:first-child,.menu-item:first-child:before{border-top-left-radius:var(--borderRadius-medium,.375rem)}.menu-item:last-child{border-bottom:0;border-bottom-right-radius:var(--borderRadius-medium,.375rem)}.menu-item:last-child,.menu-item:last-child:before{border-bottom-left-radius:var(--borderRadius-medium,.375rem)}.menu-item:hover{background-color:var(--bgColor-neutral-muted,var(--color-neutral-subtle));text-decoration:none}.menu-item:active{background-color:var(--bgColor-muted,var(--color-canvas-subtle))}.menu-item.selected,.menu-item[aria-current]:not([aria-current=false]),.menu-item[aria-selected=true]{background-color:var(--menu-bgColor-active,var(--color-menu-bg-active));cursor:default}.menu-item.selected:before,.menu-item[aria-current]:not([aria-current=false]):before,.menu-item[aria-selected=true]:before{background-color:var(--underlineNav-borderColor-active,var(--color-primer-border-active));bottom:0;content:"";left:0;position:absolute;top:0;width:2px}.menu-item .octicon{color:var(--fgColor-muted,var(--color-fg-muted));margin-right:var(--control-medium-gap,.5rem);text-align:center;width:16px}.menu-item .Counter{float:right;margin-left:var(--control-small-gap,.25rem)}.menu-item .menu-warning{color:var(--fgColor-attention,var(--color-attention-fg));float:right}.menu-item .avatar{float:left;margin-right:var(--control-small-gap,.25rem)}.menu-item.alert .Counter{color:var(--fgColor-danger,var(--color-danger-fg))}.menu-heading{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));color:var(--fgColor-default,var(--color-fg-default));display:block;font-size:inherit;font-weight:var(--base-text-weight-semibold,600);margin-bottom:0;margin-top:0;padding:var(--control-medium-paddingInline-condensed,.5rem) var(--control-medium-paddingInline-spacious,1rem)}.menu-heading:hover{text-decoration:none}.menu-heading:first-child{border-top-left-radius:var(--borderRadius-medium,.375rem);border-top-right-radius:var(--borderRadius-medium,.375rem)}.menu-heading:last-child{border-bottom:0;border-bottom-left-radius:var(--borderRadius-medium,.375rem);border-bottom-right-radius:var(--borderRadius-medium,.375rem)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,mEAAwC,CACxC,6GAAgE,CAChE,
|
|
1
|
+
{"version":3,"sources":["menu.pcss"],"names":[],"mappings":"AAIA,MAGE,mEAAwC,CACxC,6GAAgE,CAChE,gDAAyC,CAHzC,eAAgB,CADhB,0CAKF,CAEA,WAKE,oHAAuE,CADvE,oDAA6B,CAF7B,aAAc,CACd,6GAAmG,CAFnG,iBA+EF,CAzEE,uBACE,YAAa,CAEb,0DAKF,CAHE,qDAHA,yDAKA,CAGF,sBACE,eAAgB,CAChB,6DAMF,CAHE,mDAFA,4DAIA,CAGF,iBAEE,yEAA8C,CAD9C,oBAEF,CAEA,kBACE,gEACF,CAEA,sGAIE,uEAA4C,CAD5C,cAYF,CATE,2HAOE,yFAAwD,CAJxD,QAAS,CAGT,UAAW,CAFX,MAAO,CAHP,iBAAkB,CAClB,KAAM,CAGN,SAGF,CAGF,oBAGE,gDAA2B,CAD3B,4CAAuC,CAEvC,iBAAkB,CAHlB,UAIF,CAEA,oBACE,WAAY,CACZ,2CACF,CAEA,yBAEE,wDAA+B,CAD/B,WAEF,CAEA,mBACE,UAAW,CACX,4CACF,CAGE,0BACE,kDACF,CAIJ,cAQE,oHAAuE,CADvE,oDAA6B,CAN7B,aAAc,CAId,iBAAkB,CAClB,gDAA6C,CAF7C,eAAgB,CADhB,YAAa,CADb,6GAsBF,CAdE,oBACE,oBACF,CAEA,0BACE,yDAAkD,CAClD,0DACF,CAEA,yBACE,eAAgB,CAEhB,4DAAqD,CADrD,6DAEF","file":"menu.css","sourcesContent":["/* menu */\n\n/* A menu on the side of a page, defaults to left side. e.g. github.com/about */\n\n.menu {\n margin-bottom: var(--stack-gap-normal);\n list-style: none;\n background-color: var(--bgColor-default);\n border: var(--borderWidth-thin) solid var(--borderColor-default);\n border-radius: var(--borderRadius-medium);\n}\n\n.menu-item {\n position: relative;\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:first-child {\n border-top: 0;\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n\n &::before {\n border-top-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n\n &::before {\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n }\n\n &:hover {\n text-decoration: none;\n background-color: var(--bgColor-neutral-muted);\n }\n\n &:active {\n background-color: var(--bgColor-muted);\n }\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n cursor: default;\n background-color: var(--menu-bgColor-active);\n\n &::before {\n position: absolute;\n top: 0;\n bottom: 0;\n left: 0;\n width: 2px;\n content: '';\n background-color: var(--underlineNav-borderColor-active);\n }\n }\n\n & .octicon {\n width: 16px;\n margin-right: var(--control-medium-gap);\n color: var(--fgColor-muted);\n text-align: center;\n }\n\n & .Counter {\n float: right;\n margin-left: var(--control-small-gap);\n }\n\n & .menu-warning {\n float: right;\n color: var(--fgColor-attention);\n }\n\n & .avatar {\n float: left;\n margin-right: var(--control-small-gap);\n }\n\n &.alert {\n & .Counter {\n color: var(--fgColor-danger);\n }\n }\n}\n\n.menu-heading {\n display: block;\n padding: var(--control-medium-paddingInline-condensed) var(--control-medium-paddingInline-spacious);\n margin-top: 0;\n margin-bottom: 0;\n font-size: inherit;\n font-weight: var(--base-text-weight-semibold);\n color: var(--fgColor-default);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n\n &:hover {\n text-decoration: none;\n }\n\n &:first-child {\n border-top-left-radius: var(--borderRadius-medium);\n border-top-right-radius: var(--borderRadius-medium);\n }\n\n &:last-child {\n border-bottom: 0;\n border-bottom-right-radius: var(--borderRadius-medium);\n border-bottom-left-radius: var(--borderRadius-medium);\n }\n}\n"]}
|
|
@@ -39,25 +39,6 @@ module Primer
|
|
|
39
39
|
Primer::BaseComponent.new(**system_arguments)
|
|
40
40
|
}
|
|
41
41
|
|
|
42
|
-
# @example Default
|
|
43
|
-
# <%= render(Primer::Alpha::Menu.new) do |component| %>
|
|
44
|
-
# <% component.with_heading(tag: :h2) do %>
|
|
45
|
-
# Heading
|
|
46
|
-
# <% end %>
|
|
47
|
-
# <% component.with_item(selected: true, href: "#url") do %>
|
|
48
|
-
# Item 1
|
|
49
|
-
# <% end %>
|
|
50
|
-
# <% component.with_item(href: "#url") do %>
|
|
51
|
-
# <%= render(Primer::Beta::Octicon.new("check")) %>
|
|
52
|
-
# With Icon
|
|
53
|
-
# <% end %>
|
|
54
|
-
# <% component.with_item(href: "#url") do %>
|
|
55
|
-
# <%= render(Primer::Beta::Octicon.new("check")) %>
|
|
56
|
-
# With Icon and Counter
|
|
57
|
-
# <%= render(Primer::Beta::Counter.new(count: 25)) %>
|
|
58
|
-
# <% end %>
|
|
59
|
-
# <% end %>
|
|
60
|
-
#
|
|
61
42
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
62
43
|
def initialize(**system_arguments)
|
|
63
44
|
@system_arguments = deny_tag_argument(**system_arguments)
|
|
@@ -42,39 +42,6 @@ module Primer
|
|
|
42
42
|
|
|
43
43
|
# @!method initialize
|
|
44
44
|
#
|
|
45
|
-
# @example Default
|
|
46
|
-
# <%= render(Primer::Alpha::Select.new(name: :dietary_pref, label: "Dietary preference")) do |c| %>
|
|
47
|
-
# <% c.option(label: "Meatatarian", value: "meatatarian") %>
|
|
48
|
-
# <% c.option(label: "Vegetarian", value: "vegetarian") %>
|
|
49
|
-
# <% end %>
|
|
50
|
-
#
|
|
51
|
-
# <%= render(Primer::Alpha::MultiInput.new(name: :dish, label: "Select dish")) do |c| %>
|
|
52
|
-
# <% c.select_list(name: :meatatarian) do |list| %>
|
|
53
|
-
# <% list.option(label: "Steak", value: "steak") %>
|
|
54
|
-
# <% list.option(label: "Salmon", value: "salmon") %>
|
|
55
|
-
# <% end %>
|
|
56
|
-
# <% c.select_list(name: :vegetarian, hidden: true) do |list| %>
|
|
57
|
-
# <% list.option(label: "Portobello mushroom", value: "portobello") %>
|
|
58
|
-
# <% list.option(label: "Tofu curry", value: "tofu") %>
|
|
59
|
-
# <% end %>
|
|
60
|
-
# <% end %>
|
|
61
|
-
#
|
|
62
|
-
# <script type="text/javascript" data-eval="true">
|
|
63
|
-
# const dietaryPrefList = document.querySelector("[name=dietary_pref]");
|
|
64
|
-
# const dishMulti = document.querySelector("[data-name=dish]");
|
|
65
|
-
#
|
|
66
|
-
# dietaryPrefList.onchange = (evt) => {
|
|
67
|
-
# switch (evt.target.value) {
|
|
68
|
-
# case 'meatatarian':
|
|
69
|
-
# dishMulti.activateField('meatatarian');
|
|
70
|
-
# break;
|
|
71
|
-
# case 'vegetarian':
|
|
72
|
-
# dishMulti.activateField('vegetarian');
|
|
73
|
-
# break;
|
|
74
|
-
# }
|
|
75
|
-
# };
|
|
76
|
-
# </script>
|
|
77
|
-
#
|
|
78
45
|
# @macro form_input_arguments
|
|
79
46
|
end
|
|
80
47
|
end
|