From 09d2f6b146f75bbb4f25a0cd562d18e172d503c2 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Tue, 22 Aug 2023 17:43:23 +0000 Subject: [PATCH] [DataTable] Consolidate conditional logic --- .../src/components/DataTable/DataTable.scss | 244 ++++-------------- 1 file changed, 53 insertions(+), 191 deletions(-) diff --git a/polaris-react/src/components/DataTable/DataTable.scss b/polaris-react/src/components/DataTable/DataTable.scss index 5ea150b19e7..05fe315afab 100644 --- a/polaris-react/src/components/DataTable/DataTable.scss +++ b/polaris-react/src/components/DataTable/DataTable.scss @@ -6,15 +6,11 @@ position: relative; max-width: 100vw; background-color: var(--p-color-bg); - border-radius: var(--p-border-radius-2); + border-radius: 0; overflow: hidden; - #{$se23} & { - border-radius: 0; - - @media #{$p-breakpoints-sm-up} { - border-radius: var(--p-border-radius-3); - } + @media #{$p-breakpoints-sm-up} { + border-radius: var(--p-border-radius-3); } } @@ -24,11 +20,7 @@ align-items: center; justify-content: center; width: 100%; - padding: var(--p-space-4) var(--p-space-2) 0; - - #{$se23} & { - padding: var(--p-space-4) var(--p-space-3); - } + padding: var(--p-space-4) var(--p-space-3); @media #{$p-breakpoints-md-up} { justify-content: flex-end; @@ -38,45 +30,29 @@ .Navigation { display: none; - - .IncreasedTableDensity & { - padding: var(--p-space-2) var(--p-space-2) 0 var(--p-space-2); - - #{$se23} & { - padding: var(--p-space-4) var(--p-space-3); - } - } } .Pip { height: 6px; width: 6px; - background: var(--p-color-text-subdued); + background: var(--p-color-icon-subdued); border-radius: var(--p-border-radius-1); - #{$se23} & { - background: var(--p-color-icon-subdued); - } - &:not(:last-of-type) { margin-right: var(--p-space-1); } - #{$se23} &:first-of-type { + &:first-of-type { margin-left: var(--p-space-1); } - #{$se23} &:last-of-type { + &:last-of-type { margin-right: var(--p-space-1); } } .Pip-visible { - background: var(--p-color-text); - - #{$se23} & { - background: var(--p-color-icon); - } + background: var(--p-color-icon); } .ScrollContainer { @@ -101,37 +77,30 @@ .Cell { font-weight: var(--p-font-weight-regular); color: var(--p-color-text); - padding: var(--p-space-4); white-space: nowrap; text-align: left; transition: background-color var(--p-motion-duration-200) var(--p-motion-ease-in-out); - #{$se23} & { - padding: var(--p-space-2) var(--p-space-1_5-experimental); + padding: var(--p-space-2) var(--p-space-1_5-experimental); - &:first-child { - padding-left: var(--p-space-3); - } + &:first-child { + padding-left: var(--p-space-3); + } - &:last-child { - padding-right: var(--p-space-3); - } + &:last-child { + padding-right: var(--p-space-3); } .IncreasedTableDensity & { - padding: var(--p-space-2) var(--p-space-4); - - #{$se23} & { - padding: var(--p-space-1_5-experimental); + padding: var(--p-space-1_5-experimental); - &:first-child { - padding-left: var(--p-space-3); - } + &:first-child { + padding-left: var(--p-space-3); + } - &:last-child { - padding-right: var(--p-space-3); - } + &:last-child { + padding-right: var(--p-space-3); } } } @@ -148,11 +117,7 @@ &.RowCountIsEven .TableRow:nth-child(2n + 1) .Cell, &.ShowTotalsInFooter .TableRow:nth-child(2n + 1) .Cell, &.ShowTotalsInFooter.RowCountIsEven .TableRow:nth-child(2n) .Cell { - background: var(--p-color-bg-subdued); - - #{$se23} & { - background: var(--p-color-bg-secondary-experimental); - } + background: var(--p-color-bg-secondary-experimental); } } @@ -162,11 +127,7 @@ top: 0; right: 0; bottom: 0; - border-right: var(--p-border-width-1) solid var(--p-color-border-subdued); - - #{$se23} & { - border-right: var(--p-border-width-1) solid var(--p-color-border); - } + border-right: var(--p-border-width-1) solid var(--p-color-border); } .Cell-firstColumn { @@ -189,63 +150,36 @@ .Cell-header { font-weight: var(--p-font-weight-regular); color: var(--p-color-text); - border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued); + border-bottom: var(--p-border-width-1) solid var(--p-color-border); border-top: 0; - - #{$se23} & { - padding-top: var(--p-space-3); - padding-bottom: var(--p-space-3); - border-bottom: var(--p-border-width-1) solid var(--p-color-border); - } + padding-top: var(--p-space-3); + padding-bottom: var(--p-space-3); .IncreasedTableDensity & { - font-weight: var(--p-font-weight-medium); - font-size: var(--p-font-size-75); - - #{$se23} & { - font-weight: var(--p-font-weight-regular); - font-size: var(--p-font-size-80-experimental); - } + font-weight: var(--p-font-weight-regular); } } .Cell-sortable { padding: 0; - #{$se23} & { - // Specificity bump - padding: 0; - - &:first-child { - padding-left: var(--p-space-2); - } + &:first-child { + padding-left: var(--p-space-2); + } - &:last-child { - padding-right: var(--p-space-2); - } + &:last-child { + padding-right: var(--p-space-2); } .IncreasedTableDensity & { - padding: var(--p-space-2) var(--p-space-3); - - #{$se23} & { - padding: 0; - } + padding: 0; &:first-child { - padding-left: var(--p-space-3); - - #{$se23} & { - padding-left: var(--p-space-2); - } + padding-left: var(--p-space-2); } &:last-child { - padding-right: var(--p-space-3); - - #{$se23} & { - padding-right: var(--p-space-2); - } + padding-right: var(--p-space-2); } } @@ -298,15 +232,10 @@ color: var(--p-color-text); transition: color var(--p-motion-duration-200) var(--p-motion-ease); cursor: pointer; - padding: var(--p-space-2); - margin: var(--p-space-2); - - #{$se23} & { - // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- Using hard coded px values to avoid cutting off the focus ring when overflow:hidden is applied via .Cell-truncate - margin: 3px; - padding: 9px 3px; - // stylelint-enable polaris/space/declaration-property-unit-disallowed-list - } + // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- Using hard coded px values to avoid cutting off the focus ring when overflow:hidden is applied via .Cell-truncate + margin: 3px; + padding: 9px 3px; + // stylelint-enable polaris/space/declaration-property-unit-disallowed-list svg { fill: var(--p-color-icon-disabled); @@ -321,29 +250,13 @@ } .IncreasedTableDensity & { - font-weight: var(--p-font-weight-medium); - font-size: var(--p-font-size-75); - padding: 0; - padding-right: var(--p-space-1); - margin: 0; - - #{$se23} & { - font-weight: var(--p-font-weight-regular); - font-size: var(--p-font-size-80-experimental); - // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- Using hard coded px values to avoid cutting off the focus ring when overflow:hidden is applied via .Cell-truncate - margin: 3px; - padding: 3px; - // stylelint-enable polaris/space/declaration-property-unit-disallowed-list - } + // stylelint-disable polaris/space/declaration-property-unit-disallowed-list -- Using hard coded px values to avoid cutting off the focus ring when overflow:hidden is applied via .Cell-truncate + margin: 3px; + padding: 3px; + // stylelint-enable polaris/space/declaration-property-unit-disallowed-list } &:hover { - color: var(--p-color-text-interactive-hover); - - #{$se23} & { - color: var(--p-color-text); - } - .Icon { opacity: 1; } @@ -378,11 +291,7 @@ } &:hover svg { - fill: var(--p-color-icon-interactive-hover); - - #{$se23} & { - fill: var(--p-color-icon); - } + fill: var(--p-color-icon); } .Heading:focus:not(:active) { @@ -394,20 +303,11 @@ .Cell-total { font-weight: var(--p-font-weight-semibold); - background: var(--p-color-bg-subdued); - border-bottom: var(--p-border-width-1) solid var(--p-color-border-subdued); - - #{$se23} & { - background: var(--p-color-bg-secondary-experimental); - border-bottom: var(--p-border-width-1) solid var(--p-color-border); - } + background: var(--p-color-bg-secondary-experimental); + border-bottom: var(--p-border-width-1) solid var(--p-color-border); .ZebraStripingOnData.ShowTotals & { - background: var(--p-color-bg-subdued); - - #{$se23} & { - background: var(--p-color-bg-secondary-experimental); - } + background: var(--p-color-bg-secondary-experimental); } .ZebraStripingOnData.ShowTotals.RowCountIsEven &, @@ -417,49 +317,18 @@ } .Cell-total-footer { - border-top: var(--p-border-width-1) solid var(--p-color-border-subdued); + border-top: var(--p-border-width-1) solid var(--p-color-border); border-bottom: none; - - #{$se23} & { - // Specificity bump - border-bottom: none; - border-top: var(--p-border-width-1) solid var(--p-color-border); - } - - &:first-child { - border-bottom-left-radius: var(--p-border-radius-2); - - #{$se23} & { - border-radius: 0; - } - } - - &:last-child { - border-bottom-right-radius: var(--p-border-radius-2); - - #{$se23} & { - border-radius: 0; - } - } } .Footer { - padding: var(--p-space-4); - background: var(--p-color-bg-subdued); + padding: var(--p-space-2) var(--p-space-3); + background: var(--p-color-bg-secondary-experimental); color: var(--p-color-text-subdued); text-align: center; - border-top: var(--p-border-width-1) solid var(--p-color-border-subdued); - border-bottom-left-radius: var(--p-border-radius-2); - border-bottom-right-radius: var(--p-border-radius-2); - - #{$se23} & { - background: var(--p-color-bg-secondary-experimental); - padding: var(--p-space-2) var(--p-space-3); - border-top: var(--p-border-width-1) solid var(--p-color-border); - border-radius: 0; - } + border-top: var(--p-border-width-1) solid var(--p-color-border); - #{$se23} .IncreasedTableDensity & { + .IncreasedTableDensity & { padding: var(--p-space-1_5-experimental) var(--p-space-3); } @@ -508,10 +377,7 @@ .FixedFirstColumn { bottom: 0; top: auto; - - #{$se23} & { - padding-left: var(--p-space-3); - } + padding-left: var(--p-space-3); } } @@ -522,11 +388,7 @@ .StickyHeaderInner-isSticky { visibility: visible; background-color: var(--p-color-bg); - box-shadow: var(--p-shadow-md); - - #{$se23} & { - box-shadow: var(--p-shadow-xs); - } + box-shadow: var(--p-shadow-xs); } }