Update: padlock replaces icon when trickle button locked (#217) (#218)

adaptlearning · Mar 21, 2024 · 3a53d29 · 3a53d29
1 parent d228770
commit 3a53d29
Show file tree

Hide file tree

Showing 2 changed files with 5 additions and 1 deletion.
diff --git a/less/trickle-button.less b/less/trickle-button.less
@@ -21,6 +21,10 @@
     .icon-controls-small-down;
   }
 
+  &__btn.is-locked &__btn-icon .icon {
+    .icon-padlock-locked;
+  }
+
   // If full width config is enabled, button is fixed to the bottom of the screen
   // --------------------------------------------------
   &.is-full-width &__inner {

diff --git a/templates/trickle-button.hbs b/templates/trickle-button.hbs
@@ -2,7 +2,7 @@
 
 <div class="trickle__inner js-trickle-btn-container {{_trickle._button._component}}__inner {{#unless _isButtonVisible}} u-display-none{{/unless}}">
 
-  <button {{#if buttonAriaLabel}}aria-label="{{buttonAriaLabel}}" {{/if}}class="trickle__btn js-trickle-btn{{#if _trickle._button._hasIcon}} btn-icon{{/if}}{{#if buttonText}} btn-text{{/if}}"{{#if _isButtonDisabled}} aria-disabled="true"{{/if}}>
+  <button {{#if buttonAriaLabel}}aria-label="{{buttonAriaLabel}}" {{/if}}class="trickle__btn js-trickle-btn{{#if _isButtonDisabled}} is-disabled{{#if _isButtonVisible}} is-locked{{/if}}{{/if}}{{#if _trickle._button._hasIcon}} btn-icon{{/if}}{{#if buttonText}} btn-text{{/if}}"{{#if _isButtonDisabled}} aria-disabled="true"{{/if}}>
 
     {{#if _trickle._button._hasIcon}}
     <span class="trickle__btn-icon">