chore(field): remove md3-field class prefix

PiperOrigin-RevId: 509885860
material-components · Feb 15, 2023 · c1e7759 · c1e7759
1 parent bda1b20
commit c1e7759
Show file tree

Hide file tree

Showing 12 changed files with 185 additions and 205 deletions.
diff --git a/field/harness.ts b/field/harness.ts
@@ -30,6 +30,6 @@ export class FieldHarness extends Harness<Field> {
   protected override async getInteractiveElement() {
     await this.element.updateComplete;
     return (this.element.querySelector(':not([slot])') ||
-            this.element.renderRoot.querySelector('.md3-field')) as HTMLElement;
+            this.element.renderRoot.querySelector('.field')) as HTMLElement;
   }
 }
diff --git a/field/lib/_content.scss b/field/lib/_content.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:math';
 // go/keep-sorted end
@@ -22,9 +19,9 @@ $_visible-duration: math.round(math.div($_label-duration * 5, 9));
 $_enter-delay: $_label-duration - $_visible-duration;
 
 @mixin styles() {
-  .md3-field__start,
-  .md3-field__middle,
-  .md3-field__end {
+  .start,
+  .middle,
+  .end {
     display: flex;
     align-items: center;
     box-sizing: border-box;
@@ -34,12 +31,12 @@ $_enter-delay: $_label-duration - $_visible-duration;
     position: relative;
   }
 
-  .md3-field__start,
-  .md3-field__end {
+  .start,
+  .end {
     justify-content: center;
   }
 
-  .md3-field__middle {
+  .middle {
     // The container of the field aligns sections by "center". Only the middle
     // section opts in to baseline alignment.
     //
@@ -51,7 +48,7 @@ $_enter-delay: $_label-duration - $_visible-duration;
     flex: 1;
   }
 
-  .md3-field__content {
+  .content {
     display: flex;
     flex: 1;
     opacity: 0;
@@ -60,55 +57,55 @@ $_enter-delay: $_label-duration - $_visible-duration;
     // `currentColor` to inherit this property.
     color: var(--_content-color);
 
-    .md3-field--no-label &,
-    .md3-field--focused &,
-    .md3-field--populated & {
+    .no-label &,
+    .focused &,
+    .populated & {
       opacity: 1;
       transition-delay: $_enter-delay;
     }
   }
 
-  .md3-field--disabled {
-    &.md3-field--no-label,
-    &.md3-field--focused,
-    &.md3-field--populated {
-      .md3-field__content {
+  .disabled {
+    &.no-label,
+    &.focused,
+    &.populated {
+      .content {
         opacity: var(--_disabled-content-opacity);
       }
     }
   }
 
   :hover {
-    .md3-field__content {
+    .content {
       color: var(--_hover-content-color);
     }
   }
 
-  .md3-field--focused {
-    .md3-field__content {
+  .focused {
+    .content {
       color: var(--_focus-content-color);
     }
   }
 
-  .md3-field--disabled {
-    .md3-field__content {
+  .disabled {
+    .content {
       color: var(--_disabled-content-color);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__content {
+  .error:not(.disabled) {
+    .content {
       color: var(--_error-content-color);
     }
 
     &:hover {
-      .md3-field__content {
+      .content {
         color: var(--_error-hover-content-color);
       }
     }
 
-    &.md3-field--focused {
-      .md3-field__content {
+    &.focused {
+      .content {
         color: var(--_error-focus-content-color);
       }
     }

diff --git a/field/lib/_filled-field.scss b/field/lib/_filled-field.scss
@@ -3,9 +3,6 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
@@ -44,7 +41,7 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__container {
+  .container {
     border-start-start-radius: var(--_container-shape-start-start);
     border-start-end-radius: var(--_container-shape-start-end);
     border-end-end-radius: var(--_container-shape-end-end);
@@ -79,25 +76,25 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field__label--floating {
+  .label--floating {
     position: absolute;
     top: 0;
   }
 
-  .md3-field__state-layer {
+  .state-layer {
     border-radius: inherit;
     height: 100%;
     position: absolute;
     width: 100%;
     visibility: hidden;
     z-index: -1;
 
-    .md3-field:not(.md3-field--disabled):hover & {
+    .field:not(.disabled):hover & {
       visibility: visible;
     }
   }
 
-  .md3-field__active-indicator {
+  .active-indicator {
     // Prevent click events on the indicator element since it has no width and
     // causes bugs when handled by the foundation for updating transform-origin.
     inset: auto 0 0 0;
@@ -130,7 +127,7 @@ $_animation-duration: 150ms;
         transform 0s ease $_animation-duration;
     }
 
-    .md3-field--focused & {
+    .focused & {
       &::after {
         opacity: 1;
         transform: scaleX(1);
@@ -139,78 +136,78 @@ $_animation-duration: 150ms;
     }
   }
 
-  .md3-field:not(.md3-field--with-start) {
-    .md3-field__start {
+  .field:not(.with-start) {
+    .start {
       padding-inline-start: var(--_container-padding-horizontal);
     }
   }
 
-  .md3-field:not(.md3-field--with-end) {
-    .md3-field__end {
+  .field:not(.with-end) {
+    .end {
       padding-inline-end: var(--_container-padding-horizontal);
     }
   }
 
-  .md3-field:not(.md3-field--no-label) {
-    .md3-field__container {
+  .field:not(.no-label) {
+    .container {
       padding-bottom: var(--_with-label-container-padding-vertical);
       padding-top: var(--_with-label-container-padding-vertical);
     }
 
-    .md3-field__middle {
+    .middle {
       padding-top: var(--_label-text-populated-line-height);
     }
   }
 
   :hover {
-    .md3-field__active-indicator::before {
+    .active-indicator::before {
       border-bottom-color: var(--_hover-active-indicator-color);
       border-bottom-width: var(--_hover-active-indicator-height);
     }
 
-    .md3-field__state-layer {
+    .state-layer {
       background: var(--_hover-state-layer-color);
       opacity: var(--_hover-state-layer-opacity);
     }
   }
 
   // Focus is on a separate element and does not need a focus selector
-  .md3-field__active-indicator::after {
+  .active-indicator::after {
     border-bottom-color: var(--_focus-active-indicator-color);
     border-bottom-width: var(--_focus-active-indicator-height);
   }
 
-  .md3-field--disabled {
-    .md3-field__active-indicator::before {
+  .disabled {
+    .active-indicator::before {
       border-bottom-color: var(--_disabled-active-indicator-color);
       border-bottom-width: var(--_disabled-active-indicator-height);
       opacity: var(--_disabled-active-indicator-opacity);
     }
 
-    .md3-field__container::before {
+    .container::before {
       background: var(--_disabled-container-color);
       opacity: var(--_disabled-container-opacity);
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__active-indicator::before {
+  .error:not(.disabled) {
+    .active-indicator::before {
       border-bottom-color: var(--_error-active-indicator-color);
     }
 
     &:hover {
-      .md3-field__active-indicator::before {
+      .active-indicator::before {
         border-bottom-color: var(--_error-hover-active-indicator-color);
       }
 
-      .md3-field__state-layer {
+      .state-layer {
         background: var(--_error-hover-state-layer-color);
         opacity: var(--_error-hover-state-layer-opacity);
       }
     }
 
     // Focus is on a separate element and does not need a focus selector
-    .md3-field__active-indicator::after {
+    .active-indicator::after {
       border-bottom-color: var(--_error-focus-active-indicator-color);
     }
   }

diff --git a/field/lib/_label.scss b/field/lib/_label.scss
@@ -7,11 +7,8 @@
 @use '../../sass/typography';
 // go/keep-sorted end
 
-// stylelint-disable selector-class-pattern --
-// Selector '.md3-*' should only be used in this project.
-
 @mixin styles() {
-  .md3-field__label {
+  .label {
     color: var(--_label-text-color);
     overflow: hidden;
     max-width: 100%;
@@ -38,7 +35,7 @@
     );
   }
 
-  .md3-field__label--resting {
+  .label--resting {
     position: absolute;
     top: 50%;
     transform: translateY(-50%);
@@ -53,7 +50,7 @@
     );
   }
 
-  .md3-field__label--floating {
+  .label--floating {
     @include typography.theme-styles(
       (
         size: var(--_label-text-populated-size),
@@ -62,51 +59,51 @@
     );
   }
 
-  .md3-field__label--hidden {
+  .label--hidden {
     opacity: 0;
   }
 
-  .md3-field--no-label {
-    .md3-field__label {
+  .no-label {
+    .label {
       display: none;
     }
   }
 
   :hover {
-    .md3-field__label {
+    .label {
       color: var(--_hover-label-text-color);
     }
   }
 
-  .md3-field--focused {
-    .md3-field__label {
+  .focused {
+    .label {
       color: var(--_focus-label-text-color);
     }
   }
 
-  .md3-field--disabled {
-    .md3-field__label {
+  .disabled {
+    .label {
       color: var(--_disabled-label-text-color);
 
-      &:not(.md3-field__label--hidden) {
+      &:not(.label--hidden) {
         opacity: var(--_disabled-label-text-opacity);
       }
     }
   }
 
-  .md3-field--error:not(.md3-field--disabled) {
-    .md3-field__label {
+  .error:not(.disabled) {
+    .label {
       color: var(--_error-label-text-color);
     }
 
     &:hover {
-      .md3-field__label {
+      .label {
         color: var(--_error-hover-label-text-color);
       }
     }
 
-    &.md3-field--focused {
-      .md3-field__label {
+    &.focused {
+      .label {
         color: var(--_error-focus-label-text-color);
       }
     }