OptionList consolidate se23 styles

Shopify · Aug 23, 2023 · 994cf40 · 994cf40
1 parent 380d765
commit 994cf40
Showing 1 changed file with 42 additions and 106 deletions.
diff --git a/polaris-react/src/components/OptionList/components/Option/Option.scss b/polaris-react/src/components/OptionList/components/Option/Option.scss
@@ -20,73 +20,45 @@ $control-vertical-adjustment: 2px;
     color: inherit;
   }
 
-  #{$se23} & {
-    min-height: 32px;
-
-    &:first-child {
-      margin-top: 0;
-    }
+  &:first-child {
+    margin-top: 0;
   }
 }
 
 .SingleSelectOption {
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include unstyled-button;
   text-align: left;
-  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-  @include focus-ring;
+
+  display: flex;
+  flex-wrap: nowrap;
+  justify-content: space-between;
 
   // stylelint-disable-next-line selector-max-specificity -- required for focus-visible support
   &.focused:focus-visible:not(:active) {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include focus-ring($style: 'focused');
-
-    #{$se23} & {
-      // 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);
-      background-color: var(--p-color-bg-subdued-hover);
-    }
+    outline: var(--p-border-width-2) solid
+      var(--p-color-border-interactive-focus);
+    outline-offset: var(--p-space-025);
+    background-color: var(--p-color-bg-subdued-hover);
   }
 
   &.active {
-    background: var(--p-color-bg-interactive-selected);
-
-    #{$se23} & {
-      background: var(--p-color-bg-subdued-active);
-    }
-  }
-
-  &.active::before,
-  &.select::before {
-    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
-    @include list-selected-indicator;
-
-    #{$se23} & {
-      content: none;
-    }
+    background: var(--p-color-bg-subdued-active);
   }
 
   &:not(.disabled) {
     color: inherit;
   }
 
-  .Media {
-    padding: 0 var(--p-space-2) 0 0;
+  // stylelint-disable-next-line selector-max-specificity -- specificity buster
+  &.select,
+  &.select:hover:not(.disabled),
+  &.active {
+    font-weight: var(--p-font-weight-semibold);
   }
 
-  #{$se23} & {
-    display: flex;
-    flex-wrap: nowrap;
-    justify-content: space-between;
-
-    &.select,
-    &.select:hover:not(.disabled),
-    &.active {
-      font-weight: var(--p-font-weight-semibold);
-    }
+  .Media {
+    padding: 0 var(--p-space-2) 0 0;
   }
 }
 
@@ -97,50 +69,33 @@ $control-vertical-adjustment: 2px;
   align-items: flex-start;
   width: 100%;
   cursor: pointer;
-  border-radius: var(--p-border-radius-1);
-  padding: var(--p-space-2);
+  border-radius: var(--p-border-radius-2);
+  padding: var(--p-space-1_5-experimental);
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
   @include text-breakword;
 
   &:hover:not(.disabled) {
-    background: var(--p-color-bg-hover);
     outline: var(--p-border-width-1) solid transparent;
-
-    #{$se23} & {
-      background-color: var(--p-color-bg-subdued-hover);
-    }
+    background-color: var(--p-color-bg-subdued-hover);
   }
 
-  #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-    padding: var(--p-space-1_5-experimental);
-
-    &:active:not(.disabled) {
-      background-color: var(--p-color-bg-strong-active);
-    }
-
-    &.select,
-    &.select:hover:not(.disabled) {
-      background-color: var(--p-color-bg-subdued-active);
+  &:active:not(.disabled) {
+    background: var(--p-color-bg-interactive-selected);
+  }
 
-      // stylelint-disable-next-line -- se23 no way to select parent Checkbox class without :has()
-      &.CheckboxLabel {
-        background-color: transparent;
-      }
-    }
+  // stylelint-disable-next-line selector-max-specificity -- specificity buster
+  &.select,
+  &.select:hover:not(.disabled) {
+    background-color: var(--p-color-bg-subdued-active);
 
-    // stylelint-disable-next-line -- se23 apply styles to both multi and single select
-    .Media {
-      padding: 0 var(--p-space-2) 0 0;
+    // stylelint-disable-next-line -- se23 no way to select parent Checkbox class without :has()
+    &.CheckboxLabel {
+      background-color: transparent;
     }
   }
 
-  // stylelint-disable-next-line selector-max-specificity -- generated by polaris-migrator DO NOT COPY
-  &.select,
-  &.select:hover:not(.disabled),
-  &:active:not(.disabled) {
-    background: var(--p-color-bg-interactive-selected);
-    outline: var(--p-border-width-1) solid transparent;
+  .Media {
+    padding: 0 var(--p-space-2) 0 0;
   }
 
   &.disabled {
@@ -151,28 +106,12 @@ $control-vertical-adjustment: 2px;
 }
 
 .MultiSelectOption {
-  #{$se23} & {
-    &:active:not(.disabled),
-    &.select,
-    &.select:hover:not(.disabled),
-    &:hover:not(.disabled) {
-      background-color: transparent;
-    }
-  }
-}
-
-.Checkbox {
-  box-sizing: border-box;
-  display: flex;
-  flex-shrink: 0;
-  width: 20px;
-  height: 20px;
-  margin-right: var(--p-space-2);
-  margin-left: calc(-1 * var(--p-space-025));
-
-  #{$se23} & {
-    align-items: center;
-    margin-left: 0;
+  // stylelint-disable-next-line selector-max-specificity -- specificity buster
+  &:active:not(.disabled),
+  &.select,
+  &.select:hover:not(.disabled),
+  &:hover:not(.disabled) {
+    background-color: transparent;
   }
 }
 
@@ -198,12 +137,9 @@ $control-vertical-adjustment: 2px;
 }
 
 .Icon {
-  #{$se23} & {
-    margin-left: var(--p-space-2);
+  margin-left: var(--p-space-2);
 
-    // stylelint-disable-next-line -- se23
-    svg {
-      fill: var(--p-color-icon-primary);
-    }
+  svg {
+    fill: var(--p-color-icon-primary);
   }
 }