Skip to content

Commit

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

* added changeset

* updating slot use for the borderbox header

* updating slot use for auto complete

* updating slot use for avatar stack

* updating slot use for blank slate

* updating slot use for bread crumbs

* updating slot use for button group

* updating slot use for flash

* updating slot use for truncate

* resetting .leading_visual_icon

* correcting blank slate

* added missing status :beta to header

* docs: build docs

Co-authored-by: Actions Auto Build <[email protected]>
  • Loading branch information
@mxriverlynn @actions-user
mxriverlynn and actions-user authored Aug 10, 2022
1 parent dd99547 commit 4d1e8d2
Show file tree
Hide file tree
Showing 9 changed files with 51 additions and 44 deletions.
5 changes: 5 additions & 0 deletions .changeset/silver-rice-lie.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@primer/view-components': patch
---

updating slot use for components in the beta/ folder
4 changes: 2 additions & 2 deletions app/components/primer/beta/auto_complete.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -138,12 +138,12 @@ class AutoComplete < Primer::Component
#
# @example With custom classes for the input
# <%= render(Primer::Beta::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::Beta::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") %>
# <% c.with_results(classes: "custom-class") %>
# <% end %>
#
# @param label_text [String] The label of the input.
Expand Down
18 changes: 9 additions & 9 deletions app/components/primer/beta/avatar_stack.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,23 +21,23 @@ class AvatarStack < Primer::Component

# @example Default
# <%= render(Primer::Beta::AvatarStack.new) do |c| %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% end %>
#
# @example Align right
# <%= render(Primer::Beta::AvatarStack.new(align: :right)) do |c| %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% end %>
#
# @example With tooltip
# <%= render(Primer::Beta::AvatarStack.new(tooltipped: true, body_arguments: { label: 'This is a tooltip!' })) do |c| %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% c.with_avatar(src: "http://placekitten.com/200/200", alt: "@kittenuser") %>
# <% end %>
#
# @param tag [Symbol] <%= one_of(Primer::Beta::AvatarStack::TAG_OPTIONS) %>
Expand Down
6 changes: 4 additions & 2 deletions app/components/primer/beta/border_box/header.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,10 @@ module Beta
class BorderBox
# `BorderBox::Header` is used inside `BorderBox` to render its header slot.
#
# @accessibility When using `header.title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
# @accessibility When using `header.with_title`, set `tag` to one of `h1`, `h2`, `h3`, etc. based on what is appropriate for the page context. <%= link_to_heading_practices %>
class Header < Primer::Component
status :beta

TITLE_TAG_FALLBACK = :h2
TITLE_TAG_OPTIONS = [:h1, TITLE_TAG_FALLBACK, :h3, :h4, :h5, :h6].freeze

Expand All @@ -32,7 +34,7 @@ class Header < Primer::Component
#
# @example with title
# <%= render(Primer::Beta::BorderBox::Header.new) do |h| %>
# <% h.title(tag: :h3) do %>I am a title<% end %>
# <% h.with_title(tag: :h3) do %>I am a title<% end %>
# <% end %>
#
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
Expand Down
6 changes: 3 additions & 3 deletions app/components/primer/beta/breadcrumbs.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -33,9 +33,9 @@ class Breadcrumbs < Primer::Component

# @example Basic
# <%= render(Primer::Beta::Breadcrumbs.new) do |component| %>
# <% component.item(href: "/") do %>Home<% end %>
# <% component.item(href: "/about") do %>About<% end %>
# <% component.item(href: "/about/team") do %>Team<% end %>
# <% component.with_item(href: "/") do %>Home<% end %>
# <% component.with_item(href: "/about") do %>About<% end %>
# <% component.with_item(href: "/about/team") do %>Team<% end %>
# <% end %>
#
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
Expand Down
18 changes: 9 additions & 9 deletions app/components/primer/beta/button_group.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,20 +19,20 @@ class ButtonGroup < Primer::Component
# @example Default
#
# <%= render(Primer::Beta::ButtonGroup.new) do |component| %>
# <% component.button { "Default" } %>
# <% component.button(scheme: :primary) { "Primary" } %>
# <% component.button(scheme: :danger) { "Danger" } %>
# <% component.button(scheme: :outline) { "Outline" } %>
# <% component.button(classes: "custom-class") { "Custom class" } %>
# <% component.with_button { "Default" } %>
# <% component.with_button(scheme: :primary) { "Primary" } %>
# <% component.with_button(scheme: :danger) { "Danger" } %>
# <% component.with_button(scheme: :outline) { "Outline" } %>
# <% component.with_button(classes: "custom-class") { "Custom class" } %>
# <% end %>
#
# @example Sizes
#
# <%= render(Primer::Beta::ButtonGroup.new(size: :small)) do |component| %>
# <% component.button { "Default" } %>
# <% component.button(scheme: :primary) { "Primary" } %>
# <% component.button(scheme: :danger) { "Danger" } %>
# <% component.button(scheme: :outline) { "Outline" } %>
# <% component.with_button { "Default" } %>
# <% component.with_button(scheme: :primary) { "Primary" } %>
# <% component.with_button(scheme: :danger) { "Danger" } %>
# <% component.with_button(scheme: :outline) { "Outline" } %>
# <% end %>
#
# @param variant [Symbol] DEPRECATED. <%= one_of(Primer::ButtonComponent::SIZE_OPTIONS) %>
Expand Down
2 changes: 1 addition & 1 deletion app/components/primer/beta/flash.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,7 +42,7 @@ class Flash < Primer::Component
# @example With actions
# <%= render(Primer::Beta::Flash.new) do |component| %>
# This is a flash message with actions!
# <% component.action do %>
# <% component.with_action do %>
# <%= render(Primer::ButtonComponent.new(size: :small)) { "Take action" } %>
# <% end %>
# <% end %>
Expand Down
34 changes: 17 additions & 17 deletions app/components/primer/beta/truncate.rb
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,49 +19,49 @@ class Truncate < Primer::Component
#
# @example Multiple items
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item do %>really-long-repository-owner-name<% end %>
# <% component.item(font_weight: :bold) do %>
# <% component.with_item do %>really-long-repository-owner-name<% end %>
# <% component.with_item(font_weight: :bold) do %>
# <%= render(Primer::BaseComponent.new(tag: :span, font_weight: :normal)) { "/" } %> really-long-repository-name
# <% end %>
# <% end %>
#
# @example Advanced multiple items
# <%= render(Primer::Beta::Truncate.new(tag: :ol)) do |component| %>
# <% component.item(tag: :li) do %>primer<% end %>
# <% component.item(tag: :li, priority: true) do %>/ css<% end %>
# <% component.item(tag: :li) do %>/ Issues<% end %>
# <% component.item(tag: :li) do %>/ #123 —<% end %>
# <% component.item(tag: :li, priority: true) do %>
# <% component.with_item(tag: :li) do %>primer<% end %>
# <% component.with_item(tag: :li, priority: true) do %>/ css<% end %>
# <% component.with_item(tag: :li) do %>/ Issues<% end %>
# <% component.with_item(tag: :li) do %>/ #123 —<% end %>
# <% component.with_item(tag: :li, priority: true) do %>
# Visual bug on primer.style found in lists
# <% end %>
# <% end %>
#
# @example Expand on hover or focus
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% component.with_item(tag: :a, href: "#", expandable: true) do %>really-long-repository-owner-name<% end %>
# <% end %>
#
# @example Max widths
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% end %>
#
# @example Max widths on new lines
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 300, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% end %>
# <br/>
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 200, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% end %>
# <br/>
# <%= render(Primer::Beta::Truncate.new) do |component| %>
# <% component.item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% component.with_item(max_width: 100, expandable: true) do %>branch-name-that-is-really-long-branch-name-that-is-really-long-branch-name-that-is-really-long<% end %>
# <% end %>
#
# @param system_arguments [Hash] <%= link_to_system_arguments_docs %>
Expand Down
2 changes: 1 addition & 1 deletion static/statuses.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@
"Primer::Beta::BaseButton": "beta",
"Primer::Beta::Blankslate": "beta",
"Primer::Beta::BorderBox": "beta",
"Primer::Beta::BorderBox::Header": "alpha",
"Primer::Beta::BorderBox::Header": "beta",
"Primer::Beta::Breadcrumbs": "beta",
"Primer::Beta::Breadcrumbs::Item": "alpha",
"Primer::Beta::ButtonGroup": "beta",
Expand Down

0 comments on commit 4d1e8d2

Please sign in to comment.