From 14578ed68cb296080d511ceb502469903c0ef5d7 Mon Sep 17 00:00:00 2001
From: raajkumars <raajkumars@google.com>
Date: Tue, 10 May 2022 14:28:06 -0400
Subject: [PATCH] [Button] Updated M3 button style to add filled tonal icon
 button style. Updated catalog to showcase the same.

PiperOrigin-RevId: 447784383
---
 .../res/layout/cat_buttons_fragment.xml       |  19 +++++++++++++
 .../catalog/button/res/values/strings.xml     |   1 +
 docs/components/Button.md                     |  26 +++++++++++++++---
 .../buttons/filled-tonal-icon-button.png      | Bin 0 -> 3626 bytes
 .../button/res-public/values/public.xml       |   2 ++
 .../material/button/res/values/attrs.xml      |   2 ++
 .../material/button/res/values/styles.xml     |   5 ++++
 .../dialog/res/values/themes_base.xml         |   2 ++
 .../material/theme/res/values/themes_base.xml |   2 ++
 9 files changed, 55 insertions(+), 4 deletions(-)
 create mode 100644 docs/components/assets/buttons/filled-tonal-icon-button.png

diff --git a/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml b/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml
index a8964d1d4b6..aa22ab5f4ac 100644
--- a/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml
+++ b/catalog/java/io/material/catalog/button/res/layout/cat_buttons_fragment.xml
@@ -177,6 +177,25 @@
               android:text="@string/cat_icon_btn_filled_style"
               android:textSize="12sp"/>
         </LinearLayout>
+
+        <LinearLayout
+            android:layout_width="wrap_content"
+            android:layout_height="wrap_content"
+            android:gravity="center_horizontal"
+            android:orientation="vertical">
+          <Button
+              style="?attr/materialIconButtonFilledTonalStyle"
+              android:layout_width="wrap_content"
+              android:layout_height="wrap_content"
+              android:contentDescription="@string/cat_button_icon_btn_text"
+              app:icon="@drawable/ic_dialogs_24px"/>
+          <TextView
+              android:layout_width="wrap_content"
+              android:layout_height="wrap_content"
+              android:paddingTop="4dp"
+              android:text="@string/cat_icon_btn_filled_tonal_style"
+              android:textSize="12sp"/>
+        </LinearLayout>
       </LinearLayout>
 
       <com.google.android.material.switchmaterial.SwitchMaterial
diff --git a/catalog/java/io/material/catalog/button/res/values/strings.xml b/catalog/java/io/material/catalog/button/res/values/strings.xml
index 87669d274c0..689bdae25c1 100644
--- a/catalog/java/io/material/catalog/button/res/values/strings.xml
+++ b/catalog/java/io/material/catalog/button/res/values/strings.xml
@@ -39,6 +39,7 @@
   <string name="cat_outlined_icon_btn_text">Icon only buttons</string>
   <string name="cat_icon_btn_default_style">Standard</string>
   <string name="cat_icon_btn_filled_style">Filled</string>
+  <string name="cat_icon_btn_filled_tonal_style">Tonal</string>
   <string name="cat_button_clicked">Button clicked</string>
   <string name="cat_snackbar_action_button_text">Done</string>
 
diff --git a/docs/components/Button.md b/docs/components/Button.md
index fec67f790a2..81ae6817b20 100644
--- a/docs/components/Button.md
+++ b/docs/components/Button.md
@@ -889,12 +889,30 @@ In the layout:
 />
 ```
 
+#### Filled Tonal Icon button
+
+The following example shows a tonal icon button.
+
+!["Filled tonal icon button example for Android over a white background."](assets/buttons/filled-tonal-icon-button.png)
+
+In the layout:
+
+```xml
+<Button
+    style="?attr/materialIconButtonFilledTonalStyle"
+    android:id="@+id/iconButton"
+    android:layout_width="wrap_content"
+    android:layout_height="wrap_content"
+/>
+```
+
 #### Styles & Theme attributes
 
-Element                | Style                                       | Theme Attribute
----------------------- | ------------------------------------------- | ---------------
-**Default style**      | `Widget.Material3.Button.IconButton`        | `?attr/materialIconButtonStyle`
-**Filled Icon Button** | `Widget.Material3.Button.IconButton.Filled` | `?attr/materialIconButtonFilledStyle`
+Element                      | Style                                             | Theme Attribute
+---------------------------- | ------------------------------------------------- | ---------------
+**Default style**            | `Widget.Material3.Button.IconButton`              | `?attr/materialIconButtonStyle`
+**Filled Icon Button**       | `Widget.Material3.Button.IconButton.Filled`       | `?attr/materialIconButtonFilledStyle`
+**Filled Tonal Icon Button** | `Widget.Material3.Button.IconButton.Filled.Tonal` | `?attr/materialIconButtonFilledTonalStyle`
 
 See the full list of
 [styles](https://github.com/material-components/material-components-android/tree/master/lib/java/com/google/android/material/button/res/values/styles.xml)
diff --git a/docs/components/assets/buttons/filled-tonal-icon-button.png b/docs/components/assets/buttons/filled-tonal-icon-button.png
new file mode 100644
index 0000000000000000000000000000000000000000..197cfa3e9545b9e8df5c58fa00bdeb3ba65b06fd
GIT binary patch
literal 3626
zcmZ`+2{=^y8$L4zL(y2GL7JH?*|(c@EREqNOR{7{WjAA+X%;gH%`mcztX+g|vSq1>
zib@fs2_*?NEi@|0nr>WDH~&%HTmPPW&-0w~`_B8l@3)-!<}B&%Zof)NDoFwWAmy|j
z>mgj(t2<Ooc-)0eJ}q1z;oDrd0YGE+noohE!gECMb`Mtoh|>T7rjWcWgqUvtfMy5)
zlK}u=Sp)!zq|%mMXrTiiigOBcbp^DAHWYw>!~hYY1p>grgX}jOB(%4D$5ROa<O>G?
zY=kQSh?If8Gt0pLc-dtl-|bbR%Ll+70Kl&ZUN|bw)x|QH7_A=|LJSJkXGD`$2>_a5
zDKw))seuSabW{w*l3|Vd!mt$DtFQqI@r6Q-v_|1v-4XUgawx)7-%#HWWh03|AkgHH
zFiQ`t<2SkR%o>HKQc0Eu26Q@IpKhX0B!?RqSy)&Y7#bTG8|w)fdX$4P)If$_3}y4z
zAb-cfhEjsb1QL}%j6tl%4GbdEsMaXdYNCI(uXR!hVc#>wP`<S#Y|voUV_>9jXz*{c
zPzK>YWUHR9vM+soO^03$W@%51CXqua6k%C5M(8gI{tx?J-dDayD1{hBTkXO-hCsD3
z{wDbe{#mt?Ob8WTmQ~q5S$@QR=DXvGRHE=FA`^n0VyK~HVTs?=e<%EJ#t*Sp`?ho^
zFhZknSVDAY%-1eWgfafr^Rv>P7)2y|k^+N6SBw54`2qTw{Uwj@f9CnY^G%61Se=6(
z=HlzneL;m&XCsL=_-BG`B>kGwbpb$fmlJlI7Xvi2w>MUKt9-#>Su3~F&WW8j&QBM&
zff_<PMvVk>@}xJcHpqB;u$^K9<agl7`r&4+=+Do1Zc#h$kB219n4jfRt8#gZznj4O
zu$%WLEGqxyPpIs{lM=aD2+J8#m&8UGrZZtdvQi(;vSFAcEeIRtN$N_0VayFvgt(;i
z6&MC8UJZj`Tsn}780cubJb0nDK5uX4c?!+c+$Z^zM{@rarAd)R$KxJw>6ywC^8>rJ
zcX%(HtV?u_cv(?C*_5%TPOHi5T+LWjM%y`&-*DQY<h>^&UM}7<rp3i_=aeA=1z6>&
z^nM(-=C`rQB{RB`1F!HG<Xr6anefS1zj#_F2zuA)Z86%dw0<aJ_fSMdoqJEEu9GYn
z!Wg*23n|k5gJTNmYN$(ZZ1(WhbIp=hhhyH<?caDZ(`!*}AR7F+j`@^<r(E>&ZW^hZ
zh?SsEe}2LF9fpUfw)V~&6-NNe$!xQ*V@k^PTNAwU@i~sp&|}b4qT|ctN7!4pny>8k
zG!N1@Dp!N-NEUGwqe|V;@a{cwZx78sqO<5y4YdE!@U6dQ-ADan36n8XyRULdSx)81
z&csXpL&>$dyHcW>n#OfxwMt<mM60Dz)<&n?09k)2^OhLmU<HZ1eg~9_Tp0?1U9l5n
zX^6JeIqV2zGZN5Bbal?%_)J0tCoZz}vbLHzQs5hZ&|KvZJouOGYb`sT9;9E`m!^!~
zf)s>2vBG8UW9u~D|Hz*mOt!j^Bm=(Lcj%)%t$_LT@lcU}pF!l};=SDoXh`4s@sBSg
z9wdR_`=IcVa8BgP?K|)NU%n3Bu(Btp(CnIA5Y^YX(hxzD+wL$T9>X~9K70grj%_DG
z-f4!YDkhnz&)GlK>2$yDgDEp>gvQ{_C?(cXDy-AQcaG2{xM7JCdmTt1;h&J9h-nu|
zmvNR!gfMmH7SyNN?R@s-iiG1+sC|Mpr3p|gq@la|i%qOYw-ZTW>X0K12}X}>I|)@J
zBRc!~p0Ldj`Oafzxg;n+oZY9Qj5Hi@QbU8EUA_PV>+O%JK9XwME6=hD&%SpYHdhmb
zIkWu$RHdzZo?eHZu#y8W;NaoEzHe97P{^c^nx2<JSu7oWhZ}Z2BVGaGSs+7AjDVw^
z%YX?QQWutCH5anxFBP16H8G$$nQeP`-ES&>mYWXGr?(tFT&UMZcVP3XrV0Zevdtf+
zr*6pV1ucE--amQ!WMY>=z6IU#L;#y<-LkBH3%l2^k!#$tOo`83f|<vvES*O|9){<@
z-QVSclsfbqvd`jVz#LjyCx^*N=!%98dOEno*Y4(07E8`;sylIFU3ueOj$+@?Vz#Q=
zgy*hN+t(=x0h%RaN4wZvawR=9CTIFnT<yg}E36j!+nYdbiTb<g$F`5aleAgx@cRUj
z5W6PUy2Khx;*F}ra_vI@rMZ-jqp-&XFG4W$ZZ}On^Zf7F#$ekYx~X9T{#cWGXrAZa
zWy^;#Pef_x<U(0Z2!{vT%FZbssFF;FnPygKtBrnuH5{+NOomos)B0>yycRwt*ia3E
zBTP#s-}PNTe|u^(M)?q24s1V+w6&y();xb(yYJk%Qg7+_0KsdV)9R@ZWyUpr_3^I7
zv+V+fSdp?cBV@>Q5;zhaDBcN|e9cBUs;pDvoRwH`Fx9~Bm`S}=-A<jYjWy9=n^#t|
z+{Q8@%)m$wmfd_Qmf2F9X@oT9rmy5b=^?&_y4&U&YC_H~zOb&yW5U6Fd=`qwM(~{b
zx7~=tG9%1_F^oaq@+>F_iN*5Lwyh7w@bC6<kjWgb$WRQA-JW#`HG#BiDzQLj+E<J3
zIlh(GJS1-<oz>dl@W6gmZ{o=t97sNUP04d6%mo^iq@Sk>_PPp}3+n!y{9@i+H<!mJ
z7o%2taM^{qv24#=Mk&jIuU<{7Ol?0u0?tG6@}nYKq*%*omZM4KYs2|r72WV*Z~wLz
ztvi_S#HSsiy_Dp@aX~lxy`b-w3ZHK{<!YkM=V<f1#Zb*o%(@)*xP5!r{sXee-Aa{$
zc#Hg^GcdgVz>Gs2SRK;jcD^Sa{VEff4)H9{hl2Ecl;-2QE$Ff!ILOZ`SE4^JA~~uQ
zrP|<YEf$v-2WJ2hfoi3eTi5ipbY0t8-B2{q(ZO=Qc&0DtXsxeS&`~Y^?LTj+%YoBb
z^7=X_dXvJ)*2JT=Z&ec_|G=LL%)kX}A0|W_yK#+kx}IbV1)DB+n<zjp^KbW@-;!06
ztfBBB?^j(Ib8l4r8nti-D4Jj30XD>HPU%JFXT8V7*uR3FnG$Vo%y+Bdjm^%AEQ~4c
zAM4hnNH@va0NXxthsh<U-QiNxt}W*-ZL}Gzf5GWw0nLv5h^sO;YU3Z{XmMz1dFM*e
zRO?dR4CH|Zk4gqa_%{v|)x-ct-bw4<Ym{Gy?@?kx{SB%wXf^5AZLY$eihtr?ugz!K
zmr8)t8>+H<`BuM*DOgJjX3tkW&`s23+g18SPpM9yaU;9hF_r127-p^i!Uj-winQdl
zE6!o2n0DhgB2Qg<aQON?VXEd=msMV?_wInIkq+6{WgWDmJb#~JVuft?-`_({E{=$&
z&pVITtA%Mo?0CSM@H=MSH$U80zTCV~ykVrOP!WUZ@SECN@7g|6HC?{4PHsQ5ey8w;
zxg~*q;ogYkpAwFD4^)_e&<PwLOn`Z;UpS_14b5cp+|${?vwx0OR!{#1a~Bf{c<M(x
z9_Y|?H<WRg2~JcI@zKy`XhM$R9#r!CkLTsx=u}%t1?_8>T1t^UEn)1X-sn0oGV1;~
zO4`v?XJHO+QdSK0Hh#qrRfovl`gEqSSiae+?{!Auhs+U(QVu>jr9i;$GFjTQ^SV{u
z1l>Z#CwvJWPuDvqTk^ib5Mx*PGT%k`{JOU*(umk0GBGd_k`!@@%}nC^$yPQz4t}7P
zti|pg{;Ta-zx-NBO)Pgh(Wg)Fa9~-{)sQ_CJorH2HXh1aTejHvd~fDHXq-&Zvm4eY
zI|`s5D7$1(K9WaW<005#)h&l@UQ@hxCQiSx$Z3@R?BE35AnzA{N>a;nYtkf0{1F?s
zsWZC(b}+25SJ3}7>X}2+3Qsp%?-RTYa!hO~P2*yIx5lM@IaHtgj?9<&xs#JzZQ7+L
z=&YRZ%xz_Bu5hn6WnRG+-BN>NT(lF(#YYu&S(i+zJw&QN*D`S@JI3-qbzeL3`Ggvh
zoMR`J1BOgYB)1R<s@ZqoLx93k1Oatsl4g=YGQ0Z5_G8ooc2V!zQoq&<E+-~ubrL_~
zXo`14Z?XpO5A)WyN{6hySLv(b&vkZ4^F`c8SPyh=z`tFx%f6U|xSW~?*}Er-Z0S2D
znBl2<^9!I>{el^BP(wNT2?VztopNMUSNhnLhg=ev&2F_rbV1-CtBt~UvkAU-S~VsO
zVR$+}4Tjq2Cn~&s$Ut6GWo0mx!S#q@Nn}!csT&HDMvYpJ^+aM}MFUP)Xl~ZoB>eIw
Xo7V@R;}Geg)lViT2RAGi6Oi;jetG8y

literal 0
HcmV?d00001

diff --git a/lib/java/com/google/android/material/button/res-public/values/public.xml b/lib/java/com/google/android/material/button/res-public/values/public.xml
index f754f199a83..bbbab8d708f 100644
--- a/lib/java/com/google/android/material/button/res-public/values/public.xml
+++ b/lib/java/com/google/android/material/button/res-public/values/public.xml
@@ -28,6 +28,7 @@
   <public name="materialButtonStyle" type="attr"/>
   <public name="materialIconButtonStyle" type="attr"/>
   <public name="materialIconButtonFilledStyle" type="attr"/>
+  <public name="materialIconButtonFilledTonalStyle" type="attr"/>
   <public name="materialButtonOutlinedStyle" type="attr"/>
   <public name="materialButtonToggleGroupStyle" type="attr"/>
   <public name="Widget.MaterialComponents.Button" type="style"/>
@@ -53,6 +54,7 @@
   <public name="Widget.Material3.Button.ElevatedButton.Icon" type="style"/>
   <public name="Widget.Material3.Button.IconButton" type="style"/>
   <public name="Widget.Material3.Button.IconButton.Filled" type="style"/>
+  <public name="Widget.Material3.Button.IconButton.Filled.Tonal" type="style"/>
   <public name="ShapeAppearanceOverlay.Material3.Button" type="style"/>
   <public name="ThemeOverlay.Material3.Button" type="style"/>
   <public name="ThemeOverlay.Material3.Button.ElevatedButton" type="style"/>
diff --git a/lib/java/com/google/android/material/button/res/values/attrs.xml b/lib/java/com/google/android/material/button/res/values/attrs.xml
index f5405d54ce3..7bd6adc1421 100644
--- a/lib/java/com/google/android/material/button/res/values/attrs.xml
+++ b/lib/java/com/google/android/material/button/res/values/attrs.xml
@@ -23,6 +23,8 @@
   <attr name="materialIconButtonStyle" format="reference"/>
   <!-- Style to use for Filled Material Icon Only Buttons in this theme. -->
   <attr name="materialIconButtonFilledStyle" format="reference"/>
+  <!-- Style to use for Filled Tonal Material Icon Only Buttons in this theme. -->
+  <attr name="materialIconButtonFilledTonalStyle" format="reference"/>
   <!-- Style to use for Material Outlined Buttons in this theme. -->
   <attr name="materialButtonOutlinedStyle" format="reference"/>
   <!-- Style to use for MaterialButtonToggleGroups in this theme. -->
diff --git a/lib/java/com/google/android/material/button/res/values/styles.xml b/lib/java/com/google/android/material/button/res/values/styles.xml
index 220f7c8be50..2865642e497 100644
--- a/lib/java/com/google/android/material/button/res/values/styles.xml
+++ b/lib/java/com/google/android/material/button/res/values/styles.xml
@@ -280,6 +280,11 @@
     <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button</item>
   </style>
 
+  <style name="Widget.Material3.Button.IconButton.Filled.Tonal">
+    <item name="rippleColor">@color/m3_tonal_button_ripple_color_selector</item>
+    <item name="materialThemeOverlay">@style/ThemeOverlay.Material3.Button.TonalButton</item>
+  </style>
+
   <!-- DEPRECATED -->
   <style name="ShapeAppearanceOverlay.Material3.Button" parent="">
     <item name="cornerSize">50%</item>
diff --git a/lib/java/com/google/android/material/dialog/res/values/themes_base.xml b/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
index 1eed1d4b30f..daab092ef84 100644
--- a/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
+++ b/lib/java/com/google/android/material/dialog/res/values/themes_base.xml
@@ -106,6 +106,7 @@
     <item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
     <item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
     <item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
+    <item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -332,6 +333,7 @@
     <item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
     <item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
     <item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
+    <item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
diff --git a/lib/java/com/google/android/material/theme/res/values/themes_base.xml b/lib/java/com/google/android/material/theme/res/values/themes_base.xml
index 9156fef1d9b..1ed5b79fae8 100644
--- a/lib/java/com/google/android/material/theme/res/values/themes_base.xml
+++ b/lib/java/com/google/android/material/theme/res/values/themes_base.xml
@@ -120,6 +120,7 @@
     <item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
     <item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
     <item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
+    <item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>
@@ -348,6 +349,7 @@
     <item name="linearProgressIndicatorStyle">@style/Widget.Material3.LinearProgressIndicator</item>
     <item name="materialIconButtonStyle">@style/Widget.Material3.Button.IconButton</item>
     <item name="materialIconButtonFilledStyle">@style/Widget.Material3.Button.IconButton.Filled</item>
+    <item name="materialIconButtonFilledTonalStyle">@style/Widget.Material3.Button.IconButton.Filled.Tonal</item>
     <item name="materialButtonOutlinedStyle">@style/Widget.Material3.Button.OutlinedButton</item>
     <item name="materialButtonStyle">@style/Widget.Material3.Button</item>
     <item name="materialCardViewStyle">?attr/materialCardViewOutlinedStyle</item>