Skip to content

Commit

Permalink
Use new Slots API in previews (#1713)
Browse files Browse the repository at this point in the history
  • Loading branch information
@joelhawksley
joelhawksley authored Dec 16, 2022
1 parent 4fbe148 commit 9b535d8
Show file tree
Hide file tree
Showing 62 changed files with 789 additions and 804 deletions.
5 changes: 5 additions & 0 deletions .changeset/many-carrots-fry.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"@primer/view-components": patch
---

Use new Slots API in previews.
12 changes: 6 additions & 6 deletions app/components/primer/alpha/auto_complete.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -93,17 +93,17 @@ class AutoComplete < Primer::Component
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--clear", list_id: "fruits-popup--clear", is_clearable: true)) %>
#
# @example With custom classes for the input
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |c| %>
# <% c.with_input(classes: "custom-class") %>
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-input", list_id: "fruits-popup--custom-input")) do |component| %>
# <% component.with_input(classes: "custom-class") %>
# <% end %>
#
# @example With custom classes for the results
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |c| %>
# <% c.with_results(classes: "custom-class") do %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/view-components/rails-app/auto_complete?version=alpha", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
# <% component.with_results(classes: "custom-class") do %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
# Apple
# <% end %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
# Orange
# <% end %>
# <% end %>
Expand Down
8 changes: 4 additions & 4 deletions app/components/primer/alpha/auto_complete/item.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,12 @@ class Item < Primer::Component
status :deprecated

# @example Default
# <%= 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 %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do |c| %>
# <%= render(Primer::Alpha::AutoComplete.new(label_text: "Fruits", src: "/auto_complete", input_id: "fruits-input--custom-results", list_id: "fruits-popup--custom-results")) do |component| %>
# <% component.results(classes: "custom-class") do %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(selected: true, value: "apple")) do %>
# Apple
# <% end %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do |c| %>
# <%= render(Primer::Alpha::AutoComplete::Item.new(value: "orange")) do %>
# Orange
# <% end %>
# <% end %>
Expand Down
106 changes: 53 additions & 53 deletions app/components/primer/alpha/dropdown.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,15 @@ class Dropdown < Primer::Component
renders_one :menu, "Primer::Alpha::Dropdown::Menu"

# @example Default
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options") do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item { "Item 3" }
# <% component.with_menu(header: "Options") do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item { "Item 3" }
# end %>
# <% end %>
#
Expand All @@ -44,90 +44,90 @@ class Dropdown < Primer::Component
# @description
# Dividers can be used to separate a group of items. They don't have any content.
# @code
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options") do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item(divider: true)
# menu.item { "Item 3" }
# menu.item { "Item 4" }
# menu.item(divider: true)
# menu.item { "Item 5" }
# menu.item { "Item 6" }
# <% component.with_menu(header: "Options") do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item(divider: true)
# menu.with_item { "Item 3" }
# menu.with_item { "Item 4" }
# menu.with_item(divider: true)
# menu.with_item { "Item 5" }
# menu.with_item { "Item 6" }
# end %>
# <% end %>
#
# @example With direction
# <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new(display: :inline_block)) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options", direction: :s) do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item { "Item 3" }
# menu.item { "Item 4" }
# <% component.with_menu(header: "Options", direction: :s) do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item { "Item 3" }
# menu.with_item { "Item 4" }
# end %>
# <% end %>
#
# @example With caret
# <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new(with_caret: true)) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options") do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item { "Item 3" }
# menu.item { "Item 4" }
# <% component.with_menu(header: "Options") do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item { "Item 3" }
# menu.with_item { "Item 4" }
# end %>
# <% end %>
#
# @example Customizing the button
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
# <% c.with_button(scheme: :primary, size: :small) do %>
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
# <% component.with_button(scheme: :primary, size: :small) do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options") do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item { "Item 3" }
# menu.item { "Item 4" }
# <% component.with_menu(header: "Options") do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item { "Item 3" }
# menu.with_item { "Item 4" }
# end %>
# <% end %>
#
# @example Menu as list
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(as: :list, header: "Options") do |menu|
# menu.item { "Item 1" }
# menu.item { "Item 2" }
# menu.item(divider: true)
# menu.item { "Item 3" }
# menu.item { "Item 4" }
# <% component.with_menu(as: :list, header: "Options") do |menu|
# menu.with_item { "Item 1" }
# menu.with_item { "Item 2" }
# menu.with_item(divider: true)
# menu.with_item { "Item 3" }
# menu.with_item { "Item 4" }
# end %>
# <% end %>
#
# @example Customizing menu items
# <%= render(Primer::Alpha::Dropdown.new) do |c| %>
# <% c.with_button do %>
# <%= render(Primer::Alpha::Dropdown.new) do |component| %>
# <% component.with_button do %>
# Dropdown
# <% end %>
#
# <% c.with_menu(header: "Options") do |menu|
# menu.item(tag: :button) { "Item 1" }
# menu.item(classes: "custom-class") { "Item 2" }
# menu.item { "Item 3" }
# <% component.with_menu(header: "Options") do |menu|
# menu.with_item(tag: :button) { "Item 1" }
# menu.with_item(classes: "custom-class") { "Item 2" }
# menu.with_item { "Item 3" }
# end %>
# <% end %>
#
Expand All @@ -147,7 +147,7 @@ def initialize(overlay: :default, with_caret: false, **system_arguments)
end

def render?
button.present? && menu.present?
button? && menu?
end
end
end
Expand Down
96 changes: 48 additions & 48 deletions app/components/primer/alpha/layout.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -81,9 +81,9 @@ class Layout < Primer::Component

# @example Default
#
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
#
# @example Main widths
Expand All @@ -97,21 +97,21 @@ class Layout < Primer::Component
# When flowing as a row, `Main` takes the full width.
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.with_main(width: :full, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new) do |component| %>
# <% component.with_main(width: :full, border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(width: :md, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(width: :md, border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(width: :lg, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(width: :lg, border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(width: :xl, border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(width: :xl, border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar widths
Expand All @@ -126,17 +126,17 @@ class Layout < Primer::Component
# When flowing as a row, `Sidebar` takes the full width.
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :default, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(width: :default, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(width: :narrow, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(width: :wide, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar placement
Expand All @@ -145,13 +145,13 @@ class Layout < Primer::Component
# Use `start` for sidebars that manipulate local navigation, while right-aligned `end` is useful for metadata and other auxiliary information.
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(col_placement: :start, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new( mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(col_placement: :end, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Sidebar placement as row
Expand All @@ -164,17 +164,17 @@ class Layout < Primer::Component
# landing page to interact with the local navigation.
#
# @code
# <%= render(Primer::Alpha::Layout.new) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(row_placement: :start, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(row_placement: :end, border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(row_placement: :none, border: true) { "Sidebar" } %>
# <% end %>
#
# @example Changing when to render `Layout` as columns
Expand All @@ -184,17 +184,17 @@ class Layout < Primer::Component
# Any screen size before this breakpoint will render the `Layout` in stacked rows.
#
# @code
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :sm)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :md, mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.with_sidebar(border: true) { "Sidebar" } %>
# <% end %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |c| %>
# <% c.with_main(border: true) { "Main" } %>
# <% c.with_sidebar(border: true) { "Sidebar" } %>
# <%= render(Primer::Alpha::Layout.new(stacking_breakpoint: :lg, mt: 5)) do |component| %>
# <% component.with_main(border: true) { "Main" } %>
# <% component.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
10 changes: 5 additions & 5 deletions app/components/primer/alpha/menu.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,18 +40,18 @@ class Menu < Primer::Component
}

# @example Default
# <%= render(Primer::Alpha::Menu.new) do |c| %>
# <% c.with_heading(tag: :h2) do %>
# <%= render(Primer::Alpha::Menu.new) do |component| %>
# <% component.with_heading(tag: :h2) do %>
# Heading
# <% end %>
# <% c.with_item(selected: true, href: "#url") do %>
# <% component.with_item(selected: true, href: "#url") do %>
# Item 1
# <% end %>
# <% c.with_item(href: "#url") do %>
# <% component.with_item(href: "#url") do %>
# <%= render(Primer::Beta::Octicon.new("check")) %>
# With Icon
# <% end %>
# <% c.with_item(href: "#url") do %>
# <% component.with_item(href: "#url") do %>
# <%= render(Primer::Beta::Octicon.new("check")) %>
# With Icon and Counter
# <%= render(Primer::Beta::Counter.new(count: 25)) %>
Expand Down
Loading

0 comments on commit 9b535d8

Please sign in to comment.