From 5c5cc8d17884ced39048d004814cf3f8ff522900 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Fri, 18 Aug 2023 18:41:03 +0000 Subject: [PATCH] [DatePicker] Consolidate se23 logic and styles --- .../src/components/DatePicker/DatePicker.scss | 69 +++---------------- .../src/components/DatePicker/DatePicker.tsx | 6 +- 2 files changed, 13 insertions(+), 62 deletions(-) diff --git a/polaris-react/src/components/DatePicker/DatePicker.scss b/polaris-react/src/components/DatePicker/DatePicker.scss index 79c2a6ac244..437adb59555 100644 --- 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 index 393099031e0..58d6116f360 100644 --- 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 (