TextField consolidate se23 styles

Shopify · Aug 21, 2023 · 502411f · 502411f
1 parent d19968d
commit 502411f
Showing 1 changed file with 64 additions and 159 deletions.
diff --git a/polaris-react/src/components/TextField/TextField.scss b/polaris-react/src/components/TextField/TextField.scss
@@ -17,11 +17,7 @@ $spinner-icon-size: 12px;
   cursor: text;
 
   svg {
-    fill: var(--p-color-icon);
-
-    #{$se23} & {
-      fill: var(--p-color-icon-subdued);
-    }
+    fill: var(--p-color-icon-subdued);
   }
 
   // only show the clear button when focused within the textfield
@@ -42,12 +38,10 @@ $spinner-icon-size: 12px;
   // stylelint-disable-next-line -- se23
   &:not(.disabled):not(.error):not(.readOnly)
     > .Input:hover:not(:focus-visible) {
-    #{$se23} & {
-      // stylelint-disable-next-line -- se23
-      ~ .Backdrop {
-        border-color: var(--p-color-border-input-hover);
-        background-color: var(--p-color-bg-input-hover-experimental);
-      }
+    // stylelint-disable-next-line -- se23
+    ~ .Backdrop {
+      border-color: var(--p-color-border-input-hover);
+      background-color: var(--p-color-bg-input-hover-experimental);
     }
   }
 }
@@ -75,46 +69,35 @@ $spinner-icon-size: 12px;
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   ~ .Backdrop {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      border-color: var(--p-color-border-input-active-experimental);
-      border-width: var(--p-border-width-2-experimental);
-      background-color: var(--p-color-bg-input-active-experimental);
+    border-color: var(--p-color-border-input-active-experimental);
+    border-width: var(--p-border-width-2-experimental);
+    background-color: var(--p-color-bg-input-active-experimental);
 
-      // stylelint-disable-next-line -- se23
-      @include no-focus-ring;
-      outline: var(--p-border-width-2) solid
-        var(--p-color-border-interactive-focus);
-      outline-offset: var(--p-space-025);
-    }
+    // stylelint-disable-next-line -- se23
+    @include no-focus-ring;
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-025);
   }
 }
 
 .error {
-  #{$se23} & {
-    // stylelint-disable-next-line -- se23
-    .Input:hover ~ .Backdrop,
-    .Input:focus-visible ~ .Backdrop {
-      border-color: var(--p-color-border-critical-strong-experimental);
-      background-color: var(--p-color-bg-critical-subdued);
-    }
-    // stylelint-disable-next-line -- se23
-    .Input:active ~ .Backdrop,
-    .Input:focus-visible ~ .Backdrop {
-      border-width: var(--p-border-width-2-experimental);
-    }
+  // stylelint-disable-next-line -- se23
+  .Input:hover ~ .Backdrop,
+  .Input:focus-visible ~ .Backdrop {
+    border-color: var(--p-color-border-critical-strong-experimental);
+    background-color: var(--p-color-bg-critical-subdued);
+  }
+  // stylelint-disable-next-line -- se23
+  .Input:active ~ .Backdrop,
+  .Input:focus-visible ~ .Backdrop {
+    border-width: var(--p-border-width-2-experimental);
   }
 
   // stylelint-disable-next-line selector-max-class, selector-max-combinators -- generated by polaris-migrator DO NOT COPY
   > .Input ~ .Backdrop {
     background-color: var(--p-color-bg-critical-subdued);
-    border-color: var(--p-color-border-critical);
-
-    #{$se23} & {
-      border-color: var(--p-color-border-critical-strong-experimental);
-    }
+    border-color: var(--p-color-border-critical-strong-experimental);
 
     // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY
     &::after {
@@ -125,28 +108,20 @@ $spinner-icon-size: 12px;
 
 .readOnly {
   > .Input {
-    #{$se23} & {
-      color: var(--p-color-text-subdued);
-    }
+    color: var(--p-color-text-subdued);
   }
 
   > .Backdrop {
-    background-color: var(--p-color-bg-disabled);
-
-    #{$se23} & {
-      // se23 -- specificity bump
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
-      border-color: transparent;
-    }
+    // se23 -- specificity bump
+    background-color: var(--p-color-bg-transparent-disabled-experimental);
+    border-color: transparent;
   }
 
   &.focus {
     // stylelint-disable-next-line selector-max-class -- se23
     > .Backdrop {
-      #{$se23} & {
-        background-color: var(--p-color-bg-transparent-disabled-experimental);
-        border-color: transparent;
-      }
+      background-color: var(--p-color-bg-transparent-disabled-experimental);
+      border-color: transparent;
     }
   }
 }
@@ -156,14 +131,8 @@ $spinner-icon-size: 12px;
   cursor: initial;
 
   > .Backdrop {
-    background-color: var(--p-color-bg-disabled);
-    border-color: var(--p-color-border-disabled);
-    border-top-color: var(--p-color-border-disabled);
-
-    #{$se23} & {
-      border: none;
-      background-color: var(--p-color-bg-transparent-disabled-experimental);
-    }
+    border: none;
+    background-color: var(--p-color-bg-transparent-disabled-experimental);
   }
 
   svg {
@@ -174,46 +143,29 @@ $spinner-icon-size: 12px;
 .Input {
   font-size: var(--p-font-size-200);
   font-weight: var(--p-font-weight-regular);
-  line-height: var(--p-font-line-height-2);
+  line-height: var(--p-font-line-height-3);
   letter-spacing: initial;
   position: relative;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
-  display: block;
+  display: flex;
   flex: 1 1 0%;
   width: 100%;
   min-width: 0;
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   min-height: control-height();
-  margin: 0;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  padding: control-vertical-padding() var(--p-space-3);
+  padding: var(--p-space-1_5-experimental) var(--p-space-3);
   background: none;
-  border: var(--p-border-width-1) solid transparent;
+  border: none;
   font-family: var(--p-font-family-sans);
   appearance: none;
   caret-color: var(--p-color-text);
   color: var(--p-color-text);
-
-  #{$se23} & {
-    min-height: 32px;
-    // Safari: date field alignment
-    display: flex;
-    align-items: center;
-    line-height: var(--p-font-line-height-3);
-    padding-top: var(--p-space-1_5-experimental);
-    padding-bottom: var(--p-space-1_5-experimental);
-    border: 0;
-  }
+  align-items: center;
 
   @media #{$p-breakpoints-md-up} {
-    font-size: var(--p-font-size-100);
+    font-size: var(--p-font-size-80-experimental);
     line-height: var(--p-font-line-height-2);
-
-    #{$se23} & {
-      font-size: var(--p-font-size-80-experimental);
-      line-height: var(--p-font-line-height-2);
-    }
   }
 
   .Prefix + & {
@@ -304,18 +256,12 @@ $spinner-icon-size: 12px;
   right: 0;
   bottom: 0;
   left: 0;
-  background-color: var(--p-color-bg);
-  border: var(--p-border-width-1) solid var(--p-color-border-input);
+  background-color: var(--p-color-bg-input);
+  border: var(--p-border-width-1-experimental) solid var(--p-color-border-input);
   // stylelint-disable-next-line -- hard coded to address accessbility issue https://github.com/Shopify/polaris/issues/7838
   border-top-color: #898f94;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-2);
   pointer-events: none;
-
-  #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-    border-width: var(--p-border-width-1-experimental);
-    background-color: var(--p-color-bg-input);
-  }
 }
 
 .Prefix,
@@ -326,14 +272,10 @@ $spinner-icon-size: 12px;
   flex: 0 0 auto;
   color: var(--p-color-text-subdued);
   user-select: none;
-
-  #{$se23} & {
-    line-height: var(--p-font-line-height-3);
-
-    @media #{$p-breakpoints-md-up} {
-      font-size: var(--p-font-size-80-experimental);
-      line-height: var(--p-font-line-height-2);
-    }
+  line-height: var(--p-font-line-height-3);
+  @media #{$p-breakpoints-md-up} {
+    font-size: var(--p-font-size-80-experimental);
+    line-height: var(--p-font-line-height-2);
   }
 }
 
@@ -375,14 +317,11 @@ $spinner-icon-size: 12px;
   margin: 0 var(--p-space-3) 0 var(--p-space-1);
   pointer-events: none;
   text-align: right;
+  line-height: var(--p-font-line-height-3);
 
-  #{$se23} & {
-    line-height: var(--p-font-line-height-3);
-
-    @media #{$p-breakpoints-md-up} {
-      font-size: var(--p-font-size-80-experimental);
-      line-height: var(--p-font-line-height-2);
-    }
+  @media #{$p-breakpoints-md-up} {
+    font-size: var(--p-font-size-80-experimental);
+    line-height: var(--p-font-line-height-2);
   }
 }
 
@@ -415,13 +354,9 @@ $spinner-icon-size: 12px;
 }
 
 .Spinner {
-  // stylelint-disable -- Polaris component custom properties
-  --pc-text-field-spinner-offset-large: calc(2px + var(--p-border-width-1));
-  // stylelint-enable
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   z-index: var(--pc-text-field-contents);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  margin: var(--pc-text-field-spinner-offset-large);
+  margin: var(--p-space-1);
   color: var(--p-color-icon);
   display: flex;
   visibility: hidden;
@@ -430,10 +365,7 @@ $spinner-icon-size: 12px;
   width: 22px;
   cursor: pointer;
 
-  #{$se23} & {
-    justify-content: center;
-    margin: var(--p-space-1);
-  }
+  justify-content: center;
 
   .focus &,
   .TextField:hover & {
@@ -442,21 +374,12 @@ $spinner-icon-size: 12px;
 }
 
 .SpinnerIcon {
-  height: $spinner-icon-size;
-  width: $spinner-icon-size;
-
-  #{$se23} & {
-    height: auto;
-    width: auto;
-    // stylelint-disable-next-line -- se23
-    position: absolute;
-    // Safari: prevent highlighting icon
-    user-select: none;
+  position: absolute;
+  // Safari: prevent highlighting icon
+  user-select: none;
 
-    // stylelint-disable-next-line -- se23
-    svg {
-      fill: var(--p-color-icon);
-    }
+  svg {
+    fill: var(--p-color-icon);
   }
 }
 
@@ -488,25 +411,16 @@ $spinner-icon-size: 12px;
   --pc-text-field-spinner-border-radius: calc(var(--p-border-radius-1) - 2px);
   // stylelint-enable
   background: var(--p-color-bg-strong);
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  border-radius: var(--pc-text-field-spinner-border-radius);
+  border-radius: var(--p-border-radius-1);
   display: flex;
   flex: 1 1 0%;
   justify-content: center;
   align-items: center;
   appearance: none;
   border: none;
 
-  #{$se23} & {
-    border-radius: var(--p-border-radius-1);
-
-    &:hover {
-      background: var(--p-color-bg-strong-hover);
-    }
-
-    &:active {
-      background: var(--p-color-bg-strong-active);
-    }
+  &:hover {
+    background: var(--p-color-bg-strong-hover);
   }
 
   &:focus {
@@ -520,23 +434,14 @@ $spinner-icon-size: 12px;
   &:first-child {
     // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
     border-top-right-radius: var(--pc-text-field-spinner-border-radius);
-    margin-bottom: var(--p-space-05);
-
-    #{$se23} & {
-      margin-bottom: 0;
-      border-bottom-left-radius: 0;
-      border-bottom-right-radius: 0;
-    }
+    margin-bottom: 0;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
   }
 
   &:last-child {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    border-bottom-right-radius: var(--pc-text-field-spinner-border-radius);
-
-    #{$se23} & {
-      border-top-left-radius: 0;
-      border-top-right-radius: 0;
-    }
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
   }
 
   &:not(:first-child) {