Skip to content

Commit 2906d96

Browse files
lindseywildkhiga8
andauthored
Updates Button and ButtonMarketing Lookbook previews with accessible examples (primer#2802)
Co-authored-by: lindseywild <[email protected]> Co-authored-by: Kate Higa <[email protected]>
1 parent d81824c commit 2906d96

File tree

13 files changed

+118
-20
lines changed

13 files changed

+118
-20
lines changed

.changeset/twenty-drinks-peel.md

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@primer/view-components": patch
3+
---
4+
5+
Updates Button and ButtonMarketing docs with markup requirements

app/components/primer/alpha/button_marketing.rb

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,8 @@
33
module Primer
44
module Alpha
55
# Use `ButtonMarketing` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
6+
# @accessibility
7+
# Setting the tag argument to `:a` requires you to pass in an `href` attribute.
68
class ButtonMarketing < Primer::Component
79
DEFAULT_SCHEME = :default
810
SCHEME_MAPPINGS = {

app/components/primer/beta/button.rb

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,11 @@
33
module Primer
44
module Beta
55
# Use `Button` for actions (e.g. in forms). Use links for destinations, or moving from one page to another.
6+
# @accessibility
7+
# Additional markup is required if setting the `tag` argument to either `:a` or `:summary`.
8+
#
9+
# * `:a` requires you to pass in an `href` attribute
10+
# * `:summary` requires you to wrap the component in a `<details>` element
611
class Button < Primer::Component
712
status :beta
813

previews/primer/alpha/button_marketing_preview.rb

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ class ButtonMarketingPreview < ViewComponent::Preview
77
# @label Playground
88
# @param scheme [Symbol] select [default, primary, outline, transparent]
99
# @param variant [Symbol] select [default, large]
10-
# @param tag [Symbol] select [button, a]
1110
# @param type [Symbol] select [button, submit]
1211
# @param disabled [Boolean]
1312
def playground(tag: :button, type: :button, scheme: :default, variant: :default, disabled: false)
@@ -17,12 +16,20 @@ def playground(tag: :button, type: :button, scheme: :default, variant: :default,
1716
# @label Default options
1817
# @param scheme [Symbol] select [default, primary, outline, transparent]
1918
# @param variant [Symbol] select [default, large]
20-
# @param tag [Symbol] select [button, a]
2119
# @param type [Symbol] select [button, submit]
2220
def default(tag: :button, type: :button, scheme: :default, variant: :default)
2321
render(Primer::Alpha::ButtonMarketing.new(tag: tag, type: type, scheme: scheme, variant: variant)) { "Default" }
2422
end
2523

24+
# @label Link as button options
25+
# @param scheme [Symbol] select [default, primary, outline, transparent]
26+
# @param variant [Symbol] select [default, large]
27+
# @param type [Symbol] select [button, submit]
28+
# @param href [String]
29+
def link_as_button(tag: :a, href: "#", type: :button, scheme: :default, variant: :default)
30+
render(Primer::Alpha::ButtonMarketing.new(tag: tag, href: href, type: type, scheme: scheme, variant: variant)) { "Default" }
31+
end
32+
2633
# @!group Size Variants
2734
# @snapshot
2835
#

previews/primer/beta/button_group_preview.rb

Lines changed: 3 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -63,22 +63,18 @@ def icon_buttons(size: :medium)
6363
end
6464
end
6565

66-
# @label Button group with all tags
66+
# @label Button group with multiple tags
6767
# @snapshot
68-
def all_tags
68+
def multiple_tags
6969
render(Primer::Beta::ButtonGroup.new) do |component|
7070
component.with_button(id: "button-1", tag: :button) do |button|
7171
button.with_tooltip(text: "Button Tooltip")
7272
"Button 1"
7373
end
74-
component.with_button(id: "button-2", tag: :a) do |button|
74+
component.with_button(id: "button-2", tag: :a, href: "#") do |button|
7575
button.with_tooltip(text: "Button Tooltip")
7676
"Button 2"
7777
end
78-
component.with_button(id: "button-3", tag: :summary) do |button|
79-
button.with_tooltip(text: "Button Tooltip")
80-
"Button 3"
81-
end
8278
end
8379
end
8480

previews/primer/beta/button_preview.rb

Lines changed: 26 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,6 @@ class ButtonPreview < ViewComponent::Preview
2020
# @param disabled toggle
2121
# @param inactive toggle
2222
# @param align_content select [center, start]
23-
# @param tag select [a, summary, button]
2423
# @param label_wrap toggle
2524
def playground(
2625
scheme: :default,
@@ -51,7 +50,6 @@ def playground(
5150
# @label Default
5251
# @param block toggle
5352
# @param disabled toggle
54-
# @param tag select [a, summary, button]
5553
def default(
5654
block: false,
5755
id: "button-preview",
@@ -73,7 +71,6 @@ def default(
7371
# @label Primary
7472
# @param block toggle
7573
# @param disabled toggle
76-
# @param tag select [a, summary, button]
7774
def primary(
7875
id: "button-preview",
7976
block: false,
@@ -95,7 +92,6 @@ def primary(
9592
# @label Danger
9693
# @param block toggle
9794
# @param disabled toggle
98-
# @param tag select [a, summary, button]
9995
def danger(
10096
id: "button-preview",
10197
block: false,
@@ -117,7 +113,6 @@ def danger(
117113
# @label Invisible
118114
# @param block toggle
119115
# @param disabled toggle
120-
# @param tag select [a, summary, button]
121116
def invisible(
122117
id: "button-preview",
123118
block: false,
@@ -145,7 +140,6 @@ def invisible_all_visuals
145140
# @label Link
146141
# @param block toggle
147142
# @param disabled toggle
148-
# @param tag select [a, summary, button]
149143
# @snapshot
150144
def link(
151145
id: "button-preview",
@@ -178,7 +172,6 @@ def all_schemes(
178172

179173
# @label Full width
180174
# @param disabled toggle
181-
# @param tag select [a, summary, button]
182175
# @snapshot
183176
def full_width(
184177
id: "button-preview",
@@ -222,6 +215,7 @@ def label_wrap(
222215
# @param size select [small, medium]
223216
# @param block toggle
224217
# @param align_content select [center, start]
218+
# @param href
225219
# @snapshot
226220
def link_as_button(
227221
scheme: :default,
@@ -245,20 +239,43 @@ def link_as_button(
245239
end
246240
end
247241

242+
# @label Summary as button
243+
# @param scheme select [default, primary, danger, invisible, link]
244+
# @param size select [small, medium]
245+
# @param block toggle
246+
# @param align_content select [center, start]
247+
# @snapshot
248+
def summary_as_button(
249+
scheme: :default,
250+
size: :medium,
251+
block: false,
252+
id: "button-preview",
253+
align_content: :center,
254+
tag: :summary
255+
)
256+
render_with_template(locals: {
257+
scheme: scheme,
258+
size: size,
259+
block: block,
260+
id: id,
261+
align_content: align_content,
262+
tag: tag
263+
})
264+
end
265+
248266
# @label Trailing visual
249267
# @param scheme select [default, primary, danger, invisible, link]
250268
# @param size select [small, medium]
251269
# @param block toggle
252270
# @param align_content select [center, start]
253-
# @param tag select [a, summary, button]
254271
# @snapshot
255272
def trailing_visual(
256273
scheme: :default,
257274
size: :medium,
258275
block: false,
259276
id: "button-preview",
260277
align_content: :center,
261-
tag: :a
278+
tag: :button
262279
)
263280
render_with_template(locals: {
264281
scheme: scheme,

0 commit comments

Comments
 (0)