[DatePicker] Consolidate se23 logic and styles

Shopify · Aug 18, 2023 · 5c5cc8d · 5c5cc8d
1 parent 10f8336
commit 5c5cc8d
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 62 deletions.
diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss
@@ -2,13 +2,8 @@
 
 .DatePicker {
   // stylelint-disable-next-line -- Polaris component custom properties
-  --pc-date-picker-range-end-border-radius: var(--p-border-radius-6);
+  --pc-date-picker-range-end-border-radius: var(--p-border-radius-2);
   position: relative;
-
-  #{$se23} & {
-    // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    --pc-date-picker-range-end-border-radius: var(--p-border-radius-2);
-  }
 }
 
 .MonthLayout {
@@ -58,25 +53,17 @@
   padding: var(--p-space-2);
   background: transparent;
   border: none;
-  border-radius: var(--p-border-radius-1);
+  border-radius: var(--p-border-radius-2);
   outline: none;
   font-size: var(--p-font-size-75);
   text-align: center;
   color: var(--p-color-text);
   cursor: pointer;
 
-  #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-  }
-
   &:hover {
-    background: var(--p-color-bg-interactive-hover);
+    background: var(--p-color-bg-primary-hover);
     color: var(--p-color-text-on-color);
     outline: var(--p-border-width-1) solid transparent;
-
-    #{$se23} & {
-      background: var(--p-color-bg-primary-hover);
-    }
   }
 
   // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
@@ -93,14 +80,9 @@
 }
 
 .Day-inRange {
-  background: var(--p-color-bg-interactive-selected);
+  background: var(--p-color-bg-primary-subdued-selected);
   border-radius: 0;
 
-  #{$se23} & {
-    background: var(--p-color-bg-primary-subdued-selected);
-    border-radius: 0;
-  }
-
   @media (-ms-high-contrast: active) {
     -ms-high-contrast-adjust: none;
     background-color: Highlight;
@@ -115,13 +97,9 @@
 }
 
 .Day-selected {
-  background: var(--p-color-bg-interactive);
+  background: var(--p-color-bg-primary);
   color: var(--p-color-text-on-color);
 
-  #{$se23} & {
-    background: var(--p-color-bg-primary);
-  }
-
   @media (-ms-high-contrast: active) {
     -ms-high-contrast-adjust: none;
     background-color: Highlight;
@@ -142,10 +120,6 @@
   &:hover {
     background-color: transparent;
     color: var(--p-color-text-disabled);
-
-    #{$se23} & {
-      background-color: transparent;
-    }
   }
 
   @media (-ms-high-contrast) {
@@ -194,38 +168,23 @@
 
 .Title {
   flex: 1 1 auto;
-  margin-top: var(--p-space-05);
   padding-bottom: var(--p-space-1);
   text-align: center;
-
-  #{$se23} & {
-    font-size: var(--p-font-size-80-experimental);
-    line-height: var(--p-font-line-height-2);
-    font-weight: var(--p-font-weight-medium);
-    margin-top: 0;
-  }
+  font-size: var(--p-font-size-80-experimental);
+  line-height: var(--p-font-line-height-2);
+  font-weight: var(--p-font-weight-medium);
 }
 
 .Day-firstInRange {
-  border-radius: var(--p-border-radius-1);
-
-  #{$se23} & {
-    border-radius: var(--p-border-radius-2);
-  }
+  border-radius: var(--p-border-radius-2);
 
   &.Day-hasRange,
   &.Day-hoverRight {
-    // stylelint-disable -- generated by polaris-migrator DO NOT COPY
+    // stylelint-disable -- Polaris component custom properties
     border-radius: var(--pc-date-picker-range-end-border-radius) 0 0
       var(--pc-date-picker-range-end-border-radius);
     // stylelint-enable
 
-    #{$se23} & {
-      // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-      border-radius: var(--pc-date-picker-range-end-border-radius) 0 0
-        var(--pc-date-picker-range-end-border-radius);
-    }
-
     &::after {
       // stylelint-disable -- generated by polaris-migrator DO NOT COPY
       border-radius: var(--pc-date-picker-range-end-border-radius) 0 0
@@ -236,17 +195,11 @@
 }
 
 .Day-lastInRange {
-  // stylelint-disable -- generated by polaris-migrator DO NOT COPY
+  // stylelint-disable -- Polaris component custom properties
   border-radius: 0 var(--pc-date-picker-range-end-border-radius)
     var(--pc-date-picker-range-end-border-radius) 0;
   // stylelint-enable
 
-  #{$se23} & {
-    // stylelint-disable-next-line -- Polaris component custom properties, se23 temporary styles
-    border-radius: 0 var(--pc-date-picker-range-end-border-radius)
-      var(--pc-date-picker-range-end-border-radius) 0;
-  }
-
   &::after {
     // stylelint-disable -- generated by polaris-migrator DO NOT COPY
     border-radius: 0 var(--pc-date-picker-range-end-border-radius)

diff --git a/polaris-react/src/components/DatePicker/DatePicker.tsx b/polaris-react/src/components/DatePicker/DatePicker.tsx
@@ -251,8 +251,6 @@ export function DatePicker({
 
   const datePickerClassName = classNames(styles.DatePicker);
 
-  const {polarisSummerEditions2023} = useFeatures();
-
   return (
     <div
       id={id}
@@ -263,7 +261,7 @@ export function DatePicker({
       <div className={styles.Header}>
         <Button
           plain
-          primary={polarisSummerEditions2023}
+          primary
           icon={ArrowLeftMinor}
           accessibilityLabel={i18n.translate(
             'Polaris.DatePicker.previousMonth',
@@ -278,7 +276,7 @@ export function DatePicker({
         />
         <Button
           plain
-          primary={polarisSummerEditions2023}
+          primary
           icon={ArrowRightMinor}
           accessibilityLabel={i18n.translate('Polaris.DatePicker.nextMonth', {
             nextMonth,