Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update slot use in examples for all components in the beta folder #1293

Merged
merged 16 commits into from
Aug 10, 2022
Merged

Update slot use in examples for all components in the beta folder #1293

Show file tree
Hide file tree
Changes from 14 commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
43aaf10
added changeset
mxriverlynn Aug 10, 2022
5076175
updating slot use for the borderbox header
mxriverlynn Aug 10, 2022
15b1b0b
updating slot use for auto complete
mxriverlynn Aug 10, 2022
77b2b7a
updating slot use for avatar stack
mxriverlynn Aug 10, 2022
a7c7487
updating slot use for blank slate
mxriverlynn Aug 10, 2022
35e3270
updating slot use for bread crumbs
mxriverlynn Aug 10, 2022
0785056
updating slot use for button group
mxriverlynn Aug 10, 2022
6df97ef
updating slot use for flash
mxriverlynn Aug 10, 2022
e344f50
updating slot use for truncate
mxriverlynn Aug 10, 2022
e217f39
Merge remote-tracking branch 'origin/main' into mxriverlynn/beta-comp…
mxriverlynn Aug 10, 2022
98ed5ed
resetting .leading_visual_icon
mxriverlynn Aug 10, 2022
a0bf345
correcting blank slate
mxriverlynn Aug 10, 2022
880d106
added missing status :beta to header
mxriverlynn Aug 10, 2022
b01662c
docs: build docs
actions-user Aug 10, 2022
f21ce0a
Merge remote-tracking branch 'origin/main' into mxriverlynn/beta-comp…
mxriverlynn Aug 10, 2022
e5c4d1d
Merge remote-tracking branch 'origin/mxriverlynn/beta-component-slot-…
mxriverlynn Aug 10, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/silver-rice-lie.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

i was previously told sub components don't need a status, but i found that they show up as alpha status in static/statuses.json if they don't have one specifically set. so i think we should include them


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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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