From 53a04da32ad9d93be9610085a41231500342b7be Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 20 Sep 2022 23:29:49 +0000 Subject: [PATCH 1/3] Adding optional wrapper arguments to IconButton --- app/components/primer/beta/icon_button.html.erb | 2 +- app/components/primer/beta/icon_button.rb | 4 +++- docs/src/@primer/gatsby-theme-doctocat/nav.yml | 2 ++ static/arguments.yml | 4 ++++ test/components/primer/beta/icon_button_test.rb | 6 ++++++ 5 files changed, 16 insertions(+), 2 deletions(-) diff --git a/app/components/primer/beta/icon_button.html.erb b/app/components/primer/beta/icon_button.html.erb index 9259ab0eaa..a172ec2150 100644 --- a/app/components/primer/beta/icon_button.html.erb +++ b/app/components/primer/beta/icon_button.html.erb @@ -1,4 +1,4 @@ -<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip") do %> +<%= render Primer::ConditionalWrapper.new(condition: render_tooltip?, tag: :div, classes: "Button-withTooltip", **@wrapper_arguments) do %> <%= render Primer::Beta::BaseButton.new(**@system_arguments) do -%> <%= render Primer::OcticonComponent.new(icon: @icon, classes: "Button-visual") %> <% end -%> diff --git a/app/components/primer/beta/icon_button.rb b/app/components/primer/beta/icon_button.rb index 24d5a77fb4..2c26aa3fc3 100644 --- a/app/components/primer/beta/icon_button.rb +++ b/app/components/primer/beta/icon_button.rb @@ -47,6 +47,7 @@ class IconButton < Primer::Component # <%= render(Primer::Beta::IconButton.new(icon: :search, "aria-label": "Search", tooltip_direction: :e)) %> # # @param icon [String] Name of <%= link_to_octicons %> to use. + # @param wrapper_arguments [Hash] Optional keyword arguments to be passed to the wrapper `
` tag. # @param scheme [Symbol] <%= one_of(Primer::Beta::IconButton::SCHEME_OPTIONS) %> # @param size [Symbol] <%= one_of(Primer::Beta::Button::SIZE_OPTIONS) %> # @param tag [Symbol] <%= one_of(Primer::Beta::BaseButton::TAG_OPTIONS) %> @@ -55,9 +56,10 @@ class IconButton < Primer::Component # @param aria-description [String] String that can be read by assistive technology. A description can be longer as it is intended to provide more context and information. See the accessibility section for more information. # @param tooltip_direction [Symbol] (Primer::Alpha::Tooltip::DIRECTION_DEFAULT) <%= one_of(Primer::Alpha::Tooltip::DIRECTION_OPTIONS) %> # @param system_arguments [Hash] <%= link_to_system_arguments_docs %> - def initialize(icon:, scheme: DEFAULT_SCHEME, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments) + def initialize(icon:, scheme: DEFAULT_SCHEME, wrapper_arguments: {}, tooltip_direction: Primer::Alpha::Tooltip::DIRECTION_DEFAULT, size: Primer::Beta::Button::DEFAULT_SIZE, **system_arguments) @icon = icon + @wrapper_arguments = wrapper_arguments @system_arguments = system_arguments @system_arguments[:id] ||= "icon-button-#{SecureRandom.hex(4)}" diff --git a/docs/src/@primer/gatsby-theme-doctocat/nav.yml b/docs/src/@primer/gatsby-theme-doctocat/nav.yml index 60688affed..7406a1bcf7 100644 --- a/docs/src/@primer/gatsby-theme-doctocat/nav.yml +++ b/docs/src/@primer/gatsby-theme-doctocat/nav.yml @@ -123,3 +123,5 @@ url: "/adr/0250-developing-and-publishing-clientside-behaviours" - title: 251. Use Catalyst for client-side behaviours url: "/adr/0251-use-catalyst-for-client-side-behaviours" + - title: 252. Build component css with ruby code + url: "/adr/0252-build-component-css-with-ruby-code" diff --git a/static/arguments.yml b/static/arguments.yml index c14959d779..103aa7dbc8 100644 --- a/static/arguments.yml +++ b/static/arguments.yml @@ -703,6 +703,10 @@ type: String default: N/A description: Name of [Octicon](https://primer.style/octicons/) to use. + - name: wrapper_arguments + type: Hash + default: "`{}`" + description: Optional keyword arguments to be passed to the wrapper `
` tag. - name: scheme type: Symbol default: "`:default`" diff --git a/test/components/primer/beta/icon_button_test.rb b/test/components/primer/beta/icon_button_test.rb index b52007eb45..3c3c8d4782 100644 --- a/test/components/primer/beta/icon_button_test.rb +++ b/test/components/primer/beta/icon_button_test.rb @@ -13,4 +13,10 @@ def test_renders end assert_selector("tool-tip", text: "Star", visible: :all) end + + def test_adds_wrapper_arguments + render_inline(Primer::Beta::IconButton.new(icon: :star, "aria-label": "Star", wrapper_arguments: { id: "foo" })) + + assert_selector(".Button-withTooltip#foo") + end end From 12c9bbea42f12bac12f3e0908d38efd33d760fa7 Mon Sep 17 00:00:00 2001 From: Jon Rohan Date: Tue, 20 Sep 2022 16:32:17 -0700 Subject: [PATCH 2/3] Create wicked-jokes-shave.md --- .changeset/wicked-jokes-shave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/wicked-jokes-shave.md diff --git a/.changeset/wicked-jokes-shave.md b/.changeset/wicked-jokes-shave.md new file mode 100644 index 0000000000..cac7b264bd --- /dev/null +++ b/.changeset/wicked-jokes-shave.md @@ -0,0 +1,5 @@ +--- +"@primer/view-components": patch +--- + +Adding optional wrapper arguments to IconButton From a3d346962e827e6498dc60cd80211e43a455cd50 Mon Sep 17 00:00:00 2001 From: Actions Auto Build Date: Wed, 21 Sep 2022 18:07:44 +0000 Subject: [PATCH 3/3] docs: build docs --- static/arguments.json | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/static/arguments.json b/static/arguments.json index 8b373f8140..dde6608bd0 100644 --- a/static/arguments.json +++ b/static/arguments.json @@ -1047,6 +1047,12 @@ "default": "N/A", "description": "Name of [Octicon](https://primer.style/octicons/) to use." }, + { + "name": "wrapper_arguments", + "type": "Hash", + "default": "`{}`", + "description": "Optional keyword arguments to be passed to the wrapper `
` tag." + }, { "name": "scheme", "type": "Symbol",