fix(button,fab,chips,labs): text-transform inherits through shadow root

PiperOrigin-RevId: 612948745
material-components · Mar 5, 2024 · 758e615 · 758e615
1 parent b74e3dd
commit 758e615
Show file tree

Hide file tree

Showing 5 changed files with 14 additions and 0 deletions.
diff --git a/button/internal/_shared.scss b/button/internal/_shared.scss
@@ -99,6 +99,8 @@
     color: var(--_label-text-color);
     padding: 0;
     gap: inherit;
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
 
     &::-moz-focus-inner {
       padding: 0;

diff --git a/chips/internal/_shared.scss b/chips/internal/_shared.scss
@@ -222,6 +222,12 @@
     }
   }
 
+  a,
+  button {
+    // Override the user-agent text-transform: none of <button> and <a>
+    text-transform: inherit;
+  }
+
   a,
   button:not(:disabled) {
     cursor: inherit;

diff --git a/fab/internal/_shared.scss b/fab/internal/_shared.scss
@@ -55,6 +55,8 @@ $_md-sys-motion: tokens.md-sys-motion-values();
     outline: none;
     // Required for elevation and ripple to stay below content
     z-index: 0;
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     &.extended {
       width: inherit;

diff --git a/labs/navigationtab/internal/_navigation-tab.scss b/labs/navigationtab/internal/_navigation-tab.scss
@@ -76,6 +76,8 @@ $animation-duration: 100ms;
     font-size: var(--_label-text-size);
     line-height: var(--_label-text-line-height);
     font-weight: var(--_label-text-weight);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     // Firefox draws a dotted border around focused buttons unless specifically overridden.
     &::-moz-focus-inner {

diff --git a/labs/segmentedbutton/internal/_shared.scss b/labs/segmentedbutton/internal/_shared.scss
@@ -61,6 +61,8 @@
     vertical-align: middle;
     padding-inline-start: var(--_spacing-leading);
     padding-inline-end: var(--_spacing-trailing);
+    // Override the user-agent text-transform: none of <button>
+    text-transform: inherit;
 
     .md3-segmented-button__outline {
       border-color: var(--_outline-color);