From b70302ccdf1db937e588d49e8c863cfd0621f593 Mon Sep 17 00:00:00 2001 From: Charles Lee Date: Wed, 6 Sep 2023 10:06:49 +1000 Subject: [PATCH] `IndexTable` consolidate se23 styles --- .../src/components/IndexTable/IndexTable.scss | 412 +++++------------- 1 file changed, 118 insertions(+), 294 deletions(-) diff --git a/polaris-react/src/components/IndexTable/IndexTable.scss b/polaris-react/src/components/IndexTable/IndexTable.scss index 98949db821e..b5ed20627fd 100644 --- a/polaris-react/src/components/IndexTable/IndexTable.scss +++ b/polaris-react/src/components/IndexTable/IndexTable.scss @@ -3,38 +3,27 @@ .IndexTable { // stylelint-disable -- Polaris component custom properties --pc-index-table-translate-offset: 35px; - --pc-index-table-table-header-offset: 36px; + --pc-index-table-table-header-offset: control-height() --pc-index-table-cell: 1; --pc-index-table-sticky-cell: 31; --pc-index-table-bulk-actions: 36; --pc-index-table-loading-panel: 37; // stylelint-enable position: relative; - border-radius: inherit; - - #{$se23} & { - // stylelint-disable-next-line -- Polaris component custom properties - --pc-index-table-table-header-offset: 32px; - border-radius: 0; + border-radius: 0; - @media #{$p-breakpoints-sm-up} { - border-radius: inherit; - border-start-start-radius: 0; - border-start-end-radius: 0; - } + @media #{$p-breakpoints-sm-up} { + border-radius: inherit; + border-start-start-radius: 0; + border-start-end-radius: 0; } } .IndexTableWrapper { - border-radius: inherit; - - #{$se23} & { - border-radius: 0; + border-radius: 0; - /* stylelint-disable-next-line selector-max-combinators -- se23 */ - .IndexTableWrapper-scrollBarHidden { - border-radius: inherit; - } + .IndexTableWrapper-scrollBarHidden { + border-radius: inherit; } } @@ -118,8 +107,8 @@ $loading-panel-height: 53px; } // This is to bust specificity with .Table-scrolling and TableCell:first-child or TableCell:first-child + TableCell bg color above. - #{$se23} & .TableRow-subdued { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 overrides + .TableRow-subdued { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity, selector-max-compound-selectors -- se23 overrides .TableCell-first, .TableCell-first + .TableCell { background-color: var(--p-color-bg-subdued); @@ -130,10 +119,6 @@ $loading-panel-height: 53px; .TableHeading-second { visibility: visible; background-color: var(--p-color-bg-subdued); - - #{$se23} & { - background-color: var(--p-color-bg-subdued); - } } .TableCell-first, @@ -174,14 +159,8 @@ $loading-panel-height: 53px; cursor: pointer; border-top: var(--p-border-width-1) solid var(--p-color-border-subdued); - #{$se23} & { - &.TableRow-selected { - border-color: var(--p-color-border); - } - - &:first-child { - border-top: var(--p-border-width-1) solid var(--p-color-border); - } + &:first-child { + border-top: var(--p-border-width-1) solid var(--p-color-border); } &.TableRow-unclickable { @@ -193,11 +172,7 @@ $loading-panel-height: 53px; &, .TableCell-first, .TableCell-first + .TableCell { - background-color: var(--p-color-bg-primary-subdued-selected); - - #{$se23} & { - background-color: var(--p-color-bg-success-subdued); - } + background-color: var(--p-color-bg-success-subdued); } } @@ -207,10 +182,6 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell { background-color: var(--p-color-bg-critical-subdued); - - #{$se23} & { - background-color: var(--p-color-bg-critical-subdued); - } } } @@ -220,83 +191,62 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell { background-color: var(--p-color-bg-subdued); - #{$se23} & { - color: var(--p-color-text-subdued); - } + color: var(--p-color-text-subdued); } } - &.TableRow-hovered { + &.TableRow-selected { + border-color: var(--p-color-border); // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY &, + .TableHeading-first, + .TableHeading-second, .TableCell-first, .TableCell-first + .TableCell { - background-color: var(--p-color-bg-hover); + background-color: var(--p-color-bg-primary-subdued-selected); } } - &.TableRow-selected { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY + &.TableRow-hovered { + // stylelint-disable selector-max-class, selector-max-specificity, selector-max-combinators -- se23 status hover styles &, - .TableHeading-first, - .TableHeading-second, .TableCell-first, .TableCell-first + .TableCell { - background-color: var(--p-color-bg-interactive-selected); - - #{$se23} & { - background-color: var(--p-color-bg-primary-subdued-selected); - } + background-color: var(--p-color-bg-hover); } - } - // stylelint-disable-next-line no-duplicate-selectors -- se23 temporary styles - #{$se23} & { - &.TableRow-hovered { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 temporary styles + &.statusCritical { &, .TableCell-first, .TableCell-first + .TableCell { - // deliberately moved it down in the cascade because otherwise the - // selected state overrides the hover state and I think we want it the - // other way around. - background-color: var(--p-color-bg-hover); - } - - // stylelint-disable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles - &.statusCritical { - &, - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-critical-subdued-hover); - } + background-color: var(--p-color-bg-critical-subdued-hover); } + } - &.statusSubdued { - &, - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-subdued-hover); - } + &.statusSubdued { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-subdued-hover); } + } - &.statusSuccess { - &, - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-success-subdued-hover); - } + &.statusSuccess { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-success-subdued-hover); } + } - &.TableRow-subdued { - &, - .TableCell-first, - .TableCell-first + .TableCell { - background-color: var(--p-color-bg-subdued-hover); - } + &.TableRow-subdued { + &, + .TableCell-first, + .TableCell-first + .TableCell { + background-color: var(--p-color-bg-subdued-hover); } - // stylelint-enable selector-max-class, max-nesting-depth, selector-max-combinators, selector-max-compound-selectors -- se23 status hover styles } + // stylelint-enable selector-max-class, selector-max-specificity, selector-max-combinators -- se23 status hover styles } // stylelint-disable-next-line selector-max-class -- generated by polaris-migrator DO NOT COPY @@ -306,21 +256,14 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell, .TableCell:last-child { - background-color: var(--p-color-bg-interactive-subdued-hover); - // Specificity of this selector is higher than the above, so post-se23 we - // can combine selectors to simplify this CSS / cascade. - #{$se23} & { - background-color: var(--p-color-bg-primary-subdued-hover); - } + background-color: var(--p-color-bg-primary-subdued-hover); } } } .TableRow-subdued { color: var(--p-color-text-subdued); - #{$se23} & { - background: var(--p-color-bg-subdued); - } + background: var(--p-color-bg-subdued); } .TableRow-disabled { @@ -351,11 +294,7 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell, .TableCell:last-child { - background: var(--p-color-bg-subdued); - - #{$se23} & { - background: var(--p-color-bg-secondary-experimental); - } + background: var(--p-color-bg-secondary-experimental); } } @@ -383,11 +322,7 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell, .TableCell:last-child { - background-color: var(--p-color-bg-interactive-selected); - - #{$se23} & { - background-color: var(--p-color-bg-primary-subdued-selected); - } + background-color: var(--p-color-bg-primary-subdued-selected); } } @@ -401,12 +336,7 @@ $loading-panel-height: 53px; .TableCell-first, .TableCell-first + .TableCell, .TableCell:last-child { - background-color: var(--p-color-bg-interactive-subdued-hover); - // Specificity of this selector is higher than the above, so post-se23 we - // can combine selectors to simplify this CSS / cascade. - #{$se23} & { - background-color: var(--p-color-bg-primary-subdued-hover); - } + background-color: var(--p-color-bg-primary-subdued-hover); } } } @@ -414,8 +344,10 @@ $loading-panel-height: 53px; .TableHeading { // stylelint-disable -- Polaris component custom properties - --pc-index-table-heading-padding-x: var(--p-space-4); - --pc-index-table-heading-padding-y: var(--p-space-2); + --pc-index-table-heading-padding-x: var(--p-space-1_5-experimental); + --pc-index-table-heading-padding-y: var(--p-space-1_5-experimental); + --pc-index-table-checkbox-offset-left: var(--p-space-3); + --pc-index-table-checkbox-offset-right: var(--p-space-2); background: var(--p-color-bg-subdued); padding: var(--pc-index-table-heading-padding-y) var(--pc-index-table-heading-padding-x); @@ -427,21 +359,12 @@ $loading-panel-height: 53px; white-space: nowrap; border: 0; - #{$se23} & { - // stylelint-disable -- Polaris component custom properties - --pc-index-table-heading-padding-x: var(--p-space-1_5-experimental); - --pc-index-table-heading-padding-y: var(--p-space-1_5-experimental); - --pc-index-table-checkbox-offset-left: var(--p-space-3); - --pc-index-table-checkbox-offset-right: var(--p-space-2); - // stylelint-enable - - &:first-child:not(.TableHeading-flush) { - padding-left: var(--p-space-3); - } + &:first-child:not(.TableHeading-flush) { + padding-left: var(--p-space-3); + } - &:last-child:not(.TableHeading-flush) { - padding-right: var(--p-space-3); - } + &:last-child:not(.TableHeading-flush) { + padding-right: var(--p-space-3); } } @@ -466,40 +389,28 @@ $loading-panel-height: 53px; } .TableHeading-flush { - padding: 0; - - #{$se23} & { - // stylelint-disable -- se23 polaris component custom properties - /* + // stylelint-disable -- se23 polaris component custom properties + /* We specify 0rem here because our bundle process uses postcss-pxtorem. This forceable converts 0px to 0 which is invalid for calcs but leaves rems alone. See https://github.com/cuth/postcss-pxtorem/blob/122649015322214f8e9d1ac852eb11c0791b634b/index.js#L52 */ - --pc-index-table-heading-padding-x: 0rem; - padding: var(--pc-index-table-heading-padding-y) - var(--pc-index-table-heading-padding-x); - // stylelint-enable - } + --pc-index-table-heading-padding-x: 0rem; + padding: var(--pc-index-table-heading-padding-y) + var(--pc-index-table-heading-padding-x); + // stylelint-enable } .TableHeading-first { position: sticky; left: 0; - // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- hardcoding these values to avoid variable collision for pse23 specific changes. - // These should be removed post pse23, so these hardcoded values are temporary. - padding-left: 16px; - padding-right: 18px; - // stylelint-enable + // stylelint-disable-next-line -- se23 specificity overrides + padding-left: var(--pc-index-table-checkbox-offset-left); + // stylelint-disable-next-line -- se23 specificity overrides + padding-right: var(--pc-index-table-checkbox-offset-right); width: var(--p-space-5); // stylelint-disable-next-line -- first column (checkbox) overlaps other headings on horizontal scroll z-index: var(--pc-index-table-sticky-cell); - - #{$se23} & { - // stylelint-disable-next-line -- se23 specificity overrides - padding-left: var(--pc-index-table-checkbox-offset-left); - // stylelint-disable-next-line -- se23 specificity overrides - padding-right: var(--pc-index-table-checkbox-offset-right); - } } .TableHeadingSortButton { @@ -586,11 +497,7 @@ $loading-panel-height: 53px; } .TableHeadingUnderline { - border-bottom: var(--p-border-width-2) dotted var(--p-color-border-subdued); - - #{$se23} & { - border-bottom: var(--p-border-width-2) dotted var(--p-color-border-strong); - } + border-bottom: var(--p-border-width-2) dotted var(--p-color-border-strong); } .TableHeadingTooltipUnderlinePlaceholder { @@ -622,16 +529,13 @@ $loading-panel-height: 53px; } .FirstStickyHeaderElement { - padding-right: var(--p-space-05); - #{$se23} & { - padding-right: 0; - } + padding-right: 0; } .TableHeading-second:not(.TableHeading-unselectable) { padding-left: 0; - #{$se23} &:not(.TableHeading-flush) { + &:not(.TableHeading-flush) { // stylelint-disable-next-line -- Polaris custom property padding-left: var(--pc-index-table-heading-padding-x); } @@ -644,7 +548,7 @@ $loading-panel-height: 53px; padding: var(--p-space-2) var(--p-space-4); white-space: nowrap; - #{$se23} &:not(.TableCell-flush) { + &:not(.TableCell-flush) { padding: var(--p-space-1_5-experimental); &:first-child { @@ -660,12 +564,8 @@ $loading-panel-height: 53px; .TableCell-flush { padding: 0; - #{$se23} & { + &:first-child { padding: 0; - - &:first-child { - padding: 0; - } } } @@ -674,18 +574,13 @@ $loading-panel-height: 53px; left: 0; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: var(--pc-index-table-sticky-cell); - padding: var(--p-space-2) 0; + padding: var(--p-space-1_5-experimental) 0; vertical-align: middle; - - #{$se23} & { - padding: var(--p-space-1_5-experimental) 0; - } } .TableCell-first + .TableCell { // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY left: var(--pc-checkbox-offset); - padding-left: 0; } .Table-sticky { @@ -745,19 +640,14 @@ $loading-panel-height: 53px; // stylelint-disable-next-line selector-max-combinators, selector-max-class, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .TableCell:first-child { background-color: var(--p-color-bg-subdued); - #{$se23} & { - color: var(--p-color-text-subdued); - } + color: var(--p-color-text-subdued); } } - #{$se23} & { - // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above. - // stylelint-disable-next-line selector-max-combinators -- se23 override - .TableRow-subdued:not(.TableRow-hovered) { - // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-compound-selectors -- se23 override - .TableCell:first-child { - background-color: var(--p-color-bg-subdued); - } + // This is to bust specificity with Table-unselectable and TableCel:first-child bg color above. + .TableRow-subdued:not(.TableRow-hovered) { + // stylelint-disable-next-line selector-max-class, selector-max-combinators, selector-max-specificity -- se23 override + .TableCell:first-child { + background-color: var(--p-color-bg-subdued); } } @@ -773,11 +663,7 @@ $loading-panel-height: 53px; .TableCell:last-child, .TableHeading-last { @media #{$p-breakpoints-sm-up} { - filter: drop-shadow(-1px 0 0 var(--p-color-border-subdued)); - - #{$se23} & { - filter: drop-shadow(-1px 0 0 var(--p-color-border)); - } + filter: drop-shadow(-1px 0 0 var(--p-color-border)); } } } @@ -800,82 +686,54 @@ $loading-panel-height: 53px; background-color: var(--p-color-bg-subdued); // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: auto; - - #{$se23} & { - background-color: var(--p-color-bg-subdued); - } } } // stylelint-disable selector-max-class, selector-max-combinators, selector-max-specificity -- generated by polaris-migrator DO NOT COPY .statusSuccess { .TableCell:last-child { - background-color: var(--p-color-bg-primary-subdued-selected); - - #{$se23} & { - background-color: var(--p-color-bg-success-subdued); - } + background-color: var(--p-color-bg-success-subdued); } } .statusCritical { .TableCell:last-child { - background-color: var(--p-color-bg-primary-subdued-selected); - - #{$se23} & { - background-color: var(--p-color-bg-critical-subdued); - } + background-color: var(--p-color-bg-critical-subdued); } } .statusSubdued { .TableCell:last-child { background-color: var(--p-color-bg-subdued); - #{$se23} & { - color: var(--p-color-text-subdued); - } - } - } - - .TableRow-hovered { - .TableCell:last-child { - background-color: var(--p-color-bg-hover); + color: var(--p-color-text-subdued); } } .TableRow-selected { .TableCell:last-child { - background-color: var(--p-color-bg-interactive-selected); - - #{$se23} & { - background-color: var(--p-color-bg-primary-subdued-selected); - } + background-color: var(--p-color-bg-primary-subdued-selected); } } - #{$se23} & .TableRow-selected.TableRow-subdued { + .TableRow-selected.TableRow-subdued { color: var(--p-color-text-subdued); } - #{$se23} & { - .TableRow-hovered { - // stylelint-disable-next-line selector-max-compound-selectors -- se23 temporary styles - .TableCell:last-child { - // deliberately moved it down in the cascade because otherwise the - // selected state overrides the hover state and I think we want it the - // other way around. - background-color: var(--p-color-bg-hover); - } + .TableRow-hovered { + .TableCell:last-child { + // deliberately moved it down in the cascade because otherwise the + // selected state overrides the hover state and I think we want it the + // other way around. + background-color: var(--p-color-bg-hover); } + } - .TableRow-hovered.TableRow-selected { - // stylelint-disable-next-line selector-max-compound-selectors -- se23 temporary styles - .TableCell:last-child { - // deliberately moved it down in the cascade because otherwise the - // selected state overrides the hover state and I think we want it the - // other way around. - background-color: var(--p-color-bg-primary-subdued-hover); - } + .TableRow-hovered.TableRow-selected { + .TableCell:last-child { + // deliberately moved it down in the cascade because otherwise the + // selected state overrides the hover state and I think we want it the + // other way around. + background-color: var(--p-color-bg-primary-subdued-hover); } } } @@ -930,32 +788,23 @@ $loading-panel-height: 53px; } .StickyTableHeading-second-scrolling { - padding: 0 var(--p-space-025) 0 var(--p-space-4); + // stylelint-disable-next-line -- Polaris custom property + padding: 0 var(--p-space-025) 0 + calc( + var(--pc-index-table-checkbox-offset-right) + + var(--pc-index-table-heading-padding-x) + ); display: none; @media #{$p-breakpoints-sm-up} { display: block; } - - #{$se23} & { - // stylelint-disable-next-line -- Polaris custom property - padding: 0 var(--p-space-025) 0 - calc( - var(--pc-index-table-checkbox-offset-right) + - var(--pc-index-table-heading-padding-x) - ); - } } .StickyTableHeader-isSticky { visibility: visible; - background-color: var(--p-color-bg); - box-shadow: var(--p-shadow-md); - - #{$se23} & { - box-shadow: var(--p-shadow-xs); - background-color: var(--p-color-bg-secondary-experimental); - } + box-shadow: var(--p-shadow-xs); + background-color: var(--p-color-bg-secondary-experimental); } .IndexTable:hover { @@ -994,28 +843,14 @@ $loading-panel-height: 53px; .SelectAllActionsWrapper { visibility: visible; - position: relative; + position: static; // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY z-index: var(--pc-index-table-bulk-actions); - top: 0; - left: 0; - right: 0; - padding: 0 var(--p-space-2) 0 var(--p-space-4); background: var(--p-color-bg); - - // TODO: Remove this; condensed doesn't have bulk actions / select all - &.StickyTableHeader-condensed { - padding-top: calc(var(--p-space-2) + var(--p-space-05)); - } - - #{$se23} & { - // Note: this undoes top/left/right positioning from pre-se23 - position: static; - padding-left: var(--p-space-3); - padding-top: var(--p-space-1_5-experimental); - padding-bottom: var(--p-space-1_5-experimental); - line-height: var(--p-font-line-height-2); - } + padding-left: var(--p-space-3); + padding-top: var(--p-space-1_5-experimental); + padding-bottom: var(--p-space-1_5-experimental); + line-height: var(--p-font-line-height-2); } $scroll-bar-size: var(--p-space-2); @@ -1029,18 +864,11 @@ $scroll-bar-size: var(--p-space-2); bottom: 0; padding: var(--p-space-05); background-color: var(--p-color-bg); - border-bottom-right-radius: var(--p-border-radius-2); - border-bottom-left-radius: var(--p-border-radius-2); - - #{$se23} & { - border-bottom-right-radius: 0; - border-bottom-left-radius: 0; - @media #{$p-breakpoints-sm-up} { - border-bottom-right-radius: var(--p-border-radius-2); - border-bottom-left-radius: var(--p-border-radius-2); - padding: var(--p-space-05) var(--p-space-2); - } + @media #{$p-breakpoints-sm-up} { + border-bottom-right-radius: var(--p-border-radius-2); + border-bottom-left-radius: var(--p-border-radius-2); + padding: var(--p-space-05) var(--p-space-2); } } @@ -1052,11 +880,6 @@ $scroll-bar-size: var(--p-space-2); .scrollBarContainerHidden { height: 0; padding: 0; - - #{$se23} & { - // Specificity bump - padding: 0; - } } .ScrollBar { @@ -1127,8 +950,9 @@ $scroll-bar-size: var(--p-space-2); margin: 0; padding: 0; overflow: hidden; + border-top: 0; - #{$se23} & .TableRow:first-child { + .TableRow:first-child { border-top: 0; } }