From 8a7474542c1fc710b0f2013dde7fba9766a11791 Mon Sep 17 00:00:00 2001 From: lizziekoshelev Date: Thu, 23 Mar 2023 10:31:14 -1000 Subject: [PATCH 1/5] added buttons --- docs/teamshares/recipes/buttons | 216 ++++++++++++++++++++++++++++++++ 1 file changed, 216 insertions(+) create mode 100644 docs/teamshares/recipes/buttons diff --git a/docs/teamshares/recipes/buttons b/docs/teamshares/recipes/buttons new file mode 100644 index 0000000000..c11f61b046 --- /dev/null +++ b/docs/teamshares/recipes/buttons @@ -0,0 +1,216 @@ +# Button Playbook + +# Types of buttons + +## 1. Link buttons + + + +### Before + +``` += render SharedUI::ButtonComponent.new(\ + text: "Schedule prep session", + link: "https://www.calendly.com/mickmoylan", + icon: "calendar_icon", + external: true, + method: "get", + size: "medium", + type: "outlined") +``` + +### After + +``` +sl-button[size="large" pill href="https://www.calendly.com/mickmoylan" target="_blank"] + sl-icon[slot="prefix" name="calendar"] + | Schedule prep session +``` + + + +## 2. Submit button + + + +### Before + +``` += render SharedUI::ButtonComponent.new(\ + text: "Accept", + type: "primary", + data: { test_id: "accept-event-button" }, + submit: true, + disabled: preview ? true : false, + options: { classes: "ml-2", name: "accept", value: "Accept" }) +``` + +### After + +```jsx +sl-button[size="large" pill type="submit" data-test_id="accept-event-button" variant="primary" disabled="#{preview ? true : false}"] + | Accept +``` + +## 3. Disabled button + +### Before + +``` +render SharedUI::ButtonComponent.new( + text: "Previous", + link: nil, + disabled: true, + size: "small", + type: "outlined", +) +``` + +### After + +```jsx +sl-button[size="small" pill disabled="true"] + | Previous +``` + + + +```jsx + + content_tag("sl-button", "Previous", pill: true, disabled: true, size: "small") +``` + +## 4. Stimulus Button + +### Before + +``` +render SharedUI::ButtonComponent.new( + text: "Complete", + link:complete_path, + data: { + "education--presentation-target" => "nextLink", + }, + submit: true, + size: "small", + type: "primary", +) +``` + +### After (this example uses a content tag) + +```jsx +content_tag("sl-button", "Complete", variant: "primary", href: complete_path, pill: true, size: "small", type: "submit", "data-education--presentation-target": "nextLink") +``` + +## 5. Modal button + +### Before + +``` +render SharedUI::ButtonComponent.new( + text: "Presentations", + link:path, + modal: true, + method: "get", + size: "medium", + type: "outlined", +) +``` + +### After (this example uses a content tag) + + + +```jsx +content_tag("sl-button", "Presentations", size: "large", pill: true, href: *path*, "data-toggle": "modal", "data-remote": true, "data-dismissible": true, "data-close-others": true, "data-method": "get") +``` + + + +``` +yarn cache clean && rm -rf node_modules +``` + +``` +yarn add https://github.com/teamshares/shared-ui.git#main +``` + +``` +yarn build --watch +``` + +## 6. Internal link/path with no explicit associated form + + + +### Before + +``` += render SharedUI::ButtonComponent.new( + text: "Complete", + link: complete_path, + data: { + "education--presentation-target" => "nextLink", + }, + submit: true, + size: "small", + type: "primary", + ) +``` + +### After + +```jsx +# the default method here is "post", can pass in a method field to change += render SharedUI::ButtonToComponent.new(text: "Complete", path: complete_path, options: {"data-education--presentation-target": "nextLink"} +``` + +## 7. Icon buttons + + + +### Before + +```jsx += render SharedUI::ButtonComponent.new(\ + text: "Schedule prep session", + link: "https://www.calendly.com/mickmoylan", + icon: "calendar_icon", + external: true, + method: "get", + size: "medium", + type: "outlined") +``` + +### After + +```jsx +sl-button[size="large" pill href="[https://www.calendly.com/mickmoylan](https://www.calendly.com/mickmoylan)" target="_blank"] + sl-icon[slot="prefix" name="calendar"] + | Schedule prep session +``` From 4d5bd23686a8dbfa36a3b92ea48dc4b22f7d97f3 Mon Sep 17 00:00:00 2001 From: lizziekoshelev Date: Thu, 23 Mar 2023 10:36:44 -1000 Subject: [PATCH 2/5] added to recipes --- docs/teamshares/recipes.md | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/teamshares/recipes.md b/docs/teamshares/recipes.md index 0a1cad3381..207a191dfa 100644 --- a/docs/teamshares/recipes.md +++ b/docs/teamshares/recipes.md @@ -2,4 +2,5 @@ - ## [Protips](/teamshares/recipes/protips.md) - ## [Rails UJS](/teamshares/recipes/rails-ujs.md) +- ## [Buttons](/teamshares/recipes/buttons.md) From b55b02680e4faa4ec903387877801a6c85fc1282 Mon Sep 17 00:00:00 2001 From: lizziekoshelev Date: Thu, 23 Mar 2023 10:41:23 -1000 Subject: [PATCH 3/5] change doc type --- docs/teamshares/recipes/{buttons => buttons.md} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename docs/teamshares/recipes/{buttons => buttons.md} (100%) diff --git a/docs/teamshares/recipes/buttons b/docs/teamshares/recipes/buttons.md similarity index 100% rename from docs/teamshares/recipes/buttons rename to docs/teamshares/recipes/buttons.md From cbea65a20f3ebb83f9c7a2f6d48adb3e259980c3 Mon Sep 17 00:00:00 2001 From: lizziekoshelev Date: Thu, 23 Mar 2023 10:55:48 -1000 Subject: [PATCH 4/5] fix missing parenthesis --- docs/teamshares/recipes/buttons.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/teamshares/recipes/buttons.md b/docs/teamshares/recipes/buttons.md index c11f61b046..eae7dc8566 100644 --- a/docs/teamshares/recipes/buttons.md +++ b/docs/teamshares/recipes/buttons.md @@ -184,7 +184,7 @@ yarn build --watch ```jsx # the default method here is "post", can pass in a method field to change -= render SharedUI::ButtonToComponent.new(text: "Complete", path: complete_path, options: {"data-education--presentation-target": "nextLink"} += render SharedUI::ButtonToComponent.new(text: "Complete", path: complete_path, options: {"data-education--presentation-target": "nextLink"}) ``` ## 7. Icon buttons From 33efe2640d912d094865eacd32c2470c88000137 Mon Sep 17 00:00:00 2001 From: lizziekoshelev Date: Tue, 18 Apr 2023 20:00:44 +0900 Subject: [PATCH 5/5] updated comments --- docs/teamshares/recipes.md | 2 +- docs/teamshares/recipes/buttons.md | 48 +++++++----------------------- 2 files changed, 12 insertions(+), 38 deletions(-) diff --git a/docs/teamshares/recipes.md b/docs/teamshares/recipes.md index 207a191dfa..9028af3977 100644 --- a/docs/teamshares/recipes.md +++ b/docs/teamshares/recipes.md @@ -2,5 +2,5 @@ - ## [Protips](/teamshares/recipes/protips.md) - ## [Rails UJS](/teamshares/recipes/rails-ujs.md) -- ## [Buttons](/teamshares/recipes/buttons.md) +- ## [Converting Button View Component To Shoelace](/teamshares/recipes/buttons.md) diff --git a/docs/teamshares/recipes/buttons.md b/docs/teamshares/recipes/buttons.md index eae7dc8566..354af247f8 100644 --- a/docs/teamshares/recipes/buttons.md +++ b/docs/teamshares/recipes/buttons.md @@ -1,13 +1,8 @@ -# Button Playbook +# How to convert SharedUI::Button usages to Shoelace -# Types of buttons +## 1. Link button -## 1. Link buttons - - +> 💡 Hint: these are buttons marked with `external: true` or marked with `render_as_link: true` ### Before @@ -30,17 +25,11 @@ sl-button[size="large" pill href="https://www.calendly.com/mickmoylan" target="_ | Schedule prep session ``` - +> 💡 Hint: use `target="_blank"` to open the link in a new tab ## 2. Submit button - +> 💡 Hint: these are commonly used with simpleform and have `submit: true` ### Before @@ -82,10 +71,7 @@ sl-button[size="small" pill disabled="true"] | Previous ``` - +> 💡 Hint: to render in a content_tag, this is how you would do so: ```jsx @@ -132,19 +118,13 @@ render SharedUI::ButtonComponent.new( ### After (this example uses a content tag) - +> 💡 For more information check out [our Rails UJS recipe page](https://design.teamshares.com/#/teamshares/recipes/rails-ujs) ```jsx content_tag("sl-button", "Presentations", size: "large", pill: true, href: *path*, "data-toggle": "modal", "data-remote": true, "data-dismissible": true, "data-close-others": true, "data-method": "get") ``` - +> 💡 Hint: you may need to run the following commands for modal buttons to work locally: ``` yarn cache clean && rm -rf node_modules @@ -160,10 +140,7 @@ yarn build --watch ## 6. Internal link/path with no explicit associated form - +> 💡 Hint: for :get requests you can just use a link button above, for :delete, :post, :patch, etc. we now have a ButtonTo view component that behaves as rails’ [button_to](https://apidock.com/rails/ActionView/Helpers/UrlHelper/button_to) ### Before @@ -187,12 +164,9 @@ yarn build --watch = render SharedUI::ButtonToComponent.new(text: "Complete", path: complete_path, options: {"data-education--presentation-target": "nextLink"}) ``` -## 7. Icon buttons - - +> 💡 Hint: move the icon before or after the text with “prefix” or “suffix” ### Before