From 5528fc64ff059514c4d1217726d56e3a26f7a4d1 Mon Sep 17 00:00:00 2001 From: k0va1 Date: Wed, 9 Aug 2023 16:22:36 +0100 Subject: [PATCH 1/2] add helper to convenient render locals --- demo/config/initializers/view_component_preview.rb | 10 ++++++++++ 1 file changed, 10 insertions(+) create mode 100644 demo/config/initializers/view_component_preview.rb diff --git a/demo/config/initializers/view_component_preview.rb b/demo/config/initializers/view_component_preview.rb new file mode 100644 index 00000000..38e8e18a --- /dev/null +++ b/demo/config/initializers/view_component_preview.rb @@ -0,0 +1,10 @@ +module RenderWithLocals + def render_with_locals(bind) + caller_method_name = caller_locations(1, 1)[0].label + parameter_names = method(caller_method_name).parameters.map(&:last) + locals = parameter_names.index_with { |name| bind.local_variable_get(name) } + render_with_template(locals: locals) + end +end + +ViewComponent::Preview.include(RenderWithLocals) From bac59c7ef918c750935f2c225416cc093d983a14 Mon Sep 17 00:00:00 2001 From: k0va1 Date: Wed, 9 Aug 2023 16:23:08 +0100 Subject: [PATCH 2/2] add docs to ButtonComponent --- demo/app/previews/button_component_preview.rb | 134 +++++++++++++++--- .../button_component_preview/default.html.erb | 20 +++ .../destructive.html.erb | 2 +- .../disable_with_loader.html.erb | 2 +- .../disabled.html.erb | 2 +- .../disclosure.html.erb | 6 +- .../external.html.erb | 2 +- .../full_width.html.erb | 2 +- .../icon_only.html.erb | 2 +- .../button_component_preview/large.html.erb | 2 +- .../button_component_preview/loading.html.erb | 2 +- .../button_component_preview/outline.html.erb | 2 +- .../outline_monochrome.html.erb | 2 +- .../button_component_preview/plain.html.erb | 2 +- .../plain_destructive.html.erb | 2 +- .../plain_monochrome.html.erb | 2 +- .../plain_monochrome_no_underline.html.erb | 2 +- .../button_component_preview/pressed.html.erb | 2 +- .../button_component_preview/primary.html.erb | 2 +- .../button_component_preview/slim.html.erb | 2 +- .../text_aligned.html.erb | 2 +- .../with_icon_name.html.erb | 4 +- 22 files changed, 154 insertions(+), 46 deletions(-) create mode 100644 demo/app/previews/button_component_preview/default.html.erb diff --git a/demo/app/previews/button_component_preview.rb b/demo/app/previews/button_component_preview.rb index f47ea91a..8cb0124f 100644 --- a/demo/app/previews/button_component_preview.rb +++ b/demo/app/previews/button_component_preview.rb @@ -1,70 +1,164 @@ class ButtonComponentPreview < ViewComponent::Preview + # Button Component + # ------------ + # Buttons are used primarily for actions, such as “Add”, “Close”, “Cancel”, or “Save”. + # Plain buttons, which look similar to links, are used for less important or less commonly used actions, + # such as “view shipping settings”. + # + # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops" + # @param plain toggle "Renders a button that looks like a link" + # @param primary toggle "Provides extra visual weight and identifies the primary action in a set of buttons" + # @param pressed toggle "Sets the button in a pressed state" + # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons." + # @param loading toggle "Replaces button text with a spinner while a background action is being performed" + # @param destructive toggle "Indicates a dangerous or potentially negative action" + # @param disabled toggle "Disables the button, disallowing merchant interaction" + # @param disable_with_loader toggle "Disables the button and shows loading spinner on click" + # @param disclosure select "Displays the button with a disclosure icon" {{Polaris::ButtonComponent::DISCLOSURE_OPTIONS}} + # @param url text "Button acts as link" + # @param external toggle "Forces url to open in a new tab" + # @param full_width toggle "Allows the button to grow to the width of its container" + # @param submit toggle "Allows the button to submit a form" + # @param remove_underline toggle "Removes underline from button text (including on interaction) when `monochrome` and `plain` are true" + # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}} + # @param text_align select "Position of text" {{Polaris::ButtonComponent::TEXT_ALIGN_MAPPINGS.keys}} + # @param icon_name text "Adds icon to the button" + def default( + outline: false, + plain: false, + primary: false, + pressed: false, + monochrome: false, + loading: false, + destructive: false, + disabled: false, + disable_with_loader: false, + disclosure: Polaris::ButtonComponent::DISCLOSURE_DEFAULT, + url: nil, + external: false, + full_width: false, + submit: false, + remove_underline: false, + size: Polaris::ButtonComponent::SIZE_DEFAULT, + text_align: Polaris::ButtonComponent::TEXT_ALIGN_DEFAULT, + icon_name: "CirclePlusMinor" + ) + render_with_locals(binding) + end + def basic end - def outline + # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops" + def outline(outline: true) + render_with_locals(binding) end - def outline_monochrome + # @param outline toggle "Gives the button a subtle alternative to the default button styling, appropriate for certain backdrops" + # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons." + def outline_monochrome(outline: true, monochrome: true) + render_with_locals(binding) end - def plain + # @param plain toggle "Renders a button that looks like a link" + def plain(plain: true) + render_with_locals(binding) end - def plain_monochrome + # @param plain toggle "Renders a button that looks like a link" + # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons." + def plain_monochrome(plain: true, monochrome: true) + render_with_locals(binding) end - def plain_monochrome_no_underline + # @param plain toggle "Renders a button that looks like a link" + # @param monochrome toggle "Makes `plain` and `outline` Button colors (text, borders, icons) the same as the current text color. Also adds an underline to `plain` Buttons." + # @param remove_underline toggle "Removes underline from button text (including on interaction) when `monochrome` and `plain` are true" + def plain_monochrome_no_underline(plain: true, monochrome: true, remove_underline: true) + render_with_locals(binding) end - def plain_destructive + # @param plain toggle "Renders a button that looks like a link" + # @param destructive toggle "Indicates a dangerous or potentially negative action" + def plain_destructive(plain: true, destructive: true) + render_with_locals(binding) end - def primary + # @param primary toggle "Provides extra visual weight and identifies the primary action in a set of buttons" + def primary(primary: true) + render_with_locals(binding) end - def destructive + # @param destructive toggle "Indicates a dangerous or potentially negative action" + def destructive(destructive: true) + render_with_locals(binding) end - def slim + # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}} + def slim(size: :slim) + render_with_locals(binding) end - def large + # @param size select "Size of button" {{Polaris::ButtonComponent::SIZE_MAPPINGS.keys}} + def large(size: :large) + render_with_locals(binding) end - def full_width + # @param full_width toggle "Allows the button to grow to the width of its container" + def full_width(full_width: true) + render_with_locals(binding) end - def text_aligned + # @param plain toggle "Renders a button that looks like a link" + # @param text_align select "Position of text" {{Polaris::ButtonComponent::TEXT_ALIGN_MAPPINGS.keys}} + def text_aligned(plain: true, text_align: :left) + render_with_locals(binding) end - def pressed + # @param pressed toggle "Sets the button in a pressed state" + def pressed(pressed: true) + render_with_locals(binding) end - def disclosure + # @param disclosure select "Displays the button with a disclosure icon" {{Polaris::ButtonComponent::DISCLOSURE_OPTIONS}} + def disclosure(disclosure: :up) + render_with_locals(binding) end - def disabled + # @param disabled toggle "Disables the button, disallowing merchant interaction" + def disabled(disabled: true) + render_with_locals(binding) end def disable_with_actions end - def disable_with_loader + # @param disable_with_loader toggle "Disables the button and shows loading spinner on click" + def disable_with_loader(disable_with_loader: true) + render_with_locals(binding) end - def loading + # @param loading toggle "Replaces button text with a spinner while a background action is being performed" + def loading(loading: true) + render_with_locals(binding) end def text_with_icon end - def icon_only + # @param url text "Button acts as link" + def icon_only(url: "https://shopify.com") + render_with_locals(binding) end - def with_icon_name + # @param icon_name text "Adds icon to the button" + def with_icon_name(icon_name: "CirclePlusMajor") + render_with_locals(binding) end - def external + # @param url text "Button acts as link" + # @param external toggle "Forces url to open in a new tab" + def external(url: "https://shopify.dev", external: true) + render_with_locals(binding) end end diff --git a/demo/app/previews/button_component_preview/default.html.erb b/demo/app/previews/button_component_preview/default.html.erb new file mode 100644 index 00000000..9c70d03c --- /dev/null +++ b/demo/app/previews/button_component_preview/default.html.erb @@ -0,0 +1,20 @@ +<%= polaris_button( + url: url, + outline: outline, + plain: plain, + primary: primary, + pressed: pressed, + monochrome: monochrome, + loading: loading, + destructive: destructive, + disabled: disabled, + disable_with_loader: disable_with_loader, + disclosure: disclosure, + external: external, + full_width: full_width, + submit: submit, + remove_underline: remove_underline, + size: size, + text_align: text_align, + icon_name: icon_name +) { "Add product" } %> diff --git a/demo/app/previews/button_component_preview/destructive.html.erb b/demo/app/previews/button_component_preview/destructive.html.erb index 54cfc6cc..bc714ade 100644 --- a/demo/app/previews/button_component_preview/destructive.html.erb +++ b/demo/app/previews/button_component_preview/destructive.html.erb @@ -1 +1 @@ -<%= polaris_button(destructive: true) { "Delete theme" } %> +<%= polaris_button(destructive: destructive) { "Delete theme" } %> diff --git a/demo/app/previews/button_component_preview/disable_with_loader.html.erb b/demo/app/previews/button_component_preview/disable_with_loader.html.erb index a9e9be1b..3f5a0370 100644 --- a/demo/app/previews/button_component_preview/disable_with_loader.html.erb +++ b/demo/app/previews/button_component_preview/disable_with_loader.html.erb @@ -1 +1 @@ -<%= polaris_button(disable_with_loader: true) { "Disable on click" } %> +<%= polaris_button(disable_with_loader: disable_with_loader) { "Disable on click" } %> diff --git a/demo/app/previews/button_component_preview/disabled.html.erb b/demo/app/previews/button_component_preview/disabled.html.erb index 6e8789e8..b45eea44 100644 --- a/demo/app/previews/button_component_preview/disabled.html.erb +++ b/demo/app/previews/button_component_preview/disabled.html.erb @@ -1 +1 @@ -<%= polaris_button(disabled: true) { "Buy shipping label" } %> +<%= polaris_button(disabled: disabled) { "Buy shipping label" } %> diff --git a/demo/app/previews/button_component_preview/disclosure.html.erb b/demo/app/previews/button_component_preview/disclosure.html.erb index 726ca10f..b7dd1a22 100644 --- a/demo/app/previews/button_component_preview/disclosure.html.erb +++ b/demo/app/previews/button_component_preview/disclosure.html.erb @@ -1,7 +1,3 @@ <%= polaris_text_container do %> - <%= polaris_button(disclosure: true) { "Show more" } %> - <%= polaris_button(disclosure: :down) { "Show more" } %> - <%= polaris_button(disclosure: :up) { "Show more" } %> - <%= polaris_button(disclosure: :select) { "Show more" } %> - <%= polaris_button(disclosure: true, plain: true) { "Show more" } %> + <%= polaris_button(disclosure: disclosure) { "Show more" } %> <% end %> diff --git a/demo/app/previews/button_component_preview/external.html.erb b/demo/app/previews/button_component_preview/external.html.erb index ee1251f2..2c0a0070 100644 --- a/demo/app/previews/button_component_preview/external.html.erb +++ b/demo/app/previews/button_component_preview/external.html.erb @@ -1 +1 @@ -<%= polaris_button(url: "https://shopify.dev", external: true) { "Shopify" } %> +<%= polaris_button(url: url, external: external) { "Shopify" } %> diff --git a/demo/app/previews/button_component_preview/full_width.html.erb b/demo/app/previews/button_component_preview/full_width.html.erb index e6d8c4a8..85fd2804 100644 --- a/demo/app/previews/button_component_preview/full_width.html.erb +++ b/demo/app/previews/button_component_preview/full_width.html.erb @@ -1,3 +1,3 @@
- <%= polaris_button(full_width: true) { "Add customer" } %> + <%= polaris_button(full_width: full_width) { "Add customer" } %>
diff --git a/demo/app/previews/button_component_preview/icon_only.html.erb b/demo/app/previews/button_component_preview/icon_only.html.erb index db862385..908453ac 100644 --- a/demo/app/previews/button_component_preview/icon_only.html.erb +++ b/demo/app/previews/button_component_preview/icon_only.html.erb @@ -1,3 +1,3 @@ -<%= polaris_button(url: "https://shopify.com") do |button| %> +<%= polaris_button(url: url) do |button| %> <% button.with_icon(name: "ArrowLeftMinor") %> <% end %> diff --git a/demo/app/previews/button_component_preview/large.html.erb b/demo/app/previews/button_component_preview/large.html.erb index fdfd3862..eaafc8d6 100644 --- a/demo/app/previews/button_component_preview/large.html.erb +++ b/demo/app/previews/button_component_preview/large.html.erb @@ -1 +1 @@ -<%= polaris_button(size: :large) { "Create store" } %> +<%= polaris_button(size: size) { "Create store" } %> diff --git a/demo/app/previews/button_component_preview/loading.html.erb b/demo/app/previews/button_component_preview/loading.html.erb index d56ec769..21f4acb4 100644 --- a/demo/app/previews/button_component_preview/loading.html.erb +++ b/demo/app/previews/button_component_preview/loading.html.erb @@ -1 +1 @@ -<%= polaris_button(loading: true) { "Save product" } %> +<%= polaris_button(loading: loading) { "Save product" } %> diff --git a/demo/app/previews/button_component_preview/outline.html.erb b/demo/app/previews/button_component_preview/outline.html.erb index b43e71fa..eb5d6f25 100644 --- a/demo/app/previews/button_component_preview/outline.html.erb +++ b/demo/app/previews/button_component_preview/outline.html.erb @@ -1 +1 @@ -<%= polaris_button(outline: true) { "Add product" } %> +<%= polaris_button(outline: outline) { "Add product" } %> diff --git a/demo/app/previews/button_component_preview/outline_monochrome.html.erb b/demo/app/previews/button_component_preview/outline_monochrome.html.erb index 88c5719e..70f77e22 100644 --- a/demo/app/previews/button_component_preview/outline_monochrome.html.erb +++ b/demo/app/previews/button_component_preview/outline_monochrome.html.erb @@ -1,3 +1,3 @@
- <%= polaris_button(monochrome: true, outline: true) { "Retry" } %> + <%= polaris_button(monochrome: monochrome, outline: outline) { "Retry" } %>
diff --git a/demo/app/previews/button_component_preview/plain.html.erb b/demo/app/previews/button_component_preview/plain.html.erb index ef65888f..e3ba5050 100644 --- a/demo/app/previews/button_component_preview/plain.html.erb +++ b/demo/app/previews/button_component_preview/plain.html.erb @@ -1 +1 @@ -<%= polaris_button(plain: true) { "View shipping settings" } %> +<%= polaris_button(plain: plain) { "View shipping settings" } %> diff --git a/demo/app/previews/button_component_preview/plain_destructive.html.erb b/demo/app/previews/button_component_preview/plain_destructive.html.erb index 291cb6e7..faf177f9 100644 --- a/demo/app/previews/button_component_preview/plain_destructive.html.erb +++ b/demo/app/previews/button_component_preview/plain_destructive.html.erb @@ -1 +1 @@ -<%= polaris_button(plain: true, destructive: true) { "Remove" } %> +<%= polaris_button(plain: plain, destructive: destructive) { "Remove" } %> diff --git a/demo/app/previews/button_component_preview/plain_monochrome.html.erb b/demo/app/previews/button_component_preview/plain_monochrome.html.erb index daf6fe16..763af191 100644 --- a/demo/app/previews/button_component_preview/plain_monochrome.html.erb +++ b/demo/app/previews/button_component_preview/plain_monochrome.html.erb @@ -1,4 +1,4 @@
Could not retrieve data. - <%= polaris_button(plain: true, monochrome: true) { "Try again" } %> + <%= polaris_button(plain: plain, monochrome: monochrome) { "Try again" } %>
diff --git a/demo/app/previews/button_component_preview/plain_monochrome_no_underline.html.erb b/demo/app/previews/button_component_preview/plain_monochrome_no_underline.html.erb index 6e19952e..4b0a16a9 100644 --- a/demo/app/previews/button_component_preview/plain_monochrome_no_underline.html.erb +++ b/demo/app/previews/button_component_preview/plain_monochrome_no_underline.html.erb @@ -1 +1 @@ -<%= polaris_button(plain: true, monochrome: true, remove_underline: true) { "Try again" } %> +<%= polaris_button(plain: plain, monochrome: monochrome, remove_underline: remove_underline) { "Try again" } %> diff --git a/demo/app/previews/button_component_preview/pressed.html.erb b/demo/app/previews/button_component_preview/pressed.html.erb index 2b20716e..f18703c0 100644 --- a/demo/app/previews/button_component_preview/pressed.html.erb +++ b/demo/app/previews/button_component_preview/pressed.html.erb @@ -1,4 +1,4 @@ <%= polaris_button_group(segmented: true) do |group| %> - <%= group.with_button(pressed: true) { "First button" } %> + <%= group.with_button(pressed: pressed) { "First button" } %> <%= group.with_button { "Second button" } %> <% end %> diff --git a/demo/app/previews/button_component_preview/primary.html.erb b/demo/app/previews/button_component_preview/primary.html.erb index eab024fb..bd400d96 100644 --- a/demo/app/previews/button_component_preview/primary.html.erb +++ b/demo/app/previews/button_component_preview/primary.html.erb @@ -1 +1 @@ -<%= polaris_button(primary: true) { "Save theme" } %> +<%= polaris_button(primary: primary) { "Save theme" } %> diff --git a/demo/app/previews/button_component_preview/slim.html.erb b/demo/app/previews/button_component_preview/slim.html.erb index 2276e31f..d9bfea83 100644 --- a/demo/app/previews/button_component_preview/slim.html.erb +++ b/demo/app/previews/button_component_preview/slim.html.erb @@ -1 +1 @@ -<%= polaris_button(size: :slim) { "Save variant" } %> +<%= polaris_button(size: size) { "Save variant" } %> diff --git a/demo/app/previews/button_component_preview/text_aligned.html.erb b/demo/app/previews/button_component_preview/text_aligned.html.erb index c837073a..c21e9fab 100644 --- a/demo/app/previews/button_component_preview/text_aligned.html.erb +++ b/demo/app/previews/button_component_preview/text_aligned.html.erb @@ -1,4 +1,4 @@ -<%= polaris_button(plain: true, text_align: :left) do %> +<%= polaris_button(plain: plain, text_align: text_align) do %> This is a really long string of text that overflows onto the next line we need to put in a lot of words now you can see the alignment. It is very long but a customer could potentially name something this long. diff --git a/demo/app/previews/button_component_preview/with_icon_name.html.erb b/demo/app/previews/button_component_preview/with_icon_name.html.erb index cb4f04a8..d27fe6b9 100644 --- a/demo/app/previews/button_component_preview/with_icon_name.html.erb +++ b/demo/app/previews/button_component_preview/with_icon_name.html.erb @@ -1,3 +1 @@ -<%= polaris_button(url: "https://shopify.com", icon_name: "ArrowLeftMinor") %> - -<%= polaris_button(icon_name: "CirclePlusMajor") { "Add product" } %> +<%= polaris_button(icon_name: icon_name) { "Add product" } %>