Skip to content

Commit

Permalink
Update slot use in examples for all components in the alpha folder (#…
Browse files Browse the repository at this point in the history 
…1292)

* added changeset

* update auto complete slot use in examples

* update layout slot use in examples

* update tab nav slot use in examples

* update tab panels slot use in examples

* update underline nav slot use in examples

* update underline panels slot use in examples

* correcting link to layout doc, so it displays the correct one
  • Loading branch information
@mxriverlynn
mxriverlynn authored Aug 10, 2022
1 parent cc81b54 commit 28cdc99
Show file tree
Hide file tree
Showing 9 changed files with 86 additions and 79 deletions.
5 changes: 5 additions & 0 deletions .changeset/shiny-cooks-tap.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/view-components': patch
---

updating slot use in examples, for all `status :alpha` components
4 changes: 2 additions & 2 deletions app/components/primer/alpha/auto_complete.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,12 +94,12 @@ class AutoComplete < Primer::Component
#
# @example With custom classes for the input
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
# <% c.input(classes: "custom-class") %>
# <% c.with_input(classes: "custom-class") %>
# <% end %>
#
# @example With custom classes for the results
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
# <% c.results(classes: "custom-class") do %>
# <% c.with_results(classes: "custom-class") do %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
# Apple
# <% end %>
Expand Down
66 changes: 34 additions & 32 deletions app/components/primer/alpha/layout.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,8 @@ module Alpha
# Keyboard navigation follows the markup order. Decide carefully how the focus order should be be by deciding whether
# `main` or `sidebar` comes first in code. The code order won’t affect the visual position.
class Layout < Primer::Component
status :alpha

FIRST_IN_SOURCE_DEFAULT = :sidebar
FIRST_IN_SOURCE_OPTIONS = [FIRST_IN_SOURCE_DEFAULT, :main].freeze

Expand Down Expand Up @@ -80,8 +82,8 @@ class Layout < Primer::Component
# @example Default
#
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
#
# @example Main widths
Expand All @@ -96,20 +98,20 @@ class Layout < Primer::Component
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.main(width: :full, border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(width: :full, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(width: :md, border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(width: :md, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(width: :lg, border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(width: :lg, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(width: :xl, border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(width: :xl, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar widths
Expand All @@ -125,16 +127,16 @@ class Layout < Primer::Component
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(width: :default, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :default, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(width: :narrow, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(width: :wide, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar placement
Expand All @@ -144,12 +146,12 @@ class Layout < Primer::Component
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(col_placement: :start, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(col_placement: :end, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar placement as row
Expand All @@ -163,16 +165,16 @@ class Layout < Primer::Component
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(row_placement: :start, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(row_placement: :end, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(row_placement: :none, border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Changing when to render `Layout` as columns
Expand All @@ -183,16 +185,16 @@ class Layout < Primer::Component
#
# @code
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
# <% c.main(border: true) { "Main" } %>
# <% c.sidebar(border: true) { "Sidebar" } %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
#
# @param stacking_breakpoint [Symbol] When the `Layout` should change from rows into columns. <%= one_of(Primer::Alpha::Layout::STACKING_BREAKPOINT_OPTIONS) %>
Expand Down
40 changes: 20 additions & 20 deletions app/components/primer/alpha/tab_nav.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -49,51 +49,51 @@ class TabNav < Primer::Component
# `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
# @code
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" } %>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% end %>
#
# @example Default with `<div>`
# <%= render(Primer::Alpha::TabNav.new(label: "Default")) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" } %>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" } %>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% end %>
#
# @example With icons and counters
# <%= render(Primer::Alpha::TabNav.new(label: "With icons and counters")) do |component| %>
# <% component.tab(href: "#", selected: true) do |t| %>
# <% component.with_tab(href: "#", selected: true) do |t| %>
# <% t.icon(icon: :star) %>
# <% t.text { "Item 1" } %>
# <% end %>
# <% component.tab(href: "#") do |t| %>
# <% component.with_tab(href: "#") do |t| %>
# <% t.icon(icon: :star) %>
# <% t.text { "Item 2" } %>
# <% t.counter(count: 10) %>
# <% end %>
# <% component.tab(href: "#") do |t| %>
# <% component.with_tab(href: "#") do |t| %>
# <% t.text { "Item 3" } %>
# <% t.counter(count: 10) %>
# <% end %>
# <% end %>
#
# @example With extra content
# <%= render(Primer::Alpha::TabNav.new(label: "With extra content")) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.extra do %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% c.with_extra do %>
# <%= render(Primer::ButtonComponent.new(float: :right)) { "Button" } %>
# <% end %>
# <% end %>
#
# @example Adding extra content after the tabs
# <%= render(Primer::Alpha::TabNav.new(label: "Adding extra content after the tabs", display: :flex, body_arguments: { flex: 1 })) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.extra(align: :right) do %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% c.with_extra(align: :right) do %>
# <div>
# <%= render(Primer::ButtonComponent.new) { "Button" } %>
# </div>
Expand All @@ -102,9 +102,9 @@ class TabNav < Primer::Component
#
# @example Customizing the body
# <%= render(Primer::Alpha::TabNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% end %>
#
# @param tag [Symbol] <%= one_of(Primer::Alpha::TabNav::TAG_OPTIONS) %>
Expand Down
4 changes: 2 additions & 2 deletions app/components/primer/alpha/tab_panels.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -43,13 +43,13 @@ class TabPanels < Primer::Component

# @example Default
# <%= render(Primer::Alpha::TabPanels.new(label: "With panels")) do |component| %>
# <% component.tab(id: "tab-1", selected: true) do |t| %>
# <% component.with_tab(id: "tab-1", selected: true) do |t| %>
# <% t.text { "Tab 1" } %>
# <% t.panel do %>
# Panel 1
# <% end %>
# <% end %>
# <% component.tab(id: "tab-2") do |t| %>
# <% component.with_tab(id: "tab-2") do |t| %>
# <% t.text { "Tab 2" } %>
# <% t.panel do %>
# Panel 2
Expand Down
32 changes: 16 additions & 16 deletions app/components/primer/alpha/underline_nav.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -53,60 +53,60 @@ class UnderlineNav < Primer::Component
# `<nav>` is a landmark and should be reserved for main navigation links. See <%= link_to_accessibility %>.
# @code
# <%= render(Primer::Alpha::UnderlineNav.new(label: "Default with nav element")) do |component| %>
# <% component.tab(href: "#", selected: true) { "Item 1" } %>
# <% component.tab(href: "#") { "Item 2" } %>
# <% component.actions do %>
# <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
# <% component.with_tab(href: "#") { "Item 2" } %>
# <% component.with_actions do %>
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
# <% end %>
# <% end %>
#
# @example With `<div>`
# <%= render(Primer::Alpha::UnderlineNav.new(tag: :div, label: "With div element")) do |component| %>
# <% component.tab(href: "#", selected: true) { "Item 1" } %>
# <% component.tab(href: "#") { "Item 2" } %>
# <% component.actions do %>
# <% component.with_tab(href: "#", selected: true) { "Item 1" } %>
# <% component.with_tab(href: "#") { "Item 2" } %>
# <% component.with_actions do %>
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
# <% end %>
# <% end %>
#
# @example With icons and counters
# <%= render(Primer::Alpha::UnderlineNav.new(label: "With icons and counters")) do |component| %>
# <% component.tab(href: "#", selected: true) do |t| %>
# <% component.with_tab(href: "#", selected: true) do |t| %>
# <% t.icon(icon: :star) %>
# <% t.text { "Item 1" } %>
# <% end %>
# <% component.tab(href: "#") do |t| %>
# <% component.with_tab(href: "#") do |t| %>
# <% t.icon(icon: :star) %>
# <% t.text { "Item 2" } %>
# <% t.counter(count: 10) %>
# <% end %>
# <% component.tab(href: "#") do |t| %>
# <% component.with_tab(href: "#") do |t| %>
# <% t.text { "Item 3" } %>
# <% t.counter(count: 10) %>
# <% end %>
# <% component.actions do %>
# <% component.with_actions do %>
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
# <% end %>
# <% end %>
#
# @example Align right
# <%= render(Primer::Alpha::UnderlineNav.new(label: "Align right", align: :right)) do |component| %>
# <% component.tab(href: "#", selected: true) do |t| %>
# <% component.with_tab(href: "#", selected: true) do |t| %>
# <% t.text { "Item 1" } %>
# <% end %>
# <% component.tab(href: "#") do |t| %>
# <% component.with_tab(href: "#") do |t| %>
# <% t.text { "Item 2" } %>
# <% end %>
# <% component.actions do %>
# <% component.with_actions do %>
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
# <% end %>
# <% end %>
#
# @example Customizing the body
# <%= render(Primer::Alpha::UnderlineNav.new(label: "Default", body_arguments: { classes: "custom-class", border: true, border_color: :accent_emphasis })) do |c| %>
# <% c.tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.tab(href: "#") { "Tab 2" } %>
# <% c.tab(href: "#") { "Tab 3" } %>
# <% c.with_tab(selected: true, href: "#") { "Tab 1" }%>
# <% c.with_tab(href: "#") { "Tab 2" } %>
# <% c.with_tab(href: "#") { "Tab 3" } %>
# <% end %>
#
# @param tag [Symbol] <%= one_of(Primer::Alpha::UnderlineNav::TAG_OPTIONS) %>
Expand Down
6 changes: 3 additions & 3 deletions app/components/primer/alpha/underline_panels.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,19 +38,19 @@ class UnderlinePanels < Primer::Component

# @example Default
# <%= render(Primer::Alpha::UnderlinePanels.new(label: "With panels")) do |component| %>
# <% component.tab(id: "tab-1", selected: true) do |t| %>
# <% component.with_tab(id: "tab-1", selected: true) do |t| %>
# <% t.text { "Tab 1" } %>
# <% t.panel do %>
# Panel 1
# <% end %>
# <% end %>
# <% component.tab(id: "tab-2") do |t| %>
# <% component.with_tab(id: "tab-2") do |t| %>
# <% t.text { "Tab 2" } %>
# <% t.panel do %>
# Panel 2
# <% end %>
# <% end %>
# <% component.actions do %>
# <% component.with_actions do %>
# <%= render(Primer::ButtonComponent.new) { "Button!" } %>
# <% end %>
# <% end %>
Expand Down
Loading

0 comments on commit 28cdc99

Please sign in to comment.