fix #1122 Enhancements to ToggleButton implementation

Author: vegegoku

domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/Color.java

@@ -35,6 +35,19 @@ public interface Color {
 
   CssClass getContextColor();
 
+  default String getCssVar() {
+    return "--dui-clr-"
+        + getName().toLowerCase().replace("lighten", "l").replace("darken", "d").replace("_", "-");
+  }
+
+  default String toVarValue() {
+    if (getName().isEmpty()) {
+      return "unset";
+    } else {
+      return "var(" + getCssVar() + ")";
+    }
+  }
+
   Color NONE =
       new Color() {
         @Override

domino-ui-shared/src/main/java/org/dominokit/domino/ui/style/HasCssVar.java

@@ -0,0 +1,49 @@
+/*
+ * Copyright © 2019 Dominokit
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+package org.dominokit.domino.ui.style;
+
+import static java.util.Objects.isNull;
+
+public class HasCssVar implements CssClass {
+
+  private final CssClass cssClass;
+  private final String cssVar;
+
+  public static HasCssVar of(CssClass cssClass, String cssVar) {
+    return new HasCssVar(cssClass, cssVar);
+  }
+
+  public HasCssVar(CssClass cssClass, String cssVar) {
+    this.cssClass = cssClass;
+    this.cssVar = cssVar;
+  }
+
+  @Override
+  public String getCssClass() {
+    return cssClass.getCssClass();
+  }
+
+  public String cssVarName() {
+    return cssVar;
+  }
+
+  public String toCssVar() {
+    if (isNull(cssVar) || cssVar.isEmpty()) {
+      return "unset";
+    }
+    return "var(" + cssVar + ")";
+  }
+}

domino-ui/src/main/java/org/dominokit/domino/ui/button/ToggleButton.java

@@ -18,8 +18,6 @@
 import static java.util.Objects.isNull;
 import static java.util.Objects.nonNull;
 import static org.dominokit.domino.ui.button.ButtonStyles.dui_toggle_button;
-import static org.dominokit.domino.ui.style.ColorsCss.dui_bg_primary;
-import static org.dominokit.domino.ui.style.ColorsCss.dui_fg_white;
 import static org.dominokit.domino.ui.utils.Domino.button;
 
 import elemental2.dom.HTMLButtonElement;
@@ -28,17 +26,21 @@
 import org.dominokit.domino.ui.elements.ButtonElement;
 import org.dominokit.domino.ui.icons.Icon;
 import org.dominokit.domino.ui.style.BooleanCssClass;
-import org.dominokit.domino.ui.style.CompositeCssClass;
+import org.dominokit.domino.ui.style.Color;
 import org.dominokit.domino.ui.style.CssClass;
 import org.dominokit.domino.ui.utils.HasChangeListeners;
+import org.dominokit.domino.ui.utils.HasValue;
 import org.dominokit.domino.ui.utils.IsToggleGroup;
 import org.dominokit.domino.ui.utils.IsToggleItem;
+import org.gwtproject.editor.client.TakesValue;
 
 public class ToggleButton extends BaseButton<HTMLButtonElement, ToggleButton>
-    implements HasChangeListeners<ToggleButton, Boolean>, IsToggleItem<ToggleButton> {
+    implements HasChangeListeners<ToggleButton, Boolean>,
+        IsToggleItem<ToggleButton>,
+        TakesValue<Boolean>,
+        HasValue<ToggleButton, Boolean> {
 
-  private CssClass toggleCssClass = CompositeCssClass.of(dui_bg_primary, dui_fg_white);
-  private CssClass untoggledCssClass = CssClass.NONE;
+  private CssClass toggleCssClass = () -> "dui-btn-toggled";
   private boolean changeListenersPaused;
   private Set<ChangeListener<? super Boolean>> changeListeners;
   private boolean state = false;
@@ -148,13 +150,7 @@ public ToggleButton setToggle(boolean toggle, boolean silent) {
   ToggleButton updateToggle(boolean toggle, boolean notifyParent) {
     boolean oldState = this.state;
     this.state = toggle;
-    if (toggle) {
-      untoggledCssClass = CompositeCssClass.of(this);
-    }
     addCss(BooleanCssClass.of(toggleCssClass, toggle));
-    if (!toggle) {
-      addCss(untoggledCssClass);
-    }
     if (this.state != oldState) {
       withPauseChangeListenersToggle(
           isChangeListenersPaused(), toggleButton -> triggerChangeListeners(oldState, this.state));
@@ -262,7 +258,29 @@ public ToggleButton setToggleCssClass(CssClass toggleCssClass) {
     return this;
   }
 
-  public boolean getValue() {
+  public ToggleButton setToggledColors(Color background, Color forground) {
+    this.setCssProperty("--dui-btn-toggled-bg", background.toVarValue());
+    this.setCssProperty("--dui-btn-toggled-color", forground.toVarValue());
+    return this;
+  }
+
+  public Boolean getValue() {
     return state;
   }
+
+  @Override
+  public ToggleButton withValue(Boolean value) {
+    return withValue(value, isChangeListenersPaused());
+  }
+
+  @Override
+  public ToggleButton withValue(Boolean value, boolean silent) {
+    setToggle(value, silent);
+    return this;
+  }
+
+  @Override
+  public void setValue(Boolean value) {
+    setToggle(value);
+  }
 }

domino-ui/src/main/java/org/dominokit/domino/ui/button/ToggleButtonsGroup.java

@@ -18,14 +18,14 @@
 import static java.util.Objects.isNull;
 import static java.util.Objects.nonNull;
 
-import elemental2.dom.DomGlobal;
 import java.util.Collections;
 import java.util.HashSet;
 import java.util.Objects;
 import java.util.Optional;
 import java.util.Set;
 import java.util.stream.Collectors;
 import org.dominokit.domino.ui.button.group.BaseButtonsGroup;
+import org.dominokit.domino.ui.style.Color;
 import org.dominokit.domino.ui.style.CssClass;
 import org.dominokit.domino.ui.utils.HasChangeListeners;
 import org.dominokit.domino.ui.utils.IsToggleGroup;
@@ -87,7 +87,6 @@ public void onItemToggle(ToggleButton toggleItem) {
         }
         triggerChangeListeners(oldValue, newValue);
       } else {
-        DomGlobal.console.info("Only multiple toggle is allowed for this group");
         Optional<ToggleButton> first =
             getButtons().stream()
                 .filter(ToggleButton::isToggled)
@@ -189,4 +188,15 @@ public ToggleButtonsGroup setToggleCssClass(CssClass toggleCssClass) {
     this.cssToggleClass = toggleCssClass;
     return this;
   }
+
+  public ToggleButtonsGroup setToggledColors(Color background, Color forground) {
+    this.setCssProperty("--dui-btn-toggled-bg", background.toVarValue());
+    this.setCssProperty("--dui-btn-toggled-color", forground.toVarValue());
+    return this;
+  }
+
+  @Override
+  public ToggleButtonsGroup appendChild(ToggleButton... buttons) {
+    return super.appendChild(buttons);
+  }
 }

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-buttons.css

@@ -229,4 +229,9 @@ a.dui-btn {
 
 .dui-top-scroller:hover {
     opacity: 1;
+}
+
+.dui-toggle-button.dui-btn-toggled {
+    --dui-btn-bg-clr: var(--dui-btn-toggled-bg);
+    --dui-btn-fg-clr: var(--dui-btn-toggled-color);
 }

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-menu.css

@@ -148,7 +148,7 @@
     position: absolute;
     width: fit-content;
     box-shadow: var(--dui-box-shadow);
-    min-width: max(var(--dui-spc-40), var(--dui-menu-drop-min-width));
+    min-width: max(var(--dui-spc-40), var(--dui-menu-drop-width, var(--dui-menu-drop-min-width)));
 }
 
 .dui-menu-drop.dui-context-menu {

domino-ui/src/main/resources/org/dominokit/domino/ui/public/css/domino-ui/dui-components/domino-ui-theme-default.css

@@ -560,6 +560,9 @@ body.dui {
     --dui-scroll-top-button-zindex: 9999999999;
     --dui-scroll-top-button-opacity: 04;
 
+    --dui-btn-toggled-bg: var(--dui-accent-d-2);
+    --dui-btn-toggled-color: var(--dui-highlight-color);
+
     /* ===================== Breadcrumb ==================================== */
 
     --dui-bc-default-bg: var(--dui-clr-transparent);
@@ -926,6 +929,7 @@ body.dui {
     --dui-menu-subheader-border-color: var(--dui-accent-l-3);
 
     --dui-menu-drop-z-index: var(--dui-z-index-start);
+    F--dui-menu-drop-min-width: var(--dui-spc-40);
 
     --dui-menu-header-bar-padding: var(--dui-spc-px-5);