ButtonLink: Allow to disable the button (#284)

Author: nilmerg

asset/css/action-link-and-button-link.less

@@ -0,0 +1,26 @@
+.action-link {
+  color: var(--control-color, @control-color);
+}
+
+.button-link {
+  .action-link();
+  .rounded-corners(3px);
+
+  background: var(--default-input-bg, @default-input-bg);
+  display: inline-block;
+  padding: 0.25em 0.5em;
+
+  &:hover {
+    background: var(--default-input-hover-bg, @default-input-hover-bg);
+    text-decoration: none;
+  }
+
+  &[aria-disabled="true"] {
+    background: none;
+    border: 1px solid var(--control-disabled-color, @control-disabled-color);
+    color: var(--control-disabled-color, @control-disabled-color);
+    cursor: not-allowed;
+
+    .user-select(none);
+  }
+}

asset/css/compat.less

@@ -6,6 +6,11 @@
   }
 }
 
+// Icinga Web < 2.13
+.button-link[aria-disabled="true"]:hover {
+  background: none;
+}
+
 form.icinga-form {
   .uploaded-files {
     flex: 1 1 auto;

asset/css/mixin/mixins.less

@@ -39,3 +39,8 @@
 .monospace-font() {
   font-family: SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
 }
+
+.user-select(@user-select) {
+  -webkit-user-select: @user-select;
+  user-select: @user-select;
+}

asset/css/variables.less

@@ -41,6 +41,7 @@
 @default-text-color-light: fade(@default-text-color, 75%);
 @default-text-color-inverted: @default-bg;
 @default-input-bg: #404d72;
+@default-input-hover-bg: #434374;
 @default-remove-bg: @state-critical;
 @default-remove-color: @default-text-color-inverted;
 @default-delete-bg: @state-critical;
@@ -150,6 +151,7 @@
     --default-text-color-light: fade(#535353, 75%); // --default-text-color
     --default-text-color-inverted: #F5F9FA;
     --default-input-bg: #DEECF1;
+    --default-input-hover-bg: #C0CCCD;
     --default-remove-bg: var(--base-remove-bg);
     --default-remove-color: var(--default-text-color-inverted);
     --default-delete-bg: var(--base-remove-bg);

src/Widget/ButtonLink.php

@@ -2,13 +2,54 @@
 
 namespace ipl\Web\Widget;
 
+use ipl\Html\Attribute;
+
 /**
  * Button like link generally pointing to CRUD actions
  */
 class ButtonLink extends ActionLink
 {
     protected $defaultAttributes = [
-        'class'            => 'button-link',
-        'data-base-target' => '_main'
+        'role'              => 'button',
+        'class'             => 'button-link',
+        'data-base-target'  => '_main'
     ];
+
+    /** @var ?string The explanation why the button is disabled */
+    protected ?string $disabledExplanation = null;
+
+    /**
+     * Disable the button with explanation
+     *
+     * @param string $explanation Why the button is disabled
+     *
+     * @return $this
+     */
+    public function disable(string $explanation): self
+    {
+        $this->disabledExplanation = $explanation;
+
+        return $this;
+    }
+
+    public function createHrefAttribute(): ?Attribute
+    {
+        if ($this->disabledExplanation) {
+            return null;
+        }
+
+        return parent::createHrefAttribute();
+    }
+
+    public function assemble(): void
+    {
+        parent::assemble();
+
+        if ($this->disabledExplanation) {
+            $this->addAttributes([
+                'aria-disabled' => 'true',
+                'title'         => $this->disabledExplanation,
+            ]);
+        }
+    }
 }