From 294d60e7601350c705bcf18f231b0f24161b0b20 Mon Sep 17 00:00:00 2001 From: Quinton Jason Date: Mon, 19 Jul 2021 09:10:57 -0500 Subject: [PATCH] fix(button): updates to disabled button --- .../components/button/_props.html.erb | 6 +++ docs/app/views/pages/sandbox.html.erb | 36 +++++++++----- .../app/sage_components/sage_button.rb | 5 +- .../sage_components/_sage_button.html.erb | 2 +- .../lib/stylesheets/components/_button.scss | 10 ++++ .../lib/stylesheets/components/_toast.scss | 9 +--- packages/sage-react/lib/Toast/Toast.jsx | 4 +- packages/sage-system/lib/button-disable.js | 48 ++++--------------- .../sage-system/lib/toast/toast.template.js | 6 +-- 9 files changed, 61 insertions(+), 65 deletions(-) diff --git a/docs/app/views/examples/components/button/_props.html.erb b/docs/app/views/examples/components/button/_props.html.erb index 87e1561f2b..496ea74215 100644 --- a/docs/app/views/examples/components/button/_props.html.erb +++ b/docs/app/views/examples/components/button/_props.html.erb @@ -33,6 +33,12 @@ <%= md('Boolean') %> <%= md('`false`') %> + + <%= md('`disabled_with`') %> + <%= md('When the button is in a loading state, this test will be set as the `aria-label`.') %> + <%= md('String') %> + <%= md('`nil`') %> + <%= md('`full_width`') %> <%= md('Forces a button to 100% the width of its container.') %> diff --git a/docs/app/views/pages/sandbox.html.erb b/docs/app/views/pages/sandbox.html.erb index 8571b0ec7a..62869295bf 100644 --- a/docs/app/views/pages/sandbox.html.erb +++ b/docs/app/views/pages/sandbox.html.erb @@ -4,15 +4,29 @@ Use this scratchpad to test out elements and components in context. Just be sure not to commit your changes. ❤️ ") %> -<%= sage_component SageButton, { - value: "SASS Docs", - disableWith: true, - attributes: { - href: "#", - target: "_blank", - rel: "noopener noreferrer", - title: "Open Sassdocs site" - }, - style: "primary", -} %> +
+ <%= sage_component SageButton, { + value: "SASS Docs", + disable_with: "hey", + attributes: { + href: "#", + target: "_blank", + rel: "noopener noreferrer", + title: "Open Sassdocs site" + }, + style: "primary", + } %> +
+
+ <%= sage_component SageButton, { + value: "SASS Docs", + attributes: { + href: "#", + target: "_blank", + rel: "noopener noreferrer", + title: "Open Sassdocs site" + }, + style: "primary", + } %> +
<% end %> diff --git a/docs/lib/sage_rails/app/sage_components/sage_button.rb b/docs/lib/sage_rails/app/sage_components/sage_button.rb index fb0be9c61d..c0c55a11a7 100644 --- a/docs/lib/sage_rails/app/sage_components/sage_button.rb +++ b/docs/lib/sage_rails/app/sage_components/sage_button.rb @@ -2,10 +2,9 @@ class SageButton < SageComponent set_attribute_schema({ align: [:optional, NilClass, String], attributes: [:optional, NilClass, Hash], - disabled: [:optional, NilClass, TrueClass], - disableWith: [:optional, NilClass, TrueClass], - disableWithText: [:optional, NilClass, String], custom_content_class: [:optional, NilClass, String], + disabled: [:optional, NilClass, TrueClass], + disable_with: [:optional, NilClass, String], full_width: [:optional, NilClass, TrueClass], icon: [:optional, { name: String, style: Set.new(["left", "right", "only"]) }], no_shadow: [:optional, NilClass, TrueClass], diff --git a/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb b/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb index f339f491dc..7e64274150 100644 --- a/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb +++ b/docs/lib/sage_rails/app/views/sage_components/_sage_button.html.erb @@ -19,7 +19,7 @@ <%= "sage-btn--icon-#{component.icon[:style]}-#{component.icon[:name]}" if component.icon %> <%= component.generated_css_classes %> " - <%= "data-js-sage-disabled-with" if component.disableWith %> + <%= "data-js-sage-disabled-with=#{component.disable_with}" if component.disable_with.present? %> <%= component.generated_html_attributes.html_safe %> > <% if component.icon&.dig(:style) == "only" %> diff --git a/packages/sage-assets/lib/stylesheets/components/_button.scss b/packages/sage-assets/lib/stylesheets/components/_button.scss index 3ab1f8f857..bc34b35475 100644 --- a/packages/sage-assets/lib/stylesheets/components/_button.scss +++ b/packages/sage-assets/lib/stylesheets/components/_button.scss @@ -96,6 +96,7 @@ $-btn-subtle-styles: ( // Custom variables // $-btn-interactive-label-icon-size: rem(24px); +$-btn-loading-min-height: rem(36px); // stylelint-disable max-nesting-depth @@ -314,6 +315,15 @@ $-btn-interactive-label-icon-size: rem(24px); // NOTE: Icon generation consolidated in `core/_icons.scss` } +.sage-btn--is-loading { + min-height: $-btn-loading-min-height; + pointer-events: none; + + svg { + margin-right: 0; + } +} + // Generate button style variations @each $-style-name, $-styles in $-btn-base-styles { .sage-btn--#{$-style-name} { diff --git a/packages/sage-assets/lib/stylesheets/components/_toast.scss b/packages/sage-assets/lib/stylesheets/components/_toast.scss index 3167daf599..edf215b165 100644 --- a/packages/sage-assets/lib/stylesheets/components/_toast.scss +++ b/packages/sage-assets/lib/stylesheets/components/_toast.scss @@ -115,19 +115,14 @@ $-toast-bottom-spacing: sage-spacing(xs); position: relative; } -.sage-toast__spinner { +.sage-loader__spinner--loading-button { width: sage-spacing(sm); height: sage-spacing(sm); margin-right: sage-spacing(xs); - animation: rotate $-loader-spinner-speed linear infinite; } -.sage-toast__spinner-path { - stroke-dasharray: 150,200; - stroke-dashoffset: -10; - stroke-linecap: round; +.sage-loader__spinner-path--loading-button { stroke: sage-color(white); - animation: dash $-loader-spinner-path-speed ease-in-out infinite; } .sage-toast__value { diff --git a/packages/sage-react/lib/Toast/Toast.jsx b/packages/sage-react/lib/Toast/Toast.jsx index 7e33da512b..cc27d4c32e 100644 --- a/packages/sage-react/lib/Toast/Toast.jsx +++ b/packages/sage-react/lib/Toast/Toast.jsx @@ -62,8 +62,8 @@ export const Toast = ({ const renderAsset = () => { if (type === Toast.TYPES.LOADING) { return ( -