openproject-primer_view_components 0.6.3 → 0.7.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 +28 -0
- data/README.md +13 -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 -7
- data/app/components/primer/alpha/action_list.css +1 -1
- data/app/components/primer/alpha/action_list.css.map +1 -1
- 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 +0 -17
- 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.map +1 -1
- data/app/components/primer/beta/button.pcss +2 -2
- data/app/components/primer/beta/button.rb +0 -42
- 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.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/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/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/view_components/linters/migrations/truncate_component.rb +45 -0
- data/lib/primer/view_components/linters.rb +1 -0
- data/lib/primer/view_components/version.rb +2 -2
- data/lib/primer/yard.rb +8 -9
- data/static/arguments.json +12 -1
- data/static/info_arch.json +18 -1
- metadata +3 -3
- data/lib/primer/yard/legacy_gatsby_backend.rb +0 -233
|
@@ -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
|
|
@@ -99,75 +99,6 @@ module Primer
|
|
|
99
99
|
}
|
|
100
100
|
}
|
|
101
101
|
|
|
102
|
-
# @example Items and headings
|
|
103
|
-
#
|
|
104
|
-
# <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :personal_info)) do |component| %>
|
|
105
|
-
# <% component.with_item(label: "General", selected_by_ids: :general, href: "/settings/general") %>
|
|
106
|
-
# <% component.with_group do |group| %>
|
|
107
|
-
# <% group.with_heading(title: "Account Settings") %>
|
|
108
|
-
# <% group.with_item(label: "Personal Information", selected_by_ids: :personal_info, href: "/account/info") %>
|
|
109
|
-
# <% group.with_item(label: "Password", selected_by_ids: :password, href: "/account/password") %>
|
|
110
|
-
# <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") %>
|
|
111
|
-
# <% end %>
|
|
112
|
-
# <% end %>
|
|
113
|
-
#
|
|
114
|
-
# @example Leading and trailing visuals
|
|
115
|
-
#
|
|
116
|
-
# <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :personal_info)) do |component| %>
|
|
117
|
-
# <% component.with_group do |group| %>
|
|
118
|
-
# <% group.with_heading(title: "Account Settings") %>
|
|
119
|
-
# <% group.with_avatar_item(src: "https://github.com/github.png", username: "person", selected_by_ids: :personal_info, href: "/account/info") %>
|
|
120
|
-
# <% group.with_item(label: "Notifications", selected_by_ids: :notifications, href: "/account/notifications") do |item| %>
|
|
121
|
-
# <% item.with_leading_visual_icon(icon: :bell) %>
|
|
122
|
-
# <% item.with_trailing_visual_counter(count: 15) %>
|
|
123
|
-
# <% end %>
|
|
124
|
-
# <% group.with_item(label: "Billing info", selected_by_ids: :billing, href: "/account/billing") do |item| %>
|
|
125
|
-
# <% item.with_leading_visual_icon(icon: :package) %>
|
|
126
|
-
# <% item.with_trailing_visual_icon(icon: :"dot-fill", color: :attention) %>
|
|
127
|
-
# <% end %>
|
|
128
|
-
# <% end %>
|
|
129
|
-
# <% end %>
|
|
130
|
-
#
|
|
131
|
-
# @example Expandable sub items
|
|
132
|
-
#
|
|
133
|
-
# <%= render(Primer::Alpha::NavList.new(aria: { label: "Settings" }, selected_item_id: :email_notifications)) do |component| %>
|
|
134
|
-
# <% component.with_group do |group| %>
|
|
135
|
-
# <% group.with_heading(title: "Account Settings") %>
|
|
136
|
-
# <% group.with_item(label: "Notification settings") do |item| %>
|
|
137
|
-
# <% item.with_leading_visual_icon(icon: :bell) %>
|
|
138
|
-
# <% item.with_item(label: "Email", selected_by_ids: :email_notifications, href: "/account/notifications/email") do |subitem| %>
|
|
139
|
-
# <% subitem.with_trailing_visual_icon(icon: :mail) %>
|
|
140
|
-
# <% end %>
|
|
141
|
-
# <% item.with_item(label: "SMS", selected_by_ids: :sms_notifications, href: "/account/notifications/sms") do |subitem| %>
|
|
142
|
-
# <% subitem.with_trailing_visual_icon(icon: :"device-mobile") %>
|
|
143
|
-
# <% end %>
|
|
144
|
-
# <% end %>
|
|
145
|
-
# <% group.with_item(label: "Messages") do |item| %>
|
|
146
|
-
# <% item.with_leading_visual_icon(icon: :bookmark) %>
|
|
147
|
-
# <% item.with_item(label: "Inbox", href: "/account/messages/inbox") do |subitem| %>
|
|
148
|
-
# <% subitem.with_trailing_visual_counter(count: 10) %>
|
|
149
|
-
# <% end %>
|
|
150
|
-
# <% item.with_item(label: "Organizer", href: "/account/messages/organizer") do |subitem| %>
|
|
151
|
-
# <% subitem.with_trailing_visual_label(scheme: :primary) { "New" } %>
|
|
152
|
-
# <% end %>
|
|
153
|
-
# <% end %>
|
|
154
|
-
# <% end %>
|
|
155
|
-
# <% end %>
|
|
156
|
-
#
|
|
157
|
-
# @example Trailing action
|
|
158
|
-
#
|
|
159
|
-
# <%= render(Primer::Alpha::NavList.new(aria: { label: "Foods" })) do |component| %>
|
|
160
|
-
# <% component.with_group do |group| %>
|
|
161
|
-
# <% group.with_heading(title: "My Favorite Foods") %>
|
|
162
|
-
# <% group.with_item(label: "Popplers", selected_by_ids: :popplers, href: "/foods/popplers") do |item| %>
|
|
163
|
-
# <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
|
|
164
|
-
# <% end %>
|
|
165
|
-
# <% group.with_item(label: "Slurm", selected_by_ids: :slurm, href: "/foods/slurm") do |item| %>
|
|
166
|
-
# <% item.with_trailing_action(icon: "plus", "aria-label": "Add new food", size: :medium) %>
|
|
167
|
-
# <% end %>
|
|
168
|
-
# <% end %>
|
|
169
|
-
# <% end %>
|
|
170
|
-
#
|
|
171
102
|
# @param selected_item_id [Symbol] The ID of the currently selected item. The default is `nil`, meaning no item is selected.
|
|
172
103
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
173
104
|
def initialize(selected_item_id: nil, **system_arguments)
|
|
@@ -65,41 +65,6 @@ module Primer
|
|
|
65
65
|
|
|
66
66
|
attr_reader :selected
|
|
67
67
|
|
|
68
|
-
# @example Default
|
|
69
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new(selected: true)) do |component| %>
|
|
70
|
-
# <% component.with_text { "Selected" } %>
|
|
71
|
-
# <% end %>
|
|
72
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
73
|
-
# <% component.with_text { "Not selected" } %>
|
|
74
|
-
# <% end %>
|
|
75
|
-
#
|
|
76
|
-
# @example With icons and counters
|
|
77
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
78
|
-
# <% component.with_icon(:star) %>
|
|
79
|
-
# <% component.with_text { "Tab" } %>
|
|
80
|
-
# <% end %>
|
|
81
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
82
|
-
# <% component.with_icon(:star) %>
|
|
83
|
-
# <% component.with_text { "Tab" } %>
|
|
84
|
-
# <% component.with_counter(count: 10) %>
|
|
85
|
-
# <% end %>
|
|
86
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new) do |component| %>
|
|
87
|
-
# <% component.with_text { "Tab" } %>
|
|
88
|
-
# <% component.with_counter(count: 10) %>
|
|
89
|
-
# <% end %>
|
|
90
|
-
#
|
|
91
|
-
# @example Inside a list
|
|
92
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new(list: true)) do |component| %>
|
|
93
|
-
# <% component.with_text { "Tab" } %>
|
|
94
|
-
# <% end %>
|
|
95
|
-
#
|
|
96
|
-
# @example With custom HTML
|
|
97
|
-
# <%= render(Primer::Alpha::Navigation::Tab.new) do %>
|
|
98
|
-
# <div>
|
|
99
|
-
# This is my <strong>custom HTML</strong>
|
|
100
|
-
# </div>
|
|
101
|
-
# <% end %>
|
|
102
|
-
#
|
|
103
68
|
# @param list [Boolean] Whether the Tab is an item in a `<ul>` list.
|
|
104
69
|
# @param selected [Boolean] Whether the Tab is selected or not.
|
|
105
70
|
# @param with_panel [Boolean] Whether the Tab has an associated panel.
|
|
@@ -6,12 +6,6 @@ module Primer
|
|
|
6
6
|
module Alpha
|
|
7
7
|
# OcticonSymbols renders a symbol dictionary using a list of <%= link_to_octicons %>.
|
|
8
8
|
class OcticonSymbols < Primer::Component
|
|
9
|
-
# @example Symbol dictionary
|
|
10
|
-
# <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :success)) %>
|
|
11
|
-
# <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, color: :danger)) %>
|
|
12
|
-
# <%= render(Primer::Beta::Octicon.new(icon: :check, use_symbol: true, size: :medium)) %>
|
|
13
|
-
# <%= render(Primer::Alpha::OcticonSymbols.new(icons: [{ symbol: :check }, { symbol: :check, size: :medium }])) %>
|
|
14
|
-
#
|
|
15
9
|
# @param icons [Array<Hash>] List of icons to render, in the format { symbol: :icon_name, size: :small }
|
|
16
10
|
def initialize(icons: [])
|
|
17
11
|
@icons = {}
|
|
@@ -122,20 +122,6 @@ module Primer
|
|
|
122
122
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
123
123
|
renders_one :footer, "Footer"
|
|
124
124
|
|
|
125
|
-
# @example Overlay with Cancel and Submit buttons
|
|
126
|
-
# @description
|
|
127
|
-
# An ID is provided which enables wiring of the open and close buttons to the Overlay.
|
|
128
|
-
# @code
|
|
129
|
-
# <%= render(Primer::Alpha::Overlay.new(
|
|
130
|
-
# title: "Overlay Example",
|
|
131
|
-
# id: "my-Overlay",
|
|
132
|
-
# role: :dialog,
|
|
133
|
-
# )) do |d| %>
|
|
134
|
-
# <% d.with_show_button { "Show Overlay" } %>
|
|
135
|
-
# <% d.with_body do %>
|
|
136
|
-
# <p>Some content</p>
|
|
137
|
-
# <% end %>
|
|
138
|
-
# <% end %>
|
|
139
125
|
# @param id [String] The id of the Overlay.
|
|
140
126
|
# @param title [String] Describes the content of the Overlay.
|
|
141
127
|
# @param subtitle [String] Provides dditional context for the Overlay, also setting the `aria-describedby` attribute.
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium
|
|
1
|
+
.SegmentedControl{background-color:var(--controlTrack-bgColor-rest,var(--color-segmented-control-bg));border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;list-style:none}.SegmentedControl-item{border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-radius:var(--borderRadius-medium,.375rem);display:inline-flex;padding:var(--control-xsmall-paddingInline-condensed,.25rem);position:relative}.SegmentedControl-item .Button--invisible:hover:not(:disabled){background-color:var(--controlTrack-bgColor-hover,var(--color-action-list-item-default-hover-bg))}.SegmentedControl-item .Button--invisible:active:not(:disabled){background-color:var(--controlTrack-bgColor-active,var(--color-action-list-item-default-active-bg))}.SegmentedControl-item.SegmentedControl-item--selected{background-color:var(--controlKnob-bgColor-rest,var(--color-segmented-control-button-bg));border-color:var(--controlKnob-borderColor-rest,var(--color-segmented-control-button-selected-border))}.SegmentedControl-item.SegmentedControl-item--selected .Button{font-weight:var(--base-text-weight-semibold,600)}.SegmentedControl-item.SegmentedControl-item--selected .Button:hover{background-color:initial}.SegmentedControl-item.SegmentedControl-item--selected:before{border-color:#0000!important}.SegmentedControl-item.SegmentedControl-item--selected+.SegmentedControl-item:before{border-color:#0000}.SegmentedControl-item .Button-label[data-content]:before{content:attr(data-content);display:block;font-weight:var(--base-text-weight-semibold,600);height:0;visibility:hidden}.SegmentedControl-item:not(:first-child):before{border-left:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));content:"";inset:0 0 0 -1px;margin-bottom:var(--control-medium-paddingBlock,.375rem);margin-top:var(--control-medium-paddingBlock,.375rem);position:absolute}.SegmentedControl-item .Button{border:0;color:var(--button-default-fgColor-rest,var(--color-btn-text));font-weight:var(--base-text-weight-normal,400);transition:none}.SegmentedControl-item .Button:focus-visible{border-radius:calc(var(--borderRadius-medium,.375rem) - 5px);outline-offset:calc(var(--control-xsmall-paddingInline-condensed,.25rem) - var(--borderWidth-thin,max(1px, .0625rem)))}.SegmentedControl-item .Button--small{height:calc(var(--control-small-size,1.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-small-paddingInline-condensed,.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--small.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--small.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--medium{height:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-medium-paddingInline-normal,.75rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--medium.Button--iconOnly{width:calc(var(--control-medium-size,2rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--medium.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-medium-size,2rem);min-width:var(--control-medium-size,2rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--large{height:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2);padding:0 calc(var(--control-large-paddingInline-spacious,1rem) - var(--control-xsmall-paddingInline-condensed,.25rem))}.SegmentedControl-item .Button--large.Button--iconOnly{width:calc(var(--control-large-size,2.5rem) - var(--control-xsmall-paddingInline-condensed,.25rem)*2 - var(--borderWidth-thin,max(1px, .0625rem))*2)}.SegmentedControl-item .Button--large.Button--iconOnly:before{content:"";height:100%;left:50%;min-height:var(--control-large-size,2.5rem);min-width:var(--control-large-size,2.5rem);position:absolute;top:50%;transform:translateX(-50%) translateY(-50%);width:100%}.SegmentedControl-item .Button--iconOnly{padding:initial}.SegmentedControl-item .Button--invisible.Button--invisible-noVisuals .Button-label{color:var(--button-default-fgColor-rest,var(--color-btn-text))}.SegmentedControl--fullWidth{display:flex}.SegmentedControl--fullWidth .SegmentedControl-item{flex:1;justify-content:center}.SegmentedControl--fullWidth .Button--iconOnly,.SegmentedControl--fullWidth .Button-withTooltip{width:100%}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,
|
|
1
|
+
{"version":3,"sources":["segmented_control.pcss","<no source>"],"names":[],"mappings":"AAEA,kBAGE,mFAAqF,CACrF,gDAAyC,CAHzC,mBAAoB,CACpB,eAGF,CAEA,uBAGE,4DAAiD,CACjD,gDAAyC,CAFzC,mBAAoB,CAGpB,4DAAsD,CAJtD,iBAkIF,CA3HI,+DACE,iGACF,CAEA,gEACE,mGACF,CAIF,uDACE,yFAA2F,CAC3F,sGAiBF,CAfE,+DACE,gDAKF,CAHE,qEACE,wBACF,CAGF,8DACE,4BACF,CAEA,qFACE,kBACF,CAIF,0DAKE,0BAA2B,CAJ3B,aAAc,CAEd,gDAA6C,CAD7C,QAAS,CAET,iBAEF,CAIE,gDAME,kHAAqE,CADrE,UAAW,CAHX,gBAAiB,CAEjB,wDAAiD,CADjD,qDAA8C,CAF9C,iBAMF,CAIF,+BACE,QAAS,CAGT,8DAAyC,CAFzC,8CAA2C,CAC3C,eAOF,CAJE,6CAEE,4DAAqD,CADrD,sHAEF,CAGF,sCACE,sJAEC,CACD,yHAWF,CATE,uDACE,mJAOF,CAFI,8DC9FR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD8FoF,CAKlF,uCACE,oJAEC,CACD,wHAWF,CATE,wDACE,mJAOF,CAFI,+DC/GR,WAAA,YAAA,SAAA,2CAAA,0CAAA,kBAAA,QAAA,4CAAA,UD+GoF,CAKlF,sCACE,qJAEC,CACD,uHAWF,CATE,uDACE,oJAOF,CAFI,8DChIR,WAAA,YAAA,SAAA,4CAAA,2CAAA,kBAAA,QAAA,4CAAA,UDgIkF,CAKhF,yCACE,eACF,CAEA,oFACE,8DACF,CAIF,6BACE,YAYF,CAVE,oDACE,MAAO,CACP,sBACF,CAGA,gGAEE,UACF","file":"segmented_control.css","sourcesContent":["/* SegmentedControl */\n\n.SegmentedControl {\n display: inline-flex;\n list-style: none;\n background-color: var(--controlTrack-bgColor-rest, var(--color-segmented-control-bg));\n border-radius: var(--borderRadius-medium);\n}\n\n.SegmentedControl-item {\n position: relative;\n display: inline-flex;\n border: var(--borderWidth-thin) solid transparent;\n border-radius: var(--borderRadius-medium);\n padding: var(--control-xsmall-paddingInline-condensed);\n\n & .Button--invisible {\n &:hover:not(:disabled) {\n background-color: var(--controlTrack-bgColor-hover, var(--color-action-list-item-default-hover-bg));\n }\n\n &:active:not(:disabled) {\n background-color: var(--controlTrack-bgColor-active, var(--color-action-list-item-default-active-bg));\n }\n }\n\n /* Selected ---------------------------------------- */\n &.SegmentedControl-item--selected {\n background-color: var(--controlKnob-bgColor-rest, var(--color-segmented-control-button-bg));\n border-color: var(--controlKnob-borderColor-rest, var(--color-segmented-control-button-selected-border));\n\n & .Button {\n font-weight: var(--base-text-weight-semibold);\n\n &:hover {\n background-color: transparent;\n }\n }\n\n &::before {\n border-color: transparent !important;\n }\n\n & + .SegmentedControl-item::before {\n border-color: transparent;\n }\n }\n\n /* renders a visibly hidden \"copy\" of the text in bold, reserving box space for when text becomes bold on selected */\n & .Button-label[data-content]::before {\n display: block;\n height: 0;\n font-weight: var(--base-text-weight-semibold);\n visibility: hidden;\n content: attr(data-content);\n }\n\n /* Separator lines */\n &:not(:first-child) {\n &::before {\n position: absolute;\n inset: 0 0 0 -1px;\n margin-top: var(--control-medium-paddingBlock);\n margin-bottom: var(--control-medium-paddingBlock);\n content: '';\n border-left: var(--borderWidth-thin) solid var(--borderColor-default);\n }\n }\n\n /* Button ----------------------------------------- */\n & .Button {\n border: 0;\n font-weight: var(--base-text-weight-normal);\n transition: none;\n color: var(--button-default-fgColor-rest);\n\n &:focus-visible {\n outline-offset: calc(var(--control-xsmall-paddingInline-condensed) - var(--borderWidth-thin));\n border-radius: calc(var(--borderRadius-medium) - 5px);\n }\n }\n\n & .Button--small {\n height: calc(\n var(--control-small-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-small-paddingInline-condensed) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--medium {\n height: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-medium-paddingInline-normal) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-medium-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-medium-size), var(--control-medium-size);\n }\n }\n }\n\n & .Button--large {\n height: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n padding: 0 calc(var(--control-large-paddingInline-spacious) - var(--control-xsmall-paddingInline-condensed));\n\n &.Button--iconOnly {\n width: calc(\n var(--control-large-size) - var(--control-xsmall-paddingInline-condensed) * 2 - var(--borderWidth-thin) * 2\n );\n\n &::before {\n @mixin minTouchTarget var(--control-large-size), var(--control-large-size);\n }\n }\n }\n\n & .Button--iconOnly {\n padding: initial;\n }\n\n & .Button--invisible.Button--invisible-noVisuals .Button-label {\n color: var(--button-default-fgColor-rest);\n }\n}\n\n/* fullWidth */\n.SegmentedControl--fullWidth {\n display: flex;\n\n & .SegmentedControl-item {\n flex: 1;\n justify-content: center;\n }\n\n /* is .Button-withTooltip used anywhere? can't find use of it */\n & .Button--iconOnly,\n & .Button-withTooltip {\n width: 100%;\n }\n}\n",null]}
|
|
@@ -28,67 +28,6 @@ module Primer
|
|
|
28
28
|
)
|
|
29
29
|
}
|
|
30
30
|
|
|
31
|
-
# @example With a label above and caption below
|
|
32
|
-
# <%= render(Primer::Box.new(display: :flex, direction: :column)) do %>
|
|
33
|
-
# <%= render(Primer::BaseComponent.new(tag: "span", id: "scLabel-horiz")) { "File view" } %>
|
|
34
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-horiz", "aria-describedby": "scCaption-horiz")) do |component| %>
|
|
35
|
-
# <% component.with_item(label: "Preview", selected: true) %>
|
|
36
|
-
# <% component.with_item(label: "Raw") %>
|
|
37
|
-
# <% component.with_item(label: "Blame") %>
|
|
38
|
-
# <% end %>
|
|
39
|
-
# <%= render(Primer::Beta::Text.new(font_size: :small, mt: 1, color: :muted, id: "scCaption-horiz")) { "Change the way the file is viewed" } %>
|
|
40
|
-
# <% end %>
|
|
41
|
-
#
|
|
42
|
-
# @example With a label and caption on the left
|
|
43
|
-
# <%= render(Primer::Beta::Subhead.new) do |component| %>
|
|
44
|
-
# <% component.with_heading(id: "scLabel-vert") { "File view" } %>
|
|
45
|
-
# <% component.with_description(id: "scCaption-vert") { "Change the way the file is viewed" } %>
|
|
46
|
-
# <% component.with_actions do %>
|
|
47
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-labelledby": "scLabel-vert", "aria-describedby": "scCaption-vert")) do |component| %>
|
|
48
|
-
# <% component.with_item(label: "Preview", selected: true) %>
|
|
49
|
-
# <% component.with_item(label: "Raw") %>
|
|
50
|
-
# <% component.with_item(label: "Blame") %>
|
|
51
|
-
# <% end %>
|
|
52
|
-
# <% end %>
|
|
53
|
-
# <% end %>
|
|
54
|
-
#
|
|
55
|
-
# @example Basic usage
|
|
56
|
-
#
|
|
57
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
|
|
58
|
-
# <%= component.with_item(label: "Preview", selected: true) %>
|
|
59
|
-
# <%= component.with_item(label: "Raw") %>
|
|
60
|
-
# <%= component.with_item(label: "Blame") %>
|
|
61
|
-
# <% end %>
|
|
62
|
-
#
|
|
63
|
-
# @example Small
|
|
64
|
-
#
|
|
65
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", size: :small)) do |component| %>
|
|
66
|
-
# <%= component.with_item(label: "Preview", selected: true) %>
|
|
67
|
-
# <%= component.with_item(label: "Raw") %>
|
|
68
|
-
# <%= component.with_item(label: "Blame") %>
|
|
69
|
-
# <% end %>
|
|
70
|
-
#
|
|
71
|
-
# @example With icons
|
|
72
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view")) do |component| %>
|
|
73
|
-
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
74
|
-
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
75
|
-
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
76
|
-
# <% end %>
|
|
77
|
-
#
|
|
78
|
-
# @example With icons only
|
|
79
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", hide_labels: true)) do |component| %>
|
|
80
|
-
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
81
|
-
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
82
|
-
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
83
|
-
# <% end %>
|
|
84
|
-
#
|
|
85
|
-
# @example Fill width of parent
|
|
86
|
-
# <%= render(Primer::Alpha::SegmentedControl.new("aria-label": "File view", full_width: true)) do |component| %>
|
|
87
|
-
# <%= component.with_item(label: "Preview", icon: :eye, selected: true) %>
|
|
88
|
-
# <%= component.with_item(label: "Raw", icon: :"file-code") %>
|
|
89
|
-
# <%= component.with_item(label: "Blame", icon: :people) %>
|
|
90
|
-
# <% end %>
|
|
91
|
-
#
|
|
92
31
|
# @param hide_labels [Boolean] Whether to hide the labels and only show the icons
|
|
93
32
|
# @param full_width [Boolean] If the component should be full width
|
|
94
33
|
# @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %>
|
|
@@ -7,24 +7,6 @@ module Primer
|
|
|
7
7
|
#
|
|
8
8
|
# This component requires javascript.
|
|
9
9
|
class TabContainer < Primer::Component
|
|
10
|
-
# @example Default
|
|
11
|
-
# <%= render(Primer::Alpha::TabContainer.new) do %>
|
|
12
|
-
# <div role="tablist">
|
|
13
|
-
# <button type="button" role="tab" aria-selected="true">Tab one</button>
|
|
14
|
-
# <button type="button" role="tab" tabindex="-1">Tab two</button>
|
|
15
|
-
# <button type="button" role="tab" tabindex="-1">Tab three</button>
|
|
16
|
-
# </div>
|
|
17
|
-
# <div role="tabpanel">
|
|
18
|
-
# Panel 1
|
|
19
|
-
# </div>
|
|
20
|
-
# <div role="tabpanel" hidden>
|
|
21
|
-
# Panel 2
|
|
22
|
-
# </div>
|
|
23
|
-
# <div role="tabpanel" hidden>
|
|
24
|
-
# Panel 3
|
|
25
|
-
# </div>
|
|
26
|
-
# <% end %>
|
|
27
|
-
#
|
|
28
10
|
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
|
|
29
11
|
def initialize(**system_arguments)
|
|
30
12
|
@system_arguments = deny_tag_argument(**system_arguments)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium
|
|
1
|
+
.tabnav{border-bottom:var(--borderWidth-thin,max(1px,.0625rem)) solid var(--borderColor-default,var(--color-border-default));margin-bottom:var(--stack-gap-normal,1rem);margin-top:0}.tabnav-tabs{display:flex;margin-bottom:calc(var(--borderWidth-thin,max(1px, .0625rem))*-1);overflow:auto}.tabnav-tab{background-color:initial;border:var(--borderWidth-thin,max(1px,.0625rem)) solid #0000;border-bottom:0;color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;flex-shrink:0;font-size:var(--text-body-size-medium,.875rem);line-height:23px;padding:var(--base-size-8,.5rem) var(--control-medium-paddingInline-spacious,1rem);text-decoration:none;transition:color .2s cubic-bezier(.3,0,.5,1)}.tabnav-tab.selected,.tabnav-tab[aria-current]:not([aria-current=false]),.tabnav-tab[aria-selected=true]{background-color:var(--bgColor-default,var(--color-canvas-default));border-color:var(--borderColor-default,var(--color-border-default));border-radius:var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem) 0 0;color:var(--fgColor-default,var(--color-fg-default))}.tabnav-tab.selected .octicon,.tabnav-tab[aria-current]:not([aria-current=false]) .octicon,.tabnav-tab[aria-selected=true] .octicon{color:inherit}.tabnav-tab:hover{color:var(--fgColor-default,var(--color-fg-default));text-decoration:none;transition-duration:.1s}.tabnav-tab:focus,.tabnav-tab:focus-visible{border-radius:var(--borderRadius-medium,.375rem) var(--borderRadius-medium,.375rem) 0 0!important}.tabnav-tab:focus,.tabnav-tab:focus-visible{outline-offset:-6px}.tabnav-tab .octicon,.tabnav-tab:active{color:var(--fgColor-muted,var(--color-fg-muted))}.tabnav-tab .octicon{margin-right:var(--control-small-gap,.25rem)}.tabnav-tab .Counter{color:inherit;margin-left:var(--control-small-gap,.25rem)}.tabnav-extra{color:var(--fgColor-muted,var(--color-fg-muted));display:inline-block;font-size:var(--text-body-size-small,.75rem);margin-left:10px;padding-top:10px}.tabnav-extra>.octicon{margin-right:2px}a.tabnav-extra:hover{color:var(--fgColor-accent,var(--color-accent-fg));text-decoration:none}.tabnav-btn{margin-left:var(--controlStack-medium-gap-condensed,.5rem)}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,oHAAuE,CADvE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,gDAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,mEAAwC,CACxC,mEAAwC,CACxC
|
|
1
|
+
{"version":3,"sources":["tab_nav.pcss"],"names":[],"mappings":"AAGA,QAGE,oHAAuE,CADvE,0CAAsC,CADtC,YAGF,CAEA,aACE,YAAa,CACb,iEAAiD,CACjD,aACF,CAEA,YAQE,wBAA6B,CAE7B,4DAAgB,CAAhB,eAAgB,CAJhB,gDAA2B,CAL3B,oBAAqB,CACrB,aAAc,CAEd,8CAAuC,CACvC,gBAAiB,CAFjB,kFAAwE,CAIxE,oBAAqB,CAIrB,4CAwCF,CAtCE,yGAIE,mEAAwC,CACxC,mEAAwC,CACxC,uFAAwE,CAHxE,oDAQF,CAHE,oIACE,aACF,CAGF,kBACE,oDAA6B,CAC7B,oBAAqB,CACrB,uBACF,CAEA,4CAEE,iGAEF,CAJA,4CAGE,mBACF,CAMA,wCAHE,gDAMF,CAHA,qBACE,4CAEF,CAEA,qBAEE,aAAc,CADd,2CAEF,CAQF,cAKE,gDAA2B,CAJ3B,oBAAqB,CAGrB,4CAAsC,CADtC,gBAAiB,CADjB,gBAQF,CAHE,uBACE,gBACF,CAKF,qBACE,kDAA4B,CAC5B,oBACF,CAOA,YACE,0DACF","file":"tab_nav.css","sourcesContent":["/* tabnav */\n\n/* Outer wrapper */\n.tabnav {\n margin-top: 0;\n margin-bottom: var(--stack-gap-normal);\n border-bottom: var(--borderWidth-thin) solid var(--borderColor-default);\n}\n\n.tabnav-tabs {\n display: flex;\n margin-bottom: calc(var(--borderWidth-thin) * -1);\n overflow: auto;\n}\n\n.tabnav-tab {\n display: inline-block;\n flex-shrink: 0;\n padding: var(--base-size-8) var(--control-medium-paddingInline-spacious);\n font-size: var(--text-body-size-medium);\n line-height: 23px;\n color: var(--fgColor-muted);\n text-decoration: none;\n background-color: transparent;\n border: var(--borderWidth-thin) solid transparent;\n border-bottom: 0;\n transition: color 0.2s cubic-bezier(0.3, 0, 0.5, 1);\n\n &.selected,\n &[aria-selected='true'],\n &[aria-current]:not([aria-current='false']) {\n color: var(--fgColor-default);\n background-color: var(--bgColor-default); /* cover bottom border */\n border-color: var(--borderColor-default);\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0;\n\n & .octicon {\n color: inherit;\n }\n }\n\n &:hover {\n color: var(--fgColor-default);\n text-decoration: none;\n transition-duration: 0.1s;\n }\n\n &:focus,\n &:focus-visible {\n border-radius: var(--borderRadius-medium) var(--borderRadius-medium) 0 0 !important;\n outline-offset: -6px;\n }\n\n &:active {\n color: var(--fgColor-muted);\n }\n\n & .octicon {\n margin-right: var(--control-small-gap);\n color: var(--fgColor-muted);\n }\n\n & .Counter {\n margin-left: var(--control-small-gap);\n color: inherit;\n }\n}\n\n/* Tabnav extras\n**\n** Tabnav extras are non-tab elements that sit in the tabnav. Usually they're\n** inline text or links. */\n\n.tabnav-extra {\n display: inline-block;\n padding-top: 10px;\n margin-left: 10px;\n font-size: var(--text-body-size-small);\n color: var(--fgColor-muted);\n\n & > .octicon {\n margin-right: 2px;\n }\n}\n\n/* When tabnav-extra are anchors\n** stylelint-disable-next-line selector-no-qualifying-type */\na.tabnav-extra:hover {\n color: var(--fgColor-accent);\n text-decoration: none;\n}\n\n/* Tabnav buttons\n**\n** For when there are multiple buttons, space them out appropriately. Requires\n** the buttons to be floated or inline-block. */\n\n.tabnav-btn {\n margin-left: var(--controlStack-medium-gap-condensed);\n}\n"]}
|