Button, ToggleButton: VARIANT_QUIET

feathersui · Aug 16, 2024 · 593251a · 593251a
1 parent a57eea9
commit 593251a
Show file tree

Hide file tree

Showing 4 changed files with 119 additions and 0 deletions.
diff --git a/src/feathers/controls/Button.hx b/src/feathers/controls/Button.hx
@@ -99,6 +99,26 @@ class Button extends BasicButton implements ITextControl implements IHTMLTextCon
 	**/
 	public static final VARIANT_DANGER = "danger";
 
+	/**
+		A variant used to style the button in a less prominent style — typically
+		hiding the background skin until interaction. Variants allow themes to
+		provide an assortment of different appearances for the same type of UI
+		component.
+
+		The following example uses this variant:
+
+		```haxe
+		var button = new Button();
+		button.variant = Button.VARIANT_QUIET;
+		```
+
+		@see `feathers.style.IVariantStyleObject.variant`
+		@see [Feathers UI User Manual: Themes](https://feathersui.com/learn/haxe-openfl/themes/)
+
+		@since 1.4.0
+	**/
+	public static final VARIANT_QUIET = "quiet";
+
 	/**
 		Creates a new `Button` object.
 

diff --git a/src/feathers/controls/ToggleButton.hx b/src/feathers/controls/ToggleButton.hx
@@ -60,6 +60,26 @@ import flash.text.StyleSheet;
 @defaultXmlProperty("text")
 @:styleContext
 class ToggleButton extends BasicToggleButton implements ITextControl implements IHTMLTextControl implements IFocusObject {
+	/**
+		A variant used to style the button in a less prominent style — typically
+		hiding the background skin until interaction. Variants allow themes to
+		provide an assortment of different appearances for the same type of UI
+		component.
+
+		The following example uses this variant:
+
+		```haxe
+		var button = new ToggleButton();
+		button.variant = ToggleButton.VARIANT_QUIET;
+		```
+
+		@see `feathers.style.IVariantStyleObject.variant`
+		@see [Feathers UI User Manual: Themes](https://feathersui.com/learn/haxe-openfl/themes/)
+
+		@since 1.4.0
+	**/
+	public static final VARIANT_QUIET = "quiet";
+
 	/**
 		Creates a new `ToggleButton` object.
 

diff --git a/src/feathers/themes/steel/components/SteelButtonStyles.hx b/src/feathers/themes/steel/components/SteelButtonStyles.hx
@@ -130,6 +130,44 @@ class SteelButtonStyles {
 					button.disabledTextFormat = theme.getDisabledTextFormat();
 				}
 
+				button.paddingTop = theme.smallPadding;
+				button.paddingRight = theme.largePadding;
+				button.paddingBottom = theme.smallPadding;
+				button.paddingLeft = theme.largePadding;
+				button.gap = theme.smallPadding;
+			});
+		}
+		if (styleProvider.getStyleFunction(Button, Button.VARIANT_QUIET) == null) {
+			styleProvider.setStyleFunction(Button, Button.VARIANT_QUIET, function(button:Button):Void {
+				if (button.backgroundSkin == null) {
+					var skin = new RectangleSkin();
+					skin.fill = theme.getButtonFill();
+					skin.disabledFill = theme.getButtonDisabledFill();
+					skin.setFillForState(UP, SolidColor(0xff00ff, 0.0)); // transparent
+					skin.setFillForState(DOWN, theme.getReversedActiveThemeFill());
+					skin.border = theme.getButtonBorder();
+					skin.disabledBorder = theme.getButtonDisabledBorder();
+					skin.setBorderForState(UP, None);
+					skin.setBorderForState(DOWN, theme.getActiveFillBorder());
+					skin.cornerRadius = 3.0;
+					button.backgroundSkin = skin;
+				}
+
+				if (button.focusRectSkin == null) {
+					var focusRectSkin = new RectangleSkin();
+					focusRectSkin.fill = None;
+					focusRectSkin.border = theme.getFocusBorder();
+					focusRectSkin.cornerRadius = 3.0;
+					button.focusRectSkin = focusRectSkin;
+				}
+
+				if (button.textFormat == null) {
+					button.textFormat = theme.getTextFormat();
+				}
+				if (button.disabledTextFormat == null) {
+					button.disabledTextFormat = theme.getDisabledTextFormat();
+				}
+
 				button.paddingTop = theme.smallPadding;
 				button.paddingRight = theme.largePadding;
 				button.paddingBottom = theme.smallPadding;

diff --git a/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx b/src/feathers/themes/steel/components/SteelToggleButtonStyles.hx
@@ -69,6 +69,47 @@ class SteelToggleButtonStyles {
 				button.paddingLeft = theme.largePadding;
 				button.gap = theme.smallPadding;
 			});
+			if (styleProvider.getStyleFunction(ToggleButton, ToggleButton.VARIANT_QUIET) == null) {
+				styleProvider.setStyleFunction(ToggleButton, ToggleButton.VARIANT_QUIET, function(button:ToggleButton):Void {
+					if (button.backgroundSkin == null) {
+						var skin = new RectangleSkin();
+						skin.fill = theme.getButtonFill();
+						skin.disabledFill = theme.getButtonDisabledFill();
+						skin.selectedFill = theme.getThemeFill();
+						skin.setFillForState(UP(false), SolidColor(0xff00ff, 0.0)); // transparent
+						skin.setFillForState(DOWN(false), theme.getReversedActiveThemeFill());
+						skin.border = theme.getButtonBorder();
+						skin.selectedBorder = theme.getSelectedBorder();
+						skin.disabledBorder = theme.getButtonDisabledBorder();
+						skin.setBorderForState(UP(false), None);
+						skin.setBorderForState(DOWN(false), theme.getActiveFillBorder());
+						skin.setBorderForState(DOWN(true), theme.getActiveFillBorder());
+						skin.cornerRadius = 3.0;
+						button.backgroundSkin = skin;
+					}
+
+					if (button.focusRectSkin == null) {
+						var focusRectSkin = new RectangleSkin();
+						focusRectSkin.fill = None;
+						focusRectSkin.border = theme.getFocusBorder();
+						focusRectSkin.cornerRadius = 3.0;
+						button.focusRectSkin = focusRectSkin;
+					}
+
+					if (button.textFormat == null) {
+						button.textFormat = theme.getTextFormat();
+					}
+					if (button.disabledTextFormat == null) {
+						button.disabledTextFormat = theme.getDisabledTextFormat();
+					}
+
+					button.paddingTop = theme.smallPadding;
+					button.paddingRight = theme.largePadding;
+					button.paddingBottom = theme.smallPadding;
+					button.paddingLeft = theme.largePadding;
+					button.gap = theme.smallPadding;
+				});
+			}
 		}
 	}
 }