Add icon class to all buttons and styles. Closes #274

AvaloniaCommunity · May 17, 2024 · fa92171 · fa92171
1 parent 70f8eee
commit fa92171
Show file tree

Hide file tree

Showing 4 changed files with 37 additions and 25 deletions.
diff --git a/Material.Styles/Resources/Compatibility/ButtonClasses.axaml b/Material.Styles/Resources/Compatibility/ButtonClasses.axaml
@@ -22,19 +22,11 @@
     <Setter Property="Theme" Value="{StaticResource MaterialOutlineButton}" />
   </Style>
 
-  <Style Selector="Button.icon">
-    <Setter Property="Theme" Value="{StaticResource MaterialIconButton}" />
-  </Style>
-
   <Style Selector="Button.Flat">
     <Setter Property="Theme" Value="{StaticResource MaterialFlatButton}" />
   </Style>
 
   <Style Selector="Button.Outline">
     <Setter Property="Theme" Value="{StaticResource MaterialOutlineButton}" />
   </Style>
-
-  <Style Selector="Button.Icon">
-    <Setter Property="Theme" Value="{StaticResource MaterialIconButton}" />
-  </Style>
 </Styles>
diff --git a/Material.Styles/Resources/Themes/Button.axaml b/Material.Styles/Resources/Themes/Button.axaml
@@ -115,6 +115,13 @@
     <Style Selector="^:disabled /template/ Border#PART_RootBorder">
       <Setter Property="Opacity" Value="{StaticResource ButtonDisabledOpacity}" />
     </Style>
+
+    <Style Selector="^.icon">
+      <Setter Property="Padding" Value="12" />
+      <Setter Property="CornerRadius" Value="24" />
+      <Setter Property="Height" Value="48" />
+      <Setter Property="Width" Value="48" />
+    </Style>
   </ControlTheme>
 
   <ControlTheme x:Key="MaterialButton" TargetType="Button"

diff --git a/Material.Styles/Resources/Themes/RepeatButton.axaml b/Material.Styles/Resources/Themes/RepeatButton.axaml
@@ -2,7 +2,8 @@
                     xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
                     xmlns:assists="clr-namespace:Material.Styles.Assists"
                     xmlns:ripple="clr-namespace:Material.Ripple;assembly=Material.Ripple"
-                    xmlns:system="clr-namespace:System;assembly=netstandard">
+                    xmlns:system="clr-namespace:System;assembly=netstandard"
+                    xmlns:controls="clr-namespace:Material.Styles.Controls">
   <Design.PreviewWith>
     <StackPanel Spacing="10" Margin="8">
       <RepeatButton Theme="{StaticResource MaterialEmptyRepeatButton}" Foreground="Black">Empty just displays content</RepeatButton>
@@ -21,11 +22,15 @@
         <RepeatButton Theme="{StaticResource MaterialFlatRepeatButton}" Classes="no-ripple">No ripple</RepeatButton>
       </StackPanel>
       <StackPanel Orientation="Horizontal" Spacing="10">
-        <RepeatButton Theme="{StaticResource MaterialIconRepeatButton}">Default</RepeatButton>
-        <RepeatButton Theme="{StaticResource MaterialIconRepeatButton}" Classes="accent">Accent</RepeatButton>
-        <RepeatButton Theme="{StaticResource MaterialIconRepeatButton}" Classes="light">Light</RepeatButton>
-        <RepeatButton Theme="{StaticResource MaterialIconRepeatButton}" Classes="dark">Dark</RepeatButton>
-        <RepeatButton Theme="{StaticResource MaterialIconRepeatButton}" Classes="no-ripple">No ripple</RepeatButton>
+        <RepeatButton Classes="icon">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </RepeatButton>
+        <RepeatButton Theme="{StaticResource MaterialFlatRepeatButton}" Classes="icon">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </RepeatButton>
+        <RepeatButton Theme="{StaticResource MaterialOutlineRepeatButton}" Classes="icon">
+          <controls:MaterialInternalIcon Kind="Clock" />
+        </RepeatButton>
       </StackPanel>
       <StackPanel Orientation="Horizontal" Spacing="10">
         <RepeatButton Theme="{StaticResource MaterialOutlineRepeatButton}">Default</RepeatButton>
@@ -67,6 +72,13 @@
       <Setter Property="BorderBrush" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
       <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryForegroundBrush}" />
     </Style>
+
+    <Style Selector="^.icon">
+      <Setter Property="Padding" Value="12" />
+      <Setter Property="CornerRadius" Value="24" />
+      <Setter Property="Height" Value="48" />
+      <Setter Property="Width" Value="48" />
+    </Style>
   </ControlTheme>
 
 

diff --git a/Material.Styles/Resources/Themes/ToggleButton.axaml b/Material.Styles/Resources/Themes/ToggleButton.axaml
@@ -34,21 +34,15 @@
         <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" IsEnabled="False">Disabled</ToggleButton>
       </StackPanel>
       <StackPanel Orientation="Horizontal" Spacing="8">
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}">
+        <ToggleButton Classes="icon">
           <controls:MaterialInternalIcon Kind="Clock" />
         </ToggleButton>
-
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="accent">
-          <controls:MaterialInternalIcon Kind="Clock" />
-        </ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="light">
+
+        <ToggleButton Theme="{StaticResource MaterialOutlineToggleButton}" Classes="icon">
           <controls:MaterialInternalIcon Kind="Clock" />
         </ToggleButton>
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" Classes="dark">
-          <controls:MaterialInternalIcon Kind="Clock" />
-        </ToggleButton>
-
-        <ToggleButton Theme="{StaticResource MaterialIconToggleButton}" IsEnabled="False">
+
+        <ToggleButton Theme="{StaticResource MaterialFlatToggleButton}" Classes="icon">
           <controls:MaterialInternalIcon Kind="Clock" />
         </ToggleButton>
       </StackPanel>
@@ -147,6 +141,13 @@
     <Style Selector="^.dark">
       <Setter Property="Foreground" Value="{DynamicResource MaterialPrimaryDarkBrush}" />
     </Style>
+
+    <Style Selector="^.icon">
+      <Setter Property="Padding" Value="12" />
+      <Setter Property="CornerRadius" Value="24" />
+      <Setter Property="Height" Value="48" />
+      <Setter Property="Width" Value="48" />
+    </Style>
   </ControlTheme>
 
   <ControlTheme x:Key="MaterialToggleButton" TargetType="ToggleButton"